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

2
src/components/Header.tsx
View File

@@ -4,6 +4,7 @@ import { Bell } from 'lucide-react';
import { useAuth } from '@/contexts/auth';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { useIsMobile } from '@/hooks/use-mobile';
const Header: React.FC = () => {
const {
@@ -12,6 +13,7 @@ const Header: React.FC = () => {
const userName = user?.user_metadata?.username || '익명';
const [imageLoaded, setImageLoaded] = useState(false);
const [imageError, setImageError] = useState(false);
const isMobile = useIsMobile();
// 이미지 프리로딩 처리
useEffect(() => {

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

@@ -24,6 +24,20 @@ 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">
{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>
) : (
// 데스크탑 레이아웃 (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>
@@ -31,8 +45,24 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
<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>
@@ -40,8 +70,30 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
<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>
@@ -55,6 +107,8 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
{formatCurrency(remainingBudget)}
</p>
)}
</>
)}
</div>
</div>
);