06가로세로 방향 전환 — 그룹의 방향 값이 바뀌면 버튼들의 위치 값이 실측 좌표 사이를 이동해 줄이 다시 짜이는 방식

<main class="stage">
<div class="vhm" id="vhm">
  <div class="vhm__group" id="vhmGroup" role="group" aria-label="편집 도구"></div>
  <button class="vhm__toggle" id="vhmToggle" type="button" aria-pressed="false">방향 전환 ⤢</button>
</div>
</main>

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

// 계산 겹: index.html 의 flip() 이 방향 전환 전(First)·후(Last) 각 버튼의 실측 좌표 차를 구해
// transform 으로 상쇄한 뒤 되돌리는 FLIP 기법 — 레이아웃 속성 자체는 전환에만 한 번 바뀌고,
// 눈에 보이는 이동은 항상 transform 으로만 그린다.
@include stage($stage-yellow);

.vhm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-4;
  max-width: 100%;
}

.vhm__group {
  display: flex;
  flex-direction: row;
  gap: $sp-2;
  max-width: 100%;
  overflow-x: auto;
}

.vhm--vertical .vhm__group {
  flex-direction: column;
  overflow-x: visible;
}

.vhm__btn {
  appearance: none;
  border: none;
  border-radius: $r-sm;
  background: $subject-cream;
  color: $subject-ink;
  font-size: 13px;
  font-weight: 700;
  padding: $sp-2 $sp-4;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.vhm__toggle {
  appearance: none;
  border: 1px solid rgba($subject-ink, .24);
  border-radius: $r-pill;
  background: transparent;
  color: $subject-ink;
  font-size: 12px;
  font-weight: 600;
  padding: $sp-1 $sp-3;
  cursor: pointer;
}

@media (max-width: 340px) {
  .vhm__btn { font-size: 12px; padding: $sp-2 $sp-3; }
}

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

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);
}

.vhm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 100%;
}

.vhm__group {
  display: flex;
  flex-direction: row;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
}

.vhm--vertical .vhm__group {
  flex-direction: column;
  overflow-x: visible;
}

.vhm__btn {
  appearance: none;
  border: none;
  border-radius: 8px;
  background: #fff7e6;
  color: #17141a;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.vhm__toggle {
  appearance: none;
  border: 1px solid rgba(23, 20, 26, 0.24);
  border-radius: 999px;
  background: transparent;
  color: #17141a;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
}

@media (max-width: 340px) {
  .vhm__btn {
    font-size: 12px;
    padding: 8px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vhm__btn {
    transition: none !important;
  }
}

(function () {
  var LABELS = ['굵게', '기울임', '밑줄', '정렬'];
  var CYCLE_MS = 700; // 데모 자동 전환 주기 — 측정 창(2s) 안에 전환이 여러 번 들어오게 짧게 잡음
  var FLIP_MS = 480;
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var root = document.getElementById('vhm');
  var group = document.getElementById('vhmGroup');
  var toggle = document.getElementById('vhmToggle');
  var isDemo = true;
  var vertical = false;

  var btns = LABELS.map(function (label) {
    var b = document.createElement('button');
    b.type = 'button';
    b.className = 'vhm__btn';
    b.textContent = label;
    group.appendChild(b);
    return b;
  });

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

  // 계산 겹: FLIP — 전환 전(First) 각 버튼의 실측 좌표를 재고, 전환 후(Last) 좌표와의 차이(Invert)를
  // transform 으로 순간 상쇄한 뒤, 다음 프레임에 transform 을 0 으로 되돌려(Play) 자연스럽게 이어붙인다.
  function flip(apply) {
    var first = btns.map(function (b) { return b.getBoundingClientRect(); });
    apply();
    var last = btns.map(function (b) { return b.getBoundingClientRect(); });

    if (reduce) return; // 계산은 유지하되 즉시 반영, 애니메이션 생략

    btns.forEach(function (b, i) {
      var dx = first[i].left - last[i].left;
      var dy = first[i].top - last[i].top;
      if (!dx && !dy) return;
      b.style.transition = 'none';
      b.style.transform = 'translate(' + dx + 'px,' + dy + 'px)';
      // 강제 리플로우로 초기 transform 을 화면에 반영시킨 뒤에만 되돌리기 transition 이 재생된다.
      b.getBoundingClientRect();
      requestAnimationFrame(function () {
        b.style.transition = 'transform ' + FLIP_MS + 'ms cubic-bezier(.22,.9,.32,1)';
        b.style.transform = 'translate(0,0)';
      });
    });
  }

  function setOrientation(v) {
    flip(function () {
      vertical = v;
      root.classList.toggle('vhm--vertical', vertical);
      toggle.setAttribute('aria-pressed', String(vertical));
    });
  }

  toggle.addEventListener('click', function () {
    human();
    setOrientation(!vertical);
  });

  var start = 0;
  function loop(ts) {
    if (!start) start = ts;
    if (isDemo && !reduce) {
      var phaseVertical = (ts - start) % (CYCLE_MS * 2) >= CYCLE_MS;
      if (phaseVertical !== vertical) setOrientation(phaseVertical);
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
})();

import { useEffect, useRef } from 'react';
import styles from './OrientMorph.module.scss';

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

const LABELS = ['굵게', '기울임', '밑줄', '정렬'];
const CYCLE_MS = 700; // 데모 자동 전환 주기 — 측정 창(2s) 안에 전환이 여러 번 들어오게 짧게 잡음
const FLIP_MS = 480;

export default function OrientMorph() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const groupRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const toggleRef = useRef(null) as unknown as Box<HTMLButtonElement>;
  const btnRefs = useRef([]) as unknown as Box<HTMLButtonElement[]>;

  useEffect(() => {
    const root = rootRef.current;
    const toggle = toggleRef.current;
    const btns = btnRefs.current;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    let isDemo = true;
    let vertical = false;

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

    // 계산 겹: FLIP — 전환 전(First) 각 버튼의 실측 좌표를 재고, 전환 후(Last) 좌표와의 차이(Invert)를
    // transform 으로 순간 상쇄한 뒤, 다음 프레임에 transform 을 0 으로 되돌려(Play) 자연스럽게 이어붙인다.
    function flip(apply: () => void) {
      const first = btns.map((b) => b.getBoundingClientRect());
      apply();
      const last = btns.map((b) => b.getBoundingClientRect());

      if (reduce) return; // 계산은 유지하되 즉시 반영, 애니메이션 생략

      btns.forEach((b, i) => {
        const dx = first[i].left - last[i].left;
        const dy = first[i].top - last[i].top;
        if (!dx && !dy) return;
        b.style.transition = 'none';
        b.style.transform = `translate(${dx}px,${dy}px)`;
        b.getBoundingClientRect();
        requestAnimationFrame(() => {
          b.style.transition = `transform ${FLIP_MS}ms cubic-bezier(.22,.9,.32,1)`;
          b.style.transform = 'translate(0,0)';
        });
      });
    }

    function setOrientation(v: boolean) {
      flip(() => {
        vertical = v;
        root.classList.toggle(styles.vertical, vertical);
        toggle.setAttribute('aria-pressed', String(vertical));
      });
    }

    function onToggleClick() {
      human();
      setOrientation(!vertical);
    }
    toggle.addEventListener('click', onToggleClick);

    let start = 0;
    let raf = 0;
    function loop(ts: number) {
      if (!start) start = ts;
      if (isDemo && !reduce) {
        const phaseVertical = (ts - start) % (CYCLE_MS * 2) >= CYCLE_MS;
        if (phaseVertical !== vertical) setOrientation(phaseVertical);
      }
      raf = requestAnimationFrame(loop);
    }
    raf = requestAnimationFrame(loop);

    return () => {
      cancelAnimationFrame(raf);
      toggle.removeEventListener('click', onToggleClick);
    };
  }, []);

  return (
    <div className={`${styles.vhm} ${styles.isDemo}`} ref={(el: HTMLDivElement | null) => { if (el) rootRef.current = el; }}>
      <div
        className={styles.group}
        role="group"
        aria-label="편집 도구"
        ref={(el: HTMLDivElement | null) => { if (el) groupRef.current = el; }}
      >
        {LABELS.map((label, i) => (
          <button
            key={label}
            type="button"
            className={styles.btn}
            ref={(el: HTMLButtonElement | null) => { if (el) btnRefs.current[i] = el; }}
          >
            {label}
          </button>
        ))}
      </div>
      <button
        type="button"
        className={styles.toggle}
        aria-pressed="false"
        ref={(el: HTMLButtonElement | null) => { if (el) toggleRef.current = el; }}
      >
        방향 전환 ⤢
      </button>
    </div>
  );
}