[Refactor]: 모임생성 필드 우효~성 검사 리펙토링

src/app/post-meetup/page.tsx

@@ -34,6 +34,7 @@ const PostMeetupPage = () => {
     } as CreateGroupFormValues,
     validators: {
       onChange: createGroupSchema,
+      onSubmit: createGroupSchema,
     },
     onSubmit: async ({ value }) => {
       const images = [] as PreUploadGroupImageResponse['images'];

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

@@ -3,15 +3,13 @@
 import { AnyFieldApi } from '@tanstack/react-form';
 
 import { Icon } from '@/components/icon';
-import { Hint, Input, Label } from '@/components/ui';
+import { 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>
@@ -43,8 +41,6 @@ export const MeetupCapField = ({ field }: Props) => {
           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/detail-feild/index.tsx

@@ -18,7 +18,7 @@ export const MeetupDetailField = ({ field }: Props) => {
       </Label>
       <textarea
         id='post-meetup-Detail'
-        className='bg-mono-white focus:border-mint-500 text-text-md-medium h-40 w-full resize-none rounded-2xl border border-gray-300 px-5 py-4 text-gray-800 focus:outline-none'
+        className='bg-mono-white scrollbar-thin focus:border-mint-500 text-text-md-medium h-40 w-full resize-none rounded-2xl border border-gray-300 px-5 py-4 text-gray-800 focus:outline-none'
         maxLength={300}
         placeholder='모임에 대해 설명해주세요'
         required
@@ -27,7 +27,7 @@ export const MeetupDetailField = ({ field }: Props) => {
       />
       <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'>
+        <div className='text-text-sm-medium ml-auto text-right text-gray-500'>
           {field.state.value.length}/300
         </div>
       </div>

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

@@ -6,7 +6,7 @@ import { AnyFieldApi } from '@tanstack/react-form';
 import clsx from 'clsx';
 
 import { Icon } from '@/components/icon';
-import { Input, Label } from '@/components/ui';
+import { Hint, Input, Label } from '@/components/ui';
 
 interface Props {
   field: AnyFieldApi;
@@ -21,17 +21,19 @@ export const MeetupTagsField = ({ field }: Props) => {
     if (e.nativeEvent.isComposing) return;
 
     const isUniqueTag = !field.state.value.includes(inputValue);
-    const nonEmpty = inputValue.trim();
-    const tagsCount = field.state.value.length;
+    const isValidTag = inputValue.trim() && inputValue.length <= 8;
+    const isBelowMaxLength = field.state.value.length < 10;
 
-    if (isUniqueTag && nonEmpty && tagsCount < 10) {
+    if (isUniqueTag && isValidTag && isBelowMaxLength) {
       field.pushValue(inputValue);
     }
 
     inputRef.current?.focus();
     setInputValue('');
   };
 
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
   return (
     <div className='flex w-full flex-col gap-1'>
       <Label htmlFor='post-meetup-tags'>태그</Label>
@@ -74,6 +76,7 @@ export const MeetupTagsField = ({ field }: Props) => {
       </ul>
 
       <p className='text-text-sm-medium px-2 text-gray-500'>최대 10개까지 업로드할 수 있어요.</p>
+      {isInvalid && <Hint className='mt-0.5' message={field.state.meta.errors[0].message} />}
     </div>
   );
 };

src/lib/schema/group.ts

@@ -3,13 +3,18 @@ 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),
+    .trim()
+    .nonempty('모임 제목을 입력해 주세요.')
+    .max(50, '모임 제목은 50자 이내 입력해 주세요.'),
+  location: z.string().nonempty('모임 장소를 입력해 주세요.'),
+  startTime: z.string().nonempty('모임 날짜와 시간을 입력해 주세요.'),
+  tags: z.array(z.string().nonempty().max(8, '태그는 8자 이내 입력해 주세요.')).max(10).optional(),
+  description: z
+    .string()
+    .trim()
+    .min(1, '모임 상세 정보를 입력해 주세요.')
+    .max(300, '모임 상세 정보는 300자 이내 입력해 주세요.'),
+  maxParticipants: z.number().min(2, '최대 인원을 입력해 주세요.').max(12),
   images: z
     .array(
       z.object({