Merge pull request #246 from ttaerrim/form-button-disable

[Modify] 폼 유효성 검사 통과하지 않았을 경우 버튼을 비활성화 처리
boostcampwm2023 · Nov 30, 2023 · 34f6d53 · 34f6d53
2 parents 5b2b188 + 8f96088
commit 34f6d53
Showing 1 changed file with 19 additions and 13 deletions.
diff --git a/app/frontend/src/pages/MogacoPost/index.tsx b/app/frontend/src/pages/MogacoPost/index.tsx
@@ -31,18 +31,24 @@ export function MogacoPostPage() {
     ...queryKeys.mogaco.detail(postId || ''),
     enabled: !!postId,
   });
-  const { control, handleSubmit, reset, setValue } =
-    useForm<RequestCreateMogacoDto>({
-      defaultValues: {
-        title: '',
-        address: '',
-        contents: '',
-        date: '',
-        groupId: '',
-        maxHumanCount: 0,
-        status: '모집 중',
-      },
-    });
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setValue,
+    formState: { isValid },
+  } = useForm<RequestCreateMogacoDto>({
+    defaultValues: {
+      title: '',
+      address: '',
+      contents: '',
+      date: '',
+      groupId: '',
+      maxHumanCount: 0,
+      status: '모집 중',
+    },
+    mode: 'all',
+  });
 
   useEffect(() => {
     if (mogacoData) {
@@ -106,13 +112,13 @@ export function MogacoPostPage() {
         <PostContents control={control} />
       </div>
       <div className={styles.formContent}>
-        {/* TODO: 등록 불가 시 비활성화 처리 */}
         <Button
           type="submit"
           theme="primary"
           shape="fill"
           size="large"
           fullWidth
+          disabled={!isValid}
         >
           {postId ? '수정하기' : '등록하기'}
         </Button>