04Quantity that springs back when it passes the stock limit

<main class="stage">
  <section class="cs is-demo" id="cs" aria-label="Quantity capped by stock">
    <p class="cs__kicker">Cart</p>
    <div class="cs__band">
      <!-- 경고 띠: 줄 위로 내려와 남은 개수를 말한다. role="alert" 라서 읽어주는 기계도 바로 말한다 -->
      <p class="cs__strip" id="csStrip" role="alert">
        <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z" opacity="0.2"/><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>
        <span>Only 4 left</span>
      </p>
      <div class="cs__row">
        <span class="cs__thumb" aria-hidden="true"></span>
        <span class="cs__info">
          <b class="cs__name">Winter knit, ivory</b>
          <span class="cs__price">64,000 KRW</span>
        </span>
      </div>
    </div>
    <div class="cs__qty">
      <span class="cs__left">4 in stock</span>
      <span class="cs__step">
        <button class="cs__btn" type="button" id="csMinus" aria-label="Decrease quantity">−</button>
        <span class="cs__num" id="csNum">
          <input class="cs__input" id="csInput" type="number" inputmode="numeric" value="4" min="1" max="4" aria-label="Quantity">
          <!-- 미리보기 전용: 재고를 넘겨 넣은 값. 손으로 쓰는 정적 상태에서는 투명하게 비켜 있고 자리만 지킨다 -->
          <b class="cs__over" id="csOver" aria-hidden="true">6</b>
        </span>
        <button class="cs__btn" type="button" id="csPlus" aria-label="Increase quantity">+</button>
      </span>
    </div>
  </section>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 재고 한도에 걸린 수량 — 남은 재고보다 큰 수는 최대치로 한 번 되튕기고, 줄 위로 경고 띠가 내려온다.
// $easing 은 오버슛이 있는 이징($ease-pop) — 되튕김이 제자리를 한 번 지나쳤다 돌아온다
$duration: $dur-loop;
$easing: $ease-pop;
$color: $error;

@include stage($stage-orange);

.cs {
  box-sizing: border-box;
  width: min(300px, 92vw);
  padding: $sp-3;
  border-radius: $r-card;
  background: $subject-cream;
  color: $subject-ink;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.cs * { box-sizing: border-box; }

.cs__kicker {
  margin: 0 0 $sp-2;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  color: rgba($subject-ink, .72);
}

// 띠가 물러난 자리를 잘라 두는 상자 — 띠는 이 상자 위쪽 밖에 숨어 있다.
// 위쪽 24px 은 띠가 내려와 설 자리다. 상품 줄을 덮어 버리면 무엇을 담았는지가 대표 이미지에서 사라진다
.cs__band {
  position: relative;
  overflow: hidden;
  padding-top: $sp-6;
  border-radius: $r-sm;
}

.cs__row {
  display: flex;
  align-items: center;
  gap: $sp-2;
  padding: $sp-2;
  border-radius: $r-sm;
  background: rgba($subject-ink, .05);
}
.cs__thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: $r-xs;
  background: rgba($subject-ink, .16);
}
.cs__info {
  display: grid;
  gap: $sp-1;
  min-width: 0;
}
.cs__name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs__price {
  font-size: 11px;
  line-height: 1.2;
  color: rgba($subject-ink, .62);
}

.cs__strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: $sp-2;
  height: 24px;
  margin: 0;
  padding: 0 $sp-2;
  border-radius: $r-xs;
  background: $color;
  color: $subject-cream;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  // 정적(실제 사용) 경로 — JS 가 .is-over 를 켜면 내려오고, 잠시 뒤 스스로 올라간다
  transform: translateY(-110%);
  transition: transform $dur-quick $easing;
}
.cs.is-over .cs__strip { transform: translateY(0); }
.cs__strip svg { flex: 0 0 auto; width: 16px; height: 16px; }

.cs__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $sp-2;
  margin-top: $sp-3;
}
.cs__left {
  font-size: 11px;
  line-height: 1.3;
  color: rgba($subject-ink, .62);
}
.cs__step {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid rgba($subject-ink, .2);
  border-radius: $r-control;
  background: $stage-paper;
}
// 한도 초과 테두리 — 모양은 그대로 두고 opacity 만 켠다 (레이아웃을 다시 계산하지 않는다)
.cs__step::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid $color;
  border-radius: $r-control;
  opacity: 0;
  pointer-events: none;
  transition: opacity $dur-instant linear;
}
.cs.is-over .cs__step::after { opacity: 1; }

.cs__btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: $r-control;
  background: transparent;
  color: $subject-ink;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.cs__btn:focus-visible { outline: 2px solid $subject-blue; outline-offset: 2px; }

.cs__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 28px;
}
.cs__input {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: $subject-ink;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  appearance: textfield;
}
.cs__input::-webkit-outer-spin-button,
.cs__input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.cs__input:focus-visible { outline: 2px solid $subject-blue; outline-offset: 2px; }

// 미리보기에서만 쓰는 「넣어 본 값」 — 입력칸을 덮어 가린다. 정적 경로에서는 투명해 자리만 지킨다
.cs__over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: $stage-paper;
  color: $color;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}

// ── 격자 미리보기 루프 ──────────────────────────────────────
// 띠는 한 프레임에 내려오고(그 장이 최대 변화 = 대표 이미지), 물러남은 네 프레임에 걸쳐 천천히 —
// 그래야 퇴장 장면이 등장 장면을 이기지 않는다. 복귀는 89% 에 끝난다
@keyframes cs-strip {
  0%, 20% { transform: translateY(-110%); }
  25%, 71% { transform: translateY(0); }
  89%, 100% { transform: translateY(-110%); }
}
// 넣어 본 6 → 최대치 4 는 한 프레임 컷. 크로스페이드를 쓰면 두 숫자가 반투명하게 겹친다
@keyframes cs-over {
  0%, 20% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
// 되튕김 — 최대치로 돌아오며 제자리를 한 번 지나친다 (오버슛 이징)
@keyframes cs-bounce {
  0%, 25% { transform: translateY(0) scale(1); }
  29% { transform: translateY(-10px) scale(1.16); }
  40%, 100% { transform: translateY(0) scale(1); }
}
@keyframes cs-warn {
  0%, 20% { opacity: 0; }
  25%, 71% { opacity: 1; }
  89%, 100% { opacity: 0; }
}
.cs.is-demo {
  .cs__strip {
    animation-name: cs-strip;
    animation-duration: $duration;
    animation-timing-function: $ease-out;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
  }
  .cs__over {
    animation-name: cs-over;
    animation-duration: $duration;
    animation-timing-function: steps(1, end);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
  }
  .cs__num {
    animation-name: cs-bounce;
    animation-duration: $duration;
    animation-timing-function: $easing;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
  }
  .cs__step::after {
    animation-name: cs-warn;
    animation-duration: $duration;
    animation-timing-function: steps(1, end);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
  }
}

@media (max-width: 340px) {
  .cs { padding: $sp-2; }
  .cs__kicker { font-size: 10px; }
  .cs__thumb { width: 32px; height: 32px; }
  .cs__name { font-size: 11px; }
  .cs__price { font-size: 10px; }
  .cs__band { padding-top: $sp-5; }
  .cs__strip { height: 20px; font-size: 10px; }
  .cs__strip svg { width: 14px; height: 14px; }
  .cs__qty { margin-top: $sp-2; }
}

@media (prefers-reduced-motion: reduce) {
  // 움직임만 뺀다 — 한도에 걸린 결과(띠·붉은 테두리·최대치 숫자)는 그대로 보인다
  .cs.is-demo .cs__strip { animation: none !important; transform: translateY(0) !important; }
  .cs.is-demo .cs__over { animation: none !important; opacity: 0 !important; }
  .cs.is-demo .cs__num { animation: none !important; transform: none !important; }
  .cs.is-demo .cs__step::after { animation: none !important; opacity: 1 !important; }
  .cs__strip { transition: none !important; }
  .cs__step::after { transition: none !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.cs {
  box-sizing: border-box;
  width: min(300px, 92vw);
  padding: 12px;
  border-radius: 16px;
  background: #fff7e6;
  color: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.cs * {
  box-sizing: border-box;
}

.cs__kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: rgba(23, 20, 26, 0.72);
}

.cs__band {
  position: relative;
  overflow: hidden;
  padding-top: 24px;
  border-radius: 8px;
}

.cs__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(23, 20, 26, 0.05);
}

.cs__thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: rgba(23, 20, 26, 0.16);
}

.cs__info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cs__name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs__price {
  font-size: 11px;
  line-height: 1.2;
  color: rgba(23, 20, 26, 0.62);
}

.cs__strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  margin: 0;
  padding: 0 8px;
  border-radius: 4px;
  background: #c2361a;
  color: #fff7e6;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  transform: translateY(-110%);
  transition: transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.cs.is-over .cs__strip {
  transform: translateY(0);
}

.cs__strip svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.cs__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.cs__left {
  font-size: 11px;
  line-height: 1.3;
  color: rgba(23, 20, 26, 0.62);
}

.cs__step {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid rgba(23, 20, 26, 0.2);
  border-radius: 12px;
  background: #ffffff;
}

.cs__step::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid #c2361a;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms linear;
}

.cs.is-over .cs__step::after {
  opacity: 1;
}

.cs__btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #17141a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.cs__btn:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 2px;
}

.cs__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 28px;
}

.cs__input {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #17141a;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  appearance: textfield;
}

.cs__input::-webkit-outer-spin-button,
.cs__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.cs__input:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 2px;
}

.cs__over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: #c2361a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}

@keyframes cs-strip {
  0%, 20% {
    transform: translateY(-110%);
  }
  25%, 71% {
    transform: translateY(0);
  }
  89%, 100% {
    transform: translateY(-110%);
  }
}
@keyframes cs-over {
  0%, 20% {
    opacity: 1;
  }
  25%, 100% {
    opacity: 0;
  }
}
@keyframes cs-bounce {
  0%, 25% {
    transform: translateY(0) scale(1);
  }
  29% {
    transform: translateY(-10px) scale(1.16);
  }
  40%, 100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes cs-warn {
  0%, 20% {
    opacity: 0;
  }
  25%, 71% {
    opacity: 1;
  }
  89%, 100% {
    opacity: 0;
  }
}
.cs.is-demo .cs__strip {
  animation-name: cs-strip;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.cs.is-demo .cs__over {
  animation-name: cs-over;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.cs.is-demo .cs__num {
  animation-name: cs-bounce;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.cs.is-demo .cs__step::after {
  animation-name: cs-warn;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@media (max-width: 340px) {
  .cs {
    padding: 8px;
  }
  .cs__kicker {
    font-size: 10px;
  }
  .cs__thumb {
    width: 32px;
    height: 32px;
  }
  .cs__name {
    font-size: 11px;
  }
  .cs__price {
    font-size: 10px;
  }
  .cs__band {
    padding-top: 20px;
  }
  .cs__strip {
    height: 20px;
    font-size: 10px;
  }
  .cs__strip svg {
    width: 14px;
    height: 14px;
  }
  .cs__qty {
    margin-top: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cs.is-demo .cs__strip {
    animation: none !important;
    transform: translateY(0) !important;
  }
  .cs.is-demo .cs__over {
    animation: none !important;
    opacity: 0 !important;
  }
  .cs.is-demo .cs__num {
    animation: none !important;
    transform: none !important;
  }
  .cs.is-demo .cs__step::after {
    animation: none !important;
    opacity: 1 !important;
  }
  .cs__strip {
    transition: none !important;
  }
  .cs__step::after {
    transition: none !important;
  }
}

// 재고 한도 Quantity — 재고보다 큰 수는 최대치로 되돌리고 경고 띠를 잠시 내린다
var cs = document.getElementById('cs');
var input = document.getElementById('csInput');
var stock = 4;
var backTimer = 0;

function clampQty(wanted) {
  cs.classList.remove('is-demo');               // 사람이 손대면 미리보기 루프는 끝난다
  var over = wanted > stock;
  input.value = String(Math.max(1, Math.min(stock, wanted)));
  cs.classList.toggle('is-over', over);
  if (over) {
    clearTimeout(backTimer);
    backTimer = setTimeout(function () { cs.classList.remove('is-over'); }, 1600);
  }
}

document.getElementById('csPlus').addEventListener('click', function () {
  clampQty(Number(input.value) + 1);
});
document.getElementById('csMinus').addEventListener('click', function () {
  clampQty(Number(input.value) - 1);
});
input.addEventListener('input', function () {
  if (input.value === '') { return; }            // 지우는 중에는 되튕기지 않는다
  clampQty(Number(input.value));
});

import { useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./CartStockLimitClamp.module.scss";

export type CartStockLimitClampProps = {
  kicker?: string;
  productName?: string;
  price?: string;
  stockLeft?: string;
  warning?: string;
  qtyLabel?: string;
  minusLabel?: string;
  plusLabel?: string;
  groupLabel?: string;
  /** 남은 재고 — 이 수를 넘는 입력은 최대치로 되튕긴다 */
  stock?: number;
  /** 격자 미리보기용 2초 자동 루프. 사람이 손대면 꺼진다 */
  demo?: boolean;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
// ambient 가 얇아 DOM 요소·이벤트 타입을 못 쓴다 — 필요한 꼴만 로컬 타입으로 선언
type InputChange = { target: { value: string } };
type TimerBox = { current: number | null };

function WarningIcon() {
  return (
    <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z" opacity="0.2"/><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>
  );
}

export default function CartStockLimitClamp({
  kicker = "장바구니",
  productName = "겨울 니트 아이보리",
  price = "64,000원",
  stockLeft = "재고 4개",
  warning = "남은 수량 4개",
  qtyLabel = "수량",
  minusLabel = "수량 줄이기",
  plusLabel = "수량 늘리기",
  groupLabel = "재고 한도 수량 입력",
  stock = 4,
  demo = true,
  duration = 2000,
  easing = "cubic-bezier(.2,1.4,.4,1)",
  color = "#c2361a",
}: CartStockLimitClampProps) {
  const [qty, setQty] = useState(stock);
  const [over, setOver] = useState(false);
  const [live, setLive] = useState(demo);
  const timer: TimerBox = useRef<number>(0);

  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  // 재고보다 큰 수는 최대치로 되돌리고 경고 띠를 잠시 내린다
  function clampQty(wanted: number) {
    setLive(false);
    const tooMany = wanted > stock;
    setQty(Math.max(1, Math.min(stock, wanted)));
    setOver(tooMany);
    if (timer.current) clearTimeout(timer.current);
    if (tooMany) timer.current = setTimeout(() => setOver(false), 1600);
  }

  function onType(e: InputChange) {
    if (e.target.value === "") return;          // 지우는 중에는 되튕기지 않는다
    clampQty(Number(e.target.value));
  }

  const cls = [styles.cs, live ? styles.isDemo : "", over ? styles.isOver : ""].filter(Boolean).join(" ");

  return (
    <section className={cls} style={vars} aria-label={groupLabel}>
      <p className={styles.kicker}>{kicker}</p>
      <div className={styles.band}>
        {/* 경고 띠: 줄 위로 내려와 남은 개수를 말한다 */}
        <p className={styles.strip} role="alert">
          <WarningIcon />
          <span>{warning}</span>
        </p>
        <div className={styles.row}>
          <span className={styles.thumb} aria-hidden="true"></span>
          <span className={styles.info}>
            <b className={styles.name}>{productName}</b>
            <span className={styles.price}>{price}</span>
          </span>
        </div>
      </div>
      <div className={styles.qty}>
        <span className={styles.left}>{stockLeft}</span>
        <span className={styles.step}>
          <button className={styles.btn} type="button" onClick={() => clampQty(qty - 1)} aria-label={minusLabel}>−</button>
          <span className={styles.num}>
            <input
              className={styles.input}
              type="number"
              inputMode="numeric"
              value={qty}
              min={1}
              max={stock}
              onChange={onType}
              aria-label={qtyLabel}
            />
            {/* 미리보기 전용: 재고를 넘겨 넣은 값. 손으로 쓰는 정적 상태에서는 투명하게 비켜 있고 자리만 지킨다 */}
            <b className={styles.over} aria-hidden="true">{stock + 2}</b>
          </span>
          <button className={styles.btn} type="button" onClick={() => clampQty(qty + 1)} aria-label={plusLabel}>+</button>
        </span>
      </div>
    </section>
  );
}