Merge pull request #183 from Kernel360/page-find-id-feature

페이지 기능: 아이디 찾기 기능
Kernel360 · Feb 20, 2024 · fdb7892 · fdb7892
2 parents 0d43977 + fd19e4c
commit fdb7892
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 44 deletions.
diff --git a/src/app/find-id/complete/page.tsx b/src/app/find-id/complete/page.tsx
@@ -2,19 +2,19 @@ import { COMPLETE_FIND_ID } from '@constants/completeMessage';
 import Confirmation from '@shared/confirmation/Confirmation';
 import Header from '@shared/header/Header';
 
-function CompleteFindIdPage() {
-  const topMargin = 16;
-  const bottomMargin = 66;
+const TOP_MARGIN = 16;
+const BOTTOM_MARGIN = 66;
 
+function CompleteFindIdPage() {
   return (
     <>
       <Header />
       <Confirmation
         options={COMPLETE_FIND_ID.options}
         title={COMPLETE_FIND_ID.title}
         description={COMPLETE_FIND_ID.description}
-        topMargin={topMargin}
-        bottomMargin={bottomMargin}
+        topMargin={TOP_MARGIN}
+        bottomMargin={BOTTOM_MARGIN}
         isHeader
       />
     </>

diff --git a/src/app/find-id/page.tsx b/src/app/find-id/page.tsx
@@ -3,6 +3,7 @@
 
 'use client';
 
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 import dynamic from 'next/dynamic';
@@ -15,6 +16,8 @@ import Spacing from '@shared/spacing/Spacing';
 import TextField from '@shared/text-field/TextField';
 import Title from '@shared/title/Title';
 
+import CompleteFindIdPage from './complete/page';
+
 const FixedBottomButton = dynamic(() => { return import('@shared/fixedBottomButton/FixedBottomButton'); }, {
   ssr: false,
 });
@@ -24,50 +27,50 @@ function FindIdPage() {
     mode: 'onBlur',
   });
   const { mutate } = useFindId();
+  const [step, setStep] = useState(1);
 
   const onSubmit = (data: FindId) => {
     const { email } = data;
     mutate({ email }, {
-      onError: (error) => {
-        console.error('Error:', error);
-        alert('다시 입력해주세요');
-        // TODO: 아이디 찾기 실패 시 알림 메세지 바로 출력
-      },
       onSuccess: () => {
-        alert('회원님의 이메일로 아이디 전송완료');
-        // TODO: 아이디 전송완료 페이지 로드하기
+        setStep((currentStep) => { return currentStep + 1; });
       },
     });
   };
 
   return (
     <>
-      <Header />
-      <Spacing size={16} />
-      <main className="mainContainer">
-        <Title title="아이디 찾기" description="가입할 때 입력한 이메일을 입력해주세요." size={4} descriptionColor="gray400" />
-        <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>
+      {step === 1 && (
+        <>
+          <Header />
+          <Spacing size={16} />
+          <main className="mainContainer">
+            <Title title="아이디 찾기" description="가입할 때 입력한 이메일을 입력해주세요." size={4} descriptionColor="gray400" />
+            <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>
+        </>
+      )}
+      {step === 2 && <CompleteFindIdPage />}
     </>
   );
 }

diff --git a/src/components/shared/kakao-script/KakaoLoginScript.tsx b/src/components/shared/kakao-script/KakaoLoginScript.tsx
@@ -14,7 +14,9 @@ declare global {
 
 function KakaoLoginScript() {
   const onLoad = () => {
-    window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_APP_JS_KEY);
+    if (!window.Kakao.isInitialized()) {
+      window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_APP_JS_KEY);
+    }
   };
 
   return (

diff --git a/src/components/shared/modal/Modal.tsx b/src/components/shared/modal/Modal.tsx
@@ -21,9 +21,9 @@ interface ModalProps {
   title: React.ReactNode
   description: React.ReactNode
   leftButtonLabel: React.ReactNode
-  rightButtonLabel: React.ReactNode
+  rightButtonLabel?: React.ReactNode
   onLeftButtonClick: () => void
-  onRightButtonClick: () => void
+  onRightButtonClick?: () => void
 }
 
 function Modal({

diff --git a/src/contexts/ModalContext.tsx b/src/contexts/ModalContext.tsx
@@ -47,7 +47,7 @@ export function ModalContextProvider({ children }: { children: React.ReactNode }
       },
       onRightButtonClick: () => {
         close();
-        onRightButtonClick();
+        onRightButtonClick?.();
       },
       open: true,
     });

diff --git a/src/remote/api/requests/auth/auth.post.api.ts b/src/remote/api/requests/auth/auth.post.api.ts
@@ -2,6 +2,7 @@ import {
   ChangePassword,
   FindId, FindPassword, ISignIn, ISignUp, UserInfoType,
 } from '../../types/auth';
+import { ICommon } from '../../types/common';
 import { postRequest, putRequest } from '../requests.api';
 
 export const signup = async ({
@@ -27,7 +28,7 @@ export const login = async ({
 export const findId = async ({
   email,
 }: FindId) => {
-  const response = await postRequest<null, FindId>('/member/find-id', {
+  const response = await postRequest<ICommon<null>, FindId>('/member/find/memberId', {
     email,
   });
 

diff --git a/src/remote/queries/auth/useFindId.ts b/src/remote/queries/auth/useFindId.ts
@@ -1,10 +1,22 @@
 /* eslint-disable no-console */
 import { useMutation } from '@tanstack/react-query';
 
+import useModal from '@contexts/ModalContext';
 import { findId } from '@remote/api/requests/auth/auth.post.api';
 
 function useFindId() {
-  return useMutation({ mutationFn: findId });
+  const { open } = useModal();
+  return useMutation({
+    mutationFn: findId,
+    onError: () => {
+      open({
+        title: '아이디 찾기',
+        description: '다시 입력해주세요',
+        leftButtonLabel: '닫기',
+        onLeftButtonClick: () => { },
+      });
+    },
+  });
 }
 
 export default useFindId;