Merge pull request #92 from NaGyeong-Park/feature/session-time-table

Feature/session time table
pythonkr · Jul 22, 2023 · 965466b · 965466b
2 parents 6e0ca34 + 1e3ffa1
commit 965466b
Show file tree

Hide file tree

Showing 7 changed files with 1,142 additions and 2 deletions.
diff --git a/@types/session.ts b/@types/session.ts
@@ -1,3 +1,5 @@
+import { SessionCategory } from '@/constants/session';
+
 export interface SessionList {
   id: number;
   title: string;
@@ -38,7 +40,29 @@ export interface User {
   bio: string;
 }
 
+export interface TimeTableInfoByDays {
+  Day1: TimeTableInfo;
+  Day2: TimeTableInfo;
+}
+
+export interface TimeTableInfo {
+  title: string;
+  location: string;
+  TimeTable: TimeTable[];
+}
+
+export interface TimeTable {
+  time: string;
+  sessions: TimeTableSessions[];
+}
+export interface TimeTableSessions {
+  title: string;
+  id: string;
+  host_name?: string;
+  room_num: string[];
+  category?: (typeof SessionCategory)[number];
+}
 export type SessionDifficulty = 'BEGINNER' | 'INTERMEDIATE' | 'EXPERIENCED';
 export type SessionDuration = 'SHORT' | 'LONG';
 export type SessionLanguage = 'KOREAN' | 'ENGLISH';
-type SessionRoomNumber = '101' | '102' | '103' | '104' | '105';
+type SessionRoomNumber = '101' | '102' | '103' | '104' | '105';
diff --git a/api/session.ts b/api/session.ts
@@ -12,4 +12,4 @@ export async function getSessionDetail(
   const response = await axios.get<SessionDetail>(`/sessions/${sessionId}/`);
   const { brief, desc, comment, ...data } = response.data;
   return data;
-}
+}
diff --git a/components/session/Table/index.tsx b/components/session/Table/index.tsx
@@ -0,0 +1,161 @@
+import { SessionCategory, CategoryLabelColor } from '@/constants/session';
+
+import { H4 } from '../../heading';
+import Link from 'next/link';
+import { styled } from '@stitches/react';
+
+export const TableWrapper = styled('div', {
+  overflowX: 'scroll',
+  overflowY: 'hidden',
+});
+export const Table = styled('table', {
+  border: '1px solid',
+  borderCoolor: '$backgroundPrimary',
+  borderCollapse: 'collapse',
+  width: 'auto',
+});
+export const Tr = styled('tr', {
+  border: '1px solid',
+  borderCoolor: '$backgroundPrimary',
+  textAlign: 'center',
+});
+export const TdContent = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '2rem 3rem',
+  gap: '10px',
+  variants: {
+    c: {
+      host_name: { padding: '1rem 0' },
+    },
+  },
+});
+export const Td = styled('td', {
+  border: '1px solid',
+  borderCoolor: '$backgroundPrimary',
+  textAlign: 'center',
+  variants: {
+    c: {
+      head: { border: '2px solid', borderCoolor: '$backgroundPrimary' },
+    },
+  },
+});
+export const B1 = styled('span', {
+  fontWeight: 500,
+  fontSize: 20,
+  whiteSpace: 'pre-wrap',
+  textAlign: 'center',
+});
+export const B5 = styled('p', {
+  fontSize: 16,
+  fontWeight: 500,
+  whiteSpace: 'pre-wrap',
+  textAlign: 'center',
+  variants: {
+    c: {
+      label: { fontWeight: 700 },
+    },
+  },
+});
+export const CategoryTag = styled('p', {
+  fontSize: 13,
+  fontWeight: 400,
+  color: '#1c1c1c', // 다크모드 미적용
+  whiteSpace: 'pre-wrap',
+  textAlign: 'center',
+  padding: '4px 8px',
+  borderRadius: '3px',
+  variants: {
+    c: {
+      label: { fontWeight: 700 },
+    },
+  },
+});
+
+export const Category = ({
+  label,
+}: {
+  label: (typeof SessionCategory)[number];
+}) => (
+  <CategoryTag
+    style={{
+      background: CategoryLabelColor[label],
+      display: 'inline-block',
+      margin: 'auto',
+    }}
+  >
+    {label}
+  </CategoryTag>
+);
+export const Head = ({
+  title,
+  location,
+}: {
+  title: string;
+  location: string;
+}) => (
+  <thead>
+    <Tr>
+      <Td c="head" colSpan={4}>
+        <TdContent>
+          <H4 style={{ fontWeight: 700 }}>{title}</H4>
+        </TdContent>
+      </Td>
+    </Tr>
+    <Tr>
+      <Td rowSpan={2}>
+        <B5 c="label">{'시간/장소\nTime/Location'}</B5>
+      </Td>
+      <Td colSpan={3}>
+        <TdContent>
+          <B1>{location}</B1>
+        </TdContent>
+      </Td>
+    </Tr>
+    <Tr>
+      <Td>
+        <TdContent c="host_name">
+          <B5>101/102</B5>
+        </TdContent>
+      </Td>
+      <Td>
+        <TdContent c="host_name">
+          <B5>103</B5>
+        </TdContent>
+      </Td>
+      <Td>
+        <TdContent c="host_name">
+          <B5>104/105</B5>
+        </TdContent>
+      </Td>
+    </Tr>
+  </thead>
+);
+export const SessionTitle = ({
+  title,
+  category,
+}: {
+  title: string;
+  category?: (typeof SessionCategory)[number];
+}) => (
+  <TdContent>
+    <B5>{title}</B5>
+    {category && <Category label={category} />}
+  </TdContent>
+);
+
+export const SessionHostName = ({ hostName }: { hostName: string }) => (
+  <TdContent c="host_name">
+    <B5>{hostName}</B5>
+  </TdContent>
+);
+
+export const LinkedContent = ({
+  condition,
+  href,
+  children,
+}: {
+  condition: boolean;
+  href: string;
+  children: React.ReactNode;
+}) => (condition ? <Link href={href}>{children}</Link> : <>{children}</>);
diff --git a/components/session/TimeTable.tsx b/components/session/TimeTable.tsx
@@ -0,0 +1,82 @@
+import { TimeTableInfo } from '@/@types/session';
+
+import { Fragment } from 'react';
+
+import {
+  B5,
+  Head,
+  LinkedContent,
+  SessionHostName,
+  SessionTitle,
+  Table,
+  TableWrapper,
+  Td,
+  Tr,
+} from './Table';
+
+export const TimeTable = ({
+  timeTableInfo,
+}: {
+  timeTableInfo: TimeTableInfo;
+}) => {
+  return (
+    <TableWrapper>
+      <Table>
+        <Head title={timeTableInfo.title} location={timeTableInfo.location} />
+        <tbody>
+          {timeTableInfo?.TimeTable?.map((row, i) => {
+            return (
+              <Fragment key={row.time + i}>
+                <Tr>
+                  {/* 시간 */}
+                  <Td rowSpan={2}>
+                    <B5 c="label">{row.time}</B5>
+                  </Td>
+                  {/* 세션 제목 */}
+                  {row.sessions.map((session) => (
+                    <Td
+                      colSpan={row.sessions.length === 1 ? 3 : 1}
+                      key={session.title}
+                    >
+                      <LinkedContent
+                        condition={!!session.id}
+                        href={`/session/${session.id}`}
+                      >
+                        <SessionTitle
+                          title={session.title}
+                          category={session.category}
+                        />
+                      </LinkedContent>
+                    </Td>
+                  ))}
+                </Tr>
+                <Tr>
+                  {/* 세션 호스트 이름 */}
+                  {row.sessions.map(
+                    (session) =>
+                      session.host_name !== undefined && (
+                        <Td
+                          key={session.host_name}
+                          colSpan={row.sessions.length === 1 ? 3 : 1}
+                        >
+                          <LinkedContent
+                            condition={!!session.id}
+                            href={`/session/${session.id}`}
+                          >
+                            <SessionHostName
+                              key={session.host_name}
+                              hostName={session.host_name}
+                            />
+                          </LinkedContent>
+                        </Td>
+                      )
+                  )}
+                </Tr>
+              </Fragment>
+            );
+          })}
+        </tbody>
+      </Table>
+    </TableWrapper>
+  );
+};