06サイズ順位マーカー — 値に比例してマーカーの面積を計算する方式

<main class="stage">
<div class="wrap is-demo" id="wrap">
  <ul class="stat-list" id="list">
    <li data-key="a">朝のルーティンガイド</li>
    <li data-key="b">30日間ホームトレーニング</li>
    <li data-key="c">食事記録メソッド</li>
    <li data-key="d">睡眠改善ノート</li>
  </ul>
  <button class="cycle" id="cycle" type="button">次の集計値を見る</button>
</div>
</main>

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

// 계산 겹은 index.html 의 제곱근 비례(sqrt(v)/sqrt(max)) 에 있다 — 여기는 칩 기본 크기·판만 맡는다.
// ::marker 는 transform(scale) 을 지원하지 않아 면적을 키울 수 없다 — list-style:none 으로 지우고
// 실제 span(.chip) 을 마커 자리에 넣어 항상 최대 지름을 기준으로 scale() 만 줄인다(가장자리 좌표가 안 밀린다).
@include stage($stage-yellow);

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

.stat-list li {
  display: flex;
  align-items: center;
  gap: $sp-3;
  color: $subject-ink;
  font-size: 12px;
  font-weight: 600;
}

.chip {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip::before {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: $subject-blue;
  transform: scale(var(--scale, 1));
  transition: transform $dur-base $ease-out;
}

.cycle {
  appearance: none;
  border: none;
  margin-top: $sp-4;
  padding: $sp-2 $sp-4;
  border-radius: $r-control;
  background: $subject-ink;
  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) {
  .stat-list { width: 190px; gap: $sp-1; }
  .stat-list li { font-size: 11px; }
  .chip, .chip::before { width: 22px; height: 22px; }
  .cycle { margin-top: $sp-2; padding: $sp-1 $sp-3; }
}

@media (prefers-reduced-motion: reduce) {
  .chip::before { transition: none; }
  .cycle { 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);
}

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

.stat-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #17141a;
  font-size: 12px;
  font-weight: 600;
}

.chip {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2f6df6;
  transform: scale(var(--scale, 1));
  transition: transform 300ms ease-out;
}

.cycle {
  appearance: none;
  border: none;
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 12px;
  background: #17141a;
  color: #fff7e6;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 140ms ease-out;
}
.cycle:hover {
  transform: translateY(-1px);
}
.cycle:active {
  transform: scale(0.96);
}
.cycle:focus-visible {
  outline: 2px solid #5b8cf8;
  outline-offset: 2px;
}

@media (max-width: 340px) {
  .stat-list {
    width: 190px;
    gap: 4px;
  }
  .stat-list li {
    font-size: 11px;
  }
  .chip, .chip::before {
    width: 22px;
    height: 22px;
  }
  .cycle {
    margin-top: 8px;
    padding: 4px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chip::before {
    transition: none;
  }
  .cycle {
    transition: none;
  }
}

(function () {
  var R_MAX = 15; // 최대 값을 가진 마커의 반경(px) — scale() 기준 반경
  // 결정적 집계 프리셋 3세트를 순환한다(Math.random 미사용)
  var SETS = [
    { a: 82, b: 64, c: 47, d: 20 },
    { a: 30, b: 90, c: 55, d: 65 },
    { a: 58, b: 22, c: 88, d: 41 }
  ];
  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 markers = items.map(function (li) {
    var m = document.createElement('span');
    m.className = 'chip';
    m.setAttribute('aria-hidden', 'true');
    li.insertBefore(m, li.firstChild);
    return m;
  });
  var button = document.getElementById('cycle');
  var isDemo = true;
  var setIdx = 0;

  // 계산 겹: 마커 반경은 값의 제곱근에 비례한다(면적이 값에 비례하도록) — 선형 비례는 큰 값이 과장돼 보인다.
  function apply(set) {
    var max = Math.max.apply(null, Object.keys(set).map(function (k) { return set[k]; }));
    items.forEach(function (li, i) {
      var key = li.getAttribute('data-key');
      var v = set[key];
      var factor = Math.sqrt(v) / Math.sqrt(max);
      markers[i].style.setProperty('--scale', factor.toFixed(3));
    });
  }

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

  function next() {
    setIdx = (setIdx + 1) % SETS.length;
    apply(SETS[setIdx]);
  }
  button.addEventListener('click', function () { human(); next(); });

  var last = 0;
  var STEP_MS = 550;
  function loop(ts) {
    if (!last) last = ts;
    if (isDemo) {
      if (reduce) {
        apply(SETS[1]); // 계산은 유지, 시간 축소 대신 두 번째 집계 상태로 즉시 고정
      } else if (ts - last >= STEP_MS) {
        last = ts;
        next();
      }
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
  apply(SETS[0]);
})();

// SizeRankMarker — vanilla 판(run/373/demo/06-list-style-marker-size-rank/index.html) 의 React 포트.
// ::marker 는 transform(scale) 을 지원하지 않아 면적을 키울 수 없다 — list-style:none 으로 지우고
// 실제 span(.chip) 을 마커 자리에 넣어 항상 최대 지름을 기준으로 scale() 만 줄인다.
import { useEffect, useRef } from "react";
import styles from "./SizeRankMarker.module.scss";

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

// 결정적 집계 프리셋 3세트를 순환한다(Math.random 미사용)
const SETS: Array<{ a: number; b: number; c: number; d: number }> = [
  { a: 82, b: 64, c: 47, d: 20 },
  { a: 30, b: 90, c: 55, d: 65 },
  { a: 58, b: 22, c: 88, d: 41 },
];
const STEP_MS = 550; // 자동 루프에서 다음 집계로 넘어가는 간격

const NOTES: Array<{ key: string; label: string }> = [
  { key: "a", label: "아침 루틴 가이드" },
  { key: "b", label: "홈트레이닝 30일" },
  { key: "c", label: "식단 기록법" },
  { key: "d", label: "수면 개선 노트" },
];

export default function SizeRankMarker() {
  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"));
    const markers = items.map(function (li: HTMLElement) {
      const m = document.createElement("span");
      m.className = styles.chip;
      m.setAttribute("aria-hidden", "true");
      li.insertBefore(m, li.firstChild);
      return m;
    });
    let isDemo = true;
    let setIdx = 0;

    // 계산 겹: 마커 반경은 값의 제곱근에 비례한다(면적이 값에 비례하도록) — 선형 비례는 큰 값이 과장돼 보인다.
    function apply(set: { a: number; b: number; c: number; d: number }) {
      const max = Math.max.apply(null, Object.keys(set).map(function (k) { return (set as Record<string, number>)[k]; }));
      items.forEach(function (li: HTMLElement, i: number) {
        const key = li.getAttribute("data-key") || "a";
        const v = (set as Record<string, number>)[key];
        const factor = Math.sqrt(v) / Math.sqrt(max);
        markers[i].style.setProperty("--scale", factor.toFixed(3));
      });
    }

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

    function next() {
      setIdx = (setIdx + 1) % SETS.length;
      apply(SETS[setIdx]);
    }

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

    let last = 0;
    function loop(ts: number) {
      if (!last) last = ts;
      if (isDemo) {
        if (reduce) {
          apply(SETS[1]); // 계산은 유지, 시간 축소 대신 두 번째 집계 상태로 즉시 고정
        } else if (ts - last >= STEP_MS) {
          last = ts;
          next();
        }
      }
      rafRef.current = requestAnimationFrame(loop);
    }
    rafRef.current = requestAnimationFrame(loop);
    apply(SETS[0]);

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

  return (
    <main className={styles.stage}>
      <div className={styles.wrap + " " + styles.isDemo} ref={rootRef}>
        <ul className={styles.statList} ref={listRef}>
          {NOTES.map(function (n) { return <li key={n.key} data-key={n.key}>{n.label}</li>; })}
        </ul>
        <button className={styles.cycle} type="button">다음 집계 값 보기</button>
      </div>
    </main>
  );
}