SamProject/sam-react-prod
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: [quotes] 견적 등록 UI 개선 — 레이아웃/스타일 정리, 입력 영역 높이 맞춤

Browse Source
This commit is contained in:
유병철
2026-03-19 21:06:58 +09:00
parent eb121c3ce6
commit 7dccaf7bab
6 changed files with 129 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/quotes/LocationDetailPanel.tsx
View File

@@ -304,9 +304,9 @@ export function LocationDetailPanel({
return (
<div className="flex flex-col h-full overflow-hidden">
{/* ②-1 개소 정보 영역 */}
<div className="bg-gray-50 border-b">
{/* 1행: 층, 부호, 가로, 세로, 제품코드 */}
<div className="px-4 py-3 space-y-3">
<div>
{/* 입력 영역 (왼쪽 입력 폼과 높이 맞춤) */}
<div className="bg-gray-100 p-4 space-y-3 border-b border-gray-200 min-h-[128px]">
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
<div>
<label className="text-xs text-gray-600">층</label>
@@ -315,7 +315,7 @@ export function LocationDetailPanel({
value={location.floor}
onChange={(e) => handleFieldChange("floor", e.target.value)}
disabled={disabled}
className="h-8 text-sm"
className="h-8 text-sm border border-gray-300"
/>
<datalist id="floorOptionListDetail">
{FLOOR_OPTIONS.map((f) => (
@@ -330,7 +330,7 @@ export function LocationDetailPanel({
value={location.code}
onChange={(e) => handleFieldChange("code", e.target.value)}
disabled={disabled}
className="h-8 text-sm"
className="h-8 text-sm border border-gray-300"
/>
<datalist id="locationCodeListDetail">
{locationCodes.map((code) => (
@@ -344,7 +344,7 @@ export function LocationDetailPanel({
value={location.openWidth}
onChange={(value) => handleFieldChange("openWidth", value ?? 0)}
disabled={disabled}
className="h-8 text-sm"
className="h-8 text-sm border border-gray-300"
/>
</div>
<div>
@@ -353,7 +353,7 @@ export function LocationDetailPanel({
value={location.openHeight}
onChange={(value) => handleFieldChange("openHeight", value ?? 0)}
disabled={disabled}
className="h-8 text-sm"
className="h-8 text-sm border border-gray-300"
/>
</div>
<div>
@@ -372,7 +372,7 @@ export function LocationDetailPanel({
}}
disabled={disabled}
>
<SelectTrigger className="h-8 text-sm">
<SelectTrigger className="h-8 text-sm border border-gray-300">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -398,7 +398,7 @@ export function LocationDetailPanel({
onValueChange={(value) => handleFieldChange("guideRailType", value)}
disabled
>
<SelectTrigger className="h-8 text-sm">
<SelectTrigger className="h-8 text-sm border border-gray-300">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -419,7 +419,7 @@ export function LocationDetailPanel({
onValueChange={(value) => handleFieldChange("motorPower", value)}
disabled={disabled}
>
<SelectTrigger className="h-8 text-sm">
<SelectTrigger className="h-8 text-sm border border-gray-300">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -440,7 +440,7 @@ export function LocationDetailPanel({
onValueChange={(value) => handleFieldChange("controller", value)}
disabled={disabled}
>
<SelectTrigger className="h-8 text-sm">
<SelectTrigger className="h-8 text-sm border border-gray-300">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -454,27 +454,28 @@ export function LocationDetailPanel({
</div>
</div>
{/* 3행: 제작사이즈, 산출중량, 산출면적, 수량, 산출하기 */}
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 text-sm pt-2 border-t border-gray-200">
</div>
{/* 결과행: 제작사이즈, 산출중량, 산출면적, 수량, 산출하기 */}
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 text-sm px-4 py-3 bg-gray-50 border-b border-gray-200">
<div>
<span className="text-xs text-gray-500">제작사이즈</span>
<p className="font-semibold">
<span className="text-xs text-muted-foreground">제작사이즈</span>
<p className="text-base font-bold">
{String(location.bomResult?.variables?.W1 ?? location.manufactureWidth ?? "-")}
X
{String(location.bomResult?.variables?.H1 ?? location.manufactureHeight ?? "-")}
</p>
</div>
<div>
<span className="text-xs text-gray-500">산출중량</span>
<p className="font-semibold">
<span className="text-xs text-muted-foreground">산출중량</span>
<p className="text-base font-bold">
{(location.bomResult?.variables?.K ?? location.bomResult?.variables?.WEIGHT)
? `${Number(location.bomResult?.variables?.K ?? location.bomResult?.variables?.WEIGHT).toFixed(2)} kg`
: "-"}
</p>
</div>
<div>
<span className="text-xs text-gray-500">산출면적</span>
<p className="font-semibold">
<span className="text-xs text-muted-foreground">산출면적</span>
<p className="text-base font-bold">
{(location.bomResult?.variables?.M ?? location.bomResult?.variables?.AREA)
? `${Number(location.bomResult?.variables?.M ?? location.bomResult?.variables?.AREA).toFixed(2)} m²`
: "-"}
@@ -493,7 +494,7 @@ export function LocationDetailPanel({
totalPrice: unitPrice * newQty,
});
}}
className="h-8 text-sm font-semibold"
className="h-8 text-sm font-semibold border border-gray-300"
min={1}
disabled={disabled}
/>
@@ -502,7 +503,7 @@ export function LocationDetailPanel({
<Button
onClick={() => onCalculateLocation?.(location.id)}
disabled={disabled || isCalculating}
className="w-full h-8 bg-orange-500 hover:bg-orange-600 text-white"
className="w-full h-8"
>
{isCalculating ? (
<>
@@ -519,7 +520,6 @@ export function LocationDetailPanel({
</div>
</div>
</div>
</div>
{/* ②-2 품목 상세 영역 */}
<div className="flex-1 overflow-hidden flex flex-col">
@@ -531,7 +531,7 @@ export function LocationDetailPanel({
<TabsTrigger
key={tab.value}
value={tab.value}
className="rounded-none border-b-2 border-transparent data-[state=active]:border-orange-500 data-[state=active]:bg-orange-50 data-[state=active]:text-orange-700 px-4 py-2 text-sm whitespace-nowrap"
className="rounded-none border-b-2 border-transparent data-[state=active]:border-gray-900 data-[state=active]:bg-gray-100 data-[state=active]:text-gray-900 data-[state=active]:font-semibold px-4 py-2 text-sm whitespace-nowrap"
>
{tab.label}
</TabsTrigger>
@@ -546,10 +546,10 @@ export function LocationDetailPanel({
return (
<TabsContent key={tab.value} value={tab.value} className="flex-1 overflow-auto m-0 p-0">
<div className="bg-amber-50 border border-amber-200 rounded-lg m-3">
<div className="bg-gray-50 border border-gray-200 rounded-lg m-3">
<Table>
<TableHeader>
<TableRow className="bg-amber-100/50">
<TableRow>
<TableHead className="font-semibold">품목명</TableHead>
<TableHead className="text-center font-semibold">규격</TableHead>
{isBendingTab && (
@@ -738,11 +738,10 @@ export function LocationDetailPanel({
</Table>
{/* 품목 추가 + 저장 버튼 */}
<div className="p-3 flex items-center justify-between border-t border-amber-200">
<div className="p-3 flex items-center justify-between border-t border-gray-200">
<Button
variant="outline"
size="sm"
className="bg-blue-100 border-blue-300 text-blue-700 hover:bg-blue-200"
onClick={() => setItemSearchOpen(true)}
disabled={disabled}
>
@@ -751,7 +750,6 @@ export function LocationDetailPanel({
</Button>
<Button
size="sm"
className="bg-blue-600 hover:bg-blue-700 text-white"
onClick={onSaveItems}
disabled={disabled}
>

63
src/components/quotes/LocationListPanel.tsx
View File

@@ -312,7 +312,7 @@ export function LocationListPanel({
<div className="border-r border-gray-200 flex flex-col">
{/* ① 입력 영역 (상단으로 이동) */}
{!disabled && (
<div className="bg-gray-50 p-4 space-y-3 border-b border-gray-200">
<div className="bg-gray-100 p-4 space-y-3 border-b border-gray-200 min-h-[128px]">
{/* 1행: 층, 부호, 가로, 세로, 제품코드, 수량 */}
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2">
<div>
@@ -322,7 +322,7 @@ export function LocationListPanel({
placeholder="예: 1F"
value={formData.floor}
onChange={(e) => handleFormChange("floor", e.target.value)}
className="h-8 text-sm placeholder:text-gray-300"
className="h-8 text-sm border border-gray-300 placeholder:text-gray-400"
/>
<datalist id="floorOptionList">
{FLOOR_OPTIONS.map((f) => (
@@ -337,7 +337,7 @@ export function LocationListPanel({
placeholder="예: FSS-01"
value={formData.code}
onChange={(e) => handleFormChange("code", e.target.value)}
className="h-8 text-sm placeholder:text-gray-300"
className="h-8 text-sm border border-gray-300 placeholder:text-gray-400"
/>
<datalist id="locationCodeList">
{locationCodes.map((code) => (
@@ -351,7 +351,7 @@ export function LocationListPanel({
placeholder="예: 5000"
value={formData.openWidth ? Number(formData.openWidth) : undefined}
onChange={(value) => handleFormChange("openWidth", value?.toString() ?? "")}
className="h-8 text-sm placeholder:text-gray-300"
className="h-8 text-sm border border-gray-300 placeholder:text-gray-400"
/>
</div>
<div>
@@ -360,7 +360,7 @@ export function LocationListPanel({
placeholder="예: 3000"
value={formData.openHeight ? Number(formData.openHeight) : undefined}
onChange={(value) => handleFormChange("openHeight", value?.toString() ?? "")}
className="h-8 text-sm placeholder:text-gray-300"
className="h-8 text-sm border border-gray-300 placeholder:text-gray-400"
/>
</div>
<div>
@@ -376,14 +376,13 @@ export function LocationListPanel({
}
}}
>
<SelectTrigger className="h-8 text-sm">
<SelectTrigger className="h-8 text-sm border border-gray-300">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
{(() => {
// 기존 개소가 있으면 동일 모델 제품만 표시 (예: KSS01 → KSS01 변형만)
const existingCode = locations.length > 0 ? locations[0].productCode : null;
const existingModel = existingCode?.split('-')[1] ?? null; // FG-KSS01-... → KSS01
const existingModel = existingCode?.split('-')[1] ?? null;
const filtered = existingModel
? finishedGoods.filter((fg) => fg.item_code.split('-')[1] === existingModel)
: finishedGoods;
@@ -401,14 +400,14 @@ export function LocationListPanel({
<QuantityInput
value={formData.quantity ? Number(formData.quantity) : undefined}
onChange={(value) => handleFormChange("quantity", value?.toString() ?? "")}
className="h-8 text-sm"
className="h-8 text-sm border border-gray-300"
min={1}
/>
</div>
</div>
{/* 2행: 가이드레일, 전원, 제어기, 추가 버튼 */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 items-end">
{/* 2행: 가이드레일, 전원, 제어기, + 버튼 */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
<div>
<label className="text-xs text-gray-600 flex items-center gap-1">
🔧 가이드레일
@@ -419,7 +418,7 @@ export function LocationListPanel({
onValueChange={(value) => handleFormChange("guideRailType", value)}
disabled
>
<SelectTrigger className="h-8 text-sm">
<SelectTrigger className="h-8 text-sm border border-gray-300">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -439,7 +438,7 @@ export function LocationListPanel({
value={formData.motorPower}
onValueChange={(value) => handleFormChange("motorPower", value)}
>
<SelectTrigger className="h-8 text-sm">
<SelectTrigger className="h-8 text-sm border border-gray-300">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -459,7 +458,7 @@ export function LocationListPanel({
value={formData.controller}
onValueChange={(value) => handleFormChange("controller", value)}
>
<SelectTrigger className="h-8 text-sm">
<SelectTrigger className="h-8 text-sm border border-gray-300">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -471,21 +470,23 @@ export function LocationListPanel({
</SelectContent>
</Select>
</div>
<Button
onClick={handleAdd}
className="h-8 bg-green-500 hover:bg-green-600 px-4"
>
<Plus className="h-4 w-4" />
</Button>
<div className="flex items-end">
<Button
onClick={handleAdd}
className="w-full h-[36px] bg-green-500 hover:bg-green-600"
>
<Plus className="h-4 w-4" />
</Button>
</div>
</div>
</div>
)}
{/* 발주 개소 목록 헤더 */}
<div className="bg-blue-100 px-4 py-3 border-b border-blue-200">
<div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
<h3 className="font-semibold text-blue-800">
📋 발주 개소 목록 ({locations.length})
<h3 className="font-semibold text-gray-700">
발주 개소 목록 ({locations.length})
</h3>
<div className="flex gap-1">
<Button
@@ -527,13 +528,13 @@ export function LocationListPanel({
<div className="flex-1 overflow-auto">
<Table>
<TableHeader>
<TableRow className="bg-gray-800 text-white">
<TableHead className="text-center text-white">층</TableHead>
<TableHead className="text-center text-white">부호</TableHead>
<TableHead className="text-center text-white">사이즈</TableHead>
<TableHead className="text-center text-white">제품</TableHead>
<TableHead className="text-center text-white">수량</TableHead>
{!disabled && <TableHead className="w-[80px] text-center text-white"></TableHead>}
<TableRow>
<TableHead className="text-center">층</TableHead>
<TableHead className="text-center">부호</TableHead>
<TableHead className="text-center">사이즈</TableHead>
<TableHead className="text-center">제품</TableHead>
<TableHead className="text-center">수량</TableHead>
{!disabled && <TableHead className="w-[80px] text-center"></TableHead>}
</TableRow>
</TableHeader>
<TableBody>
@@ -548,7 +549,7 @@ export function LocationListPanel({
<TableRow
key={loc.id}
className={`cursor-pointer hover:bg-blue-50 ${
selectedLocationId === loc.id ? "bg-orange-100 border-l-4 border-l-orange-500" : ""
selectedLocationId === loc.id ? "bg-gray-100 border-l-4 border-l-gray-800" : ""
}`}
onClick={() => onSelectLocation(loc.id)}
>

57
src/components/quotes/QuoteFooterBar.tsx
View File

@@ -8,10 +8,11 @@
"use client";
import { Save, Check, ArrowLeft, Loader2, FileText, Pencil, ClipboardList, Percent, Calculator } from "lucide-react";
import { Save, Check, X, ArrowLeft, Loader2, FileText, Pencil, ClipboardList, Percent, Calculator } from "lucide-react";
import { Button } from "../ui/button";
import { formatNumber } from "@/lib/utils/amount";
import { useMenuStore } from "@/stores/menuStore";
// =============================================================================
// Props
@@ -29,8 +30,10 @@ interface QuoteFooterBarProps {
onSave: () => void;
/** 최종확정 */
onFinalize: () => void;
/** 뒤로가기 */
/** 뒤로가기 (목록으로) */
onBack: () => void;
/** 취소 (목록으로 이동) */
onCancel?: () => void;
/** 수정 */
onEdit?: () => void;
/** 수주등록 */
@@ -68,6 +71,7 @@ export function QuoteFooterBar({
onSave,
onFinalize,
onBack,
onCancel,
onEdit,
onOrderRegister,
onOrderView,
@@ -81,28 +85,35 @@ export function QuoteFooterBar({
disabled: _disabled = false,
isViewMode = false,
}: QuoteFooterBarProps) {
return (
<div className="sticky bottom-0 bg-gradient-to-r from-blue-50 to-indigo-50 border-t border-blue-200 shadow-lg">
<div className="px-3 py-3 md:px-6 md:py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
{/* 왼쪽: 뒤로가기 + 금액 표시 */}
<div className="flex items-center gap-3 md:gap-6">
<Button
variant="outline"
onClick={onBack}
size="sm"
className="md:size-default shrink-0"
>
<ArrowLeft className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">목록으로</span>
</Button>
const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);
<div className="min-w-0">
<p className="text-xs md:text-sm text-gray-600 whitespace-nowrap">예상 전체 견적금액</p>
<p className="text-lg md:text-3xl font-bold text-blue-600 whitespace-nowrap">
{formatNumber(totalAmount)}
<span className="text-sm md:text-lg font-normal text-gray-500 ml-1">원</span>
</p>
</div>
return (
<div className={`fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[24px] ${sidebarCollapsed ? 'md:left-[120px]' : 'md:left-[280px]'}`}>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
{/* 왼쪽: 취소 + 목록으로 */}
<div className="flex items-center gap-2">
{!isViewMode && onCancel && (
<Button
variant="outline"
onClick={onCancel}
size="sm"
className="md:size-default shrink-0"
>
<X className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">취소</span>
</Button>
)}
{isViewMode && (
<Button
variant="outline"
onClick={onBack}
size="sm"
className="md:size-default shrink-0"
>
<ArrowLeft className="h-4 w-4 md:mr-2" />
<span className="hidden md:inline">목록으로</span>
</Button>
)}
</div>
{/* 오른쪽: 버튼들 */}

6
src/components/quotes/QuoteRegistration.tsx
View File

@@ -890,8 +890,8 @@ export function QuoteRegistration({
{/* 자동 견적 산출 섹션 */}
<Card>
<CardHeader className="pb-3 bg-orange-50 border-b border-orange-200">
<CardTitle className="text-base font-semibold flex items-center gap-2 text-orange-800">
<CardHeader className="pb-3">
<CardTitle className="text-base font-semibold flex items-center gap-2">
<Calculator className="h-5 w-5" />
자동 견적 산출
</CardTitle>
@@ -979,6 +979,7 @@ export function QuoteRegistration({
locations={formData.locations}
selectedLocationId={selectedLocationId}
onSelectLocation={setSelectedLocationId}
discountedTotalAmount={discountedTotalAmount}
/>
</div>
@@ -992,6 +993,7 @@ export function QuoteRegistration({
onSave={() => handleSave("temporary")}
onFinalize={() => handleSave("final")}
onBack={onBack}
onCancel={onBack}
onEdit={onEdit}
onOrderRegister={onOrderRegister}
onOrderView={onOrderView}

48
src/components/quotes/QuoteSummaryPanel.tsx
View File

@@ -44,6 +44,8 @@ interface QuoteSummaryPanelProps {
locations: LocationItem[];
selectedLocationId: string | null;
onSelectLocation: (id: string) => void;
/** 할인 적용 후 총 금액 (할인이 있을 때만 표시) */
discountedTotalAmount?: number;
}
// =============================================================================
@@ -54,6 +56,7 @@ export function QuoteSummaryPanel({
locations,
selectedLocationId,
onSelectLocation,
discountedTotalAmount,
}: QuoteSummaryPanelProps) {
// ---------------------------------------------------------------------------
// 계산된 값
@@ -135,9 +138,9 @@ export function QuoteSummaryPanel({
return (
<Card className="border-gray-200">
<CardHeader className="pb-3 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-blue-200">
<CardHeader className="pb-3">
<CardTitle className="text-base font-semibold flex items-center gap-2">
<Coins className="h-5 w-5 text-blue-600" />
<Coins className="h-5 w-5" />
견적 금액 요약
</CardTitle>
</CardHeader>
@@ -147,7 +150,7 @@ export function QuoteSummaryPanel({
{/* 왼쪽: 개소별 합계 */}
<div className="p-4">
<div className="flex items-center gap-2 mb-3">
<span className="text-blue-500">📍</span>
<span>📍</span>
<h4 className="font-semibold text-gray-700">개소별 합계</h4>
</div>
@@ -162,7 +165,7 @@ export function QuoteSummaryPanel({
key={loc.id}
className={`flex items-center justify-between p-3 rounded-lg cursor-pointer transition-colors ${
selectedLocationId === loc.id
? "bg-blue-100 border border-blue-300"
? "bg-gray-100 border border-gray-300"
: "bg-gray-50 hover:bg-gray-100 border border-transparent"
}`}
onClick={() => onSelectLocation(loc.id)}
@@ -175,7 +178,7 @@ export function QuoteSummaryPanel({
</div>
<div className="text-right">
<p className="text-xs text-gray-500">상세소계</p>
<p className="font-bold text-blue-600">
<p className="font-bold text-gray-900">
{formatNumber(loc.totalPrice)}
</p>
{loc.unitPrice > 0 && (
@@ -193,7 +196,7 @@ export function QuoteSummaryPanel({
{/* 오른쪽: 상세별 합계 */}
<div className="p-4">
<div className="flex items-center gap-2 mb-3">
<span className="text-blue-500">✨</span>
<span>✨</span>
<h4 className="font-semibold text-gray-700">
상세별 합계
{selectedLocation && (
@@ -215,19 +218,19 @@ export function QuoteSummaryPanel({
) : (
<div className="space-y-3">
{detailTotals.map((category, index) => (
<div key={index} className="bg-blue-50 rounded-lg overflow-hidden border border-blue-200">
<div key={index} className="bg-gray-50 rounded-lg overflow-hidden border border-gray-200">
{/* 카테고리 헤더 */}
<div className="flex items-center justify-between px-3 py-2 bg-blue-100/50">
<div className="flex items-center justify-between px-3 py-2 bg-gray-100">
<span className="font-semibold text-gray-700">{category.label}</span>
<div className="flex items-center gap-2">
<span className="text-xs text-gray-500">({category.count}개)</span>
<span className="font-bold text-blue-600">
<span className="font-bold text-gray-900">
{formatNumber(category.amount)}
</span>
</div>
</div>
{/* 품목 상세 목록 */}
<div className="divide-y divide-blue-100">
<div className="divide-y divide-gray-100">
{category.items.map((item, itemIndex) => (
<div key={itemIndex} className="flex items-center justify-between px-3 py-2 bg-white">
<div>
@@ -236,7 +239,7 @@ export function QuoteSummaryPanel({
수량: {item.quantity} × 단가: {formatNumber(item.unitPrice)}
</p>
</div>
<span className="text-sm font-medium text-blue-600">
<span className="text-sm font-medium text-gray-900">
{formatNumber(item.totalPrice)}
</span>
</div>
@@ -250,23 +253,32 @@ export function QuoteSummaryPanel({
</div>
{/* 하단 바: 총 개소 수, 예상 견적금액, 견적 상태 */}
<div className="bg-gray-900 text-white px-4 py-4 md:px-6 md:py-5 flex flex-wrap items-center justify-between gap-3">
<div className="bg-gray-50 border-t px-4 py-4 md:px-6 md:py-5 flex flex-wrap items-center justify-between gap-3">
<div className="flex items-center gap-4 md:gap-10">
<div>
<p className="text-xs md:text-sm text-gray-400">총 개소 수</p>
<p className="text-xs md:text-sm text-muted-foreground">총 개소 수</p>
<p className="text-2xl md:text-4xl font-bold">{locations.length}</p>
</div>
<div>
<p className="text-xs md:text-sm text-gray-400">예상 견적금액</p>
<p className="text-2xl md:text-4xl font-bold text-blue-400">
<p className="text-xs md:text-sm text-muted-foreground">예상 견적금액</p>
<p className="text-2xl md:text-4xl font-bold">
{formatNumber(totalAmount)}
<span className="text-base md:text-xl ml-1">원</span>
<span className="text-base md:text-xl font-normal text-muted-foreground ml-1">원</span>
</p>
</div>
{discountedTotalAmount !== undefined && discountedTotalAmount !== totalAmount && (
<div>
<p className="text-xs md:text-sm text-muted-foreground">예상 전체 견적금액 <span className="text-blue-500">(할인 적용)</span></p>
<p className="text-2xl md:text-4xl font-bold text-blue-600">
{formatNumber(discountedTotalAmount)}
<span className="text-base md:text-xl font-normal text-muted-foreground ml-1">원</span>
</p>
</div>
)}
</div>
<div className="text-right">
<p className="text-xs md:text-sm text-gray-400">견적 상태</p>
<span className="inline-block bg-blue-500/20 text-blue-300 border border-blue-500/50 text-sm md:text-lg px-3 py-1 md:px-4 rounded">
<p className="text-xs md:text-sm text-muted-foreground">견적 상태</p>
<span className="inline-block bg-gray-200 text-gray-700 border border-gray-300 text-sm md:text-lg px-3 py-1 md:px-4 rounded">
작성중
</span>
</div>

13
src/components/quotes/quoteConfig.ts
View File

@@ -21,10 +21,7 @@ export const quoteConfig: DetailConfig = {
fields: [], // renderView/renderForm 사용으로 필드 정의 불필요
gridColumns: 2,
actions: {
showBack: false, // QuoteFooterBar에서 처리
showDelete: false, // QuoteFooterBar에서 처리
showEdit: false, // QuoteFooterBar에서 처리
showSave: false, // QuoteFooterBar에서 처리
hideActions: true, // QuoteFooterBar에서 전체 처리
},
};
@@ -38,9 +35,7 @@ export const quoteCreateConfig: DetailConfig = {
basePath: '/sales/quote-management',
fields: [],
actions: {
showBack: true,
showSave: false, // QuoteFooterBar에서 처리
backLabel: '목록',
hideActions: true, // QuoteFooterBar에서 전체 처리
},
};
@@ -54,9 +49,7 @@ export const quoteEditConfig: DetailConfig = {
basePath: '/sales/quote-management',
fields: [],
actions: {
showBack: true,
showSave: false, // QuoteFooterBar에서 처리
backLabel: '목록',
hideActions: true, // QuoteFooterBar에서 전체 처리
},
};