[회원가입] 회원가입 페이지 API 연동

src/api/register/index.ts

@@ -1,6 +1,14 @@
 import { client } from 'api';
+import axios from 'axios';
+import API_PATH from 'config/constants';
+
 import {
-  AuthCodeParam, AuthCodeResponse, EmailRegisterParam, EmailRegisterResponse,
+  AuthCodeParam,
+  AuthCodeResponse,
+  EmailRegisterParam,
+  EmailRegisterResponse,
+  FilesResponse,
+  RegisterParam,
 } from 'model/register';
 
 export const getEmailDuplicate = async (param: string) => {
@@ -17,3 +25,21 @@ export const verificationAuthCode = async (param:AuthCodeParam) => {
   const { data } = await client.post<AuthCodeResponse>('/owners/verification/code', param);
   return AuthCodeResponse.parse(data);
 };
+
+export const registerUser = async (param:RegisterParam) => {
+  const { status } = await client.post('/owners/register', param);
+  return status;
+};
+
+export const getFileUrls = async (param:FormData, token:string) => {
+  const registerClient = axios.create({
+    baseURL: `${API_PATH}`,
+    timeout: 2000,
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+  const { data } = await registerClient.post('/owners/upload/files', param);
+  return FilesResponse.parse(data);
+};

src/component/common/CustomModal/CustomModal.module.scss

@@ -3,8 +3,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   left: 0;
   top: 0;
   background-color: #00000066;

src/model/register/index.ts

@@ -20,9 +20,22 @@ export const AuthCodeResponse = z.object({
 export type AuthCodeResponse = z.infer<typeof AuthCodeResponse>;
 
 export const RegisterParam = z.object({
+  attachment_urls: z.array(z.object({
+    file_url: z.string(),
+  })),
+  company_number: z.string(),
+  shop_id: z.number().nullable(),
   email: z.string(),
+  name: z.string(),
   password: z.string(),
-  isAuthentication: z.boolean().refine((value) => value === true),
+  phone_number: z.string(),
+  shop_name: z.string(),
 });
 
 export type RegisterParam = z.infer<typeof RegisterParam>;
+
+export const FilesResponse = z.object({
+  file_urls: z.array(z.string()),
+});
+
+export type FilesResponse = z.infer<typeof FilesResponse>;

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

@@ -36,7 +36,6 @@
 
   &__steps {
     width: calc(100% + 2px);
-    height: 681px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;

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

@@ -51,4 +51,22 @@
       background-color: #c4c4c4;
     }
   }
+
+  &--mobile-small {
+    width: 83px;
+    height: 37px;
+    font-weight: 500;
+    font-size: 15px;
+    background-color: #175c8e;
+    color: #ffffff;
+    border: none;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:disabled {
+      background-color: #c4c4c4;
+    }
+  }
 }

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

@@ -2,7 +2,8 @@ import styles from './CustomButton.module.scss';
 
 interface ButtonProps {
   content:string,
-  buttonSize: 'small' | 'mobile' | 'large',
+  // 80px | 부모 요소의 절반 width | 부모요소 전체 width | 83px
+  buttonSize: 'small' | 'mobile' | 'large' | 'mobile-small',
   disable?: boolean,
   submit?:boolean
   onClick?: () => void

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

@@ -1,10 +1,9 @@
 .warn {
   display: flex;
   align-items: center;
-  margin-top: 9px;
-  padding-bottom: 16px;
   gap: 7px;
   height: 11px;
+  margin: 8px 0 0;
 
   &--phrase {
     display: block;

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

@@ -26,14 +26,12 @@
     display: flex;
     flex-direction: column;
     margin-top: 8px;
-    margin-bottom: 16px;
-    gap: 8px;
   }
 
   .input {
     width: calc(100% - 32px);
     border: 1px solid #d2dae2;
-    height: calc(48px - 30px);
+    height: 18px;
     padding: 14px 16px;
 
     &::-webkit-inner-spin-button {
@@ -55,6 +53,34 @@
         border-bottom: 1px solid #f7941e;
       }
     }
+
+    &--code {
+      width: calc(100% - 32px);
+      border: 1px solid #d2dae2;
+      height: calc(48px - 30px);
+      padding: 14px 16px;
+      margin-top: 8px;
+
+      &::-webkit-inner-spin-button {
+        appearance: none;
+        margin: 0;
+      }
+
+      @include media.media-breakpoint-down(mobile) {
+        width: 100%;
+        margin-top: 31px;
+        padding: 0;
+        padding-bottom: 8px;
+        font-size: 15px;
+        border: none;
+        border-bottom: 1px solid #d2dae2;
+        outline: none;
+
+        &:focus {
+          border-bottom: 1px solid #f7941e;
+        }
+      }
+    }
   }
 
   &__alert {
@@ -92,3 +118,7 @@
     bottom: 0;
   }
 }
+
+.button {
+  margin-top: 18px;
+}

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

@@ -1,30 +1,25 @@
 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 useRegisterInfo from 'store/registerStore';
 import styles from './UserEmail.module.scss';
 
-type ButtonClickEvent = {
-  goNext?: () => void;
-  userData: RegisterData,
-  setAuthenticate: (data:RegisterData) => void
-};
-
-export default function UserEmail({ userData, setAuthenticate }:ButtonClickEvent) {
+export default function UserEmail() {
   const { isMobile } = useMediaQuery();
+  const { userInfo: userData } = useRegisterInfo();
   const {
-    emailHandleSubmit, errors: formErrors, emailDuplicateRegister, watch,
+    emailHandleSubmit, errors: formErrors, emailDuplicateRegister,
   } = useValidateEmail();
   const {
-    isOpen, onSubmit, errorMessage: requestError, email, refetch,
+    isOpen, onSubmit, email, refetch,
   } = useAuthCheck(userData.email ? userData.email : '', isMobile);
   const {
     verificationCode,
     codeInput, errorMessage: verificateError,
-  } = useVerification(email, setAuthenticate, userData);
+  } = useVerification(email);
 
   return (
     !isMobile
@@ -33,28 +28,30 @@ export default function UserEmail({ userData, setAuthenticate }:ButtonClickEvent
           <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="인증번호" ref={codeInput} disabled={userData.isAuthentication} />}
+            { formErrors.email && <ErrorMessage message={formErrors.email.message} />}
+            {isOpen && <input className={styles['input--code']} type="text" pattern="\d*" maxLength={6} placeholder="인증번호" ref={codeInput} disabled={userData.isAuthentication} />}
           </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>
+              { verificateError ? <ErrorMessage message={verificateError} />
+                : <span className={styles['email-check__alert']}>* 제한시간 5 : 00</span>}
+              <div className={styles.button}>
+                <CustomButton
+                  buttonSize="large"
+                  content="인증완료"
+                  onClick={verificationCode}
+                  disable={userData.isAuthentication}
+                />
+              </div>
+            </>
+          ) : (
+            <div className={styles.button}>
               <CustomButton
                 buttonSize="large"
-                content="인증완료"
-                onClick={verificationCode}
-                disable={userData.isAuthentication}
+                content="인증번호발송"
+                submit
               />
-            </>
-          ) : (
-            <CustomButton
-              buttonSize="large"
-              content="인증번호발송"
-              submit
-            />
+            </div>
           )}
         </form>
       )

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

@@ -18,10 +18,6 @@
     color: #858585;
     font-size: 11px;
     margin-top: 9px;
-
-    // @include media.media-breakpoint-down(mobile) {
-    //   margin: 0;
-    // }
   }
 
   &__warn {

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

@@ -1,24 +1,18 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 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 {
-  setId: (data:RegisterData) => void,
-  userData: RegisterData
-}
-
-export default function UserId({ setId, userData }:EmailInputProps) {
+export default function UserId() {
   const { isMobile } = useMediaQuery();
   const {
     emailHandleSubmit, errors: formErros, emailDuplicateRegister, watch,
   } = useValidateEmail();
   const {
     status, onSubmit, onMobileSubmit, email, errorMessage: requestError,
-  } = useCheckEmailDuplicate(userData, setId, isMobile);
+  } = useCheckEmailDuplicate(isMobile);
 
   return (
     <form

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

@@ -3,24 +3,21 @@ import { ReactComponent as ShowIcon } from 'assets/svg/auth/show.svg';
 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';
+import { User } from 'page/Auth/Signup/types/User';
 
 import { SubmitHandler } from 'react-hook-form';
 import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
+import useRegisterInfo from 'store/registerStore';
 import styles from './UserPassword.module.scss';
 
-interface PasswordInputProps {
-  setPassword: (data:RegisterData) => void,
-  userData?: RegisterData
-}
-
-export default function UserPassword({ setPassword, userData }:PasswordInputProps) {
+export default function UserPassword() {
   const { isMobile } = useMediaQuery();
+  const { userInfo: userData, setUserInfo: setPassword } = useRegisterInfo();
   const { value: isBlind, changeValue: changeIsBlind } = useBooleanState(true);
   const {
     passwordRegister, passwordConfirmRegister, errors: formErrors, handleSubmit,
   } = usePasswordConfirm();
-  const onSubmit:SubmitHandler<RegisterData> = (data) => {
+  const onSubmit:SubmitHandler<User> = (data) => {
     setPassword({ ...userData, password: data.password });
   };
   return (

src/page/Auth/Signup/hooks/useAuthCheck.ts

@@ -1,7 +1,7 @@
 import { useGenerateAuthCode } from 'query/register';
 import { useEffect, useState } from 'react';
 import { SubmitHandler } from 'react-hook-form';
-import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
+import { User } from 'page/Auth/Signup/types/User';
 
 export default function useAuthCheck(userEmail:string, isMobile:boolean) {
   const [email, setEmail] = useState('');
@@ -11,7 +11,7 @@ export default function useAuthCheck(userEmail:string, isMobile:boolean) {
     status, refetch, isError, error,
   } = useGenerateAuthCode(email);
 
-  const onSubmit:SubmitHandler<RegisterData> = (data) => {
+  const onSubmit:SubmitHandler<User> = (data) => {
     setEmail(() => (data.email ? data.email : ''));
   };
 

src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts

@@ -1,21 +1,19 @@
 import { useCheckDuplicate } from 'query/register';
 import { useEffect, useState } from 'react';
 import { SubmitHandler } from 'react-hook-form';
-import { RegisterData } from 'page/Auth/Signup/types/RegisterData';
+import { User } from 'page/Auth/Signup/types/User';
+import useRegisterInfo from 'store/registerStore';
 
-export default function useCheckEmailDuplicate(
-  userData:RegisterData,
-  setId: (data:RegisterData) => void,
-  isMobile: boolean,
-) {
+export default function useCheckEmailDuplicate(isMobile: boolean) {
   const [email, setEmail] = useState<string>('');
   const [errorMessage, setMessage] = useState('');
   const { status, refetch, error } = useCheckDuplicate(email);
+  const { userInfo: userData, setUserInfo: setId } = useRegisterInfo();
 
-  const onSubmit:SubmitHandler<RegisterData> = (data) => {
+  const onSubmit:SubmitHandler<User> = (data) => {
     setEmail(() => (data.email ? data.email : ''));
   };
-  const onMobileSubmit:SubmitHandler<RegisterData> = (data) => {
+  const onMobileSubmit:SubmitHandler<User> = (data) => {
     if (isMobile) {
       onSubmit(data);
     }