add. #80 미래날짜 수정시 시작일/종료일 입력가능 처리

Read-bird · Jan 28, 2024 · 1258d9a · 1258d9a
1 parent 05245dc
commit 1258d9a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 12 deletions.
diff --git a/src/components/templates/HomeTemplate/Plan/Dots/Dots.tsx b/src/components/templates/HomeTemplate/Plan/Dots/Dots.tsx
@@ -20,9 +20,10 @@ type TProps = {
   selectDate: string;
   isProgress: boolean;
   endDate: string;
+  startDate: string;
 };
 
-export const Dots = ({ planId, userId, selectDate, isProgress, endDate }: TProps) => {
+export const Dots = ({ planId, userId, selectDate, isProgress, endDate, startDate }: TProps) => {
   const [isOpen, setOpen] = useState<number | null>(null);
   const [isEditModal, setIsEditModal] = useState(false);
   const dispatch = useDispatch();
@@ -43,8 +44,9 @@ export const Dots = ({ planId, userId, selectDate, isProgress, endDate }: TProps
   const handleClickOpenEdit = useCallback(() => {
     // 여기서 수정하기 모달 열기
     setValue('endDate', endDate);
+    setValue('startDate', startDate);
     setIsEditModal(true);
-  }, [endDate, setValue]);
+  }, [startDate, endDate, setValue]);
 
   // 플랜삭제
   const handleClickRemove = useCallback(
@@ -107,6 +109,7 @@ export const Dots = ({ planId, userId, selectDate, isProgress, endDate }: TProps
         setIsOpen={setIsEditModal}
         modalIndex={1}
         planId={planId}
+        isFuture={isPastDate(new Date(), startDate)}
       />
     </Wrap>
   );

diff --git a/src/components/templates/HomeTemplate/Plan/Plan.tsx b/src/components/templates/HomeTemplate/Plan/Plan.tsx
@@ -101,6 +101,7 @@ export const Plan = (props: TProps) => {
             selectDate={currentDate}
             isProgress={planStatus === ERecordStatus.inProgress}
             endDate={endDate}
+            startDate={startDate}
           />
         </FormProvider>
         <Stamp

diff --git a/src/components/templates/PlanModalTemplate/PlanModalTemplate.tsx b/src/components/templates/PlanModalTemplate/PlanModalTemplate.tsx
@@ -14,6 +14,7 @@ type TProps = {
   onConfirm?: any;
   planId?: number;
   isRestore?: boolean;
+  isFuture?: boolean;
 };
 
 // modalIndex
@@ -30,7 +31,8 @@ export const PlanModalTemplate = ({
   buttonType,
   onConfirm,
   planId,
-  isRestore = false
+  isRestore = false,
+  isFuture = false
 }: TProps) => {
   return (
     <Modal
@@ -41,7 +43,12 @@ export const PlanModalTemplate = ({
       }}
     >
       {modalIndex === 1 && (
-        <RegisterModal setIsOpen={setIsOpen} planId={planId} isRestore={isRestore} />
+        <RegisterModal
+          setIsOpen={setIsOpen}
+          planId={planId}
+          isRestore={isRestore}
+          isFuture={isFuture}
+        />
       )}
       {modalIndex === 4 && <CharacterModal setIsOpen={setIsOpen} />}
       {modalIndex === 9 && (

diff --git a/src/components/templates/PlanModalTemplate/RegisterModal/RegisterModal.tsx b/src/components/templates/PlanModalTemplate/RegisterModal/RegisterModal.tsx
@@ -56,9 +56,10 @@ type TProps = {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
   planId?: number;
   isRestore: boolean;
+  isFuture: boolean;
 };
 
-export const RegisterModal = ({ setIsOpen, planId, isRestore }: TProps) => {
+export const RegisterModal = ({ setIsOpen, planId, isRestore, isFuture }: TProps) => {
   const location = useLocation();
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -209,6 +210,11 @@ export const RegisterModal = ({ setIsOpen, planId, isRestore }: TProps) => {
         endDate: dayjs(props.endDate).format('YYYY-MM-DD')
       };
 
+      const editData = {
+        startDate: dayjs(props.startDate).format('YYYY-MM-DD'),
+        endDate: dayjs(props.endDate).format('YYYY-MM-DD')
+      };
+
       const res = !planId
         ? await axiosFetch<TRegisterProps, TResponseProps>({
             url: '/api/plan',
@@ -217,13 +223,11 @@ export const RegisterModal = ({ setIsOpen, planId, isRestore }: TProps) => {
               data: registerData
             }
           })
-        : await axiosFetch<Pick<TRegisterProps, 'endDate'>>({
+        : await axiosFetch<Pick<TRegisterProps, 'endDate' | 'startDate'>>({
             url: `/api/plan/${planId}`,
             method: 'put',
             options: {
-              data: {
-                endDate: dayjs(props.endDate).format('YYYY-MM-DD')
-              }
+              data: editData
             }
           });
 
@@ -460,23 +464,23 @@ export const RegisterModal = ({ setIsOpen, planId, isRestore }: TProps) => {
             id={'startDate-y'}
             options={options(...generateDate('Y', startDate))}
             handleChangeDate={handleChangeDate('Y', true)}
-            disabled={!!planId}
+            disabled={!!planId && !isFuture}
             value={dayjs(startDate).format('YYYY')}
           />
           <span>년</span>
           <SelectLabel
             id={'startDate-m'}
             options={options(...generateDate('M', startDate))}
             handleChangeDate={handleChangeDate('M', true)}
-            disabled={!!planId}
+            disabled={!!planId && !isFuture}
             value={dayjs(startDate).format('M')}
           />
           <span>월</span>
           <SelectLabel
             id={'startDate-d'}
             options={options(...generateDate('D', startDate))}
             handleChangeDate={handleChangeDate('D', true)}
-            disabled={!!planId}
+            disabled={!!planId && !isFuture}
             value={dayjs(startDate).format('D')}
           />
           <span>일 부터</span>