fix: TimetableContext에 의존성이 있는 컴포넌트를 Timetable 컴포넌트 내부로 이동

src/components/timetableComponents/Timetable.tsx

@@ -11,9 +11,10 @@ interface TimetableProps {
   timeSlots: string[];
   availableDates: DateType[];
   children: (props: ColumnStructure) => ReactNode;
+  bottomItem?: ReactNode;
 }
 
-function Timetable({ timeSlots, availableDates, children }: TimetableProps) {
+function Timetable({ timeSlots, availableDates, children, bottomItem }: TimetableProps) {
   const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
   const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
 
@@ -41,6 +42,7 @@ function Timetable({ timeSlots, availableDates, children }: TimetableProps) {
           </Table>
         </TableWrapper>
       </TimetableWrapper>
+      {bottomItem}
     </TimetableContext.Provider>
   );
 }

src/pages/selectSchedule/components/SelectScheduleTable.tsx

@@ -7,7 +7,7 @@ import PrioritySlots from './selectPriority/PrioritySlots';
 import SelectionSlots from './selectTimeSlot/SelectionSlots';
 import TimeSlotCta from './selectTimeSlot/TimeSlotCta';
 import { useScheduleStepContext } from '../context';
-import { StepBtnsType, StepSlotsType } from '../types';
+import { StepSlotsType, StepbottomItemsType } from '../types';
 
 function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure) {
   const { scheduleStep } = useScheduleStepContext();
@@ -22,20 +22,21 @@ function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure)
   };
   const stepSlot = stepSlots[scheduleStep];
 
-  const stepBtns: StepBtnsType = {
+  const bottomItems: StepbottomItemsType = {
     selectTimeSlot: <TimeSlotCta />,
-    selectPriority: <PriorityCta />,
+    selectPriority: (
+      <>
+        <PriorityDropdown />
+        <PriorityCta />
+      </>
+    ),
   };
-  const stepBtn = stepBtns[scheduleStep];
+  const bottomItem = bottomItems[scheduleStep];
 
   return (
-    <>
-      <Timetable timeSlots={timeSlots} availableDates={availableDates}>
-        {stepSlot}
-      </Timetable>
-      {scheduleStep === 'selectPriority' && <PriorityDropdown />}
-      {stepBtn}
-    </>
+    <Timetable timeSlots={timeSlots} availableDates={availableDates} bottomItem={bottomItem}>
+      {stepSlot}
+    </Timetable>
   );
 }
 

src/pages/selectSchedule/components/selectPriority/PriorityCta.tsx

@@ -1,8 +1,9 @@
+import { useState } from 'react';
+
 import Button from 'components/atomComponents/Button';
-import SelectModal from 'pages/legacy/selectSchedule/SelectModal';
 import Text from 'components/atomComponents/Text';
+import SelectModal from 'pages/legacy/selectSchedule/SelectModal';
 import styled from 'styled-components';
-import { useState } from 'react';
 
 function PriorityCta() {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -36,10 +37,11 @@ export default PriorityCta;
 const BtnDim = styled.div`
   display: flex;
   position: fixed;
-  gap: 1rem;
   bottom: 0;
+  gap: 1rem;
   align-items: end;
   justify-content: center;
+  z-index: 2;
 
   margin-top: 3rem;
   background: ${({ theme }) => theme.colors.dim_gradient};

src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx

@@ -1,15 +1,15 @@
+import { useState } from 'react';
+
+import Text from 'components/atomComponents/Text';
 import { Circle1Ic, Circle2Ic, Circle3Ic, DropDownIc, DropUpIc } from 'components/Icon/icon';
 import {
   SelectedSlotType,
   SlotInfoType,
   useTimetableContext,
 } from 'components/timetableComponents/context';
-
-import Text from 'components/atomComponents/Text';
 import { addMinutes } from 'components/timetableComponents/utils';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
-import { useState } from 'react';
 
 /**
  *

src/pages/selectSchedule/types.ts

@@ -4,4 +4,4 @@ import { ColumnStructure } from 'components/timetableComponents/types';
 
 export type ScheduleStepType = 'selectTimeSlot' | 'selectPriority';
 export type StepSlotsType = { [key in ScheduleStepType]: (props: ColumnStructure) => ReactNode };
-export type StepBtnsType = { [key in ScheduleStepType]: ReactNode };
+export type StepbottomItemsType = { [key in ScheduleStepType]: ReactNode };