05넘침 접힘 더보기 — 그룹 너비 값이 좁아지면 넘치는 버튼들이 하나의 더보기 값 안으로 접히는 방식

<main class="stage">
<div class="ovm is-demo" id="ovm">
  <div class="ovm__resizer" id="ovmBox" style="width: 260px;">
    <div class="ovm__track" id="ovmTrack" role="toolbar" aria-label="서식 도구"></div>
    <button class="ovm__more" id="ovmMore" aria-haspopup="true" aria-expanded="false" hidden>더보기 ▾</button>
    <ul class="ovm__menu" id="ovmMenu" hidden></ul>
  </div>
  <span class="ovm__handle" id="ovmHandle" aria-hidden="true"></span>
</div>
</main>

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

// 계산 겹: index.html 이 버튼마다 실측 폭을 한 번 캐시하고, 컨테이너 폭(실측)에서 OVERFLOW_BUFFER 를
// 뺀 여유값과 비교해 몇 개가 들어가는지 부분합으로 계산한다 — 추측 px 가 아니라 실측 합산이다.
// 컨테이너 폭 자체가 이 항목의 "값" 이라 여기서만 예외로 width 를 직접 바꾼다(다른 항목은 transform 전용).
@include stage($stage-paper);

.ovm {
  display: flex;
  align-items: center;
  gap: $sp-2;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.ovm__resizer {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: $r-control;
  background: rgba($subject-ink, .04);
  padding: $sp-2;
  display: flex;
  align-items: center;
  gap: $sp-2;
}

.ovm__track {
  display: flex;
  gap: $sp-2;
  overflow: hidden;
  flex: 0 0 auto;
}

.ovm__btn,
.ovm__more,
.ovm__menuBtn {
  appearance: none;
  border: 1px solid rgba($subject-ink, .18);
  border-radius: $r-sm;
  background: $subject-cream;
  color: $subject-ink;
  font-size: 12px;
  font-weight: 600;
  padding: $sp-1 $sp-3;
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto;
}

.ovm__more {
  background: $subject-blue-deep;
  border-color: $subject-blue-deep;
  color: $subject-cream;
}

.ovm__menu {
  position: absolute;
  top: 100%;
  right: $sp-2;
  margin: 4px 0 0;
  padding: $sp-1;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: $subject-cream;
  border-radius: $r-sm;
  box-shadow: $shadow-raised;
  z-index: 2;
}

.ovm__handle {
  flex: 0 0 auto;
  width: 6px;
  height: 40px;
  border-radius: $r-xs;
  background: rgba($subject-ink, .22);
  cursor: ew-resize;
  touch-action: none;
}

@media (max-width: 340px) {
  .ovm__btn, .ovm__more, .ovm__menuBtn { font-size: 11px; padding: $sp-1 $sp-2; }
}

@media (prefers-reduced-motion: reduce) {
  .ovm__resizer { 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);
}

.ovm {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.ovm__resizer {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(23, 20, 26, 0.04);
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ovm__track {
  display: flex;
  gap: 8px;
  overflow: hidden;
  flex: 0 0 auto;
}

.ovm__btn,
.ovm__more,
.ovm__menuBtn {
  appearance: none;
  border: 1px solid rgba(23, 20, 26, 0.18);
  border-radius: 8px;
  background: #fff7e6;
  color: #17141a;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto;
}

.ovm__more {
  background: #0a4fe8;
  border-color: #0a4fe8;
  color: #fff7e6;
}

.ovm__menu {
  position: absolute;
  top: 100%;
  right: 8px;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff7e6;
  border-radius: 8px;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  z-index: 2;
}

.ovm__handle {
  flex: 0 0 auto;
  width: 6px;
  height: 40px;
  border-radius: 4px;
  background: rgba(23, 20, 26, 0.22);
  cursor: ew-resize;
  touch-action: none;
}

@media (max-width: 340px) {
  .ovm__btn, .ovm__more, .ovm__menuBtn {
    font-size: 11px;
    padding: 4px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ovm__resizer {
    transition: none;
  }
}

(function () {
  var LABELS = ['굵게', '기울임', '밑줄', '취소선', '정렬', '색상', '링크'];
  var OVERFLOW_BUFFER = 24; // 계산 겹 상수: 더보기 버튼 폭까지 계산한 뒤 남기는 안전 여유(px)
  var MIN_W = 150, MAX_W = 320;
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var root = document.getElementById('ovm');
  var box = document.getElementById('ovmBox');
  var track = document.getElementById('ovmTrack');
  var more = document.getElementById('ovmMore');
  var menu = document.getElementById('ovmMenu');
  var handle = document.getElementById('ovmHandle');
  var isDemo = true;

  var btns = LABELS.map(function (label, i) {
    var b = document.createElement('button');
    b.className = 'ovm__btn';
    b.type = 'button';
    b.textContent = label;
    b.dataset.i = String(i);
    return b;
  });

  // 계산 겹: 각 버튼의 실제 폭을 한 번 실측해 캐시한다(추측 px 를 쓰지 않는다) — track 에 전부 넣고 잰 뒤
  // 넘치는 만큼만 더보기로 옮긴다.
  btns.forEach(function (b) { track.appendChild(b); });
  var widths = btns.map(function (b) { return b.getBoundingClientRect().width; });
  var gap = 8;
  var moreWidth = 0;

  function recompute() {
    var avail = box.getBoundingClientRect().width - OVERFLOW_BUFFER;
    moreWidth = moreWidth || (function () { more.hidden = false; var w = more.getBoundingClientRect().width; more.hidden = true; return w; })();

    var sumAll = widths.reduce(function (s, w) { return s + w; }, 0) + gap * (widths.length - 1);
    var cutoff = widths.length;
    if (sumAll > avail) {
      var sum = 0;
      cutoff = 0;
      for (var i = 0; i < widths.length; i++) {
        var add = widths[i] + (i > 0 ? gap : 0);
        if (sum + add + moreWidth > avail) break;
        sum += add;
        cutoff = i + 1;
      }
      cutoff = Math.max(1, cutoff);
    }

    btns.forEach(function (b, i) { b.hidden = i >= cutoff; });
    var overflowCount = widths.length - cutoff;
    more.hidden = overflowCount === 0;
    more.textContent = '더보기 ▾ (' + overflowCount + ')';

    menu.innerHTML = '';
    for (var j = cutoff; j < widths.length; j++) {
      var li = document.createElement('li');
      var mb = document.createElement('button');
      mb.type = 'button';
      mb.className = 'ovm__menuBtn';
      mb.textContent = LABELS[j];
      li.appendChild(mb);
      menu.appendChild(li);
    }
  }

  more.addEventListener('click', function () {
    human();
    var open = menu.hidden;
    menu.hidden = !open;
    more.setAttribute('aria-expanded', String(open));
  });

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

  var dragging = false, dragStartX = 0, dragStartW = 0;
  handle.addEventListener('pointerdown', function (e) {
    human();
    dragging = true;
    dragStartX = e.clientX;
    dragStartW = box.getBoundingClientRect().width;
    handle.setPointerCapture(e.pointerId);
  });
  handle.addEventListener('pointermove', function (e) {
    if (!dragging) return;
    var w = Math.min(MAX_W, Math.max(MIN_W, dragStartW + (e.clientX - dragStartX)));
    box.style.width = w + 'px';
    recompute();
  });
  handle.addEventListener('pointerup', function () { dragging = false; });

  var ro = new ResizeObserver(function () { recompute(); });
  ro.observe(box);

  var start = 0;
  function demoWidth(ts) {
    var t = (ts - start) / 1900;
    var wave = (Math.sin(t * Math.PI * 2) + 1) / 2; // 0~1
    return MIN_W + wave * (MAX_W - MIN_W);
  }

  function loop(ts) {
    if (!start) start = ts;
    if (isDemo && !reduce) {
      box.style.width = demoWidth(ts).toFixed(1) + 'px';
      recompute();
    }
    requestAnimationFrame(loop);
  }

  recompute();
  if (reduce) { box.style.width = MAX_W + 'px'; recompute(); }
  requestAnimationFrame(loop);
})();

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

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

const LABELS = ['굵게', '기울임', '밑줄', '취소선', '정렬', '색상', '링크'];
const OVERFLOW_BUFFER = 24; // 계산 겹 상수: 더보기 버튼 폭까지 계산한 뒤 남기는 안전 여유(px)
const MIN_W = 150;
const MAX_W = 320;
const GAP = 8;

export default function OverflowCollapseMore() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const boxRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const trackRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const moreRef = useRef(null) as unknown as Box<HTMLButtonElement>;
  const menuRef = useRef(null) as unknown as Box<HTMLUListElement>;
  const handleRef = useRef(null) as unknown as Box<HTMLSpanElement>;
  const btnRefs = useRef([]) as unknown as Box<HTMLButtonElement[]>;

  useEffect(() => {
    const root = rootRef.current;
    const box = boxRef.current;
    const track = trackRef.current;
    const more = moreRef.current;
    const menu = menuRef.current;
    const handle = handleRef.current;
    const btns = btnRefs.current;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    let isDemo = true;

    // 계산 겹: 각 버튼의 실제 폭을 한 번 실측해 캐시한다(추측 px 를 쓰지 않는다) — 넘치는 만큼만 더보기로 옮긴다.
    const widths = btns.map((b) => b.getBoundingClientRect().width);
    let moreWidth = 0;

    function recompute() {
      const avail = box.getBoundingClientRect().width - OVERFLOW_BUFFER;
      if (!moreWidth) {
        more.hidden = false;
        moreWidth = more.getBoundingClientRect().width;
        more.hidden = true;
      }

      const sumAll = widths.reduce((s, w) => s + w, 0) + GAP * (widths.length - 1);
      let cutoff = widths.length;
      if (sumAll > avail) {
        let sum = 0;
        cutoff = 0;
        for (let i = 0; i < widths.length; i++) {
          const add = widths[i] + (i > 0 ? GAP : 0);
          if (sum + add + moreWidth > avail) break;
          sum += add;
          cutoff = i + 1;
        }
        cutoff = Math.max(1, cutoff);
      }

      btns.forEach((b, i) => { b.hidden = i >= cutoff; });
      const overflowCount = widths.length - cutoff;
      more.hidden = overflowCount === 0;
      more.textContent = `더보기 ▾ (${overflowCount})`;

      menu.innerHTML = '';
      for (let j = cutoff; j < widths.length; j++) {
        const li = document.createElement('li');
        const mb = document.createElement('button');
        mb.type = 'button';
        mb.className = styles.menuBtn;
        mb.textContent = LABELS[j];
        li.appendChild(mb);
        menu.appendChild(li);
      }
    }

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

    function onMoreClick() {
      human();
      const open = menu.hidden;
      menu.hidden = !open;
      more.setAttribute('aria-expanded', String(open));
    }
    more.addEventListener('click', onMoreClick);

    let dragging = false;
    let dragStartX = 0;
    let dragStartW = 0;
    function onPointerDown(e: PointerEvent) {
      human();
      dragging = true;
      dragStartX = e.clientX;
      dragStartW = box.getBoundingClientRect().width;
      handle.setPointerCapture(e.pointerId);
    }
    function onPointerMove(e: PointerEvent) {
      if (!dragging) return;
      const w = Math.min(MAX_W, Math.max(MIN_W, dragStartW + (e.clientX - dragStartX)));
      box.style.width = w + 'px';
      recompute();
    }
    function onPointerUp() { dragging = false; }
    handle.addEventListener('pointerdown', onPointerDown);
    handle.addEventListener('pointermove', onPointerMove);
    handle.addEventListener('pointerup', onPointerUp);

    const ro = new ResizeObserver(() => recompute());
    ro.observe(box);

    let start = 0;
    function demoWidth(ts: number) {
      const t = (ts - start) / 1900;
      const wave = (Math.sin(t * Math.PI * 2) + 1) / 2; // 0~1
      return MIN_W + wave * (MAX_W - MIN_W);
    }

    let raf = 0;
    function loop(ts: number) {
      if (!start) start = ts;
      if (isDemo && !reduce) {
        box.style.width = demoWidth(ts).toFixed(1) + 'px';
        recompute();
      }
      raf = requestAnimationFrame(loop);
    }

    recompute();
    if (reduce) { box.style.width = MAX_W + 'px'; recompute(); }
    raf = requestAnimationFrame(loop);

    return () => {
      cancelAnimationFrame(raf);
      ro.disconnect();
      more.removeEventListener('click', onMoreClick);
      handle.removeEventListener('pointerdown', onPointerDown);
      handle.removeEventListener('pointermove', onPointerMove);
      handle.removeEventListener('pointerup', onPointerUp);
    };
  }, []);

  return (
    <div className={`${styles.ovm} ${styles.isDemo}`} ref={(el: HTMLDivElement | null) => { if (el) rootRef.current = el; }}>
      <div
        className={styles.resizer}
        style={{ width: '260px' }}
        ref={(el: HTMLDivElement | null) => { if (el) boxRef.current = el; }}
      >
        <div
          className={styles.track}
          role="toolbar"
          aria-label="서식 도구"
          ref={(el: HTMLDivElement | null) => { if (el) trackRef.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.more}
          aria-haspopup="true"
          aria-expanded="false"
          hidden
          ref={(el: HTMLButtonElement | null) => { if (el) moreRef.current = el; }}
        >
          더보기 ▾
        </button>
        <ul
          className={styles.menu}
          hidden
          ref={(el: HTMLUListElement | null) => { if (el) menuRef.current = el; }}
        />
      </div>
      <span
        className={styles.handle}
        aria-hidden="true"
        ref={(el: HTMLSpanElement | null) => { if (el) handleRef.current = el; }}
      />
    </div>
  );
}