키노트 데이터 추가, endpoint 변경 예정

Author: constmoon

frontend/components/service/Program/CategoryList.tsx

@@ -3,6 +3,7 @@ import { ICategoryListItem, ITalkList } from '../../../interfaces/IProgram'
 import styled from 'styled-components'
 import { Heading3 } from '../../../assets/styles/typo'
 import CategoryListItem from './CategoryListItem'
+import Resources from '../../../data/constants/resources'
 
 const CategoryBlock = styled.ul`
     & + & {
@@ -14,10 +15,15 @@ const CategoryList = (props: { list: ITalkList }) => {
     const categoryList: { [key: string]: ICategoryListItem } = {}
 
     props.list.list.forEach((talk) => {
-        if (!categoryList.hasOwnProperty(talk.category)) {
-            categoryList[talk.category] = { name: talk.category, talkList: [] }
+        if (talk.category !== Resources.KEYNOTE_CATEGORY) {
+            if (!categoryList.hasOwnProperty(talk.category)) {
+                categoryList[talk.category] = {
+                    name: talk.category,
+                    talkList: []
+                }
+            }
+            categoryList[talk.category].talkList.push(talk)
         }
-        categoryList[talk.category].talkList.push(talk)
     })
 
     return (

frontend/components/service/Program/KeynoteListItem.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import styled from 'styled-components'
+import { ITalkItem } from '../../../interfaces/IProgram'
+import { media } from '../../../assets/styles/mixin'
+import { Heading3 } from '../../../assets/styles/typo'
+import { DEFAULT_PROFILE_PATH } from '../../../data/constants/config'
+import { Link } from '../../core/SnsLink'
+
+const ListItem = styled.div`
+    & + & {
+        margin-top: 6rem;
+        ${media.mobile(`
+            margin-top: 3rem;
+        `)}
+    }
+`
+const TalkBlock = styled.div`
+    display: flex;
+    align-items: flex-start;
+    flex-direction: row;
+`
+const PersonBlock = styled.div`
+    flex: 1;
+    margin-left: 2rem;
+`
+const Speaker = styled(Heading3)`
+    font-size: 1.6rem;
+    font-weight: bold;
+`
+const Title = styled.div`
+    font-size: 1.2rem;
+    font-weight: bold;
+`
+const Intro = styled.div`
+    margin-top: 1.4rem;
+`
+
+const SpeakerProfile = styled.div`
+    width: 15rem;
+    height: 15rem;
+    background-image: url(${(props) => props.image});
+    background-size: cover;
+    background-position: center;
+    border-radius: 50%;
+`
+
+const KeynoteListItem = (props: { item: ITalkItem }) => {
+    return (
+        <ListItem>
+            <Link href={`/program/talks/${props.item.id}`}>
+                <a>
+                    <TalkBlock>
+                        <SpeakerProfile
+                            image={
+                                props.item.speaker_profile_img ??
+                                DEFAULT_PROFILE_PATH
+                            }
+                        />
+                        <PersonBlock>
+                            <Speaker useGradient={true}>
+                                {props.item.user_name}
+                            </Speaker>
+                            <Title>{props.item.title}</Title>
+                            <Intro>{props.item.introduction}</Intro>
+                        </PersonBlock>
+                    </TalkBlock>
+                </a>
+            </Link>
+        </ListItem>
+    )
+}
+
+export default KeynoteListItem

frontend/data/constants/resources.ts

@@ -20,7 +20,8 @@ const Resources = {
             'https://live.staticflickr.com/3912/14958407280_c7e9e6717e_z.jpg'
     },
     pyconkrFacebook: 'https://www.facebook.com/pyconkorea',
-    pyconkrTwitter: 'https://twitter.com/PyConKR'
+    pyconkrTwitter: 'https://twitter.com/PyConKR',
+    KEYNOTE_CATEGORY: '키노트 (Keynote)'
 }
 
 export default Resources

frontend/pages/program/keynote.tsx

@@ -4,22 +4,50 @@ 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 { getTalkList } from '../api/program'
+import { ITalkList } from '../../interfaces/IProgram'
+import KeynoteListItem from '../../components/service/Program/KeynoteListItem'
 
-const Keynote: NextPage = (props: PageProps) => {
-    const { t } = useTranslation()
+interface TalkListProps extends PageProps {
+    data: ITalkList
+}
+
+const Keynote: NextPage = (props: TalkListProps) => {
+    const { pageName, data } = props
 
+    const keynoteList = data.list.filter(
+        (item) => item.category === '키노트 (Keynote)'
+    )
     return (
         <div>
-            <PageTitle title={props.pageName} />
-            {t('label:preparing')}
+            <PageTitle title={pageName} />
+            {keynoteList.map((item) => (
+                <KeynoteListItem key={item.id} item={item} />
+            ))}
         </div>
     )
 }
 
-export const getServerSideProps: GetServerSideProps = async () => {
-    return {
-        props: {
-            title: PageName.Keynote
+export const getServerSideProps: GetServerSideProps = async (
+    context: GetServerSidePropsContext
+) => {
+    const { locale } = context
+    try {
+        const data = await getTalkList()
+
+        return {
+            props: {
+                title: PageName.Keynote,
+                locale,
+                data
+            }
+        }
+    } catch (error) {
+        if (error.notFound) {
+            return {
+                notFound: true
+            }
         }
     }
 }