Next Auth 카카오 로그인

@types/environment.d.ts

@@ -5,5 +5,7 @@ namespace NodeJS {
     NEXT_PUBLIC_MIXPANEL_ID: string;
     NEXT_PUBLIC_HOTJAR_ID: string;
     NEXT_PUBLIC_HOTJAR_SV: string;
+    KAKAO_CLIENT_ID: string;
+    KAKAO_CLIENT_SECRET: string;
   }
 }

next.config.js

@@ -14,7 +14,7 @@ const nextConfig = {
     appDir: false,
     forceSwcTransforms: true,
   },
-  pageExtensions: ['page.tsx'],
+  pageExtensions: ['page.tsx', 'page.ts'],
   swcMinify: true,
   compiler: {
     emotion: true,

package.json

@@ -40,10 +40,12 @@
     "@sentry/nextjs": "^7.49.0",
     "@tanstack/react-query": "^4.29.3",
     "axios": "^1.3.5",
+    "dotenv": "^16.0.3",
     "emotion-normalize": "^11.0.1",
     "framer-motion": "^10.12.2",
     "mixpanel-browser": "^2.46.0",
     "next": "13.3.0",
+    "next-auth": "^4.22.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hotjar": "^6.1.0"
@@ -114,4 +116,4 @@
     "vitest": "^0.30.1",
     "webpack": "^5.79.0"
   }
-}
+}

src/components/kakaoLoginButton/KakaoLogin.test.tsx

@@ -0,0 +1,63 @@
+import { signIn, signOut, useSession } from 'next-auth/react';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, type Mock, test, vi } from 'vitest';
+
+import KakaoLoginButton from './KakaoLoginButton';
+
+describe('components/kakaoLoginButton/KakaoLoginButton', () => {
+  vi.mock('next-auth/react', () => ({
+    signIn: vi.fn(),
+    signOut: vi.fn(),
+    useSession: vi.fn(),
+  }));
+
+  beforeEach(() => {
+    // useSession 함수의 반환 값을 설정
+    (useSession as Mock<unknown[]>).mockReturnValue({ data: null });
+  });
+
+  afterEach(cleanup);
+
+  test('정의되어 있어야 한다', () => {
+    expect(KakaoLoginButton).toBeDefined();
+  });
+
+  test('유저가 로그인하지 않은 경우에는 카카오로 로그인 하기 버튼을 렌더링한다', () => {
+    render(<KakaoLoginButton />);
+    expect(screen.getByRole('button')).toHaveTextContent('카카오로 로그인 하기');
+  });
+
+  test('유저가 로그인한 경우에는 유저를 환영하는 문구와 "로그아웃 하기" 버튼을 렌더링한다', () => {
+    (useSession as Mock<unknown[]>).mockReturnValue({
+      data: {
+        user: {
+          name: '오연',
+        },
+      },
+    });
+    render(<KakaoLoginButton />);
+    expect(screen.getByText('오연님 환영합니다.')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent('로그아웃 하기');
+  });
+
+  test('"로그아웃 하기" 버튼을 클릭하면 signOut 함수를 호출한다', () => {
+    (useSession as Mock<unknown[]>).mockReturnValue({
+      data: {
+        user: {
+          name: '오연',
+        },
+      },
+    });
+    render(<KakaoLoginButton />);
+    const logoutButton = screen.getByRole('button', { name: '로그아웃 하기' });
+    fireEvent.click(logoutButton);
+    expect(signOut).toHaveBeenCalledTimes(1);
+  });
+
+  test('"카카오로 로그인 하기" 버튼을 클릭하면 signIn 함수를 호출한다', () => {
+    render(<KakaoLoginButton />);
+    const loginButton = screen.getByRole('button', { name: '카카오로 로그인 하기' });
+    fireEvent.click(loginButton);
+    expect(signIn).toHaveBeenCalledWith('kakao');
+  });
+});

src/components/kakaoLoginButton/KakaoLoginButton.stories.tsx

@@ -0,0 +1,21 @@
+import { SessionProvider } from 'next-auth/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import KakaoLoginButton from './KakaoLoginButton';
+
+const meta: Meta<typeof KakaoLoginButton> = {
+  title: 'KakaoLoginButton',
+  component: KakaoLoginButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof KakaoLoginButton>;
+
+export const Primary: Story = {
+  render: () => (
+    <SessionProvider>
+      <KakaoLoginButton />
+    </SessionProvider>
+  ),
+};

src/components/kakaoLoginButton/KakaoLoginButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { signIn, signOut, useSession } from 'next-auth/react';
+
+const KakaoLoginButton = () => {
+  const { data: session } = useSession();
+
+  if (session) {
+    // TODO : 추후 서버로 session.user.name 과 session.user.email 정보를 보내줄 수 있음
+    return (
+      <>
+        <div>{session.user?.name}님 환영합니다.</div>
+        <button type="button" onClick={() => signOut()}>
+          로그아웃 하기
+        </button>
+      </>
+    );
+  }
+
+  return (
+    <button type="button" onClick={() => signIn('kakao')}>
+      카카오로 로그인 하기
+    </button>
+  );
+};
+
+export default KakaoLoginButton;