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

Remove daily and weekly tabs

Browse Source 
Removed the daily and weekly budget tabs from the budget progress card, leaving only the monthly tab.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-22 12:06:32 +00:00
parent 0bc53208b5
commit 8cda329feb
6 changed files with 57 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/BudgetProgressCard.tsx
View File

@@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import BudgetTabContent from './BudgetTabContent';
import { BudgetPeriod } from '@/contexts/budget/BudgetContext';
@@ -38,8 +37,6 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
useEffect(() => {
console.log("BudgetProgressCard 데이터 업데이트 - 예산 데이터:", budgetData);
console.log("월간 예산:", budgetData.monthly.targetAmount);
console.log("주간 예산:", budgetData.weekly.targetAmount);
console.log("일일 예산:", budgetData.daily.targetAmount);
setLocalBudgetData(budgetData);
// 지연 작업으로 이벤트 발생 (컴포넌트 마운트 후 데이터 갱신)
@@ -52,9 +49,9 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
// 초기 탭 설정을 위한 효과
useEffect(() => {
if (!selectedTab) {
console.log("초기 탭 설정: daily");
setSelectedTab('daily');
if (!selectedTab || selectedTab !== "monthly") {
console.log("초기 탭 설정: monthly");
setSelectedTab('monthly');
}
}, []);
@@ -68,78 +65,21 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
return () => window.removeEventListener('budgetDataUpdated', handleBudgetDataUpdated);
}, []);
// 탭 변경 처리
const handleTabChange = (value: string) => {
console.log(`탭 변경: ${value}, 현재 예산 데이터:`, {
daily: budgetData.daily.targetAmount,
weekly: budgetData.weekly.targetAmount,
monthly: budgetData.monthly.targetAmount
});
// 탭 값 업데이트
setSelectedTab(value);
};
// 각 탭에 대한 현재 예산 설정 여부 계산
const isDailyBudgetSet = budgetData.daily.targetAmount > 0;
const isWeeklyBudgetSet = budgetData.weekly.targetAmount > 0;
// 월간 예산 설정 여부 계산
const isMonthlyBudgetSet = budgetData.monthly.targetAmount > 0;
console.log(`BudgetProgressCard 상태: 일=${isDailyBudgetSet}, 주=${isWeeklyBudgetSet}, 월=${isMonthlyBudgetSet}`);
console.log(`BudgetProgressCard 상태: 월=${isMonthlyBudgetSet}`);
return (
<div className="neuro-card mb-6 overflow-hidden w-full">
<Tabs defaultValue="daily" value={selectedTab} onValueChange={handleTabChange} className="w-full">
<TabsList className="grid grid-cols-3 mb-4 bg-transparent">
<TabsTrigger
value="daily"
className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
>
오늘
</TabsTrigger>
<TabsTrigger
value="weekly"
className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
>
주간
</TabsTrigger>
<TabsTrigger
value="monthly"
className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
>
월간
</TabsTrigger>
</TabsList>
<div className="text-sm text-gray-600 mb-2 px-1">지출 / 예산</div>
<TabsContent value="daily" className="space-y-4 mt-0">
<BudgetTabContent
data={budgetData.daily}
formatCurrency={formatCurrency}
calculatePercentage={calculatePercentage}
onSaveBudget={(amount, categoryBudgets) => onSaveBudget('daily', amount, categoryBudgets)}
/>
</TabsContent>
<TabsContent value="weekly" className="space-y-4 mt-0">
<BudgetTabContent
data={budgetData.weekly}
formatCurrency={formatCurrency}
calculatePercentage={calculatePercentage}
onSaveBudget={(amount, categoryBudgets) => onSaveBudget('weekly', amount, categoryBudgets)}
/>
</TabsContent>
<TabsContent value="monthly" className="space-y-4 mt-0">
<BudgetTabContent
data={budgetData.monthly}
formatCurrency={formatCurrency}
calculatePercentage={calculatePercentage}
onSaveBudget={(amount, categoryBudgets) => onSaveBudget('monthly', amount, categoryBudgets)}
/>
</TabsContent>
</Tabs>
<div className="text-sm text-gray-600 mb-2 px-3 pt-3">지출 / 예산</div>
<BudgetTabContent
data={budgetData.monthly}
formatCurrency={formatCurrency}
calculatePercentage={calculatePercentage}
onSaveBudget={(amount, categoryBudgets) => onSaveBudget('monthly', amount, categoryBudgets)}
/>
</div>
);
};