03Three-pane editor layout

<main class="stage">
  <div class="tp is-demo" id="tp-root">
    <div class="tp__box" id="tp-box">
      <section class="tp__side" aria-label="File list">
        <span class="tp__ico"><svg viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z" opacity=".2"/><path d="M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z"/></g></svg></span>
        <span class="tp__row"></span>
        <span class="tp__row tp__row--on"></span>
        <span class="tp__row"></span>
      </section>
      <div class="tp__bar tp__bar--v" id="tp-barv" role="separator" tabindex="0"
           aria-orientation="vertical" aria-label="Sidebar width" aria-valuemin="14" aria-valuemax="60" aria-valuenow="30"></div>
      <div class="tp__main">
        <section class="tp__edit" aria-label="Editor">
          <span class="tp__ico"><svg viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="m240 128l-48 40H64l-48-40l48-40h128Z" opacity=".2"/><path d="M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25"/></g></svg></span>
          <span class="tp__tok tp__tok--a"></span>
          <span class="tp__tok tp__tok--b"></span>
          <span class="tp__tok tp__tok--c"></span>
        </section>
        <div class="tp__bar tp__bar--h" id="tp-barh" role="separator" tabindex="0"
             aria-orientation="horizontal" aria-label="Console height" aria-valuemin="16" aria-valuemax="70" aria-valuenow="34"></div>
        <section class="tp__term" aria-label="Console">
          <span class="tp__ico"><svg viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M224 56v144a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8V56a8 8 0 0 1 8-8h176a8 8 0 0 1 8 8" opacity=".2"/><path d="M128 128a8 8 0 0 1-3 6.25l-40 32a8 8 0 1 1-10-12.5L107.19 128L75 102.25a8 8 0 1 1 10-12.5l40 32a8 8 0 0 1 3 6.25m48 24h-40a8 8 0 0 0 0 16h40a8 8 0 0 0 0-16m56-96v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16m-16 144V56H40v144z"/></g></svg></span>
          <span class="tp__tok tp__tok--d"></span>
        </section>
      </div>
    </div>
    <p class="tp__cap">Each handle only shrinks the pane next to it</p>
  </div>
</main>

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

$duration: $dur-quick;
$easing: $ease-spring;
$color: $subject-blue;

@include stage($stage-ink);

@property --col {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 30%;
}
@property --row {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 66%;
}

.tp {
  --col: 30%;
  --row: 66%;
  width: min(320px, 90vw);
  display: flex;
  flex-direction: column;
  gap: $sp-2;
}
.tp__box {
  display: grid;
  grid-template-columns: var(--col) 8px 1fr;
  height: 128px;
  border-radius: $r-card;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
}
.tp__main {
  display: grid;
  grid-template-rows: var(--row) 8px 1fr;
  overflow: hidden;
}
.tp__side,
.tp__edit,
.tp__term {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: $sp-2;
  padding: $sp-2;
  overflow: hidden;
}
.tp__side { background: rgba(47, 109, 246, .2); }
.tp__edit { background: rgba(255, 247, 230, .06); }
.tp__term { background: rgba(23, 20, 26, .55); }

.tp__ico {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: $subject-cream;
}
.tp__ico svg { display: block; width: 14px; height: 14px; }
.tp__term .tp__ico { color: $subject-mint; }

.tp__row,
.tp__tok {
  flex: 0 0 auto;
  height: 7px;
  border-radius: $r-xs;
  background: rgba(255, 247, 230, .3);
}
.tp__row--on { background: $subject-cream; }
.tp__tok--a { width: 78%; background: $color; }
.tp__tok--b { width: 54%; }
.tp__tok--c { width: 90%; }
.tp__tok--d { width: 62%; background: rgba(76, 212, 166, .7); }

.tp__bar {
  background: rgba(255, 247, 230, .16);
  touch-action: none;
  transition: background $duration $easing;
}
.tp__bar--v { cursor: col-resize; }
.tp__bar--h { cursor: row-resize; }
.tp__bar:hover { background: $color; }
.tp__bar:focus-visible { outline: 2px solid $subject-cream; outline-offset: -2px; }

.tp__cap {
  margin: 0;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  color: rgba(255, 247, 230, .55);
  text-align: center;
}

// ── 자동 루프: 세로 손잡이가 먼저, 가로 손잡이가 그다음. 둘이 겹치지 않는다 ──
.tp.is-demo { animation: tp-move $dur-loop $easing infinite; }
@keyframes tp-move {
  0%, 6% { --col: 30%; --row: 66%; }
  26% { --col: 56%; --row: 66%; }
  44% { --col: 16%; --row: 66%; }
  60% { --col: 30%; --row: 30%; }
  76% { --col: 30%; --row: 78%; }
  88%, 100% { --col: 30%; --row: 66%; }
}
.tp.is-demo .tp__bar--v { animation: tp-hot-a $dur-loop steps(1, end) infinite; }
.tp.is-demo .tp__bar--h { animation: tp-hot-b $dur-loop steps(1, end) infinite; }
@keyframes tp-hot-a {
  0%, 5% { background: rgba(255, 247, 230, .16); }
  6%, 45% { background: $subject-blue; }
  46%, 100% { background: rgba(255, 247, 230, .16); }
}
@keyframes tp-hot-b {
  0%, 45% { background: rgba(255, 247, 230, .16); }
  46%, 87% { background: $subject-blue; }
  88%, 100% { background: rgba(255, 247, 230, .16); }
}

@media (prefers-reduced-motion: reduce) {
  .tp.is-demo,
  .tp.is-demo .tp__bar--v,
  .tp.is-demo .tp__bar--h { animation: none !important; }
  .tp__bar { transition: none; }
}

@media (max-width: 340px) {
  .tp__box { height: 112px; }
  .tp__side, .tp__edit, .tp__term { padding: $sp-1; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

@property --col {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 30%;
}
@property --row {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 66%;
}
.tp {
  --col: 30%;
  --row: 66%;
  width: min(320px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tp__box {
  display: grid;
  grid-template-columns: var(--col) 8px 1fr;
  height: 128px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.tp__main {
  display: grid;
  grid-template-rows: var(--row) 8px 1fr;
  overflow: hidden;
}

.tp__side,
.tp__edit,
.tp__term {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
}

.tp__side {
  background: rgba(47, 109, 246, 0.2);
}

.tp__edit {
  background: rgba(255, 247, 230, 0.06);
}

.tp__term {
  background: rgba(23, 20, 26, 0.55);
}

.tp__ico {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #fff7e6;
}

.tp__ico svg {
  display: block;
  width: 14px;
  height: 14px;
}

.tp__term .tp__ico {
  color: #4cd4a6;
}

.tp__row,
.tp__tok {
  flex: 0 0 auto;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 247, 230, 0.3);
}

.tp__row--on {
  background: #fff7e6;
}

.tp__tok--a {
  width: 78%;
  background: #2f6df6;
}

.tp__tok--b {
  width: 54%;
}

.tp__tok--c {
  width: 90%;
}

.tp__tok--d {
  width: 62%;
  background: rgba(76, 212, 166, 0.7);
}

.tp__bar {
  background: rgba(255, 247, 230, 0.16);
  touch-action: none;
  transition: background 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tp__bar--v {
  cursor: col-resize;
}

.tp__bar--h {
  cursor: row-resize;
}

.tp__bar:hover {
  background: #2f6df6;
}

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

.tp__cap {
  margin: 0;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  color: rgba(255, 247, 230, 0.55);
  text-align: center;
}

.tp.is-demo {
  animation: tp-move 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes tp-move {
  0%, 6% {
    --col: 30%;
    --row: 66%;
  }
  26% {
    --col: 56%;
    --row: 66%;
  }
  44% {
    --col: 16%;
    --row: 66%;
  }
  60% {
    --col: 30%;
    --row: 30%;
  }
  76% {
    --col: 30%;
    --row: 78%;
  }
  88%, 100% {
    --col: 30%;
    --row: 66%;
  }
}
.tp.is-demo .tp__bar--v {
  animation: tp-hot-a 2s steps(1, end) infinite;
}

.tp.is-demo .tp__bar--h {
  animation: tp-hot-b 2s steps(1, end) infinite;
}

@keyframes tp-hot-a {
  0%, 5% {
    background: rgba(255, 247, 230, 0.16);
  }
  6%, 45% {
    background: #2f6df6;
  }
  46%, 100% {
    background: rgba(255, 247, 230, 0.16);
  }
}
@keyframes tp-hot-b {
  0%, 45% {
    background: rgba(255, 247, 230, 0.16);
  }
  46%, 87% {
    background: #2f6df6;
  }
  88%, 100% {
    background: rgba(255, 247, 230, 0.16);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tp.is-demo,
  .tp.is-demo .tp__bar--v,
  .tp.is-demo .tp__bar--h {
    animation: none !important;
  }
  .tp__bar {
    transition: none;
  }
}
@media (max-width: 340px) {
  .tp__box {
    height: 112px;
  }
  .tp__side, .tp__edit, .tp__term {
    padding: 4px;
  }
}

// 실제 동작: 세로 손잡이는 grid-template-columns, 가로 손잡이는 grid-template-rows 를 각자 바꾼다.
var root = document.getElementById('tp-root');
var box = document.getElementById('tp-box');
var pair = [
  { bar: document.getElementById('tp-barv'), key: '--col', lo: 14, hi: 60, axis: 'x' },
  { bar: document.getElementById('tp-barh'), key: '--row', lo: 16, hi: 70, axis: 'y' }
];
var live = null;

function set(p, pct) {
  var v = Math.max(p.lo, Math.min(pct, p.hi));
  root.style.setProperty(p.key, v.toFixed(1) + '%');
  p.bar.setAttribute('aria-valuenow', String(Math.round(v)));
}
pair.forEach(function (p) {
  p.bar.addEventListener('pointerdown', function (e) {
    root.classList.remove('is-demo');
    live = p;
    p.bar.setPointerCapture(e.pointerId);
    e.preventDefault();
  });
  p.bar.addEventListener('pointermove', function (e) {
    if (live !== p) return;
    var r = box.getBoundingClientRect();
    set(p, p.axis === 'x' ? (e.clientX - r.left) / r.width * 100 : (e.clientY - r.top) / r.height * 100);
  });
  p.bar.addEventListener('pointerup', function () { live = null; });
  p.bar.addEventListener('keydown', function (e) {
    var d = (e.key === 'ArrowLeft' || e.key === 'ArrowUp') ? -5 : (e.key === 'ArrowRight' || e.key === 'ArrowDown') ? 5 : 0;
    if (!d) return;
    root.classList.remove('is-demo');
    set(p, Number(p.bar.getAttribute('aria-valuenow')) + d);
    p.bar.focus({ preventScroll: true });
    e.preventDefault();
  });
});

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

export type ThreePaneLayoutProps = {
  startCol?: number;
  startRow?: number;
  duration?: number;
  easing?: string;
  color?: string;
};

type PEvt = { clientX: number; clientY: number; pointerId: number; preventDefault(): void; currentTarget: { setPointerCapture(id: number): void } };
type KeyEvt = { key: string; preventDefault(): void };
type Vars = CSSProperties & { "--col"?: string; "--row"?: string; "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function ThreePaneLayout({
  startCol = 30,
  startRow = 66,
  duration = 220,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#2f6df6",
}: ThreePaneLayoutProps) {
  const [col, setCol] = useState(startCol);
  const [row, setRow] = useState(startRow);
  const live = useRef<"col" | "row" | null>(null);
  const boxRef = useRef<HTMLDivElement>(null);

  function onDown(axis: "col" | "row", e: PEvt): void {
    live.current = axis;
    e.currentTarget.setPointerCapture(e.pointerId);
    e.preventDefault();
  }
  function onMove(axis: "col" | "row", e: PEvt): void {
    const box = boxRef.current;
    if (live.current !== axis || !box) return;
    const r = box.getBoundingClientRect();
    if (axis === "col") setCol(Math.max(14, Math.min(((e.clientX - r.left) / r.width) * 100, 60)));
    else setRow(Math.max(16, Math.min(((e.clientY - r.top) / r.height) * 100, 70)));
  }
  function onUp(): void { live.current = null; }
  function onKey(axis: "col" | "row", e: KeyEvt): void {
    const d = e.key === "ArrowLeft" || e.key === "ArrowUp" ? -5 : e.key === "ArrowRight" || e.key === "ArrowDown" ? 5 : 0;
    if (!d) return;
    if (axis === "col") setCol(Math.max(14, Math.min(col + d, 60)));
    else setRow(Math.max(16, Math.min(row + d, 70)));
    e.preventDefault();
  }

  const vars: Vars = {
    "--col": `${col.toFixed(1)}%`,
    "--row": `${row.toFixed(1)}%`,
    "--duration": `${duration}ms`,
    "--easing": easing,
    "--color": color,
  };

  return (
    <div className={styles.tp} style={vars}>
      <div className={styles.box} ref={boxRef}>
        <section className={styles.side} aria-label="File list">
          <span className={styles.ico}>
            <svg viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z" opacity=".2" /><path d="M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z" /></g></svg>
          </span>
          <span className={styles.row} />
          <span className={`${styles.row} ${styles.rowOn}`} />
          <span className={styles.row} />
        </section>
        <div
          className={`${styles.bar} ${styles.barV}`}
          role="separator"
          tabIndex={0}
          aria-orientation="vertical"
          aria-label="Sidebar width"
          aria-valuemin={14}
          aria-valuemax={60}
          aria-valuenow={Math.round(col)}
          onPointerDown={(e: PEvt): void => onDown("col", e)}
          onPointerMove={(e: PEvt): void => onMove("col", e)}
          onPointerUp={onUp}
          onKeyDown={(e: KeyEvt): void => onKey("col", e)}
        />
        <div className={styles.main}>
          <section className={styles.edit} aria-label="Editor">
            <span className={styles.ico}>
              <svg viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="m240 128l-48 40H64l-48-40l48-40h128Z" opacity=".2" /><path d="M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25" /></g></svg>
            </span>
            <span className={`${styles.tok} ${styles.tokA}`} />
            <span className={`${styles.tok} ${styles.tokB}`} />
            <span className={`${styles.tok} ${styles.tokC}`} />
          </section>
          <div
            className={`${styles.bar} ${styles.barH}`}
            role="separator"
            tabIndex={0}
            aria-orientation="horizontal"
            aria-label="Console height"
            aria-valuemin={16}
            aria-valuemax={70}
            aria-valuenow={Math.round(row)}
            onPointerDown={(e: PEvt): void => onDown("row", e)}
            onPointerMove={(e: PEvt): void => onMove("row", e)}
            onPointerUp={onUp}
            onKeyDown={(e: KeyEvt): void => onKey("row", e)}
          />
          <section className={styles.term} aria-label="Console">
            <span className={styles.ico}>
              <svg viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M224 56v144a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8V56a8 8 0 0 1 8-8h176a8 8 0 0 1 8 8" opacity=".2" /><path d="M128 128a8 8 0 0 1-3 6.25l-40 32a8 8 0 1 1-10-12.5L107.19 128L75 102.25a8 8 0 1 1 10-12.5l40 32a8 8 0 0 1 3 6.25m48 24h-40a8 8 0 0 0 0 16h40a8 8 0 0 0 0-16m56-96v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16m-16 144V56H40v144z" /></g></svg>
            </span>
            <span className={`${styles.tok} ${styles.tokD}`} />
          </section>
        </div>
      </div>
      <p className={styles.cap}>Each handle only shrinks the pane next to it</p>
    </div>
  );
}