diff --git a/src/components/SyncSettings.tsx b/src/components/SyncSettings.tsx index d14b617..df0f817 100644 --- a/src/components/SyncSettings.tsx +++ b/src/components/SyncSettings.tsx @@ -1,3 +1,4 @@ + import React, { useState, useEffect } from 'react'; import { Switch } from "@/components/ui/switch"; import { Label } from "@/components/ui/label"; @@ -7,18 +8,19 @@ 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(getLastSyncTime()); - const { - user - } = useAuth(); + const { user } = useAuth(); const navigate = useNavigate(); + useEffect(() => { // 마지막 동기화 시간 업데이트 setLastSync(getLastSyncTime()); }, []); + const handleSyncToggle = async (checked: boolean) => { if (!user && checked) { toast({ @@ -28,8 +30,10 @@ const SyncSettings = () => { }); return; } + setEnabled(checked); setSyncEnabled(checked); + if (checked && user) { // 동기화 활성화 시 즉시 동기화 실행 try { @@ -37,7 +41,7 @@ const SyncSettings = () => { await syncAllData(user.id); toast({ title: "동기화 설정 완료", - description: "모든 데이터가 클라우드에 동기화되었습니다." + description: "모든 데이터가 클라우드에 동기화되었습니다.", }); setLastSync(getLastSyncTime()); } catch (error) { @@ -51,6 +55,7 @@ const SyncSettings = () => { } } }; + const handleManualSync = async () => { if (!user) { toast({ @@ -60,12 +65,13 @@ const SyncSettings = () => { }); return; } + try { setSyncing(true); await syncAllData(user.id); toast({ title: "동기화 완료", - description: "모든 데이터가 클라우드에 동기화되었습니다." + description: "모든 데이터가 클라우드에 동기화되었습니다.", }); setLastSync(getLastSyncTime()); } catch (error) { @@ -78,12 +84,16 @@ const SyncSettings = () => { setSyncing(false); } }; + const formatLastSyncTime = () => { if (!lastSync) return "아직 동기화된 적 없음"; + const date = new Date(lastSync); return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`; }; - return
+ + return ( +
@@ -96,20 +106,40 @@ const SyncSettings = () => { 여러 기기에서 예산 및 지출 데이터를 동기화합니다.

- +
- {enabled &&
+ {enabled && ( +
마지막 동기화: {formatLastSyncTime()} - {user ? : + ) : ( + } + + )}
-
} -
; +
+ )} +
+ ); }; -export default SyncSettings; \ No newline at end of file + +export default SyncSettings;