WIP

Author: constmoon

frontend/components/service/Program/Speaker.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { ISpeaker } from '../../../interfaces/IProgram'
 import styled from 'styled-components'
 import { media } from '../../../assets/styles/mixin'

frontend/components/service/Program/TalkTable.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { ITalkItem, ITalkTableData } from '../../../interfaces/IProgram'
+import styled from 'styled-components'
+
+const Table = styled.table`
+    width: 100%;
+`
+
+const TalkTable = (props: {
+    day: string
+    headers: string[]
+    list: ITalkItem[]
+}) => {
+    const headers = ['트랙1(101)', '트랙2(102)']
+
+    return (
+        <div>
+            <table>
+                <thead>
+                    <tr>
+                        <th>
+                            시간
+                            <br />
+                            (KST)
+                        </th>
+                        {headers.map((header) => (
+                            <th key={header}>{header}</th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
+    )
+}
+
+export default TalkTable

frontend/components/service/Program/TalkTableToggleButton.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+
+const ButtonGroup = styled.div`
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+`
+const Button = styled.button<{ selected: boolean }>`
+    border-radius: 4px;
+    font-size: 1rem;
+    padding: 0 2rem;
+    background: inherit;
+    cursor: pointer;
+    border: 0;
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.white};
+    text-decoration: ${(props) => (props.selected ? 'underline' : 'none')};
+`
+
+interface ToggleProps {
+    handleClick: (day: string) => void
+}
+
+const TalkTableToggleButton: React.FC<ToggleProps> = ({ handleClick }) => {
+    const [checked, setChecked] = useState<string>('day1')
+
+    const handleToggle = (day: string): void => {
+        setChecked(day)
+        handleClick(day)
+    }
+
+    return (
+        <ButtonGroup>
+            <Button
+                selected={checked === 'day1'}
+                onClick={() => handleToggle('day1')}
+            >
+                10/1 (토)
+            </Button>
+            <Button
+                selected={checked === 'day2'}
+                onClick={() => handleToggle('day2')}
+            >
+                10/2 (일)
+            </Button>
+        </ButtonGroup>
+    )
+}
+
+export default TalkTableToggleButton

frontend/package.json

@@ -15,6 +15,7 @@
     "@sls-next/serverless-component": "^3.7.0",
     "axios": "^0.27.2",
     "babel-plugin-styled-components": "^2.0.6",
+    "date-fns": "^2.29.3",
     "env-cmd": "^10.1.0",
     "gray-matter": "^4.0.3",
     "i18next": "^21.6.14",

frontend/pages/program/talk-schedule.tsx

@@ -1,25 +1,81 @@
-import React from 'react'
+import React, { useState } 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 { getTalkList } from '../api/program'
+import { GetServerSidePropsContext } from 'next'
+import { ITalkItem, ITalkList } from '../../interfaces/IProgram'
+import { compareAsc, isSameDay } from 'date-fns'
+import TalkTableToggleButton from '../../components/service/Program/TalkTableToggleButton'
+import TalkTable from '../../components/service/Program/TalkTable'
 
-const TalkSchedule: NextPage = (props: PageProps) => {
+interface TalkTableProps extends PageProps {
+    data: ITalkList
+}
+
+const TalkSchedule: NextPage = (props: TalkTableProps) => {
     const { t } = useTranslation()
+    const { pageName, data } = props
+    const [selectedDay, setSelectedDay] = useState<string>('day1')
+
+    const updateSelectedDay = (day: string) => {
+        setSelectedDay(day)
+    }
+
+    const tableData: ITalkItem[] = data.list.sort((a, b) =>
+        compareAsc(new Date(a.video_open_at), new Date(b.video_open_at))
+    )
+
+    const day1tableList: ITalkItem[] = tableData.filter((item) =>
+        isSameDay(new Date(item.video_open_at), new Date(2022, 9, 1))
+    )
+    const day2tableList: ITalkItem[] = tableData.filter((item) =>
+        isSameDay(new Date(item.video_open_at), new Date(2022, 10, 1))
+    )
 
     return (
         <div>
-            <PageTitle title={props.pageName} />
-            {t('label:preparing')}
+            <PageTitle title={pageName} />
+            <TalkTableToggleButton handleClick={updateSelectedDay} />
+            {selectedDay === 'day1' ? (
+                <TalkTable
+                    day="day1"
+                    headers={['트랙1(101)', '트랙2(102)']}
+                    list={day1tableList}
+                />
+            ) : (
+                <TalkTable
+                    day="day2"
+                    headers={['트랙1(103)', '트랙2(104)']}
+                    list={day2tableList}
+                />
+            )}
         </div>
     )
 }
 
-export const getServerSideProps: GetServerSideProps = async () => {
-    return {
-        props: {
-            title: PageName.TalkSchedule
+export const getServerSideProps: GetServerSideProps = async (
+    context: GetServerSidePropsContext
+) => {
+    const { locale } = context
+    try {
+        const data: ITalkList = await getTalkList()
+
+        return {
+            props: {
+                title: PageName.TalkSchedule,
+                locale,
+                data
+            }
+        }
+    } catch (error) {
+        // TODO: Add error interface
+        if (error.notFound) {
+            return {
+                notFound: true
+            }
         }
     }
 }

yarn.lock

@@ -3831,6 +3831,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
   integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
 
+date-fns@^2.29.3:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
 dayjs@^1.10.4, dayjs@^1.10.7:
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5"