Merge pull request #80 from team-ppointer/feat/service/kakao-login-#78

[Feat/service/#78] 카카오로그인

Author: chaeyoung103

apps/service/package.json

@@ -7,14 +7,15 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "openapi": "pnpm dlx openapi-typescript https://dev.math-pointer.com/v3/api-docs --output ./src/types/api/schema.d.ts && prettier --write ./src/types/api/schema.d.ts"
+    "openapi": "pnpm dlx openapi-typescript https://api.math-pointer.com/v3/api-docs --output ./src/types/api/schema.d.ts && prettier --write ./src/types/api/schema.d.ts"
   },
   "dependencies": {
     "@next/third-parties": "^15.2.4",
     "@repo/pointer-design-system": "workspace:*",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "dayjs": "^1.11.13",
+    "clsx": "^2.1.1",
     "next": "15.1.4",
     "openapi-fetch": "^0.13.4",
     "openapi-react-query": "^0.3.0",

apps/service/src/apis/authMiddleware.ts

@@ -1,29 +1,39 @@
 'use client';
 import { Middleware } from 'openapi-fetch';
 
-import { getAccessToken, setAccessToken } from '@utils';
+import { getAccessToken, setAccessToken, setName, setRefreshToken } from '@utils';
+import { postRefreshToken } from '@/apis/controller/auth';
 
-const UNPROTECTED_ROUTES = ['/api/v1/auth/admin/login', '/api/v1/auth/oauth/social-login'];
+const UNPROTECTED_ROUTES = ['/api/student/auth/social/login', '/api/common/auth/refresh'];
 
 const reissueToken = async () => {
-  try {
-    const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/auth/reissue`, {
-      method: 'GET',
-      credentials: 'include',
-    });
+  let accessToken = getAccessToken();
 
-    if (!response.ok) throw new Error('Token reissue failed');
-
-    const data = await response.json();
-    const accessToken = data.data.accessToken;
-    setAccessToken(accessToken);
+  if (accessToken) {
     return accessToken;
-  } catch (error) {
-    console.error('Reissue failed:', error);
+  }
+
+  const result = await postRefreshToken();
+
+  if (!result.isSuccess || !result.data) {
+    console.error('액세스토큰 갱신 실패:', result.error);
     localStorage.removeItem('accessToken');
+    localStorage.removeItem('refreshToken');
     window.location.href = '/login';
     return null;
   }
+
+  if (result.data?.token.accessToken) {
+    setAccessToken(result.data.token.accessToken);
+    accessToken = result.data.token.accessToken;
+  }
+  if (result.data?.token.refreshToken) {
+    setRefreshToken(result.data.token.refreshToken);
+  }
+  if (result.data?.name) {
+    setName(result.data.name);
+  }
+  return accessToken;
 };
 
 const authMiddleware: Middleware = {
@@ -32,18 +42,12 @@ const authMiddleware: Middleware = {
       return undefined;
     }
 
-    let accessToken = getAccessToken();
+    const accessToken = await reissueToken();
 
-    if (!accessToken) {
-      accessToken = await reissueToken();
-
-      if (!accessToken) {
-        console.error('Access token reissue failed. Logging out...');
-        return request;
-      }
+    if (accessToken) {
+      request.headers.set('Authorization', `Bearer ${accessToken}`);
     }
 
-    request.headers.set('Authorization', `Bearer ${accessToken}`);
     return request;
   },
 

apps/service/src/apis/controller/auth/index.ts

@@ -1,4 +1,5 @@
-import postLogin from './postLogin';
 import postKakaoLogin from './postKakaoLogin';
+import postUserInfo from './postUserInfo';
+import postRefreshToken from './postRefreshToken';
 
-export { postLogin, postKakaoLogin };
+export { postKakaoLogin, postUserInfo, postRefreshToken };

apps/service/src/apis/controller/auth/postKakaoLogin.ts

@@ -1,54 +1,24 @@
 'use client';
 
-import { setAccessToken, setName } from '@utils';
 import { client } from '@/apis/client';
 
-const postKakaoAccessToken = async (code: string) => {
-  const response = await fetch(`https://kauth.kakao.com/oauth/token`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
-    },
-    body: `grant_type=authorization_code&client_id=${process.env.NEXT_PUBLIC_REST_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI}&code=${code}`,
-  });
-  const jsonData = await response.json();
-  return jsonData.access_token;
-};
-
-const postKakaoLogin = async (code: string) => {
-  const accessToken = await postKakaoAccessToken(code);
-  const response = await client.POST('/api/v1/auth/oauth/social-login', {
-    params: {
-      header: {
-        social_access_token: accessToken,
-      },
-      query: {
-        provider: 'KAKAO',
-      },
+const postKakaoLogin = async () => {
+  const response = await client.POST('/api/student/auth/login/social', {
+    body: {
+      provider: 'KAKAO',
+      redirectUri: process.env.NEXT_PUBLIC_REDIRECT_URI ?? '',
     },
   });
 
   try {
-    if (
-      response &&
-      response.data &&
-      response.data.data &&
-      response.data.data.name &&
-      response.data.data.accessToken
-    ) {
-      const { accessToken, name } = response.data.data;
-      setAccessToken(accessToken);
-      setName(name);
-
-      window.location.href = '/';
+    if (response && response.data) {
+      return { isSuccess: true, loginUrl: response.data.loginUrl };
     } else {
-      console.error('accessToken을 찾을 수 없습니다:', response);
+      return { isSuccess: false, error: '데이터를 찾을 수 없습니다.' };
     }
   } catch (error) {
-    console.error('소셜 로그인 요청 오류:', error);
+    return { isSuccess: false, error: error };
   }
-
-  return response;
 };
 
 export default postKakaoLogin;

apps/service/src/apis/controller/auth/postLogin.ts

@@ -0,0 +1,17 @@
+'use client';
+
+const postRefreshToken = async () => {
+  try {
+    const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/common/auth/refresh`, {
+      method: 'GET',
+    });
+    if (!res.ok) throw new Error('Refresh failed');
+
+    const data = await res.json();
+    return { isSuccess: true, data };
+  } catch (e) {
+    return { isSuccess: false, error: e };
+  }
+};
+
+export default postRefreshToken;

apps/service/src/apis/controller/auth/postRefreshToken.ts

@@ -0,0 +1,17 @@
+import { client } from '@apis';
+
+const postUserInfo = async (name: string, grade: number) => {
+  try {
+    const response = await client.POST('/api/student/auth/register/social', {
+      body: {
+        name: name,
+        grade: grade,
+      },
+    });
+    return { isSuccess: true, data: response.data };
+  } catch (error) {
+    return { isSuccess: false, error: error };
+  }
+};
+
+export default postUserInfo;

apps/service/src/apis/controller/auth/postUserInfo.ts

@@ -1,19 +1,32 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect } from 'react';
 
-import { postKakaoLogin } from '@apis';
+import { setAccessToken, setRefreshToken } from '@utils';
 
 const Page = () => {
   const searchParams = useSearchParams();
-  const code = searchParams.get('code');
+  const router = useRouter();
+  const { success, isFirstLogin, accessToken, refreshToken } = Object.fromEntries(
+    searchParams.entries()
+  );
 
   useEffect(() => {
-    if (code) {
-      postKakaoLogin(code);
+    if (!success || !accessToken) {
+      router.replace('/login');
+      return;
     }
-  }, [code]);
+
+    setAccessToken(accessToken);
+    setRefreshToken(refreshToken);
+
+    if (isFirstLogin) {
+      router.replace('/onboarding');
+    } else {
+      router.replace('/');
+    }
+  }, [searchParams]);
 
   return <></>;
 };

apps/service/src/app/api/auth/callback/kakao/page.tsx

@@ -50,7 +50,7 @@ export default function RootLayout({
   modal: React.ReactNode;
 }>) {
   return (
-    <html lang='ko'>
+    <html lang='ko' suppressHydrationWarning>
       <head>
         <link rel='preconnect' href='https://www.google-analytics.com' crossOrigin='anonymous' />
         <link rel='preconnect' href='https://prod.math-pointer.com' crossOrigin='anonymous' />

apps/service/src/app/layout.tsx

@@ -3,18 +3,21 @@ import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 
 import { getAccessToken, trackEvent } from '@utils';
+import { postKakaoLogin } from '@apis';
 import { LogoLogin } from '@/assets/svg/logo';
 import { KakaoButton } from '@/components/login';
 
 const Page = () => {
   const router = useRouter();
-  const kakaoLoginUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${
-    process.env.NEXT_PUBLIC_REST_API_KEY
-  }&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI}&response_type=code`;
 
-  const handleLoginClick = () => {
+  const handleLoginClick = async () => {
     trackEvent('kakao_login_click');
-    window.location.replace(kakaoLoginUrl);
+    const result = await postKakaoLogin();
+    if (result.isSuccess && result.loginUrl) {
+      router.push(result.loginUrl);
+    } else {
+      console.error('로그인 URL을 가져오는 데 실패했습니다.');
+    }
   };
 
   useEffect(() => {