Refactor SecurityPrivacySettings component

Refactor the SecurityPrivacySettings component into smaller, more manageable sub-components for improved readability and maintainability. The functionality of the page remains unchanged.
2025-03-15 23:27:21 +00:00
parent 435ea26556
commit 9631303b3c
7 changed files with 284 additions and 167 deletions
--- a/src/components/security/DataResetSection.tsx
+++ b/src/components/security/DataResetSection.tsx
@@ -0,0 +1,91 @@
+
+import React, { useState } from 'react';
+import { Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/hooks/use-toast';
+import { useNavigate } from 'react-router-dom';
+import { resetAllStorageData } from '@/utils/storageUtils';
+import { 
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogClose
+} from '@/components/ui/dialog';
+
+const DataResetSection = () => {
+  const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
+  const { toast } = useToast();
+  const navigate = useNavigate();
+
+  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="neuro-flat p-6 mb-8">
+        <div className="flex items-start space-x-4">
+          <div className="neuro-pressed p-3 rounded-full text-red-500 shrink-0 mt-1">
+            <Trash2 size={20} />
+          </div>
+          <div className="text-left">
+            <h3 className="font-medium">데이터 초기화</h3>
+            <p className="text-xs text-gray-500 mt-1">모든 예산, 지출 내역, 설정이 초기화됩니다.</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>
+    </>
+  );
+};
+
+export default DataResetSection;