From 0ed10478397f9cc68f16f79206e880693b997752 Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Mon, 13 Oct 2025 15:21:09 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=8A=20=ED=85=8C=EC=9D=B4=EB=B8=94?= =?UTF-8?q?=EC=9D=84=20=EC=97=91=EC=85=80=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=99=84=EC=A0=84=20=EC=9E=AC=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 모든 margin, padding 제거하고 순수 grid로 재구성 - 헤더 셀: padding: 6px 4px (엑셀처럼 내부 여백만) - 본문 셀: padding: 6px 4px (헤더와 동일) - 모든 셀에 명확한 border (엑셀 그리드 스타일) - materials-grid에 외곽 border와 border-radius 추가 - 헤더 배경: #f3f4f6 (엑셀 회색 헤더) - 이제 헤더와 본문이 완벽히 정렬됨 --- frontend/src/pages/NewMaterialsPage.css | 139 +++++++++++------------- 1 file changed, 64 insertions(+), 75 deletions(-) diff --git a/frontend/src/pages/NewMaterialsPage.css b/frontend/src/pages/NewMaterialsPage.css index e837e8a..78bc8e1 100644 --- a/frontend/src/pages/NewMaterialsPage.css +++ b/frontend/src/pages/NewMaterialsPage.css @@ -288,61 +288,49 @@ cursor: not-allowed; } -/* 자재 테이블 */ +/* 자재 테이블 - 엑셀 스타일 */ .materials-grid { background: white; - margin: 0; - min-width: 1500px; - overflow-x: auto; - max-height: calc(100vh - 200px); /* 최대 높이만 제한 */ - overflow-y: auto; - position: relative; + margin: 16px 24px; + overflow: auto; + max-height: calc(100vh - 220px); + border: 1px solid #d1d5db; + border-radius: 4px; } .detailed-grid-header { display: grid; /* 기본 그리드는 사용하지 않음 - 각 카테고리별 전용 클래스 사용 */ - padding: 12px 0; - margin: 0 24px; - background: #f9fafb; - border-bottom: 2px solid #e5e7eb; - font-size: 12px; + background: #f3f4f6; + border: 1px solid #d1d5db; + border-bottom: 2px solid #9ca3af; + font-size: 11px; font-weight: 600; - color: #6b7280; + color: #374151; text-transform: uppercase; - letter-spacing: 0.5px; - align-items: center; + letter-spacing: 0.3px; } -.detailed-grid-header > div { +.detailed-grid-header > div, +.detailed-grid-header .filterable-header { text-align: center; display: flex; align-items: center; justify-content: center; - min-height: 40px; -} - -.detailed-grid-header > div { + min-height: 32px; + padding: 6px 4px; border-right: 1px solid #d1d5db; - padding: 0; -} - -.detailed-grid-header .filterable-header { - border-right: 1px solid #d1d5db; - padding: 0; + background: #f3f4f6; } .detailed-grid-header > div:last-child, .detailed-grid-header .filterable-header:last-child { border-right: none; - padding: 0; } /* PIPE 전용 헤더 - 9개 컬럼 */ .detailed-grid-header.pipe-header { grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px !important; - padding: 12px 0; - margin: 0 24px; } .detailed-grid-header.pipe-header > div, @@ -358,8 +346,6 @@ /* PIPE 전용 행 - 9개 컬럼 */ .detailed-material-row.pipe-row { grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px !important; - padding: 8px 0; - margin: 0 24px; } .detailed-material-row.pipe-row .material-cell { @@ -373,8 +359,8 @@ /* SPECIAL 전용 헤더 - 10개 컬럼 */ .detailed-grid-header.special-header { grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 120px 200px 100px; - padding: 12px 0; - margin: 0 24px; + + } .detailed-grid-header.special-header > div, @@ -390,22 +376,22 @@ /* SPECIAL 전용 행 - 10개 컬럼 */ .detailed-material-row.special-row { grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 120px 200px 100px; - padding: 8px 0; - margin: 0 24px; + + } /* BOLT 전용 헤더 - 9개 컬럼 */ .detailed-grid-header.bolt-header { grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px; - padding: 12px 0; - margin: 0 24px; + + } /* BOLT 전용 행 - 9개 컬럼 */ .detailed-material-row.bolt-row { grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px; - padding: 8px 0; - margin: 0 24px; + + } .detailed-material-row.special-row .material-cell { @@ -443,15 +429,15 @@ /* U-BOLT 전용 헤더 - 8개 컬럼 */ .detailed-grid-header.ubolt-header { grid-template-columns: 60px 90px 130px 80px 200px 120px 200px 100px; - padding: 12px 0; - margin: 0 24px; + + } /* U-BOLT 전용 행 - 8개 컬럼 */ .detailed-material-row.ubolt-row { grid-template-columns: 60px 90px 130px 80px 200px 120px 200px 100px; - padding: 8px 0; - margin: 0 24px; + + } /* U-BOLT 헤더 테두리 */ @@ -491,15 +477,15 @@ /* 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; + + } /* 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 헤더 테두리 */ @@ -535,8 +521,8 @@ /* 플랜지 전용 헤더 - 10개 컬럼 */ .detailed-grid-header.flange-header { grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 200px 100px; - padding: 12px 0; - margin: 0 24px; + + } .detailed-grid-header.flange-header > div, @@ -552,8 +538,8 @@ /* 플랜지 전용 행 - 10개 컬럼 */ .detailed-material-row.flange-row { grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 200px 100px; - padding: 8px 0; - margin: 0 24px; + + } .detailed-material-row.flange-row .material-cell { @@ -567,8 +553,8 @@ /* 피팅 전용 헤더 - 10개 컬럼 */ .detailed-grid-header.fitting-header { grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 200px 100px; - padding: 12px 0; - margin: 0 24px; + + } .detailed-grid-header.fitting-header > div, @@ -584,8 +570,8 @@ /* 피팅 전용 행 - 10개 컬럼 */ .detailed-material-row.fitting-row { grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 200px 100px; - padding: 8px 0; - margin: 0 24px; + + } .detailed-material-row.fitting-row .material-cell { @@ -599,8 +585,8 @@ /* 밸브 전용 헤더 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */ .detailed-grid-header.valve-header { grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 200px 100px; - padding: 12px 0; - margin: 0 24px; + + } .detailed-grid-header.valve-header > div, @@ -616,8 +602,8 @@ /* 밸브 전용 행 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */ .detailed-material-row.valve-row { grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 200px 100px; - padding: 8px 0; - margin: 0 24px; + + } .detailed-material-row.valve-row .material-cell { @@ -631,8 +617,8 @@ /* 가스켓 전용 헤더 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */ .detailed-grid-header.gasket-header { grid-template-columns: 60px 90px 100px 80px 80px 120px 200px 80px 100px 200px 100px; - padding: 12px 0; - margin: 0 24px; + + } .detailed-grid-header.gasket-header > div, @@ -648,8 +634,8 @@ /* 가스켓 전용 행 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */ .detailed-material-row.gasket-row { grid-template-columns: 60px 90px 100px 80px 80px 120px 200px 80px 100px 200px 100px; - padding: 8px 0; - margin: 0 24px; + + } .detailed-material-row.gasket-row .material-cell { @@ -876,8 +862,8 @@ /* UNKNOWN 전용 헤더 - 5개 컬럼 */ .detailed-grid-header.unknown-header { grid-template-columns: 60px 100px 1fr 200px 100px; - padding: 12px 0; - margin: 0 24px; + + } .detailed-grid-header.unknown-header > div, @@ -893,8 +879,8 @@ /* UNKNOWN 전용 행 - 5개 컬럼 */ .detailed-material-row.unknown-row { grid-template-columns: 60px 100px 1fr 200px 100px; - padding: 8px 0; - margin: 0 24px; + + } .detailed-material-row.unknown-row .material-cell { @@ -924,22 +910,25 @@ .detailed-material-row { display: grid; /* 기본 그리드는 사용하지 않음 - 각 카테고리별 전용 클래스 사용 */ - padding: 12px 0; - margin: 0 24px; - border-bottom: 1px solid #e5e7eb; - align-items: center; + border-bottom: 1px solid #d1d5db; + border-left: 1px solid #d1d5db; + border-right: 1px solid #d1d5db; + background: white; transition: background 0.15s; - font-size: 13px; + font-size: 12px; } .detailed-material-row .material-cell { - border-right: 1px solid #e5e7eb; - padding: 0 8px; + border-right: 1px solid #d1d5db; + padding: 6px 4px; + display: flex; + align-items: center; + justify-content: center; + min-height: 28px; } .detailed-material-row .material-cell:last-child { border-right: none; - padding: 0 8px; } .detailed-material-row:hover {