From e3d0c4d9a0197e21cfee7142d6d883fd355cd390 Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Mon, 13 Oct 2025 15:44:51 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AF=20=EC=BB=AC=EB=9F=BC=20=EB=84=88?= =?UTF-8?q?=EB=B9=84=EB=A5=BC=20=EB=B0=B1=EB=B6=84=EC=9C=A8=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20-=20=ED=99=94=EB=A9=B4=20=EA=BD=89=20?= =?UTF-8?q?=EC=B0=A8=EA=B2=8C=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 모든 고정 픽셀 너비를 백분율(%)로 변경 - 화면 너비에 맞게 테이블이 꽉 차도록 설정 - overflow-x: hidden으로 가로 스크롤 제거 - 헤더와 본문이 정확히 동일한 백분율 사용 - 예: PIPE 9개 컬럼 = 5% 8% 12% 8% 10% 20% 12% 15% 10% - 이제 어떤 화면 크기에서도 헤더와 본문이 완벽히 정렬됨 --- frontend/src/pages/NewMaterialsPage.css | 48 ++++++++++++------------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/frontend/src/pages/NewMaterialsPage.css b/frontend/src/pages/NewMaterialsPage.css index e0cb3db..8fd8cf3 100644 --- a/frontend/src/pages/NewMaterialsPage.css +++ b/frontend/src/pages/NewMaterialsPage.css @@ -289,16 +289,14 @@ cursor: not-allowed; } -/* 자재 테이블 - 엑셀 스타일 (반응형 제거, 고정 너비 + 스크롤) */ +/* 자재 테이블 - 엑셀 스타일 */ .materials-grid { background: white; margin: 16px 24px; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; max-height: calc(100vh - 220px); border: 1px solid #d1d5db; - border-radius: 4px; - min-width: 1200px; /* 최소 너비 강제 */ - width: fit-content; /* 내용에 맞는 너비 */ } .detailed-grid-header { @@ -337,7 +335,7 @@ /* PIPE 전용 헤더 - 9개 컬럼 */ .detailed-grid-header.pipe-header { - grid-template-columns: 60px 90px 130px 80px 100px 200px 120px 180px 100px !important; + grid-template-columns: 5% 8% 12% 8% 10% 20% 12% 15% 10% !important; } .detailed-grid-header.pipe-header > div, @@ -352,7 +350,7 @@ /* PIPE 전용 행 - 9개 컬럼 */ .detailed-material-row.pipe-row { - grid-template-columns: 60px 90px 130px 80px 100px 200px 120px 180px 100px !important; + grid-template-columns: 5% 8% 12% 8% 10% 20% 12% 15% 10% !important; } .detailed-material-row.pipe-row .material-cell { @@ -365,7 +363,7 @@ /* SPECIAL 전용 헤더 - 10개 컬럼 */ .detailed-grid-header.special-header { - grid-template-columns: 60px 90px 150px 80px 100px 180px 120px 120px 180px 100px; + grid-template-columns: 5% 8% 14% 8% 10% 18% 12% 12% 18% 5%; } @@ -382,21 +380,21 @@ /* SPECIAL 전용 행 - 10개 컬럼 */ .detailed-material-row.special-row { - grid-template-columns: 60px 90px 150px 80px 100px 180px 120px 120px 180px 100px; + grid-template-columns: 5% 8% 14% 8% 10% 18% 12% 12% 18% 5%; } /* BOLT 전용 헤더 - 9개 컬럼 */ .detailed-grid-header.bolt-header { - grid-template-columns: 60px 90px 130px 80px 100px 200px 120px 180px 100px; + grid-template-columns: 5% 8% 12% 8% 10% 20% 12% 15% 10%; } /* BOLT 전용 행 - 9개 컬럼 */ .detailed-material-row.bolt-row { - grid-template-columns: 60px 90px 130px 80px 100px 200px 120px 180px 100px; + grid-template-columns: 5% 8% 12% 8% 10% 20% 12% 15% 10%; } @@ -435,14 +433,14 @@ /* U-BOLT 전용 헤더 - 8개 컬럼 */ .detailed-grid-header.ubolt-header { - grid-template-columns: 60px 90px 130px 80px 180px 120px 180px 100px; + grid-template-columns: 5% 10% 15% 10% 20% 12% 18% 10%; } /* U-BOLT 전용 행 - 8개 컬럼 */ .detailed-material-row.ubolt-row { - grid-template-columns: 60px 90px 130px 80px 180px 120px 180px 100px; + grid-template-columns: 5% 10% 15% 10% 20% 12% 18% 10%; } @@ -483,14 +481,14 @@ /* SUPPORT 전용 헤더 - 9개 컬럼 */ .detailed-grid-header.support-header { - grid-template-columns: 60px 90px 150px 80px 100px 180px 120px 180px 100px; + grid-template-columns: 5% 8% 14% 8% 10% 18% 12% 15% 10%; } /* SUPPORT 전용 행 - 9개 컬럼 */ .detailed-material-row.support-row { - grid-template-columns: 60px 90px 150px 80px 100px 180px 120px 180px 100px; + grid-template-columns: 5% 8% 14% 8% 10% 18% 12% 15% 10%; } @@ -527,7 +525,7 @@ /* 플랜지 전용 헤더 - 10개 컬럼 */ .detailed-grid-header.flange-header { - grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 180px 100px; + grid-template-columns: 5% 8% 10% 8% 10% 10% 18% 10% 15% 6%; } @@ -544,7 +542,7 @@ /* 플랜지 전용 행 - 10개 컬럼 */ .detailed-material-row.flange-row { - grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 180px 100px; + grid-template-columns: 5% 8% 10% 8% 10% 10% 18% 10% 15% 6%; } @@ -559,7 +557,7 @@ /* 피팅 전용 헤더 - 10개 컬럼 */ .detailed-grid-header.fitting-header { - grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 180px 100px; + grid-template-columns: 5% 8% 18% 8% 8% 10% 18% 10% 15% 0%; } @@ -576,7 +574,7 @@ /* 피팅 전용 행 - 10개 컬럼 */ .detailed-material-row.fitting-row { - grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 180px 100px; + grid-template-columns: 5% 8% 18% 8% 8% 10% 18% 10% 15% 0%; } @@ -591,7 +589,7 @@ /* 밸브 전용 헤더 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */ .detailed-grid-header.valve-header { - grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 180px 100px; + grid-template-columns: 5% 18% 12% 8% 8% 18% 10% 15% 6%; } @@ -608,7 +606,7 @@ /* 밸브 전용 행 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */ .detailed-material-row.valve-row { - grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 180px 100px; + grid-template-columns: 5% 18% 12% 8% 8% 18% 10% 15% 6%; } @@ -623,7 +621,7 @@ /* 가스켓 전용 헤더 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */ .detailed-grid-header.gasket-header { - grid-template-columns: 60px 90px 100px 80px 80px 120px 180px 80px 100px 180px 100px; + grid-template-columns: 5% 8% 10% 7% 7% 10% 18% 7% 10% 15% 3%; } @@ -640,7 +638,7 @@ /* 가스켓 전용 행 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */ .detailed-material-row.gasket-row { - grid-template-columns: 60px 90px 100px 80px 80px 120px 180px 80px 100px 180px 100px; + grid-template-columns: 5% 8% 10% 7% 7% 10% 18% 7% 10% 15% 3%; } @@ -868,7 +866,7 @@ /* UNKNOWN 전용 헤더 - 5개 컬럼 */ .detailed-grid-header.unknown-header { - grid-template-columns: 60px 100px 1fr 180px 100px; + grid-template-columns: 5% 10% 1fr 20% 10%; } @@ -885,7 +883,7 @@ /* UNKNOWN 전용 행 - 5개 컬럼 */ .detailed-material-row.unknown-row { - grid-template-columns: 60px 100px 1fr 180px 100px; + grid-template-columns: 5% 10% 1fr 20% 10%; }