Refactor form component

Refactor the form component to use a hybrid approach.

src/components/AddTransactionButton.tsx

@@ -1,5 +1,4 @@
-
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { PlusIcon, X, Coffee, Home, Car } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useNavigate } from 'react-router-dom';
@@ -10,6 +9,8 @@ import { Button } from './ui/button';
 import { useForm } from 'react-hook-form';
 import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group';
 import { toast } from '@/components/ui/use-toast';
+import { supabase } from '@/lib/supabase';
+import { isSyncEnabled } from '@/utils/syncUtils';
 
 interface ExpenseFormValues {
   title: string;
@@ -17,8 +18,6 @@ interface ExpenseFormValues {
   category: string;
 }
 
-const EXPENSE_CATEGORIES = ['식비', '생활비', '교통비'];
-
 // Define category icons mapping
 const categoryIcons: Record<string, React.ReactNode> = {
   식비: <Coffee size={18} />,
@@ -28,6 +27,7 @@ const categoryIcons: Record<string, React.ReactNode> = {
 
 const AddTransactionButton = () => {
   const [showExpenseDialog, setShowExpenseDialog] = useState(false);
+  const [userId, setUserId] = useState<string | null>(null);
   const navigate = useNavigate();
   
   const form = useForm<ExpenseFormValues>({
@@ -38,6 +38,16 @@ const AddTransactionButton = () => {
     }
   });
   
+  useEffect(() => {
+    // 현재 로그인한 사용자 가져오기
+    const getUser = async () => {
+      const { data: { user } } = await supabase.auth.getUser();
+      setUserId(user?.id || null);
+    };
+    
+    getUser();
+  }, []);
+  
   // Format number with commas
   const formatWithCommas = (value: string): string => {
     // Remove commas first to avoid duplicates when typing
@@ -50,7 +60,7 @@ const AddTransactionButton = () => {
     form.setValue('amount', formattedValue);
   };
   
-  const onSubmit = (data: ExpenseFormValues) => {
+  const onSubmit = async (data: ExpenseFormValues) => {
     // Remove commas before processing the amount
     const numericAmount = data.amount.replace(/,/g, '');
     
@@ -75,6 +85,26 @@ const AddTransactionButton = () => {
     existingTransactions = [newExpense, ...existingTransactions];
     localStorage.setItem('transactions', JSON.stringify(existingTransactions));
     
+    // 동기화가 활성화되어 있고 사용자가 로그인되어 있다면 Supabase에도 저장
+    if (isSyncEnabled() && userId) {
+      try {
+        const { error } = await supabase.from('transactions').insert({
+          user_id: userId,
+          title: data.title,
+          amount: parseInt(numericAmount),
+          date: formattedDate,
+          category: data.category,
+          type: 'expense',
+          transaction_id: newExpense.id
+        });
+        
+        if (error) throw error;
+      } catch (error) {
+        console.error('Supabase에 지출 추가 실패:', error);
+        // 실패해도 로컬에는 저장되어 있으므로 사용자에게 알리지 않음
+      }
+    }
+    
     // 폼을 초기화하고 다이얼로그를 닫습니다
     form.reset();
     setShowExpenseDialog(false);

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;