Merge pull request #228 from epigram5-9/refactor/FE-29

FE-29 ♻️ 로그인 페이지 리팩토링

src/apis/postKakaoOauth.ts

@@ -0,0 +1,11 @@
+import httpClient from '.';
+
+const postKakaoOauth = async (code: string) => {
+  const response = await httpClient.post('/auth/signIn/KAKAO', {
+    redirectUri: process.env.NEXT_PUBLIC_REDIRECT_URI,
+    token: code,
+  });
+  return response.data;
+};
+
+export default postKakaoOauth;

src/hooks/useKakaoLogin.ts

@@ -1,4 +1,4 @@
-import postOauth from '@/apis/oauth';
+import postKakaoOauth from '@/apis/postKakaoOauth';
 import { toast } from '@/components/ui/use-toast';
 import { useMutation } from '@tanstack/react-query';
 import { isAxiosError } from 'axios';
@@ -9,7 +9,7 @@ const useKakaoLogin = () => {
 
   return useMutation({
     mutationFn: async (code: string) => {
-      const result = await postOauth(code);
+      const result = await postKakaoOauth(code);
       localStorage.setItem('accessToken', result.accessToken);
       localStorage.setItem('refreshToken', result.refreshToken);
       return result;

src/hooks/useRegisterMutation.ts

@@ -12,10 +12,9 @@ const useRegisterMutation = (onRegisterError: (field: 'email' | 'nickname') => v
     onSuccess: (data) => {
       localStorage.setItem('accessToken', data.accessToken);
       localStorage.setItem('refreshToken', data.refreshToken);
-      router.push('/auth/SignIn');
+      router.push('/epigrams');
       toast({
         title: '회원가입 성공!',
-        description: '로그인 후 이용해주세요.',
         className: 'bg-illust-green text-white font-semibold',
       });
     },

src/pages/auth/SignIn.tsx

@@ -13,17 +13,26 @@ import useRefreshToken from '@/hooks/useRefreshToken';
 
 export default function SignIn() {
   const mutationSignin = useSigninMutation();
-  const { mutate: refreshAccessToken } = useRefreshToken();
+  const { mutateAsync: refreshAccessToken } = useRefreshToken();
   const router = useRouter();
 
   useEffect(() => {
     const refreshToken = typeof window !== 'undefined' ? localStorage.getItem('refreshToken') : null;
 
     if (refreshToken) {
-      refreshAccessToken({ refreshToken });
-      router.push('/epigrams');
+      const handleTokenRefresh = async () => {
+        try {
+          await refreshAccessToken({ refreshToken });
+          router.push('/epigrams'); // 토큰 갱신 후 리디렉션
+        } catch {
+          localStorage.removeItem('refreshToken');
+          router.push('/auth/SignIn');
+        }
+      };
+
+      handleTokenRefresh();
     }
-  }, [refreshAccessToken]);
+  }, [refreshAccessToken, router]);
 
   // 폼 정의
   const form = useForm<PostSigninRequestType>({

src/pages/auth/SignUp.tsx

@@ -13,17 +13,26 @@ import useRefreshToken from '@/hooks/useRefreshToken';
 
 export default function SignUp() {
   const [focusedField, setFocusedField] = useState<string | null>(null);
-  const { mutate: refreshAccessToken } = useRefreshToken();
+  const { mutateAsync: refreshAccessToken } = useRefreshToken();
   const router = useRouter();
 
   useEffect(() => {
     const refreshToken = typeof window !== 'undefined' ? localStorage.getItem('refreshToken') : null;
 
     if (refreshToken) {
-      refreshAccessToken({ refreshToken });
-      router.push('/epigrams');
+      const handleTokenRefresh = async () => {
+        try {
+          await refreshAccessToken({ refreshToken });
+          router.push('/epigrams'); // 토큰 갱신 후 리디렉션
+        } catch {
+          localStorage.removeItem('refreshToken');
+          router.push('/auth/SignIn');
+        }
+      };
+
+      handleTokenRefresh();
     }
-  }, [refreshAccessToken]);
+  }, [refreshAccessToken, router]);
 
   const form = useForm<PostSignUpRequestType>({
     resolver: zodResolver(PostSignUpRequest),