feat: 모임 생성 퍼널 버튼에 form이 유효하지 않으면 disabled 적용

prgrms-web-devcourse · Jun 8, 2024 · 78d66f7 · 78d66f7
1 parent 5bb9eb6
commit 78d66f7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx b/src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx
@@ -9,7 +9,10 @@ import BottomActionButton from '@/v1/base/BottomActionButton';
 import { TitleField } from './fields';
 
 const EnterTitleStep = ({ onNextStep }: MoveFunnelStepProps) => {
-  const { handleSubmit } = useFormContext<EnterTitleStepFormValues>();
+  const {
+    handleSubmit,
+    formState: { isValid },
+  } = useFormContext<EnterTitleStepFormValues>();
 
   useRemoveVerticalScroll();
 
@@ -24,6 +27,7 @@ const EnterTitleStep = ({ onNextStep }: MoveFunnelStepProps) => {
 
       <BottomActionButton
         type="submit"
+        disabled={!isValid}
         onClick={handleSubmit(() => onNextStep?.())}
       >
         다음

diff --git a/src/v1/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx b/src/v1/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx
@@ -10,7 +10,10 @@ export type JoinTypeStepFieldName = keyof SelectJoinTypeStepFormValues;
 export type JoinTypeStepFieldProp = { name: JoinTypeStepFieldName };
 
 const SelectJoinTypeStep = ({ onSubmit }: MoveFunnelStepProps) => {
-  const { handleSubmit } = useFormContext<SelectJoinTypeStepFormValues>();
+  const {
+    handleSubmit,
+    formState: { isValid },
+  } = useFormContext<SelectJoinTypeStepFormValues>();
 
   return (
     <article>
@@ -31,6 +34,7 @@ const SelectJoinTypeStep = ({ onSubmit }: MoveFunnelStepProps) => {
 
       <BottomActionButton
         type="submit"
+        disabled={!isValid}
         onClick={onSubmit && handleSubmit(onSubmit)}
       >
         독서모임 만들기

diff --git a/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx b/src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx
@@ -30,8 +30,11 @@ const SetUpDetailStep = ({
   goToSelectBookStep,
   onNextStep,
 }: SetUpDetailStepProps) => {
-  const { handleSubmit, getValues } =
-    useFormContext<SetUpDetailStepFormValues>();
+  const {
+    handleSubmit,
+    getValues,
+    formState: { isValid },
+  } = useFormContext<SetUpDetailStepFormValues>();
 
   return (
     <article className="flex flex-col gap-[2.5rem] overflow-y-scroll pb-[7rem]">
@@ -55,6 +58,7 @@ const SetUpDetailStep = ({
 
       <BottomActionButton
         type="submit"
+        disabled={!isValid}
         onClick={handleSubmit(() => onNextStep?.())}
       >
         다음