From 16a349292b3bfac72fe9039b8fd7c5293bcb602a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A0=EB=B3=91=EC=B2=A0?= <zomking@gmail.com>
Date: Fri, 6 Feb 2026 09:08:42 +0900
Subject: [PATCH] =?UTF-8?q?fix(WEB):=20=EA=B2=80=EC=82=AC=EC=9D=98?=
 =?UTF-8?q?=EB=A2=B0=EC=84=9C=20=EB=AC=B8=EC=84=9C=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- InspectionRequestDocument 구조 및 스타일 개선

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../documents/InspectionRequestDocument.tsx   | 83 +++++++++++--------
 1 file changed, 49 insertions(+), 34 deletions(-)

diff --git a/src/components/quality/InspectionManagement/documents/InspectionRequestDocument.tsx b/src/components/quality/InspectionManagement/documents/InspectionRequestDocument.tsx
index c4384565..9a39667c 100644
--- a/src/components/quality/InspectionManagement/documents/InspectionRequestDocument.tsx
+++ b/src/components/quality/InspectionManagement/documents/InspectionRequestDocument.tsx
@@ -11,7 +11,6 @@
  */
 
 import { ConstructionApprovalTable } from '@/components/document-system';
-import { isOrderSpecSame } from '../mockData';
 import type { InspectionRequestDocument as InspectionRequestDocumentType } from '../types';
 
 interface InspectionRequestDocumentProps {
@@ -179,49 +178,65 @@ export function InspectionRequestDocument({ data }: InspectionRequestDocumentPro
         </div>
       </div>
 
+      {/* 검사 요청 시 필독 */}
+      <div className="border border-gray-400 mb-4">
+        <div className="bg-gray-800 text-white text-center py-1 font-bold border-b border-gray-400">검사 요청 시 필독</div>
+        <div className="px-4 py-3 text-[11px] leading-relaxed text-center">
+          <p>
+            발주 사이즈와 시공 완료된 사이즈가 다를 시, 일정 범위를 벗어날 경우
+            <br />
+            인정마크를 부착할 수 없습니다. 제품검사를 위한 방문 전 미리
+            <br />
+            <span className="text-red-600 font-medium">변경사항을 고지해주셔야 인정마크를 부착할 수 있습니다.</span>
+          </p>
+          <p className="mt-2 text-gray-600">
+            (사전고지를 하지 않음으로 발생하는 문제의 귀책은 신청업체에 있습니다.)
+          </p>
+        </div>
+      </div>
+
       {/* 검사대상 사전 고지 정보 */}
       <div className="border border-gray-400 mb-4">
-        <div className="bg-gray-200 text-center py-1 font-bold border-b border-gray-400">검사대상 사전 고지 정보</div>
+        <div className="bg-gray-800 text-white text-center py-1 font-bold border-b border-gray-400">검사대상 사전 고지 정보</div>
         <table className="w-full">
           <thead>
+            {/* 1단: 오픈사이즈 병합 */}
+            <tr className="bg-gray-100 border-b border-gray-300">
+              <th className="border-r border-gray-400 px-2 py-1 w-12 text-center" rowSpan={3}>No.</th>
+              <th className="border-r border-gray-400 px-2 py-1 w-16 text-center" rowSpan={3}>층수</th>
+              <th className="border-r border-gray-400 px-2 py-1 w-20 text-center" rowSpan={3}>부호</th>
+              <th className="border-r border-gray-400 px-2 py-1 text-center" colSpan={4}>오픈사이즈</th>
+              <th className="px-2 py-1 text-center" rowSpan={3}>변경사유</th>
+            </tr>
+            {/* 2단: 발주 규격, 시공후 규격 */}
+            <tr className="bg-gray-100 border-b border-gray-300">
+              <th className="border-r border-gray-400 px-2 py-1 text-center" colSpan={2}>발주 규격</th>
+              <th className="border-r border-gray-400 px-2 py-1 text-center" colSpan={2}>시공후 규격</th>
+            </tr>
+            {/* 3단: 가로, 세로 */}
             <tr className="bg-gray-100 border-b border-gray-400">
-              <th className="border-r border-gray-400 px-2 py-1 w-10 text-center">No.</th>
-              <th className="border-r border-gray-400 px-2 py-1">수주번호</th>
-              <th className="border-r border-gray-400 px-2 py-1">층수</th>
-              <th className="border-r border-gray-400 px-2 py-1">부호</th>
-              <th className="border-r border-gray-400 px-2 py-1 text-center">수주 가로</th>
-              <th className="border-r border-gray-400 px-2 py-1 text-center">수주 세로</th>
-              <th className="border-r border-gray-400 px-2 py-1 text-center">시공 가로</th>
-              <th className="border-r border-gray-400 px-2 py-1 text-center">시공 세로</th>
-              <th className="border-r border-gray-400 px-2 py-1 text-center">일치</th>
-              <th className="px-2 py-1">변경사유</th>
+              <th className="border-r border-gray-400 px-2 py-1 w-16 text-center">가로</th>
+              <th className="border-r border-gray-400 px-2 py-1 w-16 text-center">세로</th>
+              <th className="border-r border-gray-400 px-2 py-1 w-16 text-center">가로</th>
+              <th className="border-r border-gray-400 px-2 py-1 w-16 text-center">세로</th>
             </tr>
           </thead>
           <tbody>
-            {data.priorNoticeItems.map((item, index) => {
-              const isSame = isOrderSpecSame(item);
-              return (
-                <tr key={item.id} className="border-b border-gray-300">
-                  <td className="border-r border-gray-300 px-2 py-1 text-center">{index + 1}</td>
-                  <td className="border-r border-gray-300 px-2 py-1">{item.orderNumber}</td>
-                  <td className="border-r border-gray-300 px-2 py-1">{item.floor}</td>
-                  <td className="border-r border-gray-300 px-2 py-1">{item.symbol}</td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center">{item.orderWidth}</td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center">{item.orderHeight}</td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center">{item.constructionWidth}</td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center">{item.constructionHeight}</td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center font-medium">
-                    <span className={isSame ? 'text-green-700' : 'text-red-700'}>
-                      {isSame ? '일치' : '불일치'}
-                    </span>
-                  </td>
-                  <td className="px-2 py-1">{item.changeReason || '-'}</td>
-                </tr>
-              );
-            })}
+            {data.priorNoticeItems.map((item, index) => (
+              <tr key={item.id} className="border-b border-gray-300">
+                <td className="border-r border-gray-300 px-2 py-1 text-center">{index + 1}</td>
+                <td className="border-r border-gray-300 px-2 py-1 text-center">{item.floor}</td>
+                <td className="border-r border-gray-300 px-2 py-1 text-center">{item.symbol}</td>
+                <td className="border-r border-gray-300 px-2 py-1 text-center">{item.orderWidth}</td>
+                <td className="border-r border-gray-300 px-2 py-1 text-center">{item.orderHeight}</td>
+                <td className="border-r border-gray-300 px-2 py-1 text-center">{item.constructionWidth}</td>
+                <td className="border-r border-gray-300 px-2 py-1 text-center">{item.constructionHeight}</td>
+                <td className="px-2 py-1">{item.changeReason || '-'}</td>
+              </tr>
+            ))}
             {data.priorNoticeItems.length === 0 && (
               <tr>
-                <td colSpan={10} className="px-2 py-4 text-center text-gray-400">
+                <td colSpan={8} className="px-2 py-4 text-center text-gray-400">
                   검사대상 사전 고지 정보가 없습니다.
                 </td>
               </tr>