fix: SlotTitle에만 slotUnit prop 내려주기

ASAP-as-soon-as-possible · Jul 27, 2024 · 572045f · 572045f
1 parent 5b17604
commit 572045f
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 14 deletions.
diff --git a/src/components/timetableComponents/Timetable.tsx b/src/components/timetableComponents/Timetable.tsx
@@ -28,7 +28,7 @@ function Timetable({ timeSlots, availableDates, slotUnit, children, bottomItem }
               const dateKey = Object.values(date).join('/');
               return (
                 <ColumnWrapper key={dateKey}>
-                  {children({ date: dateKey, timeSlots, slotUnit })}
+                  {children({ date: dateKey, timeSlots })}
                 </ColumnWrapper>
               );
             })}

diff --git a/src/components/timetableComponents/parts/Slot.tsx b/src/components/timetableComponents/parts/Slot.tsx
@@ -4,15 +4,14 @@ import styled from 'styled-components';
 
 interface SlotProps {
   customSlotStyle?: string;
-  slotUnit: 'HALF' | 'HOUR';
   onClick?: () => void;
   children?: ReactNode;
 }
 
-function Slot({ customSlotStyle, slotUnit, onClick, children }: SlotProps) {
+function Slot({ customSlotStyle, onClick, children }: SlotProps) {
   const defaultSlotStyle = `
     width: 4.4rem;
-    height: ${slotUnit === 'HALF' ? '2.2rem' : '1.2rem'};
+    height: 2.2rem;
     display: flex;
     justify-content: center;
   `;

diff --git a/src/components/timetableComponents/types.ts b/src/components/timetableComponents/types.ts
@@ -8,7 +8,6 @@ export interface TimetableStructure extends BaseStructure {
 
 export interface ColumnStructure extends BaseStructure {
   date: string;
-  slotUnit: 'HALF' | 'HOUR';
 }
 
 export interface DateType {

diff --git a/src/pages/overallSchedule/components/OverallScheduleColumn.tsx b/src/pages/overallSchedule/components/OverallScheduleColumn.tsx
@@ -46,7 +46,7 @@ function OverallScheduleColumn({ date, timeSlots, availableSlotInfo }: OverallSc
         const { colorLevel = 0, userNames = [] } = availableSlotInfo.find((info) => info.time === timeSlot) ?? {};
         const slotId = `${date}/${timeSlot}`;
 
-        return <Slot key={slotId} slotUnit='HALF' customSlotStyle={getTimeSlotStyle(colorLevel, slotId)} onClick={()=>onClickSlot(slotId, userNames)}/>;
+        return <Slot key={slotId} customSlotStyle={getTimeSlotStyle(colorLevel, slotId)} onClick={()=>onClickSlot(slotId, userNames)}/>;
       })}
     </>
   );

diff --git a/src/pages/overallSchedule/components/OverallScheduleTable.tsx b/src/pages/overallSchedule/components/OverallScheduleTable.tsx
@@ -56,7 +56,6 @@ function OverallScheduleTable({
           <OverallScheduleColumn
             date={date}
             timeSlots={timeSlots}
-            slotUnit="HALF"
             availableSlotInfo={getAvailableTimesPerDate(
               dataOverallSchedule.availableDateTimes,
               date,

diff --git a/src/pages/selectSchedule/components/SelectScheduleTable.tsx b/src/pages/selectSchedule/components/SelectScheduleTable.tsx
@@ -22,10 +22,10 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
 
   const stepColumns: StepSlotsType = {
     selectTimeSlot: ({ date, timeSlots }: ColumnStructure) => (
-      <SelectionColumn date={date} timeSlots={timeSlots} slotUnit={slotUnit} />
+      <SelectionColumn date={date} timeSlots={timeSlots} />
     ),
     selectPriority: ({ date, timeSlots }: ColumnStructure) => (
-      <PriorityColumn date={date} timeSlots={timeSlots} slotUnit={slotUnit} />
+      <PriorityColumn date={date} timeSlots={timeSlots} />
     ),
   };
   const stepColumn = stepColumns[scheduleStep];

diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityColumn.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityColumn.tsx
@@ -5,7 +5,7 @@ import { theme } from 'styles/theme';
 
 import Slot from '../../../../components/timetableComponents/parts/Slot';
 
-function PriorityColumn({ date, timeSlots, slotUnit }: ColumnStructure) {
+function PriorityColumn({ date, timeSlots }: ColumnStructure) {
   const { selectedSlots } = useSelectContext();
 
   const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
@@ -48,10 +48,12 @@ function PriorityColumn({ date, timeSlots, slotUnit }: ColumnStructure) {
     const borderTopStyle = slotId.endsWith(':30') ? 'none' : 'solid';
     const borderTop = isSelectedSlot ? 'none' : `1px ${borderTopStyle} ${theme.colors.grey7}`;
     const backgroundColor = isSelectedSlot ? slotColor : 'transparent';
+    const height = '1.2rem';
 
     return `
         border-top: ${borderTop};
-        background-color : ${backgroundColor};
+        background-color: ${backgroundColor};
+        height: ${height};
     `;
   };
 
@@ -76,7 +78,6 @@ function PriorityColumn({ date, timeSlots, slotUnit }: ColumnStructure) {
         return (
           <Slot
             key={slotId}
-            slotUnit={slotUnit}
             customSlotStyle={getPriorityColumnStyle(slotId, priority, selectedEntryId)}
           >
             <Text font="body1" color={theme.colors.white}>

diff --git a/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx b/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx
@@ -5,7 +5,7 @@ import { theme } from 'styles/theme';
 import useSlotSeletion from './hooks/useSlotSelection';
 import Slot from '../../../../components/timetableComponents/parts/Slot';
 
-function SelectionColumn({ date, timeSlots, slotUnit }: ColumnStructure) {
+function SelectionColumn({ date, timeSlots }: ColumnStructure) {
   const { selectedSlots } = useSelectContext();
   const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
     ([, slot]) => slot.date === date,
@@ -48,7 +48,6 @@ function SelectionColumn({ date, timeSlots, slotUnit }: ColumnStructure) {
         return (
           <Slot
             key={slotId}
-            slotUnit={slotUnit}
             customSlotStyle={getTimeSlotStyle(slotId, selectedEntryId)}
             onClick={() => onClickSlot(slotId, selectedEntryId)}
           />