Visual edit in Lovable

Edited UI in Lovable

src/components/security/DataResetDialog.tsx

@@ -1,17 +1,7 @@
-
 import React from 'react';
 import { CloudOff, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { 
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogClose } from '@/components/ui/dialog';
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogClose
-} from '@/components/ui/dialog';
-
 interface DataResetDialogProps {
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
@@ -20,7 +10,6 @@ interface DataResetDialogProps {
   isLoggedIn: boolean;
   syncEnabled: boolean;
 }
-
 const DataResetDialog: React.FC<DataResetDialogProps> = ({
   isOpen,
   onOpenChange,
@@ -29,28 +18,19 @@ const DataResetDialog: React.FC<DataResetDialogProps> = ({
   isLoggedIn,
   syncEnabled
 }) => {
-  return (
+  return <Dialog open={isOpen} onOpenChange={onOpenChange}>
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>정말 모든 데이터를 초기화하시겠습니까?</DialogTitle>
           <DialogDescription>
-            {isLoggedIn ? (
+            {isLoggedIn ? <>
-              <>
                 이 작업은 되돌릴 수 없으며, 로컬 및 클라우드에 저장된 모든 예산, 지출 내역이 영구적으로 삭제됩니다.
                 <div className="flex items-center mt-2 text-amber-600">
                   <CloudOff size={16} className="mr-2" /> 
                   클라우드 데이터도 함께 삭제됩니다.
                 </div>
-                {syncEnabled && (
+                {syncEnabled}
-                  <div className="mt-2 text-amber-600">
+              </> : "이 작업은 되돌릴 수 없으며, 모든 예산, 지출 내역, 설정이 영구적으로 삭제됩니다."}
-                    동기화 설정이 비활성화됩니다.
-                  </div>
-                )}
-              </>
-            ) : (
-              "이 작업은 되돌릴 수 없으며, 모든 예산, 지출 내역, 설정이 영구적으로 삭제됩니다."
-            )}
             <div className="mt-2">
               단, '환영합니다' 화면 표시 설정과 로그인 상태는 유지됩니다.
             </div>
@@ -60,22 +40,14 @@ const DataResetDialog: React.FC<DataResetDialogProps> = ({
           <DialogClose asChild>
             <Button variant="outline" className="sm:mr-2" disabled={isResetting}>취소</Button>
           </DialogClose>
-          <Button 
+          <Button variant="destructive" onClick={onConfirm} disabled={isResetting}>
-            variant="destructive" 
+            {isResetting ? <>
-            onClick={onConfirm}
-            disabled={isResetting}
-          >
-            {isResetting ? (
-              <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 초기화 중...
-              </>
+              </> : isLoggedIn ? '확인, 로컬 및 클라우드 데이터 초기화' : '확인, 모든 데이터 초기화'}
-            ) : isLoggedIn ? '확인, 로컬 및 클라우드 데이터 초기화' : '확인, 모든 데이터 초기화'}
           </Button>
         </DialogFooter>
       </DialogContent>
-    </Dialog>
+    </Dialog>;
-  );
 };
-
+export default DataResetDialog;
-export default DataResetDialog;