From 2ea7f2879fce65db54de96c39ef4a18295fb082f Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Mon, 13 Oct 2025 15:04:43 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EA=B3=A0=EC=A0=95=20=ED=95=B4=EC=A0=9C=20?=
 =?UTF-8?q?=EB=B0=8F=20=EA=B0=80=EB=A1=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모든 카테고리 헤더의 position: sticky 제거
- 헤더와 본문이 함께 좌우로 스크롤되도록 변경
- 더 나은 UX: 전체 테이블을 좌우로 자유롭게 이동 가능
- 컬럼 너비 최적화 (타입, 재질 등 컬럼 크기 조정)
---
 frontend/src/pages/NewMaterialsPage.css | 43 +++++--------------------
 1 file changed, 8 insertions(+), 35 deletions(-)

diff --git a/frontend/src/pages/NewMaterialsPage.css b/frontend/src/pages/NewMaterialsPage.css
index 298c7cf..9f795d8 100644
--- a/frontend/src/pages/NewMaterialsPage.css
+++ b/frontend/src/pages/NewMaterialsPage.css
@@ -312,9 +312,6 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
   align-items: center;
-  position: sticky;
-  top: 0;
-  z-index: 10;
 }
 
 .detailed-grid-header > div {
@@ -346,10 +343,6 @@
   grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px !important;
   padding: 12px 0;
   margin: 0 24px;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background: #f9fafb;
 }
 
 .detailed-grid-header.pipe-header > div,
@@ -382,10 +375,6 @@
   grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 120px 200px 100px;
   padding: 12px 0;
   margin: 0 24px;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background: #f9fafb;
 }
 
 .detailed-grid-header.special-header > div,
@@ -410,10 +399,6 @@
   grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px;
   padding: 12px 0;
   margin: 0 24px;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background: #f9fafb;
 }
 
 /* BOLT 전용 행 - 9개 컬럼 */
@@ -460,10 +445,6 @@
   grid-template-columns: 60px 90px 130px 80px 200px 120px 200px 100px;
   padding: 12px 0;
   margin: 0 24px;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background: #f9fafb;
 }
 
 /* U-BOLT 전용 행 - 8개 컬럼 */
@@ -512,10 +493,6 @@
   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개 컬럼 */
@@ -557,13 +534,9 @@
 
 /* 플랜지 전용 헤더 - 10개 컬럼 */
 .detailed-grid-header.flange-header {
-  grid-template-columns: 60px 90px 150px 80px 100px 100px 250px 120px 200px 100px;
+  grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 200px 100px;
   padding: 12px 0;
   margin: 0 24px;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background: #f9fafb;
 }
 
 .detailed-grid-header.flange-header > div,
@@ -578,7 +551,7 @@
 
 /* 플랜지 전용 행 - 10개 컬럼 */
 .detailed-material-row.flange-row {
-  grid-template-columns: 60px 90px 150px 80px 100px 100px 250px 120px 200px 100px;
+  grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 200px 100px;
   padding: 8px 0;
   margin: 0 24px;
 }
@@ -593,7 +566,7 @@
 
 /* 피팅 전용 헤더 - 10개 컬럼 */
 .detailed-grid-header.fitting-header {
-  grid-template-columns: 60px 90px 200px 80px 80px 100px 250px 120px 200px 100px;
+  grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 200px 100px;
   padding: 12px 0;
   margin: 0 24px;
 }
@@ -610,7 +583,7 @@
 
 /* 피팅 전용 행 - 10개 컬럼 */
 .detailed-material-row.fitting-row {
-  grid-template-columns: 60px 90px 200px 80px 80px 100px 250px 120px 200px 100px;
+  grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 200px 100px;
   padding: 8px 0;
   margin: 0 24px;
 }
@@ -625,7 +598,7 @@
 
 /* 밸브 전용 헤더 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
 .detailed-grid-header.valve-header {
-  grid-template-columns: 60px 200px 120px 80px 80px 250px 120px 200px 100px;
+  grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 200px 100px;
   padding: 12px 0;
   margin: 0 24px;
 }
@@ -642,7 +615,7 @@
 
 /* 밸브 전용 행 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
 .detailed-material-row.valve-row {
-  grid-template-columns: 60px 200px 120px 80px 80px 250px 120px 200px 100px;
+  grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 200px 100px;
   padding: 8px 0;
   margin: 0 24px;
 }
@@ -657,7 +630,7 @@
 
 /* 가스켓 전용 헤더 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
 .detailed-grid-header.gasket-header {
-  grid-template-columns: 60px 90px 120px 80px 80px 120px 250px 80px 120px 200px 100px;
+  grid-template-columns: 60px 90px 100px 80px 80px 120px 200px 80px 100px 200px 100px;
   padding: 12px 0;
   margin: 0 24px;
 }
@@ -674,7 +647,7 @@
 
 /* 가스켓 전용 행 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
 .detailed-material-row.gasket-row {
-  grid-template-columns: 60px 90px 120px 80px 80px 120px 250px 80px 120px 200px 100px;
+  grid-template-columns: 60px 90px 100px 80px 80px 120px 200px 80px 100px 200px 100px;
   padding: 8px 0;
   margin: 0 24px;
 }