Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[노철]- 이메일 인증 에러 핸들링 #403

Merged
merged 3 commits into from
Jan 8, 2024
Merged

[노철]- 이메일 인증 에러 핸들링 #403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a2bb838
♻️ : #402 - useEffect 제거
qkdl60 Jan 4, 2024
b683207
♻️ : #402 - html lang 변경
qkdl60 Jan 4, 2024
4a756b4
♻️ : #402 - mutate 비동기함수로 변경, onSuccess 추가
qkdl60 Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function RootLayout({
}) {
const hasAuth = cookies().has('auth');
return (
<html lang="en">
<html lang="ko">
<head>
<link
rel="stylesheet"
Expand Down
60 changes: 34 additions & 26 deletions src/components/ModalVerification/ModalVerification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import { Button, Icon } from '@/components';
import { usePostSendVerificationMutation } from '@/hooks/apis/usePostSendVerificationMutation';
import { usePostVerifyMutation } from '@/hooks/apis/usePostVerifyMutation';
import { checkEmailValidation } from '@/utils/checkEmailValidation';
import { AxiosError } from 'axios';
import classNames from 'classnames';
import { useEffect, useState } from 'react';
import { useState } from 'react';
import './index.scss';

interface ModalVerificationProps {
Expand All @@ -24,38 +25,42 @@ export default function ModalVerification({
isPending,
isSuccess,
error,
} = usePostSendVerificationMutation();
} = usePostSendVerificationMutation({
throwOnError: (error) => {
const axiosError = error as AxiosError;
if (axiosError && axiosError.response) {
const status = axiosError.response.status;
if (status > 400 && status < 500) {
return false;
}
}
return true;
},
});

const {
mutateAsync: submitCertification,
mutate: submitCertification,
isPending: isVerifyPending,
isError: isVerifyError,
error: verifyError,
isSuccess: isVerifySuccess,
} = usePostVerifyMutation();
} = usePostVerifyMutation({
throwOnError: (error) => {
const axiosError = error as AxiosError;
if (axiosError && axiosError.response) {
const status = axiosError.response.status;
if (status > 400 && status < 500) {
return false;
}
}
return true;
},
});

const [email, setEmail] = useState<string>('');
const [code, setCode] = useState<string>('');
const [isValidEmail, setIsValidEmail] = useState<boolean>(true);
const [isValidCode, setIsValidCode] = useState<boolean>(true);
//TODO: 에러 처리, onError에서 상태 변경하는 형식으로
useEffect(() => {
if (error && error.response) {
const status = error.response.status;
if (status <= 400 || status >= 500) {
throw error;
}
} else if (error) {
throw error;
}
if (verifyError && verifyError.response) {
const status = verifyError.response.status;
if (status <= 400 || status >= 500) {
throw verifyError;
}
} else if (verifyError) {
throw verifyError;
}
}, [error, verifyError]);

const handleChangeEmail = (event: React.ChangeEvent<HTMLInputElement>) => {
setEmail(event.target.value);
Expand All @@ -74,11 +79,14 @@ export default function ModalVerification({
const inputValue = event.target.value.replace(/[^0-9]/g, '');
setCode(inputValue);
};
const handleSubmitCode = async () => {
const handleSubmitCode = () => {
if (code.length == 6) {
setIsValidCode(true);
await submitCertification(code);
setVerifiedEmail && setVerifiedEmail();
submitCertification(code, {
onSuccess: () => {
setVerifiedEmail && setVerifiedEmail();
},
});
} else {
setIsValidCode(false);
}
Expand Down
7 changes: 5 additions & 2 deletions src/hooks/apis/usePostSendVerificationMutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import { postSendVerification } from '@/apis/client/postSendVerification';
import { useMutation } from '@tanstack/react-query';
import { UseMutationOptions, useMutation } from '@tanstack/react-query';
import { AxiosError, AxiosResponse } from 'axios';

export const usePostSendVerificationMutation = () => {
export const usePostSendVerificationMutation = ({
throwOnError,
}: UseMutationOptions) => {
const { mutate, isError, isSuccess, error, isPending } = useMutation<
AxiosResponse,
AxiosError<ErrorResponseData>,
string
>({
mutationFn: (email: string) => postSendVerification(email),
throwOnError,
});
return {
mutate,
Expand Down
9 changes: 5 additions & 4 deletions src/hooks/apis/usePostVerifyMutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { postVerify } from '@/apis/client/postVerify';
import { useMutation } from '@tanstack/react-query';
import { UseMutationOptions, useMutation } from '@tanstack/react-query';
import { AxiosError, AxiosResponse } from 'axios';

export const usePostVerifyMutation = () => {
const { isError, error, isPending, isSuccess, mutateAsync } = useMutation<
export const usePostVerifyMutation = ({ throwOnError }: UseMutationOptions) => {
const { isError, error, isPending, isSuccess, mutate } = useMutation<
AxiosResponse,
AxiosError<ErrorResponseData>,
string
>({
mutationFn: postVerify,
throwOnError,
});
return { mutateAsync, isError, error, isPending, isSuccess };
return { mutate, isError, error, isPending, isSuccess };
};

interface ErrorResponseData {
Expand Down