Refactor form component

Refactor the form component to use a hybrid approach.
2025-03-15 05:09:25 +00:00
parent df257a948b
commit 1ad6e5b685
7 changed files with 518 additions and 5 deletions
--- a/src/components/SyncSettings.tsx
+++ b/src/components/SyncSettings.tsx
@@ -0,0 +1,123 @@
+
+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, CloudSync } from 'lucide-react';
+import { isSyncEnabled, setSyncEnabled, syncAllData } 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);
+  
+  useEffect(() => {
+    // 현재 로그인한 사용자 가져오기
+    const getUser = async () => {
+      const { data: { user } } = await supabase.auth.getUser();
+      setUserId(user?.id || null);
+    };
+    
+    getUser();
+  }, []);
+  
+  const handleSyncToggle = (checked: boolean) => {
+    setSyncEnabledState(checked);
+    setSyncEnabled(checked);
+    
+    if (checked) {
+      toast({
+        title: "동기화 활성화됨",
+        description: "데이터가 클라우드에 자동으로 백업됩니다.",
+      });
+    } else {
+      toast({
+        title: "동기화 비활성화됨",
+        description: "데이터가 이 기기에만 저장됩니다.",
+      });
+    }
+  };
+  
+  const handleSyncNow = async () => {
+    if (!userId) {
+      toast({
+        title: "로그인이 필요합니다",
+        description: "동기화를 사용하려면 먼저 로그인해주세요.",
+        variant: "destructive"
+      });
+      return;
+    }
+    
+    setLoading(true);
+    try {
+      await syncAllData(userId);
+      toast({
+        title: "동기화 완료",
+        description: "모든 데이터가 성공적으로 동기화되었습니다."
+      });
+    } catch (error) {
+      console.error("동기화 오류:", error);
+      toast({
+        title: "동기화 실패",
+        description: "데이터 동기화 중 오류가 발생했습니다.",
+        variant: "destructive"
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="neuro-card 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">
+            여러 기기에서 데이터를 동기화하고 백업합니다
+          </p>
+        </div>
+        <Switch
+          checked={syncEnabled}
+          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" />
+                동기화 중...
+              </>
+            ) : (
+              <>
+                <CloudSync 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>
+  );
+};
+
+export default SyncSettings;