feat : 오너 정보 등록 다음 단계 로직

BCSDLab · Jun 20, 2024 · 5be3d9a · 5be3d9a
1 parent 5771f45
commit 5be3d9a
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 25 deletions.
diff --git a/src/model/auth/index.ts b/src/model/auth/index.ts
@@ -10,11 +10,6 @@ export type LoginParams = z.infer<typeof LoginParams>;
 export const LoginResponse = z.object({
   refresh_token: z.string(),
   token: z.string(),
-  user_type: z.union([
-    z.literal('OWNER'),
-    z.literal('COOP'),
-    z.null(),
-  ]),
 });
 
 export type LoginResponse = z.infer<typeof LoginResponse>;
@@ -50,7 +45,6 @@ export type OwnerShop = z.infer<typeof OwnerShop>;
 export const OwnerResponse = z.object({
   attachments: z.array(UserFile),
   company_number: z.string(),
-  email: z.string(),
   name: z.string(),
   shops: z.array(OwnerShop),
 });

diff --git a/src/page/Auth/Signup/components/ownerInfoStep/index.tsx b/src/page/Auth/Signup/components/ownerInfoStep/index.tsx
@@ -1,5 +1,5 @@
 import { useFormContext } from 'react-hook-form';
-import { useState, ChangeEvent } from 'react';
+import { useState, useEffect, ChangeEvent } from 'react';
 import { ReactComponent as FileIcon } from 'assets/svg/auth/file-icon.svg';
 import { ReactComponent as DeleteFile } from 'assets/svg/auth/delete-file.svg';
 import FileUploadModal from 'page/Auth/Signup/components/fileUploadModal';
@@ -18,9 +18,10 @@ interface OwnerInfo {
 
 interface OwnerInfoStepProps {
   onSearch: () => void;
+  setIsStepComplete: (state: boolean) => void;
 }
 
-export default function OwnerInfoStep({ onSearch }: OwnerInfoStepProps) {
+export default function OwnerInfoStep({ onSearch, setIsStepComplete }: OwnerInfoStepProps) {
   const {
     register,
     watch,
@@ -77,6 +78,16 @@ export default function OwnerInfoStep({ onSearch }: OwnerInfoStepProps) {
     }
   };
 
+  const watchedValues = watch(['name', 'shop_name', 'company_number', 'attachment_urls']);
+
+  useEffect(() => {
+    const values = watch();
+    const isComplete = values.name && values.shop_name
+    && values.company_number
+    && values.attachment_urls;
+    setIsStepComplete(!!isComplete);
+  }, [watchedValues, setIsStepComplete, watch]);
+
   return (
     <div className={styles['owner-info-container']}>
       <div className={styles['owner-name']}>

diff --git a/src/page/Auth/Signup/components/phoneStep/index.tsx b/src/page/Auth/Signup/components/phoneStep/index.tsx
@@ -195,11 +195,45 @@ export default function PhoneStep({ setIsStepComplete }: PhoneStepProps) {
       </div>
       <div className={`${styles.password} ${styles['input-box']}`}>
         <span className={styles.password__label}>비밀번호</span>
-        <input {...register('password')} type="password" placeholder="비밀번호를 입력해주세요" />
+        <input
+          {...register('password', {
+            pattern: {
+              value: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,18}$/,
+              message: '특수문자 포함 영어와 숫자 6~18 자리로 입력해주세요.',
+            },
+          })}
+          type="password"
+          placeholder="비밀번호를 입력해주세요"
+        />
+        <div className={styles['error-message']}>
+          {errors.password && (
+            <>
+              <Error />
+              {errors.password.message}
+            </>
+          )}
+        </div>
       </div>
       <div className={`${styles['password-confirm']} ${styles['input-box']}`}>
         <span className={styles.password__label}>비밀번호 확인</span>
-        <input {...register('passwordConfirm')} type="password" placeholder="비밀번호를 확인해주세요." />
+        <input
+          {...register('passwordConfirm', {
+            pattern: {
+              value: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,18}$/,
+              message: '특수문자 포함 영어와 숫자 6~18 자리로 입력해주세요.',
+            },
+          })}
+          type="password"
+          placeholder="비밀번호를 확인해주세요."
+        />
+        <div className={styles['error-message']}>
+          {errors.passwordConfirm && (
+            <>
+              <Error />
+              {errors.passwordConfirm.message}
+            </>
+          )}
+        </div>
       </div>
     </div>
   );

diff --git a/src/page/Auth/Signup/index.tsx b/src/page/Auth/Signup/index.tsx
@@ -75,7 +75,12 @@ export default function SignUp() {
       {steps.index === 2 && (steps.isSearch
         ? (
           <SearchShop />
-        ) : <OwnerInfoStep onSearch={() => steps.setIsSearch(true)} />
+        ) : (
+          <OwnerInfoStep
+            onSearch={() => steps.setIsSearch(true)}
+            setIsStepComplete={setStepPhoneComplete}
+          />
+        )
       )}
     </>
   );

diff --git a/src/page/Auth/components/Common/index.tsx b/src/page/Auth/components/Common/index.tsx
@@ -8,7 +8,7 @@ import { changePassword } from 'api/auth';
 import { phoneRegisterUser } from 'api/register';
 import { isKoinError, sendClientError } from '@bcsdlab/koin';
 import { useStep } from 'page/Auth/hook/useStep';
-import { useDebounce } from 'utils/hooks/useDebounce';
+import sha256 from 'utils/ts/SHA-256';
 // eslint-disable-next-line
 import Done from '../Done/index';
 import styles from './index.module.scss';
@@ -77,17 +77,6 @@ export default function CommonLayout() {
     formState: { errors }, setError, getValues, setValue,
   } = method;
 
-  const debounce = useDebounce<RegisterParam>(registerUser, {
-    company_number: getValues('company_number'),
-    name: getValues('name'),
-    password: getValues('password'),
-    phone_number: getValues('phone_number'),
-    shop_id: getValues('shop_id'),
-    shop_name: getValues('shop_name'),
-    attachment_urls: getValues('attachment_urls'),
-    setError,
-  });
-
   const steps = useStep(isFindPassword ? 'find' : 'register');
   const {
     nextStep,
@@ -104,13 +93,25 @@ export default function CommonLayout() {
   // eslint-disable-next-line
   const progressPercentage = (index + 1) / totalStep * 100;
 
-  const stepCheck = () => {
+  const stepCheck = async () => {
     if (isComplete) navigate('/login');
     if (!errors.root) {
       if (index + 1 === totalStep && isFindPassword) {
         setNewPassword(getValues('phone_number'), getValues('password'), setError);
       } else if (index + 1 === totalStep && !isFindPassword) {
-        debounce();
+        const hash = await sha256(getValues('password'));
+        registerUser(
+          {
+            company_number: getValues('company_number'),
+            name: getValues('name'),
+            password: hash,
+            phone_number: getValues('phone_number'),
+            shop_id: getValues('shop_id'),
+            shop_name: getValues('shop_name'),
+            attachment_urls: getValues('attachment_urls'),
+            setError,
+          },
+        );
       }
       nextStep();
     }