Fix onboarding and data issues

- Fix issue where welcome dialog reappears.
- Fix issue where new expenses are not reflected.
- Improve card layout on mobile devices.

src/components/AddTransactionButton.tsx

@@ -21,55 +21,70 @@ const AddTransactionButton = () => {
   };
   
   const onSubmit = async (data: ExpenseFormValues) => {
-    // Remove commas before processing the amount
-    const numericAmount = data.amount.replace(/,/g, '');
-    
-    // 현재 날짜와 시간을 가져옵니다
-    const now = new Date();
-    const formattedDate = `오늘, ${now.getHours()}:${now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()} ${now.getHours() >= 12 ? 'PM' : 'AM'}`;
-    
-    const newExpense: Transaction = {
-      id: Date.now().toString(),
-      title: data.title,
-      amount: parseInt(numericAmount),
-      date: formattedDate,
-      category: data.category,
-      type: 'expense' // 명시적으로 'expense'로 설정
-    };
-    
-    // BudgetContext를 통해 지출 추가
-    addTransaction(newExpense);
-    
-    // 동기화가 활성화되어 있고 사용자가 로그인되어 있다면 Supabase에도 저장
     try {
-      const { data: { user } } = await supabase.auth.getUser();
+      // Remove commas before processing the amount
+      const numericAmount = data.amount.replace(/,/g, '');
       
-      if (isSyncEnabled() && user) {
-        const { error } = await supabase.from('transactions').insert({
-          user_id: user.id,
-          title: data.title,
-          amount: parseInt(numericAmount),
-          date: formattedDate,
-          category: data.category,
-          type: 'expense',
-          transaction_id: newExpense.id
-        });
+      // 현재 날짜와 시간을 가져옵니다
+      const now = new Date();
+      const formattedDate = `오늘, ${now.getHours()}:${now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()} ${now.getHours() >= 12 ? 'PM' : 'AM'}`;
+      
+      const newExpense: Transaction = {
+        id: Date.now().toString(),
+        title: data.title,
+        amount: parseInt(numericAmount),
+        date: formattedDate,
+        category: data.category,
+        type: 'expense' // 명시적으로 'expense'로 설정
+      };
+      
+      console.log('새 지출 추가:', newExpense);
+      
+      // BudgetContext를 통해 지출 추가
+      addTransaction(newExpense);
+      
+      // 동기화가 활성화되어 있고 사용자가 로그인되어 있다면 Supabase에도 저장
+      try {
+        const { data: { user } } = await supabase.auth.getUser();
         
-        if (error) throw error;
+        if (isSyncEnabled() && user) {
+          const { error } = await supabase.from('transactions').insert({
+            user_id: user.id,
+            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);
+        // 실패해도 로컬에는 저장되어 있으므로 사용자에게 알리지 않음
       }
+      
+      // 다이얼로그를 닫습니다
+      setShowExpenseDialog(false);
+      
+      // 사용자에게 알림을 표시합니다
+      toast({
+        title: "지출이 추가되었습니다",
+        description: `${data.title} 항목이 ${formatWithCommas(numericAmount)}원으로 등록되었습니다.`,
+      });
+      
+      // 브라우저 이벤트 발생시켜 다른 페이지에서도 업데이트되도록 함
+      window.dispatchEvent(new Event('budgetDataUpdated'));
+      window.dispatchEvent(new Event('transactionAdded'));
     } catch (error) {
-      console.error('Supabase에 지출 추가 실패:', error);
-      // 실패해도 로컬에는 저장되어 있으므로 사용자에게 알리지 않음
+      console.error('지출 추가 중 오류 발생:', error);
+      toast({
+        title: "지출 추가 실패",
+        description: "지출을 추가하는 도중 오류가 발생했습니다.",
+        variant: "destructive",
+      });
     }
-    
-    // 다이얼로그를 닫습니다
-    setShowExpenseDialog(false);
-    
-    // 사용자에게 알림을 표시합니다
-    toast({
-      title: "지출이 추가되었습니다",
-      description: `${data.title} 항목이 ${formatWithCommas(numericAmount)}원으로 등록되었습니다.`,
-    });
   };
   
   return (