Feat/96/form

src/app/(crew)/crew/_components/create-crew-form/index.tsx

@@ -31,7 +31,7 @@ export default function CreateCrewForm({
     control,
     handleSubmit,
     setValue,
-    getValues,
+    trigger,
     clearErrors,
     formState: { errors, isValid },
   } = useForm<CreateCrewRequestTypes>({
@@ -83,12 +83,22 @@ export default function CreateCrewForm({
             control={control}
             rules={{
               required: '필수 입력사항입니다.',
+              validate: (value) => {
+                if (value && value.trim().length > 0) {
+                  return true; // 입력이 있을 경우 에러 해제
+                }
+                return '필수 입력사항입니다.'; // 입력이 비어있을 경우 에러 메시지 표시
+              },
             }}
             render={({ field }) => (
               <TextInput
                 {...field}
                 id="crew-title"
                 variant="filled"
+                onChange={(e) => {
+                  field.onChange(e);
+                  if (errors.title) trigger('title'); // 입력 중일 때 유효성 검사 트리거
+                }}
                 error={errors.title?.message}
                 placeholder="크루명을 20자 이내로 입력해주세요."
                 maxLength={20}
@@ -125,6 +135,7 @@ export default function CreateCrewForm({
                     field.onChange(value);
                     handleMainCategoryChange(value);
                   }}
+                  error={errors.mainCategory?.message}
                 />
               )}
             />
@@ -139,11 +150,11 @@ export default function CreateCrewForm({
                   placeholder="세부 카테고리"
                   data={categoryData[categoryIndex]?.items || []}
                   className="flex-1"
+                  error={errors.subCategory?.message}
                 />
               )}
             />
           </div>
-          {errors.mainCategory && <p className="text-red-500">{errors.mainCategory.message}</p>}
         </div>
 
         <div className="flex flex-col gap-3">
@@ -189,12 +200,14 @@ export default function CreateCrewForm({
                     field.onChange(value);
                     handleMainLocationChange(value);
                   }}
+                  error={errors.mainLocation?.message}
                 />
               )}
             />
             <Controller
               name="subLocation"
               control={control}
+              rules={{ required: '시/군/구를 선택해주세요.' }}
               render={({ field }) => (
                 <DropDown
                   {...field}
@@ -203,6 +216,7 @@ export default function CreateCrewForm({
                   placeholder="시/군/구"
                   data={regionData[regionIndex]?.areas || []}
                   className="flex-1"
+                  error={errors.subLocation?.message}
                 />
               )}
             />

src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx

@@ -9,7 +9,7 @@ const initialValue: CreateGatheringRequestType = {
   introduce: '',
   dateTime: '',
   location: '',
-  totalCount: 0,
+  totalCount: 2,
   imageUrl: null,
 };
 
@@ -41,7 +41,7 @@ const Template: StoryFn<CreateGatheringRequestType> = function CreateCrewPageSto
         opened={createModalOpened}
         onClose={closeCreateModal}
         centered
-        title="약속 잡기"
+        title="약속 만들기"
         styles={{
           root: { '--modal-size': '520px' },
           content: { boxShadow: '0 25px 50px -12px rgba(0,0,0,0.1)', borderRadius: '12px' },