[#129] Kakao Login (#186)

* 🐛Fix: authorize 함수 수정 및 에러 처리 개선

- API 응답값 변경 사항 반영
  - 중복된 `id`, `name`, `email` 제거
  - API 응답값(`id`, `username`, `email`) 활용하여 데이터 리턴
- 크리덴셜 미제공 시 `null` 반환하도록 수정
- `try-catch` 블록 추가로 에러 로그 출력 및 한 줄로 처리 간소화

* ✨Feat: Kakao 로그인 기능 추가 및 인증 로직 개선

- 카카오 로그인 API 함수 및 타입 정의
- 카카오 로그인 버튼에 signIn('kakao') 핸들러 추가
- KakaoProvider 추가로 카카오 로그인 지원
  - `clientId`와 `clientSecret` 환경 변수 적용
  - 카카오 로그인 시 서버 검증 로직 추가 (`postKaKaoLogin`)
  - 성공 시 사용자 정보 매핑
- next-auth 타입 정의 수정 및 확장
  - `Session` 타입에서 `DefaultSession['user']`에 이미 포함된 `name`, `email` 제거
  - `User` 타입을 `DefaultUser`로 확장하여 기존 중복된 필드(`id`, `name`, `email`) 제거
  - `User` 타입에 `expiredAt` 필드 추가

Author: SSUK-H

src/app/(unauthorized)/signin/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-// import Image from 'next/image';
+import Image from 'next/image';
 import Link from 'next/link';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { AUTH_VALIDATION_REGEX } from '@constant/auth';
@@ -9,6 +9,7 @@ import Button from '@ui/common/Button';
 import { INPUT_MESSAGE } from '@constant/input';
 import { useLogin } from '@hooks/auth/useLogin';
 import { useRouter } from 'next/navigation';
+import { signIn } from 'next-auth/react';
 
 type TLoginFormInputs = {
   email: string;
@@ -98,11 +99,11 @@ export default function SignInPage({
           >
             로그인하기
           </Button>
-          {/* TODO: 2차 개발에 추가 */}
-          {/* <Button
+          <Button
             size="large"
             fullWidth={true}
             className="border-[#FEE500] bg-[#FEE500] text-slate-800 hover:border-[#FEE500] hover:bg-[#FEE500] active:border-[#FEE500] active:bg-[#FEE500]"
+            onClick={() => signIn('kakao')}
           >
             <Image
               src="/asset/image/kakao.png"
@@ -111,7 +112,7 @@ export default function SignInPage({
               alt="카카오 아이콘"
             />
             카카오톡으로 로그인하기
-          </Button> */}
+          </Button>
         </div>
         <div className="flex h-5 gap-1">
           <div className="text-sm font-medium leading-tight">

src/lib/api/service/auth.api.ts

@@ -1,6 +1,7 @@
 import {
   TGetEmailExistsRequest,
   TGetEmailExistsResponse,
+  TPostKaKaoLoginRequest,
   TPostLoginRequest,
   TPostRefreshTokenRequest,
   TPostRegisterRequest,
@@ -50,3 +51,11 @@ export const getEmailExists = async (data: TGetEmailExistsRequest) => {
     console.error(err);
   }
 };
+
+export const postKaKaoLogin = async (data: TPostKaKaoLoginRequest) => {
+  const response = await post<TResponse<TTokenResponse | null>>(
+    '/api/v1/torip/auth/kakao/token',
+    data,
+  );
+  return response.data;
+};

src/lib/authOptions.ts

@@ -1,8 +1,10 @@
 import CredentialsProvider from 'next-auth/providers/credentials';
+import KakaoProvider from 'next-auth/providers/kakao';
 import { NextAuthOptions, Session, User } from 'next-auth';
 import { JWT } from 'next-auth/jwt';
 import dayjs from 'dayjs';
 import {
+  postKaKaoLogin,
   postLogin,
   postRefreshToken,
   postRegister,
@@ -37,60 +39,108 @@ export const authOptions: NextAuthOptions = {
           placeholder: '비밀번호를 입력해주세요.',
         },
       },
-      async authorize(
-        credentials: Record<'name' | 'email' | 'password', string> | undefined,
-      ) {
-        // 기존 authorize 함수 내용 유지
+      async authorize(credentials) {
         if (!credentials) {
-          throw new Error('No credentials provided.');
+          return null;
         }
+
         const { name, email, password } = credentials;
 
-        // 회원가입
-        if (name) {
+        try {
+          // 회원가입
+          if (name) {
+            const {
+              result: token,
+              success,
+              message,
+            } = await postRegister({
+              username: name,
+              email: email,
+              password: password,
+            });
+
+            if (success && token) {
+              return {
+                id: token.id.toString(),
+                name: token.username,
+                email: token.email,
+                accessToken: token.accessToken,
+                refreshToken: token.refreshToken,
+                expiredAt: token.expiredAt,
+              };
+            } else {
+              throw new Error(message || 'Signup failed.');
+            }
+          }
+
+          // 로그인
           const {
             result: token,
             success,
             message,
-          } = await postRegister({
-            username: name,
+          } = await postLogin({
             email: email,
             password: password,
           });
 
-          if (success) {
-            return { id: '1', name, email, ...token };
+          if (success && token) {
+            return {
+              id: token.id.toString(),
+              name: token.username,
+              email: token.email,
+              accessToken: token.accessToken,
+              refreshToken: token.refreshToken,
+              expiredAt: token.expiredAt,
+            };
           } else {
-            const error = new Error('Signup failed.');
-            (error as Error).message = message;
-            throw error;
+            throw new Error(message || 'Login failed.');
           }
-        }
-
-        // 로그인
-        const {
-          result: token,
-          success,
-          message,
-        } = await postLogin({
-          email: email,
-          password: password,
-        });
-
-        if (success) {
-          return { id: '1', name, email, ...token };
-        } else {
-          const error = new Error('Login failed.');
-          (error as Error).message = message;
-          throw error;
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('Authentication error:', error);
+          return null;
         }
       },
     }),
+    KakaoProvider({
+      clientId: process.env.KAKAO_CLIENT_ID!,
+      clientSecret: process.env.KAKAO_CLIENT_SECRET!,
+    }),
   ],
   pages: {
     signIn: '/signin',
   },
   callbacks: {
+    async signIn({ user, account }) {
+      // 카카오 로그인 서버 검증
+      if (account?.provider === 'kakao' && account.access_token) {
+        try {
+          const {
+            result: token,
+            success,
+            message,
+          } = await postKaKaoLogin({
+            accessToken: account.access_token,
+          });
+          if (success && token) {
+            user.id = token.id.toString();
+            user.name = token.username;
+            user.email = token.email;
+            user.accessToken = token.accessToken;
+            user.refreshToken = token.refreshToken;
+            user.expiredAt = token.expiredAt;
+            return true;
+          } else {
+            throw new Error(message || 'KAKAO Login failed.');
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('Error during Kakao login:', error);
+          return false;
+        }
+      }
+      return true;
+    },
     async jwt({ token, user }: { token: JWT; user?: IMyUser }) {
       if (user) {
         token.id = Number(user.id);

src/lib/next-auth.d.ts

@@ -1,25 +1,21 @@
 // types/next-auth.d.ts
 
-import { DefaultSession } from 'next-auth';
+import { DefaultSession, DefaultUser } from 'next-auth';
 
 declare module 'next-auth' {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   interface Session {
     user: {
       id: number;
-      name: string | null;
-      email: string | null;
     } & DefaultSession['user'];
     accessToken?: string;
     refreshToken?: string;
     expiredAt?: string;
   }
-
-  interface IUser {
-    id: number;
-    name: string;
-    email: string;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  interface User extends DefaultUser {
     accessToken?: string;
     refreshToken?: string;
+    expiredAt?: string;
   }
 }

src/model/auth.model.ts

@@ -13,3 +13,7 @@ export type TGetEmailExistsRequest = string;
 export type TGetEmailExistsResponse = {
   exists: boolean;
 };
+
+export type TPostKaKaoLoginRequest = {
+  accessToken: string;
+};

src/model/model.ts

@@ -6,6 +6,9 @@ export type TResponse<T> = {
 };
 
 export type TTokenResponse = {
+  id: number;
+  username: string;
+  email: string;
   accessToken: string;
   refreshToken: string;
   expiredAt: string;