09대기 호흡 — 입력이 없는 동안 아이콘 크기 값이 사인 이징 곡선을 따라 커졌다 작아졌다 반복하는 방식

<main class="stage">
<div class="breathe-wrap">
<button type="button" class="breathe is-demo" id="breathe" aria-pressed="true">
  <svg class="breathe__icon" id="icon" viewBox="0 0 120 130" aria-hidden="true">
    <path class="breathe__ridge" d="M10,118 A50 46 0 0 1 110,118"></path>
    <path class="breathe__ridge" d="M16,118 A44 41 0 0 1 104,118"></path>
    <path class="breathe__ridge" d="M22,118 A38 36 0 0 1 98,118"></path>
    <path class="breathe__ridge" d="M28,118 A32 31 0 0 1 92,118"></path>
    <path class="breathe__ridge" d="M34,118 A26 26 0 0 1 86,118"></path>
    <path class="breathe__ridge" d="M40,118 A20 21 0 0 1 80,118"></path>
    <path class="breathe__ridge" d="M46,118 A14 16 0 0 1 74,118"></path>
  </svg>
  <span class="breathe__label">인증 대기</span>
</button>
<p class="breathe__status" id="status">대기 중</p>
</div>
</main>

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

// 계산 겹은 index.html 의 render() 에 있다 — scale·opacity 를 사인 함수로 매 프레임 다시
// 계산한다. 여기는 무대·모양만 맡는다.
@include stage($stage-paper);

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

.breathe {
  appearance: none;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-3;
  cursor: pointer;
  padding: $sp-4;
  border-radius: $r-card;

  &:focus-visible { outline: 2px solid $subject-lilac; outline-offset: 4px; }
}

.breathe__icon {
  width: clamp(120px, 30vw, 160px);
  height: auto;
  overflow: visible;
  transform-origin: 50% 50%; // 자기 중심에서 커진다(스스로 완결한 아이콘)
}

.breathe__ridge {
  fill: none;
  stroke: $subject-lilac;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .72;
}

.breathe__label {
  color: $stage-ink;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .02em;
}

.breathe__status {
  margin: 0;
  color: rgba($stage-ink, .6);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
}

@media (max-width: 340px) {
  .stage { padding: $sp-2; }
  .breathe-wrap { gap: $sp-2; }
  .breathe { padding: $sp-2 $sp-3; gap: $sp-2; }
  .breathe__icon { width: 104px; }
  .breathe__label { font-size: 12px; }
  .breathe__status { font-size: 11px; }
}

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

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

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

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

.breathe {
  appearance: none;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 16px;
  border-radius: 16px;
}
.breathe:focus-visible {
  outline: 2px solid #b9a0ff;
  outline-offset: 4px;
}

.breathe__icon {
  width: clamp(120px, 30vw, 160px);
  height: auto;
  overflow: visible;
  transform-origin: 50% 50%;
}

.breathe__ridge {
  fill: none;
  stroke: #b9a0ff;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.72;
}

.breathe__label {
  color: #17141a;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.breathe__status {
  margin: 0;
  color: rgba(23, 20, 26, 0.6);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
}

@media (max-width: 340px) {
  .stage {
    padding: 8px;
  }
  .breathe-wrap {
    gap: 8px;
  }
  .breathe {
    padding: 8px 12px;
    gap: 8px;
  }
  .breathe__icon {
    width: 104px;
  }
  .breathe__label {
    font-size: 12px;
  }
  .breathe__status {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .breathe__ridge {
    transition: none;
  }
}

(function () {
  // 계산 겹: 사인 이징 호흡 — scale = 1 + AMPLITUDE*sin(t*OMEGA) 를 매 프레임 직접 계산해
  // 아이콘 전체에 적용한다(중심 기준 확대). 능선마다 위상차(RIDGE_PHASE_STEP)를 살짝 둬
  // 밝기가 안에서 바깥으로 번지는 파도처럼 보이게 한다 — 미리 만든 트윈이 아니라 매 프레임
  // 삼각함수로 다시 계산한다.
  var AMPLITUDE = 0.095;     // 스케일 진폭(호흡 정도)
  var OMEGA = 0.0026;        // rad/ms — 주기 약 2400ms
  var RIDGE_PHASE_STEP = 0.16;
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var root = document.getElementById('breathe');
  var icon = document.getElementById('icon');
  var ridges = Array.prototype.slice.call(document.querySelectorAll('.breathe__ridge'));
  var status = document.getElementById('status');
  var STRINGS = { idle: '대기 중', paused: '일시 정지됨' };
  var isDemo = true;
  var active = true;
  var rafId = 0;
  var startTs = 0;

  function render(t) {
    var s = 1 + AMPLITUDE * Math.sin(t * OMEGA);
    icon.style.transform = 'scale(' + s.toFixed(4) + ')';
    for (var i = 0; i < ridges.length; i++) {
      var phase = t * OMEGA + i * RIDGE_PHASE_STEP;
      var b = 0.5 + 0.5 * Math.sin(phase);
      ridges[i].style.opacity = b.toFixed(3);
    }
  }

  function resetIcon() {
    icon.style.transform = 'scale(1)';
    for (var i = 0; i < ridges.length; i++) ridges[i].style.opacity = '0.72';
  }

  function loop(ts) {
    if (!startTs) startTs = ts;
    render(ts - startTs);
    rafId = requestAnimationFrame(loop);
  }

  function setActive(v) {
    active = v;
    root.setAttribute('aria-pressed', String(v));
    status.textContent = v ? STRINGS.idle : STRINGS.paused;
    cancelAnimationFrame(rafId);
    if (!v) { resetIcon(); return; }
    if (reduce) { render(0); return; }
    startTs = 0;
    rafId = requestAnimationFrame(loop);
  }

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

  root.addEventListener('click', function () { human(); setActive(!active); });
  root.addEventListener('keydown', function (e) {
    if (e.key === ' ' || e.key === 'Enter') { human(); }
  });

  setActive(true);
})();

// IdleBreathing — vanilla 판(run/371/demo/09-biometric-scan-idle-breathing/index.html) 의 React 포트.
// 계산 겹(사인 이징 호흡)은 useEffect 안에 있다: scale = 1 + AMPLITUDE*sin(t*OMEGA) 를 매 프레임
// 직접 계산해 아이콘에 적용한다 — 능선마다 위상차를 둬 밝기가 안에서 바깥으로 번진다.
import { useEffect, useRef, useState } from "react";
import styles from "./IdleBreathing.module.scss";

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

const RIDGE_D = [
  "M10,118 A50 46 0 0 1 110,118",
  "M16,118 A44 41 0 0 1 104,118",
  "M22,118 A38 36 0 0 1 98,118",
  "M28,118 A32 31 0 0 1 92,118",
  "M34,118 A26 26 0 0 1 86,118",
  "M40,118 A20 21 0 0 1 80,118",
  "M46,118 A14 16 0 0 1 74,118",
];

export default function IdleBreathing() {
  const rootRef = useRef(null) as unknown as Box<HTMLButtonElement>;
  const iconRef = useRef(null) as unknown as Box<SVGSVGElement>;
  const ridgesRef = useRef([]) as unknown as Box<(SVGPathElement | null)[]>;
  const [status, setStatus] = useState("대기 중");
  const [pressed, setPressed] = useState(true);

  useEffect(() => {
    const AMPLITUDE = 0.095;
    const OMEGA = 0.0026;
    const RIDGE_PHASE_STEP = 0.16;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    const root = rootRef.current;
    const icon = iconRef.current;
    if (!root || !icon) return;

    let isDemo = true;
    let active = true;
    let rafId = 0;
    let startTs = 0;

    function render(t: number) {
      const s = 1 + AMPLITUDE * Math.sin(t * OMEGA);
      icon!.style.transform = "scale(" + s.toFixed(4) + ")";
      const ridges = ridgesRef.current;
      for (let i = 0; i < ridges.length; i++) {
        const el = ridges[i];
        if (!el) continue;
        const phase = t * OMEGA + i * RIDGE_PHASE_STEP;
        const b = 0.5 + 0.5 * Math.sin(phase);
        el.style.opacity = b.toFixed(3);
      }
    }

    function resetIcon() {
      icon!.style.transform = "scale(1)";
      const ridges = ridgesRef.current;
      for (let i = 0; i < ridges.length; i++) {
        const el = ridges[i];
        if (el) el.style.opacity = "0.72";
      }
    }

    function loop(ts: number) {
      if (!startTs) startTs = ts;
      render(ts - startTs);
      rafId = requestAnimationFrame(loop);
    }

    function setActive(v: boolean) {
      active = v;
      setPressed(v);
      setStatus(v ? "대기 중" : "일시 정지됨");
      cancelAnimationFrame(rafId);
      if (!v) { resetIcon(); return; }
      if (reduce) { render(0); return; }
      startTs = 0;
      rafId = requestAnimationFrame(loop);
    }

    function human() { if (isDemo) { root!.classList.remove(styles.isDemo); isDemo = false; } }
    function onClick() { human(); setActive(!active); }
    function onKeyDown(e: KeyboardEvent) { if (e.key === " " || e.key === "Enter") human(); }
    root.addEventListener("click", onClick);
    root.addEventListener("keydown", onKeyDown);

    setActive(true);

    return () => {
      root.removeEventListener("click", onClick);
      root.removeEventListener("keydown", onKeyDown);
      cancelAnimationFrame(rafId);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={styles.breatheWrap}>
        <button
          type="button"
          className={styles.breathe + " " + styles.isDemo}
          ref={rootRef}
          aria-pressed={pressed}
        >
          <svg className={styles.icon} ref={iconRef} viewBox="0 0 120 130" aria-hidden="true">
            {RIDGE_D.map((d, i) => (
              <path
                key={i}
                className={styles.ridge}
                d={d}
                ref={(el: SVGPathElement | null) => { ridgesRef.current[i] = el; }}
              />
            ))}
          </svg>
          <span className={styles.label}>인증 대기</span>
        </button>
        <p className={styles.status}>{status}</p>
      </div>
    </main>
  );
}