Merge pull request #114 from Kernel360/page-find-username

페이지 UI: 아이디 찾기 페이지

src/app/find-id/layout.tsx

@@ -0,0 +1,7 @@
+function FindIdLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ padding: '0 24px' }}>{children}</div>
+  );
+}
+
+export default FindIdLayout;

src/app/find-id/page.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable no-alert */
+/* eslint-disable @typescript-eslint/no-misused-promises */
+
+'use client';
+
+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 useFindId from '@remote/queries/auth/useFindId';
+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';
+
+const FixedBottomButton = dynamic(() => { return import('@shared/fixedBottomButton/FixedBottomButton'); }, {
+  ssr: false,
+});
+
+function FindIdPage() {
+  const { register, handleSubmit, formState: { isValid, errors, isDirty } } = useForm<IFindId>({
+    mode: 'onBlur',
+  });
+  const { mutate } = useFindId();
+
+  const onSubmit = (data: IFindId) => {
+    const { email } = data;
+    mutate({ email }, {
+      onError: (error) => {
+        console.error('Error:', error);
+        alert('다시 입력해주세요');
+        // TODO: 아이디 찾기 실패 시 알림 메세지 바로 출력
+      },
+      onSuccess: () => {
+        alert('회원님의 이메일로 아이디 전송완료');
+        // TODO: 아이디 전송완료 페이지 로드하기
+      },
+    });
+  };
+
+  return (
+    <>
+      <Header isDisplayLogo={false} />
+      <Spacing size={16} />
+      <main>
+        <Title title="아이디 찾기" description="가입할 때 입력한 이메일을 입력해주세요." size={4} descriptionColor="tertiary" />
+        <Spacing size={40} />
+        <TextField
+          label="이메일"
+          required
+          placeholder="이메일"
+          {...register('email', {
+            required: true,
+            pattern: VALIDATION_MESSAGE_MAP.email.value,
+          })}
+          hasError={!!errors.email}
+          helpMessage={VALIDATION_MESSAGE_MAP.failedFindId.message}
+        />
+        <div>
+          <FixedBottomButton
+            disabled={!isValid || !isDirty}
+            onClick={handleSubmit(onSubmit)}
+            size="medium"
+          >
+            다음
+          </FixedBottomButton>
+        </div>
+      </main>
+    </>
+  );
+}
+
+export default FindIdPage;

src/components/shared/fixedBottomButton/FixedBottomButton.tsx

@@ -13,17 +13,20 @@ interface FixedBottomButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
   onClick: () => void
   disabled?: boolean
   children: React.ReactNode
+  size?: 'large' | 'small' | 'medium'
 }
 
-function FixedBottomButton({ children, onClick, disabled }: FixedBottomButtonProps) {
+function FixedBottomButton({
+  children, onClick, disabled, size = 'large',
+}: FixedBottomButtonProps) {
   const portalRoot = document.getElementById('portal-root');
   if (portalRoot == null) {
     return null;
   }
 
   return createPortal(
     <div className={cx('container')}>
-      <Button size="large" full disabled={disabled} onClick={onClick}>
+      <Button size={size} full disabled={disabled} onClick={onClick}>
         {children}
       </Button>
     </div>,

src/components/shared/text-field/TextField.tsx

@@ -37,7 +37,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextFiel
     <div>
       {label && <Text typography="t6" display="inline-block" color={labelColor}>{label}</Text>}
       {required && <Text typography="t6" display="inline-block" color="red">*</Text>}
-      <Spacing size={12} />
+      <Spacing size={4} />
       <Input
         ref={ref}
         aria-vaild={hasError}
@@ -46,10 +46,10 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextFiel
         isPasswordType={isPasswordType}
         {...props}
       />
-      {hasError ? <Spacing size={6} /> : <Spacing size={20} />}
+      {hasError ? <Spacing size={4} /> : <Spacing size={20} />}
       {hasError && (
         <>
-          <Text typography="t7" color={labelColor} display="inline-block">{helpMessage}</Text>
+          <Text typography="t8" color={labelColor} display="inline-block">{helpMessage}</Text>
           <Spacing size={6} />
         </>
       )}

src/components/shared/title/Title.tsx

@@ -23,7 +23,7 @@ function Title({
         {titleIcon}
       </Flex>
       <Spacing size={size} />
-      <Text color={descriptionColor}>{description}</Text>
+      <Text typography="t6" color={descriptionColor}>{description}</Text>
     </Flex>
   );
 }

src/constants/validationMessage.ts

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

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

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

src/remote/api/types/auth.ts

@@ -1,3 +1,7 @@
+export interface IFindId {
+  email:string
+}
+
 export interface ISignIn {
   id: string
   password: string

src/remote/queries/auth/useFindId.ts

@@ -0,0 +1,10 @@
+/* eslint-disable no-console */
+import { useMutation } from '@tanstack/react-query';
+
+import { findId } from '@remote/api/requests/auth/auth.post.api';
+
+function useFindId() {
+  return useMutation({ mutationFn: findId });
+}
+
+export default useFindId;

src/styles/button.ts

@@ -42,7 +42,7 @@ export const buttonSizeMap = {
     padding: '8px 9px',
   },
   medium: {
-    fontSize: '15px',
+    fontSize: '16px',
     padding: '10px 15px',
   },
   large: {