01방사형 메뉴 — 중심에서 부채꼴로 펼쳐지는 원형 메뉴

<main class="stage">
<div class="rm is-demo" id="rm">
  <div class="rm__field" id="rmField">
    <ul class="rm__items" id="rmItems" role="menu" aria-hidden="true"></ul>
    <button class="rm__fab" id="rmFab" type="button" aria-haspopup="true" aria-expanded="false">메뉴 열기</button>
  </div>
  <p class="rm__status" id="rmStatus">선택: 없음</p>
</div>
</main>

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

// 방사형 메뉴 — 계산 겹은 index.html 의 극좌표→데카르트 변환(cos·sin, ARC_SPAN_DEG·RADIUS)에 있다.
// 여기서는 그 결과(--x·--y, 단위 없는 px 수)를 transform 으로 옮기기만 한다.
// 열림 여부는 .rm--open 클래스 하나 — 항목마다 --stagger 로 늦게 열리게 transition-delay 를 준다.

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

@include stage($stage-ink);

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

.rm__field {
  position: relative;
  width: 280px;
  height: 200px;
  --field-scale: 1;
}

.rm__items {
  position: absolute;
  left: 50%;
  bottom: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 0;
  height: 0;
}

.rm__item {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%)
    translate(calc(var(--x) * 1px * var(--field-scale, 1)), calc(var(--y) * 1px * var(--field-scale, 1)))
    scale(0);
  opacity: 0;
  transition: transform $duration $easing, opacity $duration $easing;
  transition-delay: 0s;
}

.rm--open .rm__item {
  transform: translate(-50%, -50%)
    translate(calc(var(--x) * 1px * var(--field-scale, 1)), calc(var(--y) * 1px * var(--field-scale, 1)))
    scale(1);
  opacity: 1;
  transition-delay: calc(var(--stagger, 0) * 28ms);
}

.rm__itemBtn {
  appearance: none;
  border: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: $color;
  color: $subject-cream;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: $shadow-raised;
}
.rm__itemBtn:focus-visible { outline: 2px solid $subject-blue-light; outline-offset: 2px; }
.rm__itemBtn:hover { background: $subject-blue-deep; }

.rm__fab {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translate(-50%, 50%);
  appearance: none;
  border: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: $subject-cream;
  color: $subject-ink;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  box-shadow: $shadow-raised;
  transition: transform $dur-instant $ease-out;
}
.rm__fab:hover { transform: translate(-50%, 50%) scale(1.06); }
.rm--open .rm__fab { transform: translate(-50%, 50%) rotate(45deg); }
.rm__fab:focus-visible { outline: 2px solid $subject-blue-light; outline-offset: 3px; }

.rm__status {
  margin: 0;
  color: $subject-cream;
  font-size: 11px;
  font-weight: 600;
  opacity: .8;
}

@media (max-width: 340px) {
  .rm { gap: $sp-1; }
  .rm__field { width: 220px; height: 144px; --field-scale: .64; }
  .rm__itemBtn { width: 42px; height: 42px; font-size: 9px; }
  .rm__fab { width: 48px; height: 48px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .rm__item, .rm__fab { transition: none; }
}

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

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

.rm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.rm__field {
  position: relative;
  width: 280px;
  height: 200px;
  --field-scale: 1;
}

.rm__items {
  position: absolute;
  left: 50%;
  bottom: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 0;
  height: 0;
}

.rm__item {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) translate(calc(var(--x) * 1px * var(--field-scale, 1)), calc(var(--y) * 1px * var(--field-scale, 1))) scale(0);
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: 0s;
}

.rm--open .rm__item {
  transform: translate(-50%, -50%) translate(calc(var(--x) * 1px * var(--field-scale, 1)), calc(var(--y) * 1px * var(--field-scale, 1))) scale(1);
  opacity: 1;
  transition-delay: calc(var(--stagger, 0) * 28ms);
}

.rm__itemBtn {
  appearance: none;
  border: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2f6df6;
  color: #fff7e6;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
}

.rm__itemBtn:focus-visible {
  outline: 2px solid #5b8cf8;
  outline-offset: 2px;
}

.rm__itemBtn:hover {
  background: #0a4fe8;
}

.rm__fab {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translate(-50%, 50%);
  appearance: none;
  border: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff7e6;
  color: #17141a;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  transition: transform 140ms ease-out;
}

.rm__fab:hover {
  transform: translate(-50%, 50%) scale(1.06);
}

.rm--open .rm__fab {
  transform: translate(-50%, 50%) rotate(45deg);
}

.rm__fab:focus-visible {
  outline: 2px solid #5b8cf8;
  outline-offset: 3px;
}

.rm__status {
  margin: 0;
  color: #fff7e6;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.8;
}

@media (max-width: 340px) {
  .rm {
    gap: 4px;
  }
  .rm__field {
    width: 220px;
    height: 144px;
    --field-scale: .64;
  }
  .rm__itemBtn {
    width: 42px;
    height: 42px;
    font-size: 9px;
  }
  .rm__fab {
    width: 48px;
    height: 48px;
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rm__item, .rm__fab {
    transition: none;
  }
}

(function () {
  var ACTIONS = ['복사', '붙여넣기', '삭제', '실행 취소', '다시 실행', '저장'];
  var ARC_SPAN_DEG = 200;  // 부채꼴이 펼쳐지는 총 각도
  var RADIUS = 96;         // 중심에서 항목까지 거리(px)
  var LOOP_MS = 2000;      // 블로그설정.json 데모.초 와 같다

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var root = document.getElementById('rm');
  var field = document.getElementById('rmField');
  var list = document.getElementById('rmItems');
  var fab = document.getElementById('rmFab');
  var status = document.getElementById('rmStatus');
  var isDemo = true;
  var open = false;

  // 계산 겹: 극좌표 → 데카르트 좌표. 항목 i 는 위쪽(-90도)을 중심으로 ARC_SPAN_DEG 를 균등 분할한
  // 각도에서 RADIUS 만큼 떨어진 자리를 차지한다. 이 좌표는 열림 여부와 무관하게 한 번만 계산한다.
  var items = ACTIONS.map(function (label, i) {
    var li = document.createElement('li');
    li.className = 'rm__item';
    li.setAttribute('role', 'none');
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'rm__itemBtn';
    btn.setAttribute('role', 'menuitem');
    btn.tabIndex = -1;
    btn.textContent = label;
    var angleDeg = -90 - ARC_SPAN_DEG / 2 + i * (ARC_SPAN_DEG / (ACTIONS.length - 1));
    var rad = angleDeg * Math.PI / 180;
    var x = Math.round(Math.cos(rad) * RADIUS);
    var y = Math.round(Math.sin(rad) * RADIUS);
    li.style.setProperty('--x', x);
    li.style.setProperty('--y', y);
    li.style.setProperty('--stagger', i);
    li.appendChild(btn);
    list.appendChild(li);
    btn.addEventListener('click', function () {
      human();
      status.textContent = '선택: ' + label;
      setOpen(false);
    });
    return { li: li, btn: btn, label: label };
  });

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

  function setOpen(next) {
    open = next;
    root.classList.toggle('rm--open', open);
    fab.setAttribute('aria-expanded', String(open));
    list.setAttribute('aria-hidden', String(!open));
    items.forEach(function (it) { it.btn.tabIndex = open ? 0 : -1; });
  }

  fab.addEventListener('click', function () { human(); setOpen(!open); });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && open) { human(); setOpen(false); fab.focus({ preventScroll: true }); }
  });

  // 자동 루프: 열림 구간(0.12~0.62)에서 항목마다 --stagger 만큼 늦게 열리고, 그 뒤 닫힌다
  function loop(ts) {
    if (isDemo && !reduce) {
      var phase = (ts % LOOP_MS) / LOOP_MS;
      var shouldOpen = phase > 0.12 && phase < 0.62;
      if (shouldOpen !== open) { open = shouldOpen; root.classList.toggle('rm--open', open); }
    } else if (reduce && isDemo) {
      root.classList.add('rm--open');
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
})();

// RadialMenu — vanilla 판(run/374/demo/01-arc-radial-menu/index.html) 의 React 포트.
// 계산 겹은 각 항목의 극좌표 배치(각도→x,y)에 있다 — 부채꼴로 펼친 각도를 라디안으로 바꿔 cos/sin 으로 좌표를 구한다.
import { useEffect, useRef, useState } from "react";
import styles from "./RadialMenu.module.scss";

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

const ACTIONS = ["복사", "붙여넣기", "삭제", "실행 취소", "다시 실행", "저장"];
const ARC_SPAN_DEG = 200;
const RADIUS = 96;
const LOOP_MS = 2000;

export default function RadialMenu() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const listRef = useRef(null) as unknown as Box<HTMLUListElement>;
  const fabRef = useRef(null) as unknown as Box<HTMLButtonElement>;
  const rafRef = useRef(0) as unknown as Box<number>;
  const [status, setStatus] = useState("선택: 없음");
  const [open, setOpenState] = useState(false);

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

    let isDemo = true;
    let open = false;

    const buttons: HTMLButtonElement[] = Array.prototype.slice.call(list.querySelectorAll("button"));
    const items: HTMLLIElement[] = Array.prototype.slice.call(list.querySelectorAll("li"));
    items.forEach(function (li, i) {
      const angleDeg = -90 - ARC_SPAN_DEG / 2 + i * (ARC_SPAN_DEG / (ACTIONS.length - 1));
      const rad = (angleDeg * Math.PI) / 180;
      const x = Math.round(Math.cos(rad) * RADIUS);
      const y = Math.round(Math.sin(rad) * RADIUS);
      li.style.setProperty("--x", String(x));
      li.style.setProperty("--y", String(y));
      li.style.setProperty("--stagger", String(i));
    });

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

    function setOpen(next: boolean) {
      open = next;
      root!.classList.toggle(styles.rmOpen, open);
      fab!.setAttribute("aria-expanded", String(open));
      list!.setAttribute("aria-hidden", String(!open));
      buttons.forEach(function (b) { b.tabIndex = open ? 0 : -1; });
      setOpenState(open);
    }

    function onFabClick() { human(); setOpen(!open); }
    fab.addEventListener("click", onFabClick);

    const onItemClicks: Array<() => void> = [];
    buttons.forEach(function (btn, i) {
      const handler = function () {
        human();
        setStatus("선택: " + ACTIONS[i]);
        setOpen(false);
      };
      onItemClicks.push(handler);
      btn.addEventListener("click", handler);
    });

    function onKeydown(e: KeyboardEvent) {
      if (e.key === "Escape" && open) { human(); setOpen(false); fab!.focus({ preventScroll: true }); }
    }
    document.addEventListener("keydown", onKeydown);

    function loop(ts: number) {
      if (isDemo && !reduce) {
        const phase = (ts % LOOP_MS) / LOOP_MS;
        const shouldOpen = phase > 0.12 && phase < 0.62;
        if (shouldOpen !== open) { open = shouldOpen; root!.classList.toggle(styles.rmOpen, open); setOpenState(open); }
      } else if (reduce && isDemo) {
        root!.classList.add(styles.rmOpen);
      }
      rafRef.current = requestAnimationFrame(loop);
    }
    rafRef.current = requestAnimationFrame(loop);

    return () => {
      fab.removeEventListener("click", onFabClick);
      buttons.forEach(function (btn, i) { btn.removeEventListener("click", onItemClicks[i]); });
      document.removeEventListener("keydown", onKeydown);
      cancelAnimationFrame(rafRef.current);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={styles.rm + " " + styles.isDemo} ref={rootRef}>
        <div className={styles.field}>
          <ul className={styles.items} ref={listRef} role="menu" aria-hidden="true">
            {ACTIONS.map(function (label) {
              return (
                <li key={label} className={styles.item} role="none">
                  <button className={styles.itemBtn} type="button" role="menuitem" tabIndex={-1}>{label}</button>
                </li>
              );
            })}
          </ul>
          <button className={styles.fab} ref={fabRef} type="button" aria-haspopup="true" aria-expanded={open}>메뉴 열기</button>
        </div>
        <p className={styles.status}>{status}</p>
      </div>
    </main>
  );
}