Merge pull request #127 from Kernel360/page-find-password

페이지 UI: 비밀번호 찾기 페이지

src/app/find-id/page.tsx

@@ -8,7 +8,7 @@ import { useForm } from 'react-hook-form';
 import dynamic from 'next/dynamic';
 
 import VALIDATION_MESSAGE_MAP from '@constants/validationMessage';
-import { IFindId } from '@remote/api/types/auth';
+import { FindId } from '@remote/api/types/auth';
 import useFindId from '@remote/queries/auth/useFindId';
 import Header from '@shared/header/Header';
 import Spacing from '@shared/spacing/Spacing';
@@ -20,12 +20,12 @@ const FixedBottomButton = dynamic(() => { return import('@shared/fixedBottomButt
 });
 
 function FindIdPage() {
-  const { register, handleSubmit, formState: { isValid, errors, isDirty } } = useForm<IFindId>({
+  const { register, handleSubmit, formState: { isValid, errors, isDirty } } = useForm<FindId>({
     mode: 'onBlur',
   });
   const { mutate } = useFindId();
 
-  const onSubmit = (data: IFindId) => {
+  const onSubmit = (data: FindId) => {
     const { email } = data;
     mutate({ email }, {
       onError: (error) => {

src/app/find-password/page.module.scss

@@ -0,0 +1,3 @@
+.mainContainer {
+    padding: 0 24px;
+}

src/app/find-password/page.tsx

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+/* eslint-disable no-console */
+
+'use client';
+
+import { useForm } from 'react-hook-form';
+
+import classNames from 'classnames/bind';
+import dynamic from 'next/dynamic';
+
+import VALIDATION_MESSAGE_MAP from '@constants/validationMessage';
+import { FindPassword } from '@remote/api/types/auth';
+import useFindPassword from '@remote/queries/auth/useFindPassword';
+import Header from '@shared/header/Header';
+import Spacing from '@shared/spacing/Spacing';
+import TextField from '@shared/text-field/TextField';
+import Title from '@shared/title/Title';
+
+import styles from './page.module.scss';
+
+const cx = classNames.bind(styles);
+
+const FixedBottomButton = dynamic(() => { return import('@shared/fixedBottomButton/FixedBottomButton'); }, {
+  ssr: false,
+});
+
+function FindPasswordPage() {
+  const {
+    register, handleSubmit,
+    formState: { isValid, isDirty },
+  } = useForm<FindPassword>({
+    mode: 'onBlur',
+  });
+  const { mutate, isError } = useFindPassword();
+
+  const onSubmit = (data: FindPassword) => {
+    const { id } = data;
+    mutate({ id }, {
+      onSuccess: () => {
+        alert('비밀번호 변경 페이지로 이동');
+        // TODO: 비밀번호 변경 페이지 로드하기
+      },
+    });
+
+    console.log(id);
+  };
+
+  return (
+    <>
+      <Header isDisplayLogo={false} />
+      <Spacing size={16} />
+      <main className={cx('mainContainer')}>
+        <Title title="비밀번호 찾기" description="비밀번호를 찾으실 아이디를 입력해주세요." size={4} descriptionColor="tertiary" />
+        <Spacing size={40} />
+        <TextField
+          label="아이디"
+          required
+          placeholder="아이디"
+          {...register('id', {
+            required: true,
+            pattern: VALIDATION_MESSAGE_MAP.id.value,
+          })}
+          hasError={isError}
+          helpMessage={VALIDATION_MESSAGE_MAP.failedFindPassword.message}
+        />
+        <div>
+          <FixedBottomButton
+            disabled={!isValid || !isDirty}
+            onClick={handleSubmit(onSubmit)}
+            size="medium"
+          >
+            다음
+          </FixedBottomButton>
+        </div>
+      </main>
+    </>
+  );
+}
+export default FindPasswordPage;

src/constants/validationMessage.ts

@@ -21,6 +21,7 @@ const VALIDATION_MESSAGE_MAP: {
   },
   failedLogin: { message: '아이디 또는 비밀번호를 확인해주세요.' },
   failedFindId: { message: '잘못된 이메일입니다.' },
+  failedFindPassword: { message: '아이디가 존재하지 않습니다.' },
 } as const;
 
 export default VALIDATION_MESSAGE_MAP;

src/remote/api/requests/auth/auth.post.api.ts

@@ -1,4 +1,6 @@
-import { IFindId, ISignIn, ISignUp } from '../../types/auth';
+import {
+  FindId, FindPassword, ISignIn, ISignUp,
+} from '../../types/auth';
 import { postRequest } from '../requests.api';
 
 export const signup = async ({
@@ -23,10 +25,20 @@ export const login = async ({
 
 export const findId = async ({
   email,
-}: IFindId) => {
-  const response = await postRequest<null, IFindId>('/member/find-id', {
+}: FindId) => {
+  const response = await postRequest<null, FindId>('/member/find-id', {
     email,
   });
 
   return response;
 };
+
+export const findPassword = async ({
+  id,
+}: FindPassword) => {
+  const response = await postRequest<null, FindPassword>('/member/find-password', {
+    id,
+  });
+
+  return response;
+};

src/remote/api/types/auth.ts

@@ -1,7 +1,3 @@
-export interface IFindId {
-  email:string
-}
-
 export interface ISignIn {
   id: string
   password: string
@@ -12,3 +8,7 @@ export interface ISignUp extends ISignIn {
   gender: string | null
   age: string | null
 }
+
+export type FindPassword = Pick<ISignUp, 'id'>;
+
+export type FindId = Pick<ISignUp, 'email'>;

src/remote/queries/auth/useFindPassword.ts

@@ -0,0 +1,9 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { findPassword } from '@remote/api/requests/auth/auth.post.api';
+
+function useFindPassword() {
+  return useMutation({ mutationFn: findPassword });
+}
+
+export default useFindPassword;