Refactor expense form and categories

-   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

@@ -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} 

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]}

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}

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 '기타';
 };

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
 };