fix(WEB): 검사의뢰서 문서 레이아웃 개선

- InspectionRequestDocument 구조 및 스타일 개선

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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 w-16 text-center">가로</th>
-              <th className="border-r border-gray-400 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">층수</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">부호</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 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>
             </tr>
           </thead>
           <tbody>
-            {data.priorNoticeItems.map((item, index) => {
+            {data.priorNoticeItems.map((item, index) => (
-              const isSame = isOrderSpecSame(item);
+              <tr key={item.id} className="border-b border-gray-300">
-              return (
+                <td className="border-r border-gray-300 px-2 py-1 text-center">{index + 1}</td>
-                <tr key={item.id} className="border-b border-gray-300">
+                <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">{index + 1}</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">{item.orderNumber}</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">{item.floor}</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">{item.symbol}</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.orderWidth}</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">{item.orderHeight}</td>
+                <td className="px-2 py-1">{item.changeReason || '-'}</td>
-                  <td className="border-r border-gray-300 px-2 py-1 text-center">{item.constructionWidth}</td>
+              </tr>
-                  <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.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>