diff --git a/src/api/book-club/react-query/customHooks.ts b/src/api/book-club/react-query/customHooks.ts index b3d66f67..defec8ef 100644 --- a/src/api/book-club/react-query/customHooks.ts +++ b/src/api/book-club/react-query/customHooks.ts @@ -22,11 +22,6 @@ export function useBookClubCreateMutation() { queryClient.invalidateQueries({ queryKey: bookClubs.my().queryKey, }); - - showToast({ - message: '북클럽이 성공적으로 생성되었습니다.', - type: 'success', - }); }, onError: () => { showToast({ message: '북클럽 생성에 실패했습니다.', type: 'error' }); diff --git a/src/features/club-create/container/DatePickerField.tsx b/src/features/club-create/container/DatePickerField.tsx index b8b48298..0676607c 100644 --- a/src/features/club-create/container/DatePickerField.tsx +++ b/src/features/club-create/container/DatePickerField.tsx @@ -18,6 +18,7 @@ interface DatePickerContainerProps { label: string; error?: string; placeholder: string; + targetDate?: Date; } function DatePickerContainer({ @@ -26,8 +27,16 @@ function DatePickerContainer({ label, error, placeholder, + targetDate, }: DatePickerContainerProps) { const minDate = useMemo(() => new Date(), []); + const maxDate = useMemo( + () => + name === 'endDate' && targetDate + ? new Date(targetDate.getTime() - 24 * 60 * 60 * 1000) + : undefined, + [name, targetDate], + ); return ( @@ -39,6 +48,7 @@ function DatePickerContainer({ selected={field.value} onChange={field.onChange} minDate={minDate} + maxDate={maxDate} showTimeSelect timeIntervals={10} dateFormat="yyyy-MM-dd a HH:mm" diff --git a/src/features/club-create/container/FormContainer.tsx b/src/features/club-create/container/FormContainer.tsx index 4ce43927..681159a1 100644 --- a/src/features/club-create/container/FormContainer.tsx +++ b/src/features/club-create/container/FormContainer.tsx @@ -17,7 +17,6 @@ function FormContainer() { control, setValue, errors, - isValid, watch, onSubmit, isLoading, @@ -118,6 +117,7 @@ function FormContainer() { label="언제 모임을 마감할까요?" error={errors.endDate?.message} placeholder="모임의 모집 마감 날짜를 선택해 주세요!" + targetDate={watch('targetDate')} /> diff --git a/src/features/club-create/hooks/useBookClubForm.ts b/src/features/club-create/hooks/useBookClubForm.ts index 8494f5f0..3615a97a 100644 --- a/src/features/club-create/hooks/useBookClubForm.ts +++ b/src/features/club-create/hooks/useBookClubForm.ts @@ -14,6 +14,8 @@ export const useBookClubForm = () => { } = usePopup(); const form = useForm({ resolver: zodResolver(bookClubSchema), + mode: 'onChange', + reValidateMode: 'onChange', }); const onSubmit = form.handleSubmit(async (data: BookClubForm) => { diff --git a/src/features/club-create/types/bookClubSchema.ts b/src/features/club-create/types/bookClubSchema.ts index 008d5aa3..937a3db1 100644 --- a/src/features/club-create/types/bookClubSchema.ts +++ b/src/features/club-create/types/bookClubSchema.ts @@ -74,6 +74,16 @@ export const bookClubSchema = z }); } } + + if (data.endDate && data.targetDate) { + if (data.endDate >= data.targetDate) { + ctx.addIssue({ + code: z.ZodIssueCode.custom, + message: '모집 마감일은 모임 날짜보다 이전이어야 합니다', + path: ['endDate'], + }); + } + } }); export type BookClubForm = z.infer;