Skip to content

feat: error 처리 보완 #31

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

Merged
dasosann merged 1 commit into from
Feb 24, 2026
Merged

feat: error 처리 보완 #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 11 additions & 1 deletion app/register/_components/ScreenRegister.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,15 @@
import { useSendEmail } from "@/hooks/useSendEmail";
import { useSignUp } from "@/hooks/useSignUp";
import { useVerifyEmail } from "@/hooks/useVerifyEmail";
import axios from "axios";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import { EmailStep } from "./EmailStep";
import { VerificationStep } from "./VerificationStep";
import { PasswordStep } from "./PasswordStep";

export const ScreenRegister = () => {
const router = useRouter();
const [step, setStep] = useState<1 | 2 | 3>(1);
const [email, setEmail] = useState("");
const [verificationCode, setVerificationCode] = useState("");
Expand All @@ -16,7 +19,7 @@

const { mutate: sendEmail, isPending: isSendingEmail } = useSendEmail();
const { verify, isPending: isVerifyingEmail } = useVerifyEmail();
const { mutate: signUp, isPending: isSigningUp } = useSignUp();

Check warning on line 22 in app/register/_components/ScreenRegister.tsx

View workflow job for this annotation

GitHub Actions / lint 

'isSigningUp' is assigned a value but never used

const handleEmailSubmit = (e: React.SyntheticEvent<HTMLFormElement>) => {
e.preventDefault();
Expand Down Expand Up @@ -47,7 +50,14 @@
alert("회원가입에 실패했습니다. 다시 시도해주세요.");
}
},
onError: () => alert("회원가입에 실패했습니다. 다시 시도해주세요."),
onError: (error) => {
const message =
axios.isAxiosError(error) && error.response?.data?.message
? error.response.data.message
: "회원가입에 실패했습니다. 다시 시도해주세요.";
alert(message);
router.replace("/login");
},
Comment on lines +53 to +60
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

에러 처리 로직이 개선되었지만, 두 가지 주요 개선점을 제안합니다.

  1. 조건부 리디렉션: 현재 모든 종류의 회원가입 오류에 대해 로그인 페이지로 리디렉션하고 있습니다. 이는 사용자 경험을 해칠 수 있습니다. 예를 들어, '비밀번호가 너무 짧습니다'와 같이 사용자가 직접 수정해야 하는 오류가 발생했을 때도 페이지가 이동되면, 사용자는 오류를 수정할 기회를 잃게 됩니다. 서버에서 오는 에러 코드(예: USER_ALREADY_EXISTS)를 확인하여 특정 경우에만 리디렉션하도록 수정하는 것이 좋습니다. (참고: Rule: When a form submission fails, retain the user's input values to improve user experience.)

  2. alert() 대신 토스트 사용: alert()는 사용자의 모든 동작을 막는 블로킹 UI이며, 앱의 일관된 디자인을 해칩니다. react-hot-toast와 같은 라이브러리를 사용하거나 자체 토스트 컴포넌트를 활용해 비동기적으로 에러 메시지를 보여주는 것이 훨씬 나은 사용자 경험을 제공합니다.

onError: (error) => {
  const defaultMessage = "회원가입에 실패했습니다. 다시 시도해주세요.";
  if (axios.isAxiosError(error) && error.response?.data) {
    const { message, code } = error.response.data;
    // TODO: alert() 대신 토스트 컴포넌트를 사용하여 메시지 표시
    alert(message || defaultMessage);

    // '이미 존재하는 사용자'와 같은 특정 에러 코드일 경우에만 리디렉션
    if (code === 'USER_ALREADY_EXISTS') {
      router.replace("/login");
    }
    // 그 외의 경우, 사용자가 입력값을 수정할 수 있도록 페이지에 머무릅니다.
  } else {
    alert(defaultMessage);
  }
},
References
  1. When a form submission fails, retain the user's input values to improve user experience.

Copy link
Contributor Author

@dasosann dasosann Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alert가 더 나은듯

},
);
};
Expand Down
2 changes: 1 addition & 1 deletion hooks/useSignUp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@ const signUp = async (payload: SignUpRequest): Promise<SignUpResponse> => {
export const useSignUp = () => {
return useMutation({
mutationFn: signUp,
retry: 1,
retry: false,
});
};
2 changes: 1 addition & 1 deletion hooks/useVerifyEmail.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const verifyEmail = async (
export const useVerifyEmail = () => {
const mutation = useMutation({
mutationFn: verifyEmail,
retry: 1,
retry: false,
});

const verify = (
Expand Down
Loading