Skip to content

Refactor: 로그인/회원가입 API 에러메시지 인풋 밑에 출력되는 부분 수정 #119

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
summerDev96 merged 2 commits into from
Aug 2, 2025
Merged

Refactor: 로그인/회원가입 API 에러메시지 인풋 밑에 출력되는 부분 수정 #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d3331d
fix: 로그인 오류 시 이메일 인풋에 뜨도록 수정
summerDev96 Aug 2, 2025
be4013f
fix: 회원가입 시 이메일/닉네임 에러만 인풋에 표시되도록 수정
summerDev96 Aug 2, 2025
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
4 changes: 2 additions & 2 deletions src/hooks/useTokenCheckRedirect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useRouter } from 'next/router';

import { checkToken } from '@/api/auth';

const useTokenCheck = () => {
const useTokenCheckRedirect = () => {
const router = useRouter();

const { data: tokenData, isLoading } = useQuery({
Expand All @@ -23,4 +23,4 @@ const useTokenCheck = () => {
return { isLoading, tokenData };
};

export default useTokenCheck;
export default useTokenCheckRedirect;
34 changes: 11 additions & 23 deletions src/pages/signin/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,8 @@ const SignIn = () => {

const {
handleSubmit,
clearErrors,
setError,
formState: { errors, isValid },
formState: { isValid },
} = methods;

const loginMutation = useMutation<LoginResponse, AxiosError, LoginRequest>({
Expand All @@ -55,12 +54,15 @@ const SignIn = () => {
userMutation.mutate();
},
onError: (error) => {
if (error.response?.status === 400) {
// 로그인 오류인 경우 공통 에러 메시지
setError('root', { message: '이메일 혹은 비밀번호를 확인해주세요' });
} else {
// API 에러를 모달로 출력
handleError(error.response?.data as Error);
const err = error as AxiosError<{ message?: string }>;
const status = err.response?.status;

switch (status) {
case 400:
setError('email', { message: '이메일 혹은 비밀번호를 확인해주세요' });
break;
default:
handleError(error.response?.data as Error);
}
},
});
Expand Down Expand Up @@ -105,15 +107,7 @@ const SignIn = () => {
{/* 이메일 */}
<div className='flex flex-col gap-2.5'>
<label htmlFor='email'>이메일</label>
<FormInput
type='email'
id='email'
name='email'
placeholder='[email protected]'
onChange={() => {
clearErrors('root');
}}
/>
<FormInput type='email' id='email' name='email' placeholder='[email protected]' />
</div>
{/* 비밀번호 */}
<div className='flex flex-col gap-2.5'>
Expand All @@ -123,16 +117,10 @@ const SignIn = () => {
id='password'
name='password'
placeholder='영문, 숫자, 특수문자(!@#$%^&*) 제한'
onChange={() => {
clearErrors('root');
}}
/>
</div>
</div>

{/* 로그인 오류 출력 */}
{errors.root && <p className='text-red-500 flex self-start'>{errors.root.message}</p>}

<div className='flex flex-col mb-10 gap-4'>
<Button
variant='purpleDark'
Expand Down
47 changes: 16 additions & 31 deletions src/pages/signup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,10 @@ const Signup = () => {

const {
handleSubmit,
clearErrors,
setError,
trigger,
getValues,
formState: { errors, isValid },
formState: { isValid },
} = methods;

const registerMutation = useMutation<SignupResponse, AxiosError, SignupRequest>({
Expand All @@ -68,12 +67,19 @@ const Signup = () => {
loginMutation.mutate({ email, password });
},
onError: (error) => {
if (error.response?.status === 500) {
// 로그인 오류인 경우 공통 에러 메시지
setError('root', { message: '닉네임이 중복되었습니다.' });
} else {
// API 에러를 모달로 출력
handleError(error.response?.data as Error);
const err = error as AxiosError<{ message?: string }>;
const status = err.response?.status;
const message = err.response?.data?.message;

switch (status) {
case 400:
setError('email', { message });
break;
case 500:
setError('nickname', { message: '닉네임이 중복되었습니다.' });
break;
default:
handleError(error.response?.data as Error);
}
},
});
Expand Down Expand Up @@ -105,11 +111,6 @@ const Signup = () => {
registerMutation.mutate(formData);
};

/* 공통 에러가 이미 있는 경우, 인풋 입력 시 초기화 하는 메소드 */
const resetCommonErrorMessage = () => {
if (errors.root) clearErrors('root');
};

/* 비밀번호 확인 값 입력 시, 비밀번호 확인 값을 유효성 체크하도록 함 */
const validatePasswordConfirmation = () => {
if (getValues('passwordConfirmation')) {
Expand All @@ -135,24 +136,12 @@ const Signup = () => {
{/* 이메일 */}
<div className='flex flex-col gap-2.5'>
<label htmlFor='email'>이메일</label>
<FormInput
type='email'
id='email'
name='email'
placeholder='[email protected]'
onChange={resetCommonErrorMessage}
/>
<FormInput type='email' id='email' name='email' placeholder='[email protected]' />
</div>
{/* 닉네임 */}
<div className='flex flex-col gap-2.5'>
<label htmlFor='nickname'>닉네임</label>
<FormInput
type='text'
id='nickname'
name='nickname'
placeholder='user'
onChange={resetCommonErrorMessage}
/>
<FormInput type='text' id='nickname' name='nickname' placeholder='user' />
</div>
{/* 비밀번호 */}
<div className='flex flex-col gap-2.5'>
Expand All @@ -163,7 +152,6 @@ const Signup = () => {
name='password'
placeholder='영문, 숫자, 특수문자(!@#$%^&*) 제한'
onChange={() => {
resetCommonErrorMessage();
/* 비밀번호 확인 값이 있으면 유효성 체크하도록 함 */
validatePasswordConfirmation();
}}
Expand All @@ -177,13 +165,10 @@ const Signup = () => {
id='passwordConfirmation'
name='passwordConfirmation'
placeholder='비밀번호 확인'
onChange={resetCommonErrorMessage}
/>
</div>
</div>

{/* 회원가입 오류 출력 */}
{errors.root && <p className='text-red-500 flex self-start'>{errors.root.message}</p>}
<Button
variant='purpleDark'
size='md'
Expand Down