06Status-dot color cycle — the dot's color value changes in sequence across idle, in-progress, and done stages

<main class="stage">
<div class="sdc is-demo" id="sdc">
  <div class="sdc__dots">
    <span class="sdc__dot" id="sdcDot0"></span>
    <span class="sdc__dot" id="sdcDot1"></span>
    <span class="sdc__dot" id="sdcDot2"></span>
  </div>
  <span class="sdc__label" id="sdcLabel">Idle</span>
  <button class="sdc__btn" id="sdcBtn" type="button">Next stage</button>
</div>
</main>

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

// 계산 겹: i번째 점의 단계 = (현재단계 − i + 단계수) mod 단계수 — 값이 점마다 어긋나며 뒤따라간다(index.html 참조)
@include stage($stage-paper);

.sdc {
  display: grid;
  justify-items: center;
  gap: $sp-4;
}

.sdc__dots {
  display: flex;
  gap: $sp-3;
}

.sdc__dot {
  width: $sp-4;
  height: $sp-4;
  border-radius: $r-pill;
  background: rgba($stage-ink, .14);
  transition: background $dur-base $ease-out, transform $dur-base $ease-pop;
}

.sdc__dot--idle { background: rgba($stage-ink, .14); transform: scale(1); }
.sdc__dot--busy { background: $subject-blue-deep; transform: scale(1.18); }
.sdc__dot--done { background: $subject-mint; transform: scale(1); }

.sdc__label {
  font: 600 13px/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  color: rgba($stage-ink, .64);
}

.sdc__btn {
  border: 0;
  border-radius: $r-control;
  padding: $sp-2 $sp-4;
  background: $stage-ink;
  color: $subject-cream;
  font: 700 13px/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  cursor: pointer;
  transition: transform $dur-instant $ease-out;

  &:active { transform: scale(.96); }
}

@media (max-width: 340px) {
  .sdc__dot { width: $sp-3; height: $sp-3; }
}

@media (prefers-reduced-motion: reduce) {
  .sdc__dot { transition: none; }
  .sdc__btn { transition: none; }
}

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

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

.sdc {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.sdc__dots {
  display: flex;
  gap: 12px;
}

.sdc__dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.14);
  transition: background 300ms ease-out, transform 300ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.sdc__dot--idle {
  background: rgba(23, 20, 26, 0.14);
  transform: scale(1);
}

.sdc__dot--busy {
  background: #0a4fe8;
  transform: scale(1.18);
}

.sdc__dot--done {
  background: #4cd4a6;
  transform: scale(1);
}

.sdc__label {
  font: 600 13px/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  color: rgba(23, 20, 26, 0.64);
}

.sdc__btn {
  border: 0;
  border-radius: 12px;
  padding: 8px 16px;
  background: #17141a;
  color: #fff7e6;
  font: 700 13px/1 -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  cursor: pointer;
  transition: transform 140ms ease-out;
}
.sdc__btn:active {
  transform: scale(0.96);
}

@media (max-width: 340px) {
  .sdc__dot {
    width: 12px;
    height: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sdc__dot {
    transition: none;
  }
  .sdc__btn {
    transition: none;
  }
}

(function () {
  var root = document.getElementById('sdc');
  var btn = document.getElementById('sdcBtn');
  var dots = [document.getElementById('sdcDot0'), document.getElementById('sdcDot1'), document.getElementById('sdcDot2')];
  var label = document.getElementById('sdcLabel');

  // 상수: 단계 수(Idle·In progress·Done) · 단계가 넘어가는 간격(가속 ms)
  var STAGE_COUNT = 3;
  var STEP_MS = 480;
  var NAMES = ['Idle', 'In progress', 'Done'];
  var CLASSES = ['sdc__dot--idle', 'sdc__dot--busy', 'sdc__dot--done'];

  var stageIndex = 0;
  var timer = null;

  // 계산 겹: i번째 점의 표시 단계 = (현재 단계 − i + 단계수) mod 단계수 — 값이 점마다 어긋나며 뒤따라간다
  function paint() {
    label.textContent = NAMES[stageIndex];
    dots.forEach(function (d, i) {
      var s = ((stageIndex - i) % STAGE_COUNT + STAGE_COUNT) % STAGE_COUNT;
      d.className = 'sdc__dot ' + CLASSES[s];
    });
  }
  paint();

  function step() {
    stageIndex = (stageIndex + 1) % STAGE_COUNT;
    paint();
    timer = setTimeout(step, STEP_MS);
  }
  timer = setTimeout(step, STEP_MS);

  btn.addEventListener('click', function () {
    root.classList.remove('is-demo');
    if (timer) clearTimeout(timer);
    stageIndex = (stageIndex + 1) % STAGE_COUNT;
    paint();
    timer = setTimeout(step, STEP_MS);
  });
})();

import { useEffect, useRef } from "react";
import styles from "./SaveStatusDotCycle.module.scss";

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

export default function SaveStatusDotCycle() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement | null>;

  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const dotEls = Array.from(root.querySelectorAll(`.${styles.dot}`)) as HTMLElement[];
    const label = root.querySelector(`.${styles.label}`) as HTMLElement | null;
    const btn = root.querySelector(`.${styles.btn}`) as HTMLElement | null;
    if (dotEls.length < 3 || !label || !btn) return;

    // 상수: 단계 수(대기·진행·완료) · 단계가 넘어가는 간격(가속 ms)
    const STAGE_COUNT = 3;
    const STEP_MS = 480;
    const NAMES = ["대기", "진행", "완료"];
    const CLASSES = [styles["dot--idle"], styles["dot--busy"], styles["dot--done"]];

    let stageIndex = 0;
    let timer = 0;

    // 계산 겹: i번째 점의 표시 단계 = (현재 단계 − i + 단계수) mod 단계수 — 값이 점마다 어긋나며 뒤따라간다
    function paint() {
      label!.textContent = NAMES[stageIndex];
      dotEls.forEach((d, i) => {
        const s = ((stageIndex - i) % STAGE_COUNT + STAGE_COUNT) % STAGE_COUNT;
        d.className = styles.dot + " " + CLASSES[s];
      });
    }
    paint();

    function step() {
      stageIndex = (stageIndex + 1) % STAGE_COUNT;
      paint();
      timer = window.setTimeout(step, STEP_MS);
    }
    timer = window.setTimeout(step, STEP_MS);

    function onClick() {
      root!.classList.remove(styles["is-demo"]);
      window.clearTimeout(timer);
      stageIndex = (stageIndex + 1) % STAGE_COUNT;
      paint();
      timer = window.setTimeout(step, STEP_MS);
    }
    btn.addEventListener("click", onClick);

    return () => {
      window.clearTimeout(timer);
      btn.removeEventListener("click", onClick);
    };
  }, []);

  return (
    <div ref={rootRef} className={`${styles.stage} ${styles.sdc} ${styles["is-demo"]}`}>
      <div className={styles.dots}>
        <span className={styles.dot} />
        <span className={styles.dot} />
        <span className={styles.dot} />
      </div>
      <span className={styles.label}>대기</span>
      <button className={styles.btn} type="button">다음 단계</button>
    </div>
  );
}