티켓 정보 업데이트 및 다국어 라벨 적용

Author: constmoon

frontend/components/service/Home/MainIdentity.tsx

@@ -135,7 +135,7 @@ const MainIdentity = () => {
                 </TitleContainer>
                 <MainText>
                     <div>{t(`label:pyconkrDate`)}</div>
-                    <div>온라인 및 오프라인 진행</div>
+                    <div>{t(`label:locationInfo`)}</div>
                 </MainText>
             </Window>
         </MainTheme>

frontend/locales/en/label.ts

@@ -41,7 +41,12 @@ 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'
+    applyOnline: 'Apply Online',
+    applyOffline: 'Apply Offline',
+    onlineTicketInfo:
+        'PyCon Korea 2022 will be held on PyCon Korea YouTube(https://www.youtube.com/c/PyConKRtube), so you can participate without a ticket.',
+    offlineTicketInfo:
+        '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'
 }

frontend/locales/ko/label.ts

@@ -43,7 +43,12 @@ export default {
     language: '언어',
     description: '설명',
     speakerIntro: '발표자 소개',
-    ticketInfo:
-        '파이콘 한국 2022 티켓은 페스타(festa.io)에서 구입할 수 있습니다.\n파이콘 한국 2022 일반 티켓은 한정된 수량만 판매되어 조기 매진이 될 가능성이 있으니 서둘러 구매해주시기 바랍니다.',
-    buyTicket: '티켓 구입하기'
+    applyOnline: '온라인 참가',
+    applyOffline: '오프라인 참가',
+    onlineTicketInfo:
+        '파이콘 한국 2022는 파이콘 한국 유튜브(https://www.youtube.com/c/PyConKRtube)에 송출되어 티켓 없이도 참가할 수 있습니다.',
+    offlineTicketInfo:
+        '파이콘 한국 2022 굿즈 및 오프라인 티켓은 페스타(festa.io)에서 구입할 수 있습니다.\n오프라인 티켓은 한정된 수량만 판매되어 조기 매진이 될 가능성이 있으니 서둘러 구매해주시기 바랍니다.',
+    buyTicket: '티켓 구입하기',
+    locationInfo: '온/오프라인 동시 진행'
 }

frontend/pages/about/ticket.tsx

@@ -6,11 +6,22 @@ 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'
+import Linkify from 'react-linkify'
 
-const TicketInfo = styled(Paragraph)`
+const TicketInfo = styled.div`
     margin: 2rem 0;
+`
+
+const InfoTitle = styled.div`
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin: 1rem 0;
+`
+const InfoContent = styled.div`
     white-space: pre-line;
+    a {
+        color: ${(props) => props.theme.colors.blue0};
+    }
 `
 
 const TicketLink = styled.a`
@@ -29,7 +40,18 @@ const Ticket: NextPage = (props: PageProps) => {
     return (
         <div>
             <PageTitle title={props.pageName} />
-            <TicketInfo>{t('label:ticketInfo')}</TicketInfo>
+            <TicketInfo>
+                <InfoTitle>{t('label:applyOnline')}</InfoTitle>
+                <InfoContent>
+                    <Linkify>{t('label:onlineTicketInfo')}</Linkify>
+                </InfoContent>
+            </TicketInfo>
+            <TicketInfo>
+                <InfoTitle>{t('label:applyOffline')}</InfoTitle>
+                <InfoContent>
+                    <Linkify>{t('label:offlineTicketInfo')}</Linkify>
+                </InfoContent>
+            </TicketInfo>
             <TicketLink
                 href={Resources.FESTA_TICKET_LINK}
                 target="_blank"