feat: 게시판 생성 페이지 form 에러 처리 개선 (#87)

CAUCSE · Mar 4, 2024 · 50ea67e · 50ea67e
1 parent 763d221
commit 50ea67e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/src/pages/auth/findPassword/FindPasswordPage.tsx b/src/pages/auth/findPassword/FindPasswordPage.tsx
@@ -32,14 +32,6 @@ const FindPasswordPage: React.FC = observer(() => {
     formState: { errors },
   } = useForm<User.FindPasswordReqestDto>();
 
-  if (
-    (errors.name && errors.name.type === 'required') ||
-    (errors.studentId && errors.studentId.type === 'required') ||
-    (errors.email && errors.email.type === 'required')
-  ) {
-    alert({ message: '모든 항목을 다 입력해주세요.' });
-  }
-
   const onSubmit = async (body: User.FindPasswordReqestDto) => {
     const { success } = (await findPassword(body)) as unknown as StoreAPI;
     if (success) {
@@ -70,6 +62,7 @@ const FindPasswordPage: React.FC = observer(() => {
             }}
           />
           {errors.email ? <ErrorMessage>{errors.email?.message}</ErrorMessage> : null}
+
           <Input
             name="name"
             label="이름"
@@ -79,6 +72,7 @@ const FindPasswordPage: React.FC = observer(() => {
             rules={{ required: '이름을 입력해주세요.' }}
           />
           {errors.name ? <ErrorMessage>{errors.name?.message}</ErrorMessage> : null}
+
           <Input
             name="studentId"
             label="학번"

diff --git a/src/pages/board/boardCreate/BoardCreatePage.tsx b/src/pages/board/boardCreate/BoardCreatePage.tsx
@@ -14,6 +14,7 @@ import {
   PageStoreHOC,
   NavButton,
   SelectInput,
+  ErrorMessage,
 } from '@/components';
 import { PAGE_URL } from '@/configs/path';
 import { usePageUiStore } from '@/hooks';
@@ -40,13 +41,6 @@ const BoardCreatePage: React.FC = observer(() => {
     },
   });
 
-  if (
-    (errors.name && errors.name.type === 'required') ||
-    (errors.description && errors.description.type === 'required')
-  ) {
-    alert({ message: '모든 항목을 다 입력해주세요.' });
-  }
-
   const onSubmit = async (data: {
     name: string;
     description: string;
@@ -117,8 +111,26 @@ const BoardCreatePage: React.FC = observer(() => {
       <Header title="게시판 생성" withBack={PAGE_URL.Board} />
       <PageBody>
         <BodyScreen>
-          <Input name="name" label="게시판 이름" required control={control} />
-          <Input name="description" label="게시판 설명" required control={control} />
+          <Input
+            name="name"
+            label="게시판 이름"
+            placeholder="게시판 이름을 입력하세요."
+            required
+            control={control}
+            rules={{ required: '게시판 설명을 입력해주세요.' }}
+          />
+          {errors.name ? <ErrorMessage>{errors.name?.message}</ErrorMessage> : null}
+
+          <Input
+            name="description"
+            label="게시판 설명"
+            placeholder="게시판 설명을 입력하세요."
+            required
+            control={control}
+            rules={{ required: '게시판 설명을 입력해주세요.' }}
+          />
+          {errors.description ? <ErrorMessage>{errors.description?.message}</ErrorMessage> : null}
+
           <SelectInput
             name="category"
             label="게시판 카테고리"