Limit expense categories

Limit the number of expense categories to 식비, 생활비, 교통비.

src/components/TransactionCard.tsx

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { ArrowDownIcon, ArrowUpIcon, ShoppingBag, Coffee, Home, Car, Gift } from 'lucide-react';
+import { ArrowDownIcon, ArrowUpIcon, Coffee, Home, Car } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 export type Transaction = {
@@ -13,12 +13,9 @@ export type Transaction = {
 };
 
 const categoryIcons: Record<string, React.ReactNode> = {
-  shopping: <ShoppingBag size={18} />,
+  식비: <Coffee size={18} />,
-  food: <Coffee size={18} />,
+  생활비: <Home size={18} />,
-  housing: <Home size={18} />,
+  교통비: <Car size={18} />,
-  transportation: <Car size={18} />,
-  entertainment: <Gift size={18} />,
-  // Add more categories as needed
 };
 
 interface TransactionCardProps {
@@ -39,7 +36,7 @@ const TransactionCard: React.FC<TransactionCardProps> = ({ transaction }) => {
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <div className="p-2 rounded-full bg-neuro-income/10 text-neuro-income">
-            {categoryIcons[category] || <ShoppingBag size={18} />}
+            {categoryIcons[category] || <Coffee size={18} />}
           </div>
           
           <div>

src/pages/Analytics.tsx

@@ -1,33 +1,27 @@
+
 import React, { useState } from 'react';
 import NavBar from '@/components/NavBar';
 import ExpenseChart from '@/components/ExpenseChart';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+
 const Analytics = () => {
   const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
 
-  // Sample data for the expense categories
+  // Updated expense categories to use only the three specified categories
   const expenseData = [{
     name: '식비',
     value: 350000,
     color: '#9b87f5'
   }, {
-    name: '주거',
+    name: '생활비',
     value: 650000,
     color: '#6e59a5'
   }, {
-    name: '교통',
+    name: '교통비',
-    value: 125000,
-    color: '#81c784'
-  }, {
-    name: '취미',
-    value: 200000,
-    color: '#64b5f6'
-  }, {
-    name: '기타',
     value: 175000,
-    color: '#e57373'
+    color: '#81c784'
   }];
 
   // Sample data for the monthly comparison
@@ -56,10 +50,12 @@ const Analytics = () => {
     income: 2550000,
     expense: 1740000
   }];
+
   const totalIncome = 2550000;
   const totalExpense = 1740000;
   const savings = totalIncome - totalExpense;
   const savingsPercentage = Math.round(savings / totalIncome * 100);
+
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -157,7 +153,7 @@ const Analytics = () => {
         <h2 className="text-lg font-semibold mb-3">주요 지출 카테고리</h2>
         <div className="neuro-card mb-6">
           <div className="space-y-4">
-            {expenseData.slice(0, 3).map((category, index) => <div key={category.name} className="flex items-center justify-between">
+            {expenseData.map((category, index) => <div key={category.name} className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
                   <div className="w-6 h-6 rounded-full" style={{
                 backgroundColor: category.color
@@ -185,4 +181,5 @@ const Analytics = () => {
       <NavBar />
     </div>;
 };
+
 export default Analytics;

src/pages/Index.tsx

@@ -19,14 +19,14 @@ const Index = () => {
     title: '식료품 구매',
     amount: 25000,
     date: '오늘, 12:30 PM',
-    category: 'shopping',
+    category: '식비',
     type: 'expense'
   }, {
     id: '2',
     title: '주유소',
     amount: 50000,
     date: '어제, 3:45 PM',
-    category: 'transportation',
+    category: '교통비',
     type: 'expense'
   }, {
     id: '3',
@@ -56,6 +56,7 @@ const Index = () => {
     }
   });
 
+  // Updated to only use the three specified categories
   const categories = [
     { title: '식비', current: 240000, total: 400000 },
     { title: '생활비', current: 350000, total: 600000 },

src/pages/Transactions.tsx

@@ -1,3 +1,4 @@
+
 import React, { useState } from 'react';
 import NavBar from '@/components/NavBar';
 import TransactionCard, { Transaction } from '@/components/TransactionCard';
@@ -7,41 +8,41 @@ import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';
 const Transactions = () => {
   const [selectedMonth, setSelectedMonth] = useState('8월');
 
-  // Sample data - in a real app, this would come from a data source
+  // Sample data - updated to use only the three specified categories
   const transactions: Transaction[] = [{
     id: '1',
     title: '식료품 구매',
     amount: 25000,
     date: '8월 25일, 12:30 PM',
-    category: 'shopping',
+    category: '식비',
     type: 'expense'
   }, {
     id: '2',
     title: '주유소',
     amount: 50000,
     date: '8월 24일, 3:45 PM',
-    category: 'transportation',
+    category: '교통비',
     type: 'expense'
   }, {
     id: '4',
-    title: '아마존 프라임',
+    title: '생필품 구매',
-    amount: 9900,
+    amount: 35000,
     date: '8월 18일, 6:00 AM',
-    category: 'entertainment',
+    category: '생활비',
     type: 'expense'
   }, {
     id: '5',
-    title: '집세',
+    title: '월세',
     amount: 650000,
     date: '8월 15일, 10:00 AM',
-    category: 'housing',
+    category: '생활비',
     type: 'expense'
   }, {
     id: '6',
-    title: '카페',
+    title: '식당',
-    amount: 5500,
+    amount: 15500,
     date: '8월 12일, 2:15 PM',
-    category: 'food',
+    category: '식비',
     type: 'expense'
   }];