feat(cupang): 박스 계산 요약 — 자투리 혼합 박스 시각화
하단 "박스명별 합계" 표를 요약 카드로 교체. - KPI 3개: 총 박스 / 제품별 박스 / 혼합 박스(자투리 N개) - 제품별 카드: 몇 박스 + 자투리 몇 개(딱 맞으면 "딱 맞음") - 자투리 혼합 박스: 박스 1개당 카드로 어떤 상품이 몇 개 들어가는지 표시. 상자 SVG(뚜껑 열림·내용물 차오름), 채움률 바, 카드 등장 애니메이션. prefers-reduced-motion 에서는 애니메이션 비활성. 혼합 계산은 서버 _pack_leftovers: 박스 용량을 1 로 두고 제품 1개 = 1/units_per_box 부피로 환산, 같은 박스명끼리만 채운다. 부동소수 오차를 피하려고 Fraction 사용. 한 제품 자투리가 두 박스로 나뉘는 것은 허용해 박스 수가 최소가 되게 한다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -335,3 +335,157 @@
|
||||
.cpg-calc-row.cpg-calc-warn { background: color-mix(in srgb, var(--color-callout-red) 8%, transparent); }
|
||||
.cpg-calc-actions { margin-top: 12px; gap: 8px; align-items: center; }
|
||||
.cpg-calc-sum { margin-top: 16px; }
|
||||
|
||||
/* ── 박스 계산 요약 ─────────────────────────────── */
|
||||
.cpg-sum-h3 {
|
||||
margin: 20px 0 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.cpg-sum-h3 .erp-muted { font-weight: 400; font-size: 13px; }
|
||||
|
||||
.cpg-sum-kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.cpg-kpi {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--color-subtle-ash);
|
||||
border-radius: 10px;
|
||||
background: var(--color-ghost-gray);
|
||||
}
|
||||
.cpg-kpi-label { font-size: 12px; color: var(--color-midtone-gray); }
|
||||
.cpg-kpi-value { font-size: 24px; line-height: 1.2; }
|
||||
.cpg-kpi-hint { font-size: 12px; color: var(--color-midtone-gray); }
|
||||
|
||||
.cpg-sum-prods {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.cpg-sum-prod {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--color-subtle-ash);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.cpg-sum-prod-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.cpg-sum-prod-name { font-weight: 600; }
|
||||
.cpg-sum-prod-nums {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 13px;
|
||||
}
|
||||
.cpg-sum-prod-nums strong { font-size: 17px; }
|
||||
.cpg-sum-left { color: var(--color-callout-red); font-weight: 600; }
|
||||
.cpg-sum-exact { color: var(--color-success-green); font-weight: 600; }
|
||||
|
||||
/* 혼합 박스 카드 */
|
||||
.cpg-sum-boxes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.cpg-box-card {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--color-subtle-ash);
|
||||
border-radius: 12px;
|
||||
background: var(--color-canvas-white);
|
||||
opacity: 0;
|
||||
animation: cpg-box-in .38s ease-out forwards;
|
||||
}
|
||||
@keyframes cpg-box-in {
|
||||
from { opacity: 0; transform: translateY(10px) scale(.96); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
.cpg-box-art { flex: 0 0 auto; }
|
||||
.cpg-box-svg { width: 72px; height: 64px; }
|
||||
.cpg-box-body {
|
||||
fill: #f6e2c3;
|
||||
stroke: #b98a4a;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.cpg-box-flapL, .cpg-box-flapR {
|
||||
fill: #e8cfa6;
|
||||
stroke: #b98a4a;
|
||||
stroke-width: 2;
|
||||
transform-origin: 36px 20px;
|
||||
animation: cpg-flap .5s ease-out both;
|
||||
}
|
||||
.cpg-box-flapL { animation-delay: .12s; }
|
||||
.cpg-box-flapR { animation-delay: .2s; }
|
||||
@keyframes cpg-flap {
|
||||
from { transform: rotate(0deg) translateY(6px); opacity: .3; }
|
||||
to { transform: none; opacity: 1; }
|
||||
}
|
||||
.cpg-box-fill {
|
||||
fill: var(--color-rich-black);
|
||||
opacity: .16;
|
||||
animation: cpg-fill-up .55s ease-out both;
|
||||
transform-origin: 36px 54px;
|
||||
}
|
||||
@keyframes cpg-fill-up {
|
||||
from { transform: scaleY(0); }
|
||||
to { transform: scaleY(1); }
|
||||
}
|
||||
.cpg-box-seam { stroke: #b98a4a; stroke-width: 1.5; opacity: .5; }
|
||||
|
||||
.cpg-box-info { min-width: 0; flex: 1 1 auto; }
|
||||
.cpg-box-title { font-weight: 700; margin-bottom: 6px; }
|
||||
.cpg-box-items {
|
||||
list-style: none;
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.cpg-box-items li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 2px 0;
|
||||
border-bottom: 1px dashed var(--color-subtle-ash);
|
||||
}
|
||||
.cpg-box-items li:last-child { border-bottom: 0; }
|
||||
.cpg-box-bar {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: var(--color-ghost-gray);
|
||||
overflow: hidden;
|
||||
}
|
||||
.cpg-box-bar span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: var(--color-rich-black);
|
||||
animation: cpg-bar-grow .6s ease-out both;
|
||||
transform-origin: left center;
|
||||
}
|
||||
@keyframes cpg-bar-grow {
|
||||
from { transform: scaleX(0); }
|
||||
to { transform: scaleX(1); }
|
||||
}
|
||||
.cpg-box-fillnum {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--color-midtone-gray);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.cpg-box-card, .cpg-box-fill, .cpg-box-flapL, .cpg-box-flapR, .cpg-box-bar span {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
}
|
||||
.cpg-box-fill { opacity: .16; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user