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

src/apis/index.ts

@@ -67,3 +67,10 @@ httpClient.interceptors.response.use(
 );
 
 export default httpClient;
+
+export const logout = () => {
+  localStorage.removeItem('accessToken');
+  localStorage.removeItem('refreshToken');
+
+  window.location.href = '/auth/SignIn';
+};

src/apis/postGoogleOauth.ts

@@ -5,9 +5,9 @@ import httpClient from '.';
 const getGoogleIdToken = async (code: string) => {
   const response = await axios.post('https://oauth2.googleapis.com/token', {
     code,
-    client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID_TEST,
-    client_secret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET_TEST,
-    redirect_uri: process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI_TEST,
+    client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
+    client_secret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
+    redirect_uri: process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI,
     grant_type: 'authorization_code',
   });
 
@@ -19,7 +19,7 @@ const postGoogleOauth = async (code: string) => {
   const idToken = tokenResponse.id_token;
 
   const response = await httpClient.post('/auth/signIn/GOOGLE', {
-    redirectUri: process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI_TEST,
+    redirectUri: process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI,
     token: idToken,
   });
 

src/pages/auth/SignIn.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Input } from '@/components/ui/input';
@@ -7,12 +9,18 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
 import { PostSigninRequest, PostSigninRequestType } from '@/schema/auth';
 import useSigninMutation from '@/hooks/useSignInMutation';
-import { useRouter } from 'next/router';
 
 export default function SignIn() {
   const mutationSignin = useSigninMutation();
   const router = useRouter();
 
+  useEffect(() => {
+    const accessToken = localStorage.getItem('accessToken');
+    if (accessToken) {
+      router.push('/epigrams');
+    }
+  }, [router]);
+
   // 폼 정의
   const form = useForm<PostSigninRequestType>({
     resolver: zodResolver(PostSigninRequest),
@@ -27,19 +35,6 @@ export default function SignIn() {
     form.setValue(fieldName, value.trim(), { shouldValidate: true, shouldDirty: true });
   };
 
-  const handleSubmit = async (values: PostSigninRequestType) => {
-    try {
-      const result = await mutationSignin.mutateAsync(values);
-      localStorage.setItem('accessToken', result.accessToken);
-      localStorage.setItem('refreshToken', result.refreshToken);
-      router.push('/epigrams'); // 로그인 성공 후 이동할 페이지
-    } catch (error) {
-      // 로그인 실패 처리
-      /* eslint-disable no-console */
-      console.error('로그인 실패:', error);
-    }
-  };
-
   return (
     <div className='flex flex-col justify-center items-center bg-background-100 w-full h-screen'>
       <header className='mb-[50px] md:mb-[60px]'>
@@ -48,7 +43,7 @@ export default function SignIn() {
         </Link>
       </header>
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(handleSubmit)} className='flex flex-col items-center lg:gap-6 gap-5 w-full px-6'>
+        <form onSubmit={form.handleSubmit((values: PostSigninRequestType) => mutationSignin.mutate(values))} className='flex flex-col items-center lg:gap-6 gap-5 w-full px-6'>
           <div className='flex flex-col items-center lg:gap-4 gap-[10px] w-full lg:max-w-[640px] md:max-w-[384px]'>
             <FormField
               control={form.control}
@@ -125,7 +120,7 @@ export default function SignIn() {
             <Image src='/logo-naver.svg' alt='logo-naver' width={60} height={60} className='md:size-[60px] size-10' />
           </Link>
           <Link
-            href={`https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID_TEST}&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI_TEST}&response_type=code&scope=openid%20profile%20email`}
+            href={`https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&response_type=code&scope=openid%20profile%20email`}
           >
             <Image src='/logo-google.svg' alt='logo-google' width={60} height={60} className='md:size-[60px] size-10' />
           </Link>

src/pages/auth/SignUp.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
 import Image from 'next/image';
 import Link from 'next/link';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -11,6 +12,14 @@ import useRegisterMutation from '@/hooks/useRegisterMutation';
 
 export default function SignUp() {
   const [focusedField, setFocusedField] = useState<string | null>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    const accessToken = localStorage.getItem('accessToken');
+    if (accessToken) {
+      router.push('/epigrams');
+    }
+  }, [router]);
 
   const form = useForm<PostSignUpRequestType>({
     resolver: zodResolver(PostSignUpRequest),

src/pages/auth/callback/google/index.ts

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
-import useGoogleLogin from '@/hooks/useGoogleLogin'; // useGoogleLogin 훅을 가져옵니다
+import useGoogleLogin from '@/hooks/useGoogleLogin';
 
 export default function Google() {
   const searchParams = useSearchParams();
-  const code = searchParams.get('code'); // URL에서 'code' 값을 가져옵니다
-  const { mutate: login } = useGoogleLogin(); // useGoogleLogin 훅에서 mutate 함수를 가져옵니다
+  const code = searchParams.get('code');
+  const { mutate: login } = useGoogleLogin();
 
   useEffect(() => {
     if (code) {
@@ -15,6 +15,4 @@ export default function Google() {
       console.log('No code found in URL parameters'); // code가 없을 때 콘솔에 출력
     }
   }, [code, login]);
-
-  return null; // 컴포넌트가 UI를 렌더링하지 않음
 }