diff --git a/src/App.tsx b/src/App.tsx index 74d8312..87b7c66 100644 --- a/src/App.tsx +++ b/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 = () => ( } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/pages/SecurityPrivacySettings.tsx b/src/pages/SecurityPrivacySettings.tsx new file mode 100644 index 0000000..0024d3c --- /dev/null +++ b/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([ + { + id: 'twoFactor', + title: '2단계 인증', + description: '로그인 시 추가 인증을 요구합니다.', + icon: , + enabled: false, + }, + { + id: 'loginNotifications', + title: '로그인 알림', + description: '새로운 기기에서 로그인할 때 알림을 받습니다.', + icon: , + enabled: true, + }, + { + id: 'biometricLogin', + title: '생체 인증 로그인', + description: '지문이나 얼굴 인식을 통해 로그인합니다.', + icon: , + enabled: false, + }, + { + id: 'dataEncryption', + title: '데이터 암호화', + description: '모든 개인 데이터를 암호화합니다.', + icon: , + enabled: true, + }, + { + id: 'sessionTimeout', + title: '세션 자동 종료', + description: '일정 시간 후 자동으로 로그아웃합니다.', + icon: , + enabled: true, + }, + { + id: 'privacyMode', + title: '개인정보 보호 모드', + description: '타인이 거래 내역을 볼 수 없도록 합니다.', + icon: , + enabled: false, + }, + { + id: 'dataDeletion', + title: '계정 삭제 요청', + description: '모든 개인정보와 데이터를 영구 삭제합니다.', + icon: , + 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 ( +
+
+ {/* Header */} +
+
+ +

보안 및 개인정보

+
+
+ + {/* Security Settings */} +
+ {settings.map((setting) => ( +
+
+
+ {setting.icon} +
+
+

{setting.title}

+

{setting.description}

+
+
+
+ handleToggle(setting.id)} + className="data-[state=checked]:bg-neuro-income" + /> + +
+
+ ))} +
+ + {/* Save Button */} +
+ +
+
+
+ ); +}; + +export default SecurityPrivacySettings; diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index 42f48d8..e4e99e7 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -87,6 +87,7 @@ const Settings = () => { icon={Lock} label="보안 및 개인정보" description="보안 및 데이터 설정" + onClick={() => navigate('/security-privacy-settings')} />