From 07ca79f3764f6dfb98e1859cc92cdd8c220a2070 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Tue, 14 Oct 2025 06:37:00 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20SUPPORT=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=EB=A5=BC=20U-BOLT=EB=A1=9C=20=ED=86=B5?=
 =?UTF-8?q?=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DB: SUPPORT 카테고리 76개 자재를 U_BOLT로 변경 (총 211개)
- 프론트엔드: SUPPORT 표시명을 'U-BOLT'로 변경
- SUPPORT 전용 헤더 및 본문 렌더링 제거
- U_BOLT 렌더링 개선:
  - U-BOLT: 기본 표시
  - URETHANE: 우레탄 블록 슈
  - CLAMP: 클램프 (신규 추가)
- CLAMP 배지 스타일 추가 (청록색)
---
 frontend/src/pages/NewMaterialsPage.css |  12 ++-
 frontend/src/pages/NewMaterialsPage.jsx | 109 +++++-------------------
 2 files changed, 31 insertions(+), 90 deletions(-)

diff --git a/frontend/src/pages/NewMaterialsPage.css b/frontend/src/pages/NewMaterialsPage.css
index 565bbfe..bbd5425 100644
--- a/frontend/src/pages/NewMaterialsPage.css
+++ b/frontend/src/pages/NewMaterialsPage.css
@@ -350,7 +350,7 @@
 
 /* PIPE 전용 행 - 9개 컬럼 */
 .detailed-material-row.pipe-row {
-  grid-template-columns: 2% 8% 14% 8% 10% 20% 12% 15% 10% !important;
+  grid-template-columns: 1.5% 8.5% 14% 8% 10% 20% 12% 15% 10% !important;
 }
 
 .detailed-material-row.pipe-row .material-cell {
@@ -479,6 +479,14 @@
   font-weight: 600;
 }
 
+/* CLAMP 타입 배지 */
+.type-badge.clamp { 
+  background: #0d9488; 
+  color: white;
+  border: 2px solid #0f766e;
+  font-weight: 600;
+}
+
 /* SUPPORT 전용 헤더 - 9개 컬럼 */
 .detailed-grid-header.support-header {
   grid-template-columns: 2% 8% 16% 8% 10% 18% 12% 15% 10%;
@@ -542,7 +550,7 @@
 
 /* 플랜지 전용 행 - 10개 컬럼 */
 .detailed-material-row.flange-row {
-  grid-template-columns: 2% 8% 12% 8% 10% 10% 18% 10% 15% 6%;
+  grid-template-columns: 1.5% 8.5% 12% 8% 10% 10% 18% 10% 15% 6%;
   
   
 }
diff --git a/frontend/src/pages/NewMaterialsPage.jsx b/frontend/src/pages/NewMaterialsPage.jsx
index cc68154..9888823 100644
--- a/frontend/src/pages/NewMaterialsPage.jsx
+++ b/frontend/src/pages/NewMaterialsPage.jsx
@@ -293,7 +293,7 @@ const NewMaterialsPage = ({
     const categoryMap = {
       'SPECIAL': 'SPECIAL',
       'U_BOLT': 'U-BOLT',
-      'SUPPORT': 'SUPPORT',
+      'SUPPORT': 'U-BOLT',
       'PIPE': 'PIPE',
       'FITTING': 'FITTING',
       'FLANGE': 'FLANGE',
@@ -1304,18 +1304,6 @@ 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>
@@ -1907,9 +1895,23 @@ const NewMaterialsPage = ({
         
         if (material.classified_category === 'U_BOLT') {
           // U_BOLT 카테고리 - 자재 타입별 다른 표시
-          const isUrethaneBlock = material.original_description?.includes('URETHANE') || 
-                                  material.original_description?.includes('BLOCK SHOE') ||
-                                  material.original_description?.includes('우레탄');
+          const desc = material.original_description || '';
+          const isUrethaneBlock = desc.includes('URETHANE') || desc.includes('BLOCK SHOE') || desc.includes('우레탄');
+          const isClamp = desc.includes('CLAMP') || desc.includes('클램프');
+          
+          let badgeType = 'ubolt';
+          let badgeText = 'U-BOLT';
+          let subtypeText = info.subtype || 'U_BOLT';
+          
+          if (isUrethaneBlock) {
+            badgeType = 'urethane';
+            badgeText = 'URETHANE';
+            subtypeText = 'BLOCK SHOE';
+          } else if (isClamp) {
+            badgeType = 'clamp';
+            badgeText = 'CLAMP';
+            subtypeText = 'CLAMP';
+          }
           
           return (
             <div 
@@ -1927,16 +1929,14 @@ const NewMaterialsPage = ({
               
               {/* 종류 */}
               <div className="material-cell">
-                <span className={`type-badge ${isUrethaneBlock ? 'urethane' : 'ubolt'}`}>
-                  {isUrethaneBlock ? 'URETHANE' : 'U-BOLT'}
+                <span className={`type-badge ${badgeType}`}>
+                  {badgeText}
                 </span>
               </div>
               
               {/* 타입 */}
               <div className="material-cell">
-                <span className="subtype-text">
-                  {isUrethaneBlock ? 'BLOCK SHOE' : (info.subtype || 'U_BOLT')}
-                </span>
+                <span className="subtype-text">{subtypeText}</span>
               </div>
               
               {/* 크기 */}
@@ -1983,73 +1983,6 @@ const NewMaterialsPage = ({
           );
         }
         
-        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개 컬럼으로 렌더링
           // (예: 아직 전용 뷰가 없는 자재)
           return (