06円形ゲージバー — 値に応じて角度が満ちる円形の進捗表示

<main class="stage">
<div class="cp is-demo" id="cp">
  <div class="cp__ring" id="cpRing" role="img" aria-label="アップロード進行円形ゲージ">
    <div class="cp__center">
      <p class="cp__pct" id="cpPct">0%</p>
      <p class="cp__label">アップロード中</p>
    </div>
  </div>
  <div class="cp__btns">
    <button class="cp__btn" id="cpMinus" type="button" aria-label="10%減らす">−</button>
    <button class="cp__btn" id="cpPlus" type="button" aria-label="10%増やす">+</button>
  </div>
</div>
</main>

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

// 단계형 원형 게이지 — 계산 겹은 index.html 의 quantizedDeg(GAUGE_STEP_DEG 배수로 각도 끊어내림)에 있다.
// 여기는 conic-gradient 로 그 각도까지만 색을 칠한다.

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

@include stage($stage-yellow);

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

.cp__ring {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient($color 0deg calc(var(--deg, 0) * 1deg), rgba($subject-ink, .14) calc(var(--deg, 0) * 1deg) 360deg);
  display: grid;
  place-items: center;
}
.cp__ring::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: $subject-cream;
}

.cp__center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cp__pct { margin: 0; font-size: 30px; font-weight: 800; color: $subject-ink; line-height: 1; font-variant-numeric: tabular-nums; }
.cp__label { margin: 0; font-size: 11px; font-weight: 700; color: rgba($subject-ink, .6); }

.cp__btns { display: flex; gap: $sp-3; }
.cp__btn {
  appearance: none;
  border: none;
  border-radius: $r-control;
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-weight: 700;
  color: $subject-cream;
  background: $color;
  cursor: pointer;
  transition: transform $duration $easing;
}
.cp__btn:active { transform: scale(.92); }
.cp__btn:focus-visible { outline: 2px solid $subject-blue; outline-offset: 2px; }

@media (max-width: 340px) {
  .cp { gap: $sp-3; }
  .cp__ring { width: 118px; height: 118px; }
  .cp__ring::before { inset: 11px; }
  .cp__pct { font-size: 20px; }
  .cp__btn { width: 32px; height: 32px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp__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: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.cp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cp__ring {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient(#0a4fe8 0deg calc(var(--deg, 0) * 1deg), rgba(23, 20, 26, 0.14) calc(var(--deg, 0) * 1deg) 360deg);
  display: grid;
  place-items: center;
}

.cp__ring::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: #fff7e6;
}

.cp__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cp__pct {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  color: #17141a;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cp__label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: rgba(23, 20, 26, 0.6);
}

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

.cp__btn {
  appearance: none;
  border: none;
  border-radius: 12px;
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-weight: 700;
  color: #fff7e6;
  background: #0a4fe8;
  cursor: pointer;
  transition: transform 300ms ease-out;
}

.cp__btn:active {
  transform: scale(0.92);
}

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

@media (max-width: 340px) {
  .cp {
    gap: 12px;
  }
  .cp__ring {
    width: 118px;
    height: 118px;
  }
  .cp__ring::before {
    inset: 11px;
  }
  .cp__pct {
    font-size: 20px;
  }
  .cp__btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp__btn {
    transition: none;
  }
}

(function () {
  var GAUGE_STEP_DEG = 6;   // 고리 채움의 각도 해상도 — 값이 이 배수로만 끊겨 채워진다(매끈한 보간이 아니라 계단식)
  var STEP_PCT = 10;
  var LOOP_MS = 2000;

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var root = document.getElementById('cp');
  var ring = document.getElementById('cpRing');
  var pctEl = document.getElementById('cpPct');
  var minusBtn = document.getElementById('cpMinus');
  var plusBtn = document.getElementById('cpPlus');
  var isDemo = true;
  var value = 0;   // 0~100, 실제 목표값
  var shown = 0;   // 화면에 서서히 다가가는 값(서서히 메워지는 연출)

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

  // 계산 겹: 퍼센트를 각도로 바꾼 뒤 GAUGE_STEP_DEG 배수로 끊어 내림한다.
  // 매끈한 360*value/100 대신 계단형으로 보여 "단계형" 게이지가 된다.
  function quantizedDeg(v) {
    var raw = Math.min(100, Math.max(0, v)) * 3.6;
    return Math.floor(raw / GAUGE_STEP_DEG) * GAUGE_STEP_DEG;
  }

  function apply() {
    ring.style.setProperty('--deg', quantizedDeg(shown));
    pctEl.textContent = Math.round(shown) + '%';
  }

  function setValue(v) { value = Math.min(100, Math.max(0, v)); }

  minusBtn.addEventListener('click', function () { human(); setValue(value - STEP_PCT); });
  plusBtn.addEventListener('click', function () { human(); setValue(value + STEP_PCT); });

  // 자동 루프: 0 → 100 을 서서히 채웠다가 다시 시작한다. 사람 조작과 같은 apply()/quantizedDeg() 를 쓴다.
  function loop(ts) {
    if (isDemo) {
      if (!reduce) {
        var phase = (ts % LOOP_MS) / LOOP_MS;
        value = phase < 0.82 ? Math.min(100, (phase / 0.82) * 100) : 100;
      } else {
        value = 62;
      }
    }
    shown += (value - shown) * (reduce ? 1 : 0.16);
    if (Math.abs(value - shown) < 0.05) shown = value;
    apply();
    requestAnimationFrame(loop);
  }
  apply();
  requestAnimationFrame(loop);
})();

// ConicProgressGauge — vanilla 판(run/374/demo/06-arc-conic-progress/index.html) 의 React 포트.
// 계산 겹: quantizedDeg — 퍼센트를 각도로 바꾼 뒤 GAUGE_STEP_DEG 배수로 끊어 내려 매끈한 보간 대신
// 계단형으로 채운다.
import { useEffect, useRef, useState } from "react";
import styles from "./ConicProgressGauge.module.scss";

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

const GAUGE_STEP_DEG = 6;
const STEP_PCT = 10;
const LOOP_MS = 2000;

export default function ConicProgressGauge() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const ringRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const rafRef = useRef(0) as unknown as Box<number>;
  const [pct, setPct] = useState(0);

  useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const root = rootRef.current;
    const ring = ringRef.current;
    if (!root || !ring) return;

    let isDemo = true;
    let value = 0;
    let shown = 0;

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

    function quantizedDeg(v: number) {
      const raw = Math.min(100, Math.max(0, v)) * 3.6;
      return Math.floor(raw / GAUGE_STEP_DEG) * GAUGE_STEP_DEG;
    }

    function apply() {
      ring!.style.setProperty("--deg", String(quantizedDeg(shown)));
      setPct(Math.round(shown));
    }

    function setValue(v: number) { value = Math.min(100, Math.max(0, v)); }

    function onMinus() { human(); setValue(value - STEP_PCT); }
    function onPlus() { human(); setValue(value + STEP_PCT); }

    const minusBtn = root!.querySelector<HTMLButtonElement>("[data-minus]");
    const plusBtn = root!.querySelector<HTMLButtonElement>("[data-plus]");
    minusBtn?.addEventListener("click", onMinus);
    plusBtn?.addEventListener("click", onPlus);

    function loop(ts: number) {
      if (isDemo) {
        if (!reduce) {
          const phase = (ts % LOOP_MS) / LOOP_MS;
          value = phase < 0.82 ? Math.min(100, (phase / 0.82) * 100) : 100;
        } else {
          value = 62;
        }
      }
      shown += (value - shown) * (reduce ? 1 : 0.16);
      if (Math.abs(value - shown) < 0.05) shown = value;
      apply();
      rafRef.current = requestAnimationFrame(loop);
    }
    apply();
    rafRef.current = requestAnimationFrame(loop);

    return () => {
      minusBtn?.removeEventListener("click", onMinus);
      plusBtn?.removeEventListener("click", onPlus);
      cancelAnimationFrame(rafRef.current);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={styles.cp + " " + styles.isDemo} ref={rootRef}>
        <div className={styles.ring} ref={ringRef} role="img" aria-label="업로드 진행 원형 게이지">
          <div className={styles.center}>
            <p className={styles.pct}>{pct}%</p>
            <p className={styles.label}>업로드 중</p>
          </div>
        </div>
        <div className={styles.btns}>
          <button className={styles.btn} data-minus type="button" aria-label="10% 줄이기">−</button>
          <button className={styles.btn} data-plus type="button" aria-label="10% 늘리기">+</button>
        </div>
      </div>
    </main>
  );
}