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:14:33 +00:00
parent edeb9f8ffb
commit c7300bebb7
1 changed files with 29 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/BudgetTabContent.tsx
View File

@@ -1,23 +1,19 @@
import React, { useState, useEffect } from 'react';
import { Plus, Wallet } 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,37 +22,24 @@ 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 actualPercentage = targetAmount > 0 ? Math.round(spentAmount / targetAmount * 100) : 0;
const percentage = actualPercentage;
const isFirstBudget = targetAmount === 0;
// 예산 초과 여부 계산
const isOverBudget = spentAmount > targetAmount;
// 예산이 얼마 남지 않은 경우 (10% 미만)
const isLowBudget = targetAmount > 0 && percentage >= 90 && percentage < 100;
// 프로그레스 바 색상 결정
const progressBarColor = isOverBudget
? 'bg-red-500'
: isLowBudget
? 'bg-yellow-400'
: 'bg-neuro-income';
const progressBarColor = isOverBudget ? 'bg-red-500' : isLowBudget ? 'bg-yellow-400' : 'bg-neuro-income';
// 남은 예산 또는 초과 예산 텍스트 및 금액
const budgetStatusText = isOverBudget
? '예산 초과: '
: '남은 예산: ';
const budgetAmount = isOverBudget
? formatCurrency(Math.abs(targetAmount - spentAmount))
: formatCurrency(Math.max(0, targetAmount - spentAmount));
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 => ({
@@ -64,21 +47,17 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
[category]: numValue
}));
};
return (
<div>
{targetAmount > 0 ? (
<>
return <div>
{targetAmount > 0 ? <>
<div className="flex justify-between items-center mb-3">
<div className="text-2xl font-bold">{formatCurrency(spentAmount)}</div>
<div className="text-sm text-gray-500">/ {formatCurrency(targetAmount)}</div>
</div>
<div className="w-full h-2 neuro-pressed overflow-hidden mb-3">
<div
className={`h-full ${progressBarColor} transition-all duration-700 ease-out`}
style={{ width: `${Math.min(percentage, 100)}%` }}
/>
<div className={`h-full ${progressBarColor} transition-all duration-700 ease-out`} style={{
width: `${Math.min(percentage, 100)}%`
}} />
</div>
<div className="flex justify-between items-center">
@@ -91,52 +70,31 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
</div>
<div className="mt-6">
<button
onClick={() => setShowBudgetInput(true)}
className="text-neuro-income text-sm font-medium hover:underline flex items-center text-[15px]"
>
<button onClick={() => setShowBudgetInput(true)} className="text-neuro-income hover:underline flex items-center text-base font-bold">
<Plus size={16} className="mr-1" /> 예산 수정하기
</button>
</div>
</>
) : (
<div className="py-4 text-center">
</> : <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">
<Wallet className="mr-2" size={18} />
지금 예산 설정하기
</Button>
</div>
)}
</div>}
{showBudgetInput && (
<div className="mt-4">
{showBudgetInput && <div className="mt-4">
<div className="neuro-card p-4">
<div className="mb-4">
<h3 className="text-base font-medium mb-3">전체 예산 설정</h3>
<div className="flex items-center space-x-2">
<input
type="text"
className="w-full p-2 rounded neuro-pressed"
placeholder="예산 금액 입력"
value={targetAmount > 0 ? targetAmount : ''}
onChange={(e) => {
const value = e.target.value.replace(/[^0-9]/g, '');
if (value) {
const amount = parseInt(value, 10);
onSaveBudget(amount, categoryBudgets);
}
}}
/>
<Button
onClick={() => setShowBudgetInput(false)}
size="icon"
className="bg-neuro-income hover:bg-neuro-income/90 text-white"
>
<input type="text" className="w-full p-2 rounded neuro-pressed" placeholder="예산 금액 입력" value={targetAmount > 0 ? targetAmount : ''} onChange={e => {
const value = e.target.value.replace(/[^0-9]/g, '');
if (value) {
const amount = parseInt(value, 10);
onSaveBudget(amount, categoryBudgets);
}
}} />
<Button onClick={() => setShowBudgetInput(false)} size="icon" className="bg-neuro-income hover:bg-neuro-income/90 text-white">
<Wallet size={18} />
</Button>
</div>
@@ -144,16 +102,10 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
<div>
<h3 className="text-base font-medium mb-3">카테고리별 예산 설정</h3>
<CategoryBudgetInputs
categoryBudgets={categoryBudgets}
handleCategoryInputChange={handleCategoryInputChange}
/>
<CategoryBudgetInputs categoryBudgets={categoryBudgets} handleCategoryInputChange={handleCategoryInputChange} />
</div>
</div>
</div>
)}
</div>
);
</div>}
</div>;
};
export default BudgetTabContent;
export default BudgetTabContent;