Fix display issue

Addresses a problem where the screen was not displaying correctly.

src/App.tsx

@@ -4,6 +4,7 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { useState, useEffect } from "react";
 import Index from "./pages/Index";
 import Transactions from "./pages/Transactions";
 import Analytics from "./pages/Analytics";
@@ -18,32 +19,100 @@ import Login from "./pages/Login";
 import Register from "./pages/Register";
 import ForgotPassword from "./pages/ForgotPassword";
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
 
-const App = () => (
+const App = () => {
-  <QueryClientProvider client={queryClient}>
+  const [isLoaded, setIsLoaded] = useState(false);
-    <TooltipProvider>
+
-      <Toaster />
+  useEffect(() => {
-      <Sonner />
+    // 애플리케이션 초기화 및 로딩 상태 관리
-      <BrowserRouter>
+    try {
-        <Routes>
+      // 기본 예산 데이터 초기화
-          <Route path="/" element={<Index />} />
+      if (!localStorage.getItem('budgetData')) {
-          <Route path="/transactions" element={<Transactions />} />
+        const defaultBudgetData = {
-          <Route path="/analytics" element={<Analytics />} />
+          daily: {
-          <Route path="/settings" element={<Settings />} />
+            targetAmount: 40000,
-          <Route path="/profile-management" element={<ProfileManagement />} />
+            spentAmount: 0,
-          <Route path="/notification-settings" element={<NotificationSettings />} />
+            remainingAmount: 40000
-          <Route path="/security-privacy-settings" element={<SecurityPrivacySettings />} />
+          },
-          <Route path="/help-support" element={<HelpSupport />} />
+          weekly: {
-          <Route path="/payment-methods" element={<PaymentMethods />} />
+            targetAmount: 280000,
-          <Route path="/login" element={<Login />} />
+            spentAmount: 0,
-          <Route path="/register" element={<Register />} />
+            remainingAmount: 280000
-          <Route path="/forgot-password" element={<ForgotPassword />} />
+          },
-          <Route path="*" element={<NotFound />} />
+          monthly: {
-        </Routes>
+            targetAmount: 1200000,
-      </BrowserRouter>
+            spentAmount: 0,
-    </TooltipProvider>
+            remainingAmount: 1200000
-  </QueryClientProvider>
+          }
-);
+        };
+        localStorage.setItem('budgetData', JSON.stringify(defaultBudgetData));
+      }
+      
+      // 기본 카테고리 예산 설정
+      if (!localStorage.getItem('categoryBudgets')) {
+        const defaultCategoryBudgets = {
+          식비: 400000,
+          생활비: 600000,
+          교통비: 200000
+        };
+        localStorage.setItem('categoryBudgets', JSON.stringify(defaultCategoryBudgets));
+      }
+      
+      // 빈 트랜잭션 배열 초기화
+      if (!localStorage.getItem('transactions')) {
+        localStorage.setItem('transactions', JSON.stringify([]));
+      }
+      
+      setIsLoaded(true);
+    } catch (error) {
+      console.error('앱 초기화 중 오류 발생:', error);
+      // 오류가 발생해도 앱 로딩
+      setIsLoaded(true);
+    }
+  }, []);
+
+  if (!isLoaded) {
+    return <div className="flex items-center justify-center h-screen">
+      <div className="text-center">
+        <div className="animate-spin h-8 w-8 border-4 border-neuro-income border-t-transparent rounded-full mx-auto mb-4"></div>
+        <p className="text-gray-600">앱을 로딩 중입니다...</p>
+      </div>
+    </div>;
+  }
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TooltipProvider>
+        <Toaster />
+        <Sonner />
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<Index />} />
+            <Route path="/transactions" element={<Transactions />} />
+            <Route path="/analytics" element={<Analytics />} />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="/profile-management" element={<ProfileManagement />} />
+            <Route path="/notification-settings" element={<NotificationSettings />} />
+            <Route path="/security-privacy-settings" element={<SecurityPrivacySettings />} />
+            <Route path="/help-support" element={<HelpSupport />} />
+            <Route path="/payment-methods" element={<PaymentMethods />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/register" element={<Register />} />
+            <Route path="/forgot-password" element={<ForgotPassword />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </BrowserRouter>
+      </TooltipProvider>
+    </QueryClientProvider>
+  );
+};
 
 export default App;

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

src/utils/sync/syncSettings.ts

@@ -14,3 +14,13 @@ export const isSyncEnabled = (): boolean => {
 export const setSyncEnabled = (enabled: boolean): void => {
   localStorage.setItem('syncEnabled', enabled.toString());
 };
+
+// 최종 동기화 시간 관리
+export const getLastSyncTime = (): string | null => {
+  return localStorage.getItem('lastSyncTime');
+};
+
+export const setLastSyncTime = (): void => {
+  const now = new Date().toISOString();
+  localStorage.setItem('lastSyncTime', now);
+};

src/utils/syncUtils.ts

@@ -1,5 +1,5 @@
 
-import { isSyncEnabled, setSyncEnabled } from './sync/syncSettings';
+import { isSyncEnabled, setSyncEnabled, getLastSyncTime, setLastSyncTime } from './sync/syncSettings';
 import { uploadTransactions, downloadTransactions } from './sync/transactionSync';
 import { uploadBudgets, downloadBudgets } from './sync/budgetSync';
 
@@ -10,7 +10,9 @@ export {
   uploadTransactions,
   downloadTransactions,
   uploadBudgets,
-  downloadBudgets
+  downloadBudgets,
+  getLastSyncTime,
+  setLastSyncTime
 };
 
 /**
@@ -19,8 +21,17 @@ export {
 export const syncAllData = async (userId: string): Promise<void> => {
   if (!userId || !isSyncEnabled()) return;
   
-  await downloadTransactions(userId);
+  try {
-  await downloadBudgets(userId);
+    console.log('데이터 동기화 시작...');
-  await uploadTransactions(userId);
+    await downloadTransactions(userId);
-  await uploadBudgets(userId);
+    await downloadBudgets(userId);
+    await uploadTransactions(userId);
+    await uploadBudgets(userId);
+    
+    // 동기화 시간 업데이트
+    setLastSyncTime();
+    console.log('데이터 동기화 완료!');
+  } catch (error) {
+    console.error('동기화 중 오류 발생:', error);
+  }
 };