02Signup steps — a stepped form that divides its own progress ratio to set bar length and color

<main class="stage">
<section class="wrap" id="wrap">
  <div class="track" id="track" role="progressbar" aria-valuemin="1" aria-valuemax="4" aria-valuenow="1" aria-label="Sign-up progress steps">
    <div class="bar" id="bar"></div>
  </div>
  <ol class="steps" id="steps">
    <li class="step is-active" id="step1"><span class="dot"></span><span class="label">Info</span></li>
    <li class="step" id="step2"><span class="dot"></span><span class="label">Verify</span></li>
    <li class="step" id="step3"><span class="dot"></span><span class="label">Terms</span></li>
    <li class="step" id="step4"><span class="dot"></span><span class="label">Done</span></li>
  </ol>
</section>
</main>

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

$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-blue-deep;

@include stage($stage-yellow);

.wrap {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: $sp-4;
}

.track {
  --ratio: .25;
  position: relative;
  width: 100%;
  height: $sp-2;
  border-radius: $r-pill;
  background: rgba($subject-ink, .14);
  overflow: hidden;
}

.bar {
  position: absolute;
  inset: 0;
  border-radius: $r-pill;
  background: $color;
  transform: scaleX(var(--ratio, .25));
  transform-origin: left;
  animation: barGlow $duration $easing infinite;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: $sp-2;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-1;
  flex: 1;
}

.dot {
  width: $sp-3;
  height: $sp-3;
  border-radius: $r-pill;
  background: rgba($subject-ink, .24);
}

.label {
  color: rgba($subject-ink, .72);
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .01em;
}

.step.is-active .dot {
  background: $color;
}

.step.is-active .label {
  color: $subject-ink;
  font-weight: 700;
}

@keyframes barGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14); }
}

@media (max-width: 340px) {
  .wrap { max-width: 280px; gap: $sp-3; }
  .label { font-size: 9px; }
  .dot { width: $sp-2; height: $sp-2; }
}

@media (prefers-reduced-motion: reduce) {
  .bar { animation: none; }
}

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

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

.wrap {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.track {
  --ratio: .25;
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.14);
  overflow: hidden;
}

.bar {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #0a4fe8;
  transform: scaleX(var(--ratio, 0.25));
  transform-origin: left;
  animation: barGlow 2s ease-out infinite;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.24);
}

.label {
  color: rgba(23, 20, 26, 0.72);
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.01em;
}

.step.is-active .dot {
  background: #0a4fe8;
}

.step.is-active .label {
  color: #17141a;
  font-weight: 700;
}

@keyframes barGlow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.14);
  }
}
@media (max-width: 340px) {
  .wrap {
    max-width: 280px;
    gap: 12px;
  }
  .label {
    font-size: 9px;
  }
  .dot {
    width: 8px;
    height: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bar {
    animation: none;
  }
}

// 회원가입 단계(02) — 4단계 진행률을 계산해 막대 길이(scaleX)로 표시한다.
// STEP_TOTAL*STEP_MS = 2000ms 로 캡처창과 정확히 일치시켜 4단계가 전부 보이게 한다.
(function () {
  var track = document.getElementById('track');
  var bar = document.getElementById('bar');
  var stepIds = ['step1', 'step2', 'step3', 'step4'];
  var steps = stepIds.map(function (id) { return document.getElementById(id); });
  if (!track || !bar || steps.some(function (s) { return !s; })) return;
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var STEP_TOTAL = 4;
  var STEP_MS = 500;
  var CYCLE_MS = STEP_TOTAL * STEP_MS;

  function apply(t) {
    var tt = t % CYCLE_MS;
    var idx = Math.min(Math.max(Math.floor(tt / STEP_MS), 0), STEP_TOTAL - 1);
    var current = idx + 1;
    // 단계 경계는 정수(1~4)로 딱딱 끊어 aria·라벨에 반영하되, 막대 자체는 단계 안의 경과분(0~1)을
    // 더해 매 프레임 조금씩 자라게 한다 — 계산 한 겹(보간)으로 실제 회원가입 진행바처럼 부드럽다.
    var within = (tt % STEP_MS) / STEP_MS;
    var ratio = (idx + within) / STEP_TOTAL;
    track.style.setProperty('--ratio', ratio.toFixed(4));
    track.setAttribute('aria-valuenow', String(current));
    steps.forEach(function (el, i) {
      if (i === idx) {
        el.classList.add('is-active');
      } else {
        el.classList.remove('is-active');
      }
    });
  }

  if (reduce) {
    apply(CYCLE_MS - 1);
    return;
  }

  var start = null;
  function loop(ts) {
    if (start === null) start = ts;
    apply(ts - start);
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
})();

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

// 회원가입 단계 — 4단계 진행률을 계산해 막대 길이(scaleX)로 표시한다.
// STEP_TOTAL*STEP_MS = 2000ms 로 캡처창과 정확히 일치시켜 4단계가 전부 보이게 한다.
const STEP_TOTAL = 4;
const STEP_MS = 500;
const CYCLE_MS = STEP_TOTAL * STEP_MS;
const STEP_LABELS = ["정보", "인증", "약관", "완료"];

export default function SignupSteps() {
  const trackRef = useRef<HTMLDivElement>(null);
  const stepRefs = [
    useRef<HTMLLIElement>(null),
    useRef<HTMLLIElement>(null),
    useRef<HTMLLIElement>(null),
    useRef<HTMLLIElement>(null),
  ];

  useEffect(() => {
    const track = trackRef.current;
    const steps = stepRefs.map((r) => r.current);
    if (!track || steps.some((s) => !s)) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    function apply(t: number) {
      const tt = t % CYCLE_MS;
      const idx = Math.min(Math.max(Math.floor(tt / STEP_MS), 0), STEP_TOTAL - 1);
      const current = idx + 1;
      // 단계 경계는 정수(1~4)로 딱딱 끊어 aria·라벨에 반영하되, 막대 자체는 단계 안의
      // 경과분(0~1)을 더해 매 프레임 조금씩 자라게 한다 — 계산 한 겹(보간).
      const within = (tt % STEP_MS) / STEP_MS;
      const ratio = (idx + within) / STEP_TOTAL;
      track!.style.setProperty("--ratio", ratio.toFixed(4));
      track!.setAttribute("aria-valuenow", String(current));
      steps.forEach((el, i) => {
        if (!el) return;
        if (i === idx) {
          el.classList.add(styles.isActive);
        } else {
          el.classList.remove(styles.isActive);
        }
      });
    }

    if (reduce) {
      apply(CYCLE_MS - 1);
      return;
    }

    let start: number | null = null;
    let raf = 0;
    function loop(ts: number) {
      if (start === null) start = ts;
      apply(ts - start);
      raf = requestAnimationFrame(loop);
    }
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <div className={styles.stage}>
      <section className={styles.wrap}>
        <div
          className={styles.track}
          ref={trackRef}
          role="progressbar"
          aria-valuemin={1}
          aria-valuemax={4}
          aria-valuenow={1}
          aria-label="회원가입 진행 단계"
        >
          <div className={styles.bar} />
        </div>
        <ol className={styles.steps}>
          {STEP_LABELS.map((label, i) => (
            <li
              className={`${styles.step} ${i === 0 ? styles.isActive : ""}`}
              ref={stepRefs[i]}
              key={label}
            >
              <span className={styles.dot} />
              <span className={styles.label}>{label}</span>
            </li>
          ))}
        </ol>
      </section>
    </div>
  );
}