ui(cupang): 폼 프레임 크기 고정 + 라인 추가/삭제 버튼 하단 우측

- 공통 헤더 450px, 품목 라인 900x900 내부 스크롤
- 저장/취소 위 구분선 제거
- 라인 추가 + 라인 삭제 버튼을 품목 라인 하단 우측에 배치
- 행별 ✕ 삭제 제거 → "라인 삭제"가 마지막 라인 삭제(최소 1줄 유지)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-05-30 05:24:49 +09:00
parent d4e823f1fa
commit 150335cf87
3 changed files with 36 additions and 14 deletions
+19 -8
View File
@@ -75,17 +75,28 @@
.cpg-form-2col {
display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
}
.cpg-form-head { flex: 1 1 380px; min-width: 0; margin-bottom: 0; }
.cpg-form-lines { flex: 1 1 520px; min-width: 0; margin-bottom: 0; }
@media (max-width: 900px) {
.cpg-form-head, .cpg-form-lines { flex-basis: 100%; }
/* 공통 헤더: 너비 450 고정 */
.cpg-form-head { flex: 0 0 450px; width: 450px; min-width: 0; margin-bottom: 0; }
/* 품목 라인: 900x900 고정, 내부 스크롤 */
.cpg-form-lines {
flex: 0 0 900px; width: 900px; height: 900px; min-width: 0; margin-bottom: 0;
display: flex; flex-direction: column; overflow: hidden;
}
/* 저장/취소 — 공통 헤더 카드 하단에 위치(우측 라인 수와 무관) */
.cpg-form-actions {
margin-top: 16px;
@media (max-width: 1400px) {
.cpg-form-lines { flex-basis: auto; width: 100%; }
}
@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;
border-top: 1px solid var(--color-subtle-ash);
}
/* 저장/취소 — 공통 헤더 카드 하단에 위치(우측 라인 수와 무관) */
.cpg-form-actions { margin-top: 16px; }
.cpg-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cpg-card-head h2 { font-size: 16px; font-weight: 600; margin: 0; }