From 508eea9cdecf6bbd75cc0c646bb9a6883ae8e856 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 22 Mar 2025 06:45:50 +0000
Subject: [PATCH] Refactor expense form and categories
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-   Rename "지출 추가" to "지출 입력" in the add expense dialog.
-   Rename "교통비" to "교통" in categories and ensure all 4 icons are displayed on a single line.
---
 src/components/AddTransactionButton.tsx              | 3 +--
 src/components/expenses/ExpenseCategorySelector.tsx  | 4 ++--
 src/components/transaction/TransactionFormFields.tsx | 4 ++--
 src/components/transaction/categoryUtils.ts          | 5 +++--
 src/constants/categoryIcons.tsx                      | 9 +++++----
 5 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/AddTransactionButton.tsx b/src/components/AddTransactionButton.tsx
index aebb027..fe2da16 100644
--- a/src/components/AddTransactionButton.tsx
+++ b/src/components/AddTransactionButton.tsx
@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from 'react';
 import { PlusIcon } from 'lucide-react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
@@ -155,7 +154,7 @@ const AddTransactionButton = () => {
       }}>
         <DialogContent className="w-[90%] max-w-sm mx-auto">
           <DialogHeader>
-            <DialogTitle>지출 추가</DialogTitle>
+            <DialogTitle>지출 입력</DialogTitle>
           </DialogHeader>
           <ExpenseForm 
             onSubmit={onSubmit} 
diff --git a/src/components/expenses/ExpenseCategorySelector.tsx b/src/components/expenses/ExpenseCategorySelector.tsx
index 56c526c..263a405 100644
--- a/src/components/expenses/ExpenseCategorySelector.tsx
+++ b/src/components/expenses/ExpenseCategorySelector.tsx
@@ -17,7 +17,7 @@ const ExpenseCategorySelector: React.FC<ExpenseCategorySelectorProps> = ({
     <FormControl>
       <ToggleGroup 
         type="single" 
-        className="justify-start flex-wrap gap-2"
+        className="justify-between flex-nowrap gap-1"
         value={value}
         onValueChange={(value) => {
           if (value) onValueChange(value);
@@ -27,7 +27,7 @@ const ExpenseCategorySelector: React.FC<ExpenseCategorySelectorProps> = ({
           <ToggleGroupItem 
             key={category} 
             value={category}
-            className="px-4 py-2 rounded-md border flex items-center gap-2"
+            className="px-3 py-2 rounded-md border flex items-center gap-1"
           >
             <div className="text-neuro-income">
               {categoryIcons[category]}
diff --git a/src/components/transaction/TransactionFormFields.tsx b/src/components/transaction/TransactionFormFields.tsx
index c075eb1..b4c647c 100644
--- a/src/components/transaction/TransactionFormFields.tsx
+++ b/src/components/transaction/TransactionFormFields.tsx
@@ -10,7 +10,7 @@ import { categoryIcons, EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
 export const transactionFormSchema = z.object({
   title: z.string().min(1, '제목을 입력해주세요'),
   amount: z.string().min(1, '금액을 입력해주세요'),
-  category: z.enum(['음식', '쇼핑', '교통비', '기타']),
+  category: z.enum(['음식', '쇼핑', '교통', '기타']),
 });
 
 export type TransactionFormValues = z.infer<typeof transactionFormSchema>;
@@ -40,7 +40,7 @@ const TransactionFormFields: React.FC<TransactionFormFieldsProps> = ({ form }) =
         render={({ field }) => (
           <FormItem>
             <FormLabel>카테고리</FormLabel>
-            <div className="grid grid-cols-2 gap-2">
+            <div className="grid grid-cols-4 gap-2">
               {EXPENSE_CATEGORIES.map((category) => (
                 <div
                   key={category}
diff --git a/src/components/transaction/categoryUtils.ts b/src/components/transaction/categoryUtils.ts
index 73a942d..b2f71e3 100644
--- a/src/components/transaction/categoryUtils.ts
+++ b/src/components/transaction/categoryUtils.ts
@@ -4,10 +4,11 @@ import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
 /**
  * 카테고리 매핑 함수 - 이전 카테고리명을 새 카테고리명으로 변환
  */
-export const mapCategoryToNew = (oldCategory: string): "음식" | "쇼핑" | "교통비" | "기타" => {
+export const mapCategoryToNew = (oldCategory: string): "음식" | "쇼핑" | "교통" | "기타" => {
   if (oldCategory === '식비') return '음식';
   if (oldCategory === '생활비') return '쇼핑';
-  if (EXPENSE_CATEGORIES.includes(oldCategory as any)) return oldCategory as "음식" | "쇼핑" | "교통비" | "기타";
+  if (oldCategory === '교통비') return '교통';
+  if (EXPENSE_CATEGORIES.includes(oldCategory as any)) return oldCategory as "음식" | "쇼핑" | "교통" | "기타";
   // 기본값은 '기타'로 설정
   return '기타';
 };
diff --git a/src/constants/categoryIcons.tsx b/src/constants/categoryIcons.tsx
index 6d073e5..6f63833 100644
--- a/src/constants/categoryIcons.tsx
+++ b/src/constants/categoryIcons.tsx
@@ -6,29 +6,30 @@ import { Coffee, Home, Car, Package, Banknote } from 'lucide-react';
 export const categoryIcons: Record<string, React.ReactNode> = {
   음식: <Coffee size={18} />,
   쇼핑: <Home size={18} />,
-  교통비: <Car size={18} />,
+  교통: <Car size={18} />,
   기타: <Package size={18} />,
   수입: <Banknote size={18} />,
 };
 
 // 지출 카테고리 목록 - 4개로 확장
-export const EXPENSE_CATEGORIES = ['음식', '쇼핑', '교통비', '기타'];
+export const EXPENSE_CATEGORIES = ['음식', '쇼핑', '교통', '기타'];
 
 // 카테고리 부가 설명 정의
 export const CATEGORY_DESCRIPTIONS: Record<string, string> = {
   음식: '(식비, 음료)',
   쇼핑: '',
-  교통비: '(차량 유지비)',
+  교통: '(차량 유지비)',
   기타: '(기타 지출)',
   식비: '(식비, 음료)',      // 이전 이름과의 호환성 유지
   생활비: '',                // 이전 이름과의 호환성 유지
+  교통비: '(차량 유지비)',   // 이전 이름과의 호환성 유지
 };
 
 // 기본 카테고리 예산 설정
 export const DEFAULT_CATEGORY_BUDGETS = {
   음식: 400000,
   쇼핑: 600000,
-  교통비: 200000,
+  교통: 200000,
   기타: 100000
 };