03위상 물결 마커 — 항목마다 위상 값을 밀어 불릿이 물결치는 방식

<main class="stage">
<div class="wrap is-demo" id="wrap">
  <ul class="wave-list" id="list">
    <li style="--i:0">트랙 01 · 새벽 산책</li>
    <li style="--i:1">트랙 02 · 창가 자리</li>
    <li style="--i:2">트랙 03 · 늦은 우산</li>
    <li style="--i:3">트랙 04 · 첫눈</li>
    <li style="--i:4">트랙 05 · 정거장</li>
  </ul>
  <button class="speed" id="speed" type="button">물결 속도 전환</button>
</div>
</main>

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

// 계산 겹은 index.html 의 사인 함수 위상 이동(sin(t*speed + i*phase)) 에 있다 — 여기는 불릿 모양·판만 맡는다.
// ::marker 는 transform(translateY) 을 지원하지 않아 물결을 만들 수 없다 — list-style:none 으로 지우고
// ::before 로 대체한 불릿에 커스텀 프로퍼티 --y 를 실어 세로로 흔든다.
@include stage($stage-orange);

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

.wave-list li {
  position: relative;
  padding-left: 28px;
  min-height: 20px;
  display: flex;
  align-items: center;
  color: $subject-ink;
  font-size: 12px;
  font-weight: 600;
}

.wave-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: $subject-blue-deep;
  transform: translateY(var(--y, 0px));
}

.speed {
  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) {
  .wave-list { width: 190px; gap: $sp-1; }
  .wave-list li { font-size: 11px; min-height: 16px; padding-left: 20px; }
  .wave-list li::before { width: 10px; height: 10px; margin-top: -5px; }
  .speed { margin-top: $sp-2; padding: $sp-1 $sp-3; }
}

@media (prefers-reduced-motion: reduce) {
  .wave-list li::before { transition: none; }
  .speed { transition: none; }
}

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

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

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

.wave-list li {
  position: relative;
  padding-left: 28px;
  min-height: 20px;
  display: flex;
  align-items: center;
  color: #17141a;
  font-size: 12px;
  font-weight: 600;
}

.wave-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: #0a4fe8;
  transform: translateY(var(--y, 0px));
}

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

@media (max-width: 340px) {
  .wave-list {
    width: 190px;
    gap: 4px;
  }
  .wave-list li {
    font-size: 11px;
    min-height: 16px;
    padding-left: 20px;
  }
  .wave-list li::before {
    width: 10px;
    height: 10px;
    margin-top: -5px;
  }
  .speed {
    margin-top: 8px;
    padding: 4px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wave-list li::before {
    transition: none;
  }
  .speed {
    transition: none;
  }
}

(function () {
  var WAVE_PHASE_DEG = 40; // 항목 사이 위상차 — 변형 03 목표: 40 → 80
  var AMPLITUDE_PX = 6;
  var SPEEDS = [1, 2, 0.5]; // 배속 프리셋
  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 button = document.getElementById('speed');
  var isDemo = true;
  var speedIdx = 0;

  var PHASE_RAD = WAVE_PHASE_DEG * Math.PI / 180;

  // 계산 겹: 각 불릿의 세로 위치는 사인 함수에 항목 번호만큼 위상을 밀어 넣은 값이다.
  // t(공통 시간) 는 흐르되 위상이 다르면 같은 순간에도 서로 다른 높이가 된다 — 이것이 "물결"의 원리다.
  function apply(t) {
    var speed = SPEEDS[speedIdx];
    items.forEach(function (el, i) {
      var phase = i * PHASE_RAD;
      var y = AMPLITUDE_PX * Math.sin(t * speed + phase);
      el.style.setProperty('--y', y.toFixed(2) + 'px');
    });
  }

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

  button.addEventListener('click', function () {
    human();
    speedIdx = (speedIdx + 1) % SPEEDS.length;
  });

  var start = 0;
  function loop(ts) {
    if (!start) start = ts;
    if (isDemo) {
      if (reduce) {
        apply(Math.PI / 2); // 계산은 유지, 시간 축소 대신 파고 정점 위상으로 즉시 고정
      } else {
        apply((ts - start) / 260);
      }
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
  apply(0);
})();

// PhaseWaveMarker — vanilla 판(run/373/demo/03-list-style-marker-wave-phase/index.html) 의 React 포트.
// ::marker 는 transform(translateY) 을 지원하지 않아 물결을 만들 수 없다 — list-style:none 으로 지우고
// ::before 로 대체한 불릿에 커스텀 프로퍼티 --y 를 실어 사인 위상차로 세로로 흔든다.
import { useEffect, useRef } from "react";
import styles from "./PhaseWaveMarker.module.scss";

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

const WAVE_PHASE_DEG = 40; // 인접 항목 사이 위상 간격 — 변형 03 목표: 40 → 80
const AMPLITUDE_PX = 6; // 물결 진폭 상한(px)
const SPEEDS = [1, 2, 0.5]; // 속도 프리셋 — 버튼으로 순환한다 (Math.random 금지, 결정적 배열)

const TRACKS = ["트랙 01 · 새벽 산책", "트랙 02 · 창가 자리", "트랙 03 · 늦은 우산", "트랙 04 · 첫눈", "트랙 05 · 정거장"];

export default function PhaseWaveMarker() {
  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 PHASE_RAD = (WAVE_PHASE_DEG * Math.PI) / 180;
    let speedIdx = 0;
    let isDemo = true;

    // 계산 겹: 항목 i 의 불릿 위치는 sin(t * speed + i * phase) 로 계산한다 — 같은 시각에 항목마다 위상이 달라
    // 줄 전체가 하나의 파동으로 보인다. CSS transition 이 아니라 프레임마다 계산되는 값이다.
    function apply(t: number) {
      items.forEach(function (el: HTMLElement, i: number) {
        const y = AMPLITUDE_PX * Math.sin(t * SPEEDS[speedIdx] + i * PHASE_RAD);
        el.style.setProperty("--y", y.toFixed(2) + "px");
      });
    }

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

    function onClick() {
      human();
      speedIdx = (speedIdx + 1) % SPEEDS.length;
    }
    root!.addEventListener("click", onClick);

    let last = 0;
    function loop(ts: number) {
      if (!last) last = ts;
      if (isDemo && !reduce) apply((ts - last) / 1000);
      else if (reduce) apply(1.57); // 계산은 유지, 시간 축소 대신 파도 꼭대기 위상(π/2) 으로 즉시 고정
      rafRef.current = requestAnimationFrame(loop);
    }
    rafRef.current = requestAnimationFrame(loop);

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

  return (
    <main className={styles.stage}>
      <div className={styles.wrap + " " + styles.isDemo} ref={rootRef}>
        <ul className={styles.waveList} ref={listRef}>
          {TRACKS.map(function (t) { return <li key={t}>{t}</li>; })}
        </ul>
        <button className={styles.speed} type="button">물결 속도 전환</button>
      </div>
    </main>
  );
}