회원가입 api 리팩토링 (#84)

* delete: authInstance 삭제

* feat: instance 하나만 사용하도록 구현 + interceptor 일부 구현

* feat: 학과 융소 -> 응용소프트웨어전공으로 변경 (백엔드 더미)

* feat: 회원가입-이메일 page useQuery error toast처리

* feat: 비밀번호 변경 페이지 - useQuery error toast처리

* refactor: 회원가입 시 email store 초기화 위치를 /login으로 변경

src/app/login/page.tsx

@@ -1,9 +1,18 @@
+'use client';
+
+import { useJoinEmailStore } from '@/features/account/model/useJoinEmailStore';
 import ChangePassword from '@/features/account/ui/ChangePassword';
 import GoToJoin from '@/features/account/ui/GoToJoin';
 import LoginForm from '@/features/account/ui/LoginForm';
 import Image from 'next/image';
+import { useEffect } from 'react';
 
 const page = () => {
+  const { resetVerificationComplete } = useJoinEmailStore();
+  useEffect(() => {
+    resetVerificationComplete();
+  }, []);
+
   return (
     <>
       <div className="flex flex-col justify-center items-center mt-14 ">

src/features/account/model/useChangePwEmail.ts

@@ -4,6 +4,7 @@ import { z } from 'zod';
 import { useChangePwEmailStore } from './useChangePwEmailStore';
 import { useGetVerification } from '../api/queries';
 import { useEffect, useState } from 'react';
+import { toast } from '@/shared/ui/ui/use-toast';
 
 export const useChangePwEmail = () => {
   const { setIsEmailValid, setIsSubmitted } = useChangePwEmailStore();
@@ -32,10 +33,18 @@ export const useChangePwEmail = () => {
     setIsSubmitted(true);
     setIsLoading(true);
 
-    const { isError } = await refetchGetVerification();
+    const { isError, error } = await refetchGetVerification();
 
     if (isError) {
-      setIsEmailValid(true);
+      if (error.response?.status === 400) {
+        setIsEmailValid(true);
+      } else {
+        toast({
+          variant: 'destructive',
+          description:
+            '가입한 이메일 검증에 실패했습니다. 관리자에게 문의하세요.',
+        });
+      }
     } else {
       setIsEmailValid(false);
     }

src/features/account/model/useJoin.ts

@@ -10,7 +10,7 @@ import { PostJoinProps } from '../api/types';
 import { toast } from '@/shared/ui/ui/use-toast';
 
 export const useJoin = () => {
-  const { resetVerificationComplete, email } = useJoinEmailStore();
+  const { email } = useJoinEmailStore();
 
   const userNameRegex = /^[가-힣]+$/;
   const passwordRegex =
@@ -70,7 +70,6 @@ export const useJoin = () => {
         description: '회원 가입에 성공했습니다. 로그인 화면으로 이동합니다.',
       });
       router.push('/login');
-      resetVerificationComplete();
     } catch (error) {
       toast({
         variant: 'destructive',

src/features/account/model/useJoinEmail.ts

@@ -69,11 +69,19 @@ export const useJoinEmail = () => {
       setOtpInput('');
       setIsEmailValid(true);
 
-      const { isError } = await refetchGetVerification();
+      const { isError, error } = await refetchGetVerification();
 
       if (isError) {
-        setIsEmailDuplicated(true);
-        setIsDuplicationChecked(true);
+        if (error.response?.status === 400) {
+          setIsEmailDuplicated(true);
+          setIsDuplicationChecked(true);
+        } else {
+          toast({
+            variant: 'destructive',
+            description:
+              '이메일 중복 확인에 실패했습니다. 관리자에게 문의하세요.',
+          });
+        }
       } else {
         setIsEmailDuplicated(false);
         setIsDuplicationChecked(true);
@@ -105,10 +113,17 @@ export const useJoinEmail = () => {
     useGetEmailCodeVerification(email, otpInput);
 
   const handleVerifyOtp = async () => {
-    const { isError } = await refetchGetEmailCodeVerification();
+    const { isError, error } = await refetchGetEmailCodeVerification();
     if (isError) {
-      setVerificationComplete(false);
-      setOtpError(true);
+      if (error.response?.status === 404) {
+        setVerificationComplete(false);
+        setOtpError(true);
+      } else {
+        toast({
+          variant: 'destructive',
+          description: '인증 번호 검증에 실패했습니다. 관리자에게 문의하세요.',
+        });
+      }
     } else {
       setVerificationComplete(true);
       setOtpError(false);

src/shared/api/instance.ts

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { deleteCookie, getCookie } from 'cookies-next';
 
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
 
@@ -11,22 +12,55 @@ export const instance = axios.create({
   withCredentials: true,
 });
 
-const reqInterceptor = instance.interceptors.request.use(
+instance.interceptors.request.use(
   (config) => {
-    console.log('Request Interceptor', config);
+    const accessToken = getCookie('accessToken');
+    if (accessToken) {
+      config.headers['Authorization'] = `Bearer ${accessToken}`;
+    }
     return config;
   },
   (error) => {
     return Promise.reject(error);
   },
 );
 
-const resInterceptor = instance.interceptors.response.use(
+const handleUnauthorized = () => {
+  deleteCookie('accessToken');
+  deleteCookie('refreshToken');
+  alert('세션이 만료되었습니다. 다시 로그인해주세요.');
+  window.location.replace('/login');
+};
+
+instance.interceptors.response.use(
   (response) => {
-    console.log('Response Interceptor', response);
     return response;
   },
   (error) => {
+    //에러코드 임시로 달아둠
+    if (error.response?.status === 401) {
+      if (error.response?.data && 'code' in error.response.data) {
+        // 리프레시 토큰이 유효하지 않을 때 (에러코드 임시)
+        if (error.response.data.code === 1001) {
+          handleUnauthorized();
+        }
+      } else {
+        const accessToken = getCookie('accessToken');
+        if (accessToken) {
+          //refresh 토큰 재요청하는 api
+          /*const res = await REFRESH_API.refreshToken({
+            accessToken: accessToken,
+            refreshToken: getCookie('refreshToken') as string,
+          });
+          setCookie('accessToken', res.data.accessToken);
+          setCookie('refreshToken', res.data.refreshToken);*/
+        } else {
+          deleteCookie('accessToken');
+          deleteCookie('refreshToken');
+          window.location.replace('/login');
+        }
+      }
+    }
     return Promise.reject(error);
   },
 );

src/shared/lib/assets.ts

@@ -11,5 +11,5 @@ export const collageItems = [
   '건축대학',
   '방목기초교육대학',
 ];
-//임시 '융소' => 백엔드 학과코드 더미로 올라가 있음
-export const departmentItems = ['융소', '법학과', '경영학과'];
+//임시 '응용소프트웨어전공' => 백엔드 학과코드 더미로 올라가 있음
+export const departmentItems = ['응용소프트웨어전공', '법학과', '경영학과'];