From b0c71f19f38d0711d3349e8de4fba4071df2fe2f Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Wed, 10 May 2023 20:08:20 +0900
Subject: [PATCH 01/52] =?UTF-8?q?refactor:=20progress=20bar=20component/co?=
 =?UTF-8?q?mmon=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common}/ProgressBar/ProgressBar.module.scss                 | 0
 .../Signup/component => component/common}/ProgressBar/index.tsx | 0
 src/page/Auth/Signup/index.tsx                                  | 2 +-
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename src/{page/Auth/Signup/component => component/common}/ProgressBar/ProgressBar.module.scss (100%)
 rename src/{page/Auth/Signup/component => component/common}/ProgressBar/index.tsx (100%)

diff --git a/src/page/Auth/Signup/component/ProgressBar/ProgressBar.module.scss b/src/component/common/ProgressBar/ProgressBar.module.scss
similarity index 100%
rename from src/page/Auth/Signup/component/ProgressBar/ProgressBar.module.scss
rename to src/component/common/ProgressBar/ProgressBar.module.scss
diff --git a/src/page/Auth/Signup/component/ProgressBar/index.tsx b/src/component/common/ProgressBar/index.tsx
similarity index 100%
rename from src/page/Auth/Signup/component/ProgressBar/index.tsx
rename to src/component/common/ProgressBar/index.tsx
diff --git a/src/page/Auth/Signup/index.tsx b/src/page/Auth/Signup/index.tsx
index 4e5bf697..f9950c28 100644
--- a/src/page/Auth/Signup/index.tsx
+++ b/src/page/Auth/Signup/index.tsx
@@ -3,8 +3,8 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { ReactComponent as Logo } from 'assets/svg/auth/koin-logo.svg';
 import { ReactComponent as Back } from 'assets/svg/common/back-arrow.svg';
 import { Link } from 'react-router-dom';
+import ProgressBar from 'component/common/ProgressBar';
 import UserEmail from './component/UserEmail';
-import ProgressBar from './component/ProgressBar';
 import OwnerData from './view/OwnerDataPage';
 import TermsOfService from './view/TermsOfServicePage';
 import UserData from './view/UserDataPage';

From c83b6077401be285c885340bd7493021bc06e72c Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Tue, 16 May 2023 15:34:07 +0900
Subject: [PATCH 02/52] =?UTF-8?q?feat:=20=EC=95=BD=EA=B4=80=EB=8F=99?=
 =?UTF-8?q?=EC=9D=98=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=95=BD=EA=B4=80?=
 =?UTF-8?q?=EB=8F=99=EC=9D=98=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/constant/terms.ts        |  4 +-
 .../Signup/view/TermsOfServicePage/index.tsx  | 69 ++++++++++++++-----
 2 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/src/page/Auth/Signup/constant/terms.ts b/src/page/Auth/Signup/constant/terms.ts
index 20558e7d..72f0d6a1 100644
--- a/src/page/Auth/Signup/constant/terms.ts
+++ b/src/page/Auth/Signup/constant/terms.ts
@@ -1,4 +1,4 @@
-const Terms = [
+const TEMRS = [
   {
     id: 'term_1',
     title: '개인정보 이용약관',
@@ -19,4 +19,4 @@ const Terms = [
   },
 ];
 
-export default Terms;
+export default TEMRS;
diff --git a/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx b/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx
index 157f7a0b..51fe59f5 100644
--- a/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx
+++ b/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx
@@ -1,48 +1,85 @@
 import { Link } from 'react-router-dom';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
-import Terms from 'page/Auth/Signup/constant/terms';
+import TERMS from 'page/Auth/Signup/constant/terms';
+import { useEffect, useState } from 'react';
 import styles from './TermsOfService.module.scss';
 
 type ButtonClickEventProps = {
   clickEvent: () => void;
 };
 
+const useTermCheck = () => {
+  const [isUserTermAgree, setUserTermAgree] = useState(false);
+  const [isKoinTermAgree, setKoinTermAgree] = useState(false);
+  const [isAllAgree, setAllAgree] = useState(false);
+
+  const checkAll = () => {
+    if (isAllAgree) {
+      setUserTermAgree(false);
+      setKoinTermAgree(false);
+    } else {
+      setUserTermAgree(true);
+      setKoinTermAgree(true);
+    }
+  };
+  useEffect(() => {
+    setAllAgree(isKoinTermAgree && isUserTermAgree);
+  }, [isKoinTermAgree, isUserTermAgree]);
+  return {
+    isUserTermAgree, setUserTermAgree, isKoinTermAgree, setKoinTermAgree, isAllAgree, checkAll,
+  };
+};
+
 export default function TermsOfService({ clickEvent }:ButtonClickEventProps) {
   const { isMobile } = useMediaQuery();
+  const USER_TERM = TERMS[0];
+  const KOIN_TERM = TERMS[1];
+  const {
+    isUserTermAgree, setUserTermAgree, isKoinTermAgree, setKoinTermAgree, isAllAgree, checkAll,
+  } = useTermCheck();
   return (
     <>
       <section className={styles.section}>
         <div className={styles['agree-all']}>
           <label htmlFor="terms" className={styles['agree-all__content']}>
-            <input id="terms" type="checkbox" className={styles.section__checkbox} />
+            <input id="terms" type="checkbox" className={styles.section__checkbox} checked={isAllAgree} onChange={checkAll} />
             <span className={styles['agree-all__pc--phrase']}>아래 이용약관에&nbsp;</span>
             모두 동의합니다.
           </label>
         </div>
-        {Terms.map((term) => (
-          <div className={styles.term} key={term.id}>
-            <span className={styles.term__title}>{term.title}</span>
-            <div className={styles.term__content}>
-              {term.text}
-            </div>
-            <label htmlFor={term.id} className={styles.term__agree}>
-              <input id={term.id} type="checkbox" className={styles.term__agree__checkbox} />
-              <span className={styles['term__agree__phrase--mobile']}>{`${term.title}(필수)`}</span>
-              <span className={styles['term__agree__phrase--pc']}>{`${term.title}에 동의합니다`}</span>
-            </label>
+        <div className={styles.term}>
+          <span className={styles.term__title}>{USER_TERM.title}</span>
+          <div className={styles.term__content}>
+            {USER_TERM.text}
+          </div>
+          <label htmlFor={USER_TERM.id} className={styles.term__agree}>
+            <input id={USER_TERM.id} type="checkbox" className={styles.term__agree__checkbox} checked={isUserTermAgree} onChange={() => setUserTermAgree(!isUserTermAgree)} />
+            <span className={styles['term__agree__phrase--mobile']}>{`${USER_TERM.title}(필수)`}</span>
+            <span className={styles['term__agree__phrase--pc']}>{`${USER_TERM.title}에 동의합니다`}</span>
+          </label>
+        </div>
+        <div className={styles.term}>
+          <span className={styles.term__title}>{KOIN_TERM.title}</span>
+          <div className={styles.term__content}>
+            {KOIN_TERM.text}
           </div>
-        ))}
+          <label htmlFor={KOIN_TERM.id} className={styles.term__agree}>
+            <input id={KOIN_TERM.id} type="checkbox" className={styles.term__agree__checkbox} checked={isKoinTermAgree} onChange={() => setKoinTermAgree(!isKoinTermAgree)} />
+            <span className={styles['term__agree__phrase--mobile']}>{`${KOIN_TERM.title}(필수)`}</span>
+            <span className={styles['term__agree__phrase--pc']}>{`${KOIN_TERM.title}에 동의합니다`}</span>
+          </label>
+        </div>
       </section>
 
       <div className={styles.buttons}>
         {isMobile ? (
           <>
             <Link to="/login" className={styles['buttons__mobile-button']}>취소</Link>
-            <CustomButton buttonType="mobile" content="확인" onClick={() => clickEvent()} />
+            <CustomButton buttonType="mobile" content="확인" onClick={clickEvent} disable={!isAllAgree} />
           </>
         )
-          : <CustomButton buttonType="large" content="다음" onClick={() => clickEvent()} />}
+          : <CustomButton buttonType="large" content="다음" onClick={clickEvent} disable={!isAllAgree} />}
       </div>
     </>
   );

From dd9139796c1c2231ead7c51972fad5acc90976ca Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 5 Jun 2023 00:42:49 +0900
Subject: [PATCH 03/52] =?UTF-8?q?feat:=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EC=A4=91=EB=B3=B5=ED=99=95=EC=9D=B8=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/UserId/UserId.module.scss       | 24 ++++++++++++--
 .../Auth/Signup/component/UserId/index.tsx    | 31 ++++++++++++++++---
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserId/UserId.module.scss b/src/page/Auth/Signup/component/UserId/UserId.module.scss
index 32ae4909..271e0cdf 100644
--- a/src/page/Auth/Signup/component/UserId/UserId.module.scss
+++ b/src/page/Auth/Signup/component/UserId/UserId.module.scss
@@ -11,7 +11,11 @@
     margin-top: 8px;
     margin-left: 8px;
     color: #858585;
-    font-size: 12px;
+    font-size: 11px;
+
+    @include media.media-breakpoint-down(mobile) {
+      margin: 0;
+    }
   }
 
   &__warn {
@@ -21,9 +25,15 @@
     gap: 7px;
 
     &--phrase {
+      margin-top: 8px;
+      margin-left: 8px;
       display: block;
       color: #f05d3d;
       font-size: 11px;
+
+      @include media.media-breakpoint-down(mobile) {
+        margin: 0;
+      }
     }
   }
 }
@@ -31,10 +41,20 @@
 .input-block {
   display: flex;
   width: calc(100% - 2px);
-  justify-content: space-between;
   gap: 16px;
+  justify-content: space-between;
   margin-top: 8px;
 
+  @include media.media-breakpoint-down(mobile) {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  &__input-elements {
+    display: flex;
+    align-items: end;
+  }
+
   &__input {
     width: calc(100% - 32px - 80px);
     border: 1px solid #d2dae2;
diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index 43f569c2..7bdde40b 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -1,10 +1,12 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
+import { useState } from 'react';
 import styles from './UserId.module.scss';
 
 export default function UserId() {
   const { isMobile } = useMediaQuery();
+  const [isUsable, setUsable] = useState<boolean | null>(null);
   return (
     !isMobile
       ? (
@@ -12,17 +14,36 @@ export default function UserId() {
           <span className={styles.form__label}>아이디</span>
           <div className={styles['input-block']}>
             <input className={styles['input-block__input']} id="id-input" placeholder="이메일 형식 아이디 입력(필수)" />
-            <CustomButton content="중복확인" buttonType="small" />
+            <CustomButton content="중복확인" buttonType="small" onClick={() => { setUsable(true); }} />
           </div>
-          <span className={styles.form__alert}>사용하실 수 있는 아이디 입니다.</span>
+          { isUsable !== null
+            && (
+            <>
+              {isUsable && <span className={styles.form__alert}>사용하실 수 있는 아이디 입니다.</span>}
+              {!isUsable && <span className={styles['form__warn--phrase']}>이미 가입된 이메일입니다.</span>}
+            </>
+            )}
         </div>
       )
       : (
         <div className={styles['input-block']}>
-          <input className={styles['input-block__input--warn']} id="id-input" placeholder="이메일" />
+          <div className={styles['input-block__input-elements']}>
+            <input className={styles[`${(isUsable !== null) ? 'input-block__input' : 'input-block__input--warn'}`]} id="id-input" placeholder="이메일" />
+            <CustomButton content="중복확인" buttonType="small" onClick={() => { setUsable(true); }} />
+          </div>
           <div className={styles.form__warn}>
-            <Warn />
-            <span className={styles['form__warn--phrase']}>이미 가입된 이메일입니다.</span>
+            { isUsable !== null
+            && (
+            <>
+              {isUsable && <span className={styles.form__alert}>사용하실 수 있는 아이디 입니다.</span>}
+              {!isUsable && (
+              <>
+                <Warn />
+                <span className={styles['form__warn--phrase']}>이미 가입된 이메일입니다.</span>
+              </>
+              )}
+            </>
+            )}
           </div>
         </div>
       )

From ee9ef0b53bece7bde06481c18c72117d7e924ae0 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 5 Jun 2023 01:09:44 +0900
Subject: [PATCH 04/52] =?UTF-8?q?feat:=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EB=B3=B4=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Signup/component/UserPassword/index.tsx   | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index 21ada988..7be8c9ad 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -1,26 +1,43 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { ReactComponent as VisibleImage } from 'assets/svg/auth/visible.svg';
 import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
+import { useRef } from 'react';
 import styles from './UserPassword.module.scss';
 
+const useVisible = () => {
+  const visibility = useRef<HTMLInputElement>(null);
+  const setVisible = () => {
+    if (visibility.current) {
+      if (visibility.current.type === 'password') {
+        visibility.current.type = 'text';
+      } else {
+        visibility.current.type = 'password';
+      }
+    }
+  };
+  return { visibility, setVisible };
+};
+
 export default function UserPassword() {
   const { isMobile } = useMediaQuery();
+  const { visibility: passwordVisibility, setVisible: setPasswordVisibility } = useVisible();
+  const { visibility: checkVisibility, setVisible: setCheckVisibility } = useVisible();
   return (
     <div className={styles.form}>
       {!isMobile && <span className={styles.form__label}>비밀번호</span>}
       <div className={styles.form__input}>
-        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type="password" />
+        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type="password" ref={passwordVisibility} />
         {!isMobile && (
-        <button className={styles['form__visible--button']} type="button">
+        <button className={styles['form__visible--button']} type="button" onClick={setPasswordVisibility}>
           <VisibleImage />
         </button>
         )}
         <span className={styles.form__alert}>* 특수문자 포함 영어와 숫자 조합 6~18 자리</span>
       </div>
       <div className={styles.form__input}>
-        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type="password" />
+        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type="password" ref={checkVisibility} />
         {!isMobile && (
-        <button className={styles['form__visible--button']} type="button">
+        <button className={styles['form__visible--button']} type="button" onClick={setCheckVisibility}>
           <VisibleImage />
         </button>
         )}

From 5cd98dd940b67aa652badb1745da91b6b2a268f1 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 5 Jun 2023 22:45:02 +0900
Subject: [PATCH 05/52] =?UTF-8?q?feat:=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=82=AC=EC=9D=B4=EC=A6=88,=20submit/butt?=
 =?UTF-8?q?on=20=ED=83=80=EC=9E=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/CustomButton/index.tsx  | 9 +++++----
 src/page/Auth/Signup/component/UserEmail/index.tsx     | 6 +++---
 src/page/Auth/Signup/view/OwnerDataPage/index.tsx      | 2 +-
 src/page/Auth/Signup/view/TermsOfServicePage/index.tsx | 4 ++--
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/page/Auth/Signup/component/CustomButton/index.tsx b/src/page/Auth/Signup/component/CustomButton/index.tsx
index d770009b..cd213619 100644
--- a/src/page/Auth/Signup/component/CustomButton/index.tsx
+++ b/src/page/Auth/Signup/component/CustomButton/index.tsx
@@ -2,18 +2,19 @@ import styles from './CustomButton.module.scss';
 
 interface ButtonProps {
   content:string,
-  buttonType:string,
+  buttonSize:string,
   disable?: boolean,
+  submit?:boolean
   onClick?: () => void
 }
 
 export default function CustomButton({
-  content, buttonType, disable, onClick,
+  content, buttonSize, disable, onClick, submit,
 }:ButtonProps) {
   return (
     <button
-      type="button"
-      className={`${styles[`button--${buttonType}`]}`}
+      type={submit ? 'submit' : 'button'}
+      className={`${styles[`button--${buttonSize}`]}`}
       onClick={onClick}
       disabled={!!disable}
     >
diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index f5aae42e..ecf52b63 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -17,7 +17,7 @@ export default function UserEmail({ clickEvent }:ButtonClickEvent) {
             <input className={styles.input} type="text" placeholder="인증번호" />
           </div>
           <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
-          <CustomButton buttonType="large" content="인증번호 발송" />
+          <CustomButton buttonSize="large" content="인증번호 발송" />
         </div>
       )
       : (
@@ -35,8 +35,8 @@ export default function UserEmail({ clickEvent }:ButtonClickEvent) {
             <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
           </div>
           <div className={styles.buttons}>
-            <CustomButton buttonType="mobile" content="재발송" onClick={() => { alert('재발송'); }} />
-            <CustomButton buttonType="mobile" content="다음" onClick={clickEvent} />
+            <CustomButton buttonSize="mobile" content="재발송" onClick={() => { alert('재발송'); }} />
+            <CustomButton buttonSize="mobile" content="다음" onClick={clickEvent} />
           </div>
         </>
       )
diff --git a/src/page/Auth/Signup/view/OwnerDataPage/index.tsx b/src/page/Auth/Signup/view/OwnerDataPage/index.tsx
index 8e45ea1a..8c21e041 100644
--- a/src/page/Auth/Signup/view/OwnerDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/OwnerDataPage/index.tsx
@@ -52,7 +52,7 @@ export default function OwnerData({ clickEvent }:ButtonClickEvent) {
         </div>
       </section>
       <div className={styles.buttons}>
-        <CustomButton buttonType="large" content={isMobile ? '확인' : '다음'} onClick={clickEvent} />
+        <CustomButton buttonSize="large" content={isMobile ? '확인' : '다음'} onClick={clickEvent} />
       </div>
     </>
   );
diff --git a/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx b/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx
index 51fe59f5..9426d2a6 100644
--- a/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx
+++ b/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx
@@ -76,10 +76,10 @@ export default function TermsOfService({ clickEvent }:ButtonClickEventProps) {
         {isMobile ? (
           <>
             <Link to="/login" className={styles['buttons__mobile-button']}>취소</Link>
-            <CustomButton buttonType="mobile" content="확인" onClick={clickEvent} disable={!isAllAgree} />
+            <CustomButton buttonSize="mobile" content="확인" onClick={clickEvent} disable={!isAllAgree} />
           </>
         )
-          : <CustomButton buttonType="large" content="다음" onClick={clickEvent} disable={!isAllAgree} />}
+          : <CustomButton buttonSize="large" content="다음" onClick={clickEvent} disable={!isAllAgree} />}
       </div>
     </>
   );

From 6b2a57d0e2ee55551eb4e81cece3e80eb9e59f76 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 5 Jun 2023 22:45:48 +0900
Subject: [PATCH 06/52] =?UTF-8?q?feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=ED=8F=BC=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 .../Auth/Signup/component/UserId/index.tsx    | 60 ++++++++++++++++---
 yarn.lock                                     |  5 ++
 3 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 36f4ac69..0c77396b 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react": "^18.2.8",
     "@typescript-eslint/eslint-plugin": "^5.30.0",
     "@typescript-eslint/parser": "^5.30.0",
     "eslint": "^8.18.0",
diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index 7bdde40b..22208c29 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -2,20 +2,57 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import { useState } from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { SubmitHandler, useForm } from 'react-hook-form';
 import styles from './UserId.module.scss';
 
+const REG_EX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+type FormData = {
+  email:string
+};
+
+const useEmailDuplicateCheck = () => {
+  const {
+    register: emailRegister,
+    handleSubmit: emailHandleSubmit,
+    formState: { errors },
+  } = useForm<FormData>();
+  const emailDuplicateRegister = emailRegister('email', {
+    required: { value: true, message: '이메일을 입력해주세요.' },
+    pattern: {
+      value: REG_EX,
+      message: '유효한 이메일 주소를 입력해주세요.',
+    },
+  });
+  return {
+    emailHandleSubmit, errors, emailDuplicateRegister,
+  };
+};
+
 export default function UserId() {
   const { isMobile } = useMediaQuery();
   const [isUsable, setUsable] = useState<boolean | null>(null);
+  const { emailHandleSubmit, errors, emailDuplicateRegister } = useEmailDuplicateCheck();
+  const onSubmit:SubmitHandler<FormData> = (data) => {
+    console.log('이메일 중복 체크', data);
+    setUsable(!isUsable);
+  };
   return (
     !isMobile
       ? (
-        <div className={styles.form}>
+        <form className={styles.form} onSubmit={emailHandleSubmit(onSubmit)}>
           <span className={styles.form__label}>아이디</span>
           <div className={styles['input-block']}>
-            <input className={styles['input-block__input']} id="id-input" placeholder="이메일 형식 아이디 입력(필수)" />
-            <CustomButton content="중복확인" buttonType="small" onClick={() => { setUsable(true); }} />
+            <input
+              className={styles['input-block__input']}
+              id="id-input"
+              type="text"
+              placeholder="이메일 형식 아이디 입력(필수)"
+              {...emailDuplicateRegister}
+            />
+            <CustomButton content="중복확인" buttonSize="small" submit />
           </div>
+          {errors.email && <span className={styles['form__warn--phrase']}>{errors.email.message}</span>}
           { isUsable !== null
             && (
             <>
@@ -23,15 +60,22 @@ export default function UserId() {
               {!isUsable && <span className={styles['form__warn--phrase']}>이미 가입된 이메일입니다.</span>}
             </>
             )}
-        </div>
+        </form>
       )
       : (
-        <div className={styles['input-block']}>
+        <form className={styles['input-block']} onSubmit={emailHandleSubmit(onSubmit)}>
           <div className={styles['input-block__input-elements']}>
-            <input className={styles[`${(isUsable !== null) ? 'input-block__input' : 'input-block__input--warn'}`]} id="id-input" placeholder="이메일" />
-            <CustomButton content="중복확인" buttonType="small" onClick={() => { setUsable(true); }} />
+            <input
+              className={styles[`${(isUsable !== null) ? 'input-block__input' : 'input-block__input--warn'}`]}
+              id="id-input"
+              placeholder="이메일"
+              type="text"
+              {...emailDuplicateRegister}
+            />
+            <CustomButton content="중복확인" buttonSize="small" submit />
           </div>
           <div className={styles.form__warn}>
+            {errors.email && <span className={styles['form__warn--phrase']}>{errors.email.message}</span>}
             { isUsable !== null
             && (
             <>
@@ -45,7 +89,7 @@ export default function UserId() {
             </>
             )}
           </div>
-        </div>
+        </form>
       )
   );
 }
diff --git a/yarn.lock b/yarn.lock
index e0651f93..120c69a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7808,6 +7808,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-hook-form@^7.44.3:
+  version "7.44.3"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.44.3.tgz#a99e560c6ef2b668db1daaebc4f98267331b6828"
+  integrity sha512-/tHId6p2ViAka1wECMw8FEPn/oz/w226zehHrJyQ1oIzCBNMIJCaj6ZkQcv+MjDxYh9MWR7RQic7Qqwe4a5nkw==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

From ba16115b44dd8855c3fcbf5537773d634300b52d Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Tue, 6 Jun 2023 16:44:59 +0900
Subject: [PATCH 07/52] =?UTF-8?q?style:=20id=EC=9D=B8=ED=92=8B=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Auth/Signup/component/UserId/index.tsx    | 29 ++++---------------
 .../Auth/Signup/hooks/useEmailDataCheck.tsx   | 26 +++++++++++++++++
 2 files changed, 31 insertions(+), 24 deletions(-)
 create mode 100644 src/page/Auth/Signup/hooks/useEmailDataCheck.tsx

diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index 22208c29..ad50f0bb 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -3,37 +3,18 @@ import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import { useState } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { SubmitHandler } from 'react-hook-form';
+import useEmailDuplicateCheck from 'page/Auth/Signup/hooks/useEmailDataCheck';
 import styles from './UserId.module.scss';
 
-const REG_EX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
-type FormData = {
+type EmailForm = {
   email:string
 };
-
-const useEmailDuplicateCheck = () => {
-  const {
-    register: emailRegister,
-    handleSubmit: emailHandleSubmit,
-    formState: { errors },
-  } = useForm<FormData>();
-  const emailDuplicateRegister = emailRegister('email', {
-    required: { value: true, message: '이메일을 입력해주세요.' },
-    pattern: {
-      value: REG_EX,
-      message: '유효한 이메일 주소를 입력해주세요.',
-    },
-  });
-  return {
-    emailHandleSubmit, errors, emailDuplicateRegister,
-  };
-};
-
 export default function UserId() {
   const { isMobile } = useMediaQuery();
   const [isUsable, setUsable] = useState<boolean | null>(null);
   const { emailHandleSubmit, errors, emailDuplicateRegister } = useEmailDuplicateCheck();
-  const onSubmit:SubmitHandler<FormData> = (data) => {
+  const onSubmit:SubmitHandler<EmailForm> = (data) => {
     console.log('이메일 중복 체크', data);
     setUsable(!isUsable);
   };
@@ -66,7 +47,7 @@ export default function UserId() {
         <form className={styles['input-block']} onSubmit={emailHandleSubmit(onSubmit)}>
           <div className={styles['input-block__input-elements']}>
             <input
-              className={styles[`${(isUsable !== null) ? 'input-block__input' : 'input-block__input--warn'}`]}
+              className={styles['input-block__input']}
               id="id-input"
               placeholder="이메일"
               type="text"
diff --git a/src/page/Auth/Signup/hooks/useEmailDataCheck.tsx b/src/page/Auth/Signup/hooks/useEmailDataCheck.tsx
new file mode 100644
index 00000000..7c3235bc
--- /dev/null
+++ b/src/page/Auth/Signup/hooks/useEmailDataCheck.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { useForm } from 'react-hook-form';
+
+const REG_EX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+
+type EmailForm = {
+  email:string
+};
+
+export default function useEmailDuplicateCheck() {
+  const {
+    register: emailRegister,
+    handleSubmit: emailHandleSubmit,
+    formState: { errors },
+  } = useForm<EmailForm>();
+  const emailDuplicateRegister = emailRegister('email', {
+    required: { value: true, message: '이메일을 입력해주세요.' },
+    pattern: {
+      value: REG_EX,
+      message: '유효한 이메일 주소를 입력해주세요.',
+    },
+  });
+  return {
+    emailHandleSubmit, errors, emailDuplicateRegister,
+  };
+}

From 45f9612a42b9bb3dd8c9b950ddf242a7f48660de Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Tue, 6 Jun 2023 16:52:04 +0900
Subject: [PATCH 08/52] =?UTF-8?q?feat:=20useVisible=20=ED=9B=85=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Auth/Signup/component/UserPassword/index.tsx | 16 +---------------
 src/page/Auth/Signup/hooks/useVisible.tsx        | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 15 deletions(-)
 create mode 100644 src/page/Auth/Signup/hooks/useVisible.tsx

diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index 7be8c9ad..db589c43 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -1,23 +1,9 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { ReactComponent as VisibleImage } from 'assets/svg/auth/visible.svg';
 import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
-import { useRef } from 'react';
+import useVisible from 'page/Auth/Signup/hooks/useVisible';
 import styles from './UserPassword.module.scss';
 
-const useVisible = () => {
-  const visibility = useRef<HTMLInputElement>(null);
-  const setVisible = () => {
-    if (visibility.current) {
-      if (visibility.current.type === 'password') {
-        visibility.current.type = 'text';
-      } else {
-        visibility.current.type = 'password';
-      }
-    }
-  };
-  return { visibility, setVisible };
-};
-
 export default function UserPassword() {
   const { isMobile } = useMediaQuery();
   const { visibility: passwordVisibility, setVisible: setPasswordVisibility } = useVisible();
diff --git a/src/page/Auth/Signup/hooks/useVisible.tsx b/src/page/Auth/Signup/hooks/useVisible.tsx
new file mode 100644
index 00000000..aa65bba0
--- /dev/null
+++ b/src/page/Auth/Signup/hooks/useVisible.tsx
@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+
+export default function useVisible() {
+  const visibility = useRef<HTMLInputElement>(null);
+  const setVisible = () => {
+    if (visibility.current) {
+      if (visibility.current.type === 'password') {
+        visibility.current.type = 'text';
+      } else {
+        visibility.current.type = 'password';
+      }
+    }
+  };
+  return { visibility, setVisible };
+}

From 2bdea2c4d22d9294f27d3ed3e3cebc97d6754ba1 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Wed, 7 Jun 2023 21:16:14 +0900
Subject: [PATCH 09/52] =?UTF-8?q?feat:=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EA=B0=80=EC=8B=9C=ED=99=94=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Signup/component/UserPassword/index.tsx   | 24 ++++++++++---------
 src/page/Auth/Signup/hooks/useVisible.tsx     | 15 ------------
 2 files changed, 13 insertions(+), 26 deletions(-)
 delete mode 100644 src/page/Auth/Signup/hooks/useVisible.tsx

diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index db589c43..0ced2169 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -1,35 +1,37 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
-import { ReactComponent as VisibleImage } from 'assets/svg/auth/visible.svg';
+import { ReactComponent as ShowIcon } from 'assets/svg/auth/show.svg';
+import { ReactComponent as BlindIcon } from 'assets/svg/auth/blind.svg';
 import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
-import useVisible from 'page/Auth/Signup/hooks/useVisible';
+// import usePasswordConfirm from 'page/Auth/Signup/hooks/usePasswordConfirm';
+import useBooleanState from 'utils/hooks/useBooleanState';
 import styles from './UserPassword.module.scss';
 
 export default function UserPassword() {
   const { isMobile } = useMediaQuery();
-  const { visibility: passwordVisibility, setVisible: setPasswordVisibility } = useVisible();
-  const { visibility: checkVisibility, setVisible: setCheckVisibility } = useVisible();
+  const { value: isBlind, changeValue: changeIsBlind } = useBooleanState(true);
   return (
     <div className={styles.form}>
       {!isMobile && <span className={styles.form__label}>비밀번호</span>}
       <div className={styles.form__input}>
-        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type="password" ref={passwordVisibility} />
+        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type={isBlind ? 'password' : 'text'} />
         {!isMobile && (
-        <button className={styles['form__visible--button']} type="button" onClick={setPasswordVisibility}>
-          <VisibleImage />
+        <button className={styles['form__visible--button']} type="button" onClick={changeIsBlind}>
+          {isBlind ? <BlindIcon /> : <ShowIcon />}
         </button>
         )}
         <span className={styles.form__alert}>* 특수문자 포함 영어와 숫자 조합 6~18 자리</span>
       </div>
       <div className={styles.form__input}>
-        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type="password" ref={checkVisibility} />
+        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type={isBlind ? 'password' : 'text'} />
         {!isMobile && (
-        <button className={styles['form__visible--button']} type="button" onClick={setCheckVisibility}>
-          <VisibleImage />
+        <button className={styles['form__visible--button']} type="button" onClick={changeIsBlind}>
+          {isBlind ? <BlindIcon /> : <ShowIcon />}
         </button>
         )}
         <div className={styles.form__warn}>
           <Warn />
-          <span className={styles['form__warn--phrase']}>비밀번호가 일치하지 않습니다.</span>
+          {/* {errors && <span
+            className={styles['form__warn--phrase']}>{errors.root?.message}</span>} */}
         </div>
       </div>
     </div>
diff --git a/src/page/Auth/Signup/hooks/useVisible.tsx b/src/page/Auth/Signup/hooks/useVisible.tsx
deleted file mode 100644
index aa65bba0..00000000
--- a/src/page/Auth/Signup/hooks/useVisible.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useRef } from 'react';
-
-export default function useVisible() {
-  const visibility = useRef<HTMLInputElement>(null);
-  const setVisible = () => {
-    if (visibility.current) {
-      if (visibility.current.type === 'password') {
-        visibility.current.type = 'text';
-      } else {
-        visibility.current.type = 'password';
-      }
-    }
-  };
-  return { visibility, setVisible };
-}

From c36cc09472d9532e2aa29fd6bcedf585f535bab2 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Wed, 7 Jun 2023 22:04:23 +0900
Subject: [PATCH 10/52] =?UTF-8?q?refactor:=20id=20=EC=9D=B8=ED=92=8B=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/UserId/UserId.module.scss       | 44 ++----------
 .../Auth/Signup/component/UserId/index.tsx    | 67 +++++++------------
 2 files changed, 29 insertions(+), 82 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserId/UserId.module.scss b/src/page/Auth/Signup/component/UserId/UserId.module.scss
index 271e0cdf..5e62391d 100644
--- a/src/page/Auth/Signup/component/UserId/UserId.module.scss
+++ b/src/page/Auth/Signup/component/UserId/UserId.module.scss
@@ -8,14 +8,14 @@
 
   &__alert {
     display: block;
-    margin-top: 8px;
-    margin-left: 8px;
+    height: 11px;
     color: #858585;
     font-size: 11px;
+    margin-top: 9px;
 
-    @include media.media-breakpoint-down(mobile) {
-      margin: 0;
-    }
+    // @include media.media-breakpoint-down(mobile) {
+    //   margin: 0;
+    // }
   }
 
   &__warn {
@@ -23,17 +23,12 @@
     align-items: center;
     margin-top: 9px;
     gap: 7px;
+    height: 11px;
 
     &--phrase {
-      margin-top: 8px;
-      margin-left: 8px;
       display: block;
       color: #f05d3d;
       font-size: 11px;
-
-      @include media.media-breakpoint-down(mobile) {
-        margin: 0;
-      }
     }
   }
 }
@@ -46,12 +41,6 @@
   margin-top: 8px;
 
   @include media.media-breakpoint-down(mobile) {
-    flex-direction: column;
-    gap: 0;
-  }
-
-  &__input-elements {
-    display: flex;
     align-items: end;
   }
 
@@ -74,26 +63,5 @@
         border-bottom: 1px solid black;
       }
     }
-
-    &--warn {
-      width: calc(100% - 32px - 80px);
-      border: 1px solid #d2dae2;
-      height: calc(48px - 30px);
-      padding: 14px 16px;
-
-      @include media.media-breakpoint-down(mobile) {
-        width: 100%;
-        padding: 0;
-        padding-bottom: 8px;
-        font-size: 15px;
-        border: none;
-        border-bottom: 1px solid #f05d3d;
-        outline: none;
-
-        &:focus {
-          border-bottom: 1px solid black;
-        }
-      }
-    }
   }
 }
diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index ad50f0bb..7e448cda 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -10,6 +10,7 @@ import styles from './UserId.module.scss';
 type EmailForm = {
   email:string
 };
+
 export default function UserId() {
   const { isMobile } = useMediaQuery();
   const [isUsable, setUsable] = useState<boolean | null>(null);
@@ -19,58 +20,36 @@ export default function UserId() {
     setUsable(!isUsable);
   };
   return (
-    !isMobile
-      ? (
-        <form className={styles.form} onSubmit={emailHandleSubmit(onSubmit)}>
-          <span className={styles.form__label}>아이디</span>
-          <div className={styles['input-block']}>
-            <input
-              className={styles['input-block__input']}
-              id="id-input"
-              type="text"
-              placeholder="이메일 형식 아이디 입력(필수)"
-              {...emailDuplicateRegister}
-            />
-            <CustomButton content="중복확인" buttonSize="small" submit />
-          </div>
-          {errors.email && <span className={styles['form__warn--phrase']}>{errors.email.message}</span>}
-          { isUsable !== null
-            && (
-            <>
-              {isUsable && <span className={styles.form__alert}>사용하실 수 있는 아이디 입니다.</span>}
-              {!isUsable && <span className={styles['form__warn--phrase']}>이미 가입된 이메일입니다.</span>}
-            </>
-            )}
-        </form>
-      )
-      : (
-        <form className={styles['input-block']} onSubmit={emailHandleSubmit(onSubmit)}>
-          <div className={styles['input-block__input-elements']}>
-            <input
-              className={styles['input-block__input']}
-              id="id-input"
-              placeholder="이메일"
-              type="text"
-              {...emailDuplicateRegister}
-            />
-            <CustomButton content="중복확인" buttonSize="small" submit />
-          </div>
-          <div className={styles.form__warn}>
-            {errors.email && <span className={styles['form__warn--phrase']}>{errors.email.message}</span>}
-            { isUsable !== null
+    <form className={styles.form} onSubmit={emailHandleSubmit(onSubmit)}>
+      {!isMobile && <span className={styles.form__label}>아이디</span>}
+      <div className={styles['input-block']}>
+        <input
+          className={styles['input-block__input']}
+          id="id-input"
+          type="text"
+          placeholder={isMobile ? '이메일' : '이메일 형식 아이디 입력(필수)'}
+          {...emailDuplicateRegister}
+        />
+        <CustomButton content="중복확인" buttonSize="small" submit />
+      </div>
+      {errors.email && (
+      <div className={styles.form__warn}>
+        <Warn />
+        <span className={styles['form__warn--phrase']}>{errors.email.message}</span>
+      </div>
+      )}
+      { (isUsable !== null && !errors.email)
             && (
             <>
               {isUsable && <span className={styles.form__alert}>사용하실 수 있는 아이디 입니다.</span>}
               {!isUsable && (
-              <>
+              <div className={styles.form__warn}>
                 <Warn />
                 <span className={styles['form__warn--phrase']}>이미 가입된 이메일입니다.</span>
-              </>
+              </div>
               )}
             </>
             )}
-          </div>
-        </form>
-      )
+    </form>
   );
 }

From 1c222a39671331c66d2e8c0cae83afe8a19609bb Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Tue, 13 Jun 2023 20:39:51 +0900
Subject: [PATCH 11/52] =?UTF-8?q?fix:=20=EB=B2=84=ED=8A=BC=20props=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/view/UserDataPage/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 9221d7b7..676e4306 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -18,7 +18,7 @@ export default function UserData({ clickEvent }:ButtonClickEventProps) {
         {!isMobile && <UserEmail />}
       </section>
       <div className={styles.buttons}>
-        <CustomButton buttonType="large" content={isMobile ? '이메일 인증하기' : '다음'} onClick={() => clickEvent()} />
+        <CustomButton buttonSize="large" content={isMobile ? '이메일 인증하기' : '다음'} onClick={() => clickEvent()} />
       </div>
     </>
   );

From 2e4ff9728865b9a3d4c822ed29c1b53ca49d9a70 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Tue, 13 Jun 2023 22:11:54 +0900
Subject: [PATCH 12/52] =?UTF-8?q?feat:=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=ED=99=95=EC=9D=B8=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Signup/component/UserPassword/index.tsx   | 32 +++++++++++++------
 .../Auth/Signup/hooks/useEmailDataCheck.tsx   |  1 -
 .../Auth/Signup/hooks/usePasswordConfirm.ts   | 32 +++++++++++++++++++
 3 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 src/page/Auth/Signup/hooks/usePasswordConfirm.ts

diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index 0ced2169..be9be8d5 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -2,37 +2,51 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { ReactComponent as ShowIcon } from 'assets/svg/auth/show.svg';
 import { ReactComponent as BlindIcon } from 'assets/svg/auth/blind.svg';
 import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
-// import usePasswordConfirm from 'page/Auth/Signup/hooks/usePasswordConfirm';
 import useBooleanState from 'utils/hooks/useBooleanState';
+import usePasswordConfirm from 'page/Auth/Signup/hooks/usePasswordConfirm';
 import styles from './UserPassword.module.scss';
 
 export default function UserPassword() {
   const { isMobile } = useMediaQuery();
   const { value: isBlind, changeValue: changeIsBlind } = useBooleanState(true);
+  const { passwordRegister, passwordConfirmRegister, errors } = usePasswordConfirm();
+  console.log(errors.password?.message);
   return (
     <div className={styles.form}>
       {!isMobile && <span className={styles.form__label}>비밀번호</span>}
       <div className={styles.form__input}>
-        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type={isBlind ? 'password' : 'text'} />
+        <input
+          className={styles.input}
+          placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'}
+          type={isBlind ? 'password' : 'text'}
+          {...passwordRegister}
+        />
         {!isMobile && (
         <button className={styles['form__visible--button']} type="button" onClick={changeIsBlind}>
           {isBlind ? <BlindIcon /> : <ShowIcon />}
         </button>
         )}
-        <span className={styles.form__alert}>* 특수문자 포함 영어와 숫자 조합 6~18 자리</span>
+        {errors.password ? (
+          <div className={styles.form__warn}>
+            <Warn />
+            <span className={styles['form__warn--phrase']}>{errors.password.message}</span>
+          </div>
+        ) : <span className={styles.form__alert}>* 특수문자 포함 영어와 숫자 조합 6~18 자리</span>}
+
       </div>
       <div className={styles.form__input}>
-        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type={isBlind ? 'password' : 'text'} />
+        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type={isBlind ? 'password' : 'text'} {...passwordConfirmRegister} />
         {!isMobile && (
         <button className={styles['form__visible--button']} type="button" onClick={changeIsBlind}>
           {isBlind ? <BlindIcon /> : <ShowIcon />}
         </button>
         )}
-        <div className={styles.form__warn}>
-          <Warn />
-          {/* {errors && <span
-            className={styles['form__warn--phrase']}>{errors.root?.message}</span>} */}
-        </div>
+        {errors.passwordConfirm && (
+          <div className={styles.form__warn}>
+            <Warn />
+            <span className={styles['form__warn--phrase']}>{errors.passwordConfirm.message}</span>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/page/Auth/Signup/hooks/useEmailDataCheck.tsx b/src/page/Auth/Signup/hooks/useEmailDataCheck.tsx
index 7c3235bc..e4b9ce57 100644
--- a/src/page/Auth/Signup/hooks/useEmailDataCheck.tsx
+++ b/src/page/Auth/Signup/hooks/useEmailDataCheck.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { useForm } from 'react-hook-form';
 
 const REG_EX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
diff --git a/src/page/Auth/Signup/hooks/usePasswordConfirm.ts b/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
new file mode 100644
index 00000000..96d5c7e5
--- /dev/null
+++ b/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
@@ -0,0 +1,32 @@
+import { useForm } from 'react-hook-form';
+
+const REG_EX = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,18}$/i;
+
+type PasswordForm = {
+  password: string,
+  passwordConfirm:string
+};
+
+export default function usePasswordConfirm() {
+  const {
+    register,
+    formState: { errors },
+    getValues,
+  } = useForm<PasswordForm>({ mode: 'onBlur' });
+
+  const passwordRegister = register('password', {
+    required: { value: true, message: '비밀번호를 입력해주세요.' },
+    pattern: {
+      value: REG_EX,
+      message: '특수문자 포함 영어와 숫자 조합 6~18 자리를 입력해주세요',
+    },
+  });
+
+  const passwordConfirmRegister = register('passwordConfirm', {
+    required: { value: true, message: '비밀번호 확인을 입력해주세요.' },
+    validate: (password) => password === getValues('password') || '비밀번호가 일치하지 않습니다',
+  });
+  return {
+    passwordRegister, errors, passwordConfirmRegister,
+  };
+}

From 700be742cb17894ec1690cbbb884a17c56ef7257 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Wed, 14 Jun 2023 19:11:31 +0900
Subject: [PATCH 13/52] =?UTF-8?q?refactor:=20console.log=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/page/Auth/Signup/component/UserPassword/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index be9be8d5..9d138c83 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -10,7 +10,6 @@ export default function UserPassword() {
   const { isMobile } = useMediaQuery();
   const { value: isBlind, changeValue: changeIsBlind } = useBooleanState(true);
   const { passwordRegister, passwordConfirmRegister, errors } = usePasswordConfirm();
-  console.log(errors.password?.message);
   return (
     <div className={styles.form}>
       {!isMobile && <span className={styles.form__label}>비밀번호</span>}

From 13b2c822b0e0c6c80de2c2c7f8d2caf00e1ed941 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Wed, 14 Jun 2023 19:31:29 +0900
Subject: [PATCH 14/52] =?UTF-8?q?feat:=20=EC=9D=B8=EC=A6=9D=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EC=9E=85=EB=A0=A5=20=EC=9D=B8=ED=92=8B=20=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EC=A1=B0=EA=B1=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/UserEmail/index.tsx    | 10 ++++++++--
 src/page/Auth/Signup/component/UserPassword/index.tsx |  7 ++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index ecf52b63..5415af37 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -1,5 +1,6 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
+import { useState } from 'react';
 import styles from './UserEmail.module.scss';
 
 type ButtonClickEvent = {
@@ -7,6 +8,7 @@ type ButtonClickEvent = {
 };
 export default function UserEmail({ clickEvent }:ButtonClickEvent) {
   const { isMobile } = useMediaQuery();
+  const [isOpen, setOpen] = useState(false);
   return (
     !isMobile
       ? (
@@ -14,10 +16,14 @@ export default function UserEmail({ clickEvent }:ButtonClickEvent) {
           <span className={styles['email-check__label']}>이메일 인증</span>
           <div className={styles['email-check__input']}>
             <input className={styles.input} type="text" placeholder="이메일 입력@example.com" />
-            <input className={styles.input} type="text" placeholder="인증번호" />
+            {isOpen && <input className={styles.input} type="text" placeholder="인증번호" />}
           </div>
           <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
-          <CustomButton buttonSize="large" content="인증번호 발송" />
+          <CustomButton
+            buttonSize="large"
+            content={isOpen ? '인증번호 재발송' : '인증번호발송'}
+            onClick={() => setOpen(true)}
+          />
         </div>
       )
       : (
diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index 9d138c83..99db4c64 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -11,7 +11,7 @@ export default function UserPassword() {
   const { value: isBlind, changeValue: changeIsBlind } = useBooleanState(true);
   const { passwordRegister, passwordConfirmRegister, errors } = usePasswordConfirm();
   return (
-    <div className={styles.form}>
+    <form className={styles.form}>
       {!isMobile && <span className={styles.form__label}>비밀번호</span>}
       <div className={styles.form__input}>
         <input
@@ -19,6 +19,7 @@ export default function UserPassword() {
           placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'}
           type={isBlind ? 'password' : 'text'}
           {...passwordRegister}
+          autoComplete="off"
         />
         {!isMobile && (
         <button className={styles['form__visible--button']} type="button" onClick={changeIsBlind}>
@@ -34,7 +35,7 @@ export default function UserPassword() {
 
       </div>
       <div className={styles.form__input}>
-        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type={isBlind ? 'password' : 'text'} {...passwordConfirmRegister} />
+        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type={isBlind ? 'password' : 'text'} {...passwordConfirmRegister} autoComplete="off" />
         {!isMobile && (
         <button className={styles['form__visible--button']} type="button" onClick={changeIsBlind}>
           {isBlind ? <BlindIcon /> : <ShowIcon />}
@@ -47,6 +48,6 @@ export default function UserPassword() {
           </div>
         )}
       </div>
-    </div>
+    </form>
   );
 }

From 51274d99e45b65de37c5e660efabdc7903bf8da9 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 26 Jun 2023 15:35:28 +0900
Subject: [PATCH 15/52] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20id=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=9D=B8=ED=92=8B=20type=20=EC=A7=80?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/UserEmail/UserEmail.module.scss       |  5 +++++
 src/page/Auth/Signup/component/UserId/index.tsx     | 13 ++++++++++---
 .../{useEmailDataCheck.tsx => useEmailDataCheck.ts} |  1 +
 src/page/Auth/Signup/types/UserData.ts              |  5 +++++
 src/page/Auth/Signup/view/UserDataPage/index.tsx    | 12 ++++++++++--
 5 files changed, 31 insertions(+), 5 deletions(-)
 rename src/page/Auth/Signup/hooks/{useEmailDataCheck.tsx => useEmailDataCheck.ts} (91%)
 create mode 100644 src/page/Auth/Signup/types/UserData.ts

diff --git a/src/page/Auth/Signup/component/UserEmail/UserEmail.module.scss b/src/page/Auth/Signup/component/UserEmail/UserEmail.module.scss
index 08590f05..49707770 100644
--- a/src/page/Auth/Signup/component/UserEmail/UserEmail.module.scss
+++ b/src/page/Auth/Signup/component/UserEmail/UserEmail.module.scss
@@ -20,6 +20,11 @@
     height: calc(48px - 30px);
     padding: 14px 16px;
 
+    &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+
     @include media.media-breakpoint-down(mobile) {
       width: 100%;
       margin-top: 31px;
diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index 7e448cda..8ddb9bfd 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -1,22 +1,29 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
-import { useState } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { SubmitHandler } from 'react-hook-form';
 import useEmailDuplicateCheck from 'page/Auth/Signup/hooks/useEmailDataCheck';
+import { useState } from 'react';
+import { RegisterData } from 'page/Auth/Signup/types/UserData';
 import styles from './UserId.module.scss';
 
 type EmailForm = {
   email:string
 };
 
-export default function UserId() {
+interface EmailInputProps {
+  setId: (data:RegisterData) => void,
+  userData?: RegisterData
+}
+
+export default function UserId({ setId, userData }:EmailInputProps) {
   const { isMobile } = useMediaQuery();
   const [isUsable, setUsable] = useState<boolean | null>(null);
   const { emailHandleSubmit, errors, emailDuplicateRegister } = useEmailDuplicateCheck();
   const onSubmit:SubmitHandler<EmailForm> = (data) => {
-    console.log('이메일 중복 체크', data);
+    console.log('이메일 중복 체크', data.email);
+    setId({ ...userData, email: data.email });
     setUsable(!isUsable);
   };
   return (
diff --git a/src/page/Auth/Signup/hooks/useEmailDataCheck.tsx b/src/page/Auth/Signup/hooks/useEmailDataCheck.ts
similarity index 91%
rename from src/page/Auth/Signup/hooks/useEmailDataCheck.tsx
rename to src/page/Auth/Signup/hooks/useEmailDataCheck.ts
index e4b9ce57..e5f2c2a9 100644
--- a/src/page/Auth/Signup/hooks/useEmailDataCheck.tsx
+++ b/src/page/Auth/Signup/hooks/useEmailDataCheck.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { useForm } from 'react-hook-form';
 
 const REG_EX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
diff --git a/src/page/Auth/Signup/types/UserData.ts b/src/page/Auth/Signup/types/UserData.ts
new file mode 100644
index 00000000..db08d368
--- /dev/null
+++ b/src/page/Auth/Signup/types/UserData.ts
@@ -0,0 +1,5 @@
+export type RegisterData = {
+  email?: string,
+  password?: string,
+  isAuthentication?: boolean
+};
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 676e4306..136b851e 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -3,6 +3,8 @@ import UserId from 'page/Auth/Signup/component/UserId';
 import UserPassword from 'page/Auth/Signup/component/UserPassword';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
+import { useEffect, useState } from 'react';
+import { RegisterData } from 'page/Auth/Signup/types/UserData';
 import styles from './UserData.module.scss';
 
 type ButtonClickEventProps = {
@@ -10,15 +12,21 @@ type ButtonClickEventProps = {
 };
 export default function UserData({ clickEvent }:ButtonClickEventProps) {
   const { isMobile } = useMediaQuery();
+  const [isDone, setDone] = useState(false);
+  console.log(setDone);
+  const [userData, setData] = useState<RegisterData>();
+  useEffect(() => {
+    console.log(userData, setDone, 'asdf');
+  }, [userData]);
   return (
     <>
       <section className={styles.form}>
-        <UserId />
+        <UserId setId={setData} userData={userData} />
         <UserPassword />
         {!isMobile && <UserEmail />}
       </section>
       <div className={styles.buttons}>
-        <CustomButton buttonSize="large" content={isMobile ? '이메일 인증하기' : '다음'} onClick={() => clickEvent()} />
+        <CustomButton buttonSize="large" content={isMobile ? '이메일 인증하기' : '다음'} onClick={() => clickEvent()} disable={!isDone} />
       </div>
     </>
   );

From 4f626646e4e464c868c3ddd1d05baf656c407bd9 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 26 Jun 2023 16:43:36 +0900
Subject: [PATCH 16/52] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EA=B0=92=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Auth/Signup/component/UserId/index.tsx    |  8 ++-----
 .../Signup/component/UserPassword/index.tsx   | 23 +++++++++++++++----
 .../Auth/Signup/hooks/useEmailDataCheck.ts    |  7 ++----
 .../Auth/Signup/hooks/usePasswordConfirm.ts   |  8 ++++++-
 .../types/{UserData.ts => RegisterData.ts}    |  0
 .../Auth/Signup/view/UserDataPage/index.tsx   |  4 ++--
 6 files changed, 31 insertions(+), 19 deletions(-)
 rename src/page/Auth/Signup/types/{UserData.ts => RegisterData.ts} (100%)

diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index 8ddb9bfd..2e8d03da 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -5,13 +5,9 @@ import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import { SubmitHandler } from 'react-hook-form';
 import useEmailDuplicateCheck from 'page/Auth/Signup/hooks/useEmailDataCheck';
 import { useState } from 'react';
-import { RegisterData } from 'page/Auth/Signup/types/UserData';
+import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 import styles from './UserId.module.scss';
 
-type EmailForm = {
-  email:string
-};
-
 interface EmailInputProps {
   setId: (data:RegisterData) => void,
   userData?: RegisterData
@@ -21,7 +17,7 @@ export default function UserId({ setId, userData }:EmailInputProps) {
   const { isMobile } = useMediaQuery();
   const [isUsable, setUsable] = useState<boolean | null>(null);
   const { emailHandleSubmit, errors, emailDuplicateRegister } = useEmailDuplicateCheck();
-  const onSubmit:SubmitHandler<EmailForm> = (data) => {
+  const onSubmit:SubmitHandler<RegisterData> = (data) => {
     console.log('이메일 중복 체크', data.email);
     setId({ ...userData, email: data.email });
     setUsable(!isUsable);
diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index 99db4c64..f09a0e4d 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -4,14 +4,28 @@ import { ReactComponent as BlindIcon } from 'assets/svg/auth/blind.svg';
 import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import usePasswordConfirm from 'page/Auth/Signup/hooks/usePasswordConfirm';
+import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { SubmitHandler } from 'react-hook-form';
 import styles from './UserPassword.module.scss';
 
-export default function UserPassword() {
+interface PasswordInputProps {
+  setPassword: (data:RegisterData) => void,
+  userData?: RegisterData
+}
+
+export default function UserPassword({ setPassword, userData }:PasswordInputProps) {
   const { isMobile } = useMediaQuery();
   const { value: isBlind, changeValue: changeIsBlind } = useBooleanState(true);
-  const { passwordRegister, passwordConfirmRegister, errors } = usePasswordConfirm();
+  const {
+    passwordRegister, passwordConfirmRegister, errors, handleSubmit,
+  } = usePasswordConfirm();
+  const onSubmit:SubmitHandler<RegisterData> = (data) => {
+    console.log(data, userData, setPassword);
+    setPassword({ ...userData, password: data.password });
+  };
   return (
-    <form className={styles.form}>
+    <div className={styles.form} onChange={handleSubmit(onSubmit)}>
       {!isMobile && <span className={styles.form__label}>비밀번호</span>}
       <div className={styles.form__input}>
         <input
@@ -32,7 +46,6 @@ export default function UserPassword() {
             <span className={styles['form__warn--phrase']}>{errors.password.message}</span>
           </div>
         ) : <span className={styles.form__alert}>* 특수문자 포함 영어와 숫자 조합 6~18 자리</span>}
-
       </div>
       <div className={styles.form__input}>
         <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type={isBlind ? 'password' : 'text'} {...passwordConfirmRegister} autoComplete="off" />
@@ -48,6 +61,6 @@ export default function UserPassword() {
           </div>
         )}
       </div>
-    </form>
+    </div>
   );
 }
diff --git a/src/page/Auth/Signup/hooks/useEmailDataCheck.ts b/src/page/Auth/Signup/hooks/useEmailDataCheck.ts
index e5f2c2a9..4bdde833 100644
--- a/src/page/Auth/Signup/hooks/useEmailDataCheck.ts
+++ b/src/page/Auth/Signup/hooks/useEmailDataCheck.ts
@@ -1,18 +1,15 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useForm } from 'react-hook-form';
+import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 
 const REG_EX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 
-type EmailForm = {
-  email:string
-};
-
 export default function useEmailDuplicateCheck() {
   const {
     register: emailRegister,
     handleSubmit: emailHandleSubmit,
     formState: { errors },
-  } = useForm<EmailForm>();
+  } = useForm<RegisterData>();
   const emailDuplicateRegister = emailRegister('email', {
     required: { value: true, message: '이메일을 입력해주세요.' },
     pattern: {
diff --git a/src/page/Auth/Signup/hooks/usePasswordConfirm.ts b/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
index 96d5c7e5..94f59b8e 100644
--- a/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
+++ b/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { useForm } from 'react-hook-form';
 
 const REG_EX = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,18}$/i;
@@ -12,6 +13,7 @@ export default function usePasswordConfirm() {
     register,
     formState: { errors },
     getValues,
+    handleSubmit,
   } = useForm<PasswordForm>({ mode: 'onBlur' });
 
   const passwordRegister = register('password', {
@@ -24,9 +26,13 @@ export default function usePasswordConfirm() {
 
   const passwordConfirmRegister = register('passwordConfirm', {
     required: { value: true, message: '비밀번호 확인을 입력해주세요.' },
+    pattern: {
+      value: REG_EX,
+      message: '특수문자 포함 영어와 숫자 조합 6~18 자리를 입력해주세요',
+    },
     validate: (password) => password === getValues('password') || '비밀번호가 일치하지 않습니다',
   });
   return {
-    passwordRegister, errors, passwordConfirmRegister,
+    passwordRegister, errors, passwordConfirmRegister, handleSubmit,
   };
 }
diff --git a/src/page/Auth/Signup/types/UserData.ts b/src/page/Auth/Signup/types/RegisterData.ts
similarity index 100%
rename from src/page/Auth/Signup/types/UserData.ts
rename to src/page/Auth/Signup/types/RegisterData.ts
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 136b851e..4ac6321e 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -4,7 +4,7 @@ import UserPassword from 'page/Auth/Signup/component/UserPassword';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import { useEffect, useState } from 'react';
-import { RegisterData } from 'page/Auth/Signup/types/UserData';
+import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 import styles from './UserData.module.scss';
 
 type ButtonClickEventProps = {
@@ -22,7 +22,7 @@ export default function UserData({ clickEvent }:ButtonClickEventProps) {
     <>
       <section className={styles.form}>
         <UserId setId={setData} userData={userData} />
-        <UserPassword />
+        <UserPassword setPassword={setData} userData={userData} />
         {!isMobile && <UserEmail />}
       </section>
       <div className={styles.buttons}>

From 198a82cceabaf291d6410f8c15ea094ada2aca3e Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Sat, 1 Jul 2023 13:56:12 +0900
Subject: [PATCH 17/52] =?UTF-8?q?feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=9D=B8=EC=A6=9D=20=EB=A1=9C=EC=A7=81=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/UserEmail/UserEmail.module.scss | 16 +++++
 .../Auth/Signup/component/UserEmail/index.tsx | 64 +++++++++++++++----
 src/page/Auth/Signup/hooks/useAuthCheck.ts    | 14 ++++
 src/page/Auth/Signup/hooks/useEmailAuth.ts    | 18 ++++++
 .../Auth/Signup/view/UserDataPage/index.tsx   |  2 +-
 5 files changed, 101 insertions(+), 13 deletions(-)
 create mode 100644 src/page/Auth/Signup/hooks/useAuthCheck.ts
 create mode 100644 src/page/Auth/Signup/hooks/useEmailAuth.ts

diff --git a/src/page/Auth/Signup/component/UserEmail/UserEmail.module.scss b/src/page/Auth/Signup/component/UserEmail/UserEmail.module.scss
index 49707770..2b2c9e5e 100644
--- a/src/page/Auth/Signup/component/UserEmail/UserEmail.module.scss
+++ b/src/page/Auth/Signup/component/UserEmail/UserEmail.module.scss
@@ -6,11 +6,27 @@
     font-size: 18px;
   }
 
+  &__warn {
+    display: flex;
+    align-items: center;
+    margin-top: 9px;
+    margin-bottom: 16px;
+    gap: 7px;
+    height: 11px;
+
+    &--phrase {
+      display: block;
+      color: #f05d3d;
+      font-size: 11px;
+    }
+  }
+
   &__input {
     width: calc(100% - 2px);
     display: flex;
     flex-direction: column;
     margin-top: 8px;
+    margin-bottom: 16px;
     gap: 8px;
   }
 
diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index 5415af37..fb2d2149 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -1,30 +1,70 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
+import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import { useState } from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { SubmitHandler } from 'react-hook-form';
+import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
+import useEmailDuplicateCheck from 'page/Auth/Signup/hooks/useEmailDataCheck';
+import useAuthCheck from 'page/Auth/Signup/hooks/useAuthCheck';
 import styles from './UserEmail.module.scss';
 
 type ButtonClickEvent = {
-  clickEvent?: () => void | null
+  clickEvent?: () => void | null,
+  userData?: RegisterData,
+  setAuthenticate?: (data:RegisterData) => void
 };
-export default function UserEmail({ clickEvent }:ButtonClickEvent) {
+export default function UserEmail({ clickEvent, userData, setAuthenticate }:ButtonClickEvent) {
   const { isMobile } = useMediaQuery();
   const [isOpen, setOpen] = useState(false);
+  const { emailHandleSubmit, errors, emailDuplicateRegister } = useEmailDuplicateCheck();
+  const { authInput, checkAuthNumber } = useAuthCheck();
+  const onSubmit:SubmitHandler<RegisterData> = (data) => {
+    setOpen(true);
+    console.log(data.email, setOpen);
+  };
+  const compareAuthNumber = () => {
+    // 인증 번호 입력
+    if (checkAuthNumber('123456')) {
+      if (setAuthenticate) {
+        setAuthenticate({ ...userData, isAuthentication: true });
+      }
+    } else {
+      alert('not match');
+    }
+  };
   return (
     !isMobile
       ? (
-        <div className={styles['email-check']}>
+        <form className={styles['email-check']} onSubmit={emailHandleSubmit(onSubmit)}>
           <span className={styles['email-check__label']}>이메일 인증</span>
           <div className={styles['email-check__input']}>
-            <input className={styles.input} type="text" placeholder="이메일 입력@example.com" />
-            {isOpen && <input className={styles.input} type="text" placeholder="인증번호" />}
+            <input className={styles.input} type="text" placeholder="이메일 입력@example.com" {...emailDuplicateRegister} />
+            {isOpen && <input className={styles.input} type="number" placeholder="인증번호" ref={authInput} />}
           </div>
-          <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
-          <CustomButton
-            buttonSize="large"
-            content={isOpen ? '인증번호 재발송' : '인증번호발송'}
-            onClick={() => setOpen(true)}
-          />
-        </div>
+          {errors.email && (
+            <div className={styles['email-check__warn']}>
+              <Warn />
+              <span className={styles['email-check__warn--phrase']}>{errors.email.message}</span>
+            </div>
+          )}
+          {isOpen ? (
+            <>
+              <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
+              <CustomButton
+                buttonSize="large"
+                content="인증완료"
+                onClick={compareAuthNumber}
+              />
+            </>
+          ) : (
+            <CustomButton
+              buttonSize="large"
+              content="인증번호발송"
+              submit
+            />
+          )}
+        </form>
       )
       : (
         <>
diff --git a/src/page/Auth/Signup/hooks/useAuthCheck.ts b/src/page/Auth/Signup/hooks/useAuthCheck.ts
new file mode 100644
index 00000000..e98d8b63
--- /dev/null
+++ b/src/page/Auth/Signup/hooks/useAuthCheck.ts
@@ -0,0 +1,14 @@
+import { useRef } from 'react';
+
+export default function useAuthCheck() {
+  const authInput = useRef<HTMLInputElement>(null);
+
+  const checkAuthNumber = (authNumber:string) => {
+    if (authInput.current?.value === authNumber) {
+      return true;
+    }
+    return false;
+  };
+
+  return { authInput, checkAuthNumber };
+}
diff --git a/src/page/Auth/Signup/hooks/useEmailAuth.ts b/src/page/Auth/Signup/hooks/useEmailAuth.ts
new file mode 100644
index 00000000..449ae01e
--- /dev/null
+++ b/src/page/Auth/Signup/hooks/useEmailAuth.ts
@@ -0,0 +1,18 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useForm } from 'react-hook-form';
+
+const REG_EX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+
+export default function useEamilAuth() {
+  const { register, handleSubmit, formState: { errors } } = useForm();
+
+  const emailAuthRegister = register('emailAuth', {
+    required: { value: true, message: '이메일을 입력해주세요.' },
+    pattern: {
+      value: REG_EX,
+      message: '유효한 이메일 주소를 입력해주세요.',
+    },
+  });
+
+  return { emailAuthRegister, handleSubmit, errors };
+}
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 4ac6321e..b0e59179 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -23,7 +23,7 @@ export default function UserData({ clickEvent }:ButtonClickEventProps) {
       <section className={styles.form}>
         <UserId setId={setData} userData={userData} />
         <UserPassword setPassword={setData} userData={userData} />
-        {!isMobile && <UserEmail />}
+        {!isMobile && <UserEmail setAuthenticate={setData} userData={userData} />}
       </section>
       <div className={styles.buttons}>
         <CustomButton buttonSize="large" content={isMobile ? '이메일 인증하기' : '다음'} onClick={() => clickEvent()} disable={!isDone} />

From 9135ca1c33c33f18eb0ed9d3948b51c26a951faa Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Sat, 1 Jul 2023 15:10:41 +0900
Subject: [PATCH 18/52] =?UTF-8?q?feat:=20=EB=8B=A4=EC=9D=8C=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Auth/Signup/component/UserEmail/index.tsx |  2 +-
 src/page/Auth/Signup/hooks/useCheckNext.ts    | 21 +++++++++++++++++++
 .../Auth/Signup/view/UserDataPage/index.tsx   | 13 +++++++-----
 3 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 src/page/Auth/Signup/hooks/useCheckNext.ts

diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index fb2d2149..52706ce9 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -21,7 +21,7 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
   const { authInput, checkAuthNumber } = useAuthCheck();
   const onSubmit:SubmitHandler<RegisterData> = (data) => {
     setOpen(true);
-    console.log(data.email, setOpen);
+    console.log(data.email);
   };
   const compareAuthNumber = () => {
     // 인증 번호 입력
diff --git a/src/page/Auth/Signup/hooks/useCheckNext.ts b/src/page/Auth/Signup/hooks/useCheckNext.ts
new file mode 100644
index 00000000..1d4da1fb
--- /dev/null
+++ b/src/page/Auth/Signup/hooks/useCheckNext.ts
@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import { z } from 'zod';
+import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
+
+export default function useCheckNext() {
+  const [isDone, setDone] = useState(false);
+
+  const User = z.object({
+    email: z.string(),
+    password: z.string(),
+    isAuthentication: z.boolean(),
+  });
+
+  const checkNext = (userData:RegisterData) => {
+    if (User.safeParse(userData).success) {
+      setDone(true);
+    }
+  };
+
+  return { isDone, checkNext };
+}
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index b0e59179..5d4b76ad 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -5,19 +5,22 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import { useEffect, useState } from 'react';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
+import useCheckNext from 'page/Auth/Signup/hooks/useCheckNext';
 import styles from './UserData.module.scss';
 
 type ButtonClickEventProps = {
   clickEvent: () => void;
 };
+
 export default function UserData({ clickEvent }:ButtonClickEventProps) {
   const { isMobile } = useMediaQuery();
-  const [isDone, setDone] = useState(false);
-  console.log(setDone);
-  const [userData, setData] = useState<RegisterData>();
+  const [userData, setData] = useState<RegisterData>({});
+  const { isDone, checkNext } = useCheckNext();
+
   useEffect(() => {
-    console.log(userData, setDone, 'asdf');
-  }, [userData]);
+    checkNext(userData);
+  }, [userData, checkNext]);
+
   return (
     <>
       <section className={styles.form}>

From df8e2768bf6189bbddaa3e0bc7a9114c8f7bf760 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Sat, 1 Jul 2023 15:57:59 +0900
Subject: [PATCH 19/52] =?UTF-8?q?feat:=20zod=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=EC=9A=A9=20=EC=8A=A4=ED=82=A4=EB=A7=88=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth/model.ts                            |  8 ++++++++
 src/page/Auth/Signup/hooks/useCheckNext.ts       | 16 +++++-----------
 src/page/Auth/Signup/view/UserDataPage/index.tsx |  6 +++---
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/api/auth/model.ts b/src/api/auth/model.ts
index 4ec802a6..179d4f30 100644
--- a/src/api/auth/model.ts
+++ b/src/api/auth/model.ts
@@ -36,3 +36,11 @@ export const UserResponse = z.object({
 });
 
 export type UserResponse = z.infer<typeof UserResponse>;
+
+export const RegisterParam = z.object({
+  email: z.string(),
+  password: z.string(),
+  isAuthentication: z.boolean(),
+});
+
+export type RegisterParam = z.infer<typeof RegisterParam>;
diff --git a/src/page/Auth/Signup/hooks/useCheckNext.ts b/src/page/Auth/Signup/hooks/useCheckNext.ts
index 1d4da1fb..41eb6f9e 100644
--- a/src/page/Auth/Signup/hooks/useCheckNext.ts
+++ b/src/page/Auth/Signup/hooks/useCheckNext.ts
@@ -1,21 +1,15 @@
 import { useState } from 'react';
-import { z } from 'zod';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
+import { RegisterParam } from 'api/auth/model';
 
-export default function useCheckNext() {
+export default function useCheckNextStep() {
   const [isDone, setDone] = useState(false);
 
-  const User = z.object({
-    email: z.string(),
-    password: z.string(),
-    isAuthentication: z.boolean(),
-  });
-
-  const checkNext = (userData:RegisterData) => {
-    if (User.safeParse(userData).success) {
+  const checkNextStep = (userData:RegisterData) => {
+    if (RegisterParam.safeParse(userData).success) {
       setDone(true);
     }
   };
 
-  return { isDone, checkNext };
+  return { isDone, checkNextStep };
 }
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 5d4b76ad..e100789d 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -15,11 +15,11 @@ type ButtonClickEventProps = {
 export default function UserData({ clickEvent }:ButtonClickEventProps) {
   const { isMobile } = useMediaQuery();
   const [userData, setData] = useState<RegisterData>({});
-  const { isDone, checkNext } = useCheckNext();
+  const { isDone, checkNextStep } = useCheckNext();
 
   useEffect(() => {
-    checkNext(userData);
-  }, [userData, checkNext]);
+    checkNextStep(userData);
+  }, [userData, checkNextStep]);
 
   return (
     <>

From 3cf46d3e7b42134b194fcaba6c5fc25ad9fea6a1 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Wed, 5 Jul 2023 16:29:12 +0900
Subject: [PATCH 20/52] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=EC=9A=A9=20id=EC=9E=85=EB=A0=A5=20=EC=9D=B8=ED=92=8B=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/UserId/index.tsx  | 13 ++++++++++++-
 src/page/Auth/Signup/index.tsx                   |  2 +-
 src/page/Auth/Signup/view/UserDataPage/index.tsx |  1 +
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index 2e8d03da..f4cb9bc0 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -22,8 +22,19 @@ export default function UserId({ setId, userData }:EmailInputProps) {
     setId({ ...userData, email: data.email });
     setUsable(!isUsable);
   };
+  const mobileSubmit:SubmitHandler<RegisterData> = (data) => {
+    if (isMobile) {
+      console.log('이메일 중복 체크', data.email);
+      setId({ ...userData, email: data.email });
+      setUsable(!isUsable);
+    }
+  };
   return (
-    <form className={styles.form} onSubmit={emailHandleSubmit(onSubmit)}>
+    <form
+      className={styles.form}
+      onChange={emailHandleSubmit(mobileSubmit)}
+      onSubmit={emailHandleSubmit(onSubmit)}
+    >
       {!isMobile && <span className={styles.form__label}>아이디</span>}
       <div className={styles['input-block']}>
         <input
diff --git a/src/page/Auth/Signup/index.tsx b/src/page/Auth/Signup/index.tsx
index f9950c28..b6cb0a4b 100644
--- a/src/page/Auth/Signup/index.tsx
+++ b/src/page/Auth/Signup/index.tsx
@@ -13,8 +13,8 @@ import Complete from './view/CompletePage';
 
 export default function Signup() {
   const [step, setStep] = useState(0);
-
   const { isMobile } = useMediaQuery();
+
   useEffect(() => {
     setStep(0);
   }, [isMobile]);
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index e100789d..fe368832 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -19,6 +19,7 @@ export default function UserData({ clickEvent }:ButtonClickEventProps) {
 
   useEffect(() => {
     checkNextStep(userData);
+    console.log(userData);
   }, [userData, checkNextStep]);
 
   return (

From f9cb54d3982a425e4544c06593b0adbd69eb28c8 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Thu, 6 Jul 2023 18:23:05 +0900
Subject: [PATCH 21/52] =?UTF-8?q?refactor:=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=20=EB=B7=B0=EC=99=80=20pc=20=EB=B7=B0=EC=9D=98=20step=20?=
 =?UTF-8?q?=EB=8B=A8=EC=9C=84=20=EA=B2=B0=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/index.tsx                | 60 +++++++++++--------
 .../Signup/view/TermsOfServicePage/index.tsx  |  2 +-
 .../Auth/Signup/view/UserDataPage/index.tsx   | 48 +++++++++++----
 src/store/useStepStore.ts                     |  2 +
 4 files changed, 75 insertions(+), 37 deletions(-)

diff --git a/src/page/Auth/Signup/index.tsx b/src/page/Auth/Signup/index.tsx
index b6cb0a4b..1e35ce9a 100644
--- a/src/page/Auth/Signup/index.tsx
+++ b/src/page/Auth/Signup/index.tsx
@@ -4,7 +4,7 @@ import { ReactComponent as Logo } from 'assets/svg/auth/koin-logo.svg';
 import { ReactComponent as Back } from 'assets/svg/common/back-arrow.svg';
 import { Link } from 'react-router-dom';
 import ProgressBar from 'component/common/ProgressBar';
-import UserEmail from './component/UserEmail';
+import useStepStore from 'store/useStepStore';
 import OwnerData from './view/OwnerDataPage';
 import TermsOfService from './view/TermsOfServicePage';
 import UserData from './view/UserDataPage';
@@ -12,24 +12,35 @@ import styles from './SignUp.module.scss';
 import Complete from './view/CompletePage';
 
 export default function Signup() {
-  const [step, setStep] = useState(0);
+  const {
+    step, setStep, increaseStep, decreaseStep,
+  } = useStepStore();
   const { isMobile } = useMediaQuery();
-
+  const [registerStep, setRegisterStep] = useState(0);
   useEffect(() => {
     setStep(0);
-  }, [isMobile]);
+    setRegisterStep(0);
+  }, [isMobile, setStep]);
+  useEffect(() => {
+    console.log(step);
+    console.log(registerStep);
+  }, [step, registerStep]);
 
-  const PC_STEPS = [
-    <TermsOfService clickEvent={() => setStep(step + 1)} />,
-    <UserData clickEvent={() => setStep(step + 1)} />,
-    <OwnerData clickEvent={() => setStep(step + 1)} />,
-  ];
+  const goNext = () => {
+    console.log('asdf');
+    increaseStep();
+    setRegisterStep(registerStep + 1);
+  };
 
-  const MOBILE_STEPS = [
-    <TermsOfService clickEvent={() => setStep(step + 1)} />,
-    <UserData clickEvent={() => setStep(step + 1)} />,
-    <UserEmail clickEvent={() => setStep(step + 1)} />,
-    <OwnerData clickEvent={() => setStep(step + 1)} />,
+  const goPrev = () => {
+    decreaseStep();
+    setRegisterStep(registerStep - 1);
+  };
+
+  const STEPS = [
+    <TermsOfService clickEvent={goNext} />,
+    <UserData clickEvent={goNext} />,
+    <OwnerData clickEvent={goNext} />,
   ];
 
   return (
@@ -37,29 +48,28 @@ export default function Signup() {
       {!isMobile
         ? (
           <>
-            {step < 3 && (
+            {registerStep < 3 && (
               <section className={styles.section}>
                 <Logo className={styles.section__logo} />
                 <div className={styles.section__steps}>
-                  {PC_STEPS[step]}
+                  {STEPS[registerStep]}
                 </div>
               </section>
             )}
-            {step === 3 && <Complete />}
+            {registerStep === 3 && <Complete />}
           </>
         )
         : (
           <>
-
-            {step < 4 && (
+            {registerStep < 3 && (
             <>
-              {step === 0 ? (
+              {registerStep === 0 ? (
                 <Link to="/login" className={styles['back-button']}>
                   <Back />
                 </Link>
               ) : (
                 <div className={styles['back-button']}>
-                  <Back onClick={() => setStep(step - 1)} />
+                  <Back onClick={goPrev} />
                 </div>
               )}
               <section className={styles.section}>
@@ -69,17 +79,17 @@ export default function Signup() {
                   회원가입
                 </span>
                 <div className={styles.section__steps}>
-                  {step < 4 && (
+                  {registerStep < 3 && (
                     <>
-                      {step > 0 && <ProgressBar step={step} />}
-                      {MOBILE_STEPS[step]}
+                      {registerStep > 0 && <ProgressBar step={step} />}
+                      {STEPS[registerStep]}
                     </>
                   )}
                 </div>
               </section>
             </>
             )}
-            {step === 4 && <Complete />}
+            {registerStep === 3 && <Complete />}
           </>
         )}
     </div>
diff --git a/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx b/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx
index 9426d2a6..a1b7d8e4 100644
--- a/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx
+++ b/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx
@@ -3,12 +3,12 @@ import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import TERMS from 'page/Auth/Signup/constant/terms';
 import { useEffect, useState } from 'react';
+
 import styles from './TermsOfService.module.scss';
 
 type ButtonClickEventProps = {
   clickEvent: () => void;
 };
-
 const useTermCheck = () => {
   const [isUserTermAgree, setUserTermAgree] = useState(false);
   const [isKoinTermAgree, setKoinTermAgree] = useState(false);
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index fe368832..5da0f4d3 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -6,32 +6,58 @@ import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import { useEffect, useState } from 'react';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 import useCheckNext from 'page/Auth/Signup/hooks/useCheckNext';
+import useStepStore from 'store/useStepStore';
 import styles from './UserData.module.scss';
 
 type ButtonClickEventProps = {
   clickEvent: () => void;
 };
-
 export default function UserData({ clickEvent }:ButtonClickEventProps) {
   const { isMobile } = useMediaQuery();
   const [userData, setData] = useState<RegisterData>({});
   const { isDone, checkNextStep } = useCheckNext();
+  const { increaseStep } = useStepStore();
+  const [registerStep, setRegisterStep] = useState(0);
 
   useEffect(() => {
     checkNextStep(userData);
     console.log(userData);
   }, [userData, checkNextStep]);
 
+  const goEmailAuth = () => {
+    setRegisterStep(1);
+    increaseStep();
+  };
   return (
-    <>
-      <section className={styles.form}>
-        <UserId setId={setData} userData={userData} />
-        <UserPassword setPassword={setData} userData={userData} />
-        {!isMobile && <UserEmail setAuthenticate={setData} userData={userData} />}
-      </section>
-      <div className={styles.buttons}>
-        <CustomButton buttonSize="large" content={isMobile ? '이메일 인증하기' : '다음'} onClick={() => clickEvent()} disable={!isDone} />
-      </div>
-    </>
+    !isMobile
+      ? (
+        <>
+          <section className={styles.form}>
+            <UserId setId={setData} userData={userData} />
+            <UserPassword setPassword={setData} userData={userData} />
+            <UserEmail setAuthenticate={setData} userData={userData} />
+          </section>
+          <div className={styles.buttons}>
+            <CustomButton buttonSize="large" content="다음" onClick={clickEvent} disable={!isDone} />
+          </div>
+        </>
+      )
+      : (
+        <>
+          <section className={styles.form}>
+            {registerStep === 0 ? (
+              <>
+                <UserId setId={setData} userData={userData} />
+                <UserPassword setPassword={setData} userData={userData} />
+              </>
+            ) : <UserEmail setAuthenticate={setData} userData={userData} />}
+          </section>
+          <div className={styles.buttons}>
+            {registerStep === 0
+              ? <CustomButton buttonSize="large" content="이메일 인증하기" onClick={goEmailAuth} />
+              : <CustomButton buttonSize="large" content="다음" onClick={clickEvent} />}
+          </div>
+        </>
+      )
   );
 }
diff --git a/src/store/useStepStore.ts b/src/store/useStepStore.ts
index 5c4fe2df..b344a3f4 100644
--- a/src/store/useStepStore.ts
+++ b/src/store/useStepStore.ts
@@ -4,11 +4,13 @@ interface StepStore {
   step: number;
   setStep: (step: number) => void;
   decreaseStep: () => void;
+  increaseStep: () => void
 }
 const useStepStore = create<StepStore>((set) => ({
   step: 0,
   setStep: (step) => set({ step }),
   decreaseStep: () => set((state) => ({ step: state.step - 1 })),
+  increaseStep: () => set((state) => ({ step: state.step + 1 })),
 }));
 
 export default useStepStore;

From 32902f7abfa495de5ebdd5e1e8133fec7791a10c Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Thu, 6 Jul 2023 19:17:52 +0900
Subject: [PATCH 22/52] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B7=B0=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/index.tsx                   | 12 ++++++++++--
 src/page/Auth/Signup/view/UserDataPage/index.tsx |  1 -
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/page/Auth/Signup/index.tsx b/src/page/Auth/Signup/index.tsx
index 1e35ce9a..1ec6f8a7 100644
--- a/src/page/Auth/Signup/index.tsx
+++ b/src/page/Auth/Signup/index.tsx
@@ -33,8 +33,16 @@ export default function Signup() {
   };
 
   const goPrev = () => {
-    decreaseStep();
-    setRegisterStep(registerStep - 1);
+    if (registerStep === 2) {
+      setRegisterStep(1);
+      setStep(1);
+    } else if (step === 2) {
+      setStep(1);
+      setRegisterStep(1);
+    } else {
+      setRegisterStep(registerStep - 1);
+      decreaseStep();
+    }
   };
 
   const STEPS = [
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 5da0f4d3..44ec3fd4 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -21,7 +21,6 @@ export default function UserData({ clickEvent }:ButtonClickEventProps) {
 
   useEffect(() => {
     checkNextStep(userData);
-    console.log(userData);
   }, [userData, checkNextStep]);
 
   const goEmailAuth = () => {

From 87ca52ffae5dda42efd6e2c38db601a681c93cc8 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Thu, 6 Jul 2023 19:19:34 +0900
Subject: [PATCH 23/52] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B7=B0=20id=20=EC=A4=91=EB=B3=B5=ED=99=95=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/UserId/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index f4cb9bc0..54ebd7e1 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -44,7 +44,7 @@ export default function UserId({ setId, userData }:EmailInputProps) {
           placeholder={isMobile ? '이메일' : '이메일 형식 아이디 입력(필수)'}
           {...emailDuplicateRegister}
         />
-        <CustomButton content="중복확인" buttonSize="small" submit />
+        {!isMobile && <CustomButton content="중복확인" buttonSize="small" submit />}
       </div>
       {errors.email && (
       <div className={styles.form__warn}>

From 50dbd2d57d95f693fa94bc8d445df860e5924a10 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Fri, 7 Jul 2023 18:36:08 +0900
Subject: [PATCH 24/52] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B7=B0=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20=EC=9D=B8=EC=A6=9D?=
 =?UTF-8?q?=EB=B2=88=ED=98=B8=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth/model.ts                         |  5 +++-
 .../Auth/Signup/component/UserEmail/index.tsx | 26 +++++++++++-------
 .../{useCheckNext.ts => useCheckNextStep.ts}  |  1 +
 .../Auth/Signup/view/UserDataPage/index.tsx   | 27 +++++++++++++++----
 4 files changed, 43 insertions(+), 16 deletions(-)
 rename src/page/Auth/Signup/hooks/{useCheckNext.ts => useCheckNextStep.ts} (93%)

diff --git a/src/api/auth/model.ts b/src/api/auth/model.ts
index 2434834b..b2223f75 100644
--- a/src/api/auth/model.ts
+++ b/src/api/auth/model.ts
@@ -56,7 +56,10 @@ export type UserResponse = z.infer<typeof UserResponse>;
 export const RegisterParam = z.object({
   email: z.string(),
   password: z.string(),
-  isAuthentication: z.boolean(),
+  isAuthentication: z.boolean().refine((value) => value === true, {
+    message: 'isAuth는 true여야 합니다.',
+    path: ['isAuth'],
+  }),
 });
 
 export type RegisterParam = z.infer<typeof RegisterParam>;
diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index 52706ce9..93526f87 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -11,8 +11,8 @@ import styles from './UserEmail.module.scss';
 
 type ButtonClickEvent = {
   clickEvent?: () => void | null,
-  userData?: RegisterData,
-  setAuthenticate?: (data:RegisterData) => void
+  userData: RegisterData,
+  setAuthenticate: (data:RegisterData) => void
 };
 export default function UserEmail({ clickEvent, userData, setAuthenticate }:ButtonClickEvent) {
   const { isMobile } = useMediaQuery();
@@ -24,13 +24,13 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
     console.log(data.email);
   };
   const compareAuthNumber = () => {
-    // 인증 번호 입력
-    if (checkAuthNumber('123456')) {
-      if (setAuthenticate) {
+    if (authInput.current?.value.length === 6) {
+      // 인증 번호 입력
+      if (checkAuthNumber('123456')) {
         setAuthenticate({ ...userData, isAuthentication: true });
+      } else {
+        setAuthenticate({ ...userData, isAuthentication: false });
       }
-    } else {
-      alert('not match');
     }
   };
   return (
@@ -40,7 +40,7 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
           <span className={styles['email-check__label']}>이메일 인증</span>
           <div className={styles['email-check__input']}>
             <input className={styles.input} type="text" placeholder="이메일 입력@example.com" {...emailDuplicateRegister} />
-            {isOpen && <input className={styles.input} type="number" placeholder="인증번호" ref={authInput} />}
+            {isOpen && <input className={styles.input} type="text" pattern="\d*" maxLength={6} placeholder="인증번호" ref={authInput} />}
           </div>
           {errors.email && (
             <div className={styles['email-check__warn']}>
@@ -70,14 +70,20 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
         <>
           <div className={styles['email-check']}>
             <span className={styles['email-check__phrase']}>
-              <span className={styles['email-check__phrase--user-email']}>abcd123@koreatech.ac.kr</span>
+              <span className={styles['email-check__phrase--user-email']}>{userData.email}</span>
             &nbsp;으로
               <br />
               발송된 인증번호 6자리를 입력해 주세요
             </span>
             <div className={styles['email-check__input']}>
-              <input className={styles.input} type="password" placeholder="인증번호 입력" />
+              <input className={styles.input} type="password" pattern="\d*" maxLength={6} placeholder="인증번호 입력" onChange={compareAuthNumber} ref={authInput} />
             </div>
+            {userData?.isAuthentication === undefined && (
+            <div className={styles['email-check__warn']}>
+              <Warn />
+              <span className={styles['email-check__warn--phrase']}>인증번호가 일치하지 않습니다.</span>
+            </div>
+            )}
             <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
           </div>
           <div className={styles.buttons}>
diff --git a/src/page/Auth/Signup/hooks/useCheckNext.ts b/src/page/Auth/Signup/hooks/useCheckNextStep.ts
similarity index 93%
rename from src/page/Auth/Signup/hooks/useCheckNext.ts
rename to src/page/Auth/Signup/hooks/useCheckNextStep.ts
index 41eb6f9e..123d5508 100644
--- a/src/page/Auth/Signup/hooks/useCheckNext.ts
+++ b/src/page/Auth/Signup/hooks/useCheckNextStep.ts
@@ -6,6 +6,7 @@ export default function useCheckNextStep() {
   const [isDone, setDone] = useState(false);
 
   const checkNextStep = (userData:RegisterData) => {
+    console.log(userData);
     if (RegisterParam.safeParse(userData).success) {
       setDone(true);
     }
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 44ec3fd4..087cbc8c 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -5,28 +5,45 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import { useEffect, useState } from 'react';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
-import useCheckNext from 'page/Auth/Signup/hooks/useCheckNext';
 import useStepStore from 'store/useStepStore';
+// eslint-disable-next-line import/no-named-as-default
+import useCheckNextStep from 'page/Auth/Signup/hooks/useCheckNextStep';
+import { RegisterParam } from 'api/auth/model';
 import styles from './UserData.module.scss';
 
 type ButtonClickEventProps = {
   clickEvent: () => void;
 };
+
+const useCheckEmailStep = () => {
+  const [isFilled, setIsFilled] = useState(false);
+  const checkEmailStep = (userData:RegisterData) => {
+    if (RegisterParam.pick({ email: true, password: true }).safeParse(userData).success) {
+      setIsFilled(true);
+    }
+  };
+  return { isFilled, checkEmailStep };
+};
 export default function UserData({ clickEvent }:ButtonClickEventProps) {
   const { isMobile } = useMediaQuery();
   const [userData, setData] = useState<RegisterData>({});
-  const { isDone, checkNextStep } = useCheckNext();
+  const { isDone, checkNextStep } = useCheckNextStep();
   const { increaseStep } = useStepStore();
   const [registerStep, setRegisterStep] = useState(0);
+  const { isFilled, checkEmailStep } = useCheckEmailStep();
 
   useEffect(() => {
+    if (isMobile) {
+      checkEmailStep(userData);
+    }
     checkNextStep(userData);
-  }, [userData, checkNextStep]);
+  }, [userData, checkNextStep, isMobile, checkEmailStep]);
 
   const goEmailAuth = () => {
     setRegisterStep(1);
     increaseStep();
   };
+
   return (
     !isMobile
       ? (
@@ -53,8 +70,8 @@ export default function UserData({ clickEvent }:ButtonClickEventProps) {
           </section>
           <div className={styles.buttons}>
             {registerStep === 0
-              ? <CustomButton buttonSize="large" content="이메일 인증하기" onClick={goEmailAuth} />
-              : <CustomButton buttonSize="large" content="다음" onClick={clickEvent} />}
+              ? <CustomButton buttonSize="large" content="이메일 인증하기" onClick={goEmailAuth} disable={!isFilled} />
+              : <CustomButton buttonSize="large" content="다음" onClick={clickEvent} disable={!isDone} />}
           </div>
         </>
       )

From 42bc0001c183a5de3802c19d9c550523bc9464dc Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Fri, 7 Jul 2023 18:55:46 +0900
Subject: [PATCH 25/52] =?UTF-8?q?refactor:=20console.log=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/UserId/index.tsx       | 5 +----
 src/page/Auth/Signup/component/UserPassword/index.tsx | 1 -
 src/page/Auth/Signup/hooks/useCheckNextStep.ts        | 1 -
 src/page/Auth/Signup/index.tsx                        | 3 ---
 4 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index 54ebd7e1..340a5845 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -18,15 +18,12 @@ export default function UserId({ setId, userData }:EmailInputProps) {
   const [isUsable, setUsable] = useState<boolean | null>(null);
   const { emailHandleSubmit, errors, emailDuplicateRegister } = useEmailDuplicateCheck();
   const onSubmit:SubmitHandler<RegisterData> = (data) => {
-    console.log('이메일 중복 체크', data.email);
     setId({ ...userData, email: data.email });
     setUsable(!isUsable);
   };
   const mobileSubmit:SubmitHandler<RegisterData> = (data) => {
     if (isMobile) {
-      console.log('이메일 중복 체크', data.email);
-      setId({ ...userData, email: data.email });
-      setUsable(!isUsable);
+      onSubmit(data);
     }
   };
   return (
diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index f09a0e4d..21c22f1a 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -21,7 +21,6 @@ export default function UserPassword({ setPassword, userData }:PasswordInputProp
     passwordRegister, passwordConfirmRegister, errors, handleSubmit,
   } = usePasswordConfirm();
   const onSubmit:SubmitHandler<RegisterData> = (data) => {
-    console.log(data, userData, setPassword);
     setPassword({ ...userData, password: data.password });
   };
   return (
diff --git a/src/page/Auth/Signup/hooks/useCheckNextStep.ts b/src/page/Auth/Signup/hooks/useCheckNextStep.ts
index 123d5508..41eb6f9e 100644
--- a/src/page/Auth/Signup/hooks/useCheckNextStep.ts
+++ b/src/page/Auth/Signup/hooks/useCheckNextStep.ts
@@ -6,7 +6,6 @@ export default function useCheckNextStep() {
   const [isDone, setDone] = useState(false);
 
   const checkNextStep = (userData:RegisterData) => {
-    console.log(userData);
     if (RegisterParam.safeParse(userData).success) {
       setDone(true);
     }
diff --git a/src/page/Auth/Signup/index.tsx b/src/page/Auth/Signup/index.tsx
index 1ec6f8a7..ae673378 100644
--- a/src/page/Auth/Signup/index.tsx
+++ b/src/page/Auth/Signup/index.tsx
@@ -22,12 +22,9 @@ export default function Signup() {
     setRegisterStep(0);
   }, [isMobile, setStep]);
   useEffect(() => {
-    console.log(step);
-    console.log(registerStep);
   }, [step, registerStep]);
 
   const goNext = () => {
-    console.log('asdf');
     increaseStep();
     setRegisterStep(registerStep + 1);
   };

From d0dd400b0f343a23420029a2df95cc07e440a6bb Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Fri, 7 Jul 2023 19:13:04 +0900
Subject: [PATCH 26/52] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B7=B0=20=EC=9D=B8=EC=A6=9D=EB=B2=88=ED=98=B8=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=92=A4=EB=A1=9C?=
 =?UTF-8?q?=EA=B0=80=EA=B8=B0=20=EC=95=88=EB=90=98=EB=8A=94=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/UserEmail/index.tsx | 2 +-
 src/page/Auth/Signup/index.tsx                     | 1 +
 src/page/Auth/Signup/view/UserDataPage/index.tsx   | 8 +++++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index 93526f87..45a6000e 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -78,7 +78,7 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
             <div className={styles['email-check__input']}>
               <input className={styles.input} type="password" pattern="\d*" maxLength={6} placeholder="인증번호 입력" onChange={compareAuthNumber} ref={authInput} />
             </div>
-            {userData?.isAuthentication === undefined && (
+            {!userData?.isAuthentication && (
             <div className={styles['email-check__warn']}>
               <Warn />
               <span className={styles['email-check__warn--phrase']}>인증번호가 일치하지 않습니다.</span>
diff --git a/src/page/Auth/Signup/index.tsx b/src/page/Auth/Signup/index.tsx
index ae673378..17a59c1e 100644
--- a/src/page/Auth/Signup/index.tsx
+++ b/src/page/Auth/Signup/index.tsx
@@ -22,6 +22,7 @@ export default function Signup() {
     setRegisterStep(0);
   }, [isMobile, setStep]);
   useEffect(() => {
+    console.log(registerStep, step);
   }, [step, registerStep]);
 
   const goNext = () => {
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 087cbc8c..0284514b 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -28,10 +28,16 @@ export default function UserData({ clickEvent }:ButtonClickEventProps) {
   const { isMobile } = useMediaQuery();
   const [userData, setData] = useState<RegisterData>({});
   const { isDone, checkNextStep } = useCheckNextStep();
-  const { increaseStep } = useStepStore();
+  const { increaseStep, step } = useStepStore();
   const [registerStep, setRegisterStep] = useState(0);
   const { isFilled, checkEmailStep } = useCheckEmailStep();
 
+  useEffect(() => {
+    if (step === 1) {
+      setRegisterStep(0);
+    }
+  }, [step]);
+
   useEffect(() => {
     if (isMobile) {
       checkEmailStep(userData);

From c8bed6126147b85b768d0cb2a3ba2d2b1bb903c2 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Fri, 7 Jul 2023 19:23:07 +0900
Subject: [PATCH 27/52] =?UTF-8?q?feat:=20=EC=9D=B8=EC=A6=9D=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EC=9E=85=EB=A0=A5=20=EC=8B=A4=ED=8C=A8=20=EC=8B=9C?=
 =?UTF-8?q?=20=EC=97=90=EB=9F=AC=20=EB=AC=B8=EA=B5=AC=20=EC=B6=9C=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth/model.ts                              | 5 +----
 src/page/Auth/Signup/component/UserEmail/index.tsx | 2 +-
 src/page/Auth/Signup/hooks/useCheckNextStep.ts     | 2 ++
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/api/auth/model.ts b/src/api/auth/model.ts
index b2223f75..06088255 100644
--- a/src/api/auth/model.ts
+++ b/src/api/auth/model.ts
@@ -56,10 +56,7 @@ export type UserResponse = z.infer<typeof UserResponse>;
 export const RegisterParam = z.object({
   email: z.string(),
   password: z.string(),
-  isAuthentication: z.boolean().refine((value) => value === true, {
-    message: 'isAuth는 true여야 합니다.',
-    path: ['isAuth'],
-  }),
+  isAuthentication: z.boolean().refine((value) => value === true),
 });
 
 export type RegisterParam = z.infer<typeof RegisterParam>;
diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index 45a6000e..fa2d6bbf 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -78,7 +78,7 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
             <div className={styles['email-check__input']}>
               <input className={styles.input} type="password" pattern="\d*" maxLength={6} placeholder="인증번호 입력" onChange={compareAuthNumber} ref={authInput} />
             </div>
-            {!userData?.isAuthentication && (
+            {userData.isAuthentication !== undefined && !userData.isAuthentication && (
             <div className={styles['email-check__warn']}>
               <Warn />
               <span className={styles['email-check__warn--phrase']}>인증번호가 일치하지 않습니다.</span>
diff --git a/src/page/Auth/Signup/hooks/useCheckNextStep.ts b/src/page/Auth/Signup/hooks/useCheckNextStep.ts
index 41eb6f9e..f59a62c0 100644
--- a/src/page/Auth/Signup/hooks/useCheckNextStep.ts
+++ b/src/page/Auth/Signup/hooks/useCheckNextStep.ts
@@ -8,6 +8,8 @@ export default function useCheckNextStep() {
   const checkNextStep = (userData:RegisterData) => {
     if (RegisterParam.safeParse(userData).success) {
       setDone(true);
+    } else {
+      setDone(false);
     }
   };
 

From 4da1621490b4cc2d0338340282cd9e88706e6dda Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Sun, 9 Jul 2023 20:35:19 +0900
Subject: [PATCH 28/52] =?UTF-8?q?feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=A4=91=EB=B3=B5=20=ED=99=95=EC=9D=B8=20api=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0=20=EB=B0=8F=20=EA=B4=80=EB=A0=A8=20=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=ED=85=80=20=ED=9B=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth/model.ts                         |  8 ----
 src/api/register/index.ts                     |  8 ++++
 src/api/register/model.ts                     | 19 ++++++++
 .../Auth/Signup/component/UserEmail/index.tsx |  2 +-
 .../Auth/Signup/component/UserId/index.tsx    | 44 +++++++------------
 .../Signup/hooks/useCheckEmailDuplicate.ts    | 33 ++++++++++++++
 .../Auth/Signup/hooks/useCheckNextStep.ts     |  2 +-
 ...eEmailDataCheck.ts => useValidateEmail.ts} |  2 +-
 .../Auth/Signup/view/UserDataPage/index.tsx   |  3 +-
 src/query/register.ts                         |  9 ++++
 10 files changed, 89 insertions(+), 41 deletions(-)
 create mode 100644 src/api/register/index.ts
 create mode 100644 src/api/register/model.ts
 create mode 100644 src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts
 rename src/page/Auth/Signup/hooks/{useEmailDataCheck.ts => useValidateEmail.ts} (93%)
 create mode 100644 src/query/register.ts

diff --git a/src/api/auth/model.ts b/src/api/auth/model.ts
index 06088255..9e8b2a7c 100644
--- a/src/api/auth/model.ts
+++ b/src/api/auth/model.ts
@@ -52,11 +52,3 @@ export const UserResponse = z.object({
 });
 
 export type UserResponse = z.infer<typeof UserResponse>;
-
-export const RegisterParam = z.object({
-  email: z.string(),
-  password: z.string(),
-  isAuthentication: z.boolean().refine((value) => value === true),
-});
-
-export type RegisterParam = z.infer<typeof RegisterParam>;
diff --git a/src/api/register/index.ts b/src/api/register/index.ts
new file mode 100644
index 00000000..194d609d
--- /dev/null
+++ b/src/api/register/index.ts
@@ -0,0 +1,8 @@
+import { client } from 'api';
+
+const getEmailDuplicate = async (param: string) => {
+  const { status } = await client.get(`/user/check/email?address=${param}`);
+  return status;
+};
+
+export default getEmailDuplicate;
diff --git a/src/api/register/model.ts b/src/api/register/model.ts
new file mode 100644
index 00000000..b05787d8
--- /dev/null
+++ b/src/api/register/model.ts
@@ -0,0 +1,19 @@
+import { z } from 'zod';
+
+export const EmailParam = z.object({
+  email: z.string(),
+});
+
+export type EmailParam = z.infer<typeof EmailParam>;
+
+export const EmailDuplicateCheckResponse = z.object({});
+
+export type EmailDuplicateCheckResponse = z.infer<typeof EmailDuplicateCheckResponse>;
+
+export const RegisterParam = z.object({
+  email: z.string(),
+  password: z.string(),
+  isAuthentication: z.boolean().refine((value) => value === true),
+});
+
+export type RegisterParam = z.infer<typeof RegisterParam>;
diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index fa2d6bbf..3e8ac292 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { SubmitHandler } from 'react-hook-form';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
-import useEmailDuplicateCheck from 'page/Auth/Signup/hooks/useEmailDataCheck';
+import useEmailDuplicateCheck from 'page/Auth/Signup/hooks/useValidateEmail';
 import useAuthCheck from 'page/Auth/Signup/hooks/useAuthCheck';
 import styles from './UserEmail.module.scss';
 
diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index 340a5845..df00bf78 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -1,35 +1,24 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { SubmitHandler } from 'react-hook-form';
-import useEmailDuplicateCheck from 'page/Auth/Signup/hooks/useEmailDataCheck';
-import { useState } from 'react';
+import useValidateEmail from 'page/Auth/Signup/hooks/useValidateEmail';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
+import useCheckEmailDuplicate from 'page/Auth/Signup/hooks/useCheckEmailDuplicate';
 import styles from './UserId.module.scss';
 
 interface EmailInputProps {
   setId: (data:RegisterData) => void,
-  userData?: RegisterData
+  userData: RegisterData
 }
 
 export default function UserId({ setId, userData }:EmailInputProps) {
   const { isMobile } = useMediaQuery();
-  const [isUsable, setUsable] = useState<boolean | null>(null);
-  const { emailHandleSubmit, errors, emailDuplicateRegister } = useEmailDuplicateCheck();
-  const onSubmit:SubmitHandler<RegisterData> = (data) => {
-    setId({ ...userData, email: data.email });
-    setUsable(!isUsable);
-  };
-  const mobileSubmit:SubmitHandler<RegisterData> = (data) => {
-    if (isMobile) {
-      onSubmit(data);
-    }
-  };
+  const { emailHandleSubmit, errors, emailDuplicateRegister } = useValidateEmail();
+  const { status, onSubmit, onMobileSubmit } = useCheckEmailDuplicate(userData, setId, isMobile);
   return (
     <form
       className={styles.form}
-      onChange={emailHandleSubmit(mobileSubmit)}
+      onChange={emailHandleSubmit(onMobileSubmit)}
       onSubmit={emailHandleSubmit(onSubmit)}
     >
       {!isMobile && <span className={styles.form__label}>아이디</span>}
@@ -43,24 +32,21 @@ export default function UserId({ setId, userData }:EmailInputProps) {
         />
         {!isMobile && <CustomButton content="중복확인" buttonSize="small" submit />}
       </div>
-      {errors.email && (
-      <div className={styles.form__warn}>
-        <Warn />
-        <span className={styles['form__warn--phrase']}>{errors.email.message}</span>
-      </div>
-      )}
-      { (isUsable !== null && !errors.email)
+      {errors.email ? (
+        <div className={styles.form__warn}>
+          <Warn />
+          <span className={styles['form__warn--phrase']}>{errors.email.message}</span>
+        </div>
+      ) : (status === 'error' && !errors.email)
             && (
-            <>
-              {isUsable && <span className={styles.form__alert}>사용하실 수 있는 아이디 입니다.</span>}
-              {!isUsable && (
               <div className={styles.form__warn}>
                 <Warn />
                 <span className={styles['form__warn--phrase']}>이미 가입된 이메일입니다.</span>
               </div>
-              )}
-            </>
             )}
+      {(status === 'success' && !errors.email)
+      && <span className={styles.form__alert}>사용하실 수 있는 아이디 입니다.</span>}
+
     </form>
   );
 }
diff --git a/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts b/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts
new file mode 100644
index 00000000..abbabbf9
--- /dev/null
+++ b/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts
@@ -0,0 +1,33 @@
+import useCheckDuplicate from 'query/register';
+import { useEffect, useState } from 'react';
+import { SubmitHandler } from 'react-hook-form';
+import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
+
+export default function useCheckEmailDuplicate(
+  userData:RegisterData,
+  setId: (data:RegisterData) => void,
+  isMobile: boolean,
+) {
+  const [email, setEmail] = useState<string>('');
+  const { status, refetch } = useCheckDuplicate(email);
+
+  const onSubmit:SubmitHandler<RegisterData> = (data) => {
+    setEmail(() => (data.email ? data.email : ''));
+  };
+  const onMobileSubmit:SubmitHandler<RegisterData> = (data) => {
+    if (isMobile) {
+      onSubmit(data);
+    }
+  };
+  useEffect(() => {
+    if (email !== '') {
+      refetch();
+    }
+  }, [email, refetch]);
+  useEffect(() => {
+    if (status === 'success' && userData.email !== email) {
+      setId({ ...userData, email });
+    }
+  }, [status, setId, email, userData]);
+  return { status, onSubmit, onMobileSubmit };
+}
diff --git a/src/page/Auth/Signup/hooks/useCheckNextStep.ts b/src/page/Auth/Signup/hooks/useCheckNextStep.ts
index f59a62c0..b8b32a28 100644
--- a/src/page/Auth/Signup/hooks/useCheckNextStep.ts
+++ b/src/page/Auth/Signup/hooks/useCheckNextStep.ts
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
-import { RegisterParam } from 'api/auth/model';
+import { RegisterParam } from 'api/register/model';
 
 export default function useCheckNextStep() {
   const [isDone, setDone] = useState(false);
diff --git a/src/page/Auth/Signup/hooks/useEmailDataCheck.ts b/src/page/Auth/Signup/hooks/useValidateEmail.ts
similarity index 93%
rename from src/page/Auth/Signup/hooks/useEmailDataCheck.ts
rename to src/page/Auth/Signup/hooks/useValidateEmail.ts
index 4bdde833..efadbd37 100644
--- a/src/page/Auth/Signup/hooks/useEmailDataCheck.ts
+++ b/src/page/Auth/Signup/hooks/useValidateEmail.ts
@@ -4,7 +4,7 @@ import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 
 const REG_EX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 
-export default function useEmailDuplicateCheck() {
+export default function useValidateEmail() {
   const {
     register: emailRegister,
     handleSubmit: emailHandleSubmit,
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 0284514b..930c7941 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -8,7 +8,7 @@ import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 import useStepStore from 'store/useStepStore';
 // eslint-disable-next-line import/no-named-as-default
 import useCheckNextStep from 'page/Auth/Signup/hooks/useCheckNextStep';
-import { RegisterParam } from 'api/auth/model';
+import { RegisterParam } from 'api/register/model';
 import styles from './UserData.module.scss';
 
 type ButtonClickEventProps = {
@@ -43,6 +43,7 @@ export default function UserData({ clickEvent }:ButtonClickEventProps) {
       checkEmailStep(userData);
     }
     checkNextStep(userData);
+    console.log(userData);
   }, [userData, checkNextStep, isMobile, checkEmailStep]);
 
   const goEmailAuth = () => {
diff --git a/src/query/register.ts b/src/query/register.ts
new file mode 100644
index 00000000..eaa85379
--- /dev/null
+++ b/src/query/register.ts
@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import getEmailDuplicate from 'api/register';
+
+const useCheckDuplicate = (email:string) => {
+  const { status, refetch } = useQuery(['emailDuplicateCheck', email], () => getEmailDuplicate(email), { enabled: false });
+  return { status, refetch };
+};
+
+export default useCheckDuplicate;

From 8a831f12445704e4b4b2604ae33149abb2bf7255 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Sun, 9 Jul 2023 21:31:41 +0900
Subject: [PATCH 29/52] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=20=ED=9B=84=20?=
 =?UTF-8?q?=EB=8B=A4=EB=A5=B8=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EC=8B=9C=EC=97=90=20=EC=97=90=EB=9F=AC=20=EB=AC=B8?=
 =?UTF-8?q?=EA=B5=AC=20=EC=97=86=EC=96=B4=EC=A7=80=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Auth/Signup/component/UserId/index.tsx    | 30 +++++++++++--------
 .../Signup/hooks/useCheckEmailDuplicate.ts    |  4 ++-
 .../Auth/Signup/hooks/useValidateEmail.ts     |  5 ++--
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index df00bf78..444fd91a 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -13,12 +13,17 @@ interface EmailInputProps {
 
 export default function UserId({ setId, userData }:EmailInputProps) {
   const { isMobile } = useMediaQuery();
-  const { emailHandleSubmit, errors, emailDuplicateRegister } = useValidateEmail();
-  const { status, onSubmit, onMobileSubmit } = useCheckEmailDuplicate(userData, setId, isMobile);
+  const {
+    emailHandleSubmit, errors, emailDuplicateRegister, watch,
+  } = useValidateEmail();
+  const {
+    status, onSubmit, onMobileSubmit, email,
+  } = useCheckEmailDuplicate(userData, setId, isMobile);
+
   return (
     <form
       className={styles.form}
-      onChange={emailHandleSubmit(onMobileSubmit)}
+      onChange={isMobile ? emailHandleSubmit(onMobileSubmit) : () => {}}
       onSubmit={emailHandleSubmit(onSubmit)}
     >
       {!isMobile && <span className={styles.form__label}>아이디</span>}
@@ -32,19 +37,20 @@ export default function UserId({ setId, userData }:EmailInputProps) {
         />
         {!isMobile && <CustomButton content="중복확인" buttonSize="small" submit />}
       </div>
-      {errors.email ? (
+      {errors.email && (
         <div className={styles.form__warn}>
           <Warn />
           <span className={styles['form__warn--phrase']}>{errors.email.message}</span>
         </div>
-      ) : (status === 'error' && !errors.email)
-            && (
-              <div className={styles.form__warn}>
-                <Warn />
-                <span className={styles['form__warn--phrase']}>이미 가입된 이메일입니다.</span>
-              </div>
-            )}
-      {(status === 'success' && !errors.email)
+      )}
+      {watch().email === email && !errors.email && status === 'error'
+      && (
+      <div className={styles.form__warn}>
+        <Warn />
+        <span className={styles['form__warn--phrase']}>이미 가입된 이메일입니다.</span>
+      </div>
+      )}
+      {watch().email === email && !errors.email && status === 'success'
       && <span className={styles.form__alert}>사용하실 수 있는 아이디 입니다.</span>}
 
     </form>
diff --git a/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts b/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts
index abbabbf9..319386d0 100644
--- a/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts
+++ b/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts
@@ -29,5 +29,7 @@ export default function useCheckEmailDuplicate(
       setId({ ...userData, email });
     }
   }, [status, setId, email, userData]);
-  return { status, onSubmit, onMobileSubmit };
+  return {
+    status, onSubmit, onMobileSubmit, email,
+  };
 }
diff --git a/src/page/Auth/Signup/hooks/useValidateEmail.ts b/src/page/Auth/Signup/hooks/useValidateEmail.ts
index efadbd37..327287b9 100644
--- a/src/page/Auth/Signup/hooks/useValidateEmail.ts
+++ b/src/page/Auth/Signup/hooks/useValidateEmail.ts
@@ -9,7 +9,8 @@ export default function useValidateEmail() {
     register: emailRegister,
     handleSubmit: emailHandleSubmit,
     formState: { errors },
-  } = useForm<RegisterData>();
+    watch,
+  } = useForm<RegisterData>({ mode: 'all' });
   const emailDuplicateRegister = emailRegister('email', {
     required: { value: true, message: '이메일을 입력해주세요.' },
     pattern: {
@@ -18,6 +19,6 @@ export default function useValidateEmail() {
     },
   });
   return {
-    emailHandleSubmit, errors, emailDuplicateRegister,
+    emailHandleSubmit, errors, emailDuplicateRegister, watch,
   };
 }

From 2ce1a99c1fb99757130e69a174f1e39c11ced7f0 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 10 Jul 2023 16:40:32 +0900
Subject: [PATCH 30/52] =?UTF-8?q?feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=9D=B8=EC=A6=9D=20=EC=9A=94=EC=B2=AD=20api=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/register/index.ts                     | 15 +++++-
 src/api/register/model.ts                     | 19 +++++--
 .../Auth/Signup/component/UserEmail/index.tsx | 50 ++++++++-----------
 src/page/Auth/Signup/hooks/useAuthCheck.ts    | 45 +++++++++++++----
 .../Signup/hooks/useCheckEmailDuplicate.ts    |  2 +-
 src/page/Auth/Signup/hooks/useEmailAuth.ts    | 18 -------
 .../Auth/Signup/hooks/useValidateEmail.ts     |  2 +-
 .../Auth/Signup/view/UserDataPage/index.tsx   |  6 +--
 src/query/register.ts                         | 30 +++++++++--
 9 files changed, 117 insertions(+), 70 deletions(-)
 delete mode 100644 src/page/Auth/Signup/hooks/useEmailAuth.ts

diff --git a/src/api/register/index.ts b/src/api/register/index.ts
index 194d609d..cfc71343 100644
--- a/src/api/register/index.ts
+++ b/src/api/register/index.ts
@@ -1,8 +1,19 @@
 import { client } from 'api';
+import {
+  AuthCodeParam, AuthCodeResponse, EmailAuthParam, EmailAuthResponse,
+} from './model';
 
-const getEmailDuplicate = async (param: string) => {
+export const getEmailDuplicate = async (param: string) => {
   const { status } = await client.get(`/user/check/email?address=${param}`);
   return status;
 };
 
-export default getEmailDuplicate;
+export const getEmailAuthCode = async (param: EmailAuthParam) => {
+  const { data } = await client.post<EmailAuthResponse>('/owners/verification/email', param);
+  return EmailAuthResponse.parse(data);
+};
+
+export const verificationAuthCode = async (param:AuthCodeParam) => {
+  const { data } = await client.post<AuthCodeResponse>('/owners/verification/code', param);
+  return AuthCodeResponse.parse(data);
+};
diff --git a/src/api/register/model.ts b/src/api/register/model.ts
index b05787d8..14dbd0b3 100644
--- a/src/api/register/model.ts
+++ b/src/api/register/model.ts
@@ -1,14 +1,23 @@
 import { z } from 'zod';
 
-export const EmailParam = z.object({
-  email: z.string(),
+export const EmailAuthParam = z.object({
+  address: z.string().email(),
 });
+export type EmailAuthParam = z.infer<typeof EmailAuthParam>;
 
-export type EmailParam = z.infer<typeof EmailParam>;
+export const EmailAuthResponse = z.string();
+export type EmailAuthResponse = z.infer<typeof EmailAuthResponse>;
 
-export const EmailDuplicateCheckResponse = z.object({});
+export const AuthCodeParam = z.object({
+  address: z.string().email(),
+  certificatoin_code: z.string(),
+});
+export type AuthCodeParam = z.infer<typeof AuthCodeParam>;
 
-export type EmailDuplicateCheckResponse = z.infer<typeof EmailDuplicateCheckResponse>;
+export const AuthCodeResponse = z.object({
+  token: z.string(),
+});
+export type AuthCodeResponse = z.infer<typeof AuthCodeResponse>;
 
 export const RegisterParam = z.object({
   email: z.string(),
diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index 3e8ac292..02e3fee4 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -1,11 +1,8 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
-import { useState } from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { SubmitHandler } from 'react-hook-form';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
-import useEmailDuplicateCheck from 'page/Auth/Signup/hooks/useValidateEmail';
+import useValidateEmail from 'page/Auth/Signup/hooks/useValidateEmail';
 import useAuthCheck from 'page/Auth/Signup/hooks/useAuthCheck';
 import styles from './UserEmail.module.scss';
 
@@ -16,45 +13,42 @@ type ButtonClickEvent = {
 };
 export default function UserEmail({ clickEvent, userData, setAuthenticate }:ButtonClickEvent) {
   const { isMobile } = useMediaQuery();
-  const [isOpen, setOpen] = useState(false);
-  const { emailHandleSubmit, errors, emailDuplicateRegister } = useEmailDuplicateCheck();
-  const { authInput, checkAuthNumber } = useAuthCheck();
-  const onSubmit:SubmitHandler<RegisterData> = (data) => {
-    setOpen(true);
-    console.log(data.email);
-  };
-  const compareAuthNumber = () => {
-    if (authInput.current?.value.length === 6) {
-      // 인증 번호 입력
-      if (checkAuthNumber('123456')) {
-        setAuthenticate({ ...userData, isAuthentication: true });
-      } else {
-        setAuthenticate({ ...userData, isAuthentication: false });
-      }
-    }
-  };
+  const {
+    emailHandleSubmit, errors, emailDuplicateRegister, watch,
+  } = useValidateEmail();
+  const {
+    isOpen, onSubmit, errorMessage, email, refetch,
+  } = useAuthCheck(userData.email ? userData.email : '', isMobile);
+  console.log(setAuthenticate, errorMessage);
   return (
     !isMobile
       ? (
         <form className={styles['email-check']} onSubmit={emailHandleSubmit(onSubmit)}>
           <span className={styles['email-check__label']}>이메일 인증</span>
           <div className={styles['email-check__input']}>
-            <input className={styles.input} type="text" placeholder="이메일 입력@example.com" {...emailDuplicateRegister} />
-            {isOpen && <input className={styles.input} type="text" pattern="\d*" maxLength={6} placeholder="인증번호" ref={authInput} />}
+            <input className={styles.input} type="text" placeholder="이메일 입력@example.com" {...emailDuplicateRegister} disabled={isOpen} />
+            {isOpen && <input className={styles.input} type="text" pattern="\d*" maxLength={6} placeholder="인증번호" />}
           </div>
-          {errors.email && (
+          {(errors.email) && (
             <div className={styles['email-check__warn']}>
               <Warn />
-              <span className={styles['email-check__warn--phrase']}>{errors.email.message}</span>
+              {errors.email && <span className={styles['email-check__warn--phrase']}>{errors.email.message}</span>}
             </div>
           )}
+          {(!errors.email && errorMessage && email === watch().email)
+          && (
+          <div className={styles['email-check__warn']}>
+            <Warn />
+            <span className={styles['email-check__warn--phrase']}>{errorMessage}</span>
+          </div>
+          )}
           {isOpen ? (
             <>
               <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
+
               <CustomButton
                 buttonSize="large"
                 content="인증완료"
-                onClick={compareAuthNumber}
               />
             </>
           ) : (
@@ -76,7 +70,7 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
               발송된 인증번호 6자리를 입력해 주세요
             </span>
             <div className={styles['email-check__input']}>
-              <input className={styles.input} type="password" pattern="\d*" maxLength={6} placeholder="인증번호 입력" onChange={compareAuthNumber} ref={authInput} />
+              <input className={styles.input} type="password" pattern="\d*" maxLength={6} placeholder="인증번호 입력" />
             </div>
             {userData.isAuthentication !== undefined && !userData.isAuthentication && (
             <div className={styles['email-check__warn']}>
@@ -87,7 +81,7 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
             <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
           </div>
           <div className={styles.buttons}>
-            <CustomButton buttonSize="mobile" content="재발송" onClick={() => { alert('재발송'); }} />
+            <CustomButton buttonSize="mobile" content="재발송" onClick={refetch} />
             <CustomButton buttonSize="mobile" content="다음" onClick={clickEvent} />
           </div>
         </>
diff --git a/src/page/Auth/Signup/hooks/useAuthCheck.ts b/src/page/Auth/Signup/hooks/useAuthCheck.ts
index e98d8b63..89488bcf 100644
--- a/src/page/Auth/Signup/hooks/useAuthCheck.ts
+++ b/src/page/Auth/Signup/hooks/useAuthCheck.ts
@@ -1,14 +1,41 @@
-import { useRef } from 'react';
+import { useGenerateAuthCode } from 'query/register';
+import { useEffect, useState } from 'react';
+import { SubmitHandler } from 'react-hook-form';
+import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 
-export default function useAuthCheck() {
-  const authInput = useRef<HTMLInputElement>(null);
+export default function useAuthCheck(userEmail:string, isMobile:boolean) {
+  const [email, setEmail] = useState('');
+  const [errorMessage, setMessage] = useState<string | null>('');
+  const [isOpen, setOpen] = useState(false);
+  const {
+    status, refetch, isError, error,
+  } = useGenerateAuthCode(email);
 
-  const checkAuthNumber = (authNumber:string) => {
-    if (authInput.current?.value === authNumber) {
-      return true;
-    }
-    return false;
+  const onSubmit:SubmitHandler<RegisterData> = (data) => {
+    setEmail(() => (data.email ? data.email : ''));
   };
 
-  return { authInput, checkAuthNumber };
+  useEffect(() => {
+    if (isMobile) {
+      setEmail(userEmail);
+    }
+  }, [isMobile, userEmail]);
+
+  useEffect(() => {
+    if (email !== '') {
+      refetch();
+    }
+  }, [email, refetch]);
+
+  useEffect(() => {
+    if (status === 'success') {
+      setOpen(true);
+    } else {
+      setMessage(Object(error).response?.data.message);
+    }
+  }, [status, isError, error]);
+
+  return {
+    onSubmit, isOpen, errorMessage, email, refetch,
+  };
 }
diff --git a/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts b/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts
index 319386d0..f065f589 100644
--- a/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts
+++ b/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts
@@ -1,4 +1,4 @@
-import useCheckDuplicate from 'query/register';
+import { useCheckDuplicate } from 'query/register';
 import { useEffect, useState } from 'react';
 import { SubmitHandler } from 'react-hook-form';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
diff --git a/src/page/Auth/Signup/hooks/useEmailAuth.ts b/src/page/Auth/Signup/hooks/useEmailAuth.ts
deleted file mode 100644
index 449ae01e..00000000
--- a/src/page/Auth/Signup/hooks/useEmailAuth.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { useForm } from 'react-hook-form';
-
-const REG_EX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
-
-export default function useEamilAuth() {
-  const { register, handleSubmit, formState: { errors } } = useForm();
-
-  const emailAuthRegister = register('emailAuth', {
-    required: { value: true, message: '이메일을 입력해주세요.' },
-    pattern: {
-      value: REG_EX,
-      message: '유효한 이메일 주소를 입력해주세요.',
-    },
-  });
-
-  return { emailAuthRegister, handleSubmit, errors };
-}
diff --git a/src/page/Auth/Signup/hooks/useValidateEmail.ts b/src/page/Auth/Signup/hooks/useValidateEmail.ts
index 327287b9..b873f867 100644
--- a/src/page/Auth/Signup/hooks/useValidateEmail.ts
+++ b/src/page/Auth/Signup/hooks/useValidateEmail.ts
@@ -10,7 +10,7 @@ export default function useValidateEmail() {
     handleSubmit: emailHandleSubmit,
     formState: { errors },
     watch,
-  } = useForm<RegisterData>({ mode: 'all' });
+  } = useForm<RegisterData>();
   const emailDuplicateRegister = emailRegister('email', {
     required: { value: true, message: '이메일을 입력해주세요.' },
     pattern: {
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 930c7941..18b93c5a 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -76,9 +76,9 @@ export default function UserData({ clickEvent }:ButtonClickEventProps) {
             ) : <UserEmail setAuthenticate={setData} userData={userData} />}
           </section>
           <div className={styles.buttons}>
-            {registerStep === 0
-              ? <CustomButton buttonSize="large" content="이메일 인증하기" onClick={goEmailAuth} disable={!isFilled} />
-              : <CustomButton buttonSize="large" content="다음" onClick={clickEvent} disable={!isDone} />}
+            {registerStep === 0 && <CustomButton buttonSize="large" content="이메일 인증하기" onClick={goEmailAuth} disable={!isFilled} />}
+            {registerStep > 1 && <CustomButton buttonSize="large" content="다음" onClick={clickEvent} disable={!isDone} />}
+
           </div>
         </>
       )
diff --git a/src/query/register.ts b/src/query/register.ts
index eaa85379..46f15b28 100644
--- a/src/query/register.ts
+++ b/src/query/register.ts
@@ -1,9 +1,33 @@
 import { useQuery } from '@tanstack/react-query';
-import getEmailDuplicate from 'api/register';
+import { getEmailAuthCode, getEmailDuplicate, verificationAuthCode } from 'api/register';
 
-const useCheckDuplicate = (email:string) => {
+export const useCheckDuplicate = (email:string) => {
   const { status, refetch } = useQuery(['emailDuplicateCheck', email], () => getEmailDuplicate(email), { enabled: false });
   return { status, refetch };
 };
 
-export default useCheckDuplicate;
+export const useGenerateAuthCode = (email:string) => {
+  const {
+    status, refetch, isError, error,
+  } = useQuery(
+    ['genrateEmailAuthCode', email],
+    () => getEmailAuthCode({ address: email }),
+    {
+      enabled: false,
+    },
+  );
+  return {
+    status, refetch, isError, error,
+  };
+};
+
+export const useVerificationAuthCode = (code:string, email:string) => {
+  const { data, refetch } = useQuery(
+    ['verificationCode', code],
+    () => verificationAuthCode({ certificatoin_code: code, address: email }),
+    {
+      enabled: false,
+    },
+  );
+  return { data, refetch };
+};

From 883d33a669853061f605a6bc80d7e24b9657a9a3 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 10 Jul 2023 19:43:36 +0900
Subject: [PATCH 31/52] =?UTF-8?q?feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=9D=B8=EC=A6=9D=20api=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/register/model.ts                     |  2 +-
 .../Auth/Signup/component/UserEmail/index.tsx | 19 +++++++--
 src/page/Auth/Signup/hooks/useVerification.ts | 40 +++++++++++++++++++
 src/query/register.ts                         | 13 ++++--
 4 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 src/page/Auth/Signup/hooks/useVerification.ts

diff --git a/src/api/register/model.ts b/src/api/register/model.ts
index 14dbd0b3..d1ffdc52 100644
--- a/src/api/register/model.ts
+++ b/src/api/register/model.ts
@@ -10,7 +10,7 @@ export type EmailAuthResponse = z.infer<typeof EmailAuthResponse>;
 
 export const AuthCodeParam = z.object({
   address: z.string().email(),
-  certificatoin_code: z.string(),
+  certification_code: z.string(),
 });
 export type AuthCodeParam = z.infer<typeof AuthCodeParam>;
 
diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index 02e3fee4..5a22bd04 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -4,6 +4,7 @@ import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 import useValidateEmail from 'page/Auth/Signup/hooks/useValidateEmail';
 import useAuthCheck from 'page/Auth/Signup/hooks/useAuthCheck';
+import useVerification from 'page/Auth/Signup/hooks/useVerification';
 import styles from './UserEmail.module.scss';
 
 type ButtonClickEvent = {
@@ -11,6 +12,7 @@ type ButtonClickEvent = {
   userData: RegisterData,
   setAuthenticate: (data:RegisterData) => void
 };
+
 export default function UserEmail({ clickEvent, userData, setAuthenticate }:ButtonClickEvent) {
   const { isMobile } = useMediaQuery();
   const {
@@ -19,7 +21,11 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
   const {
     isOpen, onSubmit, errorMessage, email, refetch,
   } = useAuthCheck(userData.email ? userData.email : '', isMobile);
-  console.log(setAuthenticate, errorMessage);
+  const {
+    verificationCode,
+    codeInput, errorMessage: verificateError,
+  } = useVerification(email, setAuthenticate, userData);
+
   return (
     !isMobile
       ? (
@@ -27,14 +33,20 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
           <span className={styles['email-check__label']}>이메일 인증</span>
           <div className={styles['email-check__input']}>
             <input className={styles.input} type="text" placeholder="이메일 입력@example.com" {...emailDuplicateRegister} disabled={isOpen} />
-            {isOpen && <input className={styles.input} type="text" pattern="\d*" maxLength={6} placeholder="인증번호" />}
+            {isOpen && <input className={styles.input} type="text" pattern="\d*" maxLength={6} placeholder="인증번호" ref={codeInput} disabled={userData.isAuthentication} />}
           </div>
           {(errors.email) && (
             <div className={styles['email-check__warn']}>
               <Warn />
-              {errors.email && <span className={styles['email-check__warn--phrase']}>{errors.email.message}</span>}
+              <span className={styles['email-check__warn--phrase']}>{errors.email.message}</span>
             </div>
           )}
+          {verificateError && (
+          <div className={styles['email-check__warn']}>
+            <Warn />
+            <span className={styles['email-check__warn--phrase']}>{verificateError}</span>
+          </div>
+          )}
           {(!errors.email && errorMessage && email === watch().email)
           && (
           <div className={styles['email-check__warn']}>
@@ -49,6 +61,7 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
               <CustomButton
                 buttonSize="large"
                 content="인증완료"
+                onClick={verificationCode}
               />
             </>
           ) : (
diff --git a/src/page/Auth/Signup/hooks/useVerification.ts b/src/page/Auth/Signup/hooks/useVerification.ts
new file mode 100644
index 00000000..1395b26f
--- /dev/null
+++ b/src/page/Auth/Signup/hooks/useVerification.ts
@@ -0,0 +1,40 @@
+import { useVerificationAuthCode } from 'query/register';
+import { useEffect, useRef, useState } from 'react';
+import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
+
+export default function useVerification(
+  eamil:string,
+  setAuthenticate:(data:RegisterData) => void,
+  userData:RegisterData,
+) {
+  const [code, setCode] = useState('');
+  const [errorMessage, setMessage] = useState(null);
+  const codeInput = useRef<HTMLInputElement>(null);
+  const {
+    status, refetch, isError, error,
+  } = useVerificationAuthCode(code, eamil);
+
+  const verificationCode = () => {
+    if (codeInput.current) {
+      setCode(codeInput.current.value);
+    }
+  };
+
+  useEffect(() => {
+    if (code !== '') {
+      refetch();
+    }
+  }, [code, refetch]);
+
+  useEffect(() => {
+    if (status === 'success' && !userData.isAuthentication) {
+      setAuthenticate({ ...userData, isAuthentication: true });
+      setMessage(null);
+    } else if (isError) {
+      setMessage(Object(error).response.data.violations[0]);
+    }
+  }, [status, userData, setAuthenticate, error, isError]);
+  return {
+    isError, error, verificationCode, status, codeInput, errorMessage,
+  };
+}
diff --git a/src/query/register.ts b/src/query/register.ts
index 46f15b28..5fc84440 100644
--- a/src/query/register.ts
+++ b/src/query/register.ts
@@ -22,12 +22,19 @@ export const useGenerateAuthCode = (email:string) => {
 };
 
 export const useVerificationAuthCode = (code:string, email:string) => {
-  const { data, refetch } = useQuery(
+  const {
+    status, refetch, isError, error,
+  } = useQuery(
     ['verificationCode', code],
-    () => verificationAuthCode({ certificatoin_code: code, address: email }),
+    () => verificationAuthCode({ certification_code: code, address: email }),
     {
       enabled: false,
+      onSuccess: (response) => {
+        if (response.token) { sessionStorage.setItem('upload_token', response.token); }
+      },
     },
   );
-  return { data, refetch };
+  return {
+    status, refetch, isError, error,
+  };
 };

From 0bf246e094a92dd2a4c523a6cad7428ce9366c10 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 10 Jul 2023 20:24:06 +0900
Subject: [PATCH 32/52] =?UTF-8?q?feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=9D=B8=EC=A6=9D=20=EC=99=84=EB=A3=8C=20=EC=8B=9C=20=EC=9D=B8?=
 =?UTF-8?q?=EC=A6=9D=20=EB=B2=84=ED=8A=BC=20=EB=B9=84=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/UserEmail/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index 5a22bd04..3ae166ac 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -62,6 +62,7 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
                 buttonSize="large"
                 content="인증완료"
                 onClick={verificationCode}
+                disable={userData.isAuthentication}
               />
             </>
           ) : (

From 3608c3997ce2ebc64dd4da2ac7a61baff899092b Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 10 Jul 2023 23:07:21 +0900
Subject: [PATCH 33/52] =?UTF-8?q?feat:=20upload=20token=EC=9D=84=20?=
 =?UTF-8?q?=EC=9C=84=ED=95=9C=20uploadTokenStore=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/query/register.ts    |  6 +++++-
 src/store/uploadToken.ts | 15 +++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 src/store/uploadToken.ts

diff --git a/src/query/register.ts b/src/query/register.ts
index 5fc84440..19566c52 100644
--- a/src/query/register.ts
+++ b/src/query/register.ts
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { getEmailAuthCode, getEmailDuplicate, verificationAuthCode } from 'api/register';
+import useUploadToken from 'store/uploadToken';
 
 export const useCheckDuplicate = (email:string) => {
   const { status, refetch } = useQuery(['emailDuplicateCheck', email], () => getEmailDuplicate(email), { enabled: false });
@@ -22,6 +23,7 @@ export const useGenerateAuthCode = (email:string) => {
 };
 
 export const useVerificationAuthCode = (code:string, email:string) => {
+  const { setUploadToken } = useUploadToken();
   const {
     status, refetch, isError, error,
   } = useQuery(
@@ -30,7 +32,9 @@ export const useVerificationAuthCode = (code:string, email:string) => {
     {
       enabled: false,
       onSuccess: (response) => {
-        if (response.token) { sessionStorage.setItem('upload_token', response.token); }
+        if (response.token) {
+          setUploadToken(response.token);
+        }
       },
     },
   );
diff --git a/src/store/uploadToken.ts b/src/store/uploadToken.ts
new file mode 100644
index 00000000..af92d7ca
--- /dev/null
+++ b/src/store/uploadToken.ts
@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface UploadToken {
+  uploadToken:string | null,
+  setUploadToken:(token:string) => void,
+  removeToken:()=>void
+}
+
+const useUploadToken = create<UploadToken>((set) => ({
+  uploadToken: null,
+  setUploadToken: (token) => set({ uploadToken: token }),
+  removeToken: () => set({ uploadToken: null }),
+}));
+
+export default useUploadToken;

From ad1699e51f45ab5a7f6d3933c2da98fa30e95bd8 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 10 Jul 2023 23:41:27 +0900
Subject: [PATCH 34/52] =?UTF-8?q?refactor:=20=EC=97=90=EB=9F=AC=EB=A9=94?=
 =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ErrorMessage/ErrorMessage.module.scss     | 14 +++++++++
 .../Signup/component/ErrorMessage/index.tsx   | 15 +++++++++
 .../Auth/Signup/component/UserEmail/index.tsx | 31 +++----------------
 .../Auth/Signup/component/UserId/index.tsx    | 23 ++++----------
 .../Signup/component/UserPassword/index.tsx   | 15 ++-------
 .../Signup/hooks/useCheckEmailDuplicate.ts    |  9 ++++--
 src/query/register.ts                         |  4 +--
 7 files changed, 51 insertions(+), 60 deletions(-)
 create mode 100644 src/page/Auth/Signup/component/ErrorMessage/ErrorMessage.module.scss
 create mode 100644 src/page/Auth/Signup/component/ErrorMessage/index.tsx

diff --git a/src/page/Auth/Signup/component/ErrorMessage/ErrorMessage.module.scss b/src/page/Auth/Signup/component/ErrorMessage/ErrorMessage.module.scss
new file mode 100644
index 00000000..d0bd1294
--- /dev/null
+++ b/src/page/Auth/Signup/component/ErrorMessage/ErrorMessage.module.scss
@@ -0,0 +1,14 @@
+.warn {
+  display: flex;
+  align-items: center;
+  margin-top: 9px;
+  margin-bottom: 16px;
+  gap: 7px;
+  height: 11px;
+
+  &--phrase {
+    display: block;
+    color: #f05d3d;
+    font-size: 11px;
+  }
+}
diff --git a/src/page/Auth/Signup/component/ErrorMessage/index.tsx b/src/page/Auth/Signup/component/ErrorMessage/index.tsx
new file mode 100644
index 00000000..0c350bce
--- /dev/null
+++ b/src/page/Auth/Signup/component/ErrorMessage/index.tsx
@@ -0,0 +1,15 @@
+import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
+import styles from './ErrorMessage.module.scss';
+
+interface ErrorMEssageProps {
+  message: string | undefined
+}
+
+export default function ErrorMessage({ message }:ErrorMEssageProps) {
+  return (
+    <div className={styles.warn}>
+      <Warn />
+      <span className={styles['warn--phrase']}>{message}</span>
+    </div>
+  );
+}
diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index 3ae166ac..812e1614 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -1,10 +1,10 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
-import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 import useValidateEmail from 'page/Auth/Signup/hooks/useValidateEmail';
 import useAuthCheck from 'page/Auth/Signup/hooks/useAuthCheck';
 import useVerification from 'page/Auth/Signup/hooks/useVerification';
+import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
 import styles from './UserEmail.module.scss';
 
 type ButtonClickEvent = {
@@ -35,29 +35,13 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
             <input className={styles.input} type="text" placeholder="이메일 입력@example.com" {...emailDuplicateRegister} disabled={isOpen} />
             {isOpen && <input className={styles.input} type="text" pattern="\d*" maxLength={6} placeholder="인증번호" ref={codeInput} disabled={userData.isAuthentication} />}
           </div>
-          {(errors.email) && (
-            <div className={styles['email-check__warn']}>
-              <Warn />
-              <span className={styles['email-check__warn--phrase']}>{errors.email.message}</span>
-            </div>
-          )}
-          {verificateError && (
-          <div className={styles['email-check__warn']}>
-            <Warn />
-            <span className={styles['email-check__warn--phrase']}>{verificateError}</span>
-          </div>
-          )}
+          { errors.email && <ErrorMessage message={errors.email.message} />}
           {(!errors.email && errorMessage && email === watch().email)
-          && (
-          <div className={styles['email-check__warn']}>
-            <Warn />
-            <span className={styles['email-check__warn--phrase']}>{errorMessage}</span>
-          </div>
-          )}
+           && <ErrorMessage message={errorMessage} />}
+          { verificateError && <ErrorMessage message={verificateError} />}
           {isOpen ? (
             <>
               <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
-
               <CustomButton
                 buttonSize="large"
                 content="인증완료"
@@ -86,12 +70,7 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
             <div className={styles['email-check__input']}>
               <input className={styles.input} type="password" pattern="\d*" maxLength={6} placeholder="인증번호 입력" />
             </div>
-            {userData.isAuthentication !== undefined && !userData.isAuthentication && (
-            <div className={styles['email-check__warn']}>
-              <Warn />
-              <span className={styles['email-check__warn--phrase']}>인증번호가 일치하지 않습니다.</span>
-            </div>
-            )}
+            {verificateError && <ErrorMessage message={verificateError} />}
             <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
           </div>
           <div className={styles.buttons}>
diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index 444fd91a..e9ffc70c 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -1,9 +1,9 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
-import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import useValidateEmail from 'page/Auth/Signup/hooks/useValidateEmail';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 import useCheckEmailDuplicate from 'page/Auth/Signup/hooks/useCheckEmailDuplicate';
+import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
 import styles from './UserId.module.scss';
 
 interface EmailInputProps {
@@ -17,7 +17,7 @@ export default function UserId({ setId, userData }:EmailInputProps) {
     emailHandleSubmit, errors, emailDuplicateRegister, watch,
   } = useValidateEmail();
   const {
-    status, onSubmit, onMobileSubmit, email,
+    status, onSubmit, onMobileSubmit, email, errorMessage,
   } = useCheckEmailDuplicate(userData, setId, isMobile);
 
   return (
@@ -37,22 +37,11 @@ export default function UserId({ setId, userData }:EmailInputProps) {
         />
         {!isMobile && <CustomButton content="중복확인" buttonSize="small" submit />}
       </div>
-      {errors.email && (
-        <div className={styles.form__warn}>
-          <Warn />
-          <span className={styles['form__warn--phrase']}>{errors.email.message}</span>
-        </div>
-      )}
-      {watch().email === email && !errors.email && status === 'error'
-      && (
-      <div className={styles.form__warn}>
-        <Warn />
-        <span className={styles['form__warn--phrase']}>이미 가입된 이메일입니다.</span>
-      </div>
-      )}
-      {watch().email === email && !errors.email && status === 'success'
+      {errors.email && <ErrorMessage message={errors.email.message} />}
+      {!errors.email && watch().email === email && errorMessage
+      && <ErrorMessage message={errorMessage} />}
+      {!errors.email && watch().email === email && status === 'success'
       && <span className={styles.form__alert}>사용하실 수 있는 아이디 입니다.</span>}
-
     </form>
   );
 }
diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index 21c22f1a..04c5f3a4 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -1,12 +1,12 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { ReactComponent as ShowIcon } from 'assets/svg/auth/show.svg';
 import { ReactComponent as BlindIcon } from 'assets/svg/auth/blind.svg';
-import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import usePasswordConfirm from 'page/Auth/Signup/hooks/usePasswordConfirm';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { SubmitHandler } from 'react-hook-form';
+import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
 import styles from './UserPassword.module.scss';
 
 interface PasswordInputProps {
@@ -39,11 +39,7 @@ export default function UserPassword({ setPassword, userData }:PasswordInputProp
           {isBlind ? <BlindIcon /> : <ShowIcon />}
         </button>
         )}
-        {errors.password ? (
-          <div className={styles.form__warn}>
-            <Warn />
-            <span className={styles['form__warn--phrase']}>{errors.password.message}</span>
-          </div>
+        {errors.password ? (<ErrorMessage message={errors.password.message} />
         ) : <span className={styles.form__alert}>* 특수문자 포함 영어와 숫자 조합 6~18 자리</span>}
       </div>
       <div className={styles.form__input}>
@@ -53,12 +49,7 @@ export default function UserPassword({ setPassword, userData }:PasswordInputProp
           {isBlind ? <BlindIcon /> : <ShowIcon />}
         </button>
         )}
-        {errors.passwordConfirm && (
-          <div className={styles.form__warn}>
-            <Warn />
-            <span className={styles['form__warn--phrase']}>{errors.passwordConfirm.message}</span>
-          </div>
-        )}
+        {errors.passwordConfirm && <ErrorMessage message={errors.passwordConfirm.message} />}
       </div>
     </div>
   );
diff --git a/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts b/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts
index f065f589..d7afb1bb 100644
--- a/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts
+++ b/src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts
@@ -9,7 +9,8 @@ export default function useCheckEmailDuplicate(
   isMobile: boolean,
 ) {
   const [email, setEmail] = useState<string>('');
-  const { status, refetch } = useCheckDuplicate(email);
+  const [errorMessage, setMessage] = useState('');
+  const { status, refetch, error } = useCheckDuplicate(email);
 
   const onSubmit:SubmitHandler<RegisterData> = (data) => {
     setEmail(() => (data.email ? data.email : ''));
@@ -27,9 +28,11 @@ export default function useCheckEmailDuplicate(
   useEffect(() => {
     if (status === 'success' && userData.email !== email) {
       setId({ ...userData, email });
+    } else {
+      setMessage(Object(error).response?.data.message);
     }
-  }, [status, setId, email, userData]);
+  }, [status, setId, email, userData, error]);
   return {
-    status, onSubmit, onMobileSubmit, email,
+    status, onSubmit, onMobileSubmit, email, errorMessage,
   };
 }
diff --git a/src/query/register.ts b/src/query/register.ts
index 19566c52..9041df6a 100644
--- a/src/query/register.ts
+++ b/src/query/register.ts
@@ -3,8 +3,8 @@ import { getEmailAuthCode, getEmailDuplicate, verificationAuthCode } from 'api/r
 import useUploadToken from 'store/uploadToken';
 
 export const useCheckDuplicate = (email:string) => {
-  const { status, refetch } = useQuery(['emailDuplicateCheck', email], () => getEmailDuplicate(email), { enabled: false });
-  return { status, refetch };
+  const { status, refetch, error } = useQuery(['emailDuplicateCheck', email], () => getEmailDuplicate(email), { enabled: false });
+  return { status, refetch, error };
 };
 
 export const useGenerateAuthCode = (email:string) => {

From d1c71bc6482c189675808f2b0595741ab9ea3bd3 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Tue, 11 Jul 2023 14:14:51 +0900
Subject: [PATCH 35/52] =?UTF-8?q?refactor:=20=EC=97=90=EB=9F=AC=EB=A9=94?=
 =?UTF-8?q?=EC=84=B8=EC=A7=80=20=EB=B3=80=EC=88=98=EB=AA=85=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/UserEmail/index.tsx   | 10 +++++-----
 src/page/Auth/Signup/component/UserId/index.tsx      | 12 ++++++------
 .../Auth/Signup/component/UserPassword/index.tsx     |  7 ++++---
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index 812e1614..4cf7edc1 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -16,10 +16,10 @@ type ButtonClickEvent = {
 export default function UserEmail({ clickEvent, userData, setAuthenticate }:ButtonClickEvent) {
   const { isMobile } = useMediaQuery();
   const {
-    emailHandleSubmit, errors, emailDuplicateRegister, watch,
+    emailHandleSubmit, errors: formErrors, emailDuplicateRegister, watch,
   } = useValidateEmail();
   const {
-    isOpen, onSubmit, errorMessage, email, refetch,
+    isOpen, onSubmit, errorMessage: requestError, email, refetch,
   } = useAuthCheck(userData.email ? userData.email : '', isMobile);
   const {
     verificationCode,
@@ -35,9 +35,9 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
             <input className={styles.input} type="text" placeholder="이메일 입력@example.com" {...emailDuplicateRegister} disabled={isOpen} />
             {isOpen && <input className={styles.input} type="text" pattern="\d*" maxLength={6} placeholder="인증번호" ref={codeInput} disabled={userData.isAuthentication} />}
           </div>
-          { errors.email && <ErrorMessage message={errors.email.message} />}
-          {(!errors.email && errorMessage && email === watch().email)
-           && <ErrorMessage message={errorMessage} />}
+          { formErrors.email && <ErrorMessage message={formErrors.email.message} />}
+          {(!formErrors.email && requestError && email === watch().email)
+           && <ErrorMessage message={requestError} />}
           { verificateError && <ErrorMessage message={verificateError} />}
           {isOpen ? (
             <>
diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index e9ffc70c..32578de1 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -14,10 +14,10 @@ interface EmailInputProps {
 export default function UserId({ setId, userData }:EmailInputProps) {
   const { isMobile } = useMediaQuery();
   const {
-    emailHandleSubmit, errors, emailDuplicateRegister, watch,
+    emailHandleSubmit, errors: formErros, emailDuplicateRegister, watch,
   } = useValidateEmail();
   const {
-    status, onSubmit, onMobileSubmit, email, errorMessage,
+    status, onSubmit, onMobileSubmit, email, errorMessage: requestError,
   } = useCheckEmailDuplicate(userData, setId, isMobile);
 
   return (
@@ -37,10 +37,10 @@ export default function UserId({ setId, userData }:EmailInputProps) {
         />
         {!isMobile && <CustomButton content="중복확인" buttonSize="small" submit />}
       </div>
-      {errors.email && <ErrorMessage message={errors.email.message} />}
-      {!errors.email && watch().email === email && errorMessage
-      && <ErrorMessage message={errorMessage} />}
-      {!errors.email && watch().email === email && status === 'success'
+      {formErros.email && <ErrorMessage message={formErros.email.message} />}
+      {!formErros.email && watch().email === email && requestError
+      && <ErrorMessage message={requestError} />}
+      {!formErros.email && watch().email === email && status === 'success'
       && <span className={styles.form__alert}>사용하실 수 있는 아이디 입니다.</span>}
     </form>
   );
diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index 04c5f3a4..b06d6a60 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -18,7 +18,7 @@ export default function UserPassword({ setPassword, userData }:PasswordInputProp
   const { isMobile } = useMediaQuery();
   const { value: isBlind, changeValue: changeIsBlind } = useBooleanState(true);
   const {
-    passwordRegister, passwordConfirmRegister, errors, handleSubmit,
+    passwordRegister, passwordConfirmRegister, errors: formErrors, handleSubmit,
   } = usePasswordConfirm();
   const onSubmit:SubmitHandler<RegisterData> = (data) => {
     setPassword({ ...userData, password: data.password });
@@ -39,7 +39,7 @@ export default function UserPassword({ setPassword, userData }:PasswordInputProp
           {isBlind ? <BlindIcon /> : <ShowIcon />}
         </button>
         )}
-        {errors.password ? (<ErrorMessage message={errors.password.message} />
+        {formErrors.password ? (<ErrorMessage message={formErrors.password.message} />
         ) : <span className={styles.form__alert}>* 특수문자 포함 영어와 숫자 조합 6~18 자리</span>}
       </div>
       <div className={styles.form__input}>
@@ -49,7 +49,8 @@ export default function UserPassword({ setPassword, userData }:PasswordInputProp
           {isBlind ? <BlindIcon /> : <ShowIcon />}
         </button>
         )}
-        {errors.passwordConfirm && <ErrorMessage message={errors.passwordConfirm.message} />}
+        {formErrors.passwordConfirm
+        && <ErrorMessage message={formErrors.passwordConfirm.message} />}
       </div>
     </div>
   );

From 3facbef94315933440ba08fcb9c135fedbd5913c Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Tue, 11 Jul 2023 14:17:01 +0900
Subject: [PATCH 36/52] =?UTF-8?q?refactor:=20console.log=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/UserPassword/index.tsx | 2 +-
 src/page/Auth/Signup/hooks/usePasswordConfirm.ts      | 1 -
 src/page/Auth/Signup/hooks/useValidateEmail.ts        | 1 -
 src/page/Auth/Signup/index.tsx                        | 3 ---
 src/page/Auth/Signup/view/UserDataPage/index.tsx      | 1 -
 5 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index b06d6a60..a0cb5bc5 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -4,7 +4,7 @@ import { ReactComponent as BlindIcon } from 'assets/svg/auth/blind.svg';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import usePasswordConfirm from 'page/Auth/Signup/hooks/usePasswordConfirm';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
-// eslint-disable-next-line import/no-extraneous-dependencies
+
 import { SubmitHandler } from 'react-hook-form';
 import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
 import styles from './UserPassword.module.scss';
diff --git a/src/page/Auth/Signup/hooks/usePasswordConfirm.ts b/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
index 94f59b8e..6f43bb6a 100644
--- a/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
+++ b/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { useForm } from 'react-hook-form';
 
 const REG_EX = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,18}$/i;
diff --git a/src/page/Auth/Signup/hooks/useValidateEmail.ts b/src/page/Auth/Signup/hooks/useValidateEmail.ts
index b873f867..df2ea993 100644
--- a/src/page/Auth/Signup/hooks/useValidateEmail.ts
+++ b/src/page/Auth/Signup/hooks/useValidateEmail.ts
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { useForm } from 'react-hook-form';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 
diff --git a/src/page/Auth/Signup/index.tsx b/src/page/Auth/Signup/index.tsx
index 17a59c1e..5d79b1fe 100644
--- a/src/page/Auth/Signup/index.tsx
+++ b/src/page/Auth/Signup/index.tsx
@@ -21,9 +21,6 @@ export default function Signup() {
     setStep(0);
     setRegisterStep(0);
   }, [isMobile, setStep]);
-  useEffect(() => {
-    console.log(registerStep, step);
-  }, [step, registerStep]);
 
   const goNext = () => {
     increaseStep();
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 18b93c5a..65bdbc92 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -43,7 +43,6 @@ export default function UserData({ clickEvent }:ButtonClickEventProps) {
       checkEmailStep(userData);
     }
     checkNextStep(userData);
-    console.log(userData);
   }, [userData, checkNextStep, isMobile, checkEmailStep]);
 
   const goEmailAuth = () => {

From 2272af9d7c1cd69941b7ca75c3f03d2076bc8b3c Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Tue, 11 Jul 2023 15:46:04 +0900
Subject: [PATCH 37/52] =?UTF-8?q?feat:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=9D=B8=EC=A6=9D=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B7=B0=20?=
 =?UTF-8?q?=EB=8B=A4=EC=9D=8C=20=EB=B2=84=ED=8A=BC=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Auth/Signup/component/UserEmail/index.tsx |  8 ++--
 .../Auth/Signup/hooks/useCheckNextStep.ts     |  2 -
 src/page/Auth/Signup/hooks/useRegisterStep.ts | 45 +++++++++++++++++++
 src/page/Auth/Signup/index.tsx                | 36 +++------------
 .../Auth/Signup/view/UserDataPage/index.tsx   | 12 +++--
 5 files changed, 59 insertions(+), 44 deletions(-)
 create mode 100644 src/page/Auth/Signup/hooks/useRegisterStep.ts

diff --git a/src/page/Auth/Signup/component/UserEmail/index.tsx b/src/page/Auth/Signup/component/UserEmail/index.tsx
index 4cf7edc1..80771aa3 100644
--- a/src/page/Auth/Signup/component/UserEmail/index.tsx
+++ b/src/page/Auth/Signup/component/UserEmail/index.tsx
@@ -8,12 +8,12 @@ import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
 import styles from './UserEmail.module.scss';
 
 type ButtonClickEvent = {
-  clickEvent?: () => void | null,
+  goNext?: () => void;
   userData: RegisterData,
   setAuthenticate: (data:RegisterData) => void
 };
 
-export default function UserEmail({ clickEvent, userData, setAuthenticate }:ButtonClickEvent) {
+export default function UserEmail({ userData, setAuthenticate }:ButtonClickEvent) {
   const { isMobile } = useMediaQuery();
   const {
     emailHandleSubmit, errors: formErrors, emailDuplicateRegister, watch,
@@ -68,14 +68,14 @@ export default function UserEmail({ clickEvent, userData, setAuthenticate }:Butt
               발송된 인증번호 6자리를 입력해 주세요
             </span>
             <div className={styles['email-check__input']}>
-              <input className={styles.input} type="password" pattern="\d*" maxLength={6} placeholder="인증번호 입력" />
+              <input className={styles.input} type="password" pattern="\d*" maxLength={6} placeholder="인증번호 입력" ref={codeInput} />
             </div>
             {verificateError && <ErrorMessage message={verificateError} />}
             <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
           </div>
           <div className={styles.buttons}>
             <CustomButton buttonSize="mobile" content="재발송" onClick={refetch} />
-            <CustomButton buttonSize="mobile" content="다음" onClick={clickEvent} />
+            <CustomButton buttonSize="mobile" content="다음" onClick={verificationCode} />
           </div>
         </>
       )
diff --git a/src/page/Auth/Signup/hooks/useCheckNextStep.ts b/src/page/Auth/Signup/hooks/useCheckNextStep.ts
index b8b32a28..66240da8 100644
--- a/src/page/Auth/Signup/hooks/useCheckNextStep.ts
+++ b/src/page/Auth/Signup/hooks/useCheckNextStep.ts
@@ -8,8 +8,6 @@ export default function useCheckNextStep() {
   const checkNextStep = (userData:RegisterData) => {
     if (RegisterParam.safeParse(userData).success) {
       setDone(true);
-    } else {
-      setDone(false);
     }
   };
 
diff --git a/src/page/Auth/Signup/hooks/useRegisterStep.ts b/src/page/Auth/Signup/hooks/useRegisterStep.ts
new file mode 100644
index 00000000..172b1c2d
--- /dev/null
+++ b/src/page/Auth/Signup/hooks/useRegisterStep.ts
@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState } from 'react';
+import useUploadToken from 'store/uploadToken';
+import useStepStore from 'store/useStepStore';
+import useMediaQuery from 'utils/hooks/useMediaQuery';
+
+export default function useRegisterStep() {
+  const {
+    step, setStep, increaseStep, decreaseStep,
+  } = useStepStore();
+  const { isMobile } = useMediaQuery();
+  const [registerStep, setRegisterStep] = useState(0);
+  const { uploadToken } = useUploadToken();
+
+  useEffect(() => {
+    setStep(0);
+    setRegisterStep(0);
+  }, [isMobile, setStep]);
+
+  const goNext = useCallback(() => {
+    increaseStep();
+    setRegisterStep((regiStep) => regiStep + 1);
+  }, [increaseStep, setRegisterStep]);
+
+  useEffect(() => {
+    if (uploadToken) {
+      goNext();
+    }
+  }, [uploadToken, goNext]);
+
+  const goPrev = () => {
+    if (registerStep === 2) {
+      setRegisterStep(1);
+      setStep(1);
+    } else if (step === 2) {
+      setStep(1);
+      setRegisterStep(1);
+    } else {
+      setRegisterStep(registerStep - 1);
+      decreaseStep();
+    }
+  };
+  return {
+    goNext, registerStep, goPrev, step,
+  };
+}
diff --git a/src/page/Auth/Signup/index.tsx b/src/page/Auth/Signup/index.tsx
index 5d79b1fe..10e5b829 100644
--- a/src/page/Auth/Signup/index.tsx
+++ b/src/page/Auth/Signup/index.tsx
@@ -1,51 +1,25 @@
-import { useEffect, useState } from 'react';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { ReactComponent as Logo } from 'assets/svg/auth/koin-logo.svg';
 import { ReactComponent as Back } from 'assets/svg/common/back-arrow.svg';
 import { Link } from 'react-router-dom';
 import ProgressBar from 'component/common/ProgressBar';
-import useStepStore from 'store/useStepStore';
 import OwnerData from './view/OwnerDataPage';
 import TermsOfService from './view/TermsOfServicePage';
 import UserData from './view/UserDataPage';
 import styles from './SignUp.module.scss';
 import Complete from './view/CompletePage';
+import useRegisterStep from './hooks/useRegisterStep';
 
 export default function Signup() {
-  const {
-    step, setStep, increaseStep, decreaseStep,
-  } = useStepStore();
   const { isMobile } = useMediaQuery();
-  const [registerStep, setRegisterStep] = useState(0);
-  useEffect(() => {
-    setStep(0);
-    setRegisterStep(0);
-  }, [isMobile, setStep]);
-
-  const goNext = () => {
-    increaseStep();
-    setRegisterStep(registerStep + 1);
-  };
-
-  const goPrev = () => {
-    if (registerStep === 2) {
-      setRegisterStep(1);
-      setStep(1);
-    } else if (step === 2) {
-      setStep(1);
-      setRegisterStep(1);
-    } else {
-      setRegisterStep(registerStep - 1);
-      decreaseStep();
-    }
-  };
-
+  const {
+    goNext, registerStep, goPrev, step,
+  } = useRegisterStep();
   const STEPS = [
     <TermsOfService clickEvent={goNext} />,
-    <UserData clickEvent={goNext} />,
+    <UserData goNext={goNext} />,
     <OwnerData clickEvent={goNext} />,
   ];
-
   return (
     <div className={styles.page}>
       {!isMobile
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 65bdbc92..663d44c6 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -6,13 +6,12 @@ import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import { useEffect, useState } from 'react';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 import useStepStore from 'store/useStepStore';
-// eslint-disable-next-line import/no-named-as-default
 import useCheckNextStep from 'page/Auth/Signup/hooks/useCheckNextStep';
 import { RegisterParam } from 'api/register/model';
 import styles from './UserData.module.scss';
 
 type ButtonClickEventProps = {
-  clickEvent: () => void;
+  goNext: () => void;
 };
 
 const useCheckEmailStep = () => {
@@ -24,7 +23,7 @@ const useCheckEmailStep = () => {
   };
   return { isFilled, checkEmailStep };
 };
-export default function UserData({ clickEvent }:ButtonClickEventProps) {
+export default function UserData({ goNext }:ButtonClickEventProps) {
   const { isMobile } = useMediaQuery();
   const [userData, setData] = useState<RegisterData>({});
   const { isDone, checkNextStep } = useCheckNextStep();
@@ -60,7 +59,7 @@ export default function UserData({ clickEvent }:ButtonClickEventProps) {
             <UserEmail setAuthenticate={setData} userData={userData} />
           </section>
           <div className={styles.buttons}>
-            <CustomButton buttonSize="large" content="다음" onClick={clickEvent} disable={!isDone} />
+            <CustomButton buttonSize="large" content="다음" onClick={goNext} disable={!isDone} />
           </div>
         </>
       )
@@ -72,12 +71,11 @@ export default function UserData({ clickEvent }:ButtonClickEventProps) {
                 <UserId setId={setData} userData={userData} />
                 <UserPassword setPassword={setData} userData={userData} />
               </>
-            ) : <UserEmail setAuthenticate={setData} userData={userData} />}
+            ) : <UserEmail setAuthenticate={setData} userData={userData} goNext={goNext} />}
           </section>
           <div className={styles.buttons}>
             {registerStep === 0 && <CustomButton buttonSize="large" content="이메일 인증하기" onClick={goEmailAuth} disable={!isFilled} />}
-            {registerStep > 1 && <CustomButton buttonSize="large" content="다음" onClick={clickEvent} disable={!isDone} />}
-
+            {registerStep > 1 && <CustomButton buttonSize="large" content="다음" onClick={goNext} disable={!isDone} />}
           </div>
         </>
       )

From bef5cc37bdb67b22d1cd668f0ea09d99beb174e9 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Tue, 11 Jul 2023 15:50:37 +0900
Subject: [PATCH 38/52] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B7=B0=20=EB=8B=A4=EC=9D=8C=20=EB=B2=84=ED=8A=BC=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20pc=20=EB=B7=B0=EC=97=90=EC=84=9C=20=EC=98=88?=
 =?UTF-8?q?=EC=99=B8=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/hooks/useRegisterStep.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/page/Auth/Signup/hooks/useRegisterStep.ts b/src/page/Auth/Signup/hooks/useRegisterStep.ts
index 172b1c2d..58a1307c 100644
--- a/src/page/Auth/Signup/hooks/useRegisterStep.ts
+++ b/src/page/Auth/Signup/hooks/useRegisterStep.ts
@@ -22,10 +22,10 @@ export default function useRegisterStep() {
   }, [increaseStep, setRegisterStep]);
 
   useEffect(() => {
-    if (uploadToken) {
+    if (uploadToken && isMobile) {
       goNext();
     }
-  }, [uploadToken, goNext]);
+  }, [uploadToken, goNext, isMobile]);
 
   const goPrev = () => {
     if (registerStep === 2) {

From ba9e0d0938312b493be51fc680ff51ab82859957 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Wed, 12 Jul 2023 19:39:22 +0900
Subject: [PATCH 39/52] =?UTF-8?q?feat:=20=EC=A4=91=EB=B3=B5=EB=90=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20id=EC=9D=BC=EC=8B=9C=EC=97=90?=
 =?UTF-8?q?=20id=20=EC=9D=B8=ED=92=8B=20disabled=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/UserId/index.tsx | 1 +
 src/page/Auth/Signup/hooks/useValidateEmail.ts  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index 32578de1..6df0e0bd 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -34,6 +34,7 @@ export default function UserId({ setId, userData }:EmailInputProps) {
           type="text"
           placeholder={isMobile ? '이메일' : '이메일 형식 아이디 입력(필수)'}
           {...emailDuplicateRegister}
+          disabled={status === 'success'}
         />
         {!isMobile && <CustomButton content="중복확인" buttonSize="small" submit />}
       </div>
diff --git a/src/page/Auth/Signup/hooks/useValidateEmail.ts b/src/page/Auth/Signup/hooks/useValidateEmail.ts
index df2ea993..9f86a00b 100644
--- a/src/page/Auth/Signup/hooks/useValidateEmail.ts
+++ b/src/page/Auth/Signup/hooks/useValidateEmail.ts
@@ -9,7 +9,7 @@ export default function useValidateEmail() {
     handleSubmit: emailHandleSubmit,
     formState: { errors },
     watch,
-  } = useForm<RegisterData>();
+  } = useForm<RegisterData>({ mode: 'onSubmit' });
   const emailDuplicateRegister = emailRegister('email', {
     required: { value: true, message: '이메일을 입력해주세요.' },
     pattern: {

From dfeecfa5f24f3c7a0e6f528bc2ccf5691fbc2a9e Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Wed, 12 Jul 2023 21:01:10 +0900
Subject: [PATCH 40/52] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=A9=94=EC=9D=BC?=
 =?UTF-8?q?=20=EC=A4=91=EB=B3=B5=20=EC=B2=B4=ED=81=AC=20api=20request,=20r?=
 =?UTF-8?q?esponse=20model=20=EB=B3=80=EC=88=98=EB=AA=85=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/register/index.ts                              | 10 +++++-----
 src/{api/register/model.ts => model/register/index.ts} |  8 ++++----
 src/page/Auth/Signup/hooks/useCheckNextStep.ts         |  2 +-
 src/page/Auth/Signup/view/UserDataPage/index.tsx       |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)
 rename src/{api/register/model.ts => model/register/index.ts} (70%)

diff --git a/src/api/register/index.ts b/src/api/register/index.ts
index cfc71343..c143dfea 100644
--- a/src/api/register/index.ts
+++ b/src/api/register/index.ts
@@ -1,16 +1,16 @@
 import { client } from 'api';
 import {
-  AuthCodeParam, AuthCodeResponse, EmailAuthParam, EmailAuthResponse,
-} from './model';
+  AuthCodeParam, AuthCodeResponse, EmailRegisterParam, EmailRegisterResponse,
+} from 'model/register';
 
 export const getEmailDuplicate = async (param: string) => {
   const { status } = await client.get(`/user/check/email?address=${param}`);
   return status;
 };
 
-export const getEmailAuthCode = async (param: EmailAuthParam) => {
-  const { data } = await client.post<EmailAuthResponse>('/owners/verification/email', param);
-  return EmailAuthResponse.parse(data);
+export const getEmailAuthCode = async (param: EmailRegisterParam) => {
+  const { data } = await client.post<EmailRegisterResponse>('/owners/verification/email', param);
+  return EmailRegisterResponse.parse(data);
 };
 
 export const verificationAuthCode = async (param:AuthCodeParam) => {
diff --git a/src/api/register/model.ts b/src/model/register/index.ts
similarity index 70%
rename from src/api/register/model.ts
rename to src/model/register/index.ts
index d1ffdc52..8613e5d9 100644
--- a/src/api/register/model.ts
+++ b/src/model/register/index.ts
@@ -1,12 +1,12 @@
 import { z } from 'zod';
 
-export const EmailAuthParam = z.object({
+export const EmailRegisterParam = z.object({
   address: z.string().email(),
 });
-export type EmailAuthParam = z.infer<typeof EmailAuthParam>;
+export type EmailRegisterParam = z.infer<typeof EmailRegisterParam>;
 
-export const EmailAuthResponse = z.string();
-export type EmailAuthResponse = z.infer<typeof EmailAuthResponse>;
+export const EmailRegisterResponse = z.string();
+export type EmailRegisterResponse = z.infer<typeof EmailRegisterResponse>;
 
 export const AuthCodeParam = z.object({
   address: z.string().email(),
diff --git a/src/page/Auth/Signup/hooks/useCheckNextStep.ts b/src/page/Auth/Signup/hooks/useCheckNextStep.ts
index 66240da8..342d6f90 100644
--- a/src/page/Auth/Signup/hooks/useCheckNextStep.ts
+++ b/src/page/Auth/Signup/hooks/useCheckNextStep.ts
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
-import { RegisterParam } from 'api/register/model';
+import { RegisterParam } from 'model/register';
 
 export default function useCheckNextStep() {
   const [isDone, setDone] = useState(false);
diff --git a/src/page/Auth/Signup/view/UserDataPage/index.tsx b/src/page/Auth/Signup/view/UserDataPage/index.tsx
index 663d44c6..4b7b7782 100644
--- a/src/page/Auth/Signup/view/UserDataPage/index.tsx
+++ b/src/page/Auth/Signup/view/UserDataPage/index.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
 import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
 import useStepStore from 'store/useStepStore';
 import useCheckNextStep from 'page/Auth/Signup/hooks/useCheckNextStep';
-import { RegisterParam } from 'api/register/model';
+import { RegisterParam } from 'model/register';
 import styles from './UserData.module.scss';
 
 type ButtonClickEventProps = {

From a92dbc5a7aba86416447efa416735159a35b6dce Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Wed, 12 Jul 2023 21:02:28 +0900
Subject: [PATCH 41/52] =?UTF-8?q?refactor:=20useGenerateAuthCode=20query?=
 =?UTF-8?q?=20key=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/query/register.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/query/register.ts b/src/query/register.ts
index 9041df6a..6d988f97 100644
--- a/src/query/register.ts
+++ b/src/query/register.ts
@@ -11,7 +11,7 @@ export const useGenerateAuthCode = (email:string) => {
   const {
     status, refetch, isError, error,
   } = useQuery(
-    ['genrateEmailAuthCode', email],
+    ['generateEmailAuthCode', email],
     () => getEmailAuthCode({ address: email }),
     {
       enabled: false,

From 7dc36a207804703a35613a1309d6f95787822a36 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Wed, 12 Jul 2023 21:28:38 +0900
Subject: [PATCH 42/52] =?UTF-8?q?style:=20y=EC=B6=95=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/SignUp.module.scss                    | 7 ++++++-
 .../view/TermsOfServicePage/TermsOfService.module.scss     | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/page/Auth/Signup/SignUp.module.scss b/src/page/Auth/Signup/SignUp.module.scss
index 96fffe0f..853fc4b2 100644
--- a/src/page/Auth/Signup/SignUp.module.scss
+++ b/src/page/Auth/Signup/SignUp.module.scss
@@ -25,9 +25,14 @@
 
   @include media.media-breakpoint-down(mobile) {
     width: 78%;
-    height: 80vh;
+    height: 79vh;
     margin-bottom: 60px;
     overflow-y: scroll;
+    -ms-overflow-style: none; /* 인터넷 익스플로러 */
+    scrollbar-width: none; /* 파이어폭스 */
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   &__steps {
diff --git a/src/page/Auth/Signup/view/TermsOfServicePage/TermsOfService.module.scss b/src/page/Auth/Signup/view/TermsOfServicePage/TermsOfService.module.scss
index f0abb57d..d8b0e855 100644
--- a/src/page/Auth/Signup/view/TermsOfServicePage/TermsOfService.module.scss
+++ b/src/page/Auth/Signup/view/TermsOfServicePage/TermsOfService.module.scss
@@ -101,6 +101,11 @@
     padding: 16px;
     margin-bottom: 18px;
     white-space: pre-line;
+    -ms-overflow-style: none; /* 인터넷 익스플로러 */
+    scrollbar-width: none; /* 파이어폭스 */
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
     @include media.media-breakpoint-down(mobile) {
       border: 1px dashed #d2dae2;

From b6e144c45ecd8c5a9300ef9fb6573cef2c5346d5 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Wed, 12 Jul 2023 21:42:38 +0900
Subject: [PATCH 43/52] =?UTF-8?q?refactor:=20=EB=92=A4=EB=A1=9C=EA=B0=80?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20common=EC=9D=98=20PreviousStep?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/UserId/index.tsx | 1 -
 src/page/Auth/Signup/index.tsx                  | 7 ++-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserId/index.tsx b/src/page/Auth/Signup/component/UserId/index.tsx
index 6df0e0bd..32578de1 100644
--- a/src/page/Auth/Signup/component/UserId/index.tsx
+++ b/src/page/Auth/Signup/component/UserId/index.tsx
@@ -34,7 +34,6 @@ export default function UserId({ setId, userData }:EmailInputProps) {
           type="text"
           placeholder={isMobile ? '이메일' : '이메일 형식 아이디 입력(필수)'}
           {...emailDuplicateRegister}
-          disabled={status === 'success'}
         />
         {!isMobile && <CustomButton content="중복확인" buttonSize="small" submit />}
       </div>
diff --git a/src/page/Auth/Signup/index.tsx b/src/page/Auth/Signup/index.tsx
index 10e5b829..59b36541 100644
--- a/src/page/Auth/Signup/index.tsx
+++ b/src/page/Auth/Signup/index.tsx
@@ -3,6 +3,7 @@ import { ReactComponent as Logo } from 'assets/svg/auth/koin-logo.svg';
 import { ReactComponent as Back } from 'assets/svg/common/back-arrow.svg';
 import { Link } from 'react-router-dom';
 import ProgressBar from 'component/common/ProgressBar';
+import PreviousStep from 'component/common/Auth/PreviousStep';
 import OwnerData from './view/OwnerDataPage';
 import TermsOfService from './view/TermsOfServicePage';
 import UserData from './view/UserDataPage';
@@ -44,11 +45,7 @@ export default function Signup() {
                 <Link to="/login" className={styles['back-button']}>
                   <Back />
                 </Link>
-              ) : (
-                <div className={styles['back-button']}>
-                  <Back onClick={goPrev} />
-                </div>
-              )}
+              ) : <PreviousStep step={step} clickEvent={goPrev} />}
               <section className={styles.section}>
                 <span className={styles.section__name}>
                   사장님용

From c8d744d888b512d2824204b89fa451e983a103ab Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 25 Sep 2023 15:36:56 +0900
Subject: [PATCH 44/52] =?UTF-8?q?feat:=20=EC=95=BD=EA=B4=80=20=EB=AA=A8?=
 =?UTF-8?q?=EB=91=90=20=EB=8F=99=EC=9D=98=20=EC=8B=9C=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EC=B5=9C=ED=95=98=EB=8B=A8=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/SignUp.module.scss       |  1 -
 .../Auth/Signup/hooks/usePasswordConfirm.ts   |  2 +-
 src/page/Auth/Signup/index.tsx                |  6 ++--
 .../Signup/view/TermsOfServicePage/index.tsx  | 34 +++++++++++++++----
 4 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/page/Auth/Signup/SignUp.module.scss b/src/page/Auth/Signup/SignUp.module.scss
index 853fc4b2..8991256a 100644
--- a/src/page/Auth/Signup/SignUp.module.scss
+++ b/src/page/Auth/Signup/SignUp.module.scss
@@ -28,7 +28,6 @@
     height: 79vh;
     margin-bottom: 60px;
     overflow-y: scroll;
-    -ms-overflow-style: none; /* 인터넷 익스플로러 */
     scrollbar-width: none; /* 파이어폭스 */
     &::-webkit-scrollbar {
       display: none;
diff --git a/src/page/Auth/Signup/hooks/usePasswordConfirm.ts b/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
index 6f43bb6a..f1148f65 100644
--- a/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
+++ b/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
@@ -13,7 +13,7 @@ export default function usePasswordConfirm() {
     formState: { errors },
     getValues,
     handleSubmit,
-  } = useForm<PasswordForm>({ mode: 'onBlur' });
+  } = useForm<PasswordForm>({ mode: 'onChange' });
 
   const passwordRegister = register('password', {
     required: { value: true, message: '비밀번호를 입력해주세요.' },
diff --git a/src/page/Auth/Signup/index.tsx b/src/page/Auth/Signup/index.tsx
index 59b36541..fc9e04b7 100644
--- a/src/page/Auth/Signup/index.tsx
+++ b/src/page/Auth/Signup/index.tsx
@@ -4,6 +4,7 @@ import { ReactComponent as Back } from 'assets/svg/common/back-arrow.svg';
 import { Link } from 'react-router-dom';
 import ProgressBar from 'component/common/ProgressBar';
 import PreviousStep from 'component/common/Auth/PreviousStep';
+import { useRef } from 'react';
 import OwnerData from './view/OwnerDataPage';
 import TermsOfService from './view/TermsOfServicePage';
 import UserData from './view/UserDataPage';
@@ -16,8 +17,9 @@ export default function Signup() {
   const {
     goNext, registerStep, goPrev, step,
   } = useRegisterStep();
+  const termsRef = useRef<HTMLDivElement>(null);
   const STEPS = [
-    <TermsOfService clickEvent={goNext} />,
+    <TermsOfService clickEvent={goNext} termsRef={termsRef} />,
     <UserData goNext={goNext} />,
     <OwnerData clickEvent={goNext} />,
   ];
@@ -46,7 +48,7 @@ export default function Signup() {
                   <Back />
                 </Link>
               ) : <PreviousStep step={step} clickEvent={goPrev} />}
-              <section className={styles.section}>
+              <section className={styles.section} ref={termsRef}>
                 <span className={styles.section__name}>
                   사장님용
                   <br />
diff --git a/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx b/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx
index a1b7d8e4..32147d7d 100644
--- a/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx
+++ b/src/page/Auth/Signup/view/TermsOfServicePage/index.tsx
@@ -2,18 +2,19 @@ import { Link } from 'react-router-dom';
 import CustomButton from 'page/Auth/Signup/component/CustomButton';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import TERMS from 'page/Auth/Signup/constant/terms';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import styles from './TermsOfService.module.scss';
 
 type ButtonClickEventProps = {
   clickEvent: () => void;
+  termsRef: React.RefObject<HTMLDivElement>
 };
-const useTermCheck = () => {
+const useTermCheck = (ref:React.RefObject<HTMLDivElement>) => {
   const [isUserTermAgree, setUserTermAgree] = useState(false);
   const [isKoinTermAgree, setKoinTermAgree] = useState(false);
   const [isAllAgree, setAllAgree] = useState(false);
-
+  const sectionRef = useRef<HTMLDivElement>(null);
   const checkAll = () => {
     if (isAllAgree) {
       setUserTermAgree(false);
@@ -26,21 +27,40 @@ const useTermCheck = () => {
   useEffect(() => {
     setAllAgree(isKoinTermAgree && isUserTermAgree);
   }, [isKoinTermAgree, isUserTermAgree]);
+  useEffect(() => {
+    if (isAllAgree && ref.current) {
+      console.log(
+        ref.current.scrollHeight,
+        ref.current.scrollTop,
+      );
+      ref.current.scrollTo({ top: ref.current.scrollHeight });
+      console.log(
+        ref.current.scrollHeight,
+        ref.current.scrollTop,
+      );
+    }
+  }, [isAllAgree, ref]);
   return {
-    isUserTermAgree, setUserTermAgree, isKoinTermAgree, setKoinTermAgree, isAllAgree, checkAll,
+    isUserTermAgree,
+    setUserTermAgree,
+    isKoinTermAgree,
+    setKoinTermAgree,
+    isAllAgree,
+    checkAll,
+    sectionRef,
   };
 };
 
-export default function TermsOfService({ clickEvent }:ButtonClickEventProps) {
+export default function TermsOfService({ clickEvent, termsRef }:ButtonClickEventProps) {
   const { isMobile } = useMediaQuery();
   const USER_TERM = TERMS[0];
   const KOIN_TERM = TERMS[1];
   const {
     isUserTermAgree, setUserTermAgree, isKoinTermAgree, setKoinTermAgree, isAllAgree, checkAll,
-  } = useTermCheck();
+  } = useTermCheck(termsRef);
   return (
     <>
-      <section className={styles.section}>
+      <section className={styles.section} ref={termsRef}>
         <div className={styles['agree-all']}>
           <label htmlFor="terms" className={styles['agree-all__content']}>
             <input id="terms" type="checkbox" className={styles.section__checkbox} checked={isAllAgree} onChange={checkAll} />

From 39844b8713acd20e4893f82511ee6dd45a4a9306 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 25 Sep 2023 15:42:05 +0900
Subject: [PATCH 45/52] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EB=8B=A4=EC=9D=8C=EB=8B=A8=EA=B3=84=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=EC=8B=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=B5=9C?=
 =?UTF-8?q?=EC=83=81=EB=8B=A8=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/hooks/useRegisterStep.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/page/Auth/Signup/hooks/useRegisterStep.ts b/src/page/Auth/Signup/hooks/useRegisterStep.ts
index 58a1307c..0188b791 100644
--- a/src/page/Auth/Signup/hooks/useRegisterStep.ts
+++ b/src/page/Auth/Signup/hooks/useRegisterStep.ts
@@ -19,6 +19,7 @@ export default function useRegisterStep() {
   const goNext = useCallback(() => {
     increaseStep();
     setRegisterStep((regiStep) => regiStep + 1);
+    window.scrollTo({ top: 0 });
   }, [increaseStep, setRegisterStep]);
 
   useEffect(() => {
@@ -38,6 +39,7 @@ export default function useRegisterStep() {
       setRegisterStep(registerStep - 1);
       decreaseStep();
     }
+    window.scrollTo({ top: 0 });
   };
   return {
     goNext, registerStep, goPrev, step,

From a26c8718956e056c7250aa2ca47e3d8b13be3765 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 25 Sep 2023 15:43:23 +0900
Subject: [PATCH 46/52] =?UTF-8?q?refactor:=20IE=20=EA=B4=80=EB=A0=A8=20CSS?=
 =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Signup/view/TermsOfServicePage/TermsOfService.module.scss    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/page/Auth/Signup/view/TermsOfServicePage/TermsOfService.module.scss b/src/page/Auth/Signup/view/TermsOfServicePage/TermsOfService.module.scss
index d8b0e855..70cc8e62 100644
--- a/src/page/Auth/Signup/view/TermsOfServicePage/TermsOfService.module.scss
+++ b/src/page/Auth/Signup/view/TermsOfServicePage/TermsOfService.module.scss
@@ -101,7 +101,6 @@
     padding: 16px;
     margin-bottom: 18px;
     white-space: pre-line;
-    -ms-overflow-style: none; /* 인터넷 익스플로러 */
     scrollbar-width: none; /* 파이어폭스 */
     &::-webkit-scrollbar {
       display: none;

From 29d9d0bba2b71f2532808e5343eb5e21c84f5190 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 25 Sep 2023 15:45:17 +0900
Subject: [PATCH 47/52] =?UTF-8?q?refactor:=20custombutton=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/CustomButton/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/page/Auth/Signup/component/CustomButton/index.tsx b/src/page/Auth/Signup/component/CustomButton/index.tsx
index cd213619..1d0c1bee 100644
--- a/src/page/Auth/Signup/component/CustomButton/index.tsx
+++ b/src/page/Auth/Signup/component/CustomButton/index.tsx
@@ -2,7 +2,7 @@ import styles from './CustomButton.module.scss';
 
 interface ButtonProps {
   content:string,
-  buttonSize:string,
+  buttonSize: 'small' | 'mobile' | 'large',
   disable?: boolean,
   submit?:boolean
   onClick?: () => void

From 9b1848602e009653861f2fbdbdc81206a941b71c Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 25 Sep 2023 15:45:59 +0900
Subject: [PATCH 48/52] =?UTF-8?q?refactor:=20=EC=98=A4=ED=83=80=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/ErrorMessage/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/page/Auth/Signup/component/ErrorMessage/index.tsx b/src/page/Auth/Signup/component/ErrorMessage/index.tsx
index 0c350bce..f46326e5 100644
--- a/src/page/Auth/Signup/component/ErrorMessage/index.tsx
+++ b/src/page/Auth/Signup/component/ErrorMessage/index.tsx
@@ -1,11 +1,11 @@
 import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import styles from './ErrorMessage.module.scss';
 
-interface ErrorMEssageProps {
+interface ErrorMessageProps {
   message: string | undefined
 }
 
-export default function ErrorMessage({ message }:ErrorMEssageProps) {
+export default function ErrorMessage({ message }:ErrorMessageProps) {
   return (
     <div className={styles.warn}>
       <Warn />

From 329cc4f58fd48ca982932bef8cbcbd92ec899717 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 25 Sep 2023 16:12:34 +0900
Subject: [PATCH 49/52] =?UTF-8?q?styles:=20=EC=97=90=EB=9F=AC=EB=A9=94?=
 =?UTF-8?q?=EC=8B=9C=EC=A7=80=20height=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/ErrorMessage/ErrorMessage.module.scss |  2 +-
 .../Auth/Signup/component/UserId/UserId.module.scss |  6 ++++++
 .../component/UserPassword/UserPassword.module.scss | 13 +++++++++----
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/page/Auth/Signup/component/ErrorMessage/ErrorMessage.module.scss b/src/page/Auth/Signup/component/ErrorMessage/ErrorMessage.module.scss
index d0bd1294..8a994870 100644
--- a/src/page/Auth/Signup/component/ErrorMessage/ErrorMessage.module.scss
+++ b/src/page/Auth/Signup/component/ErrorMessage/ErrorMessage.module.scss
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   margin-top: 9px;
-  margin-bottom: 16px;
+  padding-bottom: 16px;
   gap: 7px;
   height: 11px;
 
diff --git a/src/page/Auth/Signup/component/UserId/UserId.module.scss b/src/page/Auth/Signup/component/UserId/UserId.module.scss
index 5e62391d..1949f2d6 100644
--- a/src/page/Auth/Signup/component/UserId/UserId.module.scss
+++ b/src/page/Auth/Signup/component/UserId/UserId.module.scss
@@ -1,6 +1,12 @@
 @use "src/utils/styles/mediaQuery" as media;
 
 .form {
+  height: 100px;
+
+  @include media.media-breakpoint-down(mobile) {
+    height: 50px;
+  }
+
   &__label {
     display: block;
     font-size: 18px;
diff --git a/src/page/Auth/Signup/component/UserPassword/UserPassword.module.scss b/src/page/Auth/Signup/component/UserPassword/UserPassword.module.scss
index bbe2664e..e735c911 100644
--- a/src/page/Auth/Signup/component/UserPassword/UserPassword.module.scss
+++ b/src/page/Auth/Signup/component/UserPassword/UserPassword.module.scss
@@ -1,6 +1,15 @@
 @use "src/utils/styles/mediaQuery" as media;
 
 .form {
+  height: 200px;
+
+  @include media.media-breakpoint-down(mobile) {
+    height: 100px;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+  }
+
   &__label {
     display: block;
     font-size: 18px;
@@ -17,10 +26,6 @@
 
     @include media.media-breakpoint-down(mobile) {
       margin-top: 0;
-
-      &:last-child {
-        margin-top: 14px;
-      }
     }
   }
 

From c3be5fad8231b838275f0d4e8f03159dc2d30070 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 25 Sep 2023 16:49:02 +0900
Subject: [PATCH 50/52] =?UTF-8?q?fix:=20=EC=A0=95=EA=B7=9C=ED=91=9C?=
 =?UTF-8?q?=ED=98=84=EC=8B=9D=20=EB=A7=8C=EC=A1=B1=EC=8B=9C=20=EB=B0=94?=
 =?UTF-8?q?=EB=A1=9C=20=EB=8B=A4=EC=9D=8C=20=EC=9E=85=EB=A0=A5=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=84=98=EC=96=B4=EA=B0=80=EB=8A=94=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/UserPassword/index.tsx | 2 +-
 src/page/Auth/Signup/hooks/usePasswordConfirm.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index a0cb5bc5..442ca881 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -24,7 +24,7 @@ export default function UserPassword({ setPassword, userData }:PasswordInputProp
     setPassword({ ...userData, password: data.password });
   };
   return (
-    <div className={styles.form} onChange={handleSubmit(onSubmit)}>
+    <div className={styles.form} onFocus={handleSubmit(onSubmit)}>
       {!isMobile && <span className={styles.form__label}>비밀번호</span>}
       <div className={styles.form__input}>
         <input
diff --git a/src/page/Auth/Signup/hooks/usePasswordConfirm.ts b/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
index f1148f65..e9f7163b 100644
--- a/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
+++ b/src/page/Auth/Signup/hooks/usePasswordConfirm.ts
@@ -13,7 +13,7 @@ export default function usePasswordConfirm() {
     formState: { errors },
     getValues,
     handleSubmit,
-  } = useForm<PasswordForm>({ mode: 'onChange' });
+  } = useForm<PasswordForm>();
 
   const passwordRegister = register('password', {
     required: { value: true, message: '비밀번호를 입력해주세요.' },

From 7b92564a5d7ea49579ae2176562e0e9ca060cff7 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 23 Oct 2023 14:26:12 +0900
Subject: [PATCH 51/52] =?UTF-8?q?refactor:=20customButton=20buttonType=20?=
 =?UTF-8?q?=3D>=20buttonSize=EB=A1=9C=20=EC=86=8D=EC=84=B1=EB=AA=85=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/common/CustomModal/index.tsx   | 2 +-
 src/page/StoreRegistration/view/PC/index.tsx | 8 ++++----
 src/store/useStepStore.ts                    | 1 -
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/component/common/CustomModal/index.tsx b/src/component/common/CustomModal/index.tsx
index 71d81b7a..89fca10d 100644
--- a/src/component/common/CustomModal/index.tsx
+++ b/src/component/common/CustomModal/index.tsx
@@ -32,7 +32,7 @@ export default function CustomModal({
         </div>
         {hasFooter && (
           <div className={styles.container__footer}>
-            <CustomButton content={buttonText} buttonType="large" onClick={onCancel} />
+            <CustomButton content={buttonText} buttonSize="large" onClick={onCancel} />
           </div>
         )}
       </div>
diff --git a/src/page/StoreRegistration/view/PC/index.tsx b/src/page/StoreRegistration/view/PC/index.tsx
index c4f04484..98aa2c2e 100644
--- a/src/page/StoreRegistration/view/PC/index.tsx
+++ b/src/page/StoreRegistration/view/PC/index.tsx
@@ -90,7 +90,7 @@ export default function StoreRegistrationPC() {
                 <span className={styles.form__label}>카테고리</span>
                 <div className={styles.form__section}>
                   <input type="text" className={styles.form__input} />
-                  <CustomButton content="카테고리 검색" buttonType="small" onClick={openCategory} />
+                  <CustomButton content="카테고리 검색" buttonSize="small" onClick={openCategory} />
                 </div>
               </div>
               <CustomModal
@@ -108,7 +108,7 @@ export default function StoreRegistrationPC() {
                 <span className={styles.form__label}>가게명</span>
                 <div className={styles.form__section}>
                   <input type="text" className={styles.form__input} />
-                  <CustomButton content="가게검색" buttonType="small" onClick={openSearchStore} />
+                  <CustomButton content="가게검색" buttonSize="small" onClick={openSearchStore} />
                 </div>
               </div>
               <CustomModal
@@ -129,7 +129,7 @@ export default function StoreRegistrationPC() {
                   <div className={styles['form__operate-time']}>
                     <span>00:00 ~ 24:00</span>
                   </div>
-                  <CustomButton content="시간수정" buttonType="small" onClick={openOperateTime} />
+                  <CustomButton content="시간수정" buttonSize="small" onClick={openOperateTime} />
                 </div>
               </div>
               <CustomModal
@@ -160,7 +160,7 @@ export default function StoreRegistrationPC() {
               <div className={styles['form__next-button']}>
                 <CustomButton
                   content="다음"
-                  buttonType="large"
+                  buttonSize="large"
                   onClick={openConfirmPopup}
                 />
               </div>
diff --git a/src/store/useStepStore.ts b/src/store/useStepStore.ts
index 81cf1d73..e82c991a 100644
--- a/src/store/useStepStore.ts
+++ b/src/store/useStepStore.ts
@@ -6,7 +6,6 @@ interface StepStore {
   setStep: (step: number) => void;
   decreaseStep: () => void;
   increaseStep: () => void;
-  increaseStep: () => void
 }
 const useStepStore = create<StepStore>((set) => ({
   TOTAL_STEP: 4,

From 493e3848b3d04199c153262fc61aa57272d1e071 Mon Sep 17 00:00:00 2001
From: HAEROOL <71335694+HAEROOL@users.noreply.github.com>
Date: Mon, 23 Oct 2023 21:56:09 +0900
Subject: [PATCH 52/52] =?UTF-8?q?fix:=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20input=20=EC=A0=95=EA=B7=9C=ED=91=9C=ED=98=84?=
 =?UTF-8?q?=EC=8B=9D=20=EB=A7=8C=EC=A1=B1=20=EC=8B=9C=20=EB=B0=94=EB=A1=9C?=
 =?UTF-8?q?=20=EB=8B=A4=EC=9D=8C=EC=9C=BC=EB=A1=9C=20=EB=84=98=EC=96=B4?=
 =?UTF-8?q?=EA=B0=80=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Auth/Signup/component/UserPassword/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/page/Auth/Signup/component/UserPassword/index.tsx b/src/page/Auth/Signup/component/UserPassword/index.tsx
index 442ca881..e277cb42 100644
--- a/src/page/Auth/Signup/component/UserPassword/index.tsx
+++ b/src/page/Auth/Signup/component/UserPassword/index.tsx
@@ -24,7 +24,7 @@ export default function UserPassword({ setPassword, userData }:PasswordInputProp
     setPassword({ ...userData, password: data.password });
   };
   return (
-    <div className={styles.form} onFocus={handleSubmit(onSubmit)}>
+    <div className={styles.form}>
       {!isMobile && <span className={styles.form__label}>비밀번호</span>}
       <div className={styles.form__input}>
         <input
@@ -42,7 +42,7 @@ export default function UserPassword({ setPassword, userData }:PasswordInputProp
         {formErrors.password ? (<ErrorMessage message={formErrors.password.message} />
         ) : <span className={styles.form__alert}>* 특수문자 포함 영어와 숫자 조합 6~18 자리</span>}
       </div>
-      <div className={styles.form__input}>
+      <div className={styles.form__input} onChange={handleSubmit(onSubmit)}>
         <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type={isBlind ? 'password' : 'text'} {...passwordConfirmRegister} autoComplete="off" />
         {!isMobile && (
         <button className={styles['form__visible--button']} type="button" onClick={changeIsBlind}>