Fix: #301 프로젝트 생성 & 할 일 생성 날짜 종료일 수정 (#307)

* Fix: #301 프로젝트 생성 & 할 일 생성 날짜 종료일 수정 * Fix: #301 코드리뷰 반영 수정
GU-99 · Dec 25, 2024 · 58f082e · 58f082e
1 parent ffa89ba
commit 58f082e
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 6 deletions.
diff --git a/src/components/common/PeriodDateInput.tsx b/src/components/common/PeriodDateInput.tsx
@@ -14,6 +14,7 @@ type PeriodDateInputProps = {
   endDateLabel: string;
   startDateFieldName: string;
   endDateFieldName: string;
+  enableEndDateSync: boolean;
   limitStartDate?: string | Date | null;
   limitEndDate?: string | Date | null;
 };
@@ -27,6 +28,7 @@ export default function PeriodDateInput({
   endDateFieldName,
   limitStartDate = null,
   limitEndDate = null,
+  enableEndDateSync = true,
 }: PeriodDateInputProps) {
   const [hasDeadline, setHasDeadline] = useState(false);
   const { toastWarn } = useToast();
@@ -44,11 +46,12 @@ export default function PeriodDateInput({
   useEffect(() => {
     const startDate = startDateStr ? DateTime.fromISO(startDateStr).startOf('day') : null;
     const endDate = endDateStr ? DateTime.fromISO(endDateStr).startOf('day') : null;
+
     if (startDate && endDate) setHasDeadline(startDate < endDate);
   }, [startDateStr, endDateStr]);
 
   const handleDeadlineToggle = () => {
-    setValue(endDateFieldName, getValues(startDateFieldName));
+    setValue(endDateFieldName, enableEndDateSync ? null : getValues(startDateFieldName));
     clearErrors(endDateFieldName);
     setHasDeadline((prev) => !prev);
   };
@@ -82,7 +85,12 @@ export default function PeriodDateInput({
           className={`${hasDeadline ? '' : '!bg-disable outline-none'}`}
           readOnly={!hasDeadline}
           {...register(endDateFieldName, {
-            ...PERIOD_VALIDATION_RULES.END_DATE(hasDeadline, limitStartDate, limitEndDate, watch(startDateFieldName)),
+            ...PERIOD_VALIDATION_RULES.END_DATE(
+              hasDeadline,
+              limitStartDate,
+              limitEndDate,
+              hasDeadline ? startDateStr : null,
+            ),
             onChange: (e) => {
               const startDate = DateTime.fromISO(startDateStr).startOf('day');
               const endDate = DateTime.fromISO(e.target.value).startOf('day');

diff --git a/src/components/modal/project/ModalProjectForm.tsx b/src/components/modal/project/ModalProjectForm.tsx
@@ -1,10 +1,10 @@
 import { FormProvider, useForm } from 'react-hook-form';
 import { DateTime } from 'luxon';
 import { useMemo, useState } from 'react';
-import RoleTooltip from '@components/common/RoleTooltip';
 import { PROJECT_DEFAULT_ROLE, PROJECT_ROLE_INFO, PROJECT_ROLES } from '@constants/role';
 import { PROJECT_VALIDATION_RULES } from '@constants/formValidationRules';
 import Spinner from '@components/common/Spinner';
+import RoleTooltip from '@components/common/RoleTooltip';
 import PeriodDateInput from '@components/common/PeriodDateInput';
 import SearchUserInput from '@components/common/SearchUserInput';
 import UserRoleSelectBox from '@components/common/UserRoleSelectBox';
@@ -55,7 +55,7 @@ export default function ModalProjectForm({ formId, onSubmit }: ModalProjectFormP
       projectName: '',
       content: '',
       startDate: DateTime.fromJSDate(new Date()).toFormat('yyyy-LL-dd'),
-      endDate: DateTime.fromJSDate(new Date()).toFormat('yyyy-LL-dd'),
+      endDate: null,
       coworkers: [],
     },
   });
@@ -157,6 +157,7 @@ export default function ModalProjectForm({ formId, onSubmit }: ModalProjectFormP
           endDateId="endDate"
           startDateFieldName="startDate"
           endDateFieldName="endDate"
+          enableEndDateSync
         />
 
         <SearchUserInput

diff --git a/src/components/modal/project/UpdateModalProject.tsx b/src/components/modal/project/UpdateModalProject.tsx
@@ -146,6 +146,7 @@ export default function UpdateModalProject({ projectId, onClose: handleClose }:
               endDateId="endDate"
               startDateFieldName="startDate"
               endDateFieldName="endDate"
+              enableEndDateSync
             />
           </form>
         </FormProvider>

diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx
@@ -162,6 +162,7 @@ export default function ModalTaskForm({ formId, project, onSubmit }: ModalTaskFo
           endDateFieldName="endDate"
           limitStartDate={projectStartDate}
           limitEndDate={projectEndDate}
+          enableEndDateSync
         />
 
         <div className="mb-20">

diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx
@@ -176,6 +176,7 @@ export default function UpdateModalTask({
                   endDateFieldName="endDate"
                   limitStartDate={projectStartDate}
                   limitEndDate={projectEndDate}
+                  enableEndDateSync={false}
                 />
 
                 <MarkdownEditor id="content" label="내용" contentFieldName="content" />

diff --git a/src/constants/formValidationRules.ts b/src/constants/formValidationRules.ts
@@ -8,7 +8,7 @@ type ValidateOption = { [key: string]: (value: string) => string | boolean };
 function getDateValidation(
   periodStartDate: Date | string | null,
   periodEndDate: Date | string | null,
-  referenceDate?: Date | string,
+  referenceDate?: Date | string | null,
 ) {
   const validation: ValidateOption = {};
   // 기준일이 설정되어 있다면, 기준일 이후로 설정되는가 검증
@@ -199,7 +199,7 @@ export const PERIOD_VALIDATION_RULES = deepFreeze({
     hasDeadline: boolean,
     periodStartDate: Date | string | null,
     periodEndDate: Date | string | null,
-    referenceDate: Date | string,
+    referenceDate: Date | string | null,
   ) => ({
     required: hasDeadline && '종료일을 선택해주세요.',
     validate: getDateValidation(periodStartDate, periodEndDate, referenceDate),