ui(cupang): 헤더 입력 185px 강제 + 라인 추가/삭제 버튼 제목행 우측

- 헤더 입력 185px 특이도 강화(.cpg .cpg-header-grid .erp-field>input)
- 라인 추가/삭제 버튼을 "품목 라인" 제목행 우측으로 이동(하단 footer 제거)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-05-30 05:38:33 +09:00
parent 2607e0610f
commit 800fbd1da4
2 changed files with 15 additions and 13 deletions
@@ -68,12 +68,16 @@
<!-- ── 품목 라인 (오른쪽) ── -->
<div class="erp-card cpg-form-card cpg-form-lines">
<div class="cpg-card-head">
<div class="cpg-card-head cpg-lines-head">
<h2>품목 라인</h2>
<span class="erp-muted">
제품명 선택 시 제품코드 자동 입력. 수량 입력 시 박스 수 자동 계산.
{% if not products %}<a href="/cupang/products">설정에서 제품명 먼저 등록</a>{% endif %}
</span>
<div class="cpg-lines-btns">
<button type="button" class="erp-btn erp-btn-outline" id="cpg-add-line">+ 라인 추가</button>
<button type="button" class="erp-btn erp-btn-danger" id="cpg-del-line">라인 삭제</button>
</div>
</div>
<div class="erp-table-wrap cpg-lines-scroll">
@@ -87,10 +91,6 @@
<tbody id="cpg-lines-body"><!-- JS 렌더 --></tbody>
</table>
</div>
<div class="cpg-lines-foot">
<button type="button" class="erp-btn erp-btn-outline" id="cpg-add-line">+ 라인 추가</button>
<button type="button" class="erp-btn erp-btn-danger" id="cpg-del-line">라인 삭제</button>
</div>
</div>
</div><!-- /cpg-form-2col -->
+10 -8
View File
@@ -88,12 +88,11 @@
@media (max-width: 940px) {
.cpg-form-head { flex-basis: 100%; width: 100%; }
}
/* 라인 테이블 영역만 스크롤 (footer 는 하단 고정) */
/* 라인 테이블 영역만 스크롤 */
.cpg-lines-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.cpg-lines-foot {
display: flex; justify-content: flex-end; gap: 8px;
padding-top: 12px;
}
/* 제목행: 제목 + 설명 + (우측) 추가/삭제 버튼 */
.cpg-lines-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cpg-lines-btns { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }
/* 저장/취소 — 공통 헤더 카드 하단에 위치(우측 라인 수와 무관) */
.cpg-form-actions { margin-top: 16px; }
@@ -105,9 +104,12 @@
grid-template-columns: repeat(auto-fill, 185px);
gap: 12px 16px;
}
/* 작성일·출고일·센터입고일·입고센터·출고방식·작업자 입력 185px 고정 */
.cpg-header-grid .erp-input,
.cpg-header-grid .erp-select { width: 185px; max-width: 185px; box-sizing: border-box; }
/* 작성일·출고일·센터입고일·입고센터·출고방식·작업자 입력 185px 고정
(.cpg .erp-field > .erp-input width:100% 보다 특이도 높게) */
.cpg .cpg-header-grid .erp-field > .erp-input,
.cpg .cpg-header-grid .erp-field > .erp-select {
width: 185px; max-width: 185px; box-sizing: border-box;
}
.cpg-rule-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));