[Feat/#250] 탭투탭에서 블록이 겹쳐서 쌓이는 문제 해결

src/pages/OverallSchedule/components/OverallScheduleTable.tsx

@@ -21,7 +21,7 @@ function OverallScheduleTable({
   availableDates,
   dataOverallSchedule,
 }: OverallScheduleTableProps) {
-  const [clickedSlot, setClickedSlot] = useState<string | undefined>(undefined);
+  const [clickedSlot, setClickedSlot] = useState<string | null>(null);
   const [clickedUserNames, setClickedUserNames] = useState<string[]>([]);
 
   const getAvailableTimesPerDate = (

src/pages/OverallSchedule/contexts/useClickContext.ts

@@ -1,15 +1,15 @@
 import { Dispatch, SetStateAction, createContext, useContext } from 'react';
 
 interface ClickContextType {
-  clickedSlot: string | undefined;
+  clickedSlot: string | null;
   setClickedSlot: Dispatch<SetStateAction<ClickContextType['clickedSlot']>>;
   clickedUserNames: string[];
   setClickedUserNames: Dispatch<SetStateAction<ClickContextType['clickedUserNames']>>;
 }
 
 export const ClickContext = createContext<ClickContextType>({
-  clickedSlot: undefined,
-  setClickedSlot: () => undefined,
+  clickedSlot: null,
+  setClickedSlot: () => null,
   clickedUserNames: [],
   setClickedUserNames: () => [],
 });

src/pages/selectSchedule/components/SelectScheduleTable.tsx

@@ -13,7 +13,7 @@ import { SelectContext, SelectedSlotType } from '../contexts/useSelectContext';
 import { StepSlotsType, StepbottomItemsType } from '../types';
 
 function SelectScheduleTable({ timeSlots, availableDates }: TimetableStructure) {
-  const [startSlot, setStartSlot] = useState<string | undefined>(undefined);
+  const [startSlot, setStartSlot] = useState<string | null>(null);
   const [selectedSlots, setSelectedSlots] = useState<SelectedSlotType>({});
 
   const { scheduleStep } = useScheduleStepContext();

src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts

@@ -1,52 +1,79 @@
 import { useSelectContext } from 'pages/selectSchedule/contexts/useSelectContext';
 
 const useSlotSeletion = () => {
-    const {startSlot, setStartSlot, selectedSlots, setSelectedSlots} = useSelectContext();
+  const { startSlot, setStartSlot, selectedSlots, setSelectedSlots } = useSelectContext();
 
-    const handleSelectSlot = (targetSlot: string) => {
-        setStartSlot(targetSlot);
-    }
+  const handleSelectSlot = (targetSlot: string) => {
+    setStartSlot(targetSlot);
+  };
 
-    const handleCompleteSlot = (targetSlot: string) => {
-        const dateOfStartSlot = startSlot?.substring(0, startSlot.lastIndexOf('/'));
-        const dateOfTargetSlot = targetSlot.substring(0, targetSlot.lastIndexOf('/'))
-        if (startSlot && dateOfStartSlot === dateOfTargetSlot){
-            const newSelectedSlot = {
-                date:dateOfStartSlot,
-                startSlot:startSlot?.substring(startSlot.lastIndexOf('/')+1),
-                endSlot:targetSlot.substring(targetSlot.lastIndexOf('/')+1),
-                priority:0,
-            }
-
-            const keys = Object.keys(selectedSlots).map(Number)
-            const newKey = keys.length ? Math.max(...keys) + 1 : 0;
-            const newSelectedSlots = {...selectedSlots};
-            newSelectedSlots[newKey] = newSelectedSlot;
-            setSelectedSlots(newSelectedSlots)
-        }
-        setStartSlot(undefined);
-    }
+  const handleCompleteSlot = (endSlot: string) => {
+    const dateOfStartSlot = startSlot && startSlot.substring(0, startSlot.lastIndexOf('/'));
+    const dateOfEndSlot = endSlot.substring(0, endSlot.lastIndexOf('/'));
+    if (startSlot && dateOfStartSlot === dateOfEndSlot) {
+      const newSelectedSlot = {
+        date: dateOfStartSlot,
+        startSlot: startSlot && startSlot.substring(startSlot.lastIndexOf('/') + 1),
+        endSlot: endSlot.substring(endSlot.lastIndexOf('/') + 1),
+        priority: 0,
+      };
+
+      const keys = Object.keys(selectedSlots).map(Number);
+      const newKey = keys.length ? Math.max(...keys) + 1 : 0;
 
-    const handleDeleteSlot = (selectedEntryId: number) => {
-        const newSelectedSlots = {...selectedSlots};
-        delete newSelectedSlots[selectedEntryId];
-        setSelectedSlots(newSelectedSlots);
+      setSelectedSlots((prev) => {
+        const newSelectedSlots = { ...prev };
+        newSelectedSlots[newKey] = newSelectedSlot;
+        return newSelectedSlots;
+      });
+      removeOverlappedSlots(endSlot, dateOfStartSlot);
     }
+    setStartSlot(null);
+  };
 
-    const onClickSlot = (targetSlot:string, selectedEntryId?:number)=>{
-        if (selectedEntryId !== undefined){
-            if (startSlot === undefined){
-                handleDeleteSlot(selectedEntryId);
-            }
-            setStartSlot(undefined)
-        } else if (startSlot !== undefined){
-            handleCompleteSlot(targetSlot)
-        } else {
-            handleSelectSlot(targetSlot)
+  const handleDeleteSlot = (selectedEntryId: number) => {
+    setSelectedSlots((prev) => {
+      const newSelectedSlots = { ...prev };
+      delete newSelectedSlots[selectedEntryId];
+      return newSelectedSlots;
+    });
+  };
+
+  const removeOverlappedSlots = (endSlot: string, dateOfStartSlot: string) => {
+    const selectedSlotsPerDate = Object.entries(selectedSlots).filter(
+      ([, slot]) => slot.date === dateOfStartSlot,
+    );
+
+    selectedSlotsPerDate.forEach(
+      ([id, { startSlot: selectedStartSlot, endSlot: selectedEndSlot }]) => {
+        const currentStartSlotTime = startSlot && startSlot.split('/').pop();
+        const currentEndSlotTime = endSlot.split('/').pop();
+        if (
+          currentStartSlotTime &&
+          currentEndSlotTime &&
+          selectedStartSlot > currentStartSlotTime &&
+          selectedEndSlot < currentEndSlotTime
+        ) {
+          handleDeleteSlot(Number(id));
         }
+      },
+    );
+  };
+
+  const onClickSlot = (targetSlot: string, selectedEntryId?: number) => {
+    if (selectedEntryId !== undefined) {
+      if (startSlot === null) {
+        handleDeleteSlot(selectedEntryId);
+      }
+      setStartSlot(null);
+    } else if (startSlot !== null) {
+      handleCompleteSlot(targetSlot);
+    } else {
+      handleSelectSlot(targetSlot);
     }
+  };
 
-    return {startSlot, onClickSlot}
-}
+  return { startSlot, onClickSlot };
+};
 
-export default useSlotSeletion
+export default useSlotSeletion;

src/pages/selectSchedule/contexts/useScheduleStepContext.ts

@@ -9,7 +9,7 @@ interface ScheduleStepContextType {
 
 export const ScheduleStepContext = createContext<ScheduleStepContextType>({
   scheduleStep: 'selectTimeSlot',
-  setScheduleStep: () => undefined,
+  setScheduleStep: () => null,
 });
 
 export function useScheduleStepContext() {

src/pages/selectSchedule/contexts/useSelectContext.ts

@@ -12,17 +12,17 @@ export interface SelectedSlotType {
 }
 
 interface SelectContextType {
-  startSlot: string | undefined;
+  startSlot: string | null;
   setStartSlot: Dispatch<SetStateAction<SelectContextType['startSlot']>>;
   selectedSlots: SelectedSlotType;
   setSelectedSlots: Dispatch<SetStateAction<SelectedSlotType>>;
 }
 
 export const SelectContext = createContext<SelectContextType>({
-  startSlot: undefined,
-  setStartSlot: () => undefined,
+  startSlot: null,
+  setStartSlot: () => null,
   selectedSlots: {},
-  setSelectedSlots: () => undefined,
+  setSelectedSlots: () => null,
 });
 
 export function useSelectContext() {

src/pages/selectSchedule/utils/changeApiReq.ts

@@ -1,10 +1,9 @@
+import { ScheduleStates } from 'pages/legacy/selectSchedule/types/Schedule';
 import {
   HostAvailableSchduleRequestType,
   UserAvailableScheduleRequestType,
 } from 'src/types/createAvailableSchduleType';
 
-import { ScheduleStates } from '../types/Schedule';
-
 export const transformHostScheduleType = (
   scheduleList: ScheduleStates[],
 ): (HostAvailableSchduleRequestType | null)[] => {