Implement user authentication

Implement login functionality and user authentication logic.

src/pages/Settings.tsx

@@ -5,6 +5,7 @@ import NavBar from '@/components/NavBar';
 import SyncSettings from '@/components/SyncSettings';
 import { User, CreditCard, Bell, Lock, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { useAuth } from '@/contexts/AuthContext';
 
 const SettingsOption = ({
   icon: Icon,
@@ -35,6 +36,13 @@ const SettingsOption = ({
 
 const Settings = () => {
   const navigate = useNavigate();
+  const { user, signOut } = useAuth();
+  
+  const handleLogout = async () => {
+    await signOut();
+    navigate('/login');
+  };
+  
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -47,8 +55,12 @@ const Settings = () => {
               <User size={24} />
             </div>
             <div>
-              <h2 className="font-semibold text-lg">홍길동</h2>
-              <p className="text-sm text-gray-500">honggildong@example.com</p>
+              <h2 className="font-semibold text-lg">
+                {user ? user.user_metadata?.username || '사용자' : '로그인 필요'}
+              </h2>
+              <p className="text-sm text-gray-500">
+                {user ? user.email : '계정에 로그인하세요'}
+              </p>
             </div>
           </div>
         </header>
@@ -74,7 +86,12 @@ const Settings = () => {
         </div>
         
         <div className="mt-8">
-          <SettingsOption icon={LogOut} label="로그아웃" color="text-neuro-expense" />
+          <SettingsOption 
+            icon={LogOut} 
+            label={user ? "로그아웃" : "로그인"} 
+            color="text-neuro-expense" 
+            onClick={user ? handleLogout : () => navigate('/login')}
+          />
         </div>
         
         <div className="mt-12 text-center text-xs text-gray-400">