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

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();
@@ -42,14 +44,29 @@ export default function PeriodDateInput({
   const endDateStr = watch(endDateFieldName);
 
   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]);
+    if (enableEndDateSync && !hasDeadline) {
+      setValue(endDateFieldName, null);
+    } else {
+      const startDate = startDateStr ? DateTime.fromISO(startDateStr).startOf('day') : null;
+      const endDate = endDateStr ? DateTime.fromISO(endDateStr).startOf('day') : null;
+      if (startDate && endDate) {
+        setHasDeadline(startDate < endDate);
+      }
+    }
+  }, [enableEndDateSync, hasDeadline, startDateStr, endDateStr]);
 
   const handleDeadlineToggle = () => {
-    setValue(endDateFieldName, getValues(startDateFieldName));
-    clearErrors(endDateFieldName);
+    if (hasDeadline === false) {
+      if (enableEndDateSync) {
+        setValue(endDateFieldName, null);
+      } else {
+        setValue(endDateFieldName, getValues(startDateFieldName));
+      }
+      clearErrors(endDateFieldName);
+    } else {
+      setValue(endDateFieldName, getValues(startDateFieldName));
+      clearErrors(endDateFieldName);
+    }
     setHasDeadline((prev) => !prev);
   };
 
@@ -82,7 +99,13 @@ 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,
+              watch(startDateFieldName),
+              enableEndDateSync,
+            ),
             onChange: (e) => {
               const startDate = DateTime.fromISO(startDateStr).startOf('day');
               const endDate = DateTime.fromISO(e.target.value).startOf('day');

src/components/modal/project/ModalProjectForm.tsx

@@ -157,6 +157,7 @@ export default function ModalProjectForm({ formId, onSubmit }: ModalProjectFormP
           endDateId="endDate"
           startDateFieldName="startDate"
           endDateFieldName="endDate"
+          enableEndDateSync
         />
 
         <SearchUserInput

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>

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">

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" />

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,9 +199,10 @@ export const PERIOD_VALIDATION_RULES = deepFreeze({
     hasDeadline: boolean,
     periodStartDate: Date | string | null,
     periodEndDate: Date | string | null,
-    referenceDate: Date | string,
+    referenceDate: Date | string | null,
+    enableEndDateSync: boolean,
   ) => ({
     required: hasDeadline && '종료일을 선택해주세요.',
-    validate: getDateValidation(periodStartDate, periodEndDate, referenceDate),
+    validate: getDateValidation(periodStartDate, periodEndDate, enableEndDateSync ? null : referenceDate),
   }),
 });