지난 파이콘 한국 이미지 추가

Author: constmoon

frontend/components/core/Image.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const ImageBox = styled.img`
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+`
+
+interface ImageProps {
+    src: string
+    alt: string
+}
+
+const Image = (props: ImageProps) => {
+    return <ImageBox src={props.src} alt={props.alt} />
+}
+
+export default Image

frontend/data/constants/resources.ts

@@ -0,0 +1,22 @@
+const Resources = {
+    previousPyconkrImage: {
+        PYCONKR_2019_IMG:
+            'https://live.staticflickr.com/65535/48715744618_1e10fe2748_z.jpg',
+        PYCONKR_2018_IMG:
+            'https://live.staticflickr.com/4841/44768712850_878001fc21_z.jpg',
+
+        PYCONKR_2017_IMG:
+            'https://live.staticflickr.com/4402/36867958855_ef8e526e38_z.jpg',
+
+        PYCONAPAC_2016_IMG:
+            'https://live.staticflickr.com/8558/30070813755_b738c7036b_z.jpg',
+
+        PYCONKR_2015_IMG:
+            'https://live.staticflickr.com/5773/20996231336_f94423fd5e_z.jpg',
+
+        PYCONKR_2014_IMG:
+            'https://live.staticflickr.com/3912/14958407280_c7e9e6717e_z.jpg'
+    }
+}
+
+export default Resources

frontend/locales/ko/pageTitle.ts

@@ -8,7 +8,7 @@ export default {
     [PageName.Contribute]: '기여하기',
     [PageName.Sponsor]: '후원하기',
     [PageName.SponsorProspectus]: '후원사 안내',
-    [PageName.SponsorBenefit]: '후원사 혜택',
+    [PageName.SponsorBenefit]: '후원사 혜택 설명',
     [PageName.SponsorTerms]: '후원사 약관',
     [PageName.CoC]: '행동 강령'
 }

frontend/pages/about/previous-pyconkr.tsx

@@ -7,11 +7,33 @@ import PageTitle from '../../components/core/PageTitle'
 import { PreviousPyconkr } from '../../data/enums/PreviousPyconkr'
 import { Heading3, Paragraph, ColorLink } from '../../assets/styles/typo'
 import styled from 'styled-components'
+import Resource from '../../data/constants/resources'
+import Image from '../../components/core/Image'
+import { media } from '../../assets/styles/mixin'
 
+const Row = styled.div`
+    display: flex;
+    ${media.mobile(`
+        flex-direction: column;
+    `)}
+`
+const Col = styled.div`
+    width: 50%;
+    ${media.mobile(`
+        width: 100%;
+    `)}
+    & + & {
+        margin-left: 1.2rem;
+        ${media.mobile(`
+            margin-left: 0;
+            margin-top: 1.2rem;
+        `)}
+    }
+`
 const Container = styled.div`
     padding-bottom: 2rem;
     & + & {
-        padding-top: 2rem;
+        padding-top: 5rem;
     }
 `
 const ParagraphContainer = styled.div`
@@ -25,23 +47,44 @@ const Link = styled(ColorLink)`
 const PreviousPyconkrPage: NextPage = (props: PageProps) => {
     const { t } = useTranslation()
     const keys = Object.keys(PreviousPyconkr)
+    const images = Resource.previousPyconkrImage
 
     return (
         <>
             <PageTitle title={props.pageName} />
-            {keys.map((item, index) => (
-                <Container key={index}>
-                    <Heading3>{t(`contentDescription:${item}.title`)}</Heading3>
-                    <ParagraphContainer>
-                        <Paragraph>
-                            {t(`contentDescription:${item}.paragraph`)}
-                        </Paragraph>
-                    </ParagraphContainer>
-                    <Link href={t(`contentDescription:${item}.url`)}>
-                        {t(`contentDescription:${item}.url`)}
-                    </Link>
-                </Container>
-            ))}
+            {keys.map((item, index) => {
+                const imageKey = `${item}_IMG`
+                const imageUrl = images[imageKey] ?? ''
+                return (
+                    <Container key={index}>
+                        <Row>
+                            <Col>
+                                <Image
+                                    src={imageUrl}
+                                    alt={`image of ${item}`}
+                                />
+                            </Col>
+                            <Col>
+                                <Heading3>
+                                    {t(`contentDescription:${item}.title`)}
+                                </Heading3>
+                                <ParagraphContainer>
+                                    <Paragraph>
+                                        {t(
+                                            `contentDescription:${item}.paragraph`
+                                        )}
+                                    </Paragraph>
+                                </ParagraphContainer>
+                                <Link
+                                    href={t(`contentDescription:${item}.url`)}
+                                >
+                                    {t(`contentDescription:${item}.url`)}
+                                </Link>
+                            </Col>
+                        </Row>
+                    </Container>
+                )
+            })}
         </>
     )
 }