From 3beabbcd95461b5d886725f1233ed7a2cb0da254 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=80=EC=A7=80?=
 <103625348+eunji-0623@users.noreply.github.com>
Date: Tue, 6 Aug 2024 14:14:39 +0900
Subject: [PATCH 1/8] =?UTF-8?q?Style:=20=EB=8B=A4=ED=81=AC=EB=AA=A8?=
 =?UTF-8?q?=EB=93=9C=EC=97=90=EC=84=9C=20=EC=B1=84=ED=8C=85=20=EA=B8=80?=
 =?UTF-8?q?=EC=9E=90=EC=83=89=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Popup/ChatPopup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Popup/ChatPopup.tsx b/components/Popup/ChatPopup.tsx
index 31546dd..af04f23 100644
--- a/components/Popup/ChatPopup.tsx
+++ b/components/Popup/ChatPopup.tsx
@@ -124,7 +124,7 @@ function ChatPopup({
                   value={message}
                   onChange={(e) => setMessage(e.target.value)}
                   placeholder="메시지 입력"
-                  className="w-[70%] h-[30px] rounded-[10px] p-[5px] pl-[10px]"
+                  className="w-[70%] h-[30px] rounded-[10px] p-[5px] pl-[10px] dark:text-black"
                 />
                 <button className="bg-nomad-black text-white w-[25%] rounded-[5px]">
                   전송

From 514a86cb7cb839caf6d8a637e67ea56d7e10bbc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=80=EC=A7=80?=
 <103625348+eunji-0623@users.noreply.github.com>
Date: Tue, 6 Aug 2024 14:20:08 +0900
Subject: [PATCH 2/8] =?UTF-8?q?Style:=20=EB=82=B4=20=EC=B2=B4=ED=97=98=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=9D=98=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EC=9D=84=20=EC=98=88=EC=95=BD=20?=
 =?UTF-8?q?=EB=82=B4=EC=97=AD=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=99=80=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/myactivity/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/myactivity/index.tsx b/pages/myactivity/index.tsx
index b79df71..1d9567d 100644
--- a/pages/myactivity/index.tsx
+++ b/pages/myactivity/index.tsx
@@ -55,7 +55,7 @@ function MyActivity({ OGTitle, OGUrl }: SSRMetaProps) {
   return (
     <>
       <InitialPageMeta title={OGTitle} url={OGUrl} />
-      <div className="flex justify-center w-full mt-[72px] mb-12 gap-[24px] t:mt-[24px] t:gap-[16px] m:mt-[26px] m:gap-0 min-h-screen">
+      <div className="flex justify-center w-full mt-[72px] mb-12 gap-[24px] t:mt-[24px] t:gap-[16px] m:mt-[26px] m:gap-0">
         <div className="m:hidden">
           <SideNavigation />
         </div>
@@ -78,7 +78,7 @@ function MyActivity({ OGTitle, OGUrl }: SSRMetaProps) {
             </PrimaryButton>
           </div>
           {totalCount !== 0 ? (
-            <>
+            <div className="flex flex-col animate-slideDown gap-[24px] overflow-auto scrollbar-hide pb-[20px] h-[calc(100vh-220px)] t:h-[calc(100vh-160px)] t:gap-[16px] m:h-[calc(100vh-100px)]">
               {myActivityList?.map((activity) => {
                 return (
                   <Card
@@ -97,7 +97,7 @@ function MyActivity({ OGTitle, OGUrl }: SSRMetaProps) {
                   ...
                 </div>
               )}
-            </>
+            </div>
           ) : (
             <div className="flex flex-col h-[500px] items-center justify-center">
               <Image

From c03ef943a29f8cce92ccefe207e69274f1130855 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=80=EC=A7=80?=
 <103625348+eunji-0623@users.noreply.github.com>
Date: Tue, 6 Aug 2024 14:29:20 +0900
Subject: [PATCH 3/8] =?UTF-8?q?Style:=20=EC=B1=84=ED=8C=85=20=ED=8C=9D?=
 =?UTF-8?q?=EC=97=85=20=EC=9C=84=EC=B9=98=20=EC=98=A4=EB=A5=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- fixed가 부모요소 내에서 적용되는 오류로 인해 card 목록의 애니메이션
  제거
---
 pages/myactivity/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/myactivity/index.tsx b/pages/myactivity/index.tsx
index 1d9567d..39fddce 100644
--- a/pages/myactivity/index.tsx
+++ b/pages/myactivity/index.tsx
@@ -78,7 +78,7 @@ function MyActivity({ OGTitle, OGUrl }: SSRMetaProps) {
             </PrimaryButton>
           </div>
           {totalCount !== 0 ? (
-            <div className="flex flex-col animate-slideDown gap-[24px] overflow-auto scrollbar-hide pb-[20px] h-[calc(100vh-220px)] t:h-[calc(100vh-160px)] t:gap-[16px] m:h-[calc(100vh-100px)]">
+            <div className="flex flex-col gap-[24px] overflow-auto scrollbar-hide pb-[20px] h-[calc(100vh-220px)] t:h-[calc(100vh-160px)] t:gap-[16px] m:h-[calc(100vh-100px)]">
               {myActivityList?.map((activity) => {
                 return (
                   <Card

From 3a0a563cf7fafe31b0765bb08ee0200e3d095eeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=80=EC=A7=80?=
 <103625348+eunji-0623@users.noreply.github.com>
Date: Tue, 6 Aug 2024 14:33:39 +0900
Subject: [PATCH 4/8] =?UTF-8?q?Fix:=20=EC=B1=84=ED=8C=85=20=ED=8C=9D?=
 =?UTF-8?q?=EC=97=85=20=EC=97=B4=EB=A0=A4=EC=9E=88=EC=9D=84=20=EB=95=8C=20?=
 =?UTF-8?q?=EC=B1=84=ED=8C=85=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=EB=AA=BB=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MyActivity/Card/Card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/MyActivity/Card/Card.tsx b/components/MyActivity/Card/Card.tsx
index 3cdabef..ff57aa8 100644
--- a/components/MyActivity/Card/Card.tsx
+++ b/components/MyActivity/Card/Card.tsx
@@ -132,7 +132,7 @@ function Card({
             </span>
           </div>
           <div className="m:w-[32px] m:h-[32px] flex items-center">
-            <button onClick={handleClickChat}>
+            <button onClick={handleClickChat} disabled={isPopupOpen}>
               <Image
                 src={
                   isDarkMode

From eaa7e383b29727a825abf010847e2dd5c48a0179 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=80=EC=A7=80?=
 <103625348+eunji-0623@users.noreply.github.com>
Date: Tue, 6 Aug 2024 14:58:15 +0900
Subject: [PATCH 5/8] =?UTF-8?q?Fix:=20=EA=B0=80=EB=81=94=EC=94=A9=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=EC=9E=90=20=EB=AC=B8=EC=9D=98=20=EC=B1=84?=
 =?UTF-8?q?=ED=8C=85=20=EB=82=B4=EC=97=AD=EC=9D=B4=20=EC=95=88=EB=9C=A8?=
 =?UTF-8?q?=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MyActivity/Card/Card.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/components/MyActivity/Card/Card.tsx b/components/MyActivity/Card/Card.tsx
index ff57aa8..f39d859 100644
--- a/components/MyActivity/Card/Card.tsx
+++ b/components/MyActivity/Card/Card.tsx
@@ -81,6 +81,14 @@ function Card({
   };
 
   const handleClickChat = () => {
+    if (!socket.connected) {
+      socket.connect();
+    }
+
+    socket.on('connect', () => {
+      console.log('connection server');
+    });
+
     socket.emit('inquiryList', activityId);
     setIsPopupOpen(!isPopupOpen);
   };

From f47e03387a7ec063701cdbe79e73808bb04be450 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=80=EC=A7=80?=
 <103625348+eunji-0623@users.noreply.github.com>
Date: Tue, 6 Aug 2024 19:34:51 +0900
Subject: [PATCH 6/8] =?UTF-8?q?Refactor:=20=EC=B2=B4=ED=97=98=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D/=EC=88=98=EC=A0=95=20=EC=98=88=EC=95=BD=20=EA=B0=80?=
 =?UTF-8?q?=EB=8A=A5=20=EC=8B=9C=EA=B0=84=20=EB=B6=80=EB=B6=84=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MyActivity/Register/DateInput.tsx  |  35 +++-
 .../MyActivity/Register/RegisterForm.tsx      |  73 ++++----
 .../MyActivity/Register/RegisterForm.types.ts |   7 +
 .../MyActivity/Register/TimeDropdown.tsx      |   6 +-
 components/MyActivity/Register/TimeSlot.tsx   | 171 +++++++++++++-----
 .../MyActivity/Register/TimeSlot.types.ts     |   8 +-
 hooks/myActivity/useResetRegisterState.tsx    |  12 +-
 .../api/myActivities/apimyActivities.types.ts |   8 +-
 states/registerState.tsx                      |  50 +++--
 9 files changed, 245 insertions(+), 125 deletions(-)

diff --git a/components/MyActivity/Register/DateInput.tsx b/components/MyActivity/Register/DateInput.tsx
index 8ff897d..5a37697 100644
--- a/components/MyActivity/Register/DateInput.tsx
+++ b/components/MyActivity/Register/DateInput.tsx
@@ -2,13 +2,18 @@ import { useState } from 'react';
 import CustomCalendar from '@/components/CustomCalendar/CustomCalendar';
 import useClickOutside from '@/hooks/useClickOutside';
 import { useRecoilState } from 'recoil';
-import { selectedDateState } from '@/states/registerState';
+import { scheduleState, selectedDateState } from '@/states/registerState';
 import { TimeSlotGroupProps } from './TimeSlot.types';
+import { formatDate } from '@/utils/formatDate';
 
-function Date({ index }: TimeSlotGroupProps) {
+function Date({ id, disabled = false }: TimeSlotGroupProps) {
   const [date, setDate] = useState<Date | null>(null);
   const [showCalendar, setShowCalendar] = useState(false);
   const [selectedDate, setSelectedDate] = useRecoilState(selectedDateState);
+  const [editSchedule, setEditSchedule] = useRecoilState(scheduleState);
+  const selectedItem = selectedDate.find((date) => date.id === id);
+  const placeholderDate =
+    selectedItem && selectedItem.date !== '' ? selectedItem.date : 'YY/MM/DD';
 
   const handleInputClick = () => {
     setShowCalendar(true);
@@ -19,9 +24,21 @@ function Date({ index }: TimeSlotGroupProps) {
     setShowCalendar(false);
 
     if (date) {
-      const updatedDate = [...selectedDate];
-      updatedDate[index] = date.toString();
-      setSelectedDate(updatedDate);
+      setSelectedDate((prevSelectedDate) =>
+        prevSelectedDate.map((selectedDate) =>
+          selectedDate.id === id
+            ? { ...selectedDate, date: formatDate(date.toString()) }
+            : selectedDate
+        )
+      );
+      setEditSchedule((prevSchedule) => ({
+        ...prevSchedule,
+        toAdd: prevSchedule.toAdd.map((schedule) =>
+          schedule.id === id
+            ? { ...schedule, date: formatDate(date.toString()) }
+            : schedule
+        ),
+      }));
     }
   };
 
@@ -39,10 +56,10 @@ function Date({ index }: TimeSlotGroupProps) {
           value={date ? date.toDateString() : ''}
           onClick={handleInputClick}
           readOnly
-          className="w-full h-[56px] py-[8px] px-[16px] rounded-md border border-var-gray6 dark:border-var-dark3 bg-white dark:bg-var-dark2 dark:text-var-gray2"
-          placeholder={
-            selectedDate[index] !== '' ? selectedDate[index] : 'YY/MM/DD'
-          }
+          className="w-full h-[56px] py-[8px] px-[16px] rounded-md border border-var-gray6 dark:border-var-dark3
+           bg-white dark:bg-var-dark2 dark:text-var-gray2 disabled:bg-var-gray2"
+          placeholder={placeholderDate}
+          disabled={disabled}
         />
       </div>
       {showCalendar && (
diff --git a/components/MyActivity/Register/RegisterForm.tsx b/components/MyActivity/Register/RegisterForm.tsx
index 4ca7c98..2c53fd9 100644
--- a/components/MyActivity/Register/RegisterForm.tsx
+++ b/components/MyActivity/Register/RegisterForm.tsx
@@ -15,18 +15,15 @@ import {
   addressState,
   bannerImageState,
   detailImageState,
-  endTimeState,
   selectedDateState,
-  startTimeState,
   timeSlotCountState,
-  timeSlotState,
+  scheduleState,
 } from '@/states/registerState';
 import useRegisterActivity from '@/hooks/myActivity/useRegisterActivity';
-import { formatDate } from '@/utils/formatDate';
 import SidenNavigation from '@/components/SideNavigation/SideNavigation';
 import AddressInput from '@/components/MyActivity/Register/AddressInput';
 import { useEffect } from 'react';
-import { RegisterFormProps } from './RegisterForm.types';
+import { RegisterFormProps, SelectedDateProps } from './RegisterForm.types';
 import useEditMyActivity from '@/hooks/myActivity/useEditMyActivity';
 import useResetRegisterState from '@/hooks/myActivity/useResetRegisterState';
 import { sideNavigationState } from '@/states/sideNavigationState';
@@ -42,11 +39,9 @@ function RegisterForm({ activityData, isEdit = false }: RegisterFormProps) {
   const [bannerImage, setBannerImage] = useRecoilState(bannerImageState);
   const [detailImage, setDetailImage] = useRecoilState(detailImageState);
   const [selectedDate, setSelectedDate] = useRecoilState(selectedDateState);
-  const [timeSlots, setTimeSlots] = useRecoilState(timeSlotState);
   const [timeSlotCount, setTimeSlotCount] = useRecoilState(timeSlotCountState);
-  const [startTime, setStartTime] = useRecoilState(startTimeState);
-  const [endTime, setEndTime] = useRecoilState(endTimeState);
   const [address, setAddress] = useRecoilState(addressState);
+  const [editSchedules, setEditSchedules] = useRecoilState(scheduleState);
 
   const {
     register,
@@ -69,24 +64,21 @@ function RegisterForm({ activityData, isEdit = false }: RegisterFormProps) {
       setDetailImage(activityData.subImages);
       setAddress(activityData.address);
       setTimeSlotCount(activityData.schedules.length);
-      const tempDate = [...selectedDate];
-      const tempStartTime = [...startTime];
-      const tempEndTime = [...endTime];
-      const tempTimeSlots: { id: number }[] = [];
+      const updatedDates: SelectedDateProps[] = activityData.schedules.map(
+        (schedule) => {
+          // endTime이 '00:00'인 경우 '24:00'으로 변환
+          const normalizedEndTime =
+            schedule.endTime === '00:00' ? '24:00' : schedule.endTime;
 
-      activityData.schedules.forEach((schedule, index) => {
-        tempDate[index] = schedule.date;
-        tempStartTime[index] = schedule.startTime;
-        tempEndTime[index] =
-          schedule.endTime === '00:00' ? '24:00' : schedule.endTime;
-        tempTimeSlots.push({ id: schedule.id });
-      });
-      tempTimeSlots.pop();
-
-      setSelectedDate(tempDate);
-      setStartTime(tempStartTime);
-      setEndTime(tempEndTime);
-      setTimeSlots(tempTimeSlots);
+          return {
+            date: schedule.date,
+            startTime: schedule.startTime,
+            endTime: normalizedEndTime,
+            id: schedule.id,
+          };
+        }
+      );
+      setSelectedDate(updatedDates);
     }
   }, [activityData]);
 
@@ -94,12 +86,13 @@ function RegisterForm({ activityData, isEdit = false }: RegisterFormProps) {
   const { postActivityMutation } = useRegisterActivity();
   const { patchActivityMutation } = useEditMyActivity();
 
-  const formatSchedules = () =>
-    Array.from({ length: timeSlotCount }, (_, i) => ({
-      endTime: endTime[i] === '24:00' ? '00:00' : endTime[i],
-      startTime: startTime[i],
-      date: formatDate(selectedDate[i]),
+  const formatSchedules = () => {
+    return selectedDate.map((schedule, i) => ({
+      date: schedule.date,
+      startTime: schedule.startTime,
+      endTime: schedule.endTime === '24:00' ? '00:00' : schedule.endTime,
     }));
+  };
 
   // 수정 버튼 클릭 시
   const onSubmitEdit = async (data: FieldValues) => {
@@ -107,16 +100,14 @@ function RegisterForm({ activityData, isEdit = false }: RegisterFormProps) {
       return;
     }
     const { title, description, price } = data;
-    const schedules = formatSchedules();
     const subImageUrls = detailImage.map((image) => image.imageUrl);
     const subImageIdsToRemove = [];
-    const scheduleIdsToRemove = [];
     for (let i = 0; i < activityData.subImages.length; i++) {
       subImageIdsToRemove.push(activityData.subImages[i].id);
     }
-    for (let i = 0; i < activityData.schedules.length; i++) {
-      scheduleIdsToRemove.push(activityData.schedules[i].id);
-    }
+    const filteredIds = editSchedules.idsToRemove.filter((id) =>
+      activityData.schedules.some((schedule) => schedule.id === id)
+    );
 
     patchActivityMutation.mutate({
       activityId: activityData.id,
@@ -129,8 +120,8 @@ function RegisterForm({ activityData, isEdit = false }: RegisterFormProps) {
         bannerImageUrl: bannerImage[0],
         subImageIdsToRemove,
         subImageUrlsToAdd: subImageUrls,
-        scheduleIdsToRemove,
-        schedulesToAdd: schedules,
+        scheduleIdsToRemove: filteredIds,
+        schedulesToAdd: editSchedules.toAdd,
       },
     });
   };
@@ -157,9 +148,9 @@ function RegisterForm({ activityData, isEdit = false }: RegisterFormProps) {
   const isTimeFieldValid = () =>
     Array.from({ length: timeSlotCount }).every(
       (_, i) =>
-        endTime[i] !== '00:00' &&
-        startTime[i] <= endTime[i] &&
-        selectedDate[i] !== ''
+        selectedDate[i].endTime !== '00:00' &&
+        selectedDate[i].startTime <= selectedDate[i].endTime &&
+        selectedDate[i].date !== ''
     );
 
   // form 제출이 가능한지 체크
@@ -252,7 +243,7 @@ function RegisterForm({ activityData, isEdit = false }: RegisterFormProps) {
               errors={errors}
             />
             <AddressInput />
-            <TimeSlot />
+            <TimeSlot isEdit={isEdit} />
             <UploadBannerImage />
             <UploadDetailImage />
           </div>
diff --git a/components/MyActivity/Register/RegisterForm.types.ts b/components/MyActivity/Register/RegisterForm.types.ts
index dc5892d..9fd5090 100644
--- a/components/MyActivity/Register/RegisterForm.types.ts
+++ b/components/MyActivity/Register/RegisterForm.types.ts
@@ -29,3 +29,10 @@ export interface RegisterFormProps {
   };
   isEdit?: boolean;
 }
+
+export interface SelectedDateProps {
+  date: string;
+  startTime: string;
+  endTime: string;
+  id: number;
+}
diff --git a/components/MyActivity/Register/TimeDropdown.tsx b/components/MyActivity/Register/TimeDropdown.tsx
index d012ea8..7384a7b 100644
--- a/components/MyActivity/Register/TimeDropdown.tsx
+++ b/components/MyActivity/Register/TimeDropdown.tsx
@@ -18,6 +18,7 @@ function TimeDropdown({
   handleChange,
   startTime,
   selectedTime,
+  disabled = false,
 }: TimeDropdownProps) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -46,8 +47,11 @@ function TimeDropdown({
     <div ref={dropdownRef} className="relative">
       <button
         type="button"
-        className="flex justify-between items-center p:w-[140px] w-full h-[56px] py-[4px] px-[16px] m:px-[7px] rounded-md border border-var-gray6 dark:border-var-dark3 bg-white dark:bg-var-dark2 text-var-gray7 dark:text-var-gray2 text-left t:w-[104px] m:w-full"
+        className="flex justify-between items-center p:w-[140px] w-full h-[56px] py-[4px] px-[16px] m:px-[7px] 
+        rounded-md border border-var-gray6 dark:border-var-dark3 bg-white dark:bg-var-dark2 text-var-gray7
+         dark:text-var-gray2 text-left t:w-[104px] m:w-full disabled:bg-var-gray2"
         onClick={handleClickDropdown}
+        disabled={disabled}
       >
         <p>{selectedTime}</p>
         <Image
diff --git a/components/MyActivity/Register/TimeSlot.tsx b/components/MyActivity/Register/TimeSlot.tsx
index b6ab6b9..36f3d28 100644
--- a/components/MyActivity/Register/TimeSlot.tsx
+++ b/components/MyActivity/Register/TimeSlot.tsx
@@ -1,15 +1,16 @@
 import { MinusButton, PlusButton } from '@/components/Button/Button';
 import DateInput from './DateInput';
 import TimeDropdown from './TimeDropdown';
-import { TimeSlotGroupProps } from './TimeSlot.types';
+import { TimeSlotGroupProps, TimeSlotProps } from './TimeSlot.types';
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import {
-  startTimeState,
-  endTimeState,
   timeSlotCountState,
-  timeSlotState,
+  scheduleState,
+  selectedDateState,
+  ScheduleToAddProps,
 } from '@/states/registerState';
+import { useQuery } from '@tanstack/react-query';
 
 function autoSelectedTime(time: string) {
   const tempTime = Number(time.substring(0, 2)) + 1;
@@ -24,37 +25,53 @@ function TimeSlotGroup({
   handleClickPlus = () => {},
   handleClickMinus = (id: number) => {},
   id = -1,
-  index,
+  index = -1,
+  disabled = false,
 }: TimeSlotGroupProps) {
   const [selectedStartTime, setSelectedStartTime] = useState<string>('00:00');
-  const [selectedEndTime, setSelectedEndTime] = useState<string>('00:00');
-  const [startTime, setStartTime] = useRecoilState(startTimeState);
-  const [endTime, setEndTime] = useRecoilState(endTimeState);
+  const [selectedEndTime, setSelectedEndTime] = useState<string>('01:00');
+  const [selectedDate, setSelectedDate] = useRecoilState(selectedDateState);
+  const [editSchedule, setEditSchedule] = useRecoilState(scheduleState);
 
   const handleChange = (type: string, time: string) => {
     if (type === 'start') {
       setSelectedStartTime(time);
       setSelectedEndTime(autoSelectedTime(time));
-      const updatedStartTime = [...startTime];
-      updatedStartTime[index] = time;
-      setStartTime(updatedStartTime);
-
-      const updatedEndTime = [...endTime];
-      updatedEndTime[index] = autoSelectedTime(time);
-      setEndTime(updatedEndTime);
+      setSelectedDate((prevSelectedDate) =>
+        prevSelectedDate.map((selectedDate) =>
+          selectedDate.id === id
+            ? {
+                ...selectedDate,
+                startTime: time,
+                endTime: autoSelectedTime(time),
+              }
+            : selectedDate
+        )
+      );
+      setEditSchedule((prevSchedule) => ({
+        ...prevSchedule,
+        toAdd: prevSchedule.toAdd.map((schedule) =>
+          schedule.id === id ? { ...schedule, startTime: time } : schedule
+        ),
+      }));
     } else {
       setSelectedEndTime(time);
-      const updatedEndTime = [...endTime];
-      updatedEndTime[index] = time;
-      setEndTime(updatedEndTime);
+      setSelectedDate((prevSelectedDate) =>
+        prevSelectedDate.map((selectedDate) =>
+          selectedDate.id === id
+            ? { ...selectedDate, endTime: time }
+            : selectedDate
+        )
+      );
+      setEditSchedule((prevSchedule) => ({
+        ...prevSchedule,
+        toAdd: prevSchedule.toAdd.map((schedule) =>
+          schedule.id === id ? { ...schedule, endTime: time } : schedule
+        ),
+      }));
     }
   };
 
-  useEffect(() => {
-    setSelectedStartTime(startTime[index]);
-    setSelectedEndTime(endTime[index]);
-  }, [startTime[index], endTime[index]]);
-
   return (
     <div className="flex items-end t:justify-between m:justify-between gap-[20px] t:gap-[4px] m:gap-[6px] m:mr-4">
       <div className="flex items-center gap-[20px] t:gap-[4px] m:gap-[6px] grow">
@@ -64,7 +81,7 @@ function TimeSlotGroup({
               날짜
             </label>
           )}
-          <DateInput index={index} />
+          <DateInput id={id} disabled={disabled} />
         </div>
         <div className="flex gap-[12px] items-center t:gap-[2px] m:gap-[2px] grow">
           <div className="m:w-[50%]">
@@ -76,8 +93,9 @@ function TimeSlotGroup({
             <TimeDropdown
               type="start"
               handleChange={handleChange}
-              startTime={startTime[index]}
-              selectedTime={selectedStartTime}
+              startTime={selectedStartTime}
+              selectedTime={selectedDate[index].startTime}
+              disabled={disabled}
             />
           </div>
           <div>
@@ -99,8 +117,9 @@ function TimeSlotGroup({
             <TimeDropdown
               type="end"
               handleChange={handleChange}
-              startTime={startTime[index]}
-              selectedTime={selectedEndTime}
+              startTime={selectedStartTime}
+              selectedTime={selectedDate[index].endTime}
+              disabled={disabled}
             />
           </div>
         </div>
@@ -120,41 +139,107 @@ function TimeSlotGroup({
   );
 }
 
-function TimeSlot() {
-  const [timeSlots, setTimeSlots] = useRecoilState(timeSlotState);
+function TimeSlot({ isEdit }: TimeSlotProps) {
   const [timeSlotCount, setTimeSlotCount] = useRecoilState(timeSlotCountState);
+  const [selectedDates, setSelectedDates] = useRecoilState(selectedDateState);
+  const [editSchedule, setEditSchedule] = useRecoilState(scheduleState);
+  // const [disabledInputId, setDisabledInputId] = useState<number[]>([]);
 
   const handleClickPlus = () => {
-    const newTimeSlot = {
-      id: Date.now(),
+    const newId = Date.now();
+    setSelectedDates((prevSelectedDate) => [
+      ...prevSelectedDate,
+      {
+        date: '',
+        startTime: '00:00',
+        endTime: '01:00',
+        id: newId,
+      },
+    ]);
+    const newSchedule: ScheduleToAddProps = {
+      date: '',
+      startTime: '00:00',
+      endTime: '01:00',
+      id: newId,
     };
-    setTimeSlots((prevTimeSlots) => [...prevTimeSlots, newTimeSlot]);
+    setEditSchedule((prevSchedule) => ({
+      ...prevSchedule,
+      toAdd: [...prevSchedule.toAdd, newSchedule],
+    }));
     setTimeSlotCount(timeSlotCount + 1);
   };
 
   const handleClickMinus = (id: number) => {
-    setTimeSlots((prevTimeSlots) =>
-      prevTimeSlots.filter((timeSlot) => timeSlot.id !== id)
-    );
     setTimeSlotCount(timeSlotCount - 1);
+
+    const scheduleToRemove = selectedDates.find(
+      (selectedDate) => selectedDate.id === id
+    );
+    if (scheduleToRemove) {
+      setEditSchedule((prevSchedule) => ({
+        ...prevSchedule,
+        idsToRemove: [...prevSchedule.idsToRemove, id],
+      }));
+    } else {
+      console.log('No matching time slot found');
+    }
+    setSelectedDates((prevSelectedDate) =>
+      prevSelectedDate.filter((selectedDate) => selectedDate.id !== id)
+    );
   };
 
+  useEffect(() => {
+    if (!isEdit) {
+      const initialDate = {
+        date: '',
+        startTime: '00:00',
+        endTime: '01:00',
+        id: Date.now(),
+      };
+
+      setSelectedDates((prevSelectedDate) => [
+        ...prevSelectedDate,
+        initialDate,
+      ]);
+    }
+  }, []);
+
+  // useEffect(() => {
+  //   if (isEdit && disabledInputId.length === 0) {
+  //     setDisabledInputId((prevId) => [
+  //       ...prevId,
+  //       ...selectedDates.map((date) => date.id),
+  //     ]);
+  //   }
+  // }, [selectedDates]);
+
+  // 상태 업데이트 후의 값을 로그로 확인하기 위한 useEffect
+  useEffect(() => {
+    console.log('State after update:', editSchedule);
+  }, [editSchedule]); // selectedDates가 변경될 때마다 실행
+
+  // useEffect(() => {
+  //   console.log('disabled input: ', disabledInputId);
+  // }, [disabledInputId]);
+
   return (
     <div>
       <label className="text-[24px] font-[700] block mb-[24px] text-var-black dark:text-var-gray2">
         예약 가능한 시간대
       </label>
-      <TimeSlotGroup isDefault handleClickPlus={handleClickPlus} index={0} />
-      <hr className="mt-[20px] mb-[20px]" />
       <div className="space-y-[20px]">
-        {timeSlots.map((timeSlot, index) => (
+        <hr className="mt-[20px] mb-[20px]" />
+        {selectedDates.map((selectedDate, index) => (
           <TimeSlotGroup
-            key={timeSlot.id}
-            id={timeSlot.id}
-            index={index + 1}
+            key={selectedDate.id}
+            id={selectedDate.id}
+            index={index}
+            isDefault={index === 0}
+            handleClickPlus={handleClickPlus}
             handleClickMinus={() => {
-              handleClickMinus(timeSlot.id);
+              handleClickMinus(selectedDate.id);
             }}
+            // disabled={disabledInputId.includes(selectedDate.id)}
           />
         ))}
       </div>
diff --git a/components/MyActivity/Register/TimeSlot.types.ts b/components/MyActivity/Register/TimeSlot.types.ts
index 583f2a2..ee87f04 100644
--- a/components/MyActivity/Register/TimeSlot.types.ts
+++ b/components/MyActivity/Register/TimeSlot.types.ts
@@ -3,7 +3,8 @@ export interface TimeSlotGroupProps {
   handleClickPlus?: () => void;
   handleClickMinus?: (id: number) => void;
   id?: number;
-  index: number;
+  index?: number;
+  disabled?: boolean;
 }
 
 export interface TimeDropdownProps {
@@ -11,4 +12,9 @@ export interface TimeDropdownProps {
   handleChange: (type: string, time: string) => void;
   startTime: string;
   selectedTime: string;
+  disabled?: boolean;
+}
+
+export interface TimeSlotProps {
+  isEdit?: boolean;
 }
diff --git a/hooks/myActivity/useResetRegisterState.tsx b/hooks/myActivity/useResetRegisterState.tsx
index 1e9ea69..387efc8 100644
--- a/hooks/myActivity/useResetRegisterState.tsx
+++ b/hooks/myActivity/useResetRegisterState.tsx
@@ -4,11 +4,9 @@ import {
   addressState,
   bannerImageState,
   detailImageState,
-  endTimeState,
+  scheduleState,
   selectedDateState,
-  startTimeState,
   timeSlotCountState,
-  timeSlotState,
 } from '@/states/registerState';
 
 function useResetRegisterState() {
@@ -17,10 +15,8 @@ function useResetRegisterState() {
   const resetBannerImage = useResetRecoilState(bannerImageState);
   const resetDetailImage = useResetRecoilState(detailImageState);
   const resetSelectedDate = useResetRecoilState(selectedDateState);
-  const resetTimeSlot = useResetRecoilState(timeSlotState);
   const resetTimeSlotCount = useResetRecoilState(timeSlotCountState);
-  const resetStartTime = useResetRecoilState(startTimeState);
-  const resetEndTime = useResetRecoilState(endTimeState);
+  const resetSchedule = useResetRecoilState(scheduleState);
 
   const resetAllStates = () => {
     resetKategorie();
@@ -28,10 +24,8 @@ function useResetRegisterState() {
     resetBannerImage();
     resetDetailImage();
     resetSelectedDate();
-    resetTimeSlot();
     resetTimeSlotCount();
-    resetStartTime();
-    resetEndTime();
+    resetSchedule();
   };
 
   return resetAllStates;
diff --git a/pages/api/myActivities/apimyActivities.types.ts b/pages/api/myActivities/apimyActivities.types.ts
index 344b47c..bd125a9 100644
--- a/pages/api/myActivities/apimyActivities.types.ts
+++ b/pages/api/myActivities/apimyActivities.types.ts
@@ -104,6 +104,12 @@ export interface updataMyReservationResponse {
   updatedAt: string;
 }
 
+interface ScheduleToAddProps {
+  date: string;
+  startTime: string;
+  endTime: string;
+}
+
 export interface updataMyActivitiesParams {
   title: string;
   category: string;
@@ -114,7 +120,7 @@ export interface updataMyActivitiesParams {
   subImageIdsToRemove: number[];
   subImageUrlsToAdd: string[];
   scheduleIdsToRemove: number[];
-  schedulesToAdd: { date: string; startTime: string; endTime: string }[];
+  schedulesToAdd: ScheduleToAddProps[];
 }
 
 export interface updataMyActivitiesResponse {
diff --git a/states/registerState.tsx b/states/registerState.tsx
index 093e0b3..c16b6b2 100644
--- a/states/registerState.tsx
+++ b/states/registerState.tsx
@@ -1,6 +1,26 @@
 import { DetailImageProps } from '@/components/MyActivity/Register/UploadImage.types';
 import { atom } from 'recoil';
 
+export interface ScheduleToAddProps {
+  date: string;
+  startTime: string;
+  endTime: string;
+  id: number;
+}
+
+interface ScheduleProps {
+  toAdd: ScheduleToAddProps[];
+  toRemove: ScheduleToAddProps[];
+  idsToRemove: number[];
+}
+
+interface SelectedDateProps {
+  date: string;
+  startTime: string;
+  endTime: string;
+  id: number;
+}
+
 export const bannerImageState = atom<string[]>({
   key: 'bannerImageState',
   default: [],
@@ -11,17 +31,8 @@ export const detailImageState = atom<DetailImageProps[]>({
   default: [],
 });
 
-const initialDateArray = Array(50).fill('');
-
-export const selectedDateState = atom<string[]>({
+export const selectedDateState = atom<SelectedDateProps[]>({
   key: 'selectedDateState',
-  default: initialDateArray,
-});
-
-const initialTimeArray = Array(50).fill('00:00');
-
-export const timeSlotState = atom<{ id: number }[]>({
-  key: 'timeSlot',
   default: [],
 });
 
@@ -30,17 +41,16 @@ export const timeSlotCountState = atom<number>({
   default: 1,
 });
 
-export const startTimeState = atom<string[]>({
-  key: 'startTimeState',
-  default: initialTimeArray,
-});
-
-export const endTimeState = atom<string[]>({
-  key: 'endTimeState',
-  default: initialTimeArray,
-});
-
 export const addressState = atom<string>({
   key: 'addressState',
   default: '',
 });
+
+export const scheduleState = atom<ScheduleProps>({
+  key: 'scheduleState',
+  default: {
+    toAdd: [],
+    toRemove: [],
+    idsToRemove: [],
+  },
+});

From 1b872f6ba0aa465548f4987c20056caf395da846 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=80=EC=A7=80?=
 <103625348+eunji-0623@users.noreply.github.com>
Date: Tue, 6 Aug 2024 19:40:59 +0900
Subject: [PATCH 7/8] =?UTF-8?q?Fix:=20=ED=8F=BC=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=8B=9C=20=EC=A0=9C=EC=B6=9C=20=EB=B2=84=ED=8A=BC=EC=9D=B4=20?=
 =?UTF-8?q?=EC=95=88=EB=88=8C=EB=A6=AC=EB=8D=98=20=ED=98=84=EC=83=81=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MyActivity/Register/RegisterForm.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/MyActivity/Register/RegisterForm.tsx b/components/MyActivity/Register/RegisterForm.tsx
index 2c53fd9..152b3d4 100644
--- a/components/MyActivity/Register/RegisterForm.tsx
+++ b/components/MyActivity/Register/RegisterForm.tsx
@@ -147,10 +147,7 @@ function RegisterForm({ activityData, isEdit = false }: RegisterFormProps) {
   // form 제출이 가능한지 체크 - 시간, 날짜 관련
   const isTimeFieldValid = () =>
     Array.from({ length: timeSlotCount }).every(
-      (_, i) =>
-        selectedDate[i].endTime !== '00:00' &&
-        selectedDate[i].startTime <= selectedDate[i].endTime &&
-        selectedDate[i].date !== ''
+      (_, i) => selectedDate[i].date !== ''
     );
 
   // form 제출이 가능한지 체크

From 107328080765ff6acad667c21bc535b24133d6e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=80=EC=A7=80?=
 <103625348+eunji-0623@users.noreply.github.com>
Date: Wed, 7 Aug 2024 12:22:05 +0900
Subject: [PATCH 8/8] =?UTF-8?q?Fix:=20=EC=98=88=EC=95=BD=20=EA=B0=80?=
 =?UTF-8?q?=EB=8A=A5=20=EC=8B=9C=EA=B0=84=EB=8C=80=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=ED=9B=84=20=EB=B0=94=EB=A1=9C=20=EC=A0=9C=EA=B1=B0=EA=B0=80=20?=
 =?UTF-8?q?=EC=95=88=EB=90=98=EB=8D=98=20=EC=98=A4=EB=A5=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MyActivity/Register/TimeSlot.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/components/MyActivity/Register/TimeSlot.tsx b/components/MyActivity/Register/TimeSlot.tsx
index 36f3d28..f1eabaa 100644
--- a/components/MyActivity/Register/TimeSlot.tsx
+++ b/components/MyActivity/Register/TimeSlot.tsx
@@ -179,6 +179,14 @@ function TimeSlot({ isEdit }: TimeSlotProps) {
       setEditSchedule((prevSchedule) => ({
         ...prevSchedule,
         idsToRemove: [...prevSchedule.idsToRemove, id],
+        toAdd: prevSchedule.toAdd.filter(
+          (schedule) =>
+            !(
+              schedule.date === scheduleToRemove.date &&
+              schedule.startTime === scheduleToRemove.startTime &&
+              schedule.endTime === scheduleToRemove.endTime
+            )
+        ),
       }));
     } else {
       console.log('No matching time slot found');