Implement first-time user experience

- Implement default state for new users.
- Add a simple tutorial popup for first-time users.

src/components/onboarding/WelcomeDialog.tsx

@@ -0,0 +1,88 @@
+
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { ArrowRight, Wallet, PieChart, LineChart } from "lucide-react";
+
+interface WelcomeDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-center text-2xl text-neuro-income mb-2">
+            젤리의 적자탈출에 오신 것을 환영합니다!
+          </DialogTitle>
+          <DialogDescription className="text-center">
+            매달 예산을 계획하고 지출을 관리하여 적자 없는 생활을 시작해보세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 my-2">
+          <div className="flex items-start gap-3">
+            <div className="bg-neuro-background p-2 rounded-full">
+              <Wallet className="h-5 w-5 text-neuro-income" />
+            </div>
+            <div>
+              <h3 className="font-medium">예산 설정하기</h3>
+              <p className="text-sm text-gray-500">
+                생활비, 식비 등 카테고리별 월간 예산을 설정하세요.
+              </p>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex items-start gap-3">
+            <div className="bg-neuro-background p-2 rounded-full">
+              <PieChart className="h-5 w-5 text-neuro-income" />
+            </div>
+            <div>
+              <h3 className="font-medium">지출 기록하기</h3>
+              <p className="text-sm text-gray-500">
+                일상 속 지출을 간편하게 기록하고 카테고리별로 관리하세요.
+              </p>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex items-start gap-3">
+            <div className="bg-neuro-background p-2 rounded-full">
+              <LineChart className="h-5 w-5 text-neuro-income" />
+            </div>
+            <div>
+              <h3 className="font-medium">적자 탈출하기</h3>
+              <p className="text-sm text-gray-500">
+                데이터를 분석하고 지출 패턴을 파악하여 효율적인 자산 관리를 시작하세요.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="sm:justify-center">
+          <Button 
+            className="w-full sm:w-auto bg-neuro-income text-white hover:bg-neuro-income/90"
+            onClick={onClose}
+          >
+            시작하기 <ArrowRight className="ml-2 h-4 w-4" />
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default WelcomeDialog;

src/contexts/budget/storageUtils.ts

@@ -6,7 +6,12 @@ import { DEFAULT_CATEGORY_BUDGETS, getInitialBudgetData } from './budgetUtils';
 export const loadTransactionsFromStorage = (): Transaction[] => {
   const storedTransactions = localStorage.getItem('transactions');
   if (storedTransactions) {
-    return JSON.parse(storedTransactions);
+    try {
+      return JSON.parse(storedTransactions);
+    } catch (error) {
+      console.error('트랜잭션 데이터 파싱 오류:', error);
+      return [];
+    }
   }
   return [];
 };
@@ -20,8 +25,16 @@ export const saveTransactionsToStorage = (transactions: Transaction[]): void =>
 export const loadCategoryBudgetsFromStorage = (): Record<string, number> => {
   const storedCategoryBudgets = localStorage.getItem('categoryBudgets');
   if (storedCategoryBudgets) {
-    return JSON.parse(storedCategoryBudgets);
+    try {
+      return JSON.parse(storedCategoryBudgets);
+    } catch (error) {
+      console.error('카테고리 예산 데이터 파싱 오류:', error);
+      return DEFAULT_CATEGORY_BUDGETS;
+    }
   }
+  
+  // 새 사용자를 위한 기본 카테고리 예산 저장
+  saveCategoryBudgetsToStorage(DEFAULT_CATEGORY_BUDGETS);
   return DEFAULT_CATEGORY_BUDGETS;
 };
 
@@ -34,9 +47,20 @@ export const saveCategoryBudgetsToStorage = (categoryBudgets: Record<string, num
 export const loadBudgetDataFromStorage = (): BudgetData => {
   const storedBudgetData = localStorage.getItem('budgetData');
   if (storedBudgetData) {
-    return JSON.parse(storedBudgetData);
+    try {
+      return JSON.parse(storedBudgetData);
+    } catch (error) {
+      console.error('예산 데이터 파싱 오류:', error);
+      const initialData = getInitialBudgetData();
+      saveBudgetDataToStorage(initialData);
+      return initialData;
+    }
   }
-  return getInitialBudgetData();
+  
+  // 새 사용자를 위한 기본 예산 데이터 저장
+  const initialData = getInitialBudgetData();
+  saveBudgetDataToStorage(initialData);
+  return initialData;
 };
 
 // 예산 데이터 저장

src/pages/Index.tsx

@@ -1,13 +1,15 @@
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import NavBar from '@/components/NavBar';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import Header from '@/components/Header';
 import BudgetProgressCard from '@/components/BudgetProgressCard';
 import BudgetCategoriesSection from '@/components/BudgetCategoriesSection';
 import RecentTransactionsSection from '@/components/RecentTransactionsSection';
+import WelcomeDialog from '@/components/onboarding/WelcomeDialog';
 import { formatCurrency, calculatePercentage } from '@/utils/formatters';
 import { useBudget } from '@/contexts/BudgetContext';
+import { useAuth } from '@/contexts/auth';
 
 // 메인 컴포넌트
 const Index = () => {
@@ -21,6 +23,25 @@ const Index = () => {
     getCategorySpending
   } = useBudget();
 
+  const { user } = useAuth();
+  const [showWelcome, setShowWelcome] = useState(false);
+
+  // 첫 방문 여부 확인
+  useEffect(() => {
+    const hasVisitedBefore = localStorage.getItem('hasVisitedBefore');
+    
+    if (!hasVisitedBefore) {
+      setShowWelcome(true);
+      // 방문 기록 저장
+      localStorage.setItem('hasVisitedBefore', 'true');
+    }
+  }, []);
+
+  // 환영 팝업 닫기
+  const handleCloseWelcome = () => {
+    setShowWelcome(false);
+  };
+
   return (
     <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
@@ -48,6 +69,9 @@ const Index = () => {
       </div>
       <AddTransactionButton />
       <NavBar />
+      
+      {/* 첫 사용자 안내 팝업 */}
+      <WelcomeDialog open={showWelcome} onClose={handleCloseWelcome} />
     </div>
   );
 };