Fix display issue

Addresses a problem where the screen was not displaying correctly.

src/components/SyncSettings.tsx

@@ -1,121 +1,128 @@
 
 import React, { useState, useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import { Switch } from '@/components/ui/switch';
-import { Label } from '@/components/ui/label';
-import { Loader2, CloudUpload } from 'lucide-react';
-import { isSyncEnabled, setSyncEnabled, syncAllData } from '@/utils/syncUtils';
-import { supabase } from '@/lib/supabase';
-import { toast } from '@/components/ui/use-toast';
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { CloudUpload, RefreshCw } from "lucide-react";
+import { isSyncEnabled, setSyncEnabled, syncAllData, getLastSyncTime } from "@/utils/syncUtils";
+import { supabase } from "@/lib/supabase";
+import { toast } from "@/components/ui/use-toast";
 
 const SyncSettings = () => {
-  const [syncEnabled, setSyncEnabledState] = useState(isSyncEnabled());
-  const [loading, setLoading] = useState(false);
-  const [userId, setUserId] = useState<string | null>(null);
-  
+  const [enabled, setEnabled] = useState(isSyncEnabled());
+  const [user, setUser] = useState<any>(null);
+  const [syncing, setSyncing] = useState(false);
+  const [lastSync, setLastSync] = useState<string | null>(getLastSyncTime());
+
   useEffect(() => {
-    // 현재 로그인한 사용자 가져오기
+    // 사용자 정보 가져오기
     const getUser = async () => {
-      const { data: { user } } = await supabase.auth.getUser();
-      setUserId(user?.id || null);
+      const { data } = await supabase.auth.getUser();
+      setUser(data.user);
     };
-    
     getUser();
+    
+    // 마지막 동기화 시간 업데이트
+    setLastSync(getLastSyncTime());
   }, []);
-  
-  const handleSyncToggle = (checked: boolean) => {
-    setSyncEnabledState(checked);
+
+  const handleSyncToggle = async (checked: boolean) => {
+    setEnabled(checked);
     setSyncEnabled(checked);
     
-    if (checked) {
-      toast({
-        title: "동기화 활성화됨",
-        description: "데이터가 클라우드에 자동으로 백업됩니다.",
-      });
-    } else {
-      toast({
-        title: "동기화 비활성화됨",
-        description: "데이터가 이 기기에만 저장됩니다.",
-      });
+    if (checked && user) {
+      // 동기화 활성화 시 즉시 동기화 실행
+      try {
+        setSyncing(true);
+        await syncAllData(user.id);
+        toast({
+          title: "동기화 설정 완료",
+          description: "모든 데이터가 클라우드에 동기화되었습니다.",
+        });
+        setLastSync(getLastSyncTime());
+      } catch (error) {
+        toast({
+          title: "동기화 오류",
+          description: "동기화 중 문제가 발생했습니다. 다시 시도해주세요.",
+          variant: "destructive"
+        });
+      } finally {
+        setSyncing(false);
+      }
     }
   };
-  
-  const handleSyncNow = async () => {
-    if (!userId) {
+
+  const handleManualSync = async () => {
+    if (!user) {
       toast({
-        title: "로그인이 필요합니다",
-        description: "동기화를 사용하려면 먼저 로그인해주세요.",
+        title: "로그인 필요",
+        description: "데이터 동기화를 위해 로그인이 필요합니다.",
         variant: "destructive"
       });
       return;
     }
     
-    setLoading(true);
     try {
-      await syncAllData(userId);
+      setSyncing(true);
+      await syncAllData(user.id);
       toast({
         title: "동기화 완료",
-        description: "모든 데이터가 성공적으로 동기화되었습니다."
+        description: "모든 데이터가 클라우드에 동기화되었습니다.",
       });
+      setLastSync(getLastSyncTime());
     } catch (error) {
-      console.error("동기화 오류:", error);
       toast({
-        title: "동기화 실패",
-        description: "데이터 동기화 중 오류가 발생했습니다.",
+        title: "동기화 오류",
+        description: "동기화 중 문제가 발생했습니다. 다시 시도해주세요.",
         variant: "destructive"
       });
     } finally {
-      setLoading(false);
+      setSyncing(false);
     }
   };
 
+  const formatLastSyncTime = () => {
+    if (!lastSync) return "아직 동기화된 적 없음";
+    
+    const date = new Date(lastSync);
+    return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+  };
+
   return (
-    <div className="neuro-card space-y-6">
+    <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-medium">데이터 동기화</h3>
-          <p className="text-sm text-gray-500">
-            여러 기기에서 데이터를 동기화하고 백업합니다
+        <div className="space-y-0.5">
+          <div className="flex items-center gap-2">
+            <CloudUpload className="h-5 w-5 text-neuro-income" />
+            <Label htmlFor="sync-toggle" className="text-base font-medium">
+              데이터 클라우드 동기화
+            </Label>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            여러 기기에서 예산 및 지출 데이터를 동기화합니다.
           </p>
         </div>
         <Switch
-          checked={syncEnabled}
+          id="sync-toggle"
+          checked={enabled}
           onCheckedChange={handleSyncToggle}
-          disabled={!userId || loading}
         />
       </div>
       
-      {syncEnabled && (
-        <div className="pt-2">
-          <Button
-            onClick={handleSyncNow}
-            disabled={loading || !userId}
-            className="w-full"
-            variant="outline"
-          >
-            {loading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                동기화 중...
-              </>
-            ) : (
-              <>
-                <CloudUpload className="mr-2 h-4 w-4" />
-                지금 동기화
-              </>
-            )}
-          </Button>
-          <p className="text-xs text-gray-500 mt-2 text-center">
-            마지막 동기화: {new Date().toLocaleString('ko-KR')}
-          </p>
+      {enabled && (
+        <div className="space-y-3">
+          <div className="flex justify-between items-center text-sm">
+            <span className="text-muted-foreground">마지막 동기화: {formatLastSyncTime()}</span>
+            <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>
+          </div>
         </div>
       )}
-      
-      {!userId && (
-        <p className="text-xs text-gray-500 text-center">
-          동기화를 사용하려면 로그인이 필요합니다
-        </p>
-      )}
     </div>
   );
 };