메인 페이지 행사 상세 업데이트

Author: constmoon

frontend/components/service/Home/MainTalkList.tsx

@@ -1,20 +1,50 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Heading2, Paragraph } from '../../../assets/styles/typo'
+import { Heading2 } from '../../../assets/styles/typo'
 import styled from 'styled-components'
+import Linkify from 'react-linkify'
+import Resources from "../../../data/constants/resources";
 
-const Content = styled(Paragraph)`
+const Content = styled.div`
     margin-top: 1rem;
     white-space: pre-line;
+    a {
+        color: ${props => props.theme.colors.blue0};
+    }
 `
 
+const ProgramLink = styled.a`
+    color: ${props => props.theme.colors.blue0};
+`
+
+
 const MainTalkList = () => {
     const { t } = useTranslation()
 
     return (
         <div>
-            <Heading2 useGradient={true}>{t('label:talk')}</Heading2>
-            <Content></Content>
+            <Heading2 useGradient={true}>{t('label:eventDetail')}</Heading2>
+            <Content>
+                {t('label:aboutEvent')}
+                {''} 발표 및 시간표는 {''}
+                <ProgramLink href={`/program/talks`}>
+                    프로그램 > 발표
+                </ProgramLink>
+                에서 확인하실 수 있습니다.
+            </Content>
+            <Content>
+                <Linkify>
+                    파이썬 사용 사례와 지식을 공유하는 다양한 발표 세션이 열립니다.
+                    이외의 모든 공지사항은 {''}
+                    <ProgramLink href={Resources.pyconkrFacebook} target="_blank">
+                        공식 페이스북
+                    </ProgramLink>
+                    , {''}
+                    <ProgramLink href={Resources.pyconkrTwitter} target="_blank">
+                        트위터
+                    </ProgramLink>, 이곳을 통해 공지될 예정입니다.
+                </Linkify>
+            </Content>
         </div>
     )
 }

frontend/components/service/Program/CategoryList.tsx

@@ -15,7 +15,7 @@ const CategoryList = (props: { list: ITalkList }) => {
     const categoryList: { [key: string]: ICategoryListItem } = {}
 
     props.list.list.forEach((talk) => {
-        if (talk.category !== Resources.KEYNOTE_CATEGORY) {
+        if (talk.category !== Resources.KEYNOTE_NAME) {
             if (!categoryList.hasOwnProperty(talk.category)) {
                 categoryList[talk.category] = {
                     name: talk.category,

frontend/data/constants/resources.ts

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

frontend/locales/en/label.ts

@@ -48,5 +48,6 @@ export default {
     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'
+    locationInfo: 'Simultaneous online-offline',
+    eventDetail: 'About Pycon Korea 2022'
 }

frontend/locales/ko/label.ts

@@ -50,5 +50,9 @@ export default {
     offlineTicketInfo:
         '파이콘 한국 2022 굿즈 및 오프라인 티켓은 페스타(festa.io)에서 구입할 수 있습니다.\n오프라인 티켓은 한정된 수량만 판매되어 조기 매진이 될 가능성이 있으니 서둘러 구매해주시기 바랍니다.',
     buyTicket: '티켓 구입하기',
-    locationInfo: '온/오프라인 동시 진행'
+    locationInfo: '온/오프라인 동시 진행',
+    eventDetail: '행사 상세',
+    aboutEvent:
+        '파이콘 한국은 한국의 파이썬 개발자들이 지식을 공유하고 만남을 갖기 위한 장입니다.\n파이콘 한국 2022은 온라인과 오프라인 동시에 진행됩니다.',
+    officialFacebook: '공식 페이스북(https://www.facebook.com)'
 }

frontend/pages/program/keynote.tsx

@@ -1,11 +1,10 @@
 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 { GetServerSidePropsContext } from 'next'
-import { getKeynoteList, getTalkList } from '../api/program'
+import { getKeynoteList } from '../api/program'
 import { ITalkList } from '../../interfaces/IProgram'
 import KeynoteListItem from '../../components/service/Program/KeynoteListItem'