From f72b6293b6337f78c103286f1b970f8d63ea7422 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Wed, 26 Jun 2024 03:25:50 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20slots=20->=20column=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../timetableComponents/Timetable.tsx         | 24 +++++++++++--------
 .../components/SelectScheduleTable.tsx        |  6 ++---
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
index 07620c36..aa2b904e 100644
--- a/src/components/timetableComponents/Timetable.tsx
+++ b/src/components/timetableComponents/Timetable.tsx
@@ -20,16 +20,20 @@ function Timetable({ timeSlots, availableDates, children, bottomItem }: Timetabl
     <>
       <TimetableWrapper>
         <SlotTitle timeSlots={timeSlots} />
-        <TableWrapper>
+        <TableWithDateWrapper>
           <DateTitle availableDates={availableDates} />
-          <Table>
+          <TableWrapper>
             {availableDates.map((date) => {
               const dateKey = Object.values(date).join('/');
-              return <Column key={dateKey}>{children({ date: dateKey, timeSlots })}</Column>;
+              return (
+                <ColumnWrapper key={dateKey}>
+                  {children({ date: dateKey, timeSlots })}
+                </ColumnWrapper>
+              );
             })}
-            {emptyDates && emptyDates.map((value) => <EmptyColumn key={value} />)}
-          </Table>
-        </TableWrapper>
+            {emptyDates && emptyDates.map((value) => <EmptyColumnWrapper key={value} />)}
+          </TableWrapper>
+        </TableWithDateWrapper>
       </TimetableWrapper>
       {bottomItem}
     </>
@@ -43,26 +47,26 @@ const TimetableWrapper = styled.div`
   gap: 0.75rem;
 `;
 
-const TableWrapper = styled.div`
+const TableWithDateWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
 `;
 
-const Table = styled.div`
+const TableWrapper = styled.div`
   display: flex;
   border-bottom: 1px solid ${({ theme }) => theme.colors.grey7};
   border-left: 1px solid ${({ theme }) => theme.colors.grey7};
 `;
 
-const Column = styled.div`
+const ColumnWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
   border-right: 1px solid ${({ theme }) => theme.colors.grey7};
 `;
 
-const EmptyColumn = styled.div`
+const EmptyColumnWrapper = styled.div`
   display: flex;
   flex-direction: column;
   border-top: 1px solid ${({ theme }) => theme.colors.grey7};
diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
index fdb8c261..4134e8bc 100644
--- a/src/pages/selectSchedule/components/SelectScheduleTable.tsx
+++ b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -18,7 +18,7 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
 
   const { scheduleStep } = useScheduleStepContext();
 
-  const stepSlots: StepSlotsType = {
+  const stepColumns: StepSlotsType = {
     selectTimeSlot: ({ date, timeSlots }: ColumnStructure) => (
       <SelectionColumn date={date} timeSlots={timeSlots} />
     ),
@@ -26,7 +26,7 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
       <PriorityColumn date={date} timeSlots={timeSlots} />
     ),
   };
-  const stepSlot = stepSlots[scheduleStep];
+  const stepColumn = stepColumns[scheduleStep];
 
   const bottomItems: StepbottomItemsType = {
     selectTimeSlot: <TimeSlotCta />,
@@ -49,7 +49,7 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
       }}
     >
       <Timetable timeSlots={timeSlots} availableDates={availableDates} bottomItem={bottomItem}>
-        {stepSlot}
+        {stepColumn}
       </Timetable>
     </SelectContext.Provider>
   );