06실측 높이 값이 접었다 펴는 세로 아코디언 패널

<main class="stage">
<div class="va is-demo" id="va">
  <div class="va__tabs" role="tablist" aria-label="FAQ 탭">
    <button type="button" class="va__tab is-active" role="tab" id="va-tab-0" aria-selected="true" aria-controls="va-panel-0" data-idx="0">배송</button>
    <button type="button" class="va__tab" role="tab" id="va-tab-1" aria-selected="false" aria-controls="va-panel-1" data-idx="1" tabindex="-1">환불</button>
    <button type="button" class="va__tab" role="tab" id="va-tab-2" aria-selected="false" aria-controls="va-panel-2" data-idx="2" tabindex="-1">문의</button>
  </div>
  <div class="va__list" id="vaList">
    <div class="va__panel" id="va-panel-0" role="tabpanel" aria-labelledby="va-tab-0" tabindex="0">
      <div class="va__inner">
        <p class="va__q">배송은 얼마나 걸리나요?</p>
        <p class="va__a">주문 확인 후 1~2영업일 안에 출고되며, 평균 도착까지 2~4일이 걸립니다. 출고 뒤에는 문자로 송장 번호를 안내합니다.</p>
      </div>
    </div>
    <div class="va__panel" id="va-panel-1" role="tabpanel" aria-labelledby="va-tab-1" tabindex="0" hidden>
      <div class="va__inner">
        <p class="va__q">환불은 어떻게 하나요?</p>
        <p class="va__a">수령일 기준 7일 이내 신청하면 됩니다. 포장을 개봉하지 않은 상태라면 왕복 배송비 없이 전액 환불되며, 개봉한 경우에도 하자 확인 뒤 부분 환불이 가능합니다. 신청 뒤 처리까지 평균 3일이 걸립니다.</p>
      </div>
    </div>
    <div class="va__panel" id="va-panel-2" role="tabpanel" aria-labelledby="va-tab-2" tabindex="0" hidden>
      <div class="va__inner">
        <p class="va__q">문의는 어디로 남기나요?</p>
        <p class="va__a">고객센터 채팅으로 남겨주세요. 평일 오전 9시부터 오후 6시까지 순서대로 답변합니다.</p>
      </div>
    </div>
  </div>
  <p class="va__meta">실측 높이 <b id="vaH">0</b>px</p>
</div>
</main>

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

// 계산 겹: index.html 의 measure() 가 patterns[i].firstElementChild.scrollHeight 로 실측 콘텐츠 높이(px)를
// 구해 openPanel() 이 max-height 목표값으로 쓴다. 선택 안 된 패널은 max-height:0 으로 접힌다.
@include stage($stage-yellow);

.va { width: min(100%, 320px); min-width: 0; display: flex; flex-direction: column; gap: $sp-3; }
.va__tabs { display: flex; gap: $sp-1; background: rgba($subject-ink, .1); padding: $sp-1; border-radius: $r-pill; }
.va__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-ink, .68);
}
.va__tab.is-active { background: $subject-ink; color: $stage-yellow; }
.va__tab:focus-visible { outline: 2px solid $subject-ink; outline-offset: 2px; }

.va__list { min-width: 0; border-radius: $r-card; background: rgba($subject-ink, .06); }
.va__panel {
  overflow: hidden; max-height: 0; transition: max-height $dur-base $ease-out;
}
.va__inner { box-sizing: border-box; padding: $sp-4; display: flex; flex-direction: column; gap: $sp-2; }
.va__q { margin: 0; font-size: 13px; font-weight: 800; color: $subject-ink; }
.va__a { margin: 0; font-size: 12px; line-height: 1.6; color: rgba($subject-ink, .72); }

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

@media (max-width: 340px) {
  .va { width: 100%; gap: $sp-2; }
  .va__tab { padding: $sp-1 $sp-2; }
  .va__inner { padding: $sp-3; gap: $sp-1; }
  .va__q { font-size: 12px; }
  .va__a { font-size: 11px; }
}

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

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

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

.va__tabs {
  display: flex;
  gap: 4px;
  background: rgba(23, 20, 26, 0.1);
  padding: 4px;
  border-radius: 999px;
}

.va__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(23, 20, 26, 0.68);
}

.va__tab.is-active {
  background: #17141a;
  color: #ffd23f;
}

.va__tab:focus-visible {
  outline: 2px solid #17141a;
  outline-offset: 2px;
}

.va__list {
  min-width: 0;
  border-radius: 16px;
  background: rgba(23, 20, 26, 0.06);
}

.va__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 300ms ease-out;
}

.va__inner {
  box-sizing: border-box;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.va__q {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #17141a;
}

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

.va__meta {
  margin: 0;
  font-size: 11px;
  color: rgba(23, 20, 26, 0.64);
  text-align: center;
}

.va__meta b {
  color: #17141a;
  font-weight: 700;
}

@media (max-width: 340px) {
  .va {
    width: 100%;
    gap: 8px;
  }
  .va__tab {
    padding: 4px 8px;
  }
  .va__inner {
    padding: 12px;
    gap: 4px;
  }
  .va__q {
    font-size: 12px;
  }
  .va__a {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .va__panel {
    transition: none;
  }
}

(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var COUNT = 3;
  var HOLD_MS = 900;

  var root = document.getElementById('va');
  var hEl = document.getElementById('vaH');
  var tabs = [0, 1, 2].map(function (i) { return document.getElementById('va-tab-' + i); });
  var panels = [0, 1, 2].map(function (i) { return document.getElementById('va-panel-' + i); });

  var isDemo = true;
  var active = 0;

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

  function measure(el) {
    return el.firstElementChild.scrollHeight; // 계산 겹: 콘텐츠 실측 높이(px) — max-height 목표값
  }

  function openPanel(el, instant) {
    el.removeAttribute('hidden');
    var h = measure(el);
    if (instant) { el.style.transition = 'none'; }
    el.style.maxHeight = h + 'px';
    if (instant) { el.getBoundingClientRect(); el.style.transition = ''; }
    hEl.textContent = String(h);
  }

  function onCollapseEnd(e) {
    if (e.propertyName !== 'max-height') return;
    var el = e.currentTarget;
    if (el.style.maxHeight === '0px') el.setAttribute('hidden', '');
  }

  function closePanel(el, instant) {
    if (instant) { el.style.transition = 'none'; }
    el.style.maxHeight = '0px';
    if (instant) { el.getBoundingClientRect(); el.style.transition = ''; el.setAttribute('hidden', ''); }
  }

  function select(idx) {
    if (idx === active) return;
    closePanel(panels[active]);
    openPanel(panels[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');
    active = idx;
  }

  panels.forEach(function (p) { p.addEventListener('transitionend', onCollapseEnd); });

  // 초기: panel 0 만 실측 높이로 즉시 펼침(전환 억제) — 나머지는 접힌 채 hidden 유지
  openPanel(panels[0], true);

  tabs.forEach(function (t, i) {
    t.addEventListener('click', function () { human(); select(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 });
    select(next);
  });

  window.addEventListener('resize', function () {
    // 계산 겹: 폭이 바뀌면 텍스트 줄바꿈이 바뀌어 실측 높이도 바뀐다 — 열린 패널만 재측정해 반영
    var h = measure(panels[active]);
    panels[active].style.maxHeight = h + 'px';
    hEl.textContent = String(h);
  });

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

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

// TabVerticalAccordionSwap — vanilla 판(run/394/demo/06-tab-panel-vertical-accordion-swap/index.html) 의 React 포트.
// measure() 가 콘텐츠의 scrollHeight(px) 를 실측해 openPanel() 이 max-height 목표값으로 쓴다.
// 선택 안 된 패널은 max-height:0 으로 접힌다(transition-suppress 로 초기 펼침은 즉시 처리).
import { useEffect, useRef } from "react";
import styles from "./TabVerticalAccordionSwap.module.scss";

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

const HOLD_MS = 900;
const COUNT = 3;

export default function TabVerticalAccordionSwap() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const hEl = useRef(null) as unknown as Box<HTMLElement>;
  const tabRefs = useRef([null, null, null]) as unknown as Box<(HTMLButtonElement | null)[]>;
  const panelRefs = useRef([null, null, null]) as unknown as Box<(HTMLDivElement | null)[]>;
  const innerRefs = useRef([null, null, null]) as unknown as Box<(HTMLDivElement | null)[]>;
  const timerRef = useRef(0) as unknown as Box<number>;

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

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

    function measure(i: number) {
      const inner = innerRefs.current[i];
      return inner ? inner.scrollHeight : 0; // 계산 겹: 콘텐츠 실측 높이(px)
    }

    function onCollapseEnd(e: TransitionEvent) {
      if (e.propertyName !== "max-height") return;
      const el = e.currentTarget as HTMLDivElement;
      if (el.style.maxHeight === "0px") el.setAttribute("hidden", "");
    }

    function openPanel(i: number, instant?: boolean) {
      const el = panelRefs.current[i];
      if (!el) return;
      el.removeAttribute("hidden");
      const h = measure(i);
      if (instant) el.style.transition = "none";
      el.style.maxHeight = h + "px";
      if (instant) { el.getBoundingClientRect(); el.style.transition = ""; }
      if (hEl.current) hEl.current.textContent = String(h);
    }

    function closePanel(i: number) {
      const el = panelRefs.current[i];
      if (!el) return;
      el.style.maxHeight = "0px";
    }

    function select(idx: number) {
      if (idx === active) return;
      closePanel(active);
      openPanel(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");
      active = idx;
    }

    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 });
      select(next);
    }

    function onResize() {
      // 계산 겹: 폭이 바뀌면 줄바꿈이 바뀌어 실측 높이도 바뀐다 — 열린 패널만 재측정해 반영
      const h = measure(active);
      const el = panelRefs.current[active];
      if (el) el.style.maxHeight = h + "px";
      if (hEl.current) hEl.current.textContent = String(h);
    }

    function onTabClick(i: number) { return () => { human(); select(i); }; }
    const clickHandlers = [0, 1, 2].map(onTabClick);
    tabRefs.current.forEach((t, i) => t?.addEventListener("click", clickHandlers[i]));
    rootRef.current?.addEventListener("keydown", onKeydown);
    panelRefs.current.forEach((p) => p?.addEventListener("transitionend", onCollapseEnd as EventListener));
    window.addEventListener("resize", onResize);

    openPanel(0, true);

    function loop() {
      if (!isDemo) return;
      select((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);
      window.removeEventListener("resize", onResize);
      tabRefs.current.forEach((t, i) => t?.removeEventListener("click", clickHandlers[i]));
      rootRef.current?.removeEventListener("keydown", onKeydown);
      panelRefs.current.forEach((p) => p?.removeEventListener("transitionend", onCollapseEnd as EventListener));
    };
  }, []);

  const faqs = [
    { name: "배송", q: "배송은 얼마나 걸리나요?", a: "주문 확인 후 1~2영업일 안에 출고되며, 평균 도착까지 2~4일이 걸립니다. 출고 뒤에는 문자로 송장 번호를 안내합니다." },
    { name: "환불", q: "환불은 어떻게 하나요?", a: "수령일 기준 7일 이내 신청하면 됩니다. 포장을 개봉하지 않은 상태라면 왕복 배송비 없이 전액 환불되며, 개봉한 경우에도 하자 확인 뒤 부분 환불이 가능합니다. 신청 뒤 처리까지 평균 3일이 걸립니다." },
    { name: "문의", q: "문의는 어디로 남기나요?", a: "고객센터 채팅으로 남겨주세요. 평일 오전 9시부터 오후 6시까지 순서대로 답변합니다." },
  ];

  return (
    <main className={styles.stage}>
      <div className={styles.va + " " + styles.isDemo} ref={rootRef}>
        <div className={styles.tabs} role="tablist" aria-label="FAQ 탭">
          {faqs.map((f, i) => (
            <button
              key={f.name}
              type="button"
              className={styles.tab + (i === 0 ? " " + styles.isActive : "")}
              role="tab"
              aria-selected={i === 0 ? "true" : "false"}
              tabIndex={i === 0 ? 0 : -1}
              ref={(el: HTMLButtonElement | null) => { tabRefs.current[i] = el; }}
            >{f.name}</button>
          ))}
        </div>
        <div className={styles.list}>
          {faqs.map((f, i) => (
            <div
              key={f.name}
              className={styles.panel}
              role="tabpanel"
              tabIndex={0}
              hidden={i !== 0}
              ref={(el: HTMLDivElement | null) => { panelRefs.current[i] = el; }}
            >
              <div className={styles.inner} ref={(el: HTMLDivElement | null) => { innerRefs.current[i] = el; }}>
                <p className={styles.q}>{f.q}</p>
                <p className={styles.a}>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
        <p className={styles.meta}>
          실측 높이 <b ref={hEl}>0</b>px
        </p>
      </div>
    </main>
  );
}