Refactor category budget setting
The category budget setting is now based on the monthly budget amount, which is then divided into daily and weekly budgets.
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { CirclePlus, Save, Check } from 'lucide-react';
|
||||
import BudgetInputCard from './BudgetInputCard';
|
||||
@@ -94,17 +93,23 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||
|
||||
// 예산 여부에 따른 텍스트 결정
|
||||
const budgetButtonText = targetAmount > 0 ? "예산 수정하기" : "예산 입력하기";
|
||||
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">
|
||||
@@ -125,15 +130,19 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||
<span className="text-base font-semibold">{budgetButtonText}</span>
|
||||
</button>
|
||||
</div>
|
||||
</> : <div className="py-4 text-center">
|
||||
</>
|
||||
) : (
|
||||
<div className="py-4 text-center">
|
||||
<div className="text-gray-400 mb-4">아직 예산이 설정되지 않았습니다</div>
|
||||
<Button onClick={toggleBudgetInput} variant="default" className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg">
|
||||
<CirclePlus className="mr-2" size={24} />
|
||||
<span className="animate-pulse">{budgetButtonText}</span>
|
||||
</Button>
|
||||
</div>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showBudgetInput && <div className="mt-4">
|
||||
{showBudgetInput && (
|
||||
<div className="mt-4">
|
||||
<div className="neuro-card p-4">
|
||||
<div>
|
||||
<h3 className="text-base font-medium mb-3">카테고리별 예산 설정</h3>
|
||||
@@ -155,7 +164,9 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
</div>;
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default BudgetTabContent;
|
||||
|
||||
Reference in New Issue
Block a user