diff --git a/src/components/onboarding/WelcomeDialog.tsx b/src/components/onboarding/WelcomeDialog.tsx new file mode 100644 index 0000000..f8b84da --- /dev/null +++ b/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 = ({ open, onClose }) => { + return ( + + + + + 젤리의 적자탈출에 오신 것을 환영합니다! + + + 매달 예산을 계획하고 지출을 관리하여 적자 없는 생활을 시작해보세요. + + + +
+
+
+ +
+
+

예산 설정하기

+

+ 생활비, 식비 등 카테고리별 월간 예산을 설정하세요. +

+
+
+ + + +
+
+ +
+
+

지출 기록하기

+

+ 일상 속 지출을 간편하게 기록하고 카테고리별로 관리하세요. +

+
+
+ + + +
+
+ +
+
+

적자 탈출하기

+

+ 데이터를 분석하고 지출 패턴을 파악하여 효율적인 자산 관리를 시작하세요. +

+
+
+
+ + + + +
+
+ ); +}; + +export default WelcomeDialog; diff --git a/src/contexts/budget/storageUtils.ts b/src/contexts/budget/storageUtils.ts index e1019fa..4727403 100644 --- a/src/contexts/budget/storageUtils.ts +++ b/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 => { 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 { 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; }; // 예산 데이터 저장 diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index f96ca5f..665590b 100644 --- a/src/pages/Index.tsx +++ b/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 (
@@ -48,6 +69,9 @@ const Index = () => {
+ + {/* 첫 사용자 안내 팝업 */} +
); };