Visual edit in Lovable

Edited UI in Lovable

src/components/SyncSettings.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from 'react';
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
@@ -8,19 +7,18 @@ import { toast } from "@/components/ui/use-toast";
 import { useAuth } from "@/contexts/AuthContext";
 import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
-
 const SyncSettings = () => {
   const [enabled, setEnabled] = useState(isSyncEnabled());
   const [syncing, setSyncing] = useState(false);
   const [lastSync, setLastSync] = useState<string | null>(getLastSyncTime());
-  const { user } = useAuth();
+  const {
+    user
+  } = useAuth();
   const navigate = useNavigate();
-
   useEffect(() => {
     // 마지막 동기화 시간 업데이트
     setLastSync(getLastSyncTime());
   }, []);
-
   const handleSyncToggle = async (checked: boolean) => {
     if (!user && checked) {
       toast({
@@ -30,10 +28,8 @@ const SyncSettings = () => {
       });
       return;
     }
-    
     setEnabled(checked);
     setSyncEnabled(checked);
-    
     if (checked && user) {
       // 동기화 활성화 시 즉시 동기화 실행
       try {
@@ -41,7 +37,7 @@ const SyncSettings = () => {
         await syncAllData(user.id);
         toast({
           title: "동기화 설정 완료",
-          description: "모든 데이터가 클라우드에 동기화되었습니다.",
+          description: "모든 데이터가 클라우드에 동기화되었습니다."
         });
         setLastSync(getLastSyncTime());
       } catch (error) {
@@ -55,7 +51,6 @@ const SyncSettings = () => {
       }
     }
   };
-
   const handleManualSync = async () => {
     if (!user) {
       toast({
@@ -65,13 +60,12 @@ const SyncSettings = () => {
       });
       return;
     }
-    
     try {
       setSyncing(true);
       await syncAllData(user.id);
       toast({
         title: "동기화 완료",
-        description: "모든 데이터가 클라우드에 동기화되었습니다.",
+        description: "모든 데이터가 클라우드에 동기화되었습니다."
       });
       setLastSync(getLastSyncTime());
     } catch (error) {
@@ -84,16 +78,12 @@ const SyncSettings = () => {
       setSyncing(false);
     }
   };
-
   const formatLastSyncTime = () => {
     if (!lastSync) return "아직 동기화된 적 없음";
-    
     const date = new Date(lastSync);
     return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
   };
-
-  return (
-    <div className="space-y-6">
+  return <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div className="space-y-0.5">
           <div className="flex items-center gap-2">
@@ -106,40 +96,20 @@ const SyncSettings = () => {
             여러 기기에서 예산 및 지출 데이터를 동기화합니다.
           </p>
         </div>
-        <Switch
-          id="sync-toggle"
-          checked={enabled}
-          onCheckedChange={handleSyncToggle}
-        />
+        <Switch id="sync-toggle" checked={enabled} onCheckedChange={handleSyncToggle} />
       </div>
       
-      {enabled && (
-        <div className="space-y-3">
+      {enabled && <div className="space-y-3">
           <div className="flex justify-between items-center text-sm">
             <span className="text-muted-foreground">마지막 동기화: {formatLastSyncTime()}</span>
-            {user ? (
-              <button 
-                onClick={handleManualSync}
-                disabled={syncing}
-                className="neuro-button py-1 px-3 flex items-center gap-1"
-              >
+            {user ? <button onClick={handleManualSync} disabled={syncing} className="neuro-button py-1 px-3 flex items-center gap-1">
                 <RefreshCw className={`h-4 w-4 ${syncing ? 'animate-spin' : ''}`} />
                 <span>{syncing ? '동기화 중...' : '지금 동기화'}</span>
-              </button>
-            ) : (
-              <Button 
-                onClick={() => navigate('/login')}
-                size="sm"
-                className="py-1 px-3"
-              >
+              </button> : <Button onClick={() => navigate('/login')} size="sm" className="py-1 px-3 text-neuro-income">
                 로그인하여 동기화
-              </Button>
-            )}
+              </Button>}
           </div>
-        </div>
-      )}
-    </div>
-  );
+        </div>}
+    </div>;
 };
-
-export default SyncSettings;
+export default SyncSettings;