From 059ee4878da01eb6c5e95fea3cb9242846f745fa Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 15 Mar 2025 23:24:02 +0000
Subject: [PATCH] Fix security settings UI

Fix text alignment issues and add data reset functionality to the security and privacy settings page.
---
 src/pages/SecurityPrivacySettings.tsx | 85 +++++++++++++++++++++++++--
 1 file changed, 79 insertions(+), 6 deletions(-)

diff --git a/src/pages/SecurityPrivacySettings.tsx b/src/pages/SecurityPrivacySettings.tsx
index 0024d3c..21622cc 100644
--- a/src/pages/SecurityPrivacySettings.tsx
+++ b/src/pages/SecurityPrivacySettings.tsx
@@ -1,11 +1,21 @@
 
 import React, { useState } from 'react';
-import { ArrowLeft, Shield, Lock, Key, Fingerprint, Eye, EyeOff, UserX } from 'lucide-react';
+import { ArrowLeft, Shield, Lock, Key, Fingerprint, Eye, EyeOff, UserX, Trash2 } 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';
+import { 
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogClose
+} from '@/components/ui/dialog';
+import { resetAllStorageData } from '@/utils/storageUtils';
 
 type SecuritySetting = {
   id: string;
@@ -18,6 +28,7 @@ type SecuritySetting = {
 const SecurityPrivacySettings = () => {
   const navigate = useNavigate();
   const { toast } = useToast();
+  const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
   
   const [settings, setSettings] = useState<SecuritySetting[]>([
     {
@@ -84,9 +95,7 @@ const SecurityPrivacySettings = () => {
       const newState = !setting.enabled;
       toast({
         title: `${setting.title}이(가) ${newState ? '활성화' : '비활성화'}되었습니다.`,
-        description: newState 
-          ? "보안 설정이 변경되었습니다." 
-          : "보안 설정이 변경되었습니다.",
+        description: "보안 설정이 변경되었습니다.",
       });
     }
   };
@@ -100,6 +109,27 @@ const SecurityPrivacySettings = () => {
     navigate('/settings');
   };
 
+  const handleResetAllData = () => {
+    // 데이터 초기화 수행
+    try {
+      resetAllStorageData();
+      toast({
+        title: "모든 데이터가 초기화되었습니다.",
+        description: "모든 예산, 지출 내역, 설정이 초기화되었습니다.",
+      });
+      setIsResetDialogOpen(false);
+      // 초기화 후 설정 페이지로 이동
+      setTimeout(() => navigate('/settings'), 1000);
+    } catch (error) {
+      console.error('데이터 초기화 실패:', error);
+      toast({
+        title: "데이터 초기화 실패",
+        description: "데이터를 초기화하는 중 문제가 발생했습니다.",
+        variant: "destructive",
+      });
+    }
+  };
+
   return (
     <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
@@ -126,12 +156,12 @@ const SecurityPrivacySettings = () => {
                 <div className="neuro-pressed p-3 rounded-full text-neuro-income">
                   {setting.icon}
                 </div>
-                <div>
+                <div className="flex-1 mr-4">
                   <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">
+              <div className="flex items-center">
                 <Switch
                   id={`${setting.id}-switch`}
                   checked={setting.enabled}
@@ -149,6 +179,49 @@ const SecurityPrivacySettings = () => {
           ))}
         </div>
 
+        {/* Data Reset Section */}
+        <div className="neuro-flat p-6 mb-8">
+          <div className="flex items-center space-x-4">
+            <div className="neuro-pressed p-3 rounded-full text-red-500">
+              <Trash2 size={20} />
+            </div>
+            <div className="flex-1">
+              <h3 className="font-medium">데이터 초기화</h3>
+              <p className="text-xs text-gray-500">모든 예산, 지출 내역, 설정이 초기화됩니다.</p>
+            </div>
+          </div>
+          <Button 
+            variant="destructive" 
+            className="w-full mt-4"
+            onClick={() => setIsResetDialogOpen(true)}
+          >
+            모든 데이터 초기화
+          </Button>
+        </div>
+
+        {/* Reset Dialog */}
+        <Dialog open={isResetDialogOpen} onOpenChange={setIsResetDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>정말 모든 데이터를 초기화하시겠습니까?</DialogTitle>
+              <DialogDescription>
+                이 작업은 되돌릴 수 없으며, 모든 예산, 지출 내역, 설정이 영구적으로 삭제됩니다.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter className="flex flex-col sm:flex-row gap-2 sm:gap-0">
+              <DialogClose asChild>
+                <Button variant="outline" className="sm:mr-2">취소</Button>
+              </DialogClose>
+              <Button 
+                variant="destructive" 
+                onClick={handleResetAllData}
+              >
+                확인, 모든 데이터 초기화
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
         {/* Save Button */}
         <div className="px-6">
           <Button