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 (

src/components/onboarding/WelcomeDialog.tsx

@@ -22,6 +22,10 @@ const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
   const [dontShowAgain, setDontShowAgain] = useState(false);
 
   const handleClose = () => {
+    // 체크박스가 체크되어 있으면 localStorage에 직접 저장
+    if (dontShowAgain) {
+      localStorage.setItem('dontShowWelcome', 'true');
+    }
     onClose(dontShowAgain);
   };
 

src/pages/Analytics.tsx

@@ -9,10 +9,12 @@ import { useBudget } from '@/contexts/BudgetContext';
 import { formatCurrency } from '@/utils/formatters';
 import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
 import { MONTHS_KR } from '@/hooks/useTransactions';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 const Analytics = () => {
   const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
   const { budgetData, getCategorySpending, transactions } = useBudget();
+  const isMobile = useIsMobile();
   
   // 실제 예산 및 지출 데이터 사용
   const totalBudget = budgetData.monthly.targetAmount;
@@ -98,7 +100,7 @@ const Analytics = () => {
   
   return (
     <div className="min-h-screen bg-neuro-background pb-24">
-      <div className="max-w-md mx-auto px-6">
+      <div className={`mx-auto px-4 ${isMobile ? 'w-full' : 'max-w-lg'}`}>
         {/* Header */}
         <header className="py-8">
           <h1 className="text-2xl font-bold neuro-text mb-5">지출 분석</h1>

src/pages/Index.tsx

@@ -12,6 +12,7 @@ import { useBudget } from '@/contexts/BudgetContext';
 import { useAuth } from '@/contexts/auth';
 import { resetAllData } from '@/contexts/budget/storageUtils';
 import { resetAllStorageData } from '@/utils/storageUtils';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 // 메인 컴포넌트
 const Index = () => {
@@ -29,6 +30,7 @@ const Index = () => {
   const { user } = useAuth();
   const [showWelcome, setShowWelcome] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
+  const isMobile = useIsMobile();
 
   // 화면이 처음 로드될 때 데이터 초기화
   useEffect(() => {
@@ -108,6 +110,7 @@ const Index = () => {
     setShowWelcome(false);
     if (dontShowAgain) {
       localStorage.setItem('dontShowWelcome', 'true');
+      console.log('환영 팝업 더 이상 표시하지 않기 설정됨');
     }
   };
 
@@ -119,9 +122,25 @@ const Index = () => {
     </div>
   );
 
+  // 트랜잭션 변경 시 페이지 새로고침
+  useEffect(() => {
+    const handleTransactionAdded = () => {
+      console.log('트랜잭션이 추가되었습니다. 페이지를 새로고침합니다.');
+      // 컨텍스트에서 최신 데이터 가져오기
+    };
+
+    window.addEventListener('transactionAdded', handleTransactionAdded);
+    window.addEventListener('budgetDataUpdated', handleTransactionAdded);
+    
+    return () => {
+      window.removeEventListener('transactionAdded', handleTransactionAdded);
+      window.removeEventListener('budgetDataUpdated', handleTransactionAdded);
+    };
+  }, []);
+
   return (
     <div className="min-h-screen bg-neuro-background pb-24">
-      <div className="max-w-md mx-auto px-6">
+      <div className={`mx-auto px-4 ${isMobile ? 'w-full' : 'max-w-lg'}`}>
         <Header />
 
         {/* 목표 진행 상황 */}