feat(cupang): 상자 목록을 번호·제품명·제품코드·수량 표로, 엑셀 다운로드 추가

- ② 상자 목록: 카드 대신 표. 한 상자에 여러 제품이면 상자번호 칸 rowspan 병합
- GET /cupang/{id}/boxes.xlsx — 같은 표를 xlsx 로 (export.build_box_list_workbook)
- box_list 항목에 product_code 포함

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-01 19:55:06 +09:00
parent 15947e73ed
commit 3926b6a431
9 changed files with 174 additions and 61 deletions
+24 -35
View File
@@ -1399,43 +1399,32 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
.cpg-calc-card .cpg-calc-table .cpg-calc-qty { width: 70px; max-width: 70px; margin-left: auto; }
/* 출고 보기(읽기 전용) — ③ 하단 메타 정보 */
/* ── 출고 보기 ② 상자 목록 — 상자마다 번호 + 내용물 ── */
.cpg-boxno-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cpg-boxno {
border: 1px solid var(--color-cloud-gray);
border-radius: 10px;
padding: 8px 10px;
background: #fff;
}
.cpg-boxno.is-mix { border-color: var(--color-deep-black); }
.cpg-boxno-head { display: flex; align-items: center; gap: 6px; }
.cpg-boxno-no {
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 24px; padding: 0 6px;
border-radius: 999px;
background: var(--color-deep-black); color: #fff;
font-size: 12px; font-weight: 700; font-family: var(--font-geist-mono);
}
.cpg-boxno-name { font-size: 13px; font-weight: 600; }
.cpg-boxno-tag {
font-size: 10px; padding: 1px 6px; border-radius: 999px;
background: var(--color-ghost-gray); color: var(--color-midtone-gray);
}
.cpg-boxno-qty {
margin-left: auto;
font-size: 12px; color: var(--color-midtone-gray);
font-family: var(--font-geist-mono);
}
.cpg-boxno-items { list-style: none; margin: 6px 0 0; padding: 0 0 0 30px; }
.cpg-boxno-items li {
display: flex; align-items: baseline; gap: 8px;
padding: 3px 0;
/* ── 출고 보기 ② 상자 목록 — 상자번호 · 제품명 · 제품코드 · 수량 ── */
.cpg-boxno-dl { margin-left: auto; font-size: 12px; padding: 4px 10px; }
.cpg-boxno-table { table-layout: fixed; width: 100%; }
.cpg-boxno-table th, .cpg-boxno-table td {
box-sizing: border-box;
padding: 4px 8px;
font-size: 12px;
border-bottom: 1px dashed var(--color-cloud-gray);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
border-bottom: 1px solid var(--color-cloud-gray);
}
.cpg-boxno-items li:last-child { border-bottom: 0; }
.cpg-boxno-items li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpg-boxno-items li b { flex: 0 0 auto; font-family: var(--font-geist-mono); }
.cpg-boxno-table thead th {
position: sticky; top: 0; z-index: 2;
background: var(--color-ghost-gray);
}
.cpg-boxno-c-no { width: 66px; }
.cpg-boxno-c-name { width: auto; }
.cpg-boxno-c-code { width: 92px; }
.cpg-boxno-c-qty { width: 58px; }
.cpg-boxno-cell {
text-align: center; font-weight: 700;
font-family: var(--font-geist-mono);
border-right: 1px solid var(--color-cloud-gray);
vertical-align: middle;
}
.cpg-boxno-code { color: var(--color-midtone-gray); font-family: var(--font-geist-mono); }
.cpg-boxno-table tbody tr.is-boxtop td { border-top: 1px solid var(--color-cloud-gray); }
.cpg-view-meta {
margin: 12px 0 0; padding: 10px 12px;