Skip to content

Commit 7130bd5

Browse files
constmoonconstmoon
committed
페이지와 컴포넌트 분리중
1 parent f44874c commit 7130bd5

File tree

5 files changed

+105
-79
lines changed

5 files changed

+105
-79
lines changed

frontend/components/service/home/Main.tsx renamed to frontend/components/service/Home/Main.tsx

File renamed without changes.

‎frontend/components/service/PreviousPyconkr/PreviousPyconkrList.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React from 'react'
2+
import Image from '../../core/Image'
3+
import { ColorLink, Heading3, Paragraph } from '../../../assets/styles/typo'
4+
import { media } from '../../../assets/styles/mixin'
5+
import styled from 'styled-components'
6+
import { IPreviousPyconkr } from '../../../interfaces/IPreviousPyconkr'
7+
import { useTranslation } from 'react-i18next'
8+
import Resource from '../../../data/constants/resources'
9+
10+
const Row = styled.div`
11+
display: flex;
12+
${media.mobile(`
13+
flex-direction: column;
14+
`)}
15+
`
16+
const Col = styled.div`
17+
width: 50%;
18+
${media.mobile(`
19+
width: 100%;
20+
`)}
21+
& + & {
22+
margin-left: 1.6rem;
23+
${media.mobile(`
24+
margin-left: 0;
25+
margin-top: 1.2rem;
26+
`)}
27+
}
28+
`
29+
const Container = styled.div`
30+
padding-bottom: 2rem;
31+
& + & {
32+
padding-top: 5rem;
33+
${media.mobile(`
34+
padding-top: 3rem;
35+
`)}
36+
}
37+
`
38+
const ParagraphContainer = styled.div`
39+
margin-top: 1rem;
40+
`
41+
const Link = styled(ColorLink)`
42+
display: inline-block;
43+
margin-top: 0.5rem;
44+
`
45+
46+
interface PreviousPyconkrList {
47+
keys: IPreviousPyconkr[]
48+
}
49+
50+
const PreviousPyconkrList: React.FC<PreviousPyconkrList> = ({ keys }) => {
51+
const { t } = useTranslation()
52+
const images = Resource.previousPyconkrImage
53+
54+
return (
55+
<>
56+
{keys.map((item, index) => {
57+
const { year } = item
58+
const imageKey = `${year}_IMG`
59+
const imageUrl = images[imageKey] ?? ''
60+
return (
61+
<Container key={index}>
62+
<Row>
63+
<Col>
64+
<Image
65+
src={imageUrl}
66+
alt={`Image of ${year}`}
67+
/>
68+
</Col>
69+
<Col>
70+
<Heading3>
71+
{t(`contentDescription:${year}.title`)}
72+
</Heading3>
73+
<ParagraphContainer>
74+
<Paragraph>
75+
{t(
76+
`contentDescription:${year}.paragraph`
77+
)}
78+
</Paragraph>
79+
</ParagraphContainer>
80+
<Link
81+
href={t(`contentDescription:${year}.url`)}
82+
>
83+
{t(`contentDescription:${year}.url`)}
84+
</Link>
85+
</Col>
86+
</Row>
87+
</Container>
88+
)
89+
})}
90+
</>
91+
)
92+
}
93+
94+
export default PreviousPyconkrList

‎frontend/interfaces/IPreviousPyconkr.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { PreviousPyconkr } from '../data/enums/PreviousPyconkr'
2+
3+
export interface IPreviousPyconkr {
4+
year: PreviousPyconkr
5+
}

‎frontend/pages/about/previous-pyconkr.tsx‎

Lines changed: 5 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,20 @@
11
import React from 'react'
22
import { GetServerSideProps, NextPage } from 'next'
33
import { PageProps } from '../../interfaces/PageProps'
4-
import { useTranslation } from 'react-i18next'
54
import { PageName } from '../../data/enums/PageName'
65
import PageTitle from '../../components/core/PageTitle'
76
import { PreviousPyconkr } from '../../data/enums/PreviousPyconkr'
8-
import { Heading3, Paragraph, ColorLink } from '../../assets/styles/typo'
9-
import styled from 'styled-components'
10-
import Resource from '../../data/constants/resources'
11-
import Image from '../../components/core/Image'
12-
import { media } from '../../assets/styles/mixin'
13-
14-
const Row = styled.div`
15-
display: flex;
16-
${media.mobile(`
17-
flex-direction: column;
18-
`)}
19-
`
20-
const Col = styled.div`
21-
width: 50%;
22-
${media.mobile(`
23-
width: 100%;
24-
`)}
25-
& + & {
26-
margin-left: 1.6rem;
27-
${media.mobile(`
28-
margin-left: 0;
29-
margin-top: 1.2rem;
30-
`)}
31-
}
32-
`
33-
const Container = styled.div`
34-
padding-bottom: 2rem;
35-
& + & {
36-
padding-top: 5rem;
37-
${media.mobile(`
38-
padding-top: 3rem;
39-
`)}
40-
}
41-
`
42-
const ParagraphContainer = styled.div`
43-
margin-top: 1rem;
44-
`
45-
const Link = styled(ColorLink)`
46-
display: inline-block;
47-
margin-top: 0.5rem;
48-
`
7+
import PreviousPyconkrList from '../../components/service/PreviousPyconkr/PreviousPyconkrList'
498

509
const PreviousPyconkrPage: NextPage = (props: PageProps) => {
51-
const { t } = useTranslation()
52-
const keys = Object.keys(PreviousPyconkr)
53-
const images = Resource.previousPyconkrImage
10+
const keys = Object.keys(PreviousPyconkr).map((item: PreviousPyconkr) => ({
11+
year: item
12+
}))
5413

5514
return (
5615
<>
5716
<PageTitle title={props.pageName} />
58-
{keys.map((item, index) => {
59-
const imageKey = `${item}_IMG`
60-
const imageUrl = images[imageKey] ?? ''
61-
return (
62-
<Container key={index}>
63-
<Row>
64-
<Col>
65-
<Image
66-
src={imageUrl}
67-
alt={`image of ${item}`}
68-
/>
69-
</Col>
70-
<Col>
71-
<Heading3>
72-
{t(`contentDescription:${item}.title`)}
73-
</Heading3>
74-
<ParagraphContainer>
75-
<Paragraph>
76-
{t(
77-
`contentDescription:${item}.paragraph`
78-
)}
79-
</Paragraph>
80-
</ParagraphContainer>
81-
<Link
82-
href={t(`contentDescription:${item}.url`)}
83-
>
84-
{t(`contentDescription:${item}.url`)}
85-
</Link>
86-
</Col>
87-
</Row>
88-
</Container>
89-
)
90-
})}
17+
<PreviousPyconkrList keys={keys} />
9118
</>
9219
)
9320
}

‎frontend/pages/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import type { NextPage } from 'next'
3-
import MainBackground from '../components/service/home/Main'
3+
import MainBackground from '../components/service/Home/Main'
44

55
const Index: NextPage = () => {
66
return (

0 commit comments

Comments
 (0)