set-up for kakao login

potenday-project · Dec 11, 2023 · 9796df8 · 9796df8
1 parent 02f5cea
commit 9796df8
Show file tree

Hide file tree

Showing 24 changed files with 1,069 additions and 727 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_SERVER_URL=<NEXT_PUBLIC_SERVER_URL>
+NEXT_PUBLIC_APP_ENV=<NEXT_PUBLIC_APP_ENV>
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -66,5 +66,6 @@ module.exports = {
     ],
     'react/react-in-jsx-scope': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/non-nullable-type-assertion-style': 'off',
   },
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,5 +13,6 @@
     "_utils": "Utils",
     "(route)": "Routes"
   },
-  "css.lint.unknownAtRules": "ignore"
+  "css.lint.unknownAtRules": "ignore",
+  "cSpell.words": ["KAKAO"]
 }
diff --git a/app/(route)/layout.tsx b/app/(route)/layout.tsx
@@ -2,18 +2,24 @@ import { Inter } from 'next/font/google'
 
 import type { Metadata } from 'next'
 import '@/app/_styles/globals.css'
+import Providers from '@/app/_components/providers/QueryClientProvider'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: '도달도달',
+  description: '도달도달',
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang='en'>
-      <body className={inter.className}>{children}</body>
+      <head>
+        <link rel='icon' href='../favicon.png' sizes='any' />
+      </head>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   )
 }
diff --git a/app/(route)/oauth/callback/kakao/api/route.ts b/app/(route)/oauth/callback/kakao/api/route.ts
@@ -0,0 +1,40 @@
+import { KAKAO } from '@/app/_constants/kakao'
+
+interface KakaoRequestBody {
+  grant_type: string
+  client_id: string
+  redirect_uri: string
+  code: string
+}
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const code = searchParams.get('code')
+
+  if (code === null) {
+    return Response.json({
+      error: 'code is required',
+    })
+  }
+
+  const kakaoRequestBody: KakaoRequestBody = {
+    grant_type: 'authorization_code',
+    client_id: KAKAO.REST_API_KEY,
+    redirect_uri: KAKAO.REDIRECT_URI,
+    code,
+  }
+
+  const data = await fetch(`https://kauth.kakao.com/oauth/token`, {
+    method: 'POST',
+    headers: {
+      Authorization: `469f80f467f98201541aadbfa83e8456`,
+      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
+    },
+
+    body: Object.keys(kakaoRequestBody)
+      .map((k) => encodeURIComponent(k) + '=' + encodeURI(kakaoRequestBody[k as keyof KakaoRequestBody]))
+      .join('&'),
+  }).then(async (res) => await res.json())
+
+  return Response.json(data)
+}
diff --git a/app/(route)/oauth/callback/kakao/page.tsx b/app/(route)/oauth/callback/kakao/page.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import { useSearchParams, useRouter } from 'next/navigation'
+
+import { useEffect } from 'react'
+
+import { useQuery } from '@tanstack/react-query'
+
+import { ROUTE } from '@/app/_constants/route'
+import { getTokenByAuthorizationCode } from '@/app/_service/auth'
+
+import { QUERY_KEY } from './queries'
+
+export default function KaKaoCallbackPage() {
+  const router = useRouter()
+
+  const searchParams = useSearchParams()
+  const code = searchParams.get('code')
+
+  const { isSuccess, data } = useQuery({
+    queryKey: QUERY_KEY.KAKAO_TOKEN(code as string),
+    queryFn: async () =>
+      await getTokenByAuthorizationCode({
+        code: code as string,
+      }),
+    enabled: code !== null,
+  })
+
+  useEffect(() => {
+    if (isSuccess) {
+      router.push(ROUTE.HOME)
+    }
+  }, [isSuccess])
+
+  if (!isSuccess) {
+    return null
+  }
+
+  return (
+    <div>
+      <span>{code}</span>
+      <span>{data.data.access_token}</span>
+    </div>
+  )
+}
diff --git a/app/(route)/oauth/callback/kakao/queries.ts b/app/(route)/oauth/callback/kakao/queries.ts
@@ -0,0 +1,3 @@
+export const QUERY_KEY = {
+  KAKAO_TOKEN: (code: string) => ['kakaoToken', code],
+}
diff --git a/app/(route)/page.tsx b/app/(route)/page.tsx
@@ -1,3 +1,15 @@
+import { KAKAO } from '../_constants/kakao'
+
 export default function Home() {
-  return <main>Hello, World!</main>
+  return (
+    <main>
+      <span>Hello, World!</span>
+      <a
+        className='rounded-md bg-yellow-500 p-4 text-white'
+        href={`https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO.REST_API_KEY}&redirect_uri=${KAKAO.REDIRECT_URI}`}
+      >
+        카카오 로그인
+      </a>
+    </main>
+  )
 }
diff --git a/app/_components/.gitkeep b/app/_components/.gitkeep
diff --git a/app/_components/providers/QueryClientProvider.tsx b/app/_components/providers/QueryClientProvider.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { PropsWithChildren, useState } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+export default function Providers({ children }: PropsWithChildren) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // With SSR, we usually want to set some default staleTime
+            // above 0 to avoid refetching immediately on the client
+            staleTime: 60 * 1000,
+          },
+        },
+      })
+  )
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+}
diff --git a/app/_constants/.gitkeep b/app/_constants/.gitkeep
diff --git a/app/_constants/env.ts b/app/_constants/env.ts
@@ -0,0 +1,16 @@
+export const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL
+
+export type AppEnv = 'production' | 'development'
+
+const getAppEnv = (): AppEnv => (process.env.NEXT_PUBLIC_APP_ENV as Exclude<AppEnv, 'development'>) || 'development'
+
+export const getApiEndpoint = () => {
+  switch (getAppEnv()) {
+    case 'production':
+      return SERVER_URL
+    case 'development':
+      return SERVER_URL
+    default:
+      return SERVER_URL
+  }
+}
diff --git a/app/_constants/kakao.ts b/app/_constants/kakao.ts
@@ -0,0 +1,5 @@
+export const KAKAO = {
+  // REST_API_KEY: '8cb6bb4a47d00e99bb5a038f9b6467fe',
+  REST_API_KEY: 'df0059498e461a8b0c76d9b4d537dbaa',
+  REDIRECT_URI: 'http://localhost:3000/oauth/callback/kakao',
+}
diff --git a/app/_constants/route.ts b/app/_constants/route.ts
@@ -0,0 +1,10 @@
+export const ROUTE = {
+  HOME: '/',
+  LOGIN: '/login',
+  SIGNUP: '/signup',
+  OAUTH: {
+    KAKAO: {
+      CALLBACK: '/oauth/callback/kakao',
+    },
+  },
+}
diff --git a/app/_service/.gitkeep b/app/_service/.gitkeep
diff --git a/app/_service/auth/auth.types.ts b/app/_service/auth/auth.types.ts
@@ -0,0 +1,11 @@
+export interface GetTokenFromKakaoParams {
+  code: string
+}
+
+export interface GetTokenFromKakaoResponse {
+  access_token: string
+  expires_in: number
+  refresh_token: string
+  refresh_token_expires_in: number
+  token_type: string
+}
diff --git a/app/_service/auth/index.ts b/app/_service/auth/index.ts
@@ -0,0 +1,6 @@
+import axios from 'axios'
+import { GetTokenFromKakaoParams, GetTokenFromKakaoResponse } from './auth.types'
+
+export const getTokenByAuthorizationCode = ({ code }: GetTokenFromKakaoParams) => {
+  return axios.get<GetTokenFromKakaoResponse>(`/oauth/callback/kakao/api?code=${code}`)
+}
diff --git a/app/_service/core/api.ts b/app/_service/core/api.ts
@@ -0,0 +1,33 @@
+import axios, { type AxiosRequestConfig } from 'axios'
+
+import { getApiEndpoint } from './api.utils'
+import type { ServerResponse } from './api.types'
+
+const createApi = () => {
+  const _api = axios.create({
+    baseURL: getApiEndpoint(),
+    withCredentials: true,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+
+  return _api
+}
+
+export const axiosInstance = createApi()
+
+const api = {
+  get: <T>(url: string, config?: AxiosRequestConfig) =>
+    axiosInstance.get<ServerResponse<T>>(url, config).then((res) => res.data),
+  post: <T>(url: string, payload?: object, config?: AxiosRequestConfig) =>
+    axiosInstance.post<ServerResponse<T>>(url, payload, config).then((res) => res.data),
+  put: <T>(url: string, payload?: object, config?: AxiosRequestConfig) =>
+    axiosInstance.put<ServerResponse<T>>(url, payload, config).then((res) => res.data),
+  patch: <T>(url: string, payload?: object, config?: AxiosRequestConfig) =>
+    axiosInstance.patch<ServerResponse<T>>(url, payload, config).then((res) => res.data),
+  delete: <T>(url: string, config?: AxiosRequestConfig) =>
+    axiosInstance.delete<ServerResponse<T>>(url, config).then((res) => res.data),
+}
+
+export default api
diff --git a/app/_service/core/api.types.ts b/app/_service/core/api.types.ts
@@ -0,0 +1,11 @@
+export interface ServerResponse<T> {
+  statusCode: number
+  responseMessage: string
+  data: T
+}
+
+export interface ServerError {
+  responseMessage: string
+  data: boolean
+  statusCode: number
+}
diff --git a/app/_service/core/api.utils.ts b/app/_service/core/api.utils.ts
@@ -0,0 +1,16 @@
+export const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL as string
+
+export type AppEnv = 'production' | 'development'
+
+const getAppEnv = (): AppEnv => (process.env.NEXT_PUBLIC_APP_ENV as Exclude<AppEnv, 'development'>) || 'development'
+
+export const getApiEndpoint = () => {
+  switch (getAppEnv()) {
+    case 'production':
+      return SERVER_URL
+    case 'development':
+      return SERVER_URL
+    default:
+      return SERVER_URL
+  }
+}
diff --git a/app/api/route.ts b/app/api/route.ts
@@ -0,0 +1 @@
+export async function GET(request: Request) {}
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/package.json b/package.json
@@ -14,12 +14,13 @@
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "prettier --write",
-      "eslint --fix"
+      "prettier --write"
     ]
   },
   "dependencies": {
     "clsx": "^2.0.0",
+    "@tanstack/react-query": "^5.13.4",
+    "axios": "^1.6.2",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		NEXT_PUBLIC_SERVER_URL=<NEXT_PUBLIC_SERVER_URL>
		NEXT_PUBLIC_APP_ENV=<NEXT_PUBLIC_APP_ENV>