Merge branch 'main' of https://github.com/picktoss/pick-toss-next int…

…o feat-custom-fetch

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

@@ -20,6 +20,7 @@
     "lucide-react": "^0.367.0",
     "next": "14.1.4",
     "qs": "^6.12.1",
+    "next-auth": "^4.24.7",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.2",

src/apis/api-endpoint.ts

@@ -0,0 +1,67 @@
+import { ServerEnv } from '@/apis/server-env'
+
+enum Method {
+  GET = 'GET',
+  POST = 'POST',
+  PATCH = 'PATCH',
+  DELETE = 'DELETE',
+}
+
+const baseUrl = ServerEnv.apiUrl()
+
+export const API_ENDPOINT = {
+  // 퀴즈
+  quiz: {
+    getTodayQuiz: () => ({
+      url: `${baseUrl}/todayQuiz`,
+      method: Method.GET,
+    }),
+    getBookmarks: () => ({
+      url: `${baseUrl}/bookmark`,
+      method: Method.GET,
+    }),
+    postBookmark: (quizId: number) => ({
+      url: `${baseUrl}/bookmark/${quizId}`,
+      method: Method.POST,
+    }),
+    deleteBookmark: (quizId: number) => ({
+      url: `${baseUrl}/bookmark/${quizId}`,
+      method: Method.DELETE,
+    }),
+  },
+
+  // 문서 관련 API
+  document: {},
+
+  // 재화 관련 API
+  star: {
+    getStarEvent: () => ({
+      url: `${baseUrl}/starEvent`,
+      method: Method.GET,
+    }),
+  },
+
+  // 사용자 관련 API
+  user: {
+    getUser: () => ({
+      url: `${baseUrl}/user`,
+      method: Method.GET,
+    }),
+  },
+
+  // auth 관련 API
+  auth: {
+    signIn: () => ({
+      url: `${baseUrl}/auth`,
+      method: Method.POST,
+    }),
+    verifyEmail: () => ({
+      url: `${baseUrl}/auth/verification`,
+      method: Method.POST,
+    }),
+    checkVerification: () => ({
+      url: `${baseUrl}/auth/verification/check`,
+      method: Method.POST,
+    }),
+  },
+}

src/apis/server-env.ts

@@ -0,0 +1,9 @@
+import assert from 'assert'
+
+export const ServerEnv = {
+  apiUrl: () => {
+    assert(process.env.NEXT_PUBLIC_API_URL, 'NEXT_PUBLIC_API_URL 값이 .env.local에 없습니다.')
+
+    return process.env.NEXT_PUBLIC_API_URL
+  },
+}

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

@@ -0,0 +1,45 @@
+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 }) => {
+      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>
+  )
+}

src/utils/assert.ts

@@ -0,0 +1,9 @@
+export function assert(condition: unknown, error: Error | string = new Error()): asserts condition {
+  if (!condition) {
+    if (typeof error === 'string') {
+      throw new Error(error)
+    } else {
+      throw error
+    }
+  }
+}