diff --git a/src/app/find-id/page.tsx b/src/app/find-id/page.tsx index b14587ba..35bff7ad 100644 --- 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 && ( - <> -
- -
- - <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 index 2446dbaa..9c4f04af 100644 --- 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 index 92818846..3eee8f32 100644 --- 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;