Implement security settings page

Implement the security settings page.

src/App.tsx

@@ -10,6 +10,7 @@ import Analytics from "./pages/Analytics";
 import Settings from "./pages/Settings";
 import ProfileManagement from "./pages/ProfileManagement";
 import NotificationSettings from "./pages/NotificationSettings";
+import SecurityPrivacySettings from "./pages/SecurityPrivacySettings";
 import NotFound from "./pages/NotFound";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
@@ -30,6 +31,7 @@ const App = () => (
           <Route path="/settings" element={<Settings />} />
           <Route path="/profile-management" element={<ProfileManagement />} />
           <Route path="/notification-settings" element={<NotificationSettings />} />
+          <Route path="/security-privacy-settings" element={<SecurityPrivacySettings />} />
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
           <Route path="/forgot-password" element={<ForgotPassword />} />

src/pages/SecurityPrivacySettings.tsx

@@ -0,0 +1,166 @@
+
+import React, { useState } from 'react';
+import { ArrowLeft, Shield, Lock, Key, Fingerprint, Eye, EyeOff, UserX } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { useToast } from '@/hooks/use-toast';
+
+type SecuritySetting = {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  enabled: boolean;
+};
+
+const SecurityPrivacySettings = () => {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  
+  const [settings, setSettings] = useState<SecuritySetting[]>([
+    {
+      id: 'twoFactor',
+      title: '2단계 인증',
+      description: '로그인 시 추가 인증을 요구합니다.',
+      icon: <Shield size={20} />,
+      enabled: false,
+    },
+    {
+      id: 'loginNotifications',
+      title: '로그인 알림',
+      description: '새로운 기기에서 로그인할 때 알림을 받습니다.',
+      icon: <Lock size={20} />,
+      enabled: true,
+    },
+    {
+      id: 'biometricLogin',
+      title: '생체 인증 로그인',
+      description: '지문이나 얼굴 인식을 통해 로그인합니다.',
+      icon: <Fingerprint size={20} />,
+      enabled: false,
+    },
+    {
+      id: 'dataEncryption',
+      title: '데이터 암호화',
+      description: '모든 개인 데이터를 암호화합니다.',
+      icon: <Key size={20} />,
+      enabled: true,
+    },
+    {
+      id: 'sessionTimeout',
+      title: '세션 자동 종료',
+      description: '일정 시간 후 자동으로 로그아웃합니다.',
+      icon: <Eye size={20} />,
+      enabled: true,
+    },
+    {
+      id: 'privacyMode',
+      title: '개인정보 보호 모드',
+      description: '타인이 거래 내역을 볼 수 없도록 합니다.',
+      icon: <EyeOff size={20} />,
+      enabled: false,
+    },
+    {
+      id: 'dataDeletion',
+      title: '계정 삭제 요청',
+      description: '모든 개인정보와 데이터를 영구 삭제합니다.',
+      icon: <UserX size={20} />,
+      enabled: false,
+    },
+  ]);
+
+  const handleToggle = (id: string) => {
+    setSettings(
+      settings.map((setting) =>
+        setting.id === id ? { ...setting, enabled: !setting.enabled } : setting
+      )
+    );
+    
+    // 토스트 메시지로 상태 변경 알림
+    const setting = settings.find(s => s.id === id);
+    if (setting) {
+      const newState = !setting.enabled;
+      toast({
+        title: `${setting.title}이(가) ${newState ? '활성화' : '비활성화'}되었습니다.`,
+        description: newState 
+          ? "보안 설정이 변경되었습니다." 
+          : "보안 설정이 변경되었습니다.",
+      });
+    }
+  };
+
+  const saveSettings = () => {
+    // 여기에 설정 저장 로직 추가
+    toast({
+      title: "보안 설정이 저장되었습니다.",
+      description: "변경사항이 성공적으로 적용되었습니다.",
+    });
+    navigate('/settings');
+  };
+
+  return (
+    <div className="min-h-screen bg-neuro-background pb-24">
+      <div className="max-w-md mx-auto px-6">
+        {/* Header */}
+        <header className="py-8">
+          <div className="flex items-center mb-6">
+            <Button 
+              variant="ghost" 
+              size="icon" 
+              onClick={() => navigate('/settings')}
+              className="mr-2"
+            >
+              <ArrowLeft size={20} />
+            </Button>
+            <h1 className="text-2xl font-bold neuro-text">보안 및 개인정보</h1>
+          </div>
+        </header>
+        
+        {/* Security Settings */}
+        <div className="space-y-6 neuro-flat p-6 mb-8">
+          {settings.map((setting) => (
+            <div key={setting.id} className="flex items-center justify-between">
+              <div className="flex items-center space-x-4">
+                <div className="neuro-pressed p-3 rounded-full text-neuro-income">
+                  {setting.icon}
+                </div>
+                <div>
+                  <h3 className="font-medium">{setting.title}</h3>
+                  <p className="text-xs text-gray-500">{setting.description}</p>
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Switch
+                  id={`${setting.id}-switch`}
+                  checked={setting.enabled}
+                  onCheckedChange={() => handleToggle(setting.id)}
+                  className="data-[state=checked]:bg-neuro-income"
+                />
+                <Label
+                  htmlFor={`${setting.id}-switch`}
+                  className="sr-only"
+                >
+                  {setting.title}
+                </Label>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Save Button */}
+        <div className="px-6">
+          <Button 
+            onClick={saveSettings}
+            className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
+          >
+            저장하기
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SecurityPrivacySettings;

src/pages/Settings.tsx

@@ -87,6 +87,7 @@ const Settings = () => {
             icon={Lock} 
             label="보안 및 개인정보" 
             description="보안 및 데이터 설정"
+            onClick={() => navigate('/security-privacy-settings')}
           />
           <SettingsOption 
             icon={HelpCircle}