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.

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;

src/components/security/SaveSettingsButton.tsx

@@ -0,0 +1,41 @@
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { useNavigate } from 'react-router-dom';
+import { useToast } from '@/hooks/use-toast';
+
+type SaveSettingsButtonProps = {
+  onSave?: () => void;
+};
+
+const SaveSettingsButton = ({ onSave }: SaveSettingsButtonProps) => {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+
+  const handleSave = () => {
+    // 사용자 정의 저장 함수가 있으면 실행
+    if (onSave) {
+      onSave();
+    }
+    
+    // 기본 저장 동작
+    toast({
+      title: "보안 설정이 저장되었습니다.",
+      description: "변경사항이 성공적으로 적용되었습니다.",
+    });
+    navigate('/settings');
+  };
+
+  return (
+    <div className="px-6">
+      <Button 
+        onClick={handleSave}
+        className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
+      >
+        저장하기
+      </Button>
+    </div>
+  );
+};
+
+export default SaveSettingsButton;

src/components/security/SecurityHeader.tsx

@@ -0,0 +1,27 @@
+
+import React from 'react';
+import { ArrowLeft } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+
+const SecurityHeader = () => {
+  const navigate = useNavigate();
+  
+  return (
+    <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>
+  );
+};
+
+export default SecurityHeader;

src/components/security/SecuritySettingItem.tsx

@@ -0,0 +1,52 @@
+
+import React from 'react';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+
+type SecuritySettingItemProps = {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  enabled: boolean;
+  onToggle: (id: string) => void;
+};
+
+const SecuritySettingItem = ({ 
+  id, 
+  title, 
+  description, 
+  icon, 
+  enabled, 
+  onToggle 
+}: SecuritySettingItemProps) => {
+  return (
+    <div className="flex items-start justify-between">
+      <div className="flex items-start space-x-4 flex-1">
+        <div className="neuro-pressed p-3 rounded-full text-neuro-income shrink-0 mt-1">
+          {icon}
+        </div>
+        <div className="text-left">
+          <h3 className="font-medium">{title}</h3>
+          <p className="text-xs text-gray-500 mt-1">{description}</p>
+        </div>
+      </div>
+      <div className="flex items-center ml-4">
+        <Switch
+          id={`${id}-switch`}
+          checked={enabled}
+          onCheckedChange={() => onToggle(id)}
+          className="data-[state=checked]:bg-neuro-income"
+        />
+        <Label
+          htmlFor={`${id}-switch`}
+          className="sr-only"
+        >
+          {title}
+        </Label>
+      </div>
+    </div>
+  );
+};
+
+export default SecuritySettingItem;

src/components/security/SecuritySettingsList.tsx

@@ -0,0 +1,50 @@
+
+import React from 'react';
+import { useToast } from '@/hooks/use-toast';
+import SecuritySettingItem from './SecuritySettingItem';
+import { SecuritySetting } from './types';
+
+type SecuritySettingsListProps = {
+  settings: SecuritySetting[];
+  setSettings: React.Dispatch<React.SetStateAction<SecuritySetting[]>>;
+};
+
+const SecuritySettingsList = ({ settings, setSettings }: SecuritySettingsListProps) => {
+  const { toast } = useToast();
+
+  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: "보안 설정이 변경되었습니다.",
+      });
+    }
+  };
+  
+  return (
+    <div className="space-y-6 neuro-flat p-6 mb-8">
+      {settings.map((setting) => (
+        <SecuritySettingItem
+          key={setting.id}
+          id={setting.id}
+          title={setting.title}
+          description={setting.description}
+          icon={setting.icon}
+          enabled={setting.enabled}
+          onToggle={handleToggle}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default SecuritySettingsList;

src/components/security/types.ts

@@ -0,0 +1,10 @@
+
+import { ReactNode } from 'react';
+
+export type SecuritySetting = {
+  id: string;
+  title: string;
+  description: string;
+  icon: ReactNode;
+  enabled: boolean;
+};

src/pages/SecurityPrivacySettings.tsx

@@ -1,35 +1,13 @@
 
 import React, { useState } from 'react';
-import { ArrowLeft, Shield, Lock, Key, Fingerprint, Eye, EyeOff, UserX, Trash2 } from 'lucide-react';
+import { Shield, Lock, Key, Fingerprint, Eye, EyeOff, UserX } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
+import SecurityHeader from '@/components/security/SecurityHeader';
-import { Button } from '@/components/ui/button';
+import SecuritySettingsList from '@/components/security/SecuritySettingsList';
-import { Switch } from '@/components/ui/switch';
+import DataResetSection from '@/components/security/DataResetSection';
-import { Label } from '@/components/ui/label';
+import SaveSettingsButton from '@/components/security/SaveSettingsButton';
-import { useToast } from '@/hooks/use-toast';
+import { SecuritySetting } from '@/components/security/types';
-import { 
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogClose
-} from '@/components/ui/dialog';
-import { resetAllStorageData } from '@/utils/storageUtils';
-
-type SecuritySetting = {
-  id: string;
-  title: string;
-  description: string;
-  icon: React.ReactNode;
-  enabled: boolean;
-};
 
 const SecurityPrivacySettings = () => {
-  const navigate = useNavigate();
-  const { toast } = useToast();
-  const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
-  
   const [settings, setSettings] = useState<SecuritySetting[]>([
     {
       id: 'twoFactor',
@@ -82,155 +60,23 @@ const SecurityPrivacySettings = () => {
     },
   ]);
 
-  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: "보안 설정이 변경되었습니다.",
-      });
-    }
-  };
-
-  const saveSettings = () => {
-    // 여기에 설정 저장 로직 추가
-    toast({
-      title: "보안 설정이 저장되었습니다.",
-      description: "변경사항이 성공적으로 적용되었습니다.",
-    });
-    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">
         {/* Header */}
-        <header className="py-8">
+        <SecurityHeader />
-          <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">
+        <SecuritySettingsList 
-          {settings.map((setting) => (
+          settings={settings} 
-            <div key={setting.id} className="flex items-start justify-between">
+          setSettings={setSettings}
-              <div className="flex items-start space-x-4 flex-1">
+        />
-                <div className="neuro-pressed p-3 rounded-full text-neuro-income shrink-0 mt-1">
-                  {setting.icon}
-                </div>
-                <div className="text-left">
-                  <h3 className="font-medium">{setting.title}</h3>
-                  <p className="text-xs text-gray-500 mt-1">{setting.description}</p>
-                </div>
-              </div>
-              <div className="flex items-center ml-4">
-                <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>
 
         {/* Data Reset Section */}
-        <div className="neuro-flat p-6 mb-8">
+        <DataResetSection />
-          <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>
 
         {/* Save Button */}
-        <div className="px-6">
+        <SaveSettingsButton />
-          <Button 
-            onClick={saveSettings}
-            className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
-          >
-            저장하기
-          </Button>
-        </div>
       </div>
     </div>
   );