From 625a1f605ce76d698074d3eabe31e1f070fecd27 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 17 Mar 2025 12:20:35 +0000
Subject: [PATCH] Enhance budget input display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Display existing values in budget input fields.
- Remove recessed boxes from category inputs.
- Add icons to 식비, 생활비, and 교통비 categories.
---
 src/components/BudgetTabContent.tsx     | 19 +++++++++++++++++--
 src/components/CategoryBudgetInputs.tsx | 11 +++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/BudgetTabContent.tsx b/src/components/BudgetTabContent.tsx
index 5a4dffa..09e9151 100644
--- a/src/components/BudgetTabContent.tsx
+++ b/src/components/BudgetTabContent.tsx
@@ -67,6 +67,21 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
     setShowBudgetInput(false);
   };
 
+  // 기존 카테고리 예산 불러오기
+  useEffect(() => {
+    if (showBudgetInput) {
+      // 로컬 스토리지에서 카테고리 예산 불러오기
+      try {
+        const storedCategoryBudgets = localStorage.getItem('categoryBudgets');
+        if (storedCategoryBudgets) {
+          setCategoryBudgets(JSON.parse(storedCategoryBudgets));
+        }
+      } catch (error) {
+        console.error('카테고리 예산 불러오기 오류:', error);
+      }
+    }
+  }, [showBudgetInput]);
+
   return <div>
       {targetAmount > 0 ? <>
           <div className="flex justify-between items-center mb-3">
@@ -92,12 +107,12 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
           <div className="mt-6">
             <button 
               onClick={() => setShowBudgetInput(true)} 
-              className="text-neuro-income hover:underline flex items-center text-base font-bold group"
+              className="text-neuro-income hover:underline flex items-center text-lg font-bold group"
             >
               <div className="mr-2 bg-neuro-income text-white rounded-full p-1 transition-transform group-hover:scale-110">
                 <CirclePlus size={20} className="animate-pulse" />
               </div> 
-              <span className="text-lg">예산 수정하기</span>
+              <span>예산 수정하기</span>
             </button>
           </div>
         </> : <div className="py-4 text-center">
diff --git a/src/components/CategoryBudgetInputs.tsx b/src/components/CategoryBudgetInputs.tsx
index deb850c..6a9b99b 100644
--- a/src/components/CategoryBudgetInputs.tsx
+++ b/src/components/CategoryBudgetInputs.tsx
@@ -1,7 +1,7 @@
 
 import React from 'react';
 import { Input } from '@/components/ui/input';
-import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
+import { EXPENSE_CATEGORIES, categoryIcons } from '@/constants/categoryIcons';
 import { useIsMobile } from '@/hooks/use-mobile';
 
 interface CategoryBudgetInputsProps {
@@ -37,13 +37,16 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
   return (
     <div className="space-y-3 w-full">
       {EXPENSE_CATEGORIES.map(category => (
-        <div key={category} className="flex items-center justify-between w-full p-2 neuro-pressed rounded-lg">
-          <label className="text-sm font-medium text-gray-700">{category}</label>
+        <div key={category} className="flex items-center justify-between w-full p-2 rounded-lg">
+          <div className="flex items-center space-x-2">
+            <span className="text-neuro-income">{categoryIcons[category]}</span>
+            <label className="text-sm font-medium text-gray-700">{category}</label>
+          </div>
           <Input 
             value={formatWithCommas(categoryBudgets[category] || 0)} 
             onChange={(e) => handleInput(e, category)}
             placeholder="예산 입력"
-            className={`neuro-pressed transition-colors duration-300 ${isMobile ? 'w-[150px]' : 'max-w-[150px]'}`}
+            className={`transition-colors duration-300 ${isMobile ? 'w-[150px]' : 'max-w-[150px]'}`}
           />
         </div>
       ))}