세션 시간표 반영

Author: constmoon

frontend/components/service/Program/DifficultyBadge.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+const DifficultyBadge = styled.span<{ level: string }>`
+    display: inline-block;
+    vertical-align: top;
+    padding: 0.3em 0.5em;
+    font-size: 0.7rem;
+    border-radius: 4px;
+    line-height: 1;
+    ${({ level }) => {
+        if (level === '초급') {
+            return `background-color: #139d2b;`
+        } else if (level === '중급') {
+            return `background-color: #ff7f00;`
+        } else if (level === '고급') {
+            return `background-color: #cf3535;`
+        }
+        return `display: none;`
+    }}
+`
+
+export default DifficultyBadge

frontend/components/service/Program/TalkTable.tsx

@@ -1,35 +1,119 @@
 import React from 'react'
-import { ITalkItem, ITalkTableData } from '../../../interfaces/IProgram'
+import { ITalkItem, ITalkTableList } from '../../../interfaces/IProgram'
 import styled from 'styled-components'
+import { format } from 'date-fns'
+import Link from 'next/link'
+import DifficultyBadge from './DifficultyBadge'
+import Resources from '../../../data/constants/resources'
 
 const Table = styled.table`
     width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+`
+const LeftColumn = styled.div`
+    width: 90px;
 `
 
+const TableHeader = styled.thead`
+    border-top: 2px solid ${(props) => props.theme.colors.white};
+    border-bottom: 2px solid ${(props) => props.theme.colors.white};
+`
+const TableRow = styled.tr`
+    & + & {
+        border-top: 1px solid ${(props) => props.theme.colors.white};
+    }
+`
+const TableCell = styled.div`
+    padding: 1rem;
+    text-align: ${(props) => props.align ?? 'center'};
+`
+const BadgeWrap = styled.div`
+    margin-top: 0.5rem;
+`
+const Title = styled.div`
+    margin: 0.4rem 0;
+`
+const Speaker = styled.div`
+    color: ${(props) => props.theme.colors.violet0};
+`
+const BoldText = styled.div`
+    font-weight: bold;
+`
+
+const TalkTableItem = (props: { item: ITalkItem }) => {
+    const { item } = props
+    const isKeynote = item.category === Resources.KEYNOTE_NAME
+
+    return (
+        <Link href={`/program/talks/${item.id}`}>
+            <a>
+                {isKeynote && <BoldText>[키노트]</BoldText>}
+                <Title>{item.title}</Title>
+                <Speaker>{item.user_name}</Speaker>
+            </a>
+        </Link>
+    )
+}
+
 const TalkTable = (props: {
     day: string
     headers: string[]
-    list: ITalkItem[]
+    list: ITalkTableList[]
 }) => {
-    const headers = ['트랙1(101)', '트랙2(102)']
+    const { list } = props
+    console.log(list)
+
+    const getTime = (timeString: string): string => {
+        return format(new Date(timeString), 'HH:mm')
+    }
 
     return (
         <div>
-            <table>
-                <thead>
+            <Table>
+                <TableHeader>
                     <tr>
                         <th>
-                            시간
-                            <br />
-                            (KST)
+                            <LeftColumn>
+                                시간
+                                <br />
+                                (KST)
+                            </LeftColumn>
                         </th>
-                        {headers.map((header) => (
+                        {props.headers.map((header) => (
                             <th key={header}>{header}</th>
                         ))}
                     </tr>
-                </thead>
-                <tbody></tbody>
-            </table>
+                </TableHeader>
+                <tbody>
+                    {list.map((item, index) => (
+                        <TableRow key={`time-${index}`}>
+                            <td>
+                                <TableCell align={'left'}>
+                                    {getTime(item.video_open_at)}
+                                </TableCell>
+                            </td>
+                            {item.talkList.length > 1 ? (
+                                item.talkList.map((talkItem) => (
+                                    <td key={`talk-${talkItem.id}`}>
+                                        <TableCell>
+                                            <TalkTableItem item={talkItem} />
+                                        </TableCell>
+                                    </td>
+                                ))
+                            ) : (
+                                <td colSpan={2}>
+                                    <TableCell>
+                                        <TalkTableItem
+                                            item={item.talkList[0]}
+                                        />
+                                    </TableCell>
+                                </td>
+                            )}
+                        </TableRow>
+                    ))}
+                </tbody>
+            </Table>
         </div>
     )
 }

frontend/components/service/Program/TalkTableToggleButton.tsx

@@ -6,11 +6,12 @@ const ButtonGroup = styled.div`
     width: 100%;
     align-items: center;
     justify-content: center;
+    border-bottom: 1px solid ${(props) => props.theme.colors.white};
 `
 const Button = styled.button<{ selected: boolean }>`
     border-radius: 4px;
     font-size: 1rem;
-    padding: 0 2rem;
+    padding: 1rem 2rem;
     background: inherit;
     cursor: pointer;
     border: 0;

frontend/interfaces/IProgram.ts

@@ -1,5 +1,10 @@
 import { IApiTalkItem } from './api/IApiPrograms'
 
+export interface ITalkTableList {
+    [key: string]: any
+    talkList: ITalkItem[]
+}
+
 export interface ITalkItem extends IApiTalkItem {}
 
 export interface ICategoryListItem {

frontend/pages/program/talk-schedule.tsx

@@ -6,7 +6,7 @@ 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 { ITalkItem, ITalkList, ITalkTableList } from '../../interfaces/IProgram'
 import { compareAsc, isSameDay } from 'date-fns'
 import TalkTableToggleButton from '../../components/service/Program/TalkTableToggleButton'
 import TalkTable from '../../components/service/Program/TalkTable'
@@ -24,6 +24,25 @@ const TalkSchedule: NextPage = (props: TalkTableProps) => {
         setSelectedDay(day)
     }
 
+    const groupByProperty = (
+        array: ITalkItem[],
+        property: string
+    ): ITalkTableList[] => {
+        const groupByValue: { [key: string]: ITalkItem[] } = array.reduce(
+            (obj, item) => {
+                obj[item[property]] = obj[item[property]] || []
+                obj[item[property]].push(item)
+                return obj
+            },
+            {}
+        )
+
+        return Object.keys(groupByValue).map((key: string) => ({
+            [property]: key,
+            talkList: groupByValue[key]
+        }))
+    }
+
     const tableData: ITalkItem[] = data.list.sort((a, b) =>
         compareAsc(new Date(a.video_open_at), new Date(b.video_open_at))
     )
@@ -32,7 +51,7 @@ const TalkSchedule: NextPage = (props: TalkTableProps) => {
         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))
+        isSameDay(new Date(item.video_open_at), new Date(2022, 9, 2))
     )
 
     return (
@@ -42,14 +61,14 @@ const TalkSchedule: NextPage = (props: TalkTableProps) => {
             {selectedDay === 'day1' ? (
                 <TalkTable
                     day="day1"
-                    headers={['트랙1(101)', '트랙2(102)']}
-                    list={day1tableList}
+                    headers={['트랙1', '트랙2']}
+                    list={groupByProperty(day1tableList, 'video_open_at')}
                 />
             ) : (
                 <TalkTable
                     day="day2"
-                    headers={['트랙1(103)', '트랙2(104)']}
-                    list={day2tableList}
+                    headers={['트랙1', '트랙2']}
+                    list={groupByProperty(day2tableList, 'video_open_at')}
                 />
             )}
         </div>