96 lines
4.2 KiB
TypeScript
96 lines
4.2 KiB
TypeScript
import React from 'react';
|
|
import { Wallet, CreditCard, Coins } from 'lucide-react';
|
|
import { formatCurrency } from '@/utils/formatters';
|
|
import { useIsMobile } from '@/hooks/use-mobile';
|
|
interface SummaryCardsProps {
|
|
totalBudget: number;
|
|
totalExpense: number;
|
|
savingsPercentage: number;
|
|
}
|
|
const SummaryCards: React.FC<SummaryCardsProps> = ({
|
|
totalBudget,
|
|
totalExpense,
|
|
savingsPercentage
|
|
}) => {
|
|
const isMobile = useIsMobile();
|
|
|
|
// 남은 예산 계산
|
|
const remainingBudget = totalBudget - totalExpense;
|
|
const isOverBudget = remainingBudget < 0;
|
|
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>
|
|
</div>
|
|
<p className="font-bold text-neuro-income text-center mt-3 text-xs">
|
|
{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="font-bold text-neuro-income text-center mt-3 text-xs">
|
|
{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="font-bold text-neuro-income text-center mt-3 text-xs">
|
|
{formatCurrency(remainingBudget)}
|
|
</p>}
|
|
</>}
|
|
</div>
|
|
</div>;
|
|
};
|
|
export default SummaryCards; |