fix(cupang): 도장은 또렷하게, 애니메이션은 방금 완료된 것만

- 혼합 박스 도장이 흐리게 보이던 원인: 부모(.cpg-box-title)에 opacity 를
  주면 자식 도장까지 함께 흐려진다 → 제목은 색만 낮추고 도장은 opacity 1.
- 렌더할 때마다 모든 도장에 애니메이션이 다시 걸리던 문제: 이미 찍힌
  항목을 stamped 로 기억해 새로 완료된 도장(.is-new)에만 애니메이션.
  잔여가 다시 생기거나 재계산하면 기록을 지워 다음 완료 때 다시 찍힌다.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-29 03:55:35 +09:00
parent 2779a6285d
commit 2d84a20814
9 changed files with 34 additions and 16 deletions
+4 -3
View File
@@ -748,8 +748,8 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
opacity: .85;
transform: rotate(-7deg);
box-shadow: inset 0 0 0 1px rgba(29, 95, 208, .25);
animation: cpg-stamp-in .22s ease-out;
}
.cpg-stamp.is-new { animation: cpg-stamp-in .22s ease-out; }
@keyframes cpg-stamp-in {
from { opacity: 0; transform: rotate(-7deg) scale(1.6); }
to { opacity: .85; transform: rotate(-7deg) scale(1); }
@@ -758,12 +758,13 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
/* 배분이 끝난 카드는 흐리게 — 글자·상자 아이콘 모두 */
.cpg-sum-prod.is-done, .cpg-box-card.is-done { opacity: 1; }
.cpg-sum-prod.is-done .cpg-sum-prod-name,
.cpg-box-card.is-done .cpg-box-title { color: var(--color-midtone-gray); }
.cpg-sum-prod.is-done .cpg-sum-prod-nums,
.cpg-box-card.is-done .cpg-box-title,
.cpg-box-card.is-done .cpg-box-items,
.cpg-box-card.is-done .cpg-box-fillnum { color: var(--color-midtone-gray); opacity: .6; }
.cpg-sum-prod.is-done .cpg-sum-prod-nums strong,
.cpg-box-card.is-done .cpg-box-items b { color: var(--color-midtone-gray); }
.cpg-box-card.is-done .cpg-box-svg { filter: grayscale(1); opacity: .45; }
.cpg-box-card.is-done .cpg-box-bar { opacity: .4; }
.cpg-sum-prod.is-done .cpg-stamp, .cpg-box-card.is-done .cpg-stamp { opacity: .85; }
/* 도장은 카드가 흐려져도 또렷하게 유지 */
.cpg-sum-prod.is-done .cpg-stamp, .cpg-box-card.is-done .cpg-stamp { opacity: 1; }