From 28990c81768e24874fdf5e2d7f8ae6213c2b03f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sun, 22 Mar 2026 15:21:11 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[=EC=88=98=EC=A3=BC=EC=84=9C]=20?=
 =?UTF-8?q?=EC=A0=88=EA=B3=A1=ED=92=88=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20Pla?=
 =?UTF-8?q?ceholder=20=E2=86=92=20=EC=8B=A4=EC=A0=9C=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BendingItem 인터페이스에 image_url 필드 추가
- BendingImage 헬퍼 컴포넌트: image_url 있으면 실제 이미지, 없으면 기존 placeholder
- 가이드레일/케이스/하단마감재/연기차단재 5개 위치 모두 교체
---
 .../orders/documents/SalesOrderDocument.tsx   | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/orders/documents/SalesOrderDocument.tsx b/src/components/orders/documents/SalesOrderDocument.tsx
index 8b3480eb..3cec0fe4 100644
--- a/src/components/orders/documents/SalesOrderDocument.tsx
+++ b/src/components/orders/documents/SalesOrderDocument.tsx
@@ -27,6 +27,7 @@ interface BendingItem {
   name: string;
   spec: string;
   qty: number;
+  image_url?: string | null;
 }
 
 interface BendingGroup {
@@ -94,6 +95,15 @@ const tdBase = 'border-r border-gray-300 px-1 py-1';
 const tdCenter = `${tdBase} text-center`;
 const imgPlaceholder = 'flex items-center justify-center border border-dashed border-gray-300 text-gray-400';
 
+/** 절곡품 이미지 렌더링 — image_url 있으면 실제 이미지, 없으면 placeholder */
+function BendingImage({ items, height = 'h-20' }: { items: BendingItem[]; height?: string }) {
+  const imageUrl = items.find(i => i.image_url)?.image_url;
+  if (imageUrl) {
+    return <img src={imageUrl} alt="" className={`${height} w-full object-contain`} />;
+  }
+  return <div className={`${imgPlaceholder} ${height} w-full`}>IMG</div>;
+}
+
 export function SalesOrderDocument({
   documentNumber = "ABC123",
   orderNumber,
@@ -436,7 +446,7 @@ export function SalesOrderDocument({
                       <tr key={i} className="border-b border-gray-300">
                         {i === 0 && (
                           <td className={tdCenter} rowSpan={guideRailItems.length}>
-                            <div className={`${imgPlaceholder} h-20 w-full`}>IMG</div>
+                            <BendingImage items={guideRailItems} height="h-20" />
                           </td>
                         )}
                         <td className={tdCenter}>{item.name}</td>
@@ -465,7 +475,7 @@ export function SalesOrderDocument({
                         <tr key={i} className="border-b border-gray-300">
                           {i === 0 && (
                             <td className={tdCenter} rowSpan={guideSmokeItems.length}>
-                              <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
+                              <BendingImage items={guideSmokeItems} height="h-14" />
                             </td>
                           )}
                           <td className={tdCenter}>{item.name}</td>
@@ -503,7 +513,7 @@ export function SalesOrderDocument({
                       <tr key={i} className="border-b border-gray-300">
                         {i === 0 && (
                           <td className={tdCenter} rowSpan={caseItems.length}>
-                            <div className={`${imgPlaceholder} h-24 w-full`}>IMG</div>
+                            <BendingImage items={caseItems} height="h-24" />
                           </td>
                         )}
                         <td className={tdCenter}>{item.name}</td>
@@ -532,7 +542,7 @@ export function SalesOrderDocument({
                         <tr key={i} className="border-b border-gray-300">
                           {i === 0 && (
                             <td className={tdCenter} rowSpan={caseSmokeItems.length}>
-                              <div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
+                              <BendingImage items={caseSmokeItems} height="h-14" />
                             </td>
                           )}
                           <td className={tdCenter}>{item.name}</td>
@@ -570,7 +580,7 @@ export function SalesOrderDocument({
                       <tr key={i} className="border-b border-gray-300">
                         {i === 0 && (
                           <td className={tdCenter} rowSpan={bottomItems.length}>
-                            <div className={`${imgPlaceholder} h-16 w-full`}>IMG</div>
+                            <BendingImage items={bottomItems} height="h-16" />
                           </td>
                         )}
                         <td className={tdCenter}>{item.name}</td>