From 58f082e2be4cc5cae6d69c70e9e44794f147e7e7 Mon Sep 17 00:00:00 2001 From: ice-bear98 <122257455+ice-bear98@users.noreply.github.com> Date: Wed, 25 Dec 2024 17:22:08 +0900 Subject: [PATCH] =?UTF-8?q?Fix:=20#301=20=ED=94=84=EB=A1=9C=EC=A0=9D?= =?UTF-8?q?=ED=8A=B8=20=EC=83=9D=EC=84=B1=20&=20=ED=95=A0=20=EC=9D=BC=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=82=A0=EC=A7=9C=20=EC=A2=85=EB=A3=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95=20(#307)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix: #301 프로젝트 생성 & 할 일 생성 날짜 종료일 수정 * Fix: #301 코드리뷰 반영 수정 --- src/components/common/PeriodDateInput.tsx | 12 ++++++++++-- src/components/modal/project/ModalProjectForm.tsx | 5 +++-- src/components/modal/project/UpdateModalProject.tsx | 1 + src/components/modal/task/ModalTaskForm.tsx | 1 + src/components/modal/task/UpdateModalTask.tsx | 1 + src/constants/formValidationRules.ts | 4 ++-- 6 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/components/common/PeriodDateInput.tsx b/src/components/common/PeriodDateInput.tsx index 4a60935e..98588f62 100644 --- 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 index be32f79f..275d32f9 100644 --- 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 /> diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx index 03caac3d..4a0839c9 100644 --- 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 />
diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx index 7cedd636..68ae2e46 100644 --- 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} /> diff --git a/src/constants/formValidationRules.ts b/src/constants/formValidationRules.ts index f672635e..370a400b 100644 --- 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),