From 4a6f8c11ec722bf00f59d7b2f71f98bf2321cd24 Mon Sep 17 00:00:00 2001
From: imhwarang <imhwarang4@naver.com>
Date: Tue, 6 Aug 2024 00:06:17 +0900
Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20react-hook-form=20=EB=8F=84?=
 =?UTF-8?q?=EC=9E=85=20=EB=B0=8F=20hostApplyPage=EA=B4=80=EB=A0=A8=20step?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/apis/domains/host/usePostHostApply.ts     |  10 +-
 .../CategorySelectBox/CategorySelectBox.tsx   |   2 +-
 src/components/common/TextArea/TextArea.tsx   |  85 +++----
 src/components/common/inputs/Input/Input.tsx  |   6 +-
 .../host/components/StepOne/StepOne.style.ts  |   1 +
 src/pages/host/components/StepOne/StepOne.tsx | 140 +++++++----
 src/pages/host/components/StepTwo/StepTwo.tsx | 231 +++++++++++-------
 yarn.lock                                     |   5 +
 9 files changed, 293 insertions(+), 188 deletions(-)

diff --git a/package.json b/package.json
index 4ac8c82d..1a130929 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "react": "^18.3.1",
     "react-datepicker": "^7.2.0",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.52.1",
     "react-router-dom": "^6.24.0",
     "react-spinners": "^0.14.1",
     "swiper": "^11.1.4"
diff --git a/src/apis/domains/host/usePostHostApply.ts b/src/apis/domains/host/usePostHostApply.ts
index 42428e53..a98e5c44 100644
--- a/src/apis/domains/host/usePostHostApply.ts
+++ b/src/apis/domains/host/usePostHostApply.ts
@@ -4,7 +4,7 @@ import { useEasyNavigate } from '@hooks';
 import { components } from '@schema';
 import { useQueryClient, useMutation } from '@tanstack/react-query';
 import { ErrorResponse, ErrorType, MutateResponseType } from '@types';
-import { Dispatch, RefObject, SetStateAction } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 
 type HostApplyRequest = components['schemas']['SubmitterCreateRequest'];
 
@@ -21,10 +21,10 @@ const postHostApply = async (hostApplyState: HostApplyRequest): Promise<MutateRe
 };
 
 export const usePostHostApply = (
-  resetHostApplyState: () => void,
+  // resetHostApplyState: () => void,
   onNext: () => void,
   setIsNicknameDuplicate: Dispatch<SetStateAction<boolean>>,
-  nicknameRef: RefObject<HTMLInputElement>
+  // nicknameRef: RefObject<HTMLInputElement>
 ) => {
   const queryClient = useQueryClient();
   const { goGuestMyPage } = useEasyNavigate();
@@ -33,13 +33,13 @@ export const usePostHostApply = (
     mutationFn: (hostApplyState: HostApplyRequest) => postHostApply(hostApplyState),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEY.HOST_APPLY] });
-      resetHostApplyState();
+      // resetHostApplyState();
       onNext();
     },
     onError: (error: ErrorType) => {
       if (error.status === 40008) {
         setIsNicknameDuplicate(true);
-        nicknameRef.current?.focus();
+        // nicknameRef.current?.focus();
       } else {
         alert(error.message);
         goGuestMyPage();
diff --git a/src/components/common/CategorySelectBox/CategorySelectBox.tsx b/src/components/common/CategorySelectBox/CategorySelectBox.tsx
index 9ab2f80d..81a604a2 100644
--- a/src/components/common/CategorySelectBox/CategorySelectBox.tsx
+++ b/src/components/common/CategorySelectBox/CategorySelectBox.tsx
@@ -71,7 +71,7 @@ interface Category {
 }
 
 interface CategorySelectBoxProps {
-  selectedCategories: Category;
+  selectedCategories: Category | undefined;
   onUpdateCategories: (newCategories: Category) => void;
 }
 
diff --git a/src/components/common/TextArea/TextArea.tsx b/src/components/common/TextArea/TextArea.tsx
index f3614b62..01f01b67 100644
--- a/src/components/common/TextArea/TextArea.tsx
+++ b/src/components/common/TextArea/TextArea.tsx
@@ -1,4 +1,4 @@
-import { TextareaHTMLAttributes, useState } from 'react';
+import { forwardRef, TextareaHTMLAttributes, useState } from 'react';
 
 import {
   textAreaStyle,
@@ -17,54 +17,49 @@ export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   maxLength: number;
   size?: 'small' | 'medium';
 }
-const TextArea = ({
-  value,
-  onChange,
-  isValid,
-  size = 'small',
-  placeholder,
-  errorMessage,
-  maxLength,
-}: TextAreaProps) => {
-  const [maxLengthError, setMaxLengthError] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  // 글자 수 세서 바로 화면에 반영하는 onChange 함수 (default)
-  const handleTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if (e.target.value.length <= maxLength) {
-      onChange(e);
-      setMaxLengthError(false);
-    } else {
-      setMaxLengthError(true);
-    }
-  };
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  ({ value, onChange, isValid, size = 'small', placeholder, errorMessage, maxLength }, ref) => {
+    const [maxLengthError, setMaxLengthError] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    // 글자 수 세서 바로 화면에 반영하는 onChange 함수 (default)
+    const handleTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if (e.target.value.length <= maxLength) {
+        onChange(e);
+        setMaxLengthError(false);
+      } else {
+        setMaxLengthError(true);
+      }
+    };
 
-  // TODO: constants 파일에 분리하기
-  // 글자 수 에러 메시지
-  const textLengthErrorMessage = `* 글자 수 ${maxLength}자 이하로 입력해주세요.`;
+    // TODO: constants 파일에 분리하기
+    // 글자 수 에러 메시지
+    const textLengthErrorMessage = `* 글자 수 ${maxLength}자 이하로 입력해주세요.`;
 
-  const isError = maxLengthError || !isValid;
+    const isError = maxLengthError || !isValid;
 
-  return (
-    <div css={textAreaContainerStyle}>
-      <div css={[textAreaWrapperStyle(isError, isFocused), textAreaWrapperSize[size]]}>
-        <textarea
-          css={textAreaStyle}
-          value={value}
-          onChange={handleTextAreaChange}
-          placeholder={placeholder}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-        />
-        <span css={textLengthStyle(isError, isFocused)}>
-          {value.length}/{maxLength}
-        </span>
-      </div>
+    return (
+      <div css={textAreaContainerStyle}>
+        <div css={[textAreaWrapperStyle(isError, isFocused), textAreaWrapperSize[size]]}>
+          <textarea
+            ref={ref}
+            css={textAreaStyle}
+            value={value}
+            onChange={handleTextAreaChange}
+            placeholder={placeholder}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+          />
+          <span css={textLengthStyle(isError, isFocused)}>
+            {value.length}/{maxLength}
+          </span>
+        </div>
 
-      {maxLengthError && <span css={errorMessageStyle}>{textLengthErrorMessage}</span>}
+        {maxLengthError && <span css={errorMessageStyle}>{textLengthErrorMessage}</span>}
 
-      {isFocused && !isValid && <span css={errorMessageStyle}>{errorMessage}</span>}
-    </div>
-  );
-};
+        {!isValid && <span css={errorMessageStyle}>{errorMessage}</span>}
+      </div>
+    );
+  }
+);
 
 export default TextArea;
diff --git a/src/components/common/inputs/Input/Input.tsx b/src/components/common/inputs/Input/Input.tsx
index c11f8063..be1ddb6e 100644
--- a/src/components/common/inputs/Input/Input.tsx
+++ b/src/components/common/inputs/Input/Input.tsx
@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, forwardRef, useState } from 'react';
+import { forwardRef, InputHTMLAttributes, useState } from 'react';
 import {
   inputContainerStyle,
   inputLabelStyle,
@@ -83,9 +83,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             ''
           )}
         </div>
-        {isFocused && displayErrorMessage && (
-          <span css={errorMessageStyle}>{displayErrorMessage}</span>
-        )}
+        {!isValid && <span css={errorMessageStyle}>{displayErrorMessage}</span>}
       </div>
     );
   }
diff --git a/src/pages/host/components/StepOne/StepOne.style.ts b/src/pages/host/components/StepOne/StepOne.style.ts
index ea28689a..91accdf0 100644
--- a/src/pages/host/components/StepOne/StepOne.style.ts
+++ b/src/pages/host/components/StepOne/StepOne.style.ts
@@ -37,4 +37,5 @@ export const sectionStyle = css`
 
 export const footerStyle = css`
   width: 100%;
+  margin-top: 2rem;
 `;
diff --git a/src/pages/host/components/StepOne/StepOne.tsx b/src/pages/host/components/StepOne/StepOne.tsx
index 6edd816f..fd00d768 100644
--- a/src/pages/host/components/StepOne/StepOne.tsx
+++ b/src/pages/host/components/StepOne/StepOne.tsx
@@ -10,18 +10,28 @@ import {
   titleStyle,
 } from './StepOne.style';
 import { smoothScroll } from '@utils';
-import { useHostApplyInputChange, useHostApplyInputValidation } from '@pages/host/hooks';
+import { useAtom } from 'jotai';
+import { hostApplyAtom } from '@stores';
+import { Controller, useForm } from 'react-hook-form';
+import { components } from '@schema';
 
 const StepOne = ({ onNext }: StepProps) => {
-  const { hostApplyState, handleInputChange } = useHostApplyInputChange();
-  const { validateStepOne } = useHostApplyInputValidation();
-  const { isIntroValid, isGoalValid, isLinkValid, isAllValid } = validateStepOne(hostApplyState);
+  const [hostApplyState, setHostApplyState] = useAtom(hostApplyAtom);
 
-  const handleNextClick = () => {
-    if (isAllValid) {
-      onNext();
-      smoothScroll(0);
-    }
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    defaultValues: hostApplyState,
+    mode: 'onBlur',
+  });
+
+  const onSubmit = (data: components['schemas']['SubmitterCreateRequest']) => {
+    setHostApplyState((prev) => ({ ...prev, ...data }));
+    console.log(data);
+    onNext();
+    smoothScroll(0);
   };
 
   return (
@@ -33,49 +43,77 @@ const StepOne = ({ onNext }: StepProps) => {
           <h1 css={subTitleStyle}>호스트님에 대해 알려주세요!</h1>
         </header>
         <main css={mainStyle}>
-          <section css={sectionStyle}>
-            <QuestionText numberLabel="Q1">호스트님은 어떤 분이신가요?</QuestionText>
-            <TextArea
-              size="medium"
-              maxLength={300}
-              placeholder={`호스트님에 대해 자유롭게 소개해 주세요! \n모임 참여 및 개최 경험 등도 좋아요.`}
-              value={hostApplyState.intro}
-              onChange={(e) => handleInputChange(e, 'intro')}
-              isValid={isIntroValid}
-              errorMessage="빈칸을 입력해주세요."
-            />
-          </section>
-          <section css={sectionStyle}>
-            <QuestionText numberLabel="Q2">호스트로 이루고 싶은 목표를 알려주세요!</QuestionText>
-            <TextArea
-              size="medium"
-              maxLength={300}
-              placeholder={`모임에서 어떤 가치를 공유하고 싶으신가요? \n그 이유는 무엇인가요?`}
-              value={hostApplyState.goal}
-              onChange={(e) => handleInputChange(e, 'goal')}
-              isValid={isGoalValid}
-              errorMessage="빈칸을 입력해주세요."
-            />
-          </section>
-          <section css={sectionStyle}>
-            <QuestionText numberLabel="Q3">
-              호스트님을 잘 알 수 있는 SNS 혹은 홈페이지 링크를 첨부해 주세요!
-            </QuestionText>
-            <Input
-              value={hostApplyState.link}
-              onChange={(e) => handleInputChange(e, 'link')}
-              placeholder="URL을 첨부해주세요."
-              isValid={isLinkValid}
-              errorMessage="올바른 URL 형식을 입력해주세요"
-              isCountValue={false}
-            />
-          </section>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <section css={sectionStyle}>
+              <QuestionText numberLabel="Q1">호스트님은 어떤 분이신가요?</QuestionText>
+              <Controller
+                name="intro"
+                control={control}
+                rules={{ required: '빈칸을 입력해주세요.' }}
+                render={({ field }) => (
+                  <TextArea
+                    {...field}
+                    size="medium"
+                    maxLength={300}
+                    placeholder={`호스트님에 대해 자유롭게 소개해 주세요! \n모임 참여 및 개최 경험 등도 좋아요.`}
+                    aria-invalid={!!errors.intro}
+                    isValid={!errors.intro}
+                    errorMessage={errors.intro?.message}
+                  />
+                )}
+              />
+            </section>
+            <section css={sectionStyle}>
+              <QuestionText numberLabel="Q2">호스트로 이루고 싶은 목표를 알려주세요!</QuestionText>
+              <Controller
+                name="goal"
+                control={control}
+                rules={{ required: '빈칸을 입력해주세요.' }}
+                render={({ field }) => (
+                  <TextArea
+                    {...field}
+                    size="medium"
+                    maxLength={300}
+                    placeholder={`모임에서 어떤 가치를 공유하고 싶으신가요? \n그 이유는 무엇인가요?`}
+                    aria-invalid={!!errors.goal}
+                    isValid={!errors.goal}
+                    errorMessage={errors.goal?.message}
+                  />
+                )}
+              />
+            </section>
+            <section css={sectionStyle}>
+              <QuestionText numberLabel="Q3">
+                호스트님을 잘 알 수 있는 SNS 혹은 홈페이지 링크를 첨부해 주세요!
+              </QuestionText>
+              <Controller
+                name="link"
+                control={control}
+                rules={{
+                  required: '올바른 URL 형식을 입력해주세요.',
+                  pattern: {
+                    value: /^(https?:\/\/)?([\w-]+(\.[\w-]+)+\/?)([^\s]*)?$/i,
+                    message: '올바른 URL 형식을 입력해주세요.',
+                  },
+                }}
+                render={({ field }) => (
+                  <Input
+                    {...field}
+                    placeholder="URL을 첨부해주세요."
+                    isValid={!errors.link}
+                    errorMessage={errors.link?.message}
+                    isCountValue={false}
+                  />
+                )}
+              />
+            </section>
+            <footer css={footerStyle}>
+              <Button variant="large" type="submit" disabled={isSubmitting}>
+                다음
+              </Button>
+            </footer>
+          </form>
         </main>
-        <footer css={footerStyle}>
-          <Button variant="large" onClick={handleNextClick} disabled={!isAllValid}>
-            다음
-          </Button>
-        </footer>
       </div>
     </>
   );
diff --git a/src/pages/host/components/StepTwo/StepTwo.tsx b/src/pages/host/components/StepTwo/StepTwo.tsx
index 2280ad84..cae966d9 100644
--- a/src/pages/host/components/StepTwo/StepTwo.tsx
+++ b/src/pages/host/components/StepTwo/StepTwo.tsx
@@ -12,51 +12,74 @@ import {
   titleStyle,
 } from './StepTwo.style';
 import CategorySelectBox from 'src/components/common/CategorySelectBox/CategorySelectBox';
-import { useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { usePostHostApply } from '@apis/domains/host';
 import { components } from '@schema';
-import { useHostApplyInputChange, useHostApplyInputValidation } from '@pages/host/hooks';
+import { Controller, useForm } from 'react-hook-form';
+import { useAtom } from 'jotai';
+import { hostApplyAtom } from '@stores';
 
 const StepTwo = ({ onNext }: StepProps) => {
-  const nicknameRef = useRef<HTMLInputElement>(null);
+  const [hostApplyState, setHostApplyState] = useAtom(hostApplyAtom);
   const [isNicknameDuplicate, setIsNicknameDuplicate] = useState(false);
 
-  const { hostApplyState, handleInputChange, handleCategoryChange, resetHostApplyState } =
-    useHostApplyInputChange();
-  const { validateStepTwo } = useHostApplyInputValidation();
+  // const [selectedCategories, setSelectedCategories] = useState<
+  //   components['schemas']['SubmitterCategoryInfo']
+  // >(hostApplyState.categoryList || { category1: '', category2: '', category3: '' });
 
-  const [selectedCategories, setSelectedCategories] = useState<
-    components['schemas']['SubmitterCategoryInfo']
-  >(hostApplyState.categoryList || { category1: '', category2: '', category3: '' });
-
-  const { isNicknameValid, isPlanValid, isEmailValid, isAllValid } = validateStepTwo({
-    ...hostApplyState,
-    categoryList: selectedCategories,
-  });
   const { mutate, isPending } = usePostHostApply(
-    resetHostApplyState,
+    // resetHostApplyState,
     onNext,
-    setIsNicknameDuplicate,
-    nicknameRef
+    setIsNicknameDuplicate
   );
 
-  const handleNextClick = () => {
-    if (isAllValid) {
-      mutate(hostApplyState);
-    }
-  };
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isValid },
+    setValue,
+    setFocus,
+  } = useForm({
+    defaultValues: hostApplyState,
+    mode: 'onBlur',
+  });
 
   const handleUpdateCategories = (
     newCategories: components['schemas']['SubmitterCategoryInfo']
   ) => {
-    setSelectedCategories(newCategories);
-    handleCategoryChange(newCategories);
+    setValue('categoryList', newCategories, { shouldValidate: true });
+    setHostApplyState((prevState) => ({
+      ...prevState,
+      categoryList: newCategories,
+    }));
+  };
+
+  useEffect(() => {
+    if (isNicknameDuplicate) {
+      setFocus('nickname');
+    }
+  }, [isNicknameDuplicate, setFocus]);
+
+  const onSubmit = (data: components['schemas']['SubmitterCreateRequest']) => {
+    if (isValid) {
+      setHostApplyState(data);
+      mutate(data);
+    }
   };
 
+  // const handleUpdateCategories = (
+  //   newCategories: components['schemas']['SubmitterCategoryInfo']
+  // ) => {
+  //   setSelectedCategories(newCategories);
+  //   handleCategoryChange(newCategories);
+  // };
+
   if (isPending) {
     return <Spinner />;
   }
 
+  console.log(hostApplyState);
+
   return (
     <>
       <ProgressBar progress={66.6} />
@@ -66,65 +89,109 @@ const StepTwo = ({ onNext }: StepProps) => {
           <h1 css={subTitleStyle}>호스트님에 대해 알려주세요!</h1>
         </header>
         <main css={mainStyle}>
-          <section css={sectionStyle}>
-            <QuestionText numberLabel="Q4">픽플에서 사용할 닉네임을 작성해주세요.</QuestionText>
-            <Input
-              ref={nicknameRef}
-              value={hostApplyState.nickname}
-              onChange={(e) => {
-                setIsNicknameDuplicate((prevState) => (prevState === true ? false : prevState));
-                handleInputChange(e, 'nickname');
-              }}
-              placeholder="ex. 픽픽이 (최대 15자)"
-              isValid={!isNicknameDuplicate && isNicknameValid}
-              errorMessage={
-                isNicknameDuplicate ? '* 이미 존재하는 닉네임이에요.' : '닉네임을 입력해 주세요.'
-              }
-              maxLength={10}
-              isCountValue={true}
-            />
-          </section>
-          <section css={categorySectionStyle}>
-            <QuestionText numberLabel="Q5">
-              픽플에서 어떤 주제의 클래스 모임을 진행하고 싶으신가요?
-            </QuestionText>
-            <CategorySelectBox
-              selectedCategories={selectedCategories}
-              onUpdateCategories={handleUpdateCategories}
-            />
-            <h6 css={referTextStyle}>*최소 1개부터 최대 3개까지 선택 가능합니다.</h6>
-          </section>
-          <section css={sectionStyle}>
-            <QuestionText numberLabel="Q6">클래스 모임의 운영 계획에 대해 말해주세요.</QuestionText>
-            <TextArea
-              size="medium"
-              maxLength={300}
-              placeholder={`픽플에서 개최할 모임의 주제, 운영 방식 등을 작성해 주세요!`}
-              value={hostApplyState.plan}
-              onChange={(e) => handleInputChange(e, 'plan')}
-              isValid={isPlanValid}
-              errorMessage="운영 계획을 입력해 주세요."
-            />
-          </section>
-          <section css={sectionStyle}>
-            <QuestionText numberLabel="Q7">
-              승인 결과를 전달 받을 메일 주소를 입력해 주세요.
-            </QuestionText>
-            <Input
-              value={hostApplyState.email}
-              onChange={(e) => handleInputChange(e, 'email')}
-              placeholder="ex. pickple@gmail.com"
-              isValid={isEmailValid}
-              errorMessage="유효한 이메일 주소를 입력해 주세요."
-              isCountValue={false}
-            />
-          </section>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <section css={sectionStyle}>
+              <QuestionText numberLabel="Q4">픽플에서 사용할 닉네임을 작성해주세요.</QuestionText>
+              <Controller
+                name="nickname"
+                control={control}
+                rules={{ required: '닉네임을 입력해 주세요.' }}
+                render={({ field }) => (
+                  <Input
+                    {...field}
+                    placeholder="ex. 픽픽이 (최대 15자)"
+                    isValid={!isNicknameDuplicate && !errors.nickname}
+                    errorMessage={
+                      isNicknameDuplicate
+                        ? '* 이미 존재하는 닉네임이에요.'
+                        : errors.nickname?.message
+                    }
+                    maxLength={10}
+                    isCountValue={true}
+                    onChange={(e) => {
+                      setIsNicknameDuplicate(false);
+                      field.onChange(e);
+                      setHostApplyState((prevState) => ({
+                        ...prevState,
+                        nickname: e.target.value,
+                      }));
+                    }}
+                  />
+                )}
+              />
+            </section>
+            <section css={categorySectionStyle}>
+              <QuestionText numberLabel="Q5">
+                픽플에서 어떤 주제의 클래스 모임을 진행하고 싶으신가요?
+              </QuestionText>
+              <Controller
+                name="categoryList"
+                control={control}
+                rules={{
+                  validate: (value) =>
+                    (value && Object.values(value).some(Boolean)) || '카테고리를 선택해 주세요.',
+                }}
+                render={({ field }) => (
+                  <CategorySelectBox
+                    selectedCategories={field.value}
+                    onUpdateCategories={handleUpdateCategories}
+                  />
+                )}
+              />
+              <h6 css={referTextStyle}>*최소 1개부터 최대 3개까지 선택 가능합니다.</h6>
+            </section>
+            <section css={sectionStyle}>
+              <QuestionText numberLabel="Q6">
+                클래스 모임의 운영 계획에 대해 말해주세요.
+              </QuestionText>
+              <Controller
+                name="plan"
+                control={control}
+                rules={{ required: '운영 계획을 입력해 주세요.' }}
+                render={({ field }) => (
+                  <TextArea
+                    {...field}
+                    size="medium"
+                    maxLength={300}
+                    placeholder={`픽플에서 개최할 모임의 주제, 운영 방식 등을 작성해 주세요!`}
+                    isValid={!errors.plan}
+                    errorMessage={errors.plan?.message}
+                  />
+                )}
+              />
+            </section>
+            <section css={sectionStyle}>
+              <QuestionText numberLabel="Q7">
+                승인 결과를 전달 받을 메일 주소를 입력해 주세요.
+              </QuestionText>
+              <Controller
+                name="email"
+                control={control}
+                rules={{
+                  required: '유효한 이메일 주소를 입력해 주세요.',
+                  pattern: {
+                    value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
+                    message: '유효한 이메일 주소를 입력해 주세요.',
+                  },
+                }}
+                render={({ field }) => (
+                  <Input
+                    {...field}
+                    placeholder="ex. pickple@gmail.com"
+                    isValid={!errors.email}
+                    errorMessage={errors.email?.message}
+                    isCountValue={false}
+                  />
+                )}
+              />
+            </section>
+            <footer css={footerStyle}>
+              <Button variant="large" type="submit" disabled={isPending}>
+                다음
+              </Button>
+            </footer>
+          </form>
         </main>
-        <footer css={footerStyle}>
-          <Button variant="large" onClick={handleNextClick} disabled={!isAllValid}>
-            다음
-          </Button>
-        </footer>
       </div>
     </>
   );
diff --git a/yarn.lock b/yarn.lock
index fe88cd63..bc4888e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1978,6 +1978,11 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-hook-form@^7.52.1:
+  version "7.52.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.52.1.tgz#ec2c96437b977f8b89ae2d541a70736c66284852"
+  integrity sha512-uNKIhaoICJ5KQALYZ4TOaOLElyM+xipord+Ha3crEFhTntdLvWZqVY49Wqd/0GiVCA/f9NjemLeiNPjG7Hpurg==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

From fbdec1fa650993c1389e1fc7a9ec7ee570e983df Mon Sep 17 00:00:00 2001
From: imhwarang <imhwarang4@naver.com>
Date: Tue, 6 Aug 2024 00:30:22 +0900
Subject: [PATCH 2/4] =?UTF-8?q?design:=20Step=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../host/components/StepOne/StepOne.style.ts  |  2 +-
 src/pages/host/components/StepOne/StepOne.tsx | 19 ++++++++++---------
 src/pages/host/components/StepTwo/StepTwo.tsx | 18 +++++++++---------
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/pages/host/components/StepOne/StepOne.style.ts b/src/pages/host/components/StepOne/StepOne.style.ts
index 91accdf0..a1bf761b 100644
--- a/src/pages/host/components/StepOne/StepOne.style.ts
+++ b/src/pages/host/components/StepOne/StepOne.style.ts
@@ -23,7 +23,7 @@ export const subTitleStyle = (theme: Theme) => css`
 
 export const mainStyle = css`
   ${flexGenerator('column')};
-  gap: 2rem;
+  gap: 3rem;
 
   margin-top: 3.8rem;
   margin-bottom: 11.9rem;
diff --git a/src/pages/host/components/StepOne/StepOne.tsx b/src/pages/host/components/StepOne/StepOne.tsx
index fd00d768..af28211c 100644
--- a/src/pages/host/components/StepOne/StepOne.tsx
+++ b/src/pages/host/components/StepOne/StepOne.tsx
@@ -42,8 +42,9 @@ const StepOne = ({ onNext }: StepProps) => {
           <h4 css={titleStyle}>호스트 신청</h4>
           <h1 css={subTitleStyle}>호스트님에 대해 알려주세요!</h1>
         </header>
-        <main css={mainStyle}>
-          <form onSubmit={handleSubmit(onSubmit)}>
+
+        <form onSubmit={handleSubmit(onSubmit)} >
+          <main css={mainStyle}>
             <section css={sectionStyle}>
               <QuestionText numberLabel="Q1">호스트님은 어떤 분이신가요?</QuestionText>
               <Controller
@@ -107,13 +108,13 @@ const StepOne = ({ onNext }: StepProps) => {
                 )}
               />
             </section>
-            <footer css={footerStyle}>
-              <Button variant="large" type="submit" disabled={isSubmitting}>
-                다음
-              </Button>
-            </footer>
-          </form>
-        </main>
+          </main>
+          <footer css={footerStyle}>
+            <Button variant="large" type="submit" disabled={isSubmitting}>
+              다음
+            </Button>
+          </footer>
+        </form>
       </div>
     </>
   );
diff --git a/src/pages/host/components/StepTwo/StepTwo.tsx b/src/pages/host/components/StepTwo/StepTwo.tsx
index cae966d9..5859d882 100644
--- a/src/pages/host/components/StepTwo/StepTwo.tsx
+++ b/src/pages/host/components/StepTwo/StepTwo.tsx
@@ -88,8 +88,8 @@ const StepTwo = ({ onNext }: StepProps) => {
           <h4 css={titleStyle}>호스트 신청</h4>
           <h1 css={subTitleStyle}>호스트님에 대해 알려주세요!</h1>
         </header>
-        <main css={mainStyle}>
-          <form onSubmit={handleSubmit(onSubmit)}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <main css={mainStyle}>
             <section css={sectionStyle}>
               <QuestionText numberLabel="Q4">픽플에서 사용할 닉네임을 작성해주세요.</QuestionText>
               <Controller
@@ -185,13 +185,13 @@ const StepTwo = ({ onNext }: StepProps) => {
                 )}
               />
             </section>
-            <footer css={footerStyle}>
-              <Button variant="large" type="submit" disabled={isPending}>
-                다음
-              </Button>
-            </footer>
-          </form>
-        </main>
+          </main>
+          <footer css={footerStyle}>
+            <Button variant="large" type="submit" disabled={isPending}>
+              다음
+            </Button>
+          </footer>
+        </form>
       </div>
     </>
   );

From 6ff45c04f1a4a69e4dbb35a62d5a8617efcd7c88 Mon Sep 17 00:00:00 2001
From: imhwarang <imhwarang4@naver.com>
Date: Tue, 6 Aug 2024 01:49:27 +0900
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=EC=BD=98=EC=86=94=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/host/components/StepOne/StepOne.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/host/components/StepOne/StepOne.tsx b/src/pages/host/components/StepOne/StepOne.tsx
index af28211c..87f7eea5 100644
--- a/src/pages/host/components/StepOne/StepOne.tsx
+++ b/src/pages/host/components/StepOne/StepOne.tsx
@@ -29,7 +29,6 @@ const StepOne = ({ onNext }: StepProps) => {
 
   const onSubmit = (data: components['schemas']['SubmitterCreateRequest']) => {
     setHostApplyState((prev) => ({ ...prev, ...data }));
-    console.log(data);
     onNext();
     smoothScroll(0);
   };

From a7f7e2d7dd6b8f8ee959b32895a7e83b2f5caab9 Mon Sep 17 00:00:00 2001
From: imhwarang <imhwarang4@naver.com>
Date: Fri, 30 Aug 2024 18:24:23 +0900
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=EC=BD=98=EC=86=94=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/host/components/StepTwo/StepTwo.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/host/components/StepTwo/StepTwo.tsx b/src/pages/host/components/StepTwo/StepTwo.tsx
index 5859d882..bc22d730 100644
--- a/src/pages/host/components/StepTwo/StepTwo.tsx
+++ b/src/pages/host/components/StepTwo/StepTwo.tsx
@@ -78,8 +78,6 @@ const StepTwo = ({ onNext }: StepProps) => {
     return <Spinner />;
   }
 
-  console.log(hostApplyState);
-
   return (
     <>
       <ProgressBar progress={66.6} />