Update budget card

Update the budget card to allow users to input daily, weekly, and monthly goals. Change the title of the second card to "목표 입력".
2025-03-08 08:29:18 +00:00
parent 0971572898
commit 2bd19aad8e
2 changed files with 186 additions and 25 deletions
--- a/src/components/BudgetInputCard.tsx
+++ b/src/components/BudgetInputCard.tsx
@@ -0,0 +1,122 @@
+
+import React, { useState, useEffect } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Check } from 'lucide-react';
+
+interface BudgetGoalProps {
+  initialBudgets: {
+    daily: number;
+    weekly: number;
+    monthly: number;
+  };
+  onSave: (type: 'daily' | 'weekly' | 'monthly', amount: number) => void;
+}
+
+const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave }) => {
+  const [selectedTab, setSelectedTab] = useState<'daily' | 'weekly' | 'monthly'>('daily');
+  const [budgetInputs, setBudgetInputs] = useState({
+    daily: initialBudgets.daily.toString(),
+    weekly: initialBudgets.weekly.toString(),
+    monthly: initialBudgets.monthly.toString(),
+  });
+
+  // Format for display without commas
+  const formatForInput = (amount: number) => {
+    return amount.toString();
+  };
+
+  // Format with commas for display
+  const formatWithCommas = (amount: string) => {
+    return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  };
+
+  useEffect(() => {
+    setBudgetInputs({
+      daily: formatForInput(initialBudgets.daily),
+      weekly: formatForInput(initialBudgets.weekly),
+      monthly: formatForInput(initialBudgets.monthly),
+    });
+  }, [initialBudgets]);
+
+  const handleInputChange = (value: string, type: 'daily' | 'weekly' | 'monthly') => {
+    // Remove all non-numeric characters
+    const numericValue = value.replace(/[^0-9]/g, '');
+    
+    setBudgetInputs(prev => ({
+      ...prev,
+      [type]: numericValue
+    }));
+  };
+
+  const handleSave = () => {
+    const amount = parseInt(budgetInputs[selectedTab], 10) || 0;
+    onSave(selectedTab, amount);
+  };
+
+  return (
+    <div className="neuro-card">
+      <Tabs defaultValue="daily" value={selectedTab} onValueChange={(value) => setSelectedTab(value as 'daily' | 'weekly' | 'monthly')} className="w-full">
+        <TabsList className="grid grid-cols-3 mb-4 bg-transparent">
+          <TabsTrigger value="daily" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
+            일일 목표
+          </TabsTrigger>
+          <TabsTrigger value="weekly" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
+            주간 목표
+          </TabsTrigger>
+          <TabsTrigger value="monthly" className="data-[state=active]:shadow-neuro-pressed data-[state=active]:bg-transparent">
+            월간 목표
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="daily" className="space-y-4 mt-0">
+          <div className="flex items-center space-x-2">
+            <Input 
+              value={budgetInputs.daily}
+              onChange={(e) => handleInputChange(e.target.value, 'daily')}
+              placeholder="목표 금액 입력"
+              className="neuro-pressed"
+            />
+            <Button onClick={handleSave} size="icon" className="neuro-flat">
+              <Check size={18} />
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500">현재 일일 목표: {formatWithCommas(budgetInputs.daily)}원</p>
+        </TabsContent>
+
+        <TabsContent value="weekly" className="space-y-4 mt-0">
+          <div className="flex items-center space-x-2">
+            <Input 
+              value={budgetInputs.weekly}
+              onChange={(e) => handleInputChange(e.target.value, 'weekly')}
+              placeholder="목표 금액 입력"
+              className="neuro-pressed"
+            />
+            <Button onClick={handleSave} size="icon" className="neuro-flat">
+              <Check size={18} />
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500">현재 주간 목표: {formatWithCommas(budgetInputs.weekly)}원</p>
+        </TabsContent>
+
+        <TabsContent value="monthly" className="space-y-4 mt-0">
+          <div className="flex items-center space-x-2">
+            <Input 
+              value={budgetInputs.monthly}
+              onChange={(e) => handleInputChange(e.target.value, 'monthly')}
+              placeholder="목표 금액 입력"
+              className="neuro-pressed"
+            />
+            <Button onClick={handleSave} size="icon" className="neuro-flat">
+              <Check size={18} />
+            </Button>
+          </div>
+          <p className="text-xs text-gray-500">현재 월간 목표: {formatWithCommas(budgetInputs.monthly)}원</p>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};
+
+export default BudgetInputCard;