ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visual edit in Lovable

Browse Source 
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot]
2025-03-08 08:31:29 +00:00
parent 2bd19aad8e
commit 67256806fa
1 changed files with 14 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/BudgetInputCard.tsx
View File

@@ -1,10 +1,8 @@
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;
@@ -13,13 +11,15 @@ interface BudgetGoalProps {
};
onSave: (type: 'daily' | 'weekly' | 'monthly', amount: number) => void;
}
const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave }) => {
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(),
monthly: initialBudgets.monthly.toString()
});
// Format for display without commas
@@ -31,33 +31,27 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave })
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),
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">
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">
일일 목표
@@ -72,13 +66,8 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave })
<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">
<Input value={budgetInputs.daily} onChange={e => handleInputChange(e.target.value, 'daily')} placeholder="목표 금액 입력" className="neuro-pressed" />
<Button onClick={handleSave} size="icon" className="neuro-flat text-slate-50 bg-slate-500 hover:bg-slate-400">
<Check size={18} />
</Button>
</div>
@@ -87,12 +76,7 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave })
<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"
/>
<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>
@@ -102,12 +86,7 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave })
<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"
/>
<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>
@@ -115,8 +94,6 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({ initialBudgets, onSave })
<p className="text-xs text-gray-500">현재 월간 목표: {formatWithCommas(budgetInputs.monthly)}원</p>
</TabsContent>
</Tabs>
</div>
);
</div>;
};
export default BudgetInputCard;