07Sending Overlapping Objects Forward or Back One Step

<main class="stage">
<div class="scene is-demo" id="scene">
  <div class="frame" id="frame">
    <div class="card" data-id="0" tabindex="0" role="button" aria-label="Card 1 selected"></div>
    <div class="card" data-id="1" tabindex="0" role="button" aria-label="Card 2 selected"></div>
    <div class="card" data-id="2" tabindex="0" role="button" aria-label="Card 3 selected"></div>
    <div class="card" data-id="3" tabindex="0" role="button" aria-label="Card 4 selected"></div>
  </div>
  <div class="controls">
    <button type="button" class="orderBtn" id="btnBack">Backward</button>
    <button type="button" class="orderBtn" id="btnFront">Forward</button>
  </div>
  <div class="status" id="status" aria-live="polite">Order 0 1 2 3</div>
</div>
</main>

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

// 변수 3개
$duration: $dur-enter;
$easing: $ease-out;
$color: $subject-lilac;

// 계산 겹: index.html 의 order 배열이 카드 뒤→앞 순서를 들고 있고, swapNeighbor()/bringToFront() 가
// 그 배열을 바꾼 뒤 order.indexOf(id)+1 을 z-index 로 다시 매긴다 — 배열 연산이 곧 쌓임 순서다.
// popCard() 는 z 변화를 보이게 하는 easeOutBack 산술 트윈(--lift)이다.
@include stage($stage-paper);

.scene {
  position: relative;
  width: 320px;
  height: 180px;
  border-radius: $r-card;
  overflow: hidden;
  box-shadow: $shadow-raised;
  background: linear-gradient(160deg, #f5eaff, $stage-paper 85%);
}

.frame {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 1px;
  height: 1px;
}

.card {
  --lift: 0;
  position: absolute;
  width: 68px;
  height: 84px;
  margin: -42px 0 0 -34px;
  border-radius: $r-card;
  background: linear-gradient(150deg, $subject-lilac, $subject-sky);
  box-shadow: $shadow-press;
  cursor: pointer;
  // nth-child 배치 + --lift 팝을 하나의 transform 식으로 합성한다.
  &:nth-child(1) { transform: translate(calc(-30px - var(--lift) * 14px), calc(-14px - var(--lift) * 20px)) rotate(-6deg) scale(calc(1 + var(--lift) * 0.12)); }
  &:nth-child(2) { transform: translate(calc(-6px - var(--lift) * 14px), calc(-4px - var(--lift) * 20px)) rotate(-1deg) scale(calc(1 + var(--lift) * 0.12)); }
  &:nth-child(3) { transform: translate(calc(18px - var(--lift) * 14px), calc(6px - var(--lift) * 20px)) rotate(4deg) scale(calc(1 + var(--lift) * 0.12)); }
  &:nth-child(4) { transform: translate(calc(40px - var(--lift) * 14px), calc(16px - var(--lift) * 20px)) rotate(8deg) scale(calc(1 + var(--lift) * 0.12)); }

  &.isSelected { box-shadow: 0 0 0 3px $subject-ink, $shadow-press; }
  &:focus-visible { outline: 2px solid $color; outline-offset: 3px; }
}

.controls {
  position: absolute;
  right: $sp-3;
  bottom: $sp-3;
  display: flex;
  gap: $sp-2;
}

.orderBtn {
  padding: $sp-1 $sp-3;
  border: none;
  border-radius: $r-control;
  background: $subject-ink;
  color: $subject-cream;
  font-size: 11px;
  cursor: pointer;
  box-shadow: $shadow-press;

  &:focus-visible { outline: 2px solid $color; outline-offset: 2px; }
  &:active { transform: translateY(1px); }
}

.status {
  position: absolute;
  left: $sp-3;
  bottom: $sp-3;
  padding: $sp-1 $sp-2;
  border-radius: $r-pill;
  background: rgba($subject-ink, .08);
  color: $subject-ink;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 340px) {
  .scene { width: 220px; height: 124px; }
  .card { width: 48px; height: 60px; margin: -30px 0 0 -24px; }
  .card:nth-child(1) { transform: translate(calc(-20px - var(--lift) * 10px), calc(-10px - var(--lift) * 14px)) rotate(-6deg) scale(calc(1 + var(--lift) * 0.12)); }
  .card:nth-child(2) { transform: translate(calc(-4px - var(--lift) * 10px), calc(-2px - var(--lift) * 14px)) rotate(-1deg) scale(calc(1 + var(--lift) * 0.12)); }
  .card:nth-child(3) { transform: translate(calc(12px - var(--lift) * 10px), calc(4px - var(--lift) * 14px)) rotate(4deg) scale(calc(1 + var(--lift) * 0.12)); }
  .card:nth-child(4) { transform: translate(calc(28px - var(--lift) * 10px), calc(10px - var(--lift) * 14px)) rotate(8deg) scale(calc(1 + var(--lift) * 0.12)); }
  .orderBtn, .status { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  // 실사용 경로 적용 — 선택·앞으로/뒤로 클릭의 z-index 반영은 즉시(트윈 없이) 일어난다.
  // scss 만: 카드 잔여 전환은 애초에 transform 산술 트윈이라 끌 것이 없고, 아웃라인만 정리한다.
  .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: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.scene {
  position: relative;
  width: 320px;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  background: linear-gradient(160deg, #f5eaff, #ffffff 85%);
}

.frame {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 1px;
  height: 1px;
}

.card {
  --lift: 0;
  position: absolute;
  width: 68px;
  height: 84px;
  margin: -42px 0 0 -34px;
  border-radius: 16px;
  background: linear-gradient(150deg, #b9a0ff, #6ec8ff);
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
  cursor: pointer;
}
.card:nth-child(1) {
  transform: translate(calc(-30px - var(--lift) * 14px), calc(-14px - var(--lift) * 20px)) rotate(-6deg) scale(calc(1 + var(--lift) * 0.12));
}
.card:nth-child(2) {
  transform: translate(calc(-6px - var(--lift) * 14px), calc(-4px - var(--lift) * 20px)) rotate(-1deg) scale(calc(1 + var(--lift) * 0.12));
}
.card:nth-child(3) {
  transform: translate(calc(18px - var(--lift) * 14px), calc(6px - var(--lift) * 20px)) rotate(4deg) scale(calc(1 + var(--lift) * 0.12));
}
.card:nth-child(4) {
  transform: translate(calc(40px - var(--lift) * 14px), calc(16px - var(--lift) * 20px)) rotate(8deg) scale(calc(1 + var(--lift) * 0.12));
}
.card.isSelected {
  box-shadow: 0 0 0 3px #17141a, 0 6px 12px rgba(23, 20, 26, 0.32);
}
.card:focus-visible {
  outline: 2px solid #b9a0ff;
  outline-offset: 3px;
}

.controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
}

.orderBtn {
  padding: 4px 12px;
  border: none;
  border-radius: 12px;
  background: #17141a;
  color: #fff7e6;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
}
.orderBtn:focus-visible {
  outline: 2px solid #b9a0ff;
  outline-offset: 2px;
}
.orderBtn:active {
  transform: translateY(1px);
}

.status {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.08);
  color: #17141a;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 340px) {
  .scene {
    width: 220px;
    height: 124px;
  }
  .card {
    width: 48px;
    height: 60px;
    margin: -30px 0 0 -24px;
  }
  .card:nth-child(1) {
    transform: translate(calc(-20px - var(--lift) * 10px), calc(-10px - var(--lift) * 14px)) rotate(-6deg) scale(calc(1 + var(--lift) * 0.12));
  }
  .card:nth-child(2) {
    transform: translate(calc(-4px - var(--lift) * 10px), calc(-2px - var(--lift) * 14px)) rotate(-1deg) scale(calc(1 + var(--lift) * 0.12));
  }
  .card:nth-child(3) {
    transform: translate(calc(12px - var(--lift) * 10px), calc(4px - var(--lift) * 14px)) rotate(4deg) scale(calc(1 + var(--lift) * 0.12));
  }
  .card:nth-child(4) {
    transform: translate(calc(28px - var(--lift) * 10px), calc(10px - var(--lift) * 14px)) rotate(8deg) scale(calc(1 + var(--lift) * 0.12));
  }
  .orderBtn, .status {
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

(function () {
  var POP_MS = 360;
  var LOOP_MS = 1000;

  var scene = document.getElementById('scene');
  var cards = Array.prototype.slice.call(document.querySelectorAll('.card'));
  var btnFront = document.getElementById('btnFront');
  var btnBack = document.getElementById('btnBack');
  var status = document.getElementById('status');
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  // order: 뒤(0번째)→앞(마지막) 순으로 쌓인 카드 id 배열. z-index 는 이 배열 안의 위치(index+1)로만 정해진다.
  var order = [0, 1, 2, 3];
  var selectedId = 1;
  var popRaf = 0;
  var timers = [];

  function easeOutBack(t) {
    var c = 1.7;
    return 1 + (c + 1) * Math.pow(t - 1, 3) + c * Math.pow(t - 1, 2);
  }

  function applyZ() {
    cards.forEach(function (card) {
      var id = Number(card.dataset.id);
      var z = order.indexOf(id) + 1;
      card.style.zIndex = String(z);
      card.classList.toggle('isSelected', id === selectedId);
      card.setAttribute('aria-pressed', String(id === selectedId));
    });
    status.textContent = 'Order ' + order.join(' ');
  }

  // 배열 재정렬 → z-index: 선택된 id 를 order 배열 안에서 한 칸 옮기고, 그 배열의 위치를 그대로
  // z-index 로 다시 매긴다. 스타일 값을 직접 고르는 게 아니라 배열 연산의 결과로 z 가 나온다.
  function swapNeighbor(dir) {
    var idx = order.indexOf(selectedId);
    var next = idx + dir;
    if (next < 0 || next >= order.length) return;
    var tmp = order[idx];
    order[idx] = order[next];
    order[next] = tmp;
    applyZ();
    popCard(cards[selectedId]);
  }

  function bringToFront(id) {
    var idx = order.indexOf(id);
    order.splice(idx, 1);
    order.push(id);
    selectedId = id;
    applyZ();
    popCard(cards[selectedId]);
  }

  // Forward 온 카드가 살짝 들렸다 앉는 팝: z 변화를 눈에 보이게 하는 산술 트윈(easeOutBack 오버슛).
  function popCard(card) {
    if (popRaf) cancelAnimationFrame(popRaf);
    var start = performance.now();
    function step(now) {
      var p = Math.min(1, (now - start) / POP_MS);
      var lift = (1 - Math.abs(2 * p - 1)) * 0.1;
      card.style.setProperty('--lift', lift.toFixed(3));
      if (p < 1) popRaf = requestAnimationFrame(step);
      else { card.style.setProperty('--lift', '0'); popRaf = 0; }
    }
    popRaf = requestAnimationFrame(step);
  }

  function human() {
    if (scene.classList.contains('is-demo')) {
      scene.classList.remove('is-demo');
      timers.forEach(function (t) { clearTimeout(t); clearInterval(t); });
      timers = [];
      if (popRaf) { cancelAnimationFrame(popRaf); popRaf = 0; }
    }
  }

  function selectCard(id) {
    human();
    selectedId = id;
    applyZ();
  }

  cards.forEach(function (card) {
    var id = Number(card.dataset.id);
    card.addEventListener('click', function () { selectCard(id); });
    card.addEventListener('keydown', function (e) {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectCard(id); }
    });
  });

  btnFront.addEventListener('click', function () { human(); swapNeighbor(1); });
  btnBack.addEventListener('click', function () { human(); swapNeighbor(-1); });

  applyZ();

  // reduce: 실사용 경로 적용 — 카드 선택·Forward/Backward 버튼은 applyZ() 로 즉시 반영된다(팝은 계산 트윈이라 즉시 최종 상태).
  // 아래 자동 루프는 시연 게이트만 — 정해진 순서로 카드를 차례로 맨 앞에 올리며 reduce 에서는 돌지 않는다.
  var SEQUENCE = [0, 2, 1, 3];
  var seqI = 0;
  function loop() {
    if (!scene.classList.contains('is-demo')) return;
    seqI = (seqI + 1) % SEQUENCE.length;
    bringToFront(SEQUENCE[seqI]);
    timers.push(setTimeout(loop, LOOP_MS));
  }

  if (!reduce) {
    timers.push(setTimeout(loop, LOOP_MS));
  }
})();

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

const POP_MS = 360;
const LOOP_MS = 1000;
const SEQUENCE = [0, 2, 1, 3];

export default function XfZOrder() {
  const sceneRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const scene0 = sceneRef.current;
    if (!scene0) return undefined;
    const scene = scene0;
    const cards = Array.from(scene.querySelectorAll<HTMLDivElement>('.' + styles.card));
    const btnFront0 = scene.querySelector<HTMLButtonElement>('#btnFront');
    const btnBack0 = scene.querySelector<HTMLButtonElement>('#btnBack');
    const status0 = scene.querySelector<HTMLDivElement>('.' + styles.status);
    if (cards.length === 0 || !btnFront0 || !btnBack0 || !status0) return undefined;
    const btnFront = btnFront0;
    const btnBack = btnBack0;
    const status = status0;

    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    // order: 뒤(0번째)→앞(마지막) 순으로 쌓인 카드 id 배열. z-index 는 이 배열 안의 위치(index+1)로만 정해진다.
    let order = [0, 1, 2, 3];
    let selectedId = 1;
    const popRaf: Record<number, number> = {};
    let timers: number[] = [];

    function easeOutBack(t: number) {
      const c = 1.7;
      return 1 + (c + 1) * Math.pow(t - 1, 3) + c * Math.pow(t - 1, 2);
    }

    function applyZ() {
      cards.forEach((card) => {
        const id = Number(card.dataset.id);
        const z = order.indexOf(id) + 1;
        card.style.zIndex = String(z);
        card.classList.toggle(styles.isSelected, id === selectedId);
        card.setAttribute('aria-pressed', String(id === selectedId));
      });
      status.textContent = '순서 ' + order.join(' ');
    }

    // 앞으로 온 카드가 살짝 들렸다 앉는 팝: z 변화를 눈에 보이게 하는 산술 트윈(easeOutBack 오버슛).
    function popCard(card: HTMLDivElement) {
      const id = Number(card.dataset.id);
      if (popRaf[id]) cancelAnimationFrame(popRaf[id]);
      const start = performance.now();
      function step(now: number) {
        const p = Math.min(1, (now - start) / POP_MS);
        const lift = (1 - Math.abs(2 * p - 1)) * 0.1;
        card.style.setProperty('--lift', lift.toFixed(3));
        if (p < 1) popRaf[id] = requestAnimationFrame(step);
        else { card.style.setProperty('--lift', '0'); popRaf[id] = 0; }
      }
      popRaf[id] = requestAnimationFrame(step);
    }

    // 배열 재정렬 → z-index: 선택된 id 를 order 배열 안에서 한 칸 옮기고, 그 배열의 위치를 그대로
    // z-index 로 다시 매긴다. 스타일 값을 직접 고르는 게 아니라 배열 연산의 결과로 z 가 나온다.
    function swapNeighbor(dir: number) {
      const idx = order.indexOf(selectedId);
      const next = idx + dir;
      if (next < 0 || next >= order.length) return;
      const tmp = order[idx];
      order[idx] = order[next];
      order[next] = tmp;
      applyZ();
      popCard(cards[selectedId]);
    }

    function bringToFront(id: number) {
      order = order.filter((v) => v !== id);
      order.push(id);
      selectedId = id;
      applyZ();
      popCard(cards[selectedId]);
    }

    function human() {
      if (scene.classList.contains(styles['is-demo'])) {
        scene.classList.remove(styles['is-demo']);
        timers.forEach((t) => window.clearTimeout(t));
        timers = [];
        Object.keys(popRaf).forEach((k) => {
          const id = Number(k);
          if (popRaf[id]) { cancelAnimationFrame(popRaf[id]); popRaf[id] = 0; }
        });
      }
    }

    function selectCard(id: number) {
      human();
      selectedId = id;
      applyZ();
    }

    const cleanups: Array<() => void> = [];
    cards.forEach((card) => {
      const id = Number(card.dataset.id);
      function onClick() { selectCard(id); }
      function onKey(e: KeyboardEvent) {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectCard(id); }
      }
      card.addEventListener('click', onClick);
      card.addEventListener('keydown', onKey);
      cleanups.push(() => {
        card.removeEventListener('click', onClick);
        card.removeEventListener('keydown', onKey);
      });
    });

    function onFront() { human(); swapNeighbor(1); }
    function onBack() { human(); swapNeighbor(-1); }
    btnFront.addEventListener('click', onFront);
    btnBack.addEventListener('click', onBack);

    applyZ();

    // reduce: 실사용 경로 적용 — 카드 선택·앞으로/뒤로 버튼은 applyZ() 로 즉시 반영된다(팝은 계산 트윈이라 즉시 최종 상태).
    // 아래 자동 루프는 시연 게이트만 — 정해진 순서로 카드를 차례로 맨 앞에 올리며 reduce 에서는 돌지 않는다.
    let seqI = 0;
    function loop() {
      if (!scene.classList.contains(styles['is-demo'])) return;
      seqI = (seqI + 1) % SEQUENCE.length;
      bringToFront(SEQUENCE[seqI]);
      timers.push(window.setTimeout(loop, LOOP_MS));
    }

    if (!reduce) {
      timers.push(window.setTimeout(loop, LOOP_MS));
    }

    return () => {
      cleanups.forEach((fn) => fn());
      btnFront.removeEventListener('click', onFront);
      btnBack.removeEventListener('click', onBack);
      timers.forEach((t) => window.clearTimeout(t));
      Object.keys(popRaf).forEach((k) => {
        const id = Number(k);
        if (popRaf[id]) cancelAnimationFrame(popRaf[id]);
      });
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={styles.scene + ' ' + styles['is-demo']} ref={sceneRef}>
        <div className={styles.frame}>
          <div className={styles.card} data-id="0" tabIndex={0} role="button" aria-label="카드 1 선택"></div>
          <div className={styles.card} data-id="1" tabIndex={0} role="button" aria-label="카드 2 선택"></div>
          <div className={styles.card} data-id="2" tabIndex={0} role="button" aria-label="카드 3 선택"></div>
          <div className={styles.card} data-id="3" tabIndex={0} role="button" aria-label="카드 4 선택"></div>
        </div>
        <div className={styles.controls}>
          <button type="button" className={styles.orderBtn} id="btnBack">뒤로</button>
          <button type="button" className={styles.orderBtn} id="btnFront">앞으로</button>
        </div>
        <div className={styles.status} aria-live="polite">순서 0 1 2 3</div>
      </div>
    </main>
  );
}