✨ [Feat] 모임 만들기 모집 마감 날짜 -> 만나는 날 이전으로만 선택 가능하도록 구현

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' });

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 (
     <CreateClubFormField label={label} error={error}>
@@ -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"

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')}
         />
 
         <CreateClubFormField
@@ -139,8 +139,8 @@ function FormContainer() {
           size="medium"
           fillType="solid"
           themeColor="green-normal-01"
-          disabled={!isValid || isLoading}
-          className={`h-14 ${!isValid || isLoading ? '' : 'hover-dim'}`}
+          disabled={isLoading}
+          className={`h-14 ${isLoading ? '' : 'hover-dim'}`}
         />
       </form>
 

src/features/club-create/hooks/useBookClubForm.ts

@@ -14,6 +14,8 @@ export const useBookClubForm = () => {
   } = usePopup();
   const form = useForm<BookClubForm>({
     resolver: zodResolver(bookClubSchema),
+    mode: 'onChange',
+    reValidateMode: 'onChange',
   });
 
   const onSubmit = form.handleSubmit(async (data: BookClubForm) => {

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<typeof bookClubSchema>;