Implement user authentication

Implement login functionality and user authentication logic.

src/components/Header.tsx

@@ -1,13 +1,20 @@
 
 import React from 'react';
 import { Bell } from 'lucide-react';
+import { useAuth } from '@/contexts/AuthContext';
 
 const Header: React.FC = () => {
+  const { user } = useAuth();
+  
+  const userName = user?.user_metadata?.username || '익명';
+  
   return (
     <header className="py-8">
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-2xl font-bold neuro-text">반갑습니다</h1>
+          <h1 className="text-2xl font-bold neuro-text">
+            {user ? `${userName}님, 반갑습니다` : '반갑습니다'}
+          </h1>
           <p className="text-gray-500">젤리의 적자탈출</p>
         </div>
         <button className="neuro-flat p-2.5 rounded-full">

src/components/SyncSettings.tsx

@@ -4,28 +4,33 @@ import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { CloudUpload, RefreshCw } from "lucide-react";
 import { isSyncEnabled, setSyncEnabled, syncAllData, getLastSyncTime } from "@/utils/syncUtils";
-import { supabase } from "@/lib/supabase";
 import { toast } from "@/components/ui/use-toast";
+import { useAuth } from "@/contexts/AuthContext";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
 
 const SyncSettings = () => {
   const [enabled, setEnabled] = useState(isSyncEnabled());
-  const [user, setUser] = useState<any>(null);
   const [syncing, setSyncing] = useState(false);
   const [lastSync, setLastSync] = useState<string | null>(getLastSyncTime());
+  const { user } = useAuth();
+  const navigate = useNavigate();
 
   useEffect(() => {
-    // 사용자 정보 가져오기
-    const getUser = async () => {
-      const { data } = await supabase.auth.getUser();
-      setUser(data.user);
-    };
-    getUser();
-    
     // 마지막 동기화 시간 업데이트
     setLastSync(getLastSyncTime());
   }, []);
 
   const handleSyncToggle = async (checked: boolean) => {
+    if (!user && checked) {
+      toast({
+        title: "로그인 필요",
+        description: "데이터 동기화를 위해 로그인이 필요합니다.",
+        variant: "destructive"
+      });
+      return;
+    }
+    
     setEnabled(checked);
     setSyncEnabled(checked);
     
@@ -112,14 +117,24 @@ const SyncSettings = () => {
         <div className="space-y-3">
           <div className="flex justify-between items-center text-sm">
             <span className="text-muted-foreground">마지막 동기화: {formatLastSyncTime()}</span>
-            <button 
-              onClick={handleManualSync}
-              disabled={syncing}
-              className="neuro-button py-1 px-3 flex items-center gap-1"
-            >
-              <RefreshCw className={`h-4 w-4 ${syncing ? 'animate-spin' : ''}`} />
-              <span>{syncing ? '동기화 중...' : '지금 동기화'}</span>
-            </button>
+            {user ? (
+              <button 
+                onClick={handleManualSync}
+                disabled={syncing}
+                className="neuro-button py-1 px-3 flex items-center gap-1"
+              >
+                <RefreshCw className={`h-4 w-4 ${syncing ? 'animate-spin' : ''}`} />
+                <span>{syncing ? '동기화 중...' : '지금 동기화'}</span>
+              </button>
+            ) : (
+              <Button 
+                onClick={() => navigate('/login')}
+                size="sm"
+                className="py-1 px-3"
+              >
+                로그인하여 동기화
+              </Button>
+            )}
           </div>
         </div>
       )}