✨ SUPPORT 카테고리 전용 테이블 레이아웃 추가
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
- NewMaterialsPage.jsx: SUPPORT 전용 헤더 및 본문 행 추가 (9개 컬럼) - NewMaterialsPage.css: SUPPORT 전용 그리드 레이아웃 및 스타일 추가 - 헤더와 본문의 컬럼이 정확히 매칭되도록 수정 - SUPPORT 전용 배지 스타일 추가 (청록색)
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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'}
|
||||
|
||||
Reference in New Issue
Block a user