[회원가입] 회원가입 페이지 유저 데이터 입력 로직 구현 및 api 연동

package.json

@@ -52,6 +52,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react": "^18.2.8",
     "@typescript-eslint/eslint-plugin": "^5.30.0",
     "@typescript-eslint/parser": "^5.30.0",
     "eslint": "^8.18.0",

src/api/register/index.ts

@@ -0,0 +1,19 @@
+import { client } from 'api';
+import {
+  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: EmailRegisterParam) => {
+  const { data } = await client.post<EmailRegisterResponse>('/owners/verification/email', param);
+  return EmailRegisterResponse.parse(data);
+};
+
+export const verificationAuthCode = async (param:AuthCodeParam) => {
+  const { data } = await client.post<AuthCodeResponse>('/owners/verification/code', param);
+  return AuthCodeResponse.parse(data);
+};

src/model/register/index.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod';
+
+export const EmailRegisterParam = z.object({
+  address: z.string().email(),
+});
+export type EmailRegisterParam = z.infer<typeof EmailRegisterParam>;
+
+export const EmailRegisterResponse = z.string();
+export type EmailRegisterResponse = z.infer<typeof EmailRegisterResponse>;
+
+export const AuthCodeParam = z.object({
+  address: z.string().email(),
+  certification_code: z.string(),
+});
+export type AuthCodeParam = z.infer<typeof AuthCodeParam>;
+
+export const AuthCodeResponse = z.object({
+  token: z.string(),
+});
+export type AuthCodeResponse = z.infer<typeof AuthCodeResponse>;
+
+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>;

src/page/Auth/Signup/SignUp.module.scss

@@ -25,9 +25,13 @@
 
   @include media.media-breakpoint-down(mobile) {
     width: 78%;
-    height: 80vh;
+    height: 79vh;
     margin-bottom: 60px;
     overflow-y: scroll;
+    scrollbar-width: none; /* 파이어폭스 */
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   &__steps {

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: 'small' | 'mobile' | 'large',
   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}
     >

src/page/Auth/Signup/component/ErrorMessage/ErrorMessage.module.scss

@@ -0,0 +1,14 @@
+.warn {
+  display: flex;
+  align-items: center;
+  margin-top: 9px;
+  padding-bottom: 16px;
+  gap: 7px;
+  height: 11px;
+
+  &--phrase {
+    display: block;
+    color: #f05d3d;
+    font-size: 11px;
+  }
+}

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>
+  );
+}

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;
   }
 
@@ -20,6 +36,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;

src/page/Auth/Signup/component/UserEmail/index.tsx

@@ -1,42 +1,81 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 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 = {
-  clickEvent?: () => void | null
+  goNext?: () => void;
+  userData: RegisterData,
+  setAuthenticate: (data:RegisterData) => void
 };
-export default function UserEmail({ clickEvent }:ButtonClickEvent) {
+
+export default function UserEmail({ userData, setAuthenticate }:ButtonClickEvent) {
   const { isMobile } = useMediaQuery();
+  const {
+    emailHandleSubmit, errors: formErrors, emailDuplicateRegister, watch,
+  } = useValidateEmail();
+  const {
+    isOpen, onSubmit, errorMessage: requestError, email, refetch,
+  } = useAuthCheck(userData.email ? userData.email : '', isMobile);
+  const {
+    verificationCode,
+    codeInput, errorMessage: verificateError,
+  } = useVerification(email, setAuthenticate, userData);
+
   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" />
-            <input className={styles.input} type="text" placeholder="인증번호" />
+            <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>
-          <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
-          <CustomButton buttonType="large" content="인증번호 발송" />
-        </div>
+          { formErrors.email && <ErrorMessage message={formErrors.email.message} />}
+          {(!formErrors.email && requestError && email === watch().email)
+           && <ErrorMessage message={requestError} />}
+          { verificateError && <ErrorMessage message={verificateError} />}
+          {isOpen ? (
+            <>
+              <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>
+              <CustomButton
+                buttonSize="large"
+                content="인증완료"
+                onClick={verificationCode}
+                disable={userData.isAuthentication}
+              />
+            </>
+          ) : (
+            <CustomButton
+              buttonSize="large"
+              content="인증번호발송"
+              submit
+            />
+          )}
+        </form>
       )
       : (
         <>
           <div className={styles['email-check']}>
             <span className={styles['email-check__phrase']}>
-              <span className={styles['email-check__phrase--user-email']}>[email protected]</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="인증번호 입력" ref={codeInput} />
             </div>
+            {verificateError && <ErrorMessage message={verificateError} />}
             <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={refetch} />
+            <CustomButton buttonSize="mobile" content="다음" onClick={verificationCode} />
           </div>
         </>
       )

src/page/Auth/Signup/component/UserId/UserId.module.scss

@@ -1,24 +1,35 @@
 @use "src/utils/styles/mediaQuery" as media;
 
 .form {
+  height: 100px;
+
+  @include media.media-breakpoint-down(mobile) {
+    height: 50px;
+  }
+
   &__label {
     display: block;
     font-size: 18px;
   }
 
   &__alert {
     display: block;
-    margin-top: 8px;
-    margin-left: 8px;
+    height: 11px;
     color: #858585;
-    font-size: 12px;
+    font-size: 11px;
+    margin-top: 9px;
+
+    // @include media.media-breakpoint-down(mobile) {
+    //   margin: 0;
+    // }
   }
 
   &__warn {
     display: flex;
     align-items: center;
     margin-top: 9px;
     gap: 7px;
+    height: 11px;
 
     &--phrase {
       display: block;
@@ -31,10 +42,14 @@
 .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) {
+    align-items: end;
+  }
+
   &__input {
     width: calc(100% - 32px - 80px);
     border: 1px solid #d2dae2;
@@ -54,26 +69,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;
-        }
-      }
-    }
   }
 }