Merge category charts

Consolidated category spending list into the category pie chart card.

src/components/analytics/CategorySpendingList.tsx

@@ -15,18 +15,21 @@ interface CategorySpendingListProps {
   categories: CategorySpending[];
   totalExpense: number;
   className?: string;
+  showCard?: boolean; // 카드 표시 여부를 제어하는 프롭 추가
 }
 
 const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
   categories,
   totalExpense,
-  className = ""
+  className = "",
+  showCard = true // 기본값은 true로 설정
 }) => {
   const isMobile = useIsMobile();
   
-  return (
-    <div className={`neuro-card mb-6 w-full ${className}`}>
-      {categories.some(cat => cat.current > 0) ? (
+  // 카테고리 목록을 렌더링하는 함수
+  const renderCategoryList = () => {
+    if (categories.some(cat => cat.current > 0)) {
+      return (
         <div className="space-y-4 px-1 py-4">
           {categories.map((category) => {
             // 카테고리 이름을 직접 표시
@@ -59,13 +62,27 @@ const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
             );
           })}
         </div>
-      ) : (
+      );
+    } else {
+      return (
         <div className="py-8 text-center text-gray-400">
           <p>아직 지출 내역이 없습니다</p>
         </div>
-      )}
-    </div>
-  );
+      );
+    }
+  };
+
+  // showCard가 true이면 카드로 감싸서 반환, 아니면 목록만 반환
+  if (showCard) {
+    return (
+      <div className={`neuro-card mb-6 w-full ${className}`}>
+        {renderCategoryList()}
+      </div>
+    );
+  }
+  
+  // 카드 없이 목록만 반환
+  return renderCategoryList();
 };
 
 export default CategorySpendingList;

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;