[Feat] 모임생성 각 필드 zod 유효성검사 작업

src/app/meetup/[groupId]/page.tsx

@@ -59,7 +59,7 @@ const MeetupDetailPage = ({ params }: Props) => {
           isHost,
           isJoined,
           isPast,
-          isAttendDisabled: participantCount >= maxParticipants,
+          isAttendDisabled: participantCount >= maxParticipants || isPast,
         }}
         groupId={groupId}
       />

src/app/post-meetup/page.tsx

@@ -2,7 +2,7 @@
 
 import { useRouter } from 'next/navigation';
 
-import { useForm, useStore } from '@tanstack/react-form';
+import { useForm } from '@tanstack/react-form';
 
 import {
   MeetupCapField,
@@ -15,7 +15,8 @@ import {
   MeetupTitleField,
 } from '@/components/pages/post-meetup';
 import { useCreateGroup } from '@/hooks/use-group/use-group-create';
-import { CreateGroupPayload, PreUploadGroupImageResponse } from '@/types/service/group';
+import { CreateGroupFormValues, createGroupSchema } from '@/lib/schema/group';
+import { PreUploadGroupImageResponse } from '@/types/service/group';
 
 const PostMeetupPage = () => {
   const { replace } = useRouter();
@@ -26,15 +27,18 @@ const PostMeetupPage = () => {
     defaultValues: {
       title: '',
       location: '',
-      locationDetail: '',
       startTime: '',
-      endTime: '',
       tags: [],
       description: '',
       maxParticipants: 0,
       images: [],
-    } as CreateGroupPayload,
+    } as CreateGroupFormValues,
+    validators: {
+      onSubmit: createGroupSchema,
+    },
     onSubmit: async ({ value }) => {
+      console.log(value);
+
       const images = [] as PreUploadGroupImageResponse['images'];
 
       if (value.images) {
@@ -51,10 +55,6 @@ const PostMeetupPage = () => {
     },
   });
 
-  const values = useStore(form.store, (state) => state.values);
-
-  console.log(values);
-
   return (
     <div>
       <form>
@@ -74,7 +74,13 @@ const PostMeetupPage = () => {
           <form.Field children={(field) => <MeetupTagsField field={field} />} name='tags' />
         </section>
 
-        <MeetupSubmitButton onSubmitClick={() => form.handleSubmit()} />
+        <MeetupSubmitButton
+          onSubmitClick={() => {
+            console.log(form.state.fieldMeta.maxParticipants?.isValid);
+
+            form.handleSubmit();
+          }}
+        />
       </form>
     </div>
   );

src/components/pages/meetup/meetup-buttons/index.tsx

@@ -49,7 +49,7 @@ export const MeetupButtons = ({
         </div>
       ) : (
         <Button
-          disabled={isAttendDisabled || isPast}
+          disabled={isAttendDisabled}
           onClick={() => open(<MeetupModal groupId={groupId} type='attend' />)}
         >
           참여하기

src/components/pages/post-meetup/fields/cap-field/index.tsx

@@ -3,13 +3,15 @@
 import { AnyFieldApi } from '@tanstack/react-form';
 
 import { Icon } from '@/components/icon';
-import { Input, Label } from '@/components/ui';
+import { Hint, Input, Label } from '@/components/ui';
 
 interface Props {
   field: AnyFieldApi;
 }
 
 export const MeetupCapField = ({ field }: Props) => {
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
   return (
     <div className='mt-3 flex w-full flex-col gap-1'>
       <Label htmlFor='post-meetup-cap' required>
@@ -26,12 +28,23 @@ export const MeetupCapField = ({ field }: Props) => {
             height={20}
           />
         }
+        max={12}
+        min={2}
         placeholder='최대 인원을 선택해주세요'
         required
-        type='text'
-        value={field.state.value}
-        onChange={(e) => field.handleChange(e.target.value)}
+        type='number'
+        value={!!field.state.value && field.state.value}
+        onBlur={(e) => {
+          const value = Number(e.target.value);
+          if (value < 2) field.handleChange(2);
+          else if (value > 12) field.handleChange(12);
+        }}
+        onChange={(e) => {
+          field.handleChange(Number(e.target.value));
+        }}
       />
+
+      {isInvalid && <Hint className='mt-0.5' message={field.state.meta.errors[0].message} />}
     </div>
   );
 };

src/components/pages/post-meetup/fields/date-field/index.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 
 import { Icon } from '@/components/icon';
 import { DatePickerModal } from '@/components/pages/post-meetup/modals/date-picker-modal';
-import { Label } from '@/components/ui';
+import { Hint, Label } from '@/components/ui';
 import { useModal } from '@/components/ui';
 import { formatDateTime } from '@/lib/formatDateTime';
 
@@ -18,6 +18,7 @@ export const MeetupDateField = ({ field }: Props) => {
 
   const hasValue = Boolean(field.state.value);
   const formattedDate = formatDateTime(field.state.value);
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
 
   const onInputClick = () => {
     open(<DatePickerModal dateField={field} />);
@@ -48,6 +49,7 @@ export const MeetupDateField = ({ field }: Props) => {
           {hasValue ? formattedDate : '날짜와 시간을 선택해주세요'}
         </p>
       </button>
+      {isInvalid && <Hint className='mt-0.5' message={field.state.meta.errors[0].message} />}
     </div>
   );
 };

src/components/pages/post-meetup/fields/detail-feild/index.tsx

@@ -2,13 +2,15 @@
 
 import { AnyFieldApi } from '@tanstack/react-form';
 
-import { Label } from '@/components/ui';
+import { Hint, Label } from '@/components/ui';
 
 interface Props {
   field: AnyFieldApi;
 }
 
 export const MeetupDetailField = ({ field }: Props) => {
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
   return (
     <div className='mt-3 flex w-full flex-col gap-1'>
       <Label htmlFor='post-meetup-Detail' required>
@@ -23,7 +25,12 @@ export const MeetupDetailField = ({ field }: Props) => {
         value={field.state.value}
         onChange={(e) => field.handleChange(e.target.value)}
       />
-      <div className='text-text-sm-medium text-right text-gray-500'>0/300</div>
+      <div className='mt-0.5 flex'>
+        {isInvalid && <Hint message={field.state.meta.errors[0].message} />}
+        <div className='text-text-sm-medium w-full text-right text-gray-500'>
+          {field.state.value.length}/300
+        </div>
+      </div>
     </div>
   );
 };

src/components/pages/post-meetup/fields/location-field/index.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 
 import { Icon } from '@/components/icon';
 import { LocationSearchModal } from '@/components/pages/post-meetup/modals/location-search-modal';
-import { Label } from '@/components/ui';
+import { Hint, Label } from '@/components/ui';
 import { useModal } from '@/components/ui';
 
 interface Props {
@@ -19,6 +19,8 @@ export const MeetupLocationField = ({ field }: Props) => {
     open(<LocationSearchModal LocationField={field} />);
   };
 
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
   return (
     <div className='mt-3 flex w-full flex-col gap-1'>
       <Label htmlFor='post-meetup-location' required onClick={onInputClick}>
@@ -44,6 +46,7 @@ export const MeetupLocationField = ({ field }: Props) => {
           {field.state.value ? field.state.value : '모임 장소를 입력해주세요'}
         </p>
       </button>
+      {isInvalid && <Hint className='mt-0.5' message={field.state.meta.errors[0].message} />}
     </div>
   );
 };

src/components/pages/post-meetup/fields/title-field/index.tsx

@@ -3,13 +3,15 @@
 import { AnyFieldApi } from '@tanstack/react-form';
 
 import { Icon } from '@/components/icon';
-import { Input, Label } from '@/components/ui';
+import { Hint, Input, Label } from '@/components/ui';
 
 interface Props {
   field: AnyFieldApi;
 }
 
 export const MeetupTitleField = ({ field }: Props) => {
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
   return (
     <div className='mt-4 flex w-full flex-col gap-1'>
       <Label htmlFor='post-meetup-title' required>
@@ -33,6 +35,8 @@ export const MeetupTitleField = ({ field }: Props) => {
         value={field.state.value}
         onChange={(e) => field.handleChange(e.target.value)}
       />
+
+      {isInvalid && <Hint className='mt-0.5' message={field.state.meta.errors[0].message} />}
     </div>
   );
 };

src/lib/schema/group.ts

@@ -0,0 +1,24 @@
+import { z } from 'zod';
+
+export const createGroupSchema = z.object({
+  title: z
+    .string()
+    .min(2, '제목은 2자 이상 입력해주세요.')
+    .max(50, '제목은 50자 이내 입력해주세요.'),
+  location: z.string().nonempty('모임 장소를 입력해주세요.'),
+  startTime: z.string().nonempty('날짜와 시간을 입력해주세요.'),
+  tags: z.array(z.string()).optional(),
+  description: z.string().nonempty('상세 정보를 입력해주세요.'),
+  maxParticipants: z.number({ error: '' }).min(2, '최대 인원을 입력해주세요.').max(12),
+  images: z
+    .array(
+      z.object({
+        sortOrder: z.number(),
+        imageUrl440x240: z.string(),
+        imageUrl100x100: z.string(),
+      }),
+    )
+    .optional(),
+});
+
+export type CreateGroupFormValues = z.infer<typeof createGroupSchema>;