장소 안내 페이지 추가

constmoon · constmoon · commit b9ef4ee64828 · 2022-09-26T02:21:52.000+09:00
diff --git a/frontend/components/service/Home/MainIdentity.tsx b/frontend/components/service/Home/MainIdentity.tsx
@@ -5,6 +5,9 @@ import { useTranslation } from 'react-i18next'
 
 const MainTheme = styled.div`
     height: calc(100vh - 100px);
+    ${media.mobile(`
+        height: calc(100vh - 120px);
+    `)}
 `
 
 const Window = styled.div`
diff --git a/frontend/data/enums/PageName.ts b/frontend/data/enums/PageName.ts
@@ -4,6 +4,7 @@ export enum PageName {
     Pyconkr2022 = 'Pyconkr2022',
     PreviousPyconkr = 'PreviousPyconkr',
     Ticket = 'Ticket',
+    Venue = 'Venue',
     Program = 'Program',
     Keynote = 'Keynote',
     Talks = 'Talks',
diff --git a/frontend/locales/en/label.ts b/frontend/locales/en/label.ts
@@ -17,9 +17,10 @@ export default {
             desc:
                 'The slogan for PyCon Korea 2022 is "Do Anything with Python".\n' +
                 'We all have the potential to create anything as long as we love Python!\n' +
+                'PyCon Korea will open this year as well!\n' +
                 'Pythonistas from all walks of life share their experiences and their dreams.\n' +
-                'PyCon will open this year as well!\n' +
-                'See you in PyCon KR 2022.'
+                'PyCon Korea 2022 will be held both online and offline.\n' +
+                'See you in PyCon Korea 2022.'
         },
         diff: {
             title: "What's the difference between PyCon and other developer's conferences?",
@@ -49,5 +50,13 @@ export default {
         'PyCon Korea 2022 merchandises and offline tickets are available at Festa (festa.io).\nOffline ticket has limited quantities are sold and may be sold out early, so please purchase as soon as possible.',
     buyTicket: 'Buy ticket',
     locationInfo: 'Simultaneous online-offline',
-    eventDetail: 'About Pycon Korea 2022'
+    eventDetail: 'About Pycon Korea 2022',
+    venueTitle: 'Community House MASIL',
+    venueAddress: '14, Myeongdong 11-gil, Jung-gu, Seoul, Republic of Korea',
+    noParking: 'Parking is not supported, so please use public transportation.',
+    elevatorAvailable: 'Elevator is available.',
+    floorInfo: 'Floor Information',
+    youtubeStreaming:
+        'PyCon Korea 2022 will be held both online and offline. The talks will be streamed on the PyCon Korea YouTube(https://www.youtube.com/c/PyConKRtube).',
+    pyConKrYoutube: 'PyCon Korea YouTube'
 }
diff --git a/frontend/locales/en/pageTitle.ts b/frontend/locales/en/pageTitle.ts
@@ -3,9 +3,10 @@ import { PageName } from '../../data/enums/PageName'
 export default {
     [PageName.Home]: 'PYCONKR 2022',
     [PageName.About]: 'About',
-    [PageName.Pyconkr2022]: 'Pycon Korea 2022',
+    [PageName.Pyconkr2022]: 'PyCon Korea 2022',
     [PageName.PreviousPyconkr]: 'Previous PyCon Korea',
-    [PageName.Ticket]: '티켓 구입',
+    [PageName.Ticket]: 'Buy Ticket',
+    [PageName.Venue]: 'Venue',
     [PageName.Program]: 'Program',
     [PageName.Keynote]: 'Keynote',
     [PageName.Talks]: 'Talks',
diff --git a/frontend/locales/ko/label.ts b/frontend/locales/ko/label.ts
@@ -19,6 +19,7 @@ export default {
                 '우리 모두는 어떤 것이든 만들어 낼 수 있는 잠재력을 가지고 있습니다. 파이썬을 좋아하는 마음만 있다면요!\n' +
                 '올해도 어김없이 파이콘이 열립니다.\n' +
                 '파이썬 하나로 다양한 파이써니스타들이 경험을 나누고 꿈을 이야기합니다.\n' +
+                '파이콘 한국 2022는 온라인과 오프라인 동시에 진행됩니다.\n' +
                 '파이콘 한국 2022에서 만나요.'
         },
         diff: {
@@ -54,5 +55,13 @@ export default {
     eventDetail: '행사 상세',
     aboutEvent:
         '파이콘 한국은 한국의 파이썬 개발자들이 지식을 공유하고 만남을 갖기 위한 장입니다.\n파이콘 한국 2022은 온라인과 오프라인 동시에 진행됩니다.',
-    sponsorList: '후원사 목록'
+    sponsorList: '후원사 목록',
+    venueTitle: '커뮤니티 하우스 마실',
+    venueAddress: '주소: 서울시 중구 명동11길 14',
+    noParking: '주차는 지원되지 않습니다. 대중교통 이용을 부탁드립니다.',
+    elevatorAvailable: '엘리베이터 이용이 가능합니다.',
+    floorInfo: '층별 안내',
+    youtubeStreaming:
+        '파이콘 한국 2022는 파이콘 한국 유튜브 채널(https://www.youtube.com/c/PyConKRtube)에서 시청 가능합니다. 세션은 온라인과 오프라인 동시에 진행됩니다.',
+    pyConKrYoutube: '파이콘 한국 유튜브'
 }
diff --git a/frontend/locales/ko/pageTitle.ts b/frontend/locales/ko/pageTitle.ts
@@ -6,6 +6,7 @@ export default {
     [PageName.Pyconkr2022]: '파이콘 한국 2022',
     [PageName.PreviousPyconkr]: '지난 파이콘 한국',
     [PageName.Ticket]: '티켓 구입',
+    [PageName.Venue]: '장소 안내',
     [PageName.Program]: '프로그램',
     [PageName.Keynote]: '키노트',
     [PageName.Talks]: '발표',
diff --git a/frontend/pages/about/venue.tsx b/frontend/pages/about/venue.tsx
@@ -0,0 +1,77 @@
+import React from 'react'
+import type { NextPage, GetServerSideProps } from 'next'
+import { useTranslation } from 'react-i18next'
+import { PageName } from '../../data/enums/PageName'
+import PageTitle from '../../components/core/PageTitle'
+import { PageProps } from '../../interfaces/PageProps'
+import Image from 'next/image'
+import styled from 'styled-components'
+import FirstFloorMap from '../../public/images/1st-floor.jpg'
+import SecondFloorMap from '../../public/images/2nd-floor.jpg'
+import VenueMap from '../../public/images/venue.jpg'
+import { Heading3, Heading4 } from '../../assets/styles/typo'
+import Linkify from 'react-linkify'
+
+const ImageBlock = styled(Image)`
+    display: block;
+    margin: 1rem 0;
+`
+const VenueInfo = styled.div`
+    margin-bottom: 4rem;
+    a {
+        color: ${(props) => props.theme.colors.blue0};
+    }
+`
+const Description = styled.div`
+    margin: 1rem 0 2rem;
+`
+const List = styled.li`
+    list-style: inside;
+`
+const FloorTitle = styled(Heading4)`
+    margin: 1rem 0;
+`
+
+const TalkSchedule: NextPage = (props: PageProps) => {
+    const { t } = useTranslation()
+
+    return (
+        <>
+            <PageTitle title={props.pageName} />
+            <VenueInfo>
+                <Heading3 useGradient={true}>
+                    {t('label:pyConKrYoutube')}
+                </Heading3>
+                <Description>
+                    <Linkify>{t('label:youtubeStreaming')}</Linkify>
+                </Description>
+            </VenueInfo>
+            <VenueInfo>
+                <Heading3 useGradient={true}>{t('label:venueTitle')}</Heading3>
+                <ImageBlock src={VenueMap} alt={'Venue Image'} />
+                <Description>
+                    <ul>
+                        <List>{t('label:venueAddress')}</List>
+                        <List>{t('label:elevatorAvailable')}</List>
+                        <List>{t('label:noParking')}</List>
+                    </ul>
+                </Description>
+                <Heading3 useGradient={true}>{t('label:floorInfo')}</Heading3>
+                <FloorTitle>1층</FloorTitle>
+                <ImageBlock src={FirstFloorMap} alt={'First Floor Image'} />
+                <FloorTitle>2층</FloorTitle>
+                <ImageBlock src={SecondFloorMap} alt={'Second Floor Image'} />
+            </VenueInfo>
+        </>
+    )
+}
+
+export const getServerSideProps: GetServerSideProps = async () => {
+    return {
+        props: {
+            title: PageName.Venue
+        }
+    }
+}
+
+export default TalkSchedule
diff --git a/frontend/public/images/1st-floor.jpg b/frontend/public/images/1st-floor.jpg
diff --git a/frontend/public/images/2nd-floor.jpg b/frontend/public/images/2nd-floor.jpg
diff --git a/frontend/public/images/venue.jpg b/frontend/public/images/venue.jpg
diff --git a/frontend/routes/routes.ts b/frontend/routes/routes.ts
@@ -22,6 +22,10 @@ export const routes: RouteType[] = [
             {
                 path: '/about/ticket',
                 name: PageName.Ticket
+            },
+            {
+                path: '/about/venue',
+                name: PageName.Venue
             }
         ]
     },

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,9 @@ import { useTranslation } from 'react-i18next'`
`5`	`5`
`6`	`6`	const MainTheme = styled.div`
`7`	`7`	`height: calc(100vh - 100px);`
	`8`	+ ${media.mobile(`
	`9`	`+ height: calc(100vh - 120px);`
	`10`	+ `)}
`8`	`11`	`
`9`	`12`
`10`	`13`	const Window = styled.div`