[비즈니스] 비밀번호 찾기 문자인증 도입 (#349)

* feat: 비밀번호 찾기 초기 페이지 구성

* feat: 비밀번호 찾기 문자인증 api 생성

* feat: 문자 인증 response 인터페이스 추가

* feat: 비밀번호 찾기 문자 인증 페이지 완성

* refactor: 비밀번호 변경 api 생성 및 타입 생성

* feat: 비밀번호 변경 페이지 완성

* feat: 비밀번호 찾기 페이지 추가

* refactor: warning 아이콘 추가

* chore: scss 파일 위치 수정

* chore: 불필요한 파일 삭제 및 적용

* refactor: import cycle 해결

* fix: lint 에러 수정

* refactor: 사용자 입력으로 오류 수정 시 에러 초기화

* feat: useDebounce 훅 추가

* refactor: 오류 처리 및 useDebouce 적용

* refactor: 코드 가독성 향상

src/App.tsx

@@ -5,9 +5,6 @@ import OwnerLayout from 'layout/OwnerLayout';
 import CoopLayout from 'layout/CoopLayout';
 import Login from 'page/Auth/Login';
 import Signup from 'page/Auth/Signup';
-import FindPassword from 'page/Auth/FindPassword/SendAuthNumber';
-import NewPassword from 'page/Auth/FindPassword/NewPassword';
-import CompleteChangePassword from 'page/Auth/FindPassword/CompleteChangePassword';
 import AuthLayout from 'layout/AuthLayout';
 import MyShopPage from 'page/MyShopPage';
 import ShopRegistration from 'page/ShopRegistration';
@@ -23,6 +20,7 @@ import AddingEvent from 'page/ManageEvent/AddingEvent';
 import ModifyEvent from 'page/ManageEvent/ModifyEvent';
 import LogPage from 'component/common/PageLog';
 import CommonLayout from 'page/Auth/components/Common';
+import FindPassword from 'page/Auth/FindPassword';
 
 interface ProtectedRouteProps {
   userTypeRequired: UserType;
@@ -80,11 +78,7 @@ function App() {
               <Route path="/find-id" element={<PageNotFound />} />
               <Route path="/find-password" element={<FindPassword />} />
             </Route>
-            <Route path="/find" element={<CommonLayout />} />
-            <Route path="/register" element={<CommonLayout />} />
           </Route>
-          <Route path="/new-password" element={<NewPassword />} />
-          <Route path="/complete-change-password" element={<CompleteChangePassword />} />
         </Route>
       </Routes>
       <Toast />

src/api/auth/index.ts

@@ -1,5 +1,6 @@
 import { accessClient, client } from 'api';
 import {
+  CertificationResponse,
   LoginParams, LoginResponse, OwnerResponse, UserTypeResponse,
 } from 'model/auth';
 
@@ -34,3 +35,16 @@ export const findPassword = ({
 });
 
 export const newPassword = ({ address, password }: { address: string, password: string }) => client.put('/owners/password/reset', { address, password });
+
+export const sendVerifyCode = (phone_number: string) => client.post('/owners/password/reset/verification/sms', {
+  phone_number,
+});
+
+export const verifyCode = ({ phone_number, certification_code } : { phone_number:string, certification_code:string }) => client.post<CertificationResponse>('/owners/password/reset/send/sms', {
+  phone_number, certification_code,
+});
+
+export const changePassword = ({ phone_number, password } : { phone_number:string, password:string }) => client.put('/owners/password/reset/sms', {
+  phone_number,
+  password,
+});

src/model/auth/index.ts

@@ -77,3 +77,29 @@ export type User = z.infer<typeof User>;
 export interface LoginForm extends LoginParams {
   isAutoLogin: boolean;
 }
+
+export interface CertificationResponse {
+  token: string;
+}
+
+export interface ChangePasswordForm {
+  password: string;
+  passwordCheck: string;
+  phone_number: string;
+}
+
+interface FindPassword {
+  phone_number: string;
+  certification_code: string;
+  password: string;
+}
+
+export interface Register extends FindPassword {
+  company_number: string,
+  name: string,
+  shop_id: number,
+  shop_name: string,
+  attachment_urls: {
+    file_url: string
+  }[],
+}

src/page/Auth/FindPassword/ChangePassword/index.tsx

@@ -0,0 +1,83 @@
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useOutletContext } from 'react-router-dom';
+import { ChangePasswordForm } from 'model/auth';
+import { OutletProps } from 'page/Auth/FindPassword/entity';
+import { ReactComponent as Warning } from 'assets/svg/auth/warning.svg';
+import styles from 'page/Auth/FindPassword/index.module.scss';
+
+const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,18}$/;
+
+export default function ChangePassword() {
+  const {
+    register, formState: { errors, isValid }, getValues, clearErrors,
+  } = useFormContext<ChangePasswordForm>();
+
+  const steps: OutletProps = useOutletContext();
+  const { setIsStepComplete } = steps;
+
+  useEffect(() => {
+    if (isValid) {
+      clearErrors();
+      setIsStepComplete(true);
+    } else {
+      setIsStepComplete(false);
+    }
+  });
+
+  return (
+    <form className={styles.container}>
+      <section className={styles.section}>
+        <div className={styles.title}>새 비밀번호</div>
+        <input
+          className={styles.input}
+          type="password"
+          placeholder="새 비밀번호를 입력해주세요."
+          {...register('password', {
+            required: {
+              value: true,
+              message: '필수 입력 항목입니다.',
+            },
+            pattern: {
+              value: passwordRegex,
+              message: '특수문자 포함 영어와 숫자 6~18 자리로 입력해주세요.',
+            },
+          })}
+        />
+        {
+          errors.password
+            ? (
+              <div className={styles.error}>
+                <Warning />
+                {errors.password.message}
+              </div>
+            ) : (
+              <div className={styles.comment}>
+                * 특수문자 포함 영어와 숫자 6~18 자리
+              </div>
+            )
+        }
+
+      </section>
+      <section className={styles.section}>
+        <div className={styles.title}>새 비밀번호 확인</div>
+        <input
+          className={styles.input}
+          type="password"
+          placeholder="새 비밀번호를 다시 입력해주세요."
+          {...register('passwordCheck', {
+            validate: (value) => value === getValues('password') || '비밀번호가 일치하지 않습니다.',
+          })}
+        />
+        {
+          errors.passwordCheck && (
+            <div className={styles.error}>
+              <Warning />
+              {errors.passwordCheck.message}
+            </div>
+          )
+        }
+      </section>
+    </form>
+  );
+}