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

Refactor transaction edit dialog

Browse Source 
Modify TransactionEditDialog to only change the desktop page layout.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-21 09:54:29 +00:00
parent aa39b23ccd
commit 00d8d7f923
2 changed files with 85 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,36 +24,90 @@ 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 justify-center gap-2 py-[5px]">
<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-center mt-3">
{formatCurrency(totalBudget)}
</p>
</div>
<div className="neuro-card w-full">
<div className="flex items-center justify-center gap-2 py-[5px]">
<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-center mt-3">
{formatCurrency(totalExpense)}
</p>
</div>
<div className="neuro-card w-full">
<div className="flex items-center justify-center gap-2 py-[5px]">
<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-center mt-3">
초과액: {formatCurrency(Math.abs(remainingBudget))}
</p>
{isMobile ? (
// 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
<div className="flex items-center justify-between px-3 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">
{formatCurrency(totalBudget)}
</p>
</div>
) : (
<p className="text-sm font-bold text-neuro-income text-center mt-3">
{formatCurrency(remainingBudget)}
</p>
// 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
<>
<div className="flex items-center justify-center gap-2 py-[5px]">
<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-center mt-3">
{formatCurrency(totalBudget)}
</p>
</>
)}
</div>
<div className="neuro-card w-full">
{isMobile ? (
// 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
<div className="flex items-center justify-between px-3 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">
{formatCurrency(totalExpense)}
</p>
</div>
) : (
// 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
<>
<div className="flex items-center justify-center gap-2 py-[5px]">
<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-center mt-3">
{formatCurrency(totalExpense)}
</p>
</>
)}
</div>
<div className="neuro-card w-full">
{isMobile ? (
// 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
<div className="flex items-center justify-between px-3 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">
초과액: {formatCurrency(Math.abs(remainingBudget))}
</p>
) : (
<p className="text-sm font-bold text-neuro-income">
{formatCurrency(remainingBudget)}
</p>
)}
</div>
) : (
// 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
<>
<div className="flex items-center justify-center gap-2 py-[5px]">
<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-center mt-3">
초과액: {formatCurrency(Math.abs(remainingBudget))}
</p>
) : (
<p className="text-sm font-bold text-neuro-income text-center mt-3">
{formatCurrency(remainingBudget)}
</p>
)}
</>
)}
</div>
</div>