[ Feature ] 번쩍 개설 시 최대 인원이 최소 인원보다 작을 때 에러 메시지 출력시키기 (#1004)

* feat: 필요없는 any 지우기 * feat: 최대 인원이 최소 인원보다 작을 때 validation 검사 후 에러 메시지 출력 * chore: 맞춤법 수정, 오타 수정 * fix: 임시로 빌드 에러 수정 * fix: 빌드 에러 임시 수정 * refactor: 리뷰 반영 (공통 스키마 작성) * fix: edit 페이지 스키마 구조 수정 * fix: 수정 시 기본값이 undefined 값일 수 있으므로 .nullable() 로 변경 * chore: 후에 undefined 값으로 바뀔 수도 있음을 대비하여 optional() 추가
sopt-makers · Feb 5, 2025 · 0b36357 · 0b36357
1 parent 1121615
commit 0b36357
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 30 deletions.
diff --git a/pages/edit/flash/index.tsx b/pages/edit/flash/index.tsx
@@ -85,8 +85,10 @@ const FlashEditPage = () => {
           },
           placeDetail: formData?.flashPlace,
         },
-        minCapacity: formData?.minimumCapacity,
-        maxCapacity: formData?.maximumCapacity,
+        capacityInfo: {
+          minCapacity: formData?.minimumCapacity,
+          maxCapacity: formData?.maximumCapacity,
+        },
         files: formData?.imageURL.map(({ url }) => url),
         welcomeTags: formData?.welcomeMessageTypes.map(type => ({ label: type, value: type })),
       });

diff --git a/src/api/flash/index.ts b/src/api/flash/index.ts
@@ -25,8 +25,8 @@ const filterFlashFormData = (formData: FlashFormType) => {
       activityEndDate: convertedEndDate,
       flashPlaceType: formData.placeInfo.place.value,
       flashPlace: convertedFlashPlace,
-      minimumCapacity: formData.minCapacity,
-      maximumCapacity: formData.maxCapacity,
+      minimumCapacity: formData.capacityInfo.minCapacity,
+      maximumCapacity: formData.capacityInfo.maxCapacity,
       files: formData.files,
     },
     welcomeMessageTypes: convertedTags?.length === 0 ? null : convertedTags,

diff --git a/src/api/meeting/index.ts b/src/api/meeting/index.ts
@@ -82,8 +82,8 @@ const filterFlashFormData = (formData: FlashFormType) => {
       activityEndDate: convertedEndDate,
       flashPlaceType: formData.placeInfo.place.value,
       flashPlace: convertedFlashPlace,
-      minimumCapacity: formData.minCapacity,
-      maximumCapacity: formData.maxCapacity,
+      minimumCapacity: formData.capacityInfo.minCapacity,
+      maximumCapacity: formData.capacityInfo.maxCapacity,
       files: formData.files,
     },
     welcomeMessageTypes: convertedTags?.length === 0 ? null : convertedTags,

diff --git a/src/components/form/Flash/index.tsx b/src/components/form/Flash/index.tsx
@@ -303,7 +303,7 @@ function Presentation({
             <HelpMessage>번쩍이 진행될 수 있는 최소 인원~최대 인원을 입력해주세요 (개설자 제외)</HelpMessage>
             <SPeopleWrapper>
               <FormController
-                name="minCapacity"
+                name="capacityInfo.minCapacity"
                 render={({ field, fieldState: { error } }) => (
                   <TextInput
                     type="number"
@@ -323,7 +323,7 @@ function Presentation({
                 )}
               ></FormController>
               <FormController
-                name="maxCapacity"
+                name="capacityInfo.maxCapacity"
                 render={({ field, fieldState: { error } }) => (
                   <TextInput
                     type="number"
@@ -343,8 +343,10 @@ function Presentation({
                 )}
               ></FormController>
             </SPeopleWrapper>
-            {(errors.minCapacity || errors.maxCapacity) && (
-              <SErrorMessage>{errors.minCapacity?.message || errors.maxCapacity?.message}</SErrorMessage>
+            {(errors.capacityInfo?.minCapacity || errors.capacityInfo?.maxCapacity) && (
+              <SErrorMessage>
+                {errors.capacityInfo?.minCapacity?.message || errors.capacityInfo?.maxCapacity?.message}
+              </SErrorMessage>
             )}
           </div>
 

diff --git a/src/types/form.ts b/src/types/form.ts
@@ -3,6 +3,11 @@ import { z } from 'zod';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 dayjs.extend(customParseFormat);
 
+const capacitySchema = z.number({
+  required_error: '모집 인원을 입력해주세요.',
+  invalid_type_error: '모집 인원을 입력해주세요.',
+});
+
 export const schema = z.object({
   title: z
     .string()
@@ -32,12 +37,7 @@ export const schema = z.object({
     .refine(datetime => dayjs(datetime, 'YYYY.MM.DD').isValid(), {
       message: 'YYYY.MM.DD 형식으로 입력해주세요.',
     }),
-  capacity: z
-    .number({
-      required_error: '모집 인원을 입력해주세요.',
-      invalid_type_error: '모집 인원을 입력해주세요.',
-    })
-    .gt(0, { message: '0보다 큰 값을 입력해주세요.' }),
+  capacity: capacitySchema.gt(0, { message: '0보다 큰 값을 입력해주세요.' }),
   detail: z.object({
     desc: z
       .string()
@@ -129,7 +129,7 @@ export const flashSchema = z.object({
         label: z.string(),
         value: z.string(),
       }),
-      placeDetail: z.string().optional(),
+      placeDetail: z.string().nullable().optional(),
     })
     .refine(data => {
       if (data.place.label === '오프라인' || data.place.label === '온라인') {
@@ -139,20 +139,24 @@ export const flashSchema = z.object({
       }
       return false;
     }),
-  minCapacity: z
-    .number({
-      required_error: '모집 인원을 입력해주세요.',
-      invalid_type_error: '모집 인원을 입력해주세요.',
-    })
-    .gt(0, { message: '0보다 큰 값을 입력해주세요.' })
-    .lte(999, { message: '모집 인원을 다시 입력해주세요.' }),
-  maxCapacity: z
-    .number({
-      required_error: '모집 인원을 입력해주세요.',
-      invalid_type_error: '모집 인원을 입력해주세요.',
+  capacityInfo: z
+    .object({
+      minCapacity: capacitySchema
+        .gt(0, { message: '0보다 큰 값을 입력해주세요.' })
+        .lte(999, { message: '모집 인원을 다시 입력해주세요.' }),
+      maxCapacity: capacitySchema
+        .gt(0, { message: '0보다 큰 값을 입력해주세요.' })
+        .lte(999, { message: '모집 인원을 다시 입력해주세요.' }),
     })
-    .gt(0, { message: '0보다 큰 값을 입력해주세요.' })
-    .lte(999, { message: '모집 인원을 다시 입력해주세요.' }),
+    .superRefine(({ minCapacity, maxCapacity }, ctx) => {
+      if (minCapacity > maxCapacity) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: '최소 인원수가 최대 인원수보다 큽니다.',
+          path: ['maxCapacity'],
+        });
+      }
+    }),
   files: z.array(z.string()),
   welcomeTags: z
     .array(