Add payment method selection

Adds a payment method selection (Credit Card, Cash) to the expense form and includes a line separator. Also requests to add a graph showing the proportion of credit card and cash usage in expense analytics, but this part is not implemented in this commit.

src/pages/Analytics.tsx

@@ -1,3 +1,4 @@
+
 import React, { useState, useEffect } from 'react';
 import NavBar from '@/components/NavBar';
 import ExpenseChart from '@/components/ExpenseChart';
@@ -6,18 +7,21 @@ import { useBudget } from '@/contexts/BudgetContext';
 import { MONTHS_KR } from '@/hooks/useTransactions';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { getCategoryColor } from '@/utils/categoryColorUtils';
+import { Separator } from '@/components/ui/separator';
 
 // 새로 분리한 컴포넌트들 불러오기
 import PeriodSelector from '@/components/analytics/PeriodSelector';
 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 {
     budgetData,
     getCategorySpending,
+    getPaymentMethodStats,  // 새로 추가된 메서드
     transactions
   } = useBudget();
   const isMobile = useIsMobile();
@@ -86,6 +90,10 @@ const Analytics = () => {
     value: category.current,
     color: getCategoryColor(category.title) // 일관된 색상 적용
   }));
+  
+  // 결제 방법 데이터 가져오기
+  const paymentMethodData = getPaymentMethodStats();
+  const hasPaymentData = paymentMethodData.some(method => method.amount > 0);
 
   // 월별 데이터 생성 - 샘플 데이터 제거하고 현재 달만 실제 데이터 사용
   useEffect(() => {
@@ -143,6 +151,13 @@ const Analytics = () => {
             </div>}
         </div>
         
+        {/* 결제 방법 차트 추가 */}
+        <h2 className="text-lg font-semibold mb-3 mt-6">결제 방법별 지출</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]" />