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);