Feat/#53 카카오 소셜 로그인 프로세스 구현

apps/web/app/_apis/services/login.ts

@@ -0,0 +1,60 @@
+import { API_PATH, CLIENT_PATH } from '@/_constants/path'
+import { setCookie, deleteCookie } from 'cookies-next'
+import axios from 'axios'
+
+const CLIENT_URL = process.env.NEXT_PUBLIC_CLIENT_URL || ''
+const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID || ''
+
+export const getKakaoInga = async () => {
+  const isAndroid = /Android/.test(navigator.userAgent)
+  // const isiOS = /(iPhone|iPad|iPod)/.test(navigator.userAgent);
+  try {
+    if (isAndroid) {
+      window.location.href = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${CLIENT_URL + CLIENT_PATH.LOGIN_SUCCESS}&response_type=code`
+    } else {
+      await window.Kakao.Auth.authorize({
+        redirectUri: CLIENT_URL + CLIENT_PATH.LOGIN_SUCCESS,
+      })
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+export const getToken = async (): Promise<{
+  tokenType: string
+  accessToken: string
+  accessTokenExpiresIn: number
+}> => {
+  try {
+    const res = await axios.post(
+      process.env.NEXT_PUBLIC_API_URL + API_PATH.AUTH.TOKEN,
+      {},
+      {
+        withCredentials: true,
+      },
+    )
+
+    const { data } = res
+    const { accessToken, accessTokenExpiresIn } = data.data
+    const expireDate = new Date(Date.now() + accessTokenExpiresIn)
+
+    setCookie('accessToken', accessToken, {
+      expires: expireDate,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      path: '/',
+    })
+
+    return data.data
+  } catch (error) {
+    console.error('토큰 재발급 실패(세션 만료):', error)
+    deleteCookie('accessToken')
+
+    if (typeof window !== 'undefined') {
+      window.location.href = CLIENT_PATH.LOGIN
+    }
+
+    throw error
+  }
+}

apps/web/app/_constants/path.ts

@@ -39,6 +39,11 @@ export const API_PATH = {
     LIST: '/requests/places',
     DETAIL: (id: string) => `/requests/places/${id}`,
   },
+  AUTH: {
+    AUTHORIZE: (code: string, redirectUri: string) =>
+      `/auth/oauth2?code=${code}&redirectUri=${redirectUri}`,
+    TOKEN: '/auth/token',
+  },
 }
 
 export const CLIENT_PATH = {
@@ -56,4 +61,6 @@ export const CLIENT_PATH = {
   EVENTS_LUCKY_DRAW: '/events/lucky-draw',
   EVENT_GIFTICON: '/events/gifticon',
   EVENT_GIFTICON_DETAIL: (id: string | number) => `/events/gifticon/${id}`,
+  LOGIN: '/login',
+  LOGIN_SUCCESS: '/login/loading/success', // Todo: path 변경 필요
 }

apps/web/app/_lib/axiosInstance.ts

@@ -1,8 +1,57 @@
-import axios from 'axios'
+import axios, {
+  AxiosError,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from 'axios'
+import { getToken } from '@/_apis/services/login'
+import { getCookie } from '@/_utils/getCookie'
 
 const axiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
   withCredentials: true,
 })
 
+axiosInstance.interceptors.request.use(
+  async (config) => {
+    const token = await getCookie('accessToken')
+
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+
+    return config
+  },
+  (error) => Promise.reject(error),
+)
+
+axiosInstance.interceptors.response.use(
+  (response: AxiosResponse) => response.data,
+  async (error: AxiosError): Promise<AxiosResponse | AxiosError> => {
+    const originalRequest = error.config as InternalAxiosRequestConfig & {
+      _retry?: boolean
+    }
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true
+
+      try {
+        const { accessToken: newAccessToken } = await getToken()
+
+        if (originalRequest.headers) {
+          originalRequest.headers.Authorization = newAccessToken
+            ? `Bearer ${newAccessToken}`
+            : ''
+        }
+
+        return await axiosInstance(originalRequest)
+      } catch (refreshError) {
+        return Promise.reject(refreshError)
+      }
+    }
+    return Promise.reject(error)
+  },
+)
+
 export default axiosInstance

apps/web/app/_lib/axiosInstanceV2.ts

@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+const axiosInstanceV2 = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL_V2,
+  withCredentials: true,
+})
+
+export default axiosInstanceV2

apps/web/app/_utils/getCookie/getCookie.ts

@@ -0,0 +1,35 @@
+import { getCookie as ClientGetCookie } from 'cookies-next'
+
+/**
+ * 서버(Next.js App Router)와 클라이언트(Browser) 환경 모두에서 작동하는 하이브리드 쿠키 조회 함수입니다.
+ *
+ * @remarks
+ * 이 함수는 실행 환경을 자동으로 감지하여 적절한 방식으로 쿠키를 가져옵니다.
+ * - **Server Environment**: `next/headers`의 `cookies()`를 동적으로 임포트하여 조회합니다. (클라이언트 번들링 제외)
+ * - **Client Environment**: `cookies-next` 라이브러리를 사용하여 브라우저 쿠키를 조회합니다.
+ * - `next/headers`의 비동기 특성에 맞춰 인터페이스 통일을 위해 항상 `Promise`를 반환합니다.
+ *
+ * @param name - 조회할 쿠키의 키(Key) 이름 (예: 'accessToken')
+ * @returns 쿠키의 값(`string`)을 반환하며, 쿠키가 존재하지 않을 경우 `undefined`를 반환합니다.
+ *
+ * @example
+ * ```typescript
+ * // async 함수 내부에서 사용
+ * const token = await getCookie('accessToken');
+ *
+ * if (token) {
+ * console.log('Token exists:', token);
+ * }
+ * ```
+ */
+export const getCookie = async (name: string): Promise<string | undefined> => {
+  // 서버 환경 (Next.js Server Component / Server Action / Route Handler)
+  if (typeof window === 'undefined') {
+    const { cookies } = await import('next/headers')
+    const cookieStore = await cookies()
+    return cookieStore.get(name)?.value
+  }
+
+  // 클라이언트 환경 (Browser)
+  return ClientGetCookie(name) as string | undefined
+}

apps/web/app/_utils/getCookie/index.ts

@@ -0,0 +1 @@
+export { getCookie } from './getCookie'

apps/web/app/global.d.ts

@@ -0,0 +1,10 @@
+interface Window {
+  Kakao: {
+    init: (appKey: string) => void
+    isInitialized: () => boolean
+    Auth: {
+      authorize: (params: Record<string, unknown>) => Promise<void>
+    }
+    [key: string]: unknown
+  }
+}

apps/web/app/layout.tsx

@@ -8,6 +8,7 @@ import { MSWProvider } from '@/_mocks/MSWProvider'
 import { Column } from '@repo/ui/components/Layout'
 import { NaverMapProvider } from '@/NaverMapProvider'
 import { HeroProvider } from '@/HeroProvider'
+import Script from 'next/script'
 
 const SITE_URL = new URL('https://knu-matzip.vercel.app')
 
@@ -60,6 +61,12 @@ export default async function RootLayout({
             </HeroProvider>
           </QueryProvider>
         </MSWProvider>
+        <Script
+          src='https://t1.kakaocdn.net/kakao_js_sdk/2.7.9/kakao.min.js'
+          integrity='sha384-JpLApTkB8lPskhVMhT+m5Ln8aHlnS0bsIexhaak0jOhAkMYedQoVghPfSpjNi9K1'
+          crossOrigin='anonymous'
+          strategy='lazyOnload'
+        />
       </body>
     </html>
   )

apps/web/app/login/components/LoginButton.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Icon } from '@repo/ui/components/Icon'
+import { Text } from '@repo/ui/components/Text'
+import { getKakaoInga } from '@/_apis/services/login'
+
+export const LoginButton = () => {
+  useEffect(() => {
+    if (!window.Kakao) return
+    if (!window.Kakao.isInitialized()) {
+      window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JS_KEY || '')
+      console.log('Kakao initialized')
+    } else {
+      console.log('Kakao already initialized')
+    }
+  }, [])
+
+  return (
+    <button
+      onClick={getKakaoInga}
+      className={'relative rounded-lg bg-[#FEE500] p-3 text-center'}
+    >
+      <Icon type={'kakaoLogo'} className={'absolute left-[20px]'} />
+      <Text>카카오 로그인</Text>
+    </button>
+  )
+}

apps/web/app/login/loading/success/_route.ts

@@ -0,0 +1,45 @@
+// import { NextRequest, NextResponse } from 'next/server'
+// import axiosInstanceV2 from '@/_lib/axiosInstanceV2'
+// import { API_PATH, CLIENT_PATH } from '@/_constants/path'
+//
+// export const GET = async (request: NextRequest) => {
+//   try {
+//     const searchParams = request.nextUrl.searchParams
+//     const code = searchParams.get('code') || ''
+//     const redirectUri =
+//       (process.env.NEXT_PUBLIC_CLIENT_URL || '') + CLIENT_PATH.LOGIN_SUCCESS
+//
+//     // 백엔드로 OAuth 인증 요청
+//     const response = await axiosInstanceV2.get(
+//       API_PATH.AUTH.AUTHORIZE(code, redirectUri),
+//     )
+//
+//     // 브라우저로 리다이렉트 응답 준비
+//     const nextRes = NextResponse.redirect(
+//       new URL(CLIENT_PATH.MAIN, request.url),
+//     )
+//
+//     const accessToken = response?.data?.data
+//     if (accessToken) {
+//       nextRes.cookies.set('accessToken', accessToken, {
+//         path: '/',
+//         httpOnly: false,
+//       })
+//     }
+//
+//     const backendCookies = response.headers['set-cookie']
+//     if (backendCookies) {
+//       backendCookies.forEach((cookie) => {
+//         nextRes.headers.append('Set-Cookie', cookie)
+//       })
+//     }
+//
+//     return nextRes
+//   } catch (error) {
+//     console.log(error)
+//     return NextResponse.json(
+//       { message: 'Internal Server Error' },
+//       { status: 500 },
+//     )
+//   }
+// }

apps/web/app/login/loading/success/page.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Spinner } from '@heroui/react'
+import { useSearchParams, useRouter } from 'next/navigation'
+import { setCookie } from 'cookies-next'
+import axiosInstanceV2 from '@/_lib/axiosInstanceV2'
+import { API_PATH, CLIENT_PATH } from '@/_constants/path'
+
+const Page = () => {
+  const { replace } = useRouter()
+  const searchParams = useSearchParams()
+  const code = searchParams.get('code') || ''
+  const clientUrl = process.env.NEXT_PUBLIC_CLIENT_URL || ''
+  const redirectUri = clientUrl + CLIENT_PATH.LOGIN_SUCCESS
+
+  useEffect(() => {
+    if (!code || !clientUrl) {
+      console.error('Authorization code is missing')
+      replace(`${CLIENT_PATH.LOGIN}?error=code-missing`)
+      return
+    }
+
+    ;(async () => {
+      try {
+        const response = await axiosInstanceV2.get(
+          API_PATH.AUTH.AUTHORIZE(code, redirectUri),
+        )
+
+        const accessToken = response?.data?.data
+        if (accessToken) {
+          setCookie('accessToken', accessToken, {
+            secure: process.env.NODE_ENV === 'production',
+            sameSite: 'lax',
+            path: '/',
+          })
+          replace(CLIENT_PATH.MAIN)
+        } else {
+          console.error('Access token missing in response')
+          replace(`${CLIENT_PATH.LOGIN}?error=token-missing`)
+        }
+      } catch (error) {
+        console.error('Login process failed:', error)
+        replace(`${CLIENT_PATH.LOGIN}?error=auth-failed`)
+      }
+    })()
+  }, [clientUrl, code, redirectUri, replace])
+
+  return <Spinner className={'m-auto'} />
+}
+
+export default Page

apps/web/app/login/page.tsx

@@ -0,0 +1,21 @@
+import { Icon } from '@repo/ui/components/Icon'
+import { Column } from '@repo/ui/components/Layout'
+import { Text } from '@repo/ui/components/Text'
+import { LoginButton } from './components/LoginButton'
+
+const LoginPage = () => {
+  return (
+    <Column className={'h-full px-5 py-10'}>
+      <Column className={'my-auto items-center pb-5'}>
+        <Icon type={'logo'} size={150} className={'mb-2'} />
+        <Text fontSize={'2xl'}>공주대학교</Text>
+        <Text fontSize={'2xl'} fontWeight={'bold'}>
+          맛집
+        </Text>
+      </Column>
+      <LoginButton />
+    </Column>
+  )
+}
+
+export default LoginPage

apps/web/app/map/MapContainer.tsx

@@ -1,10 +1,11 @@
 'use client'
 
 import dynamic from 'next/dynamic'
+import { Spinner } from '@heroui/react'
 
 const MapComponent = dynamic(() => import('./MapComponent'), {
   ssr: false,
-  loading: () => <div>지도 로딩 중...</div>,
+  loading: () => <Spinner className={'m-auto'} />,
 })
 
 export const MapContainer = () => <MapComponent />

apps/web/app/map/_components/PlaceList/PlaceList.tsx

@@ -24,7 +24,7 @@ export const PlaceList = ({ places }: { places: PlaceByMap[] }) => {
       expandOnContentDrag
     >
       {places.length > 0 ? (
-        <ul className={'px-5'}>
+        <ul className={'pb-15 px-5'}>
           {places.map((place) => (
             <PlaceListItem key={place.placeId} {...place} />
           ))}