Clarify data synchronization process

Clarify the data synchronization process and address a scenario where data is lost after logging out, initializing data, and logging back in.

src/components/SyncSettings.tsx

@@ -2,12 +2,13 @@
 import React, { useState, useEffect } from 'react';
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
-import { CloudUpload, RefreshCw } from "lucide-react";
+import { CloudUpload, RefreshCw, AlertCircle } from "lucide-react";
 import { isSyncEnabled, setSyncEnabled, syncAllData, getLastSyncTime } from "@/utils/syncUtils";
 import { toast } from "@/hooks/useToast.wrapper";
 import { useAuth } from "@/contexts/auth";
 import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 
 const SyncSettings = () => {
   const [enabled, setEnabled] = useState(isSyncEnabled());
@@ -19,6 +20,18 @@ const SyncSettings = () => {
   useEffect(() => {
     // 마지막 동기화 시간 업데이트
     setLastSync(getLastSyncTime());
+    
+    // 세션 상태 변경 감지
+    const handleAuthChange = () => {
+      setEnabled(isSyncEnabled());
+      setLastSync(getLastSyncTime());
+    };
+    
+    window.addEventListener('auth-state-changed', handleAuthChange);
+    
+    return () => {
+      window.removeEventListener('auth-state-changed', handleAuthChange);
+    };
   }, []);
 
   const handleSyncToggle = async (checked: boolean) => {
@@ -50,6 +63,9 @@ const SyncSettings = () => {
           description: "동기화 중 문제가 발생했습니다. 다시 시도해주세요.",
           variant: "destructive"
         });
+        // 실패 시 동기화 비활성화
+        setEnabled(false);
+        setSyncEnabled(false);
       } finally {
         setSyncing(false);
       }
@@ -116,18 +132,32 @@ const SyncSettings = () => {
       
       {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 bg-neuro-income text-white hover:bg-neuro-income/90"
-              >
-                <RefreshCw className={`h-4 w-4 ${syncing ? 'animate-spin' : ''}`} />
-                <span>{syncing ? '동기화 중...' : '지금 동기화'}</span>
-              </button>
-            ) : (
+          {user ? (
+            <>
+              <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 bg-neuro-income text-white hover:bg-neuro-income/90"
+                >
+                  <RefreshCw className={`h-4 w-4 ${syncing ? 'animate-spin' : ''}`} />
+                  <span>{syncing ? '동기화 중...' : '지금 동기화'}</span>
+                </button>
+              </div>
+              
+              <Alert className="bg-amber-50 text-amber-800 border-amber-200">
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>동기화 작동 방식</AlertTitle>
+                <AlertDescription className="text-sm">
+                  이 기능은 양방향 동기화입니다. 로그인 후 동기화를 켜면 서버 데이터와 로컬 데이터가 병합됩니다.
+                  데이터 초기화 후에도 동기화 버튼을 누르면 서버에 저장된 데이터를 다시 불러옵니다.
+                </AlertDescription>
+              </Alert>
+            </>
+          ) : (
+            <div className="flex justify-between items-center">
+              <span className="text-sm text-muted-foreground">로그인이 필요합니다</span>
               <Button 
                 onClick={() => navigate('/login')}
                 size="sm"
@@ -135,8 +165,8 @@ const SyncSettings = () => {
               >
                 로그인하여 동기화
               </Button>
-            )}
-          </div>
+            </div>
+          )}
         </div>
       )}
     </div>