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-17 12:23:27 +00:00
parent 90a20df7b7
commit 6884b68466
1 changed files with 7 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/BudgetTabContent.tsx
View File

@@ -1,23 +1,19 @@
import React, { useState, useEffect } from '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,
@@ -26,10 +22,9 @@ 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;
@@ -46,7 +41,6 @@ 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 => ({
@@ -81,7 +75,6 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
}
}
}, [showBudgetInput]);
return <div>
{targetAmount > 0 ? <>
<div className="flex justify-between items-center mb-3">
@@ -105,10 +98,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
</div>
<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={20} className="animate-pulse" />
</div>
@@ -117,11 +107,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
</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"
>
<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>
@@ -135,16 +121,12 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
<div className="mt-4 border-t pt-3">
<div className="flex justify-between items-center mb-4">
<h3 className="text-base font-medium">전체 예산:</h3>
<p className="text-lg font-bold text-neuro-income">{formatCurrency(calculateTotalBudget())}</p>
<h3 className="font-medium text-sm px-[34px]">전체 예산:</h3>
<p className="font-bold text-neuro-income text-base">{formatCurrency(calculateTotalBudget())}</p>
</div>
<div className="flex justify-end">
<Button
onClick={handleSaveCategoryBudgets}
size="sm"
className="bg-neuro-income hover:bg-neuro-income/90 text-white"
>
<Button onClick={handleSaveCategoryBudgets} size="sm" className="bg-neuro-income hover:bg-neuro-income/90 text-white">
<Check size={18} className="mr-1" />
저장하기
</Button>
@@ -155,5 +137,4 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
</div>}
</div>;
};
export default BudgetTabContent;
export default BudgetTabContent;