Clear persistent budget data

Clear persistent budget data to ensure a clean state.

src/pages/Analytics.tsx

@@ -20,7 +20,7 @@ const Analytics = () => {
   const savings = Math.max(0, totalBudget - totalExpense);
   const savingsPercentage = totalBudget > 0 ? Math.round(savings / totalBudget * 100) : 0;
   
-  // 카테고리별 지출 차트 데이터 생성 (실제 데이터 사용)
+  // 카테고리별 지출 차트 데이터 생성 (데이터 초기화 고려)
   const categorySpending = getCategorySpending();
   const expenseData = categorySpending.map(category => ({
     name: category.title,
@@ -30,30 +30,33 @@ const Analytics = () => {
            category.title === '교통비' ? '#2E7D32' : '#4CAF50'
   }));
 
-  // 최근 6개월 데이터를 위한 상태
+  // 최근 6개월 데이터를 위한 상태 (빈 데이터로 초기화)
   const [monthlyData, setMonthlyData] = useState<any[]>([]);
   
-  // 월별 데이터 생성 (실제 데이터 + 예상 데이터)
+  // 월별 데이터 생성 (초기화 로직 개선)
   useEffect(() => {
     // 현재 월 가져오기
     const today = new Date();
     const currentMonth = today.getMonth();
     
+    if (totalBudget === 0 && totalExpense === 0) {
+      // 모든 데이터가 초기화된 상태라면 빈 배열 사용
+      setMonthlyData([]);
+      return;
+    }
+    
     // 최근 6개월 데이터 배열 생성
     const last6Months = [];
     for (let i = 5; i >= 0; i--) {
       const monthIndex = (currentMonth - i + 12) % 12; // 순환적으로 이전 월 계산
       const month = MONTHS_KR[monthIndex]; // 월 이름 가져오기
       
-      // 현재 달은 실제 데이터 사용, 이전 달은 예상 데이터 사용
-      const isCurrentMonth = i === 0;
-      const expense = isCurrentMonth 
-        ? totalExpense 
-        : totalBudget * (0.5 + Math.random() * 0.3); // 예상 데이터 (총 예산의 50~80%)
+      // 현재 달은 실제 데이터 사용, 다른 달은 0으로 설정
+      const expense = i === 0 ? totalExpense : 0;
       
       last6Months.push({
         name: month.split(' ')[0], // '8월' 형식으로 변환
-        budget: totalBudget,
+        budget: i === 0 ? totalBudget : 0,
         expense: expense
       });
     }
@@ -85,6 +88,14 @@ const Analytics = () => {
     console.log('다음 기간으로 이동');
   };
   
+  // 그래프 데이터 없을 때 표시할 빈 상태 메시지
+  const EmptyGraphState = () => (
+    <div className="flex flex-col items-center justify-center h-48 text-gray-400">
+      <p>데이터가 없습니다</p>
+      <p className="text-sm mt-2">지출 내역을 추가하면 그래프가 표시됩니다</p>
+    </div>
+  );
+  
   return (
     <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
@@ -149,54 +160,70 @@ const Analytics = () => {
         <div className="mb-8">
           <h2 className="text-lg font-semibold mb-3">월별 그래프</h2>
           <div className="neuro-card h-72">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={monthlyData} margin={{
-                top: 20,
-                right: 10,
-                left: -10,
-                bottom: 5
-              }} style={{
-                fontSize: '11px'
-              }}>
-                <XAxis dataKey="name" />
-                <YAxis tickFormatter={formatYAxisTick} />
-                <Tooltip formatter={formatTooltip} />
-                <Legend />
-                <Bar dataKey="budget" name="예산" fill="#C8C8C9" radius={[4, 4, 0, 0]} />
-                <Bar dataKey="expense" name="지출" fill="#81c784" radius={[4, 4, 0, 0]} />
-              </BarChart>
-            </ResponsiveContainer>
+            {monthlyData.length > 0 ? (
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={monthlyData} margin={{
+                  top: 20,
+                  right: 10,
+                  left: -10,
+                  bottom: 5
+                }} style={{
+                  fontSize: '11px'
+                }}>
+                  <XAxis dataKey="name" />
+                  <YAxis tickFormatter={formatYAxisTick} />
+                  <Tooltip formatter={formatTooltip} />
+                  <Legend />
+                  <Bar dataKey="budget" name="예산" fill="#C8C8C9" radius={[4, 4, 0, 0]} />
+                  <Bar dataKey="expense" name="지출" fill="#81c784" radius={[4, 4, 0, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            ) : (
+              <EmptyGraphState />
+            )}
           </div>
         </div>
         
         {/* Category Pie Chart - MOVED DOWN */}
         <h2 className="text-lg font-semibold mb-3">카테고리별 지출</h2>
-        <ExpenseChart data={expenseData} />
+        {expenseData.some(item => item.value > 0) ? (
+          <ExpenseChart data={expenseData} />
+        ) : (
+          <div className="neuro-card h-52 flex items-center justify-center text-gray-400">
+            <p>데이터가 없습니다</p>
+          </div>
+        )}
         
         {/* Top Spending Categories */}
         <h2 className="text-lg font-semibold mb-3 mt-6">주요 지출 카테고리</h2>
         <div className="neuro-card mb-6">
-          <div className="space-y-4">
-            {categorySpending.map((category) => (
-              <div key={category.title} className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <div className="w-6 h-6 rounded-full" style={{
-                    backgroundColor: category.title === '식비' ? '#81c784' : 
-                                    category.title === '생활비' ? '#AED581' : '#2E7D32'
-                  }}></div>
-                  <span>{category.title}</span>
+          {categorySpending.some(cat => cat.current > 0) ? (
+            <div className="space-y-4">
+              {categorySpending.map((category) => (
+                <div key={category.title} className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="w-6 h-6 rounded-full" style={{
+                      backgroundColor: category.title === '식비' ? '#81c784' : 
+                                      category.title === '생활비' ? '#AED581' : '#2E7D32'
+                    }}></div>
+                    <span>{category.title}</span>
+                  </div>
+                  <div className="text-right">
+                    <p className="font-medium">
+                      {formatCurrency(category.current)}
+                    </p>
+                    <p className="text-xs text-gray-500">
+                      {totalExpense > 0 ? Math.round(category.current / totalExpense * 100) : 0}%
+                    </p>
+                  </div>
                 </div>
-                <div className="text-right">
-                  <p className="font-medium">
-                    {formatCurrency(category.current)}
-                  </p>
-                  <p className="text-xs text-gray-500">
-                    {totalExpense > 0 ? Math.round(category.current / totalExpense * 100) : 0}%
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
+              ))}
+            </div>
+          ) : (
+            <div className="py-8 text-center text-gray-400">
+              <p>아직 지출 내역이 없습니다</p>
+            </div>
+          )}
         </div>
       </div>