From cde930c26387822d94e51d87d4d59ac51615e2c4 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Mon, 13 Oct 2025 14:56:03 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20SUPPORT=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EC=A0=84=EC=9A=A9=20=ED=85=8C=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=94=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- NewMaterialsPage.jsx: SUPPORT 전용 헤더 및 본문 행 추가 (9개 컬럼)
- NewMaterialsPage.css: SUPPORT 전용 그리드 레이아웃 및 스타일 추가
- 헤더와 본문의 컬럼이 정확히 매칭되도록 수정
- SUPPORT 전용 배지 스타일 추가 (청록색)
---
 frontend/src/pages/NewMaterialsPage.css | 44 ++++++++++++++
 frontend/src/pages/NewMaterialsPage.jsx | 81 ++++++++++++++++++++++++-
 2 files changed, 124 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/NewMaterialsPage.css b/frontend/src/pages/NewMaterialsPage.css
index 62cae89..7b04d18 100644
--- a/frontend/src/pages/NewMaterialsPage.css
+++ b/frontend/src/pages/NewMaterialsPage.css
@@ -507,6 +507,50 @@
   font-weight: 600;
 }
 
+/* SUPPORT 전용 헤더 - 9개 컬럼 */
+.detailed-grid-header.support-header {
+  grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 200px 100px;
+  padding: 12px 0;
+  margin: 0 24px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: #f9fafb;
+}
+
+/* SUPPORT 전용 행 - 9개 컬럼 */
+.detailed-material-row.support-row {
+  grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 200px 100px;
+  padding: 8px 0;
+  margin: 0 24px;
+}
+
+/* SUPPORT 헤더 테두리 */
+.detailed-grid-header.support-header > div,
+.detailed-grid-header.support-header .filterable-header {
+  border-right: 1px solid #d1d5db;
+}
+.detailed-grid-header.support-header > div:last-child,
+.detailed-grid-header.support-header .filterable-header:last-child {
+  border-right: none;
+}
+
+/* SUPPORT 행 테두리 */
+.detailed-material-row.support-row .material-cell {
+  border-right: 1px solid #e5e7eb;
+}
+.detailed-material-row.support-row .material-cell:last-child {
+  border-right: none;
+}
+
+/* SUPPORT 타입 배지 */
+.type-badge.support { 
+  background: #0891b2; 
+  color: white;
+  border: 2px solid #0e7490;
+  font-weight: 600;
+}
+
 .detailed-material-row.special-row .material-cell:last-child {
   border-right: none;
 }
diff --git a/frontend/src/pages/NewMaterialsPage.jsx b/frontend/src/pages/NewMaterialsPage.jsx
index c560002..d9e4e51 100644
--- a/frontend/src/pages/NewMaterialsPage.jsx
+++ b/frontend/src/pages/NewMaterialsPage.jsx
@@ -1314,6 +1314,18 @@ const NewMaterialsPage = ({
             <div>사용자요구</div>
             <FilterableHeader sortKey="quantity" filterKey="quantity">수량</FilterableHeader>
           </div>
+        ) : selectedCategory === 'SUPPORT' ? (
+          <div className="detailed-grid-header support-header">
+            <div>선택</div>
+            <FilterableHeader sortKey="type" filterKey="type">종류</FilterableHeader>
+            <FilterableHeader sortKey="subtype" filterKey="subtype">타입</FilterableHeader>
+            <FilterableHeader sortKey="size" filterKey="size">크기</FilterableHeader>
+            <div>스케줄</div>
+            <div>재질</div>
+            <div>추가요구</div>
+            <div>사용자요구</div>
+            <FilterableHeader sortKey="quantity" filterKey="quantity">수량</FilterableHeader>
+          </div>
         ) : selectedCategory === 'UNKNOWN' ? (
           <div className="detailed-grid-header unknown-header">
             <div>선택</div>
@@ -1997,9 +2009,76 @@ const NewMaterialsPage = ({
             </div>
           );
         }
+        
+        if (material.classified_category === 'SUPPORT') {
+          // SUPPORT 카테고리 (9개 컬럼)
+          return (
+            <div 
+              key={material.id} 
+              className={`detailed-material-row support-row ${selectedMaterials.has(material.id) ? 'selected' : ''}`}
+            >
+              {/* 선택 */}
+              <div className="material-cell">
+                <input
+                  type="checkbox"
+                  checked={selectedMaterials.has(material.id)}
+                  onChange={() => toggleMaterialSelection(material.id)}
+                />
+              </div>
+              
+              {/* 종류 */}
+              <div className="material-cell">
+                <span className={`type-badge support`}>
+                  SUPPORT
+                </span>
+              </div>
+              
+              {/* 타입 */}
+              <div className="material-cell">
+                <span className="subtype-text">{info.subtype || material.original_description}</span>
+              </div>
+              
+              {/* 크기 */}
+              <div className="material-cell">
+                <span className="size-text">{info.size || material.main_nom}</span>
+              </div>
+              
+              {/* 스케줄 */}
+              <div className="material-cell">
+                <span className="schedule-text">{info.schedule || '-'}</span>
+              </div>
+              
+              {/* 재질 */}
+              <div className="material-cell">
+                <span className="grade-text">{info.grade || material.full_material_grade || '-'}</span>
+              </div>
+              
+              {/* 추가요구 */}
+              <div className="material-cell">
+                <span className="additional-req-text">{info.additionalReq || '-'}</span>
+              </div>
+              
+              {/* 사용자요구 */}
+              <div className="material-cell">
+                <input
+                  type="text"
+                  className="user-req-input"
+                  placeholder="요구사항 입력"
+                  value={userRequirements[material.id] || ''}
+                  onChange={(e) => handleUserRequirementChange(material.id, e.target.value)}
+                />
+              </div>
+              
+              {/* 수량 */}
+              <div className="material-cell">
+                <span className="quantity-text">{info.quantity || material.quantity || 1} {info.unit || 'EA'}</span>
+              </div>
+            </div>
+          );
+        }
           
           // 위에서 처리되지 않은 모든 자재는 기본 9개 컬럼으로 렌더링
-          // (예: SUPPORT 등 아직 전용 뷰가 없는 자재)
+          // (예: 아직 전용 뷰가 없는 자재)
           return (
             <div 
               key={material.id + '-default'}