07進行度の角度値が裏返す3D回転パネル

<main class="stage">
<div class="fp is-demo" id="fp">
  <div class="fp__tabs" role="tablist" aria-label="ダッシュボードタブ">
    <button type="button" class="fp__tab is-active" role="tab" id="fp-tab-0" aria-selected="true" aria-controls="fpFront" data-idx="0">概要</button>
    <button type="button" class="fp__tab" role="tab" id="fp-tab-1" aria-selected="false" aria-controls="fpFront" data-idx="1" tabindex="-1">詳細</button>
    <button type="button" class="fp__tab" role="tab" id="fp-tab-2" aria-selected="false" aria-controls="fpFront" data-idx="2" tabindex="-1">メモ</button>
  </div>
  <div class="fp__persp">
    <div class="fp__card" id="fpCard">
      <div class="fp__face fp__face--front" id="fpFront" role="tabpanel" tabindex="0" aria-labelledby="fp-tab-0">
        <span class="fp__num" id="fpFrontNum">01</span>
        <p class="fp__line" id="fpFrontLine">主要指標を一目で</p>
      </div>
      <div class="fp__face fp__face--back" id="fpBack" aria-hidden="true">
        <span class="fp__num" id="fpBackNum">02</span>
        <p class="fp__line" id="fpBackLine">項目別数値全体</p>
      </div>
    </div>
  </div>
  <p class="fp__meta">回転角 <b id="fpAngle">0</b>度</p>
</div>
</main>

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

// 계산 겹: index.html 의 tickAngle() 이 실측 경과시간/총시간 = t(0~1) 을 0~180도 rotateY 각도로 바꿔 표시하고,
// 실제 회전은 card 의 transform: rotateY(dir*180deg) transition 이 구동한다(dir 은 목표 인덱스 부호).
// backface-visibility:hidden 덕에 90도를 넘는 순간 앞면은 자동으로 숨고 뒷면이 이어받는다.
@include stage($stage-orange);

.fp { width: min(100%, 300px); min-width: 0; display: flex; flex-direction: column; gap: $sp-3; }
.fp__tabs { display: flex; gap: $sp-1; background: rgba($subject-cream, .18); padding: $sp-1; border-radius: $r-pill; }
.fp__tab {
  flex: 1 1 0; border: none; background: transparent; border-radius: $r-pill; cursor: pointer;
  padding: $sp-2 $sp-2; font-size: 11px; font-weight: 700; color: rgba($subject-cream, .8);
}
.fp__tab.is-active { background: $subject-cream; color: $subject-orange-deep; }
.fp__tab:focus-visible { outline: 2px solid $subject-cream; outline-offset: 2px; }

.fp__persp { min-width: 0; height: 140px; perspective: 900px; }
.fp__card {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform $dur-enter $ease-out;
}
.fp__face {
  position: absolute; inset: 0; box-sizing: border-box; padding: $sp-4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: $sp-2;
  border-radius: $r-card; background: $subject-cream; box-shadow: 0 6px 18px rgba($subject-ink, .16);
  backface-visibility: hidden;
}
.fp__face--back { transform: rotateY(180deg); }
.fp__num { font-size: 30px; font-weight: 800; color: $subject-orange-deep; }
.fp__line { margin: 0; font-size: 12px; color: rgba($subject-ink, .72); }

.fp__meta { margin: 0; font-size: 11px; color: rgba($subject-cream, .84); text-align: center; }
.fp__meta b { color: $subject-cream; font-weight: 700; }

@media (max-width: 340px) {
  .fp { width: 100%; gap: $sp-2; }
  .fp__tab { padding: $sp-1 $sp-2; }
  .fp__persp { height: 96px; }
  .fp__num { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp__card { 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);
}

.fp {
  width: min(100%, 300px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fp__tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 247, 230, 0.18);
  padding: 4px;
  border-radius: 999px;
}

.fp__tab {
  flex: 1 1 0;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  padding: 8px 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 247, 230, 0.8);
}

.fp__tab.is-active {
  background: #fff7e6;
  color: #c93000;
}

.fp__tab:focus-visible {
  outline: 2px solid #fff7e6;
  outline-offset: 2px;
}

.fp__persp {
  min-width: 0;
  height: 140px;
  perspective: 900px;
}

.fp__card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 600ms ease-out;
}

.fp__face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 16px;
  background: #fff7e6;
  box-shadow: 0 6px 18px rgba(23, 20, 26, 0.16);
  backface-visibility: hidden;
}

.fp__face--back {
  transform: rotateY(180deg);
}

.fp__num {
  font-size: 30px;
  font-weight: 800;
  color: #c93000;
}

.fp__line {
  margin: 0;
  font-size: 12px;
  color: rgba(23, 20, 26, 0.72);
}

.fp__meta {
  margin: 0;
  font-size: 11px;
  color: rgba(255, 247, 230, 0.84);
  text-align: center;
}

.fp__meta b {
  color: #fff7e6;
  font-weight: 700;
}

@media (max-width: 340px) {
  .fp {
    width: 100%;
    gap: 8px;
  }
  .fp__tab {
    padding: 4px 8px;
  }
  .fp__persp {
    height: 96px;
  }
  .fp__num {
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fp__card {
    transition: none;
  }
}

(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var DUR_MS = 600;
  var HOLD_MS = 900;
  var COUNT = 3;
  var cats = [
    { name: '概要', num: '01', line: '主要指標を一目で' },
    { name: '詳細', num: '02', line: '項目別数値全体' },
    { name: 'メモ', num: '03', line: '作成したメモ一覧' }
  ];

  var root = document.getElementById('fp');
  var card = document.getElementById('fpCard');
  var angleEl = document.getElementById('fpAngle');
  var frontNum = document.getElementById('fpFrontNum');
  var frontLine = document.getElementById('fpFrontLine');
  var backNum = document.getElementById('fpBackNum');
  var backLine = document.getElementById('fpBackLine');
  var tabs = [0, 1, 2].map(function (i) { return document.getElementById('fp-tab-' + i); });

  var isDemo = true;
  var active = 0;
  var busy = false;
  var raf = 0;

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

  function renderFace(numEl, lineEl, idx) {
    numEl.textContent = cats[idx].num;
    lineEl.textContent = cats[idx].line;
  }

  function tickAngle(start, dir) {
    function step(ts) {
      var t = Math.min(1, (ts - start) / DUR_MS); // 계산 겹: 실측 경과시간 / 총 시간 = 진행률 t(0~1)
      var angle = Math.round(t * 180); // 계산 겹: 진행률을 0~180度 rotateY 각도 값으로 변환
      angleEl.textContent = String(angle);
      if (t < 1 && busy) { raf = requestAnimationFrame(step); } else { raf = 0; }
    }
    raf = requestAnimationFrame(step);
  }

  function flipTo(idx) {
    if (idx === active || busy) return;
    busy = true;
    var dir = idx > active ? 1 : -1; // 계산 겹: 목표 인덱스와의 부호로 회전 방향(시계/반시계) 결정
    renderFace(backNum, backLine, idx);

    tabs[active].classList.remove('is-active');
    tabs[active].setAttribute('aria-selected', 'false');
    tabs[active].setAttribute('tabindex', '-1');
    tabs[idx].classList.add('is-active');
    tabs[idx].setAttribute('aria-selected', 'true');
    tabs[idx].setAttribute('tabindex', '0');

    var startTs = performance.now();
    requestAnimationFrame(function () {
      card.style.transform = 'rotateY(' + (dir * 180) + 'deg)';
    });
    tickAngle(startTs, dir);

    function onEnd(e) {
      if (e.propertyName !== 'transform') return;
      card.removeEventListener('transitionend', onEnd);
      card.style.transition = 'none';
      card.style.transform = 'rotateY(0deg)';
      card.getBoundingClientRect();
      card.style.transition = '';
      renderFace(frontNum, frontLine, idx);
      document.getElementById('fpFront').setAttribute('aria-labelledby', 'fp-tab-' + idx);
      active = idx;
      busy = false;
      angleEl.textContent = '0';
    }
    card.addEventListener('transitionend', onEnd);
  }

  tabs.forEach(function (t, i) {
    t.addEventListener('click', function () { human(); flipTo(i); });
  });

  root.addEventListener('keydown', function (e) {
    var idx = tabs.indexOf(document.activeElement);
    if (idx === -1) return;
    var next = null;
    if (e.key === 'ArrowRight') next = (idx + 1) % COUNT;
    else if (e.key === 'ArrowLeft') next = (idx - 1 + COUNT) % COUNT;
    else if (e.key === 'Home') next = 0;
    else if (e.key === 'End') next = COUNT - 1;
    if (next === null) return;
    e.preventDefault();
    human();
    tabs[next].focus({ preventScroll: true });
    flipTo(next);
  });

  function loop() {
    if (!isDemo) return;
    flipTo((active + 1) % COUNT);
    window.setTimeout(loop, HOLD_MS);
  }

  if (!reduce) {
    window.setTimeout(loop, HOLD_MS);
  } else {
    root.classList.remove('is-demo');
  }
})();

// TabFlipRotate — vanilla 판(run/394/demo/07-tab-panel-3d-flip-rotate/index.html) 의 React 포트.
// tickAngle() 이 실측 경과시간/총시간 = t(0~1) 을 0~180도 rotateY 각도로 바꿔 표시하고, 실제 회전은
// card 의 transform: rotateY(dir*180deg) transition 이 구동한다(dir 은 목표 인덱스 부호).
import { useEffect, useRef } from "react";
import styles from "./TabFlipRotate.module.scss";

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

const DUR_MS = 600;
const HOLD_MS = 900;
const COUNT = 3;

const cats = [
  { name: "요약", num: "01", line: "핵심 지표 한눈에" },
  { name: "상세", num: "02", line: "항목별 수치 전체" },
  { name: "메모", num: "03", line: "작성한 메모 목록" },
];

export default function TabFlipRotate() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const cardRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const angleEl = useRef(null) as unknown as Box<HTMLElement>;
  const frontEl = useRef(null) as unknown as Box<HTMLDivElement>;
  const frontNumEl = useRef(null) as unknown as Box<HTMLElement>;
  const frontLineEl = useRef(null) as unknown as Box<HTMLElement>;
  const backNumEl = useRef(null) as unknown as Box<HTMLElement>;
  const backLineEl = useRef(null) as unknown as Box<HTMLElement>;
  const tabRefs = useRef([null, null, null]) as unknown as Box<(HTMLButtonElement | null)[]>;
  const timerRef = useRef(0) as unknown as Box<number>;
  const rafRef = useRef(0) as unknown as Box<number>;

  useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let isDemo = true;
    let active = 0;
    let busy = false;

    function human() {
      if (isDemo) { rootRef.current?.classList.remove(styles.isDemo); isDemo = false; }
    }

    function renderFace(numEl: HTMLElement | null, lineEl: HTMLElement | null, idx: number) {
      if (numEl) numEl.textContent = cats[idx].num;
      if (lineEl) lineEl.textContent = cats[idx].line;
    }

    function tickAngle(start: number) {
      function step(ts: number) {
        const t = Math.min(1, (ts - start) / DUR_MS); // 계산 겹: 실측 경과시간 / 총 시간 = 진행률 t(0~1)
        const angle = Math.round(t * 180); // 계산 겹: 진행률을 0~180도 rotateY 각도 값으로 변환
        if (angleEl.current) angleEl.current.textContent = String(angle);
        if (t < 1 && busy) { rafRef.current = requestAnimationFrame(step); } else { rafRef.current = 0; }
      }
      rafRef.current = requestAnimationFrame(step);
    }

    function onEnd(e: TransitionEvent) {
      if (e.propertyName !== "transform") return;
      const card = cardRef.current;
      card.removeEventListener("transitionend", onEnd as EventListener);
      card.style.transition = "none";
      card.style.transform = "rotateY(0deg)";
      card.getBoundingClientRect();
      card.style.transition = "";
      renderFace(frontNumEl.current, frontLineEl.current, pendingIdx);
      frontEl.current?.setAttribute("aria-labelledby", "fp-tab-" + pendingIdx);
      active = pendingIdx;
      busy = false;
      if (angleEl.current) angleEl.current.textContent = "0";
    }

    let pendingIdx = 0;

    function flipTo(idx: number) {
      if (idx === active || busy) return;
      busy = true;
      pendingIdx = idx;
      const dir = idx > active ? 1 : -1; // 계산 겹: 목표 인덱스와의 부호로 회전 방향 결정
      renderFace(backNumEl.current, backLineEl.current, idx);

      const prevTab = tabRefs.current[active], nextTab = tabRefs.current[idx];
      prevTab?.classList.remove(styles.isActive);
      prevTab?.setAttribute("aria-selected", "false");
      prevTab?.setAttribute("tabindex", "-1");
      nextTab?.classList.add(styles.isActive);
      nextTab?.setAttribute("aria-selected", "true");
      nextTab?.setAttribute("tabindex", "0");

      const startTs = performance.now();
      const card = cardRef.current;
      requestAnimationFrame(() => {
        card.style.transform = "rotateY(" + dir * 180 + "deg)";
      });
      tickAngle(startTs);
      card.addEventListener("transitionend", onEnd as EventListener);
    }

    function onKeydown(e: KeyboardEvent) {
      const idx = tabRefs.current.indexOf(document.activeElement as HTMLButtonElement);
      if (idx === -1) return;
      let next: number | null = null;
      if (e.key === "ArrowRight") next = (idx + 1) % COUNT;
      else if (e.key === "ArrowLeft") next = (idx - 1 + COUNT) % COUNT;
      else if (e.key === "Home") next = 0;
      else if (e.key === "End") next = COUNT - 1;
      if (next === null) return;
      e.preventDefault();
      human();
      tabRefs.current[next]?.focus({ preventScroll: true });
      flipTo(next);
    }

    function onTabClick(i: number) { return () => { human(); flipTo(i); }; }
    const clickHandlers = [0, 1, 2].map(onTabClick);
    tabRefs.current.forEach((t, i) => t?.addEventListener("click", clickHandlers[i]));
    rootRef.current?.addEventListener("keydown", onKeydown);

    function loop() {
      if (!isDemo) return;
      flipTo((active + 1) % COUNT);
      timerRef.current = window.setTimeout(loop, HOLD_MS);
    }

    if (!reduce) {
      timerRef.current = window.setTimeout(loop, HOLD_MS);
    } else {
      rootRef.current?.classList.remove(styles.isDemo);
    }

    return () => {
      window.clearTimeout(timerRef.current);
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      tabRefs.current.forEach((t, i) => t?.removeEventListener("click", clickHandlers[i]));
      rootRef.current?.removeEventListener("keydown", onKeydown);
      cardRef.current?.removeEventListener("transitionend", onEnd as EventListener);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={styles.fp + " " + styles.isDemo} ref={rootRef}>
        <div className={styles.tabs} role="tablist" aria-label="대시보드 탭">
          {cats.map((c, i) => (
            <button
              key={c.name}
              type="button"
              className={styles.tab + (i === 0 ? " " + styles.isActive : "")}
              role="tab"
              id={"fp-tab-" + i}
              aria-selected={i === 0 ? "true" : "false"}
              aria-controls="fpFrontReact"
              tabIndex={i === 0 ? 0 : -1}
              ref={(el: HTMLButtonElement | null) => { tabRefs.current[i] = el; }}
            >{c.name}</button>
          ))}
        </div>
        <div className={styles.persp}>
          <div className={styles.card} ref={cardRef}>
            <div
              className={styles.face + " " + styles.faceFront}
              id="fpFrontReact"
              role="tabpanel"
              tabIndex={0}
              aria-labelledby="fp-tab-0"
              ref={frontEl}
            >
              <span className={styles.num} ref={frontNumEl}>01</span>
              <p className={styles.line} ref={frontLineEl}>핵심 지표 한눈에</p>
            </div>
            <div className={styles.face + " " + styles.faceBack} aria-hidden="true">
              <span className={styles.num} ref={backNumEl}>02</span>
              <p className={styles.line} ref={backLineEl}>항목별 수치 전체</p>
            </div>
          </div>
        </div>
        <p className={styles.meta}>
          회전각 <b ref={angleEl}>0</b>도
        </p>
      </div>
    </main>
  );
}