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.
2025-03-22 07:08:02 +00:00
parent 60ef765380
commit aa8381a823
12 changed files with 489 additions and 23 deletions
--- a/src/components/analytics/PaymentMethodChart.tsx
+++ b/src/components/analytics/PaymentMethodChart.tsx
@@ -0,0 +1,67 @@
+
+import React from 'react';
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from 'recharts';
+
+interface PaymentMethodData {
+  method: string;
+  amount: number;
+  percentage: number;
+}
+
+interface PaymentMethodChartProps {
+  data: PaymentMethodData[];
+  isEmpty: boolean;
+}
+
+const COLORS = ['#9b87f5', '#6E59A5']; // 신용카드, 현금 색상
+
+const PaymentMethodChart: React.FC<PaymentMethodChartProps> = ({ data, isEmpty }) => {
+  if (isEmpty) {
+    return (
+      <div className="neuro-card h-52 w-full flex items-center justify-center text-gray-400">
+        <p>데이터가 없습니다</p>
+      </div>
+    );
+  }
+
+  const chartData = data.map(item => ({
+    name: item.method,
+    value: item.amount
+  }));
+
+  return (
+    <div className="neuro-card h-64 desktop-card">
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart margin={{ left: 30, right: 30, top: 20, bottom: 5 }}>
+          <Pie
+            data={chartData}
+            cx="50%"
+            cy="50%"
+            innerRadius={40}
+            outerRadius={60}
+            paddingAngle={5}
+            dataKey="value"
+            labelLine={true}
+            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+            fontSize={12}
+          >
+            {chartData.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+          <Legend 
+            verticalAlign="bottom" 
+            align="center"
+            layout="horizontal"
+            formatter={(value) => {
+              const item = data.find(d => d.method === value);
+              return item ? `${value} (${item.percentage.toFixed(0)}%)` : value;
+            }}
+          />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default PaymentMethodChart;