From 50520ed2545ac85801cd5d9dfc923e417b8b6f2f Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 16 Mar 2025 05:41:05 +0000
Subject: [PATCH] Investigate default value for number inputs

The prompt asks to investigate the current default value (0) for number input fields and consider alternative approaches based on other applications.
---
 src/components/BudgetInputCard.tsx      | 42 ++++++++++++++++++-------
 src/components/BudgetTabContent.tsx     |  6 ++--
 src/components/CategoryBudgetInputs.tsx |  4 ++-
 src/components/expenses/ExpenseForm.tsx |  2 +-
 4 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/components/BudgetInputCard.tsx b/src/components/BudgetInputCard.tsx
index da4d84b..21fb52d 100644
--- a/src/components/BudgetInputCard.tsx
+++ b/src/components/BudgetInputCard.tsx
@@ -21,9 +21,9 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
 }) => {
   const [selectedTab, setSelectedTab] = useState<'daily' | 'weekly' | 'monthly'>('daily');
   const [budgetInputs, setBudgetInputs] = useState({
-    daily: initialBudgets.daily.toString(),
-    weekly: initialBudgets.weekly.toString(),
-    monthly: initialBudgets.monthly.toString()
+    daily: initialBudgets.daily > 0 ? initialBudgets.daily.toString() : '',
+    weekly: initialBudgets.weekly > 0 ? initialBudgets.weekly.toString() : '',
+    monthly: initialBudgets.monthly > 0 ? initialBudgets.monthly.toString() : ''
   });
   const [isOpen, setIsOpen] = useState(false);
 
@@ -36,9 +36,9 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
 
   useEffect(() => {
     setBudgetInputs({
-      daily: initialBudgets.daily.toString(),
-      weekly: initialBudgets.weekly.toString(),
-      monthly: initialBudgets.monthly.toString()
+      daily: initialBudgets.daily > 0 ? initialBudgets.daily.toString() : '',
+      weekly: initialBudgets.weekly > 0 ? initialBudgets.weekly.toString() : '',
+      monthly: initialBudgets.monthly > 0 ? initialBudgets.monthly.toString() : ''
     });
   }, [initialBudgets]);
 
@@ -58,6 +58,18 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
     setIsOpen(false);
   };
 
+  // 비어있으면 빈 문자열을, 그렇지 않으면 포맷팅된 문자열을 반환
+  const getDisplayValue = (type: 'daily' | 'weekly' | 'monthly') => {
+    return budgetInputs[type] === '' ? '' : formatWithCommas(budgetInputs[type]);
+  };
+
+  // 금액을 표시할 때 0원이면 '설정되지 않음'으로 표시
+  const getGoalDisplayText = (type: 'daily' | 'weekly' | 'monthly') => {
+    const amount = parseInt(budgetInputs[type].replace(/,/g, ''), 10) || 0;
+    if (amount === 0) return '설정되지 않음';
+    return formatWithCommas(budgetInputs[type]) + '원';
+  };
+
   return (
     <Collapsible 
       open={isOpen} 
@@ -84,7 +96,7 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
           <TabsContent value="daily" className="space-y-4 mt-0">
             <div className="flex items-center space-x-2">
               <Input 
-                value={formatWithCommas(budgetInputs.daily)} 
+                value={getDisplayValue('daily')}
                 onChange={e => handleInputChange(e.target.value, 'daily')} 
                 placeholder="목표 금액 입력" 
                 className="neuro-pressed" 
@@ -93,13 +105,15 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
                 <Check size={18} />
               </Button>
             </div>
-            <p className="text-xs text-gray-500">현재 일일 목표: {formatWithCommas(budgetInputs.daily)}원</p>
+            <p className="text-xs text-gray-500">
+              현재 일일 목표: {getGoalDisplayText('daily')}
+            </p>
           </TabsContent>
 
           <TabsContent value="weekly" className="space-y-4 mt-0">
             <div className="flex items-center space-x-2">
               <Input 
-                value={formatWithCommas(budgetInputs.weekly)} 
+                value={getDisplayValue('weekly')}
                 onChange={e => handleInputChange(e.target.value, 'weekly')} 
                 placeholder="목표 금액 입력" 
                 className="neuro-pressed" 
@@ -108,13 +122,15 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
                 <Check size={18} />
               </Button>
             </div>
-            <p className="text-xs text-gray-500">현재 주간 목표: {formatWithCommas(budgetInputs.weekly)}원</p>
+            <p className="text-xs text-gray-500">
+              현재 주간 목표: {getGoalDisplayText('weekly')}
+            </p>
           </TabsContent>
 
           <TabsContent value="monthly" className="space-y-4 mt-0">
             <div className="flex items-center space-x-2">
               <Input 
-                value={formatWithCommas(budgetInputs.monthly)} 
+                value={getDisplayValue('monthly')}
                 onChange={e => handleInputChange(e.target.value, 'monthly')} 
                 placeholder="목표 금액 입력" 
                 className="neuro-pressed" 
@@ -123,7 +139,9 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
                 <Check size={18} />
               </Button>
             </div>
-            <p className="text-xs text-gray-500">현재 월간 목표: {formatWithCommas(budgetInputs.monthly)}원</p>
+            <p className="text-xs text-gray-500">
+              현재 월간 목표: {getGoalDisplayText('monthly')}
+            </p>
           </TabsContent>
         </Tabs>
       </CollapsibleContent>
diff --git a/src/components/BudgetTabContent.tsx b/src/components/BudgetTabContent.tsx
index fbc334c..04aff15 100644
--- a/src/components/BudgetTabContent.tsx
+++ b/src/components/BudgetTabContent.tsx
@@ -29,14 +29,16 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
 }) => {
   const percentage = calculatePercentage(data.spentAmount, data.targetAmount);
   const [isOpen, setIsOpen] = useState(false);
-  const [budgetInput, setBudgetInput] = useState(data.targetAmount.toString());
+  const [budgetInput, setBudgetInput] = useState(data.targetAmount > 0 ? data.targetAmount.toString() : '');
   
   // 저장된 카테고리 예산을 불러옵니다
   const savedCategoryBudgets = localStorage.getItem('categoryBudgets');
+  const defaultCategoryAmount = data.targetAmount > 0 ? Math.round(data.targetAmount / EXPENSE_CATEGORIES.length) : 0;
+  
   const initialCategoryBudgets = savedCategoryBudgets 
     ? JSON.parse(savedCategoryBudgets) 
     : EXPENSE_CATEGORIES.reduce((acc, category) => {
-        acc[category] = Math.round(data.targetAmount / EXPENSE_CATEGORIES.length);
+        acc[category] = defaultCategoryAmount;
         return acc;
       }, {} as Record<string, number>);
   
diff --git a/src/components/CategoryBudgetInputs.tsx b/src/components/CategoryBudgetInputs.tsx
index 5a0f3ff..70e9d48 100644
--- a/src/components/CategoryBudgetInputs.tsx
+++ b/src/components/CategoryBudgetInputs.tsx
@@ -14,6 +14,7 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
 }) => {
   // Format number with commas for display
   const formatWithCommas = (value: number): string => {
+    if (value === 0) return '';
     return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   };
 
@@ -31,7 +32,8 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
           <label className="text-sm text-gray-600">{category}</label>
           <Input 
             value={formatWithCommas(categoryBudgets[category] || 0)} 
-            onChange={(e) => handleInput(e, category)} 
+            onChange={(e) => handleInput(e, category)}
+            placeholder="예산 입력"
             className="neuro-pressed max-w-[150px]" 
           />
         </div>
diff --git a/src/components/expenses/ExpenseForm.tsx b/src/components/expenses/ExpenseForm.tsx
index e7cecea..f4a5ab7 100644
--- a/src/components/expenses/ExpenseForm.tsx
+++ b/src/components/expenses/ExpenseForm.tsx
@@ -59,7 +59,7 @@ const ExpenseForm: React.FC<ExpenseFormProps> = ({ onSubmit, onCancel }) => {
             <FormItem>
               <FormLabel>금액</FormLabel>
               <Input 
-                placeholder="0" 
+                placeholder="금액을 입력하세요" 
                 value={field.value}
                 onChange={handleAmountChange}
               />