07Side drawer that slides in from the right

<main class="stage">
  <section class="frame is-demo" id="sdr" aria-label="Drawer">
    <div class="page" id="sdr-page">
      <header class="bar">
        <p class="brand">Drawer</p>
        <button class="burger" id="sdr-open" type="button" aria-label="Open menu" aria-controls="sdr-drawer">
          <svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="M216 64v128H40V64Z" opacity=".2"/><path d="M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8M40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16m176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16"/></g></svg>
        </button>
      </header>
      <div class="body">
        <p class="skeleton" aria-hidden="true"></p>
        <ul class="cards">
          <li class="card"><span class="sw sw--a" aria-hidden="true"></span><span class="nm">Hat 12,000</span></li>
          <li class="card"><span class="sw sw--b" aria-hidden="true"></span><span class="nm">Sock set 8,000</span></li>
          <li class="card"><span class="sw sw--c" aria-hidden="true"></span><span class="nm">Mug 6,500</span></li>
        </ul>
      </div>
    </div>
    <div class="veil" id="sdr-veil"></div>
    <aside class="drawer" id="sdr-drawer" aria-label="My drawer" aria-hidden="true">
      <header class="head">
        <p class="title">My drawer</p>
        <button class="xbtn" id="sdr-close" type="button" aria-label="Close">
          <svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="M216 56v144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16" opacity=".2"/><path d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/></g></svg>
        </button>
      </header>
      <ul class="menu">
        <li><button type="button"><span>Orders</span><svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="m176 128l-80 80V48Z" opacity=".2"/><path d="m181.66 122.34l-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z"/></g></svg></button></li>
        <li><button type="button"><span>Saved items</span><svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="m176 128l-80 80V48Z" opacity=".2"/><path d="m181.66 122.34l-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z"/></g></svg></button></li>
        <li><button type="button"><span>Addresses</span><svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="m176 128l-80 80V48Z" opacity=".2"/><path d="m181.66 122.34l-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z"/></g></svg></button></li>
        <li><button type="button"><span>Coupons</span><svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="m176 128l-80 80V48Z" opacity=".2"/><path d="m181.66 122.34l-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z"/></g></svg></button></li>
        <li><button type="button"><span>Settings</span><svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="m176 128l-80 80V48Z" opacity=".2"/><path d="m181.66 122.34l-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z"/></g></svg></button></li>
      </ul>
    </aside>
  </section>
</main>

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

$duration: $dur-loop;
$easing: $ease-spring;
$color: $stage-orange;

@include stage($stage-orange);

$ink: $subject-ink;
$cream: $subject-cream;
$line: rgba(23, 20, 26, .12);
$hover: rgba(23, 20, 26, .06);

// ── 프레임: 오렌지 무대 위 크림 카드 ────────────────
.frame {
  position: relative;
  overflow: hidden;                 // 드로어가 튀어나가지 않게 프레임에서 자른다
  box-sizing: border-box;
  width: min(420px, 94vw);
  height: min(260px, 84vh);
  border-radius: $r-card;
  background: $cream;
  color: $ink;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  font-size: 12px;
  line-height: 1.35;
}
.frame, .frame * { box-sizing: border-box; }

.page { display: flex; flex-direction: column; height: 100%; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $sp-2 $sp-3;
}
.brand { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .02em; }

.burger, .xbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid $line;
  border-radius: $r-control;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.burger:focus-visible, .xbtn:focus-visible { outline: 2px solid $color; outline-offset: 2px; }

// 본문 흉내 — 회색 막대 하나와 상품 카드 3장
.body {
  display: grid;
  align-content: start;
  gap: $sp-2;
  padding: 0 $sp-3 $sp-3;
}
.skeleton {
  height: 10px;
  margin: 0;
  border-radius: $r-pill;
  background: rgba(23, 20, 26, .14);
}
.cards { display: grid; gap: $sp-2; margin: 0; padding: 0; list-style: none; }
.card {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: $sp-2;
  height: 40px;
  padding: 0 $sp-2;
  border: 1px solid $line;
  border-radius: $r-sm;
  background: $stage-paper;
}
.sw { width: 20px; height: 20px; border-radius: $r-xs; }
.sw--a { background: rgba(255, 77, 31, .25); }
.sw--b { background: rgba(47, 109, 246, .22); }
.sw--c { background: rgba(76, 212, 166, .28); }
.nm { font-weight: 600; }

// ── 오버레이 + 드로어 ────────────────────────────
.veil {
  position: absolute;
  inset: 0;
  background: rgba(23, 20, 26, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity $dur-base $easing;
}
.frame.is-open .veil { opacity: 1; pointer-events: auto; }

.drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(240px, 72%);
  padding: $sp-2 $sp-3;
  border-left: 1px solid $line;
  background: $cream;
  box-shadow: -18px 0 32px rgba(23, 20, 26, .28);
  transform: translateX(100%);       // 닫힘 — 프레임 오른쪽 밖
  transition: transform $dur-base $easing;
}
.frame.is-open .drawer { transform: translateX(0); }

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 $sp-2;
}
.title { margin: 0; font-size: 13px; font-weight: 700; }

.menu { display: grid; gap: $sp-1; margin: 0; padding: 0; list-style: none; }
.menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $sp-2;
  height: 32px;
  margin: 0;
  padding: 0 $sp-2;
  border: 0;
  border-radius: $r-control;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.menu button:hover { background: $hover; }
.menu button:focus-visible { outline: 2px solid $color; outline-offset: 2px; }

// 메뉴 시차 등장 — 정적 경로(사람이 열 때)는 transition 지연으로 배치
.menu li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity $dur-quick $easing, transform $dur-quick $easing;
}
.frame.is-open .menu li { opacity: 1; transform: translateY(0); }
.frame.is-open .menu li:nth-child(2) { transition-delay: 40ms, 40ms; }
.frame.is-open .menu li:nth-child(3) { transition-delay: 80ms, 80ms; }
.frame.is-open .menu li:nth-child(4) { transition-delay: 120ms, 120ms; }
.frame.is-open .menu li:nth-child(5) { transition-delay: 160ms, 160ms; }

// ── 격자 미리보기 전용 2초 루프 ─────────────────────
// 0-8% 닫힘 → 10% 드로어 슬라이드 인 → 16-50% 메뉴 시차 등장 → 78% 유지 → 80-88% 짧은 닫힘.
// 등장과 목록이 주인공이라 닫힘은 8% 안에 끝낸다. 켜짐·꺼짐은 steps 컷, 자리잡기는 transform 짝.
@keyframes sdr-press {
  0%, 4% { transform: translateY(0); }
  6% { transform: translateY(2px); }
  8%, 100% { transform: translateY(0); }
}
@keyframes sdr-xpress {
  0%, 76% { transform: translateY(0); }
  78% { transform: translateY(2px); }
  80%, 100% { transform: translateY(0); }
}
@keyframes sdr-drawer {
  0%, 10% { transform: translateX(100%); }
  22%, 80% { transform: translateX(0); }
  88%, 100% { transform: translateX(100%); }
}
@keyframes sdr-veil {
  0%, 10% { opacity: 0; }
  22%, 80% { opacity: 1; }
  88%, 100% { opacity: 0; }
}
@keyframes sdr-item-cut {
  0%, 16% { opacity: 0; }
  16.1%, 100% { opacity: 1; }
}
@keyframes sdr-item-rise {
  0%, 16% { transform: translateY(8px); }
  26%, 100% { transform: translateY(0); }
}

.frame.is-demo {
  .burger {
    animation-name: sdr-press;
    animation-duration: $duration;
    animation-timing-function: $easing;
    animation-iteration-count: infinite;
  }
  .xbtn {
    animation-name: sdr-xpress;
    animation-duration: $duration;
    animation-timing-function: $easing;
    animation-iteration-count: infinite;
  }
  .drawer {
    animation-name: sdr-drawer;
    animation-duration: $duration;
    animation-timing-function: $easing;
    animation-iteration-count: infinite;
  }
  .veil {
    animation-name: sdr-veil;
    animation-duration: $duration;
    animation-timing-function: $easing;
    animation-iteration-count: infinite;
  }
  .menu li {
    animation-name: sdr-item-cut, sdr-item-rise;
    animation-duration: $duration, $duration;
    animation-timing-function: steps(1, end), $easing;
    animation-iteration-count: infinite, infinite;
    animation-fill-mode: backwards, backwards;
  }
}
// 시차 — 같은 루프에 delay 만 더해 쓴다 (뒤 · 높은 특이도)
.frame.is-demo .menu li:nth-child(2) { animation-delay: 120ms, 120ms; }
.frame.is-demo .menu li:nth-child(3) { animation-delay: 240ms, 240ms; }
.frame.is-demo .menu li:nth-child(4) { animation-delay: 360ms, 360ms; }
.frame.is-demo .menu li:nth-child(5) { animation-delay: 480ms, 480ms; }

@media (max-width: 340px) {
  .bar { padding: $sp-1 $sp-2; }
  .brand { font-size: 13px; }
  .burger, .xbtn { width: 28px; height: 28px; }
  .body { gap: $sp-1; padding: 0 $sp-2 $sp-2; }
  .card { height: 32px; gap: $sp-1; }
  .drawer { padding: $sp-1 $sp-2; }
  .head { margin-bottom: $sp-1; }
  .menu { gap: 0; }
  .menu button { height: 24px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .frame.is-demo .burger,
  .frame.is-demo .xbtn,
  .frame.is-demo .drawer,
  .frame.is-demo .veil,
  .frame.is-demo .menu li { animation: none !important; }
  // 움직임만 끄고 「열린 드로어」 결과는 남긴다
  .frame.is-demo .veil { opacity: 1 !important; }
  .frame.is-demo .drawer { transform: translateX(0) !important; }
  .frame.is-demo .menu li { opacity: 1 !important; transform: none !important; }
}

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

.frame {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: min(420px, 94vw);
  height: min(260px, 84vh);
  border-radius: 16px;
  background: #fff7e6;
  color: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  font-size: 12px;
  line-height: 1.35;
}

.frame, .frame * {
  box-sizing: border-box;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}

.brand {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.burger, .xbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(23, 20, 26, 0.12);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.burger:focus-visible, .xbtn:focus-visible {
  outline: 2px solid #ff4d1f;
  outline-offset: 2px;
}

.body {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 0 12px 12px;
}

.skeleton {
  height: 10px;
  margin: 0;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.14);
}

.cards {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid rgba(23, 20, 26, 0.12);
  border-radius: 8px;
  background: #ffffff;
}

.sw {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.sw--a {
  background: rgba(255, 77, 31, 0.25);
}

.sw--b {
  background: rgba(47, 109, 246, 0.22);
}

.sw--c {
  background: rgba(76, 212, 166, 0.28);
}

.nm {
  font-weight: 600;
}

.veil {
  position: absolute;
  inset: 0;
  background: rgba(23, 20, 26, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.frame.is-open .veil {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(240px, 72%);
  padding: 8px 12px;
  border-left: 1px solid rgba(23, 20, 26, 0.12);
  background: #fff7e6;
  box-shadow: -18px 0 32px rgba(23, 20, 26, 0.28);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.frame.is-open .drawer {
  transform: translateX(0);
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
}

.title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.menu {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 32px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.menu button:hover {
  background: rgba(23, 20, 26, 0.06);
}

.menu button:focus-visible {
  outline: 2px solid #ff4d1f;
  outline-offset: 2px;
}

.menu li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.frame.is-open .menu li {
  opacity: 1;
  transform: translateY(0);
}

.frame.is-open .menu li:nth-child(2) {
  transition-delay: 40ms, 40ms;
}

.frame.is-open .menu li:nth-child(3) {
  transition-delay: 80ms, 80ms;
}

.frame.is-open .menu li:nth-child(4) {
  transition-delay: 120ms, 120ms;
}

.frame.is-open .menu li:nth-child(5) {
  transition-delay: 160ms, 160ms;
}

@keyframes sdr-press {
  0%, 4% {
    transform: translateY(0);
  }
  6% {
    transform: translateY(2px);
  }
  8%, 100% {
    transform: translateY(0);
  }
}
@keyframes sdr-xpress {
  0%, 76% {
    transform: translateY(0);
  }
  78% {
    transform: translateY(2px);
  }
  80%, 100% {
    transform: translateY(0);
  }
}
@keyframes sdr-drawer {
  0%, 10% {
    transform: translateX(100%);
  }
  22%, 80% {
    transform: translateX(0);
  }
  88%, 100% {
    transform: translateX(100%);
  }
}
@keyframes sdr-veil {
  0%, 10% {
    opacity: 0;
  }
  22%, 80% {
    opacity: 1;
  }
  88%, 100% {
    opacity: 0;
  }
}
@keyframes sdr-item-cut {
  0%, 16% {
    opacity: 0;
  }
  16.1%, 100% {
    opacity: 1;
  }
}
@keyframes sdr-item-rise {
  0%, 16% {
    transform: translateY(8px);
  }
  26%, 100% {
    transform: translateY(0);
  }
}
.frame.is-demo .burger {
  animation-name: sdr-press;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}
.frame.is-demo .xbtn {
  animation-name: sdr-xpress;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}
.frame.is-demo .drawer {
  animation-name: sdr-drawer;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}
.frame.is-demo .veil {
  animation-name: sdr-veil;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}
.frame.is-demo .menu li {
  animation-name: sdr-item-cut, sdr-item-rise;
  animation-duration: 2s, 2s;
  animation-timing-function: steps(1, end), cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite, infinite;
  animation-fill-mode: backwards, backwards;
}

.frame.is-demo .menu li:nth-child(2) {
  animation-delay: 120ms, 120ms;
}

.frame.is-demo .menu li:nth-child(3) {
  animation-delay: 240ms, 240ms;
}

.frame.is-demo .menu li:nth-child(4) {
  animation-delay: 360ms, 360ms;
}

.frame.is-demo .menu li:nth-child(5) {
  animation-delay: 480ms, 480ms;
}

@media (max-width: 340px) {
  .bar {
    padding: 4px 8px;
  }
  .brand {
    font-size: 13px;
  }
  .burger, .xbtn {
    width: 28px;
    height: 28px;
  }
  .body {
    gap: 4px;
    padding: 0 8px 8px;
  }
  .card {
    height: 32px;
    gap: 4px;
  }
  .drawer {
    padding: 4px 8px;
  }
  .head {
    margin-bottom: 4px;
  }
  .menu {
    gap: 0;
  }
  .menu button {
    height: 24px;
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .frame.is-demo .burger,
  .frame.is-demo .xbtn,
  .frame.is-demo .drawer,
  .frame.is-demo .veil,
  .frame.is-demo .menu li {
    animation: none !important;
  }
  .frame.is-demo .veil {
    opacity: 1 !important;
  }
  .frame.is-demo .drawer {
    transform: translateX(0) !important;
  }
  .frame.is-demo .menu li {
    opacity: 1 !important;
    transform: none !important;
  }
}

// 실제 동작: 햄버거를 누르면 본문이 inert 로 잠기고 드로어가 열린다. 닫기는 x · Escape · 오버레이 클릭.
var root = document.getElementById('sdr');
var page = document.getElementById('sdr-page');
var drawer = document.getElementById('sdr-drawer');
var openBtn = document.getElementById('sdr-open');
var closeBtn = document.getElementById('sdr-close');
var veil = document.getElementById('sdr-veil');
var stops = [closeBtn].concat(Array.prototype.slice.call(drawer.querySelectorAll('.menu button')));
openBtn.setAttribute('aria-haspopup', 'true');
openBtn.setAttribute('aria-expanded', 'false');
drawer.inert = true;                                  // 닫힌 동안 드로어 안 버튼은 탭 순서에서 빠진다
drawer.setAttribute('aria-hidden', 'true');
function setOpen(on) {
  root.classList.remove('is-demo');                   // 첫 조작에서 격자 루프를 끈다
  root.classList.toggle('is-open', on);
  page.inert = on;                                    // 열린 동안 본문은 포커스를 잃는다
  page.setAttribute('aria-hidden', on ? 'true' : 'false');
  drawer.inert = !on;
  drawer.setAttribute('aria-hidden', on ? 'false' : 'true');
  openBtn.setAttribute('aria-expanded', on ? 'true' : 'false');
  (on ? closeBtn : openBtn).focus({ preventScroll: true });
}
openBtn.addEventListener('click', function () { setOpen(true); });
closeBtn.addEventListener('click', function () { setOpen(false); });
veil.addEventListener('click', function () { setOpen(false); });
drawer.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') { setOpen(false); return; }
  if (e.key !== 'Tab') return;
  e.preventDefault();                                 // 드로어 안에서만 Tab 이 돈다 — 짧은 포커스 트랩
  var i = stops.indexOf(document.activeElement);
  var d = e.shiftKey ? -1 : 1;
  stops[(i + d + stops.length) % stops.length].focus({ preventScroll: true });
});

import { useState, useEffect, useRef } from "react";
import type { CSSProperties } from "react";
import styles from "./SideDrawer.module.scss";

export type SideDrawerLabels = {
  brand: string;
  openLabel: string;
  closeLabel: string;
  drawerTitle: string;
  menu: string[];
  products: string[];
};

export type SideDrawerProps = {
  labels?: Partial<SideDrawerLabels>;
  /** 격자 미리보기용 2초 자동 루프. 사람이 손대면 꺼진다 */
  demo?: boolean;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
// ambient 가 얇아 이벤트 제네릭을 못 쓴다 — 필요한 꼴만 로컬 타입으로 선언
type KeyEvt = { key: string; shiftKey: boolean; preventDefault(): void };
type Focusable = { focus: (o: { preventScroll: boolean }) => void };
type PageEl = { inert?: boolean };
type Box<T> = { current: T | null };

const defaults: SideDrawerLabels = {
  brand: "Drawer",
  openLabel: "Open menu",
  closeLabel: "Close",
  drawerTitle: "My drawer",
  menu: ["Orders", "Saved items", "Addresses", "Coupons", "Settings"],
  products: ["Hat 12,000", "Socks set 8,000", "Mug 6,500"],
};

function ListIcon() {
  return (
    <svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="M216 64v128H40V64Z" opacity=".2"/><path d="M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8M40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16m176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16"/></g></svg>
  );
}

function XIcon() {
  return (
    <svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="M216 56v144a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16" opacity=".2"/><path d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/></g></svg>
  );
}

function CaretIcon() {
  return (
    <svg viewBox="0 0 256 256" width="18" height="18" aria-hidden="true"><g fill="currentColor"><path d="m176 128l-80 80V48Z" opacity=".2"/><path d="m181.66 122.34l-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z"/></g></svg>
  );
}

export default function SideDrawer({
  labels,
  demo = true,
  duration = 2000,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#ff4d1f",
}: SideDrawerProps) {
  const L = { ...defaults, ...labels };
  const [open, setOpen] = useState(false);
  const [live, setLive] = useState(demo);
  const openBtn = useRef<Focusable | null>(null);
  const closeBtn = useRef<Focusable | null>(null);
  const menuBtns = useRef<Array<Focusable | null>>([]);
  const pageRef = useRef<PageEl | null>(null);

  // 열린 동안 본문은 포커스를 잃는다 (inert)
  useEffect(() => { if (pageRef.current) pageRef.current.inert = open; }, [open]);

  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  function setDrawer(on: boolean) {
    setLive(false);
    setOpen(on);
    (on ? closeBtn.current : openBtn.current)?.focus({ preventScroll: true });
  }

  function drawerKeys(e: KeyEvt) {
    if (e.key === "Escape") { setDrawer(false); return; }
    if (e.key !== "Tab") return;
    e.preventDefault();                                 // 드로어 안에서만 Tab 이 돈다 — 짧은 포커스 트랩
    if (!menuBtns.current) return;                      // Box 배열 ref null 가드
    const stops = [closeBtn.current].concat(menuBtns.current.filter((b): b is Focusable => b !== null));
    let i = 0;
    for (let j = 0; j < stops.length; j++) { if (document.activeElement === stops[j]) i = j; }
    const d = e.shiftKey ? -1 : 1;
    stops[(i + d + stops.length) % stops.length]?.focus({ preventScroll: true });
  }

  const cls = [styles.frame, live ? styles.isDemo : "", open ? styles.isOpen : ""].filter(Boolean).join(" ");
  const sws = [styles.swA, styles.swB, styles.swC];

  return (
    <section className={cls} style={vars} aria-label={L.brand}>
      <div className={styles.page} ref={(el: PageEl | null) => { pageRef.current = el; }} aria-hidden={open}>
        <header className={styles.bar}>
          <p className={styles.brand}>{L.brand}</p>
          <button
            className={styles.burger}
            type="button"
            aria-label={L.openLabel}
            aria-controls="sdr-drawer"
            aria-haspopup="true"
            aria-expanded={open}
            onClick={() => setDrawer(true)}
            ref={(el: Focusable | null) => { openBtn.current = el; }}
          >
            <ListIcon />
          </button>
        </header>
        <div className={styles.body}>
          <p className={styles.skeleton} aria-hidden="true" />
          <ul className={styles.cards}>
            {L.products.map((t, i) => (
              <li className={styles.card} key={t}>
                <span className={sws[i % 3]} aria-hidden="true" />
                <span className={styles.nm}>{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <div className={styles.veil} onClick={() => setDrawer(false)} />
      <aside className={styles.drawer} id="sdr-drawer" aria-label={L.drawerTitle} aria-hidden={!open} onKeyDown={drawerKeys}>
        <header className={styles.head}>
          <p className={styles.title}>{L.drawerTitle}</p>
          <button
            className={styles.xbtn}
            type="button"
            aria-label={L.closeLabel}
            onClick={() => setDrawer(false)}
            ref={(el: Focusable | null) => { closeBtn.current = el; }}
          >
            <XIcon />
          </button>
        </header>
        <ul className={styles.menu}>
          {L.menu.map((m, i) => (
            <li key={m}>
              <button type="button" ref={(el: Focusable | null) => { if (menuBtns.current) menuBtns.current[i] = el; }}>
                <span>{m}</span>
                <CaretIcon />
              </button>
            </li>
          ))}
        </ul>
      </aside>
    </section>
  );
}