king/dbx-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(cupang): 혼합 박스 그림에 박스 호수 표시

Browse Source 
상자 SVG 안에 "2호"처럼 호수만 넣는다("쿠팡 " 접두어 제거).
채움 색 위에서도 읽히도록 흰색 외곽선(paint-order: stroke)을 준다.
aria-label 도 "2호 박스"로 바꿔 스크린리더에서 구분 가능하게 함.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-08-28 13:41:33 +09:00
parent c36ba70a16
commit 07f71d1df0
8 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/modules/cupang/templates/cupang/box_calc.html
+11 -5
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828y" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828z" />{% endblock %}
{% block content %}
<section class="cpg">
@@ -190,17 +190,23 @@
// ── 요약 렌더 ─────────────────────────────────────────
// 상자 그림: fill(0~100) 만큼 안쪽이 차오르고, 뚜껑이 살짝 열린 채 표시.
function boxSvg(fill) {
function boxSvg(fill, label) {
var f = Math.max(0, Math.min(100, fill || 0));
var h = 40 * f / 100;
return '' +
'<svg class="cpg-box-svg" viewBox="0 0 72 64" aria-hidden="true">' +
'<svg class="cpg-box-svg" viewBox="0 0 72 64" role="img" aria-label="' + esc(label) + ' 박스">' +
'<rect class="cpg-box-fill" x="10" y="' + (54 - h) + '" width="52" height="' + h + '" rx="2" />' +
'<path class="cpg-box-body" d="M10 20 H62 V54 H10 Z" />' +
'<path class="cpg-box-flapL" d="M10 20 L2 8 H30 L36 20 Z" />' +
'<path class="cpg-box-flapR" d="M62 20 L70 8 H42 L36 20 Z" />' +
'<line class="cpg-box-seam" x1="36" y1="20" x2="36" y2="54" />' +
'</svg>';
'<text class="cpg-box-label" x="36" y="42" text-anchor="middle">' + esc(label) + "</text>" +
"</svg>";
}
// "쿠팡 2호" → "2호" (상자 그림 안에 넣을 짧은 이름)
function shortBoxName(name) {
return String(name || "").replace(/^쿠팡\s*/, "").trim() || "박스";
}
function renderSummary(results, mixes, grandTotal) {
@@ -248,7 +254,7 @@
return '<li><span>' + esc(it.product_name) + "</span><b>" + it.quantity + "개</b></li>";
}).join("");
bh += '<div class="cpg-box-card" style="animation-delay:' + (n * 70) + 'ms">' +
'<div class="cpg-box-art">' + boxSvg(b.fill_percent) + "</div>" +
'<div class="cpg-box-art">' + boxSvg(b.fill_percent, shortBoxName(m.box_name)) + "</div>" +
'<div class="cpg-box-info">' +
'<div class="cpg-box-title">' + esc(m.box_name) + " 혼합 #" + (i + 1) + "</div>" +
'<ul class="cpg-box-items">' + items + "</ul>" +
app/modules/cupang/templates/cupang/box_rules.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828y" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828z" />{% endblock %}
{% block content %}
<section class="cpg">
app/modules/cupang/templates/cupang/centers.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828y" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828z" />{% endblock %}
{% block content %}
<section class="cpg">
app/modules/cupang/templates/cupang/detail.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828y" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828z" />{% endblock %}
{% block content %}
<section class="cpg">
app/modules/cupang/templates/cupang/form.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828y" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828z" />{% endblock %}
{% block content %}
<section class="cpg">
app/modules/cupang/templates/cupang/index.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828y" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828z" />{% endblock %}
{% block content %}
<section class="cpg">
app/modules/cupang/templates/cupang/products.html
+1 -1
View File
@@ -1,6 +1,6 @@
{% extends "erp_base.html" %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828y" />{% endblock %}
{% block head_extra %}<link rel="stylesheet" href="/static/cupang.css?v=20260828z" />{% endblock %}
{% block content %}
<section class="cpg">
app/static/cupang.css
+12
View File
@@ -561,3 +561,15 @@
}
.cpg-prod-manual-row .erp-field { flex: 1 1 160px; min-width: 0; }
.cpg-prod-manual-row .erp-input { min-width: 0; width: 100%; }
/* 상자 그림 안 박스 호수 라벨 (예: 2호) */
.cpg-box-label {
font-family: inherit;
font-size: 15px;
font-weight: 700;
fill: #8a5a1e;
paint-order: stroke;
stroke: rgba(255, 255, 255, .85);
stroke-width: 3px;
stroke-linejoin: round;
}