fix: slots -> column으로 네이밍 변경

ASAP-as-soon-as-possible · Jun 25, 2024 · f72b629 · f72b629
1 parent 7228267
commit f72b629
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git 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
@@ -18,15 +18,15 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
 
   const { scheduleStep } = useScheduleStepContext();
 
-  const stepSlots: StepSlotsType = {
+  const stepColumns: StepSlotsType = {
     selectTimeSlot: ({ date, timeSlots }: ColumnStructure) => (
       <SelectionColumn date={date} timeSlots={timeSlots} />
     ),
     selectPriority: ({ date, timeSlots }: ColumnStructure) => (
       <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>
   );