o2o-negosium-original/frontend/src/features/chat/components/templates/BidSummary.tsx

51 lines
2.0 KiB
TypeScript

import { CheckCircle2 } from 'lucide-react'
import { numberToKorean } from '@/features/chat/lib/koreanNumber'
interface BidSummaryProps {
itemName: string
itemCode: string
bidPrice: number
deliveryType: string
isVAT: boolean
}
// 투찰 결과 요약 카드 (보고서식 final-summary)
export function BidSummary({ itemName, itemCode, bidPrice, deliveryType, isVAT }: BidSummaryProps) {
const priceStr = (bidPrice || 0).toLocaleString()
return (
<div className="w-full rounded-2xl border-2 border-brand-light bg-white p-5 shadow-md">
<div className="mb-4 flex items-center gap-2">
<CheckCircle2 className="size-5 text-success" />
<h3 className="text-sm font-bold text-neutral-90">투찰 결과 요약</h3>
</div>
<div className="divide-y divide-border/60 rounded-xl border border-border">
<Row label="상품명" value={itemName || '-'} />
<Row label="상품 코드" value={itemCode || '-'} mono />
<div className="flex items-start justify-between gap-3 px-4 py-3">
<span className="shrink-0 text-sm text-neutral-60">투찰 가격</span>
<span className="min-w-0 flex-1 break-keep text-right text-sm">
<span className="font-bold text-[#E5484D]">{priceStr}원</span>
<span className="text-neutral-70"> ({numberToKorean(bidPrice || 0)}원)</span>
<span className="text-neutral-70"> {isVAT ? 'VAT포함' : 'VAT별도'}</span>
</span>
</div>
<Row label="배송형태" value={deliveryType || '-'} />
</div>
</div>
)
}
function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
return (
<div className="flex items-start justify-between gap-3 px-4 py-3">
<span className="shrink-0 text-sm text-neutral-60">{label}</span>
<span
className={`min-w-0 flex-1 break-keep text-right text-sm font-semibold text-neutral-90 ${mono ? 'font-mono' : ''}`}
>
{value}
</span>
</div>
)
}