발표 영상 섹션 추가 및 트랙 영상 링크 제거

Author: constmoon

frontend/locales/en/label.ts

@@ -60,5 +60,6 @@ export default {
         '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',
     firstFloor: 'First Floor',
-    secondFloor: 'Second Floor'
+    secondFloor: 'Second Floor',
+    videoLink: 'Video Link'
 }

frontend/locales/ko/label.ts

@@ -65,5 +65,6 @@ export default {
         '파이콘 한국 2022는 파이콘 한국 유튜브 채널(https://www.youtube.com/c/PyConKRtube)에서 시청 가능합니다. 세션은 온라인과 오프라인 동시에 진행됩니다.',
     pyConKrYoutube: '파이콘 한국 유튜브',
     firstFloor: '1층',
-    secondFloor: '2층'
+    secondFloor: '2층',
+    videoLink: '발표 영상'
 }

frontend/pages/program/talk-schedule.tsx

@@ -16,13 +16,6 @@ interface TalkTableProps extends PageProps {
     data: ITalkList
 }
 
-const LinkList = styled.li`
-    list-style: disc;
-    a {
-        color: ${(props) => props.theme.colors.blue0};
-    }
-`
-
 const ButtonWrap = styled.div`
     margin-top: 1.5rem;
 `
@@ -66,58 +59,9 @@ const TalkSchedule: NextPage = (props: TalkTableProps) => {
         isSameDay(new Date(item.video_open_at), new Date(2022, 9, 2))
     )
 
-    const trackLinkGroup = [
-        {
-            day: 'day1',
-            links: [
-                {
-                    track: '트랙1',
-                    link: `https://youtu.be/OrrquS5PFtw`
-                },
-                {
-                    track: '트랙2',
-                    link: `https://youtu.be/pJGRoe-jt9E`
-                }
-            ]
-        },
-        {
-            day: 'day2',
-            links: [
-                {
-                    track: '트랙3',
-                    link: `https://youtu.be/L6Lz793mzrU`
-                },
-                {
-                    track: '트랙4',
-                    link: `https://youtu.be/10qBldkS0wk`
-                }
-            ]
-        }
-    ]
-
     return (
         <div>
             <PageTitle title={pageName} />
-            <ul>
-                {trackLinkGroup
-                    .filter((item) => item.day === selectedDay)
-                    .map((item, index) => (
-                        <div key={`linkGroup-${index}`}>
-                            {item.links.map((linkItem, index) => (
-                                <LinkList key={`linkItem-${index}`}>
-                                    세션 {linkItem.track} 링크:{' '}
-                                    <a
-                                        href={linkItem.link}
-                                        target={'_blank'}
-                                        rel="noreferrer"
-                                    >
-                                        {linkItem.link}
-                                    </a>
-                                </LinkList>
-                            ))}
-                        </div>
-                    ))}
-            </ul>
             <ButtonWrap>
                 <TalkTableToggleButton handleClick={updateSelectedDay} />
             </ButtonWrap>

frontend/pages/program/talks/[id].tsx

@@ -24,6 +24,9 @@ const DetailContainer = styled.div`
 const Description = styled.div`
     margin-top: 2rem;
     white-space: pre-line;
+    & + & {
+        margin-top: 4rem;
+    }
 `
 
 const SpeakerContainer = styled.div`
@@ -39,6 +42,7 @@ const TalkListDetail: NextPage = (props: TalkListDetailProps) => {
         name: item.user_name,
         introduction: item.introduction
     }
+    const videoUrl = item.video_url ?? ''
 
     return (
         <DetailContainer>
@@ -59,6 +63,12 @@ const TalkListDetail: NextPage = (props: TalkListDetailProps) => {
                 <Heading3 useGradient={true}>{t('label:description')}</Heading3>
                 <Linkify>{item.desc}</Linkify>
             </Description>
+            <Description>
+                <Heading3 useGradient={true}>{t('label:videoLink')}</Heading3>
+                <a href={videoUrl} target={'_blank'} rel="noreferrer">
+                    {videoUrl}
+                </a>
+            </Description>
             <SpeakerContainer>
                 <Heading3 useGradient={true}>
                     {t('label:speakerIntro')}