From 1725ad848918d009afb2423cc572895647f4de48 Mon Sep 17 00:00:00 2001 From: Seok93 Date: Sat, 12 Oct 2024 12:59:21 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20#208=20PeriodDateInput=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A2=85=EB=A3=8C=EC=9D=BC=20?= =?UTF-8?q?=ED=86=A0=EA=B8=80=20=EC=9E=90=EB=8F=99=20=ED=99=9C=EC=84=B1?= =?UTF-8?q?=ED=99=94=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/PeriodDateInput.tsx | 49 +++++++++++++------ src/components/modal/task/ModalTaskForm.tsx | 10 ++-- src/components/modal/task/UpdateModalTask.tsx | 10 ++-- 3 files changed, 44 insertions(+), 25 deletions(-) diff --git a/src/components/common/PeriodDateInput.tsx b/src/components/common/PeriodDateInput.tsx index 46dfdd5b..a1fc59c5 100644 --- a/src/components/common/PeriodDateInput.tsx +++ b/src/components/common/PeriodDateInput.tsx @@ -1,33 +1,37 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useFormContext } from 'react-hook-form'; import { TASK_VALIDATION_RULES } from '@constants/formValidationRules'; import ToggleButton from '@components/common/ToggleButton'; import type { FieldError } from 'react-hook-form'; +import { DateTime } from 'luxon'; import type { Project } from '@/types/ProjectType'; +import { DAY } from '@/constants/units'; +import useToast from '@/hooks/useToast'; type PeriodDateInputProps = { - startDateLabel: string; - endDateLabel: string; startDateId: string; endDateId: string; - startDate: Project['startDate']; - endDate: Project['endDate']; + startDateLabel: string; + endDateLabel: string; startDateFieldName: string; endDateFieldName: string; + limitStartDate: Project['startDate']; + limitEndDate: Project['endDate']; }; export default function PeriodDateInput({ - startDateLabel, - endDateLabel, startDateId, endDateId, - startDate, - endDate, + startDateLabel, + endDateLabel, startDateFieldName, endDateFieldName, + limitStartDate, + limitEndDate, }: PeriodDateInputProps) { const [hasDeadline, setHasDeadline] = useState(false); + const { toastWarn } = useToast(); const { setValue, getValues, @@ -36,6 +40,14 @@ export default function PeriodDateInput({ register, formState: { errors }, } = useFormContext(); + const startDateStr = watch(startDateFieldName); + const endDateStr = watch(endDateFieldName); + + useEffect(() => { + const startDate = startDateStr ? DateTime.fromJSDate(new Date(startDateStr)).startOf('day') : null; + const endDate = endDateStr ? DateTime.fromJSDate(new Date(endDateStr)).startOf('day') : null; + if (startDate && endDate) setHasDeadline(startDate < endDate); + }, [startDateStr, endDateStr]); const handleDeadlineToggle = () => { setValue(endDateFieldName, getValues(startDateFieldName)); @@ -51,7 +63,7 @@ export default function PeriodDateInput({ id={startDateId} type="date" {...register(startDateFieldName, { - ...TASK_VALIDATION_RULES.START_DATE(startDate, endDate), + ...TASK_VALIDATION_RULES.START_DATE(limitStartDate, limitEndDate), onChange: (e) => { if (!hasDeadline) setValue(endDateFieldName, e.target.value); }, @@ -70,11 +82,18 @@ export default function PeriodDateInput({ id={endDateId} type="date" className={`${hasDeadline ? '' : '!bg-disable'}`} - disabled={!hasDeadline} - {...register( - endDateFieldName, - TASK_VALIDATION_RULES.END_DATE(hasDeadline, startDate, endDate, watch(startDateFieldName)), - )} + {...register(endDateFieldName, { + ...TASK_VALIDATION_RULES.END_DATE(hasDeadline, limitStartDate, limitEndDate, watch(startDateFieldName)), + onChange: (e) => { + const startDate = DateTime.fromJSDate(new Date(startDateStr)).startOf('day'); + const endDate = DateTime.fromJSDate(new Date(e.target.value)).startOf('day'); + if (startDate > endDate) { + toastWarn('종료일은 시작일과 같거나 이후로 설정해주세요.'); + setValue(endDateFieldName, startDateStr); + setHasDeadline(false); + } + }, + })} />
{(errors[endDateFieldName] as FieldError | undefined)?.message} diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx index dfdb8404..800219c9 100644 --- a/src/components/modal/task/ModalTaskForm.tsx +++ b/src/components/modal/task/ModalTaskForm.tsx @@ -37,7 +37,7 @@ type ModalTaskFormProps = { // ToDo: React Query Error시 처리 추가할 것 export default function ModalTaskForm({ formId, project, taskId, onSubmit }: ModalTaskFormProps) { - const { projectId, startDate, endDate } = project; + const { projectId, startDate: projctStartDate, endDate: projectEndDate } = project; const [keyword, setKeyword] = useState(''); const [assignees, setAssignees] = useState([]); @@ -153,14 +153,14 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod />
diff --git a/src/components/modal/task/UpdateModalTask.tsx b/src/components/modal/task/UpdateModalTask.tsx index 628ac7ac..3eeaf1fa 100644 --- a/src/components/modal/task/UpdateModalTask.tsx +++ b/src/components/modal/task/UpdateModalTask.tsx @@ -43,7 +43,7 @@ type UpdateModalTaskProps = { export default function UpdateModalTask({ project, taskId, onClose: handleClose }: UpdateModalTaskProps) { const updateTaskFormId = 'updateTaskForm'; - const { projectId, startDate, endDate } = project; + const { projectId, startDate: projectStartDate, endDate: projectEndDate } = project; const [keyword, setKeyword] = useState(''); const { toastInfo, toastWarn } = useToast(); @@ -155,14 +155,14 @@ export default function UpdateModalTask({ project, taskId, onClose: handleClose />