From 236925f787e24f3e7d3421a832b80b1cd9042565 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:17:32 +0000
Subject: [PATCH] Enhance budget input UI

- Improve the '+' icon for budget modification.
- Display the sum of category budgets instead of an input field for the total budget.
- Change the wallet icon in budget input.
---
 src/components/BudgetCategoriesSection.tsx |  2 +-
 src/components/BudgetTabContent.tsx        | 68 ++++++++++++++++------
 src/components/CategoryBudgetInputs.tsx    |  8 +--
 3 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/src/components/BudgetCategoriesSection.tsx b/src/components/BudgetCategoriesSection.tsx
index a0063c3..614a3b6 100644
--- a/src/components/BudgetCategoriesSection.tsx
+++ b/src/components/BudgetCategoriesSection.tsx
@@ -24,7 +24,7 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
         const actualPercentage = category.total > 0 
           ? Math.round((category.current / category.total) * 100) 
           : 0;
-        // 프로그레스 바용 퍼센트 (100%로 제한하지 않음)
+        // 프로그레스 바용 퍼센트 - 제한 없이 실제 퍼센트 표시
         const displayPercentage = actualPercentage;
         
         // 예산이 얼마 남지 않은 경우 (10% 미만)
diff --git a/src/components/BudgetTabContent.tsx b/src/components/BudgetTabContent.tsx
index 35db633..5a4dffa 100644
--- a/src/components/BudgetTabContent.tsx
+++ b/src/components/BudgetTabContent.tsx
@@ -1,19 +1,23 @@
+
 import React, { useState, useEffect } from 'react';
-import { Plus, Wallet } from 'lucide-react';
+import { CirclePlus, Save, Check } from 'lucide-react';
 import BudgetInputCard from './BudgetInputCard';
 import { Button } from '@/components/ui/button';
 import CategoryBudgetInputs from './CategoryBudgetInputs';
+
 interface BudgetData {
   targetAmount: number;
   spentAmount: number;
   remainingAmount: number;
 }
+
 interface BudgetTabContentProps {
   data: BudgetData;
   formatCurrency: (amount: number) => string;
   calculatePercentage: (spent: number, target: number) => number;
   onSaveBudget: (amount: number, categoryBudgets?: Record<string, number>) => void;
 }
+
 const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   data,
   formatCurrency,
@@ -22,8 +26,10 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
 }) => {
   const [categoryBudgets, setCategoryBudgets] = useState<Record<string, number>>({});
   const [showBudgetInput, setShowBudgetInput] = useState(false);
+  
   const spentAmount = data.spentAmount;
   const targetAmount = data.targetAmount;
+  
   // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
   const actualPercentage = targetAmount > 0 ? Math.round(spentAmount / targetAmount * 100) : 0;
   const percentage = actualPercentage;
@@ -40,6 +46,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   // 남은 예산 또는 초과 예산 텍스트 및 금액
   const budgetStatusText = isOverBudget ? '예산 초과: ' : '남은 예산: ';
   const budgetAmount = isOverBudget ? formatCurrency(Math.abs(targetAmount - spentAmount)) : formatCurrency(Math.max(0, targetAmount - spentAmount));
+  
   const handleCategoryInputChange = (value: string, category: string) => {
     const numValue = parseInt(value, 10) || 0;
     setCategoryBudgets(prev => ({
@@ -47,6 +54,19 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
       [category]: numValue
     }));
   };
+
+  // 카테고리별 예산 합계 계산
+  const calculateTotalBudget = () => {
+    return Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0);
+  };
+
+  // 카테고리 예산 저장
+  const handleSaveCategoryBudgets = () => {
+    const totalBudget = calculateTotalBudget();
+    onSaveBudget(totalBudget, categoryBudgets);
+    setShowBudgetInput(false);
+  };
+
   return <div>
       {targetAmount > 0 ? <>
           <div className="flex justify-between items-center mb-3">
@@ -70,14 +90,24 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
           </div>
           
           <div className="mt-6">
-            <button onClick={() => setShowBudgetInput(true)} className="text-neuro-income hover:underline flex items-center text-base font-bold">
-              <Plus size={16} className="mr-1" /> 예산 수정하기
+            <button 
+              onClick={() => setShowBudgetInput(true)} 
+              className="text-neuro-income hover:underline flex items-center text-base 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>
             </button>
           </div>
         </> : <div className="py-4 text-center">
           <div className="text-gray-400 mb-4">아직 예산이 설정되지 않았습니다</div>
-          <Button onClick={() => setShowBudgetInput(true)} variant="default" className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg">
-            <Wallet className="mr-2" size={18} />
+          <Button 
+            onClick={() => setShowBudgetInput(true)} 
+            variant="default" 
+            className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg"
+          >
+            <CirclePlus className="mr-2" size={20} />
             지금 예산 설정하기
           </Button>
         </div>}
@@ -85,27 +115,27 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
       {showBudgetInput && <div className="mt-4">
           <div className="neuro-card p-4">
             <div className="mb-4">
-              <h3 className="text-base font-medium mb-3">전체 예산 설정</h3>
-              <div className="flex items-center space-x-2">
-                <input type="text" className="w-full p-2 rounded neuro-pressed" placeholder="예산 금액 입력" value={targetAmount > 0 ? targetAmount : ''} onChange={e => {
-              const value = e.target.value.replace(/[^0-9]/g, '');
-              if (value) {
-                const amount = parseInt(value, 10);
-                onSaveBudget(amount, categoryBudgets);
-              }
-            }} />
-                <Button onClick={() => setShowBudgetInput(false)} size="icon" className="bg-neuro-income hover:bg-neuro-income/90 text-white">
-                  <Wallet size={18} />
-                </Button>
-              </div>
+              <h3 className="text-base font-medium mb-3">전체 예산: {formatCurrency(calculateTotalBudget())}</h3>
             </div>
             
             <div>
               <h3 className="text-base font-medium mb-3">카테고리별 예산 설정</h3>
               <CategoryBudgetInputs categoryBudgets={categoryBudgets} handleCategoryInputChange={handleCategoryInputChange} />
+              
+              <div className="mt-4 flex justify-end">
+                <Button 
+                  onClick={handleSaveCategoryBudgets} 
+                  size="sm" 
+                  className="bg-neuro-income hover:bg-neuro-income/90 text-white"
+                >
+                  <Check size={18} className="mr-1" />
+                  저장하기
+                </Button>
+              </div>
             </div>
           </div>
         </div>}
     </div>;
 };
-export default BudgetTabContent;
\ No newline at end of file
+
+export default BudgetTabContent;
diff --git a/src/components/CategoryBudgetInputs.tsx b/src/components/CategoryBudgetInputs.tsx
index e77386d..deb850c 100644
--- a/src/components/CategoryBudgetInputs.tsx
+++ b/src/components/CategoryBudgetInputs.tsx
@@ -35,15 +35,15 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
   };
 
   return (
-    <div className="space-y-2 w-full">
+    <div className="space-y-3 w-full">
       {EXPENSE_CATEGORIES.map(category => (
-        <div key={category} className="flex items-center justify-between w-full">
-          <label className="text-sm text-gray-600">{category}</label>
+        <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>
           <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]'} text-xs`}
+            className={`neuro-pressed transition-colors duration-300 ${isMobile ? 'w-[150px]' : 'max-w-[150px]'}`}
           />
         </div>
       ))}