로그인 기능 구현

.env.local

@@ -1,2 +1,2 @@
-VITE_PROJECT_URL = 'https://rkrrreuxefnsnovornvcc.supabase.co'
-VITE_PUBLIC_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJrcnJldXhlZm5zbm92b3JudmNjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTI5MTM4NjYsImV4cCI6MjA2ODQ4OTg2Nn0.Y2-2gcusLoQ8STuUkV3V-1yvxpCzrY2Ur0vHwDZpDXc'
+VITE_PROJECT_URL=https://rkrreuxefnsnovornvcc.supabase.co
+VITE_PUBLIC_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJrcnJldXhlZm5zbm92b3JudmNjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTI5MTM4NjYsImV4cCI6MjA2ODQ4OTg2Nn0.Y2-2gcusLoQ8STuUkV3V-1yvxpCzrY2Ur0vHwDZpDXc

package.json

@@ -28,16 +28,19 @@
     "react": "^19.0.0",
     "react-day-picker": "^9.7.0",
     "react-dom": "^19.0.0",
+    "react-router-dom": "^7.7.1",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.3",
-    "tw-animate-css": "^1.2.5"
+    "tw-animate-css": "^1.2.5",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@eslint/js": "^9.21.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
+    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react-swc": "^3.8.0",
     "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.1",

src/features/kanban/components/auth/GitHubLoginButton.tsx

@@ -0,0 +1,28 @@
+import { useAuthStore } from '@/stores/authStore';
+
+export const GitHubLoginButton = () => {
+  const { loginWithGitHub, isLoading } = useAuthStore();
+
+  return (
+    <button
+      onClick={loginWithGitHub}
+      disabled={isLoading}
+      className="flex w-full justify-center rounded-md border border-transparent bg-gray-900 px-6 py-4 text-lg font-medium text-white shadow-sm transition-colors hover:bg-gray-800 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      {isLoading ? (
+        <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-white"></div>
+      ) : (
+        <>
+          <svg className="mr-3 h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fillRule="evenodd"
+              d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+          Nettee 멤버로 로그인
+        </>
+      )}
+    </button>
+  );
+};

src/features/kanban/components/auth/GuestLoginButton.tsx

@@ -0,0 +1,29 @@
+import { useNavigate } from 'react-router-dom';
+
+import { useAuthStore } from '@/stores/authStore';
+
+export const GuestLoginButton = () => {
+  const navigate = useNavigate();
+  const { loginAsGuest } = useAuthStore();
+
+  const handleGuestLogin = () => {
+    loginAsGuest();
+    navigate('/');
+  };
+
+  return (
+    <button
+      onClick={handleGuestLogin}
+      className="flex w-full justify-center rounded-md border border-gray-300 bg-white px-6 py-4 text-lg font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
+    >
+      <svg className="mr-3 h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
+        <path
+          fillRule="evenodd"
+          d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+          clipRule="evenodd"
+        />
+      </svg>
+      게스트로 둘러보기
+    </button>
+  );
+};

src/features/kanban/components/auth/LoginPage.tsx

@@ -0,0 +1,47 @@
+import { useAuth } from '../../hooks/useAuth';
+import { GitHubLoginButton } from './GitHubLoginButton';
+import { GuestLoginButton } from './GuestLoginButton';
+
+export const LoginPage = () => {
+  const { isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="h-16 w-16 animate-spin rounded-full border-b-2 border-blue-600"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-2xl">
+        <h1 className="mb-4 text-center text-5xl font-bold text-gray-900">
+          칸반 로그인
+        </h1>
+        <p className="mb-12 text-center text-xl text-gray-600">
+          게스트로 둘러보거나 GitHub 계정으로 로그인하세요
+        </p>
+      </div>
+
+      <div className="sm:mx-auto sm:w-full sm:max-w-2xl">
+        <div className="bg-white px-8 py-12 shadow-lg sm:rounded-lg sm:px-16">
+          <div className="space-y-8">
+            <GuestLoginButton />
+
+            <div className="relative">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-gray-300" />
+              </div>
+              <div className="relative flex justify-center text-lg">
+                <span className="bg-white px-4 text-gray-500">또는</span>
+              </div>
+            </div>
+
+            <GitHubLoginButton />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/features/kanban/hooks/useAuth.ts

@@ -0,0 +1,41 @@
+// src/hooks/useAuth.ts
+import { useEffect } from 'react';
+
+import { supabase } from '@/shared/lib/supa-client';
+import { useAuthStore } from '@/stores/authStore';
+
+export const useAuth = () => {
+  const authStore = useAuthStore();
+
+  useEffect(() => {
+    // 초기 인증 상태 확인
+    authStore.initializeAuth();
+
+    // Supabase 세션 변경 감지
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange(async (event, session) => {
+      if (event === 'SIGNED_IN' && session) {
+        authStore.setStatus('authenticated');
+        authStore.setUser({
+          id: session.user.id,
+          email: session.user.email!,
+          name: session.user.user_metadata?.full_name || session.user.email!,
+          avatar_url: session.user.user_metadata?.avatar_url,
+          github_username: session.user.user_metadata?.user_name,
+        });
+        authStore.setSession(session);
+      } else if (event === 'SIGNED_OUT') {
+        if (authStore.status !== 'guest') {
+          authStore.setStatus('unauthenticated');
+          authStore.setUser(null);
+          authStore.setSession(null);
+        }
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  return authStore;
+};