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

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

@@ -1,52 +1,78 @@
 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 handleDeleteSlot = (selectedEntryId: number) => {
-        const newSelectedSlots = {...selectedSlots};
-        delete newSelectedSlots[selectedEntryId];
-        setSelectedSlots(newSelectedSlots);
+      const keys = Object.keys(selectedSlots).map(Number);
+      const newKey = keys.length ? Math.max(...keys) + 1 : 0;
+
+      setSelectedSlots((prev) => {
+        const newSelectedSlots = { ...prev };
+        newSelectedSlots[newKey] = newSelectedSlot;
+        return newSelectedSlots;
+      });
+      removeOverlappedSlots(endSlot, dateOfStartSlot);
     }
+    setStartSlot(undefined);
+  };
+
+  const handleDeleteSlot = (selectedEntryId: number) => {
+    setSelectedSlots((prev) => {
+      const newSelectedSlots = { ...prev };
+      delete newSelectedSlots[selectedEntryId];
+      return newSelectedSlots;
+    });
+  };
 
-    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 removeOverlappedSlots = (endSlot: string, dateOfStartSlot: string) => {
+    const selectedSlotsPerDate = Object.fromEntries(
+      Object.entries(selectedSlots).filter(([, slot]) => slot.date === dateOfStartSlot),
+    );
+    Object.entries(selectedSlotsPerDate).forEach(
+      ([id, { startSlot: selectedStartSlot, endSlot: selectedEndSlot }]) => {
+        const startSlotTime = startSlot && startSlot.split('/').pop();
+        const endSlotTime = endSlot.split('/').pop();
+        if (
+          startSlotTime &&
+          endSlotTime &&
+          selectedStartSlot > startSlotTime &&
+          selectedEndSlot < endSlotTime
+        ) {
+          handleDeleteSlot(Number(id));
         }
+      },
+    );
+  };
+
+  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);
     }
+  };
 
-    return {startSlot, onClickSlot}
-}
+  return { startSlot, onClickSlot };
+};
 
-export default useSlotSeletion
+export default useSlotSeletion;

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)[] => {