Merge category charts

Consolidated category spending list into the category pie chart card.

src/pages/Analytics.tsx

@@ -1,3 +1,4 @@
+
 import React, { useState, useEffect } from 'react';
 import NavBar from '@/components/NavBar';
 import ExpenseChart from '@/components/ExpenseChart';
@@ -14,6 +15,7 @@ import SummaryCards from '@/components/analytics/SummaryCards';
 import MonthlyComparisonChart from '@/components/analytics/MonthlyComparisonChart';
 import CategorySpendingList from '@/components/analytics/CategorySpendingList';
 import PaymentMethodChart from '@/components/analytics/PaymentMethodChart';
+
 const Analytics = () => {
   const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
   const {
@@ -123,6 +125,7 @@ const Analytics = () => {
   const handleNextPeriod = () => {
     console.log('다음 기간으로 이동');
   };
+  
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -142,25 +145,40 @@ const Analytics = () => {
           <MonthlyComparisonChart monthlyData={monthlyData} isEmpty={totalBudget === 0 && totalExpense === 0} />
         </div>
         
-        {/* Category Pie Chart - 왼쪽 여백 조정 */}
+        {/* 카테고리 비율과 지출을 하나의 카드로 합침 */}
         <h2 className="text-lg font-semibold mb-3">카테고리 비율</h2>
-        <div className="w-full mb-8">
-          {expenseData.some(item => item.value > 0) ? <ExpenseChart data={expenseData} /> : <div className="neuro-card h-52 w-full flex items-center justify-center text-gray-400">
-              <p>데이터가 없습니다</p>
-            </div>}
+        <div className="neuro-card w-full mb-8">
+          <div className="w-full">
+            {expenseData.some(item => item.value > 0) ? (
+              <>
+                <div className="h-72">
+                  <ExpenseChart data={expenseData} />
+                </div>
+                {/* 원그래프 아래에 카테고리 지출 목록 추가 */}
+                <CategorySpendingList 
+                  categories={categorySpending} 
+                  totalExpense={totalExpense} 
+                  showCard={false} // 카드 감싸지 않도록 설정
+                />
+              </>
+            ) : (
+              <div className="h-52 w-full flex items-center justify-center text-gray-400">
+                <p>데이터가 없습니다</p>
+              </div>
+            )}
+          </div>
         </div>
         
         {/* 결제 방법 차트 추가 */}
         <h2 className="text-lg font-semibold mb-3">결제 방법 비율</h2>
         <PaymentMethodChart data={paymentMethodData} isEmpty={!hasPaymentData} />
         
-        {/* Top Spending Categories */}
-        <h2 className="text-lg font-semibold mb-3 mt-6">카테고리 지출</h2>
-        <CategorySpendingList categories={categorySpending} totalExpense={totalExpense} className="mb-[50px]" />
+        {/* 카테고리 지출 섹션은 제거됨 - 위 카테고리 비율 카드로 병합됨 */}
       </div>
 
       <AddTransactionButton />
       <NavBar />
     </div>;
 };
-export default Analytics;
+
+export default Analytics;