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

Refactor summary cards layout

Browse Source 
Moves amount to same line as icon and title in summary cards, and aligns amount to the right.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-21 09:44:53 +00:00
parent d50ab71da3
commit bd5ba8f397
1 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/analytics/SummaryCards.tsx
View File

@@ -24,37 +24,43 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
return (
<div className={`grid ${isMobile ? 'grid-cols-1' : 'grid-cols-3'} gap-3 mb-8 w-full desktop-card`}>
<div className="neuro-card w-full">
<div className="flex items-center gap-2 mb-1 py-[5px]">
<Wallet size={24} className="text-gray-500" />
<p className="text-gray-500 text-base">예산</p>
<div className="flex items-center justify-between py-[5px]">
<div className="flex items-center gap-2">
<Wallet size={24} className="text-gray-500" />
<p className="text-gray-500 text-base">예산</p>
</div>
<p className="text-sm font-bold text-neuro-income text-right">
{formatCurrency(totalBudget)}
</p>
</div>
<p className="text-sm font-bold text-neuro-income">
{formatCurrency(totalBudget)}
</p>
</div>
<div className="neuro-card w-full">
<div className="flex items-center gap-2 mb-1 py-[5px]">
<CreditCard size={24} className="text-gray-500" />
<p className="text-gray-500 font-medium text-base">지출</p>
<div className="flex items-center justify-between py-[5px]">
<div className="flex items-center gap-2">
<CreditCard size={24} className="text-gray-500" />
<p className="text-gray-500 font-medium text-base">지출</p>
</div>
<p className="text-sm font-bold text-neuro-income text-right">
{formatCurrency(totalExpense)}
</p>
</div>
<p className="text-sm font-bold text-neuro-income">
{formatCurrency(totalExpense)}
</p>
</div>
<div className="neuro-card w-full">
<div className="flex items-center gap-2 mb-1 py-[5px]">
<Coins size={24} className="text-gray-500" />
<p className="text-gray-500 text-base">잔액</p>
<div className="flex items-center justify-between py-[5px]">
<div className="flex items-center gap-2">
<Coins size={24} className="text-gray-500" />
<p className="text-gray-500 text-base">잔액</p>
</div>
{isOverBudget ? (
<p className="text-sm font-bold text-red-500 text-right">
초과액: {formatCurrency(Math.abs(remainingBudget))}
</p>
) : (
<p className="text-sm font-bold text-neuro-income text-right">
{formatCurrency(remainingBudget)}
</p>
)}
</div>
{isOverBudget ? (
<p className="text-sm font-bold text-red-500">
초과액: {formatCurrency(Math.abs(remainingBudget))}
</p>
) : (
<p className="text-sm font-bold text-neuro-income">
{formatCurrency(remainingBudget)}
</p>
)}
</div>
</div>
);