@ncds/ui-admin 1.8.28-alpha.0 → 1.8.28-alpha.1

package/dist/esm/src/components/tab/__tests__/TabButton.test.js

@@ -0,0 +1,249 @@
+// @vitest-environment jsdom
+//
+// TabButton (src/components/tab/TabButton.tsx) 위험 경로 — 위험 목록표 TBN-xx.
+// href 유무로 <button>(+닫기 버튼) / <a> 두 갈래로 렌더한다. Badge 는 실구현.
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { TabButton } from '../TabButton';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TAB_ID = 'order';
+const TAB_LABEL = '주문';
+const TAB_HREF = '/orders';
+let root = null;
+let container = null;
+afterEach(() => {
+  if (root) {
+    act(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  vi.restoreAllMocks();
+});
+const render = props => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  }
+  act(() => {
+    root?.render(/*#__PURE__*/createElement(TabButton, props));
+  });
+  return container;
+};
+const click = element => {
+  act(() => {
+    element.click();
+  });
+};
+const tabOf = view => view.querySelector('.ncua-tab-button');
+const closeOf = view => view.querySelector('.ncua-tab-close');
+describe('TabButton — 버튼 탭 click (TBN-01)', () => {
+  it('TBN-01 <button type="button"> 으로 렌더하고 click 하면 onClick(id) 를 호출한다', () => {
+    const onClick = vi.fn();
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL,
+      onClick
+    });
+    const tab = tabOf(view);
+    click(tab);
+    expect(tab?.tagName).toBe('BUTTON');
+    expect(tab?.getAttribute('type')).toBe('button');
+    expect(tab?.textContent).toBe(TAB_LABEL);
+    expect(onClick).toHaveBeenCalledWith(TAB_ID);
+  });
+  it('TBN-01 id 가 없으면 onClick 에 빈 문자열을 넘긴다', () => {
+    const onClick = vi.fn();
+    const view = render({
+      label: TAB_LABEL,
+      onClick
+    });
+    click(tabOf(view));
+    expect(onClick).toHaveBeenCalledWith('');
+  });
+  it('TBN-01 onClick 이 없어도 click 에 예외가 나지 않는다', () => {
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL
+    });
+    expect(() => click(tabOf(view))).not.toThrow();
+  });
+});
+describe('TabButton — 닫기 버튼 (TBN-02)', () => {
+  it('TBN-02 onClose 가 있으면 탭 뒤에 XClose 아이콘 닫기 버튼을 두고 click 하면 onClose(id) 만 호출한다', () => {
+    const onClick = vi.fn();
+    const onClose = vi.fn();
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL,
+      onClick,
+      onClose
+    });
+    const close = closeOf(view);
+    click(close);
+    expect(tabOf(view)?.nextElementSibling).toBe(close);
+    expect(close?.getAttribute('type')).toBe('button');
+    expect(close?.querySelector('svg')).not.toBeNull();
+    expect(onClose).toHaveBeenCalledWith(TAB_ID);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  it('TBN-02 탭 click 은 onClose 를 호출하지 않는다', () => {
+    const onClick = vi.fn();
+    const onClose = vi.fn();
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL,
+      onClick,
+      onClose
+    });
+    click(tabOf(view));
+    expect(onClick).toHaveBeenCalledWith(TAB_ID);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+  it('TBN-02 id 가 없으면 onClose 에 빈 문자열을 넘긴다', () => {
+    const onClose = vi.fn();
+    const view = render({
+      label: TAB_LABEL,
+      onClose
+    });
+    click(closeOf(view));
+    expect(onClose).toHaveBeenCalledWith('');
+  });
+  it('TBN-02 onClose 가 없으면 닫기 버튼을 렌더하지 않는다', () => {
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL
+    });
+    expect(closeOf(view)).toBeNull();
+  });
+});
+describe('TabButton — 링크 탭 (TBN-03)', () => {
+  it('TBN-03 href 가 있으면 <a href target="_self"> 로 렌더하고 닫기 버튼은 없다', () => {
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL,
+      href: TAB_HREF
+    });
+    const tab = tabOf(view);
+    expect(tab?.tagName).toBe('A');
+    expect(tab?.getAttribute('href')).toBe(TAB_HREF);
+    expect(tab?.getAttribute('target')).toBe('_self');
+    expect(tab?.textContent).toBe(TAB_LABEL);
+    expect(view.querySelector('button')).toBeNull();
+  });
+  it('TBN-03 target 을 넘기면 그 값을 쓴다', () => {
+    const view = render({
+      label: TAB_LABEL,
+      href: TAB_HREF,
+      target: '_blank'
+    });
+    expect(tabOf(view)?.getAttribute('target')).toBe('_blank');
+  });
+  it('TBN-03 href 가 빈 문자열이면 링크가 아니라 버튼으로 렌더한다', () => {
+    const view = render({
+      label: TAB_LABEL,
+      href: ''
+    });
+    expect(tabOf(view)?.tagName).toBe('BUTTON');
+  });
+});
+describe('TabButton — 링크 탭의 onClick (TBN-04)', () => {
+  it('TBN-04 href 가 있는 탭에 넘긴 onClick 은 버려져 click 해도 호출되지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (링크 탭 타입이 onClick 을 받지만 anchorProps 에서 제거돼 무시됨)
+    const onClick = vi.fn();
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL,
+      href: '#claims',
+      onClick
+    });
+    click(tabOf(view));
+    expect(tabOf(view)?.tagName).toBe('A');
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  it.todo('TBN-04 링크 탭을 click 하면 넘긴 onClick 도 호출한다 (기대, #597)');
+});
+describe('TabButton — 활성·배지·내용·클래스 (TBN-05)', () => {
+  it.each([['버튼', {}], ['링크', {
+    href: TAB_HREF
+  }]])('TBN-05 %s 탭: isActive 면 is-active, 아니면 없음, className 을 덧붙인다', (_kind, extra) => {
+    const view = render({
+      label: TAB_LABEL,
+      isActive: true,
+      className: 'my-tab',
+      ...extra
+    });
+    expect(tabOf(view)?.classList.contains('is-active')).toBe(true);
+    expect(tabOf(view)?.classList.contains('my-tab')).toBe(true);
+    render({
+      label: TAB_LABEL,
+      ...extra
+    });
+    expect(tabOf(view)?.classList.contains('is-active')).toBe(false);
+  });
+  it.each([['버튼', {}], ['링크', {
+    href: TAB_HREF
+  }]])('TBN-05 %s 탭: badgeInfo 가 있으면 xs Badge 를 label 다음, children 앞에 렌더한다', (_kind, extra) => {
+    const view = render({
+      label: TAB_LABEL,
+      badgeInfo: {
+        label: '3',
+        size: 'sm',
+        color: 'error'
+      },
+      children: /*#__PURE__*/createElement('i', {
+        className: 'tab-extra'
+      }),
+      ...extra
+    });
+    const tab = tabOf(view);
+    const badge = tab?.querySelector('.ncua-badge');
+    expect(badge?.classList.contains('ncua-badge--xs')).toBe(true);
+    expect(badge?.classList.contains('ncua-badge--error')).toBe(true);
+    expect(badge?.textContent).toBe('3');
+    expect(Array.from(tab?.childNodes ?? []).map(node => node.nodeName)).toEqual(['#text', 'SPAN', 'I']);
+  });
+  it('TBN-05 badgeInfo 가 없으면 Badge 를 렌더하지 않는다', () => {
+    const view = render({
+      label: TAB_LABEL
+    });
+    expect(view.querySelector('.ncua-badge')).toBeNull();
+  });
+});
+describe('TabButton — 버튼 속성 전달 (TBN-06)', () => {
+  it('TBN-06 aria-* 등 나머지 속성을 탭 버튼에 전달한다', () => {
+    const view = render({
+      label: TAB_LABEL,
+      'aria-controls': 'panel-order',
+      role: 'tab'
+    });
+    expect(tabOf(view)?.getAttribute('aria-controls')).toBe('panel-order');
+    expect(tabOf(view)?.getAttribute('role')).toBe('tab');
+  });
+  it('TBN-06 disabled 면 탭 버튼이 disabled 이고 click 해도 onClick 을 호출하지 않는다', () => {
+    const onClick = vi.fn();
+    const view = render({
+      id: TAB_ID,
+      label: TAB_LABEL,
+      disabled: true,
+      onClick
+    });
+    click(tabOf(view));
+    expect(tabOf(view).disabled).toBe(true);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});
+describe('TabButton — type 고정 (TBN-07)', () => {
+  it('TBN-07 type="submit" 을 넘겨도 탭 버튼은 type="button" 이다', () => {
+    const view = render({
+      label: TAB_LABEL,
+      type: 'submit'
+    });
+    expect(tabOf(view)?.getAttribute('type')).toBe('button');
+  });
+});

package/dist/esm/src/hooks/__tests__/useCallbackRef.test.js

@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+//
+// useCallbackRef (src/hooks/useCallbackRef.ts) 위험 경로 — 위험 목록표 CR-xx.
+// 훅을 ref 로 쓰는 최소 컴포넌트를 렌더하고, callback·cleanup 호출 순서를 로그로 비교한다.
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { useCallbackRef } from '../useCallbackRef';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const Probe = _ref => {
+  let {
+    tag,
+    callback
+  } = _ref;
+  return /*#__PURE__*/createElement(tag, {
+    ref: useCallbackRef(callback)
+  });
+};
+let root = null;
+let container = null;
+afterEach(() => {
+  if (root) {
+    act(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  vi.restoreAllMocks();
+});
+const render = props => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  }
+  act(() => {
+    root?.render(/*#__PURE__*/createElement(Probe, props));
+  });
+};
+/** callback·cleanup 호출을 'callback:DIV' · 'cleanup:DIV' · 'callback:null' 형태로 기록한다 */
+const recorder = withCleanup => {
+  const log = [];
+  const callback = node => {
+    log.push(`callback:${node ? node.tagName : 'null'}`);
+    if (node && withCleanup) {
+      return () => {
+        log.push(`cleanup:${node.tagName}`);
+      };
+    }
+  };
+  return {
+    log,
+    callback
+  };
+};
+describe('useCallbackRef — 부착과 교체 (CR-01)', () => {
+  it('CR-01 노드가 붙으면 callback(node) 를 호출하고 그때는 cleanup 을 실행하지 않는다', () => {
+    const {
+      log,
+      callback
+    } = recorder(true);
+    render({
+      tag: 'div',
+      callback
+    });
+    expect(log).toEqual(['callback:DIV']);
+  });
+  it('CR-01 노드가 바뀌면 이전 노드의 cleanup 을 먼저 실행하고 새 노드로 callback 한다', () => {
+    const {
+      log,
+      callback
+    } = recorder(true);
+    render({
+      tag: 'div',
+      callback
+    });
+    render({
+      tag: 'span',
+      callback
+    });
+    expect(log).toEqual(['callback:DIV', 'cleanup:DIV', 'callback:null', 'callback:SPAN']);
+  });
+});
+describe('useCallbackRef — 언마운트 (CR-02)', () => {
+  it('CR-02 언마운트하면 cleanup 을 실행한 뒤 callback(null) 을 호출한다', () => {
+    const {
+      log,
+      callback
+    } = recorder(true);
+    render({
+      tag: 'div',
+      callback
+    });
+    act(() => {
+      root?.unmount();
+    });
+    root = null;
+    expect(log).toEqual(['callback:DIV', 'cleanup:DIV', 'callback:null']);
+  });
+});
+describe('useCallbackRef — cleanup 미반환 (CR-03)', () => {
+  it('CR-03 callback 이 cleanup 을 돌려주지 않으면 노드 교체 때 callback 만 이어서 호출한다', () => {
+    const {
+      log,
+      callback
+    } = recorder(false);
+    render({
+      tag: 'div',
+      callback
+    });
+    render({
+      tag: 'span',
+      callback
+    });
+    expect(log).toEqual(['callback:DIV', 'callback:null', 'callback:SPAN']);
+  });
+});
+describe('useCallbackRef — callback 교체 (CR-04)', () => {
+  it('CR-04 같은 노드라도 callback 참조가 바뀌면 이전 cleanup·이전 callback(null) 뒤 새 callback(node) 를 호출한다', () => {
+    const log = [];
+    const named = name => node => {
+      log.push(`${name}:${node ? node.tagName : 'null'}`);
+      if (node) {
+        return () => {
+          log.push(`${name}-cleanup:${node.tagName}`);
+        };
+      }
+      return undefined;
+    };
+    const first = named('first');
+    const second = named('second');
+    render({
+      tag: 'div',
+      callback: first
+    });
+    render({
+      tag: 'div',
+      callback: first
+    });
+    render({
+      tag: 'div',
+      callback: second
+    });
+    expect(log).toEqual(['first:DIV', 'first-cleanup:DIV', 'first:null', 'second:DIV']);
+  });
+});

package/dist/esm/src/hooks/__tests__/useMediaQuery.test.js

@@ -0,0 +1,116 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { useMediaQuery } from '../useMediaQuery';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const QUERY = '(max-width: 768px)';
+/** change 리스너를 보관해 직접 호출할 수 있는 matchMedia 가짜 */
+const installMatchMedia = initialMatches => {
+  const listeners = new Set();
+  const queries = [];
+  vi.stubGlobal('matchMedia', query => {
+    queries.push(query);
+    return {
+      matches: initialMatches,
+      media: query,
+      addEventListener: (_type, listener) => listeners.add(listener),
+      removeEventListener: (_type, listener) => listeners.delete(listener)
+    };
+  });
+  const emit = matches => act(() => {
+    for (const listener of Array.from(listeners)) {
+      listener({
+        matches
+      });
+    }
+  });
+  return {
+    listeners,
+    queries,
+    emit
+  };
+};
+const mounted = [];
+afterEach(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    act(() => root.unmount());
+    container.remove();
+  }
+  vi.unstubAllGlobals();
+});
+/** 훅 결과를 data 속성으로 노출하는 프로브 컴포넌트 */
+const Probe = _ref => {
+  let {
+    onMatched
+  } = _ref;
+  const matches = useMediaQuery(QUERY, {
+    onMatched
+  });
+  return /*#__PURE__*/createElement('output', {
+    'data-matches': String(matches)
+  });
+};
+const mountProbe = onMatched => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  const entry = {
+    root,
+    container
+  };
+  mounted.push(entry);
+  act(() => root.render(/*#__PURE__*/createElement(Probe, {
+    onMatched
+  })));
+  const read = () => container.querySelector('output')?.getAttribute('data-matches');
+  return {
+    read,
+    entry
+  };
+};
+describe('useMediaQuery (RSD-04)', () => {
+  it.each([[true, 'true'], [false, 'false']])('RSD-04 마운트 직후 matchMedia(query).matches %s 를 반영한다', (initial, expected) => {
+    const media = installMatchMedia(initial);
+    const probe = mountProbe();
+    expect(media.queries).toContain(QUERY);
+    expect(probe.read()).toBe(expected);
+  });
+  it('RSD-04 change(matches true) 는 값을 갱신하고 onMatched 를 부른다', () => {
+    const media = installMatchMedia(false);
+    const onMatched = vi.fn();
+    const probe = mountProbe(onMatched);
+    media.emit(true);
+    expect(probe.read()).toBe('true');
+    expect(onMatched).toHaveBeenCalled();
+  });
+  it('RSD-04 change(matches false) 는 값만 갱신하고 onMatched 를 부르지 않는다', () => {
+    const media = installMatchMedia(true);
+    const onMatched = vi.fn();
+    const probe = mountProbe(onMatched);
+    media.emit(false);
+    expect(probe.read()).toBe('false');
+    expect(onMatched).not.toHaveBeenCalled();
+  });
+  it('RSD-04 onMatched 없이도 change(true) 를 받는다', () => {
+    const media = installMatchMedia(false);
+    const probe = mountProbe();
+    media.emit(true);
+    expect(probe.read()).toBe('true');
+  });
+  it('RSD-04 unmount 하면 change 리스너를 해제한다', () => {
+    const media = installMatchMedia(false);
+    const probe = mountProbe();
+    const subscribedBefore = media.listeners.size;
+    mounted.splice(mounted.indexOf(probe.entry), 1);
+    act(() => probe.entry.root.unmount());
+    probe.entry.container.remove();
+    expect(subscribedBefore).toBeGreaterThan(0);
+    expect(media.listeners.size).toBe(0);
+  });
+});

package/dist/esm/src/hooks/__tests__/usePortalState.ssr.test.js

@@ -0,0 +1,22 @@
+// @vitest-environment node
+//
+// usePortalState 의 SSR 경로 — 위험 목록표 UPS-01 (PR-7c). useFloatingPosition.ssr.test.ts 선례처럼
+// document 가 없는 node 환경에서 renderToString 으로 훅을 부른다.
+import { createElement } from 'react';
+import { renderToString } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { usePortalState } from '../usePortalState';
+describe('UPS-01 usePortalState — SSR', () => {
+  it('UPS-01 document 가 없으면 portalContainer 는 null 이고 Portal 을 쓰지 않는다', () => {
+    const results = [];
+    const PortalProbe = () => {
+      results.push(usePortalState());
+      return null;
+    };
+    renderToString(/*#__PURE__*/createElement(PortalProbe));
+    expect(results).toEqual([{
+      shouldPortal: false,
+      portalContainer: null
+    }]);
+  });
+});

package/dist/esm/src/hooks/dropdown/__tests__/dropdownHooks.test.js

@@ -0,0 +1,165 @@
+// @vitest-environment jsdom
+//
+// 드롭다운 훅의 컴포넌트 경유로 닿지 않는 분기 — 위험 목록표 DDH-01~03 (PR-7c).
+// 호출부(SelectBox·ComboBox)는 dropdownRef·target 을 항상 넘기고 isKeyboardNavigation 을 부르지 않으므로
+// 훅을 부르는 하네스 컴포넌트로 직접 구동한다.
+import { createElement, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { useDropdown } from '../useDropdown';
+import { useDropdownKeyboard } from '../useDropdownKeyboard';
+import { useWindowResize } from '../useWindowResize';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const MAX_HEIGHT = 200;
+const OPTIONS = ['a', 'b'];
+const cleanups = [];
+afterEach(() => {
+  for (const cleanup of cleanups.splice(0)) cleanup();
+});
+const mount = element => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  cleanups.push(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+  act(() => {
+    root.render(element);
+  });
+  return container;
+};
+const requireElement = (scope, selector) => {
+  const element = scope.querySelector(selector);
+  if (element === null) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return element;
+};
+const dispatch = (target, event) => {
+  act(() => {
+    target.dispatchEvent(event);
+  });
+};
+describe('DDH-01 useDropdown — dropdownRef 생략', () => {
+  const DropdownProbe = () => {
+    const triggerRef = useRef(null);
+    const {
+      isOpen,
+      toggleDropdown
+    } = useDropdown({
+      triggerRef,
+      maxHeight: MAX_HEIGHT,
+      itemCount: OPTIONS.length,
+      optionItems: OPTIONS,
+      onSelect: () => undefined
+    });
+    return /*#__PURE__*/createElement('button', {
+      ref: triggerRef,
+      type: 'button',
+      'data-open': String(isOpen),
+      onClick: toggleDropdown
+    });
+  };
+  it('DDH-01 dropdownRef 없이도 트리거 안 mousedown 은 열린 채 두고, 바깥 mousedown 은 닫는다', () => {
+    const container = mount(/*#__PURE__*/createElement(DropdownProbe));
+    const trigger = requireElement(container, 'button');
+    act(() => {
+      trigger.click();
+    });
+    dispatch(trigger, new MouseEvent('mousedown', {
+      bubbles: true
+    }));
+    const afterInside = trigger.dataset.open;
+    dispatch(document.body, new MouseEvent('mousedown', {
+      bubbles: true
+    }));
+    expect([afterInside, trigger.dataset.open]).toEqual(['true', 'false']);
+  });
+});
+describe('DDH-02 useDropdownKeyboard — 직접 호출', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+  it('DDH-02 isKeyboardNavigation 은 화살표 뒤 true, mousemove 뒤 false 이고 옵션 목록 없는 dropdownRef 는 스크롤 보정을 건너뛴다', () => {
+    vi.useFakeTimers({
+      toFake: ['setTimeout']
+    });
+    const onFocusChange = vi.fn();
+    const captured = {
+      isKeyboardNavigation: null
+    };
+    const KeyboardProbe = () => {
+      // 옵션 목록(.ncua-select-dropdown__options)이 없는 요소를 dropdownRef 로 넘긴다
+      const dropdownRef = useRef(null);
+      const {
+        handleKeyDown,
+        handleMouseMove,
+        isKeyboardNavigation
+      } = useDropdownKeyboard({
+        isOpen: true,
+        disabled: false,
+        focusedIndex: -1,
+        optionItems: OPTIONS,
+        onToggle: () => undefined,
+        onSelect: () => undefined,
+        onClose: () => undefined,
+        onFocusChange,
+        dropdownRef
+      });
+      captured.isKeyboardNavigation = isKeyboardNavigation;
+      return /*#__PURE__*/createElement('div', {
+        ref: dropdownRef,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        onMouseMove: handleMouseMove
+      });
+    };
+    const container = mount(/*#__PURE__*/createElement(KeyboardProbe));
+    const target = requireElement(container, 'div');
+    const isKeyboardNavigation = () => {
+      if (captured.isKeyboardNavigation === null) throw new Error('isKeyboardNavigation 을 얻지 못했습니다');
+      return captured.isKeyboardNavigation();
+    };
+    const initial = isKeyboardNavigation();
+    dispatch(target, new KeyboardEvent('keydown', {
+      key: 'ArrowDown',
+      bubbles: true,
+      cancelable: true
+    }));
+    const afterArrow = isKeyboardNavigation();
+    expect(() => act(() => {
+      vi.runOnlyPendingTimers();
+    })).not.toThrow();
+    dispatch(target, new MouseEvent('mousemove', {
+      bubbles: true
+    }));
+    expect([initial, afterArrow, isKeyboardNavigation()]).toEqual([false, true, false]);
+    expect(onFocusChange).toHaveBeenCalledWith(0);
+  });
+});
+describe('DDH-03 useWindowResize — target 생략', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+  it('DDH-03 target 을 넘기지 않으면 document.body 를 관찰한다', () => {
+    const observed = [];
+    class ResizeObserverStub {
+      observe(target) {
+        observed.push(target);
+      }
+      unobserve() {
+        return undefined;
+      }
+      disconnect() {
+        return undefined;
+      }
+    }
+    vi.stubGlobal('ResizeObserver', ResizeObserverStub);
+    const ResizeProbe = () => {
+      useWindowResize(() => undefined, true);
+      return null;
+    };
+    mount(/*#__PURE__*/createElement(ResizeProbe));
+    expect(observed.map(target => target === document.body)).toEqual([true]);
+  });
+});