티켓 구입 링크 추가

Author: constmoon

frontend/components/core/PageTitle.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 
 const Title = styled(Heading2)`
-    margin: 2rem 0;
+    margin: 2rem 0 3rem;
 `
 
 interface PageTitleProps {

frontend/data/constants/resources.ts

@@ -21,7 +21,8 @@ const Resources = {
     },
     pyconkrFacebook: 'https://www.facebook.com/pyconkorea',
     pyconkrTwitter: 'https://twitter.com/PyConKR',
-    KEYNOTE_CATEGORY: '키노트 (Keynote)'
+    KEYNOTE_CATEGORY: '키노트 (Keynote)',
+    FESTA_TICKET_LINK: 'https://festa.io/events/2605'
 }
 
 export default Resources

frontend/data/enums/PageName.ts

@@ -3,6 +3,7 @@ export enum PageName {
     About = 'About',
     Pyconkr2022 = 'Pyconkr2022',
     PreviousPyconkr = 'PreviousPyconkr',
+    Ticket = 'Ticket',
     Program = 'Program',
     Keynote = 'Keynote',
     Talks = 'Talks',

frontend/locales/en/label.ts

@@ -41,4 +41,7 @@ export default {
     difficulty: 'Difficulty',
     duration: 'Duration',
     language: 'Language',
+    ticketInfo:
+        'Tickets for PyCon Korea 2022 are available at Festa (festa.io).\nPyCon Korea 2022 regular ticket has limited quantities are sold and may be sold out early, so please purchase as soon as possible.',
+    buyTicket: 'Buy ticket'
 }

frontend/locales/en/pageTitle.ts

@@ -5,6 +5,7 @@ export default {
     [PageName.About]: 'About',
     [PageName.Pyconkr2022]: 'Pycon Korea 2022',
     [PageName.PreviousPyconkr]: 'Previous PyCon Korea',
+    [PageName.Ticket]: '티켓 구입',
     [PageName.Program]: 'Program',
     [PageName.Keynote]: 'Keynote',
     [PageName.Talks]: 'Talks',

frontend/locales/ko/label.ts

@@ -42,5 +42,8 @@ export default {
     duration: '발표 시간',
     language: '언어',
     description: '설명',
-    speakerIntro: '발표자 소개'
+    speakerIntro: '발표자 소개',
+    ticketInfo:
+        '파이콘 한국 2022 티켓은 페스타(festa.io)에서 구입할 수 있습니다.\n파이콘 한국 2022 일반 티켓은 한정된 수량만 판매되어 조기 매진이 될 가능성이 있으니 서둘러 구매해주시기 바랍니다.',
+    buyTicket: '티켓 구입하기'
 }

frontend/locales/ko/pageTitle.ts

@@ -5,6 +5,7 @@ export default {
     [PageName.About]: '파이콘 한국',
     [PageName.Pyconkr2022]: '파이콘 한국 2022',
     [PageName.PreviousPyconkr]: '지난 파이콘 한국',
+    [PageName.Ticket]: '티켓 구입',
     [PageName.Program]: '프로그램',
     [PageName.Keynote]: '키노트',
     [PageName.Talks]: '발표',
@@ -13,7 +14,7 @@ export default {
     [PageName.Cfp]: '발표 제안하기',
     [PageName.CfpGuide]: '발표안 작성 가이드',
     [PageName.Sponsor]: '후원하기',
-    [PageName.SponsorList]: '후원사',
+    [PageName.SponsorList]: '후원사 목록',
     [PageName.SponsorPatrons]: '개인 후원자',
     [PageName.SponsorProspectus]: '후원사 안내',
     [PageName.SponsorJoin]: '후원사로 참여하기',

frontend/pages/about/ticket.tsx

@@ -0,0 +1,52 @@
+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 Resources from '../../data/constants/resources'
+import styled from 'styled-components'
+import { Paragraph } from '../../assets/styles/typo'
+
+const TicketInfo = styled(Paragraph)`
+    margin: 2rem 0;
+    white-space: pre-line;
+`
+
+const TicketLink = styled.a`
+    display: inline-block;
+    padding: 0.9rem 1.4rem;
+    background-color: ${(props) => props.theme.colors.violet0};
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: bold;
+    color: ${(props) => props.theme.colors.white};
+`
+
+const Ticket: NextPage = (props: PageProps) => {
+    const { t } = useTranslation()
+
+    return (
+        <div>
+            <PageTitle title={props.pageName} />
+            <TicketInfo>{t('label:ticketInfo')}</TicketInfo>
+            <TicketLink
+                href={Resources.FESTA_TICKET_LINK}
+                target="_blank"
+                rel="noreferrer"
+            >
+                {t('label:buyTicket')}
+            </TicketLink>
+        </div>
+    )
+}
+
+export const getServerSideProps: GetServerSideProps = async () => {
+    return {
+        props: {
+            title: PageName.Ticket
+        }
+    }
+}
+
+export default Ticket

frontend/routes/routes.ts

@@ -18,6 +18,10 @@ export const routes: RouteType[] = [
             {
                 path: '/about/previous-pyconkr',
                 name: PageName.PreviousPyconkr
+            },
+            {
+                path: '/about/ticket',
+                name: PageName.Ticket
             }
         ]
     },