feat: [수주서] 절곡품 이미지 Placeholder → 실제 이미지 교체

- BendingItem 인터페이스에 image_url 필드 추가
- BendingImage 헬퍼 컴포넌트: image_url 있으면 실제 이미지, 없으면 기존 placeholder
- 가이드레일/케이스/하단마감재/연기차단재 5개 위치 모두 교체

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>