04行進ダッシュマーカー — オフセットの値を流し、ダッシュが行進する方式

<main class="stage">
<div class="wrap is-demo" id="wrap">
  <ul class="queue-list" id="list">
    <li>動画エンコード待ち</li>
    <li>サムネイル生成待ち</li>
    <li>字幕整列待ち</li>
  </ul>
  <button class="toggle" id="toggle" type="button" aria-pressed="false">行進を止める</button>
</div>
</main>

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

// 계산 겹은 index.html 의 시간 적분(acc += dt/1000 * MARCH_RATE_DEG_S) 에 있다 — 여기는 대시 링·판만 맡는다.
// ::marker 는 border-style:dashed 를 표현할 수 없어(마커 콘텐츠 상자일 뿐) list-style:none 으로 지우고
// 실제 span(.ring) 을 마커 자리에 넣어 점선 테두리를 회전시킨다.
@include stage($stage-ink);

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

.queue-list li {
  display: flex;
  align-items: center;
  gap: $sp-3;
  color: $subject-cream;
  font-size: 12px;
}

.ring {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px dashed $subject-blue-light;
  transform: rotate(var(--offset, 0deg));
}

.toggle {
  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) {
  .queue-list { width: 190px; }
  .queue-list li { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .toggle { 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);
}

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

.queue-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff7e6;
  font-size: 12px;
}

.ring {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px dashed #5b8cf8;
  transform: rotate(var(--offset, 0deg));
}

.toggle {
  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;
}
.toggle:hover {
  transform: translateY(-1px);
}
.toggle:active {
  transform: scale(0.96);
}
.toggle:focus-visible {
  outline: 2px solid #5b8cf8;
  outline-offset: 2px;
}

@media (max-width: 340px) {
  .queue-list {
    width: 190px;
  }
  .queue-list li {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .toggle {
    transition: none;
  }
}

(function () {
  var MARCH_RATE_DEG_S = 140; // 초당 회전 각도 — 대시가 흐르는 속도
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var wrap = document.getElementById('wrap');
  var list = document.getElementById('list');
  var markers = Array.prototype.slice.call(list.querySelectorAll('li')).map(function (li) {
    var m = document.createElement('span');
    m.className = 'ring';
    m.setAttribute('aria-hidden', 'true');
    li.insertBefore(m, li.firstChild);
    return m;
  });
  var button = document.getElementById('toggle');
  var isDemo = true;
  var running = true;

  // 계산 겹: 오프셋 각도는 시간에 정속(MARCH_RATE_DEG_S)으로 누적된다. 대시 테두리를 이 각도만큼 계속
  // 회전시키면 점선이 원을 따라 "흐르는" 것처럼 보인다 — 단일 keyframe 반복이 아니라 시간 적분값이다.
  function apply(offsetDeg) {
    markers.forEach(function (m) { m.style.setProperty('--offset', (offsetDeg % 360) + 'deg'); });
  }

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

  button.addEventListener('click', function () {
    human();
    running = !running;
    button.setAttribute('aria-pressed', String(!running));
    button.textContent = running ? '行進を止める' : '行進を再開';
  });

  var last = 0;
  var acc = 0;
  function loop(ts) {
    if (!last) last = ts;
    var dt = ts - last;
    last = ts;
    if (reduce) {
      apply(90); // 계산은 유지, 시간 축소 대신 4분의1 회전 지점으로 즉시 고정 (자동 루프·실사용 공통)
    } else if (running) {
      acc += dt / 1000 * MARCH_RATE_DEG_S;
      apply(acc);
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
  apply(0);
})();

// DashMarchMarker — vanilla 판(run/373/demo/04-list-style-dash-march-offset/index.html) 의 React 포트.
// ::marker 는 transform(rotate)·테두리를 지원하지 않아 링 마커를 그릴 수 없다 — 실제 span 링으로 마커를 대신하고
// 오프셋 각도를 시간 적분해 대시가 원을 따라 흐르게 만든다.
import { useEffect, useRef } from "react";
import styles from "./DashMarchMarker.module.scss";

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

const MARCH_RATE_DEG_S = 140; // 초당 회전 각도 — 대시가 흐르는 속도

const QUEUES = ["영상 인코딩 대기", "썸네일 생성 대기", "자막 정렬 대기"];

export default function DashMarchMarker() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const listRef = useRef(null) as unknown as Box<HTMLUListElement>;
  const buttonRef = useRef(null) as unknown as Box<HTMLButtonElement>;
  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;
    const button = buttonRef.current;
    if (!root || !list || !button) return;

    const markers = Array.prototype.slice.call(list.querySelectorAll("li")).map(function (li: HTMLElement) {
      const m = document.createElement("span");
      m.className = styles.ring;
      m.setAttribute("aria-hidden", "true");
      li.insertBefore(m, li.firstChild);
      return m;
    });
    let isDemo = true;
    let running = true;

    // 계산 겹: 오프셋 각도는 시간에 정속(MARCH_RATE_DEG_S)으로 누적된다. 대시 테두리를 이 각도만큼 계속
    // 회전시키면 점선이 원을 따라 "흐르는" 것처럼 보인다 — 단일 keyframe 반복이 아니라 시간 적분값이다.
    function apply(offsetDeg: number) {
      markers.forEach(function (m: HTMLElement) { m.style.setProperty("--offset", (offsetDeg % 360) + "deg"); });
    }

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

    function onClick() {
      human();
      running = !running;
      button!.setAttribute("aria-pressed", String(!running));
      button!.textContent = running ? "행진 멈추기" : "행진 다시 시작";
    }
    button.addEventListener("click", onClick);

    let last = 0;
    let acc = 0;
    function loop(ts: number) {
      if (!last) last = ts;
      const dt = ts - last;
      last = ts;
      if (reduce) {
        apply(90); // 계산은 유지, 시간 축소 대신 4분의1 회전 지점으로 즉시 고정 (자동 루프·실사용 공통)
      } else if (running) {
        acc += dt / 1000 * MARCH_RATE_DEG_S;
        apply(acc);
      }
      rafRef.current = requestAnimationFrame(loop);
    }
    rafRef.current = requestAnimationFrame(loop);
    apply(0);

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

  return (
    <main className={styles.stage}>
      <div className={styles.wrap + " " + styles.isDemo} ref={rootRef}>
        <ul className={styles.queueList} ref={listRef}>
          {QUEUES.map(function (q) { return <li key={q}>{q}</li>; })}
        </ul>
        <button className={styles.toggle} ref={buttonRef} type="button" aria-pressed="false">행진 멈추기</button>
      </div>
    </main>
  );
}