diff --git a/src/components/analytics/CategorySpendingList.tsx b/src/components/analytics/CategorySpendingList.tsx index d20ad61..fabfffe 100644 --- a/src/components/analytics/CategorySpendingList.tsx +++ b/src/components/analytics/CategorySpendingList.tsx @@ -15,18 +15,21 @@ interface CategorySpendingListProps { categories: CategorySpending[]; totalExpense: number; className?: string; + showCard?: boolean; // 카드 표시 여부를 제어하는 프롭 추가 } const CategorySpendingList: React.FC = ({ categories, totalExpense, - className = "" + className = "", + showCard = true // 기본값은 true로 설정 }) => { const isMobile = useIsMobile(); - return ( -
- {categories.some(cat => cat.current > 0) ? ( + // 카테고리 목록을 렌더링하는 함수 + const renderCategoryList = () => { + if (categories.some(cat => cat.current > 0)) { + return (
{categories.map((category) => { // 카테고리 이름을 직접 표시 @@ -59,13 +62,27 @@ const CategorySpendingList: React.FC = ({ ); })}
- ) : ( + ); + } else { + return (

아직 지출 내역이 없습니다

- )} -
- ); + ); + } + }; + + // showCard가 true이면 카드로 감싸서 반환, 아니면 목록만 반환 + if (showCard) { + return ( +
+ {renderCategoryList()} +
+ ); + } + + // 카드 없이 목록만 반환 + return renderCategoryList(); }; export default CategorySpendingList; diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx index 3b76858..42ac2ef 100644 --- a/src/pages/Analytics.tsx +++ b/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
{/* Header */} @@ -142,25 +145,40 @@ const Analytics = () => {
- {/* Category Pie Chart - 왼쪽 여백 조정 */} + {/* 카테고리 비율과 지출을 하나의 카드로 합침 */}

카테고리 비율

-
- {expenseData.some(item => item.value > 0) ? :
-

데이터가 없습니다

-
} +
+
+ {expenseData.some(item => item.value > 0) ? ( + <> +
+ +
+ {/* 원그래프 아래에 카테고리 지출 목록 추가 */} + + + ) : ( +
+

데이터가 없습니다

+
+ )} +
{/* 결제 방법 차트 추가 */}

결제 방법 비율

- {/* Top Spending Categories */} -

카테고리 지출

- + {/* 카테고리 지출 섹션은 제거됨 - 위 카테고리 비율 카드로 병합됨 */}
; }; -export default Analytics; \ No newline at end of file + +export default Analytics;