09연쇄 체크 마커 — 지연 값을 누적해 체크가 연쇄 터지는 방식

<main class="stage">
<div class="wrap is-demo" id="wrap">
  <ul class="done-list" id="list">
    <li style="--i:0">계약서 확인</li>
    <li style="--i:1">결제 정보 등록</li>
    <li style="--i:2">배송지 입력</li>
    <li style="--i:3">최종 제출</li>
  </ul>
  <button class="submit" id="submit" type="button">전체 제출</button>
</div>
</main>

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

// 계산 겹은 index.html 의 지연 누적(i * DELAY_STEP_MS) 에 있다 — CSS 변수 --delay 로 넘어와
// animation-delay 에 그대로 꽂힌다(자바스크립트는 트리거만, 연쇄 타이밍은 CSS 가 계산).
// ::marker 는 두 개의 막대(::before·::after)를 동시에 가질 수 없어 체크 모양을 못 만든다 — list-style:none 으로
// 지우고 li 자체에 두 pseudo 로 체크를 그린다(BD16: 같은 꼭짓점에서 출발).
@include stage($stage-ink);

.done-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: $sp-3;
  width: 230px;
}

.done-list li {
  position: relative;
  padding-left: 32px;
  min-height: 22px;
  display: flex;
  align-items: center;
  color: $subject-cream;
  font-size: 12px;
}

.done-list li::before,
.done-list li::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  height: 3px;
  border-radius: $r-pill;
  background: $subject-mint;
  transform-origin: left center;
  opacity: 0;
}

.done-list li::before {
  width: 7px;
  transform: scale(0) rotate(225deg);
}

.done-list li::after {
  width: 13px;
  transform: scale(0) rotate(-52deg);
}

.done-list.is-bursting li::before {
  animation: burstBefore $dur-base $ease-pop both;
  animation-delay: var(--delay, 0ms);
}

.done-list.is-bursting li::after {
  animation: burstAfter $dur-base $ease-pop both;
  animation-delay: var(--delay, 0ms);
}

@keyframes burstBefore {
  0% { opacity: 0; transform: scale(0) rotate(225deg); }
  55% { opacity: 1; transform: scale(1.3) rotate(225deg); }
  100% { opacity: 1; transform: scale(1) rotate(225deg); }
}

@keyframes burstAfter {
  0% { opacity: 0; transform: scale(0) rotate(-52deg); }
  55% { opacity: 1; transform: scale(1.3) rotate(-52deg); }
  100% { opacity: 1; transform: scale(1) rotate(-52deg); }
}

.submit {
  appearance: none;
  border: none;
  margin-top: $sp-4;
  padding: $sp-2 $sp-4;
  border-radius: $r-control;
  background: $subject-blue;
  color: $subject-cream;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform $dur-instant $ease-out;

  &:hover { transform: translateY(-1px); }
  &:active { transform: scale(.96); }
  &:focus-visible { outline: 2px solid $subject-blue-light; outline-offset: 2px; }
}

@media (max-width: 340px) {
  .done-list { width: 190px; }
  .done-list li { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .done-list.is-bursting li::before,
  .done-list.is-bursting li::after { animation: none; opacity: 1; }
  .done-list.is-bursting li::before { transform: scale(1) rotate(225deg); }
  .done-list.is-bursting li::after { transform: scale(1) rotate(-52deg); }
  .submit { transition: none; }
}

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

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

.done-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 230px;
}

.done-list li {
  position: relative;
  padding-left: 32px;
  min-height: 22px;
  display: flex;
  align-items: center;
  color: #fff7e6;
  font-size: 12px;
}

.done-list li::before,
.done-list li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  height: 3px;
  border-radius: 999px;
  background: #4cd4a6;
  transform-origin: left center;
  opacity: 0;
}

.done-list li::before {
  width: 7px;
  transform: scale(0) rotate(225deg);
}

.done-list li::after {
  width: 13px;
  transform: scale(0) rotate(-52deg);
}

.done-list.is-bursting li::before {
  animation: burstBefore 300ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: var(--delay, 0ms);
}

.done-list.is-bursting li::after {
  animation: burstAfter 300ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: var(--delay, 0ms);
}

@keyframes burstBefore {
  0% {
    opacity: 0;
    transform: scale(0) rotate(225deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.3) rotate(225deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(225deg);
  }
}
@keyframes burstAfter {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-52deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.3) rotate(-52deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-52deg);
  }
}
.submit {
  appearance: none;
  border: none;
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 12px;
  background: #2f6df6;
  color: #fff7e6;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 140ms ease-out;
}
.submit:hover {
  transform: translateY(-1px);
}
.submit:active {
  transform: scale(0.96);
}
.submit:focus-visible {
  outline: 2px solid #5b8cf8;
  outline-offset: 2px;
}

@media (max-width: 340px) {
  .done-list {
    width: 190px;
  }
  .done-list li {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .done-list.is-bursting li::before,
  .done-list.is-bursting li::after {
    animation: none;
    opacity: 1;
  }
  .done-list.is-bursting li::before {
    transform: scale(1) rotate(225deg);
  }
  .done-list.is-bursting li::after {
    transform: scale(1) rotate(-52deg);
  }
  .submit {
    transition: none;
  }
}

(function () {
  var DELAY_STEP_MS = 110; // 항목 사이 누적 지연 — 값이 커질수록 파동이 느리게 번진다
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var wrap = document.getElementById('wrap');
  var list = document.getElementById('list');
  var items = Array.prototype.slice.call(list.querySelectorAll('li'));
  var button = document.getElementById('submit');
  var isDemo = true;

  // 계산 겹: 항목 i 가 터지는 시각은 지연 값을 i 번 누적한 값(i * DELAY_STEP_MS)이다 — CSS 변수로 실어
  // animation-delay 에 그대로 쓴다. 자바스크립트는 트리거 한 번(클래스 토글)만 하고 연쇄는 CSS 가 계산한다.
  items.forEach(function (li, i) {
    li.style.setProperty('--delay', (i * DELAY_STEP_MS) + 'ms');
  });

  function human() { if (isDemo) { wrap.classList.remove('is-demo'); isDemo = false; } }

  function burst() {
    list.classList.remove('is-bursting');
    // reflow 를 강제해 같은 클래스를 다시 걸어도 애니메이션이 재시작되게 한다
    void list.offsetWidth;
    list.classList.add('is-bursting');
  }

  button.addEventListener('click', function () { human(); burst(); });

  var last = 0;
  var CYCLE_MS = 950;
  function loop(ts) {
    if (!last) { last = ts; if (isDemo && !reduce) burst(); }
    if (isDemo) {
      if (reduce) {
        list.classList.add('is-bursting'); // 계산은 유지, 시간 축소 대신 완료 상태로 즉시 고정
      } else if (ts - last >= CYCLE_MS) {
        last = ts;
        burst();
      }
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
})();

// CheckBurstMarker — vanilla 판(run/373/demo/09-list-style-check-burst-stagger/index.html) 의 React 포트.
// ::marker 는 animation·자식 막대를 지원하지 않아 체크가 터지는 마커를 그릴 수 없다 — list-style:none 으로 지우고
// ::before·::after 막대 체크를 얹되, 항목마다 지연 값(i * DELAY_STEP_MS)을 누적해 연쇄 터진다.
import { useEffect, useRef } from "react";
import styles from "./CheckBurstMarker.module.scss";

type Box<T> = { current: T };

const DELAY_STEP_MS = 110; // 항목 사이 누적 지연 — 값이 커질수록 파동이 느리게 번진다
const CYCLE_MS = 950; // 자동 루프에서 연쇄를 다시 터뜨리는 주기

const STEPS = ["계약서 확인", "결제 정보 등록", "배송지 입력", "최종 제출"];

export default function CheckBurstMarker() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const listRef = useRef(null) as unknown as Box<HTMLUListElement>;
  const rafRef = useRef(0) as unknown as Box<number>;

  useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    const root = rootRef.current;
    const list = listRef.current;
    if (!root || !list) return;

    const items = Array.prototype.slice.call(list.querySelectorAll("li"));
    let isDemo = true;

    // 계산 겹: 항목 i 가 터지는 시각은 지연 값을 i 번 누적한 값(i * DELAY_STEP_MS)이다 — CSS 변수로 실어
    // animation-delay 에 그대로 쓴다. 자바스크립트는 트리거 한 번(클래스 토글)만 하고 연쇄는 CSS 가 계산한다.
    items.forEach(function (li: HTMLElement, i: number) {
      li.style.setProperty("--delay", (i * DELAY_STEP_MS) + "ms");
    });

    function human() { if (isDemo) { root!.classList.remove(styles.isDemo); isDemo = false; } }

    function burst() {
      list!.classList.remove("is-bursting");
      // reflow 를 강제해 같은 클래스를 다시 걸어도 애니메이션이 재시작되게 한다
      void list!.offsetWidth;
      list!.classList.add("is-bursting");
    }

    function onClick() { human(); burst(); }
    root!.addEventListener("click", onClick);

    let last = 0;
    function loop(ts: number) {
      if (!last) { last = ts; if (isDemo && !reduce) burst(); }
      if (isDemo) {
        if (reduce) {
          list!.classList.add("is-bursting"); // 계산은 유지, 시간 축소 대신 완료 상태로 즉시 고정
        } else if (ts - last >= CYCLE_MS) {
          last = ts;
          burst();
        }
      }
      rafRef.current = requestAnimationFrame(loop);
    }
    rafRef.current = requestAnimationFrame(loop);

    return () => {
      root!.removeEventListener("click", onClick);
      cancelAnimationFrame(rafRef.current);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={styles.wrap + " " + styles.isDemo} ref={rootRef}>
        <ul className={styles.doneList} ref={listRef}>
          {STEPS.map(function (s, i) { return <li key={s} style={{ ["--i" as string]: String(i) } as Record<string, string>}>{s}</li>; })}
        </ul>
        <button className={styles.submit} type="button">전체 제출</button>
      </div>
    </main>
  );
}