Refactor plus button style

- Modified the style of the plus button before "예산 수정하기"
- Removed the white circle and increased the size of the plus icon
- Kept the same color and animation
This commit is contained in:
gpt-engineer-app[bot]
2025-03-17 12:25:06 +00:00
parent 6884b68466
commit 07f87d8ec0

View File

@@ -3,17 +3,20 @@ import { CirclePlus, Save, Check } from 'lucide-react';
import BudgetInputCard from './BudgetInputCard'; import BudgetInputCard from './BudgetInputCard';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import CategoryBudgetInputs from './CategoryBudgetInputs'; import CategoryBudgetInputs from './CategoryBudgetInputs';
interface BudgetData { interface BudgetData {
targetAmount: number; targetAmount: number;
spentAmount: number; spentAmount: number;
remainingAmount: number; remainingAmount: number;
} }
interface BudgetTabContentProps { interface BudgetTabContentProps {
data: BudgetData; data: BudgetData;
formatCurrency: (amount: number) => string; formatCurrency: (amount: number) => string;
calculatePercentage: (spent: number, target: number) => number; calculatePercentage: (spent: number, target: number) => number;
onSaveBudget: (amount: number, categoryBudgets?: Record<string, number>) => void; onSaveBudget: (amount: number, categoryBudgets?: Record<string, number>) => void;
} }
const BudgetTabContent: React.FC<BudgetTabContentProps> = ({ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
data, data,
formatCurrency, formatCurrency,
@@ -75,6 +78,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
} }
} }
}, [showBudgetInput]); }, [showBudgetInput]);
return <div> return <div>
{targetAmount > 0 ? <> {targetAmount > 0 ? <>
<div className="flex justify-between items-center mb-3"> <div className="flex justify-between items-center mb-3">
@@ -99,16 +103,14 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
<div className="mt-6"> <div className="mt-6">
<button onClick={() => setShowBudgetInput(true)} className="text-neuro-income hover:underline flex items-center text-lg font-bold group"> <button onClick={() => setShowBudgetInput(true)} 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={26} className="mr-2 text-neuro-income animate-pulse transition-transform group-hover:scale-110" />
<CirclePlus size={20} className="animate-pulse" />
</div>
<span> </span> <span> </span>
</button> </button>
</div> </div>
</> : <div className="py-4 text-center"> </> : <div className="py-4 text-center">
<div className="text-gray-400 mb-4"> </div> <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"> <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} /> <CirclePlus className="mr-2" size={24} />
</Button> </Button>
</div>} </div>}
@@ -137,4 +139,5 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
</div>} </div>}
</div>; </div>;
}; };
export default BudgetTabContent; export default BudgetTabContent;