발표 목록 생성

Author: constmoon

frontend/assets/styles/typo.ts

@@ -19,13 +19,20 @@ const Heading2 = styled.h2`
 `
 
 const Heading3 = styled.h3`
-    font-size: 1.5rem;
+    font-size: 1.6rem;
     line-height: 1.3;
+    ${(props) => {
+        if (props.useGradient) {
+            return `background: ${props.theme.gradient_violet};
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;`
+        }
+    }}
 `
 
 const Heading4 = styled.h4`
-    font-size: 1.25rem;
-    line-height: 1.3;
+    font-size: 1.1rem;
+    line-height: 1.4;
 `
 
 const Paragraph = styled.p`

frontend/components/core/NavBarMobile.tsx

@@ -31,7 +31,7 @@ const Container = styled.div`
         if (props.isTransparent) {
             return `background: transparent;`
         }
-        return `background-image: ${props.theme.black_10};`
+        return `background: ${props.theme.black_10};`
     }}
 `
 

frontend/components/service/Program/CategoryList.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { ICategoryListItem, ITalkList } from '../../../interfaces/IProgram'
+import styled from 'styled-components'
+import { Heading3 } from '../../../assets/styles/typo'
+import CategoryListItem from './CategoryListItem'
+
+const CategoryBlock = styled.ul`
+    & + & {
+        margin-top: 4rem;
+    }
+`
+
+const CategoryList = (props: { list: ITalkList }) => {
+    const categoryList: ICategoryListItem[] = []
+
+    props.list.list.forEach((talk) => {
+        if (!categoryList.hasOwnProperty(talk.category)) {
+            categoryList[talk.category] = { name: talk.category, talkList: [] }
+        }
+        categoryList[talk.category].talkList.push(talk)
+    })
+
+    console.log(categoryList)
+    return (
+        <>
+            {Object.keys(categoryList).map((key, index) => (
+                <CategoryBlock key={`category-${index}`}>
+                    <li>
+                        <Heading3 useGradient={true}>
+                            {categoryList[key].name}
+                        </Heading3>
+                        <CategoryListItem list={categoryList[key].talkList} />
+                    </li>
+                </CategoryBlock>
+            ))}
+        </>
+    )
+}
+
+export default CategoryList

frontend/components/service/Program/CategoryListItem.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import styled from 'styled-components'
+import { ITalkItem } from '../../../interfaces/IProgram'
+import { media } from '../../../assets/styles/mixin'
+import { Heading4 } from '../../../assets/styles/typo'
+
+const DEFAULT_PROFILE_PATH = '/images/pyconkr2022-profile.png'
+
+const TalkList = styled.ul`
+    margin-top: 1.5rem;
+`
+const TalkListItem = styled.li`
+    & + & {
+        margin-top: 2rem;
+        ${media.mobile(`
+            margin-top: 1.5rem;
+        `)}
+    }
+`
+const TalkLink = styled.a`
+    display: inline-block;
+`
+const TalkBlock = styled.div`
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+`
+const PersonBlock = styled.div`
+    margin-left: 2rem;
+    flex: 1;
+`
+const Speaker = styled.div`
+    margin-top: 0.4rem;
+`
+const Title = styled(Heading4)`
+    font-weight: bold;
+`
+const SpeakerProfile = styled.div`
+    width: 6rem;
+    height: 6rem;
+    background-image: url(${(props) => props.image});
+    background-size: cover;
+    border-radius: 50%;
+`
+
+const CategoryListItem = (props: { list: ITalkItem[] }) => {
+    return (
+        <TalkList>
+            {props.list.map((talk, index) => (
+                <TalkListItem key={talk.id}>
+                    <TalkLink href={`/program/talks/${talk.id}`}>
+                        <TalkBlock>
+                            <SpeakerProfile
+                                image={
+                                    talk.speaker_profile_img ??
+                                    DEFAULT_PROFILE_PATH
+                                }
+                            />
+                            <PersonBlock>
+                                <Title>{talk.title}</Title>
+                                <Speaker>{talk.user_name}</Speaker>
+                            </PersonBlock>
+                        </TalkBlock>
+                    </TalkLink>
+                </TalkListItem>
+            ))}
+        </TalkList>
+    )
+}
+
+export default CategoryListItem

frontend/components/service/Program/TalkList.tsx

@@ -0,0 +1 @@
+export enum Category {}

frontend/components/service/Program/TalkListItem.tsx

@@ -2,6 +2,11 @@ import { IApiTalkItem } from './api/IApiPrograms'
 
 export interface ITalkItem extends IApiTalkItem {}
 
+export interface ICategoryListItem {
+    name: string
+    talkList: ITalkItem[]
+}
+
 export interface ITalkList {
     list: ITalkItem[]
 }

frontend/data/enums/Category.ts

@@ -0,0 +1,11 @@
+import React from 'react'
+import { NextPage } from 'next'
+import { useTranslation } from 'react-i18next'
+
+const BadRequestPage: NextPage = () => {
+    const { t } = useTranslation()
+
+    return <div>{t('error:serverError')}</div>
+}
+
+export default BadRequestPage

frontend/interfaces/IProgram.ts

@@ -3,10 +3,10 @@ import type { NextPage, GetServerSideProps } from 'next'
 import { PageName } from '../../../data/enums/PageName'
 import PageTitle from '../../../components/core/PageTitle'
 import { PageProps } from '../../../interfaces/PageProps'
-import TalkList from '../../../components/service/Program/TalkList'
 import { GetServerSidePropsContext } from 'next'
 import { getTalkList } from '../../api/program'
 import { ITalkList } from '../../../interfaces/IProgram'
+import CategoryList from '../../../components/service/Program/CategoryList'
 
 interface TalkListProps extends PageProps {
     data: ITalkList
@@ -17,7 +17,7 @@ const TalkListPage: NextPage = (props: TalkListProps) => {
     return (
         <div>
             <PageTitle title={pageName} />
-            <TalkList list={data.list} />
+            <CategoryList list={data} />
         </div>
     )
 }
@@ -37,8 +37,11 @@ export const getServerSideProps: GetServerSideProps = async (
             }
         }
     } catch (error) {
-        return {
-            notFound: true
+        // TODO: Add error interface
+        if (error.notFound) {
+            return {
+                notFound: true
+            }
         }
     }
 }