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