feat: implement base code for kakao oauth

cspell.json

@@ -3,5 +3,5 @@
   "language": "en",
   "ignorePaths": ["node_modules", ".next", "*.js", "*.json", "*.html", "*.css", "*.md", "*.svg"],
   "files": ["src/**/*.tsx", "src/**/*.ts"],
-  "words": ["picktoss"]
+  "words": ["picktoss", "kakao", "nextauth"]
 }

package.json

@@ -19,6 +19,7 @@
     "clsx": "^2.1.0",
     "lucide-react": "^0.367.0",
     "next": "14.1.4",
+    "next-auth": "^4.24.7",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.2",

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,47 @@
+import type { Account, DefaultSession } from 'next-auth'
+import NextAuth from 'next-auth/next'
+import KakaoProvider from 'next-auth/providers/kakao'
+
+declare module 'next-auth' {
+  interface Session {
+    user: {
+      id: string
+      accessToken: string
+      account: Account
+    } & DefaultSession['user']
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const handler = NextAuth({
+  providers: [
+    KakaoProvider({
+      clientId: process.env.AUTH_KAKAO_ID!,
+      clientSecret: process.env.AUTH_KAKAO_SECRET!,
+    }),
+  ],
+  secret: process.env.NEXTAUTH_SECRET!,
+  callbacks: {
+    jwt: ({ token, account }) => {
+      /**
+       * TODO: Backend API 호출 with account.access_token
+       */
+      token.accessToken = 'backend api access token'
+      token.account = account
+
+      return token
+    },
+
+    session: ({ session, token }) => {
+      if (token && token.sub) {
+        session.user.id = token.sub
+        session.user.accessToken = token.accessToken as string
+        session.user.account = token.account as Account
+      }
+
+      return session
+    },
+  },
+})
+
+export { handler as GET, handler as POST }

src/app/signin/page.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { signIn } from 'next-auth/react'
+import { Button } from '@/components/ui/button'
+import Image from 'next/image'
+
+export default function SignIn() {
+  return (
+    <main className="flex justify-center">
+      <div className="mt-16">
+        <Button
+          className="w-full bg-[#FBE44D] text-[#3C1E1E] hover:bg-[#FBE44D]/80"
+          onClick={() => signIn('kakao')}
+        >
+          <Image src="/icons/kakao.svg" alt="" width={20} height={20} className="mr-[12px]" />
+          카카오 로그인
+        </Button>
+      </div>
+    </main>
+  )
+}