From d0840006e86867fb8ce4d289d07766526c86b9b3 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Sat, 6 Jul 2024 02:06:15 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B2=B9=EC=B9=98=EB=8A=94=20=EB=8D=94?=
 =?UTF-8?q?=20=EC=9E=91=EC=9D=80=20=EB=B8=94=EB=A1=9D=EC=9D=B4=20=EC=9E=88?=
 =?UTF-8?q?=EB=8B=A4=EB=A9=B4=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../selectTimeSlot/hooks/useSlotSelection.ts  | 105 +++++++++++-------
 .../selectSchedule/utils/changeApiReq.ts      |   3 +-
 2 files changed, 66 insertions(+), 42 deletions(-)

diff --git a/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts b/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts
index abfadf2a..9225b7e6 100644
--- a/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts
+++ b/src/pages/selectSchedule/components/selectTimeSlot/hooks/useSlotSelection.ts
@@ -1,52 +1,77 @@
 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);
+      const newSelectedSlots = { ...removeOverlappedSlots(endSlot, dateOfStartSlot) };
+
+      newSelectedSlots[newKey] = newSelectedSlot;
+      setSelectedSlots(newSelectedSlots);
     }
+    setStartSlot(undefined);
+  };
+
+  const handleDeleteSlot = (selectedEntryId: number) => {
+    const newSelectedSlots = { ...selectedSlots };
+    delete newSelectedSlots[selectedEntryId];
+    setSelectedSlots(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 newSelectedSlots = { ...selectedSlots };
+
+    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
+        ) {
+          delete newSelectedSlots[parseInt(id)];
         }
+      },
+    );
+    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);
     }
+  };
 
-    return {startSlot, onClickSlot}
-}
+  return { startSlot, onClickSlot };
+};
 
-export default useSlotSeletion
\ No newline at end of file
+export default useSlotSeletion;
diff --git a/src/pages/selectSchedule/utils/changeApiReq.ts b/src/pages/selectSchedule/utils/changeApiReq.ts
index db14f82e..dece3d0d 100644
--- a/src/pages/selectSchedule/utils/changeApiReq.ts
+++ b/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)[] => {