feat: 회원가입 페이지, 아이디 찾기 페이지 토스트 적용

Kernel360 · Feb 20, 2024 · f320f71 · f320f71
1 parent 95e95de
commit f320f71
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 51 deletions.
diff --git a/src/app/find-id/page.tsx b/src/app/find-id/page.tsx
@@ -3,7 +3,6 @@
 
 'use client';
 
-import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 import dynamic from 'next/dynamic';
@@ -16,8 +15,6 @@ 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,
 });
@@ -27,50 +24,40 @@ function FindIdPage() {
     mode: 'onBlur',
   });
   const { mutate } = useFindId();
-  const [step, setStep] = useState(1);
 
   const onSubmit = (data: FindId) => {
     const { email } = data;
-    mutate({ email }, {
-      onSuccess: () => {
-        setStep((currentStep) => { return currentStep + 1; });
-      },
-    });
+    mutate({ email });
   };
 
   return (
     <>
-      {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 />}
+      <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>
     </>
   );
 }

diff --git a/src/remote/queries/auth/useFindId.ts b/src/remote/queries/auth/useFindId.ts
@@ -1,20 +1,21 @@
-/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import { toast } from 'react-toastify';
+
 import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { useRouter } from 'next/router';
 
-import useModal from '@contexts/ModalContext';
 import { findId } from '@remote/api/requests/auth/auth.post.api';
 
 function useFindId() {
-  const { open } = useModal();
+  const router = useRouter();
   return useMutation({
     mutationFn: findId,
-    onError: () => {
-      open({
-        title: '아이디 찾기',
-        description: '다시 입력해주세요',
-        leftButtonLabel: '닫기',
-        onLeftButtonClick: () => { },
-      });
+    onSuccess: () => {
+      router.push('/find-id/complete');
+    },
+    onError: (error: AxiosError) => {
+      toast.error(error.message);
     },
   });
 }

diff --git a/src/remote/queries/auth/useSignup.ts b/src/remote/queries/auth/useSignup.ts
@@ -1,4 +1,7 @@
+import { toast } from 'react-toastify';
+
 import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 import { useRouter } from 'next/navigation';
 
 import { signup } from '@remote/api/requests/auth/auth.post.api';
@@ -10,7 +13,11 @@ function useSignup() {
     router.push('/signup/complete');
   };
 
-  return useMutation({ mutationFn: signup, onSuccess });
+  const onError = (error: AxiosError) => {
+    toast.error(error.message);
+  };
+
+  return useMutation({ mutationFn: signup, onSuccess, onError });
 }
 
 export default useSignup;