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

package/dist/cjs/src/components/forms-and-input/switch/__tests__/Switch.test.js

@@ -0,0 +1,317 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _Switch = require("../Switch");
+// @vitest-environment jsdom
+//
+// Switch (React) 위험 경로 — 위험 목록표 SW-xx.
+// 두 radio 중 하나를 고르는 컴포넌트다. controlled radio 는 click 직후 React 가 checked 를 되돌리므로
+// "내부 상태가 바뀌었는가"는 click 뒤의 checked·active 클래스로 관찰한다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TEXT_OPTIONS = {
+  left: {
+    label: '일',
+    value: 'day'
+  },
+  right: {
+    label: '주',
+    value: 'week'
+  }
+};
+/** 왼쪽이 true 인 boolean 구성 — 문서 예시와 같은 정상 구성 */
+const ON_OFF = {
+  left: {
+    label: '켜기',
+    value: true
+  },
+  right: {
+    label: '끄기',
+    value: false
+  }
+};
+/** 왼쪽이 false 인 boolean 구성 — value 와 화면이 뒤집히는 구성 (SW-03) */
+const OFF_ON = {
+  left: {
+    label: '끄기',
+    value: false
+  },
+  right: {
+    label: '켜기',
+    value: true
+  }
+};
+let root = null;
+let container = null;
+const renderElement = element => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(element);
+  });
+  return container;
+};
+/** 같은 root 에 다시 render 하면 props 변경(재렌더)이 된다 */
+const render = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return renderElement(/*#__PURE__*/(0, _react.createElement)(_Switch.Switch, {
+    name: 'period',
+    ...TEXT_OPTIONS,
+    ...props
+  }));
+};
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  container?.remove();
+  root = null;
+  container = null;
+  _vitest.vi.restoreAllMocks();
+});
+const requireElement = (scope, selector) => {
+  const element = scope.querySelector(selector);
+  if (!element) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return element;
+};
+const switchOf = view => requireElement(view, '.ncua-switch');
+const leftOf = view => requireElement(view, '.ncua-switch__radio--left');
+const rightOf = view => requireElement(view, '.ncua-switch__radio--right');
+const optionOf = (view, side) => requireElement(view, `.ncua-switch__option--${side}`);
+const isActive = (view, side) => optionOf(view, side).classList.contains('ncua-switch__option--active');
+/** [왼쪽 checked, 오른쪽 checked] — 선택 상태를 한 번에 단언한다 */
+const checkedOf = view => [leftOf(view).checked, rightOf(view).checked];
+const click = element => {
+  (0, _testUtils.act)(() => {
+    element.click();
+  });
+};
+// ── P0 ─────────────────────────────────────────────────
+(0, _vitest.describe)('Switch — uncontrolled 선택 (SW-01)', () => {
+  (0, _vitest.it)('SW-01 defaultValue 를 생략하면 왼쪽이 선택되고 active 클래스가 붙는다', () => {
+    const view = render();
+    (0, _vitest.expect)(checkedOf(view)).toEqual([true, false]);
+    (0, _vitest.expect)(isActive(view, 'left')).toBe(true);
+    (0, _vitest.expect)(optionOf(view, 'right').classList.contains('ncua-switch__option--inactive')).toBe(true);
+  });
+  (0, _vitest.it)('SW-01 오른쪽 radio click → onChange(오른쪽 값) 이고 선택·active 가 오른쪽으로 옮겨간다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      onChange
+    });
+    click(rightOf(view));
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith('week');
+    (0, _vitest.expect)(checkedOf(view)).toEqual([false, true]);
+    (0, _vitest.expect)([isActive(view, 'left'), isActive(view, 'right')]).toEqual([false, true]);
+  });
+  (0, _vitest.it)('SW-01 defaultValue 로 오른쪽에서 시작해 왼쪽 click 시 onChange(왼쪽 값)', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      defaultValue: 'week',
+      onChange
+    });
+    (0, _vitest.expect)(checkedOf(view)).toEqual([false, true]);
+    click(leftOf(view));
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith('day');
+    (0, _vitest.expect)(checkedOf(view)).toEqual([true, false]);
+  });
+});
+(0, _vitest.describe)('Switch — controlled 문자열 (SW-02)', () => {
+  (0, _vitest.it)('SW-02 value 로 선택을 표시하고 click 은 onChange 만 부를 뿐 선택을 옮기지 않는다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      value: 'day',
+      onChange
+    });
+    click(rightOf(view));
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith('week');
+    (0, _vitest.expect)(checkedOf(view)).toEqual([true, false]);
+    (0, _vitest.expect)(isActive(view, 'left')).toBe(true);
+  });
+  (0, _vitest.it)('SW-02 부모가 value 를 바꿔야 선택이 옮겨간다', () => {
+    const view = render({
+      value: 'day',
+      onChange: _vitest.vi.fn()
+    });
+    render({
+      value: 'week',
+      onChange: _vitest.vi.fn()
+    });
+    (0, _vitest.expect)(checkedOf(view)).toEqual([false, true]);
+    (0, _vitest.expect)(isActive(view, 'right')).toBe(true);
+  });
+});
+(0, _vitest.describe)('Switch — boolean 옵션 (SW-03)', () => {
+  (0, _vitest.it)('SW-03 왼쪽이 true 인 구성: value true 면 왼쪽, false 면 오른쪽을 선택 표시한다', () => {
+    const view = render({
+      ...ON_OFF,
+      value: true,
+      onChange: _vitest.vi.fn()
+    });
+    (0, _vitest.expect)(checkedOf(view)).toEqual([true, false]);
+    render({
+      ...ON_OFF,
+      value: false,
+      onChange: _vitest.vi.fn()
+    });
+    (0, _vitest.expect)(checkedOf(view)).toEqual([false, true]);
+  });
+  (0, _vitest.it)('SW-03 왼쪽이 true 인 구성: controlled 오른쪽 click → onChange(false), 왼쪽 click → onChange(true)', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      ...ON_OFF,
+      value: true,
+      onChange
+    });
+    click(rightOf(view));
+    (0, _vitest.expect)(onChange).toHaveBeenLastCalledWith(false);
+    render({
+      ...ON_OFF,
+      value: false,
+      onChange
+    });
+    click(leftOf(view));
+    (0, _vitest.expect)(onChange).toHaveBeenLastCalledWith(true);
+  });
+  (0, _vitest.it)('SW-03 uncontrolled boolean 은 옵션 값을 그대로 넘긴다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      ...OFF_ON,
+      onChange
+    });
+    click(rightOf(view));
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith(true);
+    (0, _vitest.expect)(checkedOf(view)).toEqual([false, true]);
+  });
+  (0, _vitest.it)('SW-03 왼쪽이 false 인 구성에서 value true 를 주면 false 옵션(왼쪽)이 선택 표시된다', () => {
+    // 현재 동작 고정 — 결함 후보: #596 (value 를 옵션 값이 아니라 "왼쪽 여부"로 해석해 화면이 뒤집힘)
+    const view = render({
+      ...OFF_ON,
+      value: true,
+      onChange: _vitest.vi.fn()
+    });
+    (0, _vitest.expect)(checkedOf(view)).toEqual([true, false]);
+    (0, _vitest.expect)(leftOf(view).value).toBe('false');
+  });
+  (0, _vitest.it)('SW-03 왼쪽이 false 인 구성에서 true 옵션(오른쪽) click 이 onChange(false) 를 넘긴다', () => {
+    // 현재 동작 고정 — 결함 후보: #596 (controlled 는 옵션 값이 아니라 "왼쪽이 선택됐는가"를 넘김 — 입력값 오전달)
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      ...OFF_ON,
+      value: true,
+      onChange
+    });
+    click(rightOf(view));
+    (0, _vitest.expect)(rightOf(view).value).toBe('true');
+    (0, _vitest.expect)(onChange).toHaveBeenCalledWith(false);
+  });
+  _vitest.it.todo('SW-03 boolean value 는 옵션 값과 비교해 선택을 표시한다 — {left:false,right:true} 에서 value true 면 오른쪽 (기대)');
+  _vitest.it.todo('SW-03 controlled 여부와 무관하게 onChange 는 선택된 옵션의 value 를 넘긴다 (기대, #596)');
+});
+(0, _vitest.describe)('Switch — disabled (SW-04)', () => {
+  (0, _vitest.it)('SW-04 두 radio 가 disabled 이고 ncua-switch--disabled 가 붙으며 click 해도 onChange·선택 변화가 없다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      disabled: true,
+      onChange
+    });
+    click(rightOf(view));
+    (0, _vitest.expect)([leftOf(view).disabled, rightOf(view).disabled]).toEqual([true, true]);
+    (0, _vitest.expect)(switchOf(view).classList.contains('ncua-switch--disabled')).toBe(true);
+    (0, _vitest.expect)(onChange).not.toHaveBeenCalled();
+    (0, _vitest.expect)(checkedOf(view)).toEqual([true, false]);
+  });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+(0, _vitest.describe)('Switch — ref (SW-05)', () => {
+  (0, _vitest.it)('SW-05 forwarded ref 는 왼쪽 input 을 가리킨다', () => {
+    const ref = /*#__PURE__*/(0, _react.createRef)();
+    const view = render({
+      ref
+    });
+    (0, _vitest.expect)(ref.current).toBe(leftOf(view));
+  });
+  (0, _vitest.it)('SW-05 refs 를 주면 refs[0]·refs[1] 이 각 input 을 받는다', () => {
+    const leftRef = /*#__PURE__*/(0, _react.createRef)();
+    const rightRef = /*#__PURE__*/(0, _react.createRef)();
+    const view = render({
+      refs: [leftRef, rightRef]
+    });
+    (0, _vitest.expect)([leftRef.current, rightRef.current]).toEqual([leftOf(view), rightOf(view)]);
+  });
+  (0, _vitest.it)('SW-05 refs 와 forwarded ref 를 함께 주면 forwarded ref 는 null 이다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (refs[0] 가 leftInputRef 자리를 차지해 useImperativeHandle 이 null 을 노출)
+    const ref = /*#__PURE__*/(0, _react.createRef)();
+    const leftRef = /*#__PURE__*/(0, _react.createRef)();
+    const view = render({
+      ref,
+      refs: [leftRef, /*#__PURE__*/(0, _react.createRef)()]
+    });
+    (0, _vitest.expect)(leftRef.current).toBe(leftOf(view));
+    (0, _vitest.expect)(ref.current).toBeNull();
+  });
+  _vitest.it.todo('SW-05 refs 를 함께 줘도 forwarded ref 는 왼쪽 input 을 가리킨다 (기대, #597)');
+});
+(0, _vitest.describe)('Switch — 속성·라벨 (SW-06)', () => {
+  (0, _vitest.it)('SW-06 두 radio 가 같은 name 을 갖고 value 는 문자열 그대로', () => {
+    const view = render();
+    (0, _vitest.expect)([leftOf(view).name, rightOf(view).name, leftOf(view).value, rightOf(view).value]).toEqual(['period', 'period', 'day', 'week']);
+  });
+  (0, _vitest.it)("SW-06 boolean 옵션 값은 'true'/'false' 문자열로 정규화된다", () => {
+    const view = render({
+      ...ON_OFF
+    });
+    (0, _vitest.expect)([leftOf(view).value, rightOf(view).value]).toEqual(['true', 'false']);
+  });
+  (0, _vitest.it)('SW-06 label 은 ReactNode 그대로 렌더한다', () => {
+    const view = render({
+      left: {
+        label: /*#__PURE__*/(0, _react.createElement)('strong', {
+          className: 'custom-label'
+        }, '굵게'),
+        value: 'bold'
+      },
+      right: {
+        label: '보통',
+        value: 'normal'
+      }
+    });
+    (0, _vitest.expect)(requireElement(optionOf(view, 'left'), '.custom-label').textContent).toBe('굵게');
+    (0, _vitest.expect)(requireElement(optionOf(view, 'right'), '.ncua-switch__label').textContent).toBe('보통');
+  });
+});
+(0, _vitest.describe)('Switch — size·className (SW-07)', () => {
+  _vitest.it.each(['xxs', 'xs', 'sm', 'md'])('SW-07 size %s → ncua-switch--%s', size => {
+    const view = render({
+      size
+    });
+    (0, _vitest.expect)(switchOf(view).classList.contains(`ncua-switch--${size}`)).toBe(true);
+  });
+  (0, _vitest.it)('SW-07 목록 밖 size(타입 우회)는 xs 로 fallback 한다', () => {
+    const view = render({
+      size: 'lg'
+    });
+    (0, _vitest.expect)([switchOf(view).classList.contains('ncua-switch--xs'), switchOf(view).classList.contains('ncua-switch--lg')]).toEqual([true, false]);
+  });
+  (0, _vitest.it)('SW-07 size 를 생략하면 xs, className 은 루트에 붙는다', () => {
+    const view = render({
+      className: 'my-switch'
+    });
+    (0, _vitest.expect)([switchOf(view).classList.contains('ncua-switch--xs'), switchOf(view).classList.contains('my-switch')]).toEqual([true, true]);
+  });
+});
+(0, _vitest.describe)('Switch — onChange 없음 (SW-08)', () => {
+  (0, _vitest.it)('SW-08 onChange 없이 click 해도 예외 없이 uncontrolled 선택이 옮겨간다', () => {
+    const view = render();
+    click(rightOf(view));
+    (0, _vitest.expect)(checkedOf(view)).toEqual([false, true]);
+  });
+});

package/dist/cjs/src/components/forms-and-input/textarea/__tests__/Textarea.test.js

@@ -0,0 +1,255 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _Textarea = require("../Textarea");
+// @vitest-environment jsdom
+//
+// Textarea (React) 위험 경로 — 위험 목록표 TA-xx.
+// 입력은 React 가 감지하도록 네이티브 value setter 로 값을 넣은 뒤 bubbling input 을 보낸다.
+// 글자 수(characterCount)는 textarea 에 직접 붙인 네이티브 input 리스너가 갱신한다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const MAX_LENGTH = 100;
+const INITIAL_TEXT = '안녕';
+const TYPED_TEXT = '안녕하세요';
+let root = null;
+let container = null;
+const renderElement = element => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(element);
+  });
+  return container;
+};
+/** 같은 root 에 다시 render 하면 props 변경(재렌더)이 된다 */
+const render = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return renderElement(/*#__PURE__*/(0, _react.createElement)(_Textarea.Textarea, props));
+};
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  container?.remove();
+  root = null;
+  container = null;
+  _vitest.vi.restoreAllMocks();
+});
+const requireElement = (scope, selector) => {
+  const element = scope.querySelector(selector);
+  if (!element) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return element;
+};
+const textareaOf = view => requireElement(view, 'textarea');
+const countTextOf = view => requireElement(view, '.ncua-input__text-count-text').textContent ?? '';
+const nativeValueSetter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set;
+const typeInto = (textarea, value) => {
+  (0, _testUtils.act)(() => {
+    nativeValueSetter?.call(textarea, value);
+    textarea.dispatchEvent(new Event('input', {
+      bubbles: true
+    }));
+  });
+};
+// ── P0 ─────────────────────────────────────────────────
+(0, _vitest.describe)('Textarea — 입력 전달 (TA-01)', () => {
+  (0, _vitest.it)('TA-01 입력하면 onChange 가 input 이벤트를 받고 textarea 값이 바뀐다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      onChange
+    });
+    typeInto(textareaOf(view), TYPED_TEXT);
+    (0, _vitest.expect)(onChange.mock.calls[0][0].target.value).toBe(TYPED_TEXT);
+    (0, _vitest.expect)(textareaOf(view).value).toBe(TYPED_TEXT);
+  });
+  (0, _vitest.it)('TA-01 name·defaultValue·placeholder·maxLength 등 나머지 props 가 textarea 에 전달된다', () => {
+    const view = render({
+      name: 'memo',
+      defaultValue: INITIAL_TEXT,
+      placeholder: '메모',
+      maxLength: MAX_LENGTH
+    });
+    const textarea = textareaOf(view);
+    (0, _vitest.expect)([textarea.name, textarea.value, textarea.placeholder, textarea.maxLength]).toEqual(['memo', INITIAL_TEXT, '메모', MAX_LENGTH]);
+  });
+});
+(0, _vitest.describe)('Textarea — 글자 수 (TA-02)', () => {
+  (0, _vitest.it)('TA-02 마운트 시 초기 값 길이를 `길이/maxLength` 로 표시한다', () => {
+    const view = render({
+      characterCount: true,
+      defaultValue: INITIAL_TEXT,
+      maxLength: MAX_LENGTH
+    });
+    (0, _vitest.expect)(countTextOf(view)).toBe(`${INITIAL_TEXT.length}/${MAX_LENGTH}`);
+  });
+  (0, _vitest.it)('TA-02 input 이벤트마다 글자 수를 갱신한다', () => {
+    const view = render({
+      characterCount: true,
+      maxLength: MAX_LENGTH
+    });
+    typeInto(textareaOf(view), TYPED_TEXT);
+    (0, _vitest.expect)(countTextOf(view)).toBe(`${TYPED_TEXT.length}/${MAX_LENGTH}`);
+    typeInto(textareaOf(view), '');
+    (0, _vitest.expect)(countTextOf(view)).toBe(`0/${MAX_LENGTH}`);
+  });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+(0, _vitest.describe)('Textarea — controlled 값 변경 (TA-03)', () => {
+  (0, _vitest.it)('TA-03 characterCount + controlled value 를 부모가 코드로 바꾸면 글자 수가 갱신되지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (글자 수를 네이티브 input 이벤트로만 세어 value prop 변경을 놓침 — 화면 미갱신)
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      characterCount: true,
+      maxLength: MAX_LENGTH,
+      value: INITIAL_TEXT,
+      onChange
+    });
+    render({
+      characterCount: true,
+      maxLength: MAX_LENGTH,
+      value: TYPED_TEXT,
+      onChange
+    });
+    (0, _vitest.expect)(textareaOf(view).value).toBe(TYPED_TEXT);
+    (0, _vitest.expect)(countTextOf(view)).toBe(`${INITIAL_TEXT.length}/${MAX_LENGTH}`);
+  });
+  _vitest.it.todo('TA-03 controlled value 가 바뀌면 입력 이벤트 없이도 글자 수가 새 값 길이로 갱신된다 (기대, #597)');
+});
+(0, _vitest.describe)('Textarea — ref (TA-04)', () => {
+  (0, _vitest.it)('TA-04 객체 ref 에 textarea 노드를 넣는다', () => {
+    const ref = /*#__PURE__*/(0, _react.createRef)();
+    const view = render({
+      ref
+    });
+    (0, _vitest.expect)(ref.current).toBe(textareaOf(view));
+  });
+  (0, _vitest.it)('TA-04 함수 ref 를 textarea 노드로 호출한다', () => {
+    const ref = _vitest.vi.fn();
+    const view = render({
+      ref
+    });
+    (0, _vitest.expect)(ref).toHaveBeenCalledWith(textareaOf(view));
+  });
+});
+(0, _vitest.describe)('Textarea — disabled·destructive (TA-05)', () => {
+  const rootOf = view => requireElement(view, '.ncua-input--textarea');
+  (0, _vitest.it)('TA-05 disabled 면 textarea 가 disabled 이고 루트에 is-disabled 가 붙는다', () => {
+    const view = render({
+      disabled: true
+    });
+    (0, _vitest.expect)([textareaOf(view).disabled, rootOf(view).classList.contains('is-disabled')]).toEqual([true, true]);
+  });
+  (0, _vitest.it)('TA-05 destructive 면 루트와 HintText 에 destructive 가 붙는다', () => {
+    const view = render({
+      destructive: true,
+      hintText: '확인해 주세요'
+    });
+    (0, _vitest.expect)([rootOf(view).classList.contains('destructive'), requireElement(view, '.ncua-hint-text').classList.contains('destructive')]).toEqual([true, true]);
+  });
+});
+(0, _vitest.describe)('Textarea — label (TA-06)', () => {
+  (0, _vitest.it)('TA-06 label·required·id 를 주면 Label 이 htmlFor=id 로 textarea 와 연결되고 필수 표시가 붙는다', () => {
+    const view = render({
+      label: '메모',
+      required: true,
+      id: 'memo-field'
+    });
+    const label = requireElement(view, 'label');
+    (0, _vitest.expect)([label.textContent, label.htmlFor, label.classList.contains('is-required')]).toEqual(['메모', 'memo-field', true]);
+    (0, _vitest.expect)(textareaOf(view).labels?.[0]).toBe(label);
+  });
+  (0, _vitest.it)('TA-06 id 없이 label 만 주면 Label 이 textarea 와 연결되지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (htmlFor 가 props.id 에만 의존, id 생략 시 label 미연결 — 접근성)
+    const view = render({
+      label: '메모'
+    });
+    (0, _vitest.expect)(requireElement(view, 'label').htmlFor).toBe('');
+    (0, _vitest.expect)(textareaOf(view).labels).toHaveLength(0);
+  });
+  _vitest.it.todo('TA-06 id 를 생략해도 내부 생성 id(useId)로 label 과 textarea 를 연결한다 (기대, #597)');
+  (0, _vitest.it)('TA-06 label 이 없으면 Label 을 렌더하지 않는다', () => {
+    const view = render();
+    (0, _vitest.expect)(view.querySelector('label')).toBeNull();
+  });
+});
+(0, _vitest.describe)('Textarea — hint 영역 (TA-07)', () => {
+  _vitest.it.each([['둘 다 없음', {}, [false, false, false]], ['hintText 만', {
+    hintText: '도움말'
+  }, [true, true, false]], ['characterCount 만', {
+    characterCount: true
+  }, [true, false, true]], ['둘 다', {
+    hintText: '도움말',
+    characterCount: true
+  }, [true, true, true]]])('TA-07 %s → [hint 영역, HintText, 글자 수]', (_label, props, expected) => {
+    const view = render(props);
+    (0, _vitest.expect)([view.querySelector('.ncua-input__text-count-wrap') !== null, view.querySelector('.ncua-hint-text') !== null, view.querySelector('.ncua-input__text-count') !== null]).toEqual(expected);
+  });
+});
+(0, _vitest.describe)('Textarea — maxLength 없음 (TA-08)', () => {
+  (0, _vitest.it)('TA-08 characterCount 인데 maxLength 가 없으면 분모를 0 으로 표시한다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (maxLength 생략 시 "/0" 표시 — 제한 없음이면 분모를 숨겨야 함)
+    const view = render({
+      characterCount: true,
+      defaultValue: INITIAL_TEXT
+    });
+    (0, _vitest.expect)(countTextOf(view)).toBe(`${INITIAL_TEXT.length}/0`);
+  });
+  _vitest.it.todo('TA-08 maxLength 가 없으면 글자 수만 표시하고 "/0" 을 붙이지 않는다 (기대, #597)');
+});
+(0, _vitest.describe)('Textarea — characterCount 전환 (TA-09)', () => {
+  (0, _vitest.it)('TA-09 false → true 로 바뀌면 그 시점 값 길이로 시작하고 이후 입력을 센다', () => {
+    const view = render({
+      maxLength: MAX_LENGTH
+    });
+    typeInto(textareaOf(view), INITIAL_TEXT);
+    render({
+      maxLength: MAX_LENGTH,
+      characterCount: true
+    });
+    (0, _vitest.expect)(countTextOf(view)).toBe(`${INITIAL_TEXT.length}/${MAX_LENGTH}`);
+    typeInto(textareaOf(view), TYPED_TEXT);
+    (0, _vitest.expect)(countTextOf(view)).toBe(`${TYPED_TEXT.length}/${MAX_LENGTH}`);
+  });
+  (0, _vitest.it)('TA-09 true → false 로 바뀌면 글자 수를 숨기고, 다시 true 로 바꾸면 숨긴 동안의 입력까지 센다', () => {
+    const view = render({
+      maxLength: MAX_LENGTH,
+      characterCount: true
+    });
+    render({
+      maxLength: MAX_LENGTH,
+      characterCount: false
+    });
+    (0, _vitest.expect)(view.querySelector('.ncua-input__text-count')).toBeNull();
+    typeInto(textareaOf(view), INITIAL_TEXT);
+    render({
+      maxLength: MAX_LENGTH,
+      characterCount: true
+    });
+    (0, _vitest.expect)(countTextOf(view)).toBe(`${INITIAL_TEXT.length}/${MAX_LENGTH}`);
+    typeInto(textareaOf(view), TYPED_TEXT);
+    (0, _vitest.expect)(countTextOf(view)).toBe(`${TYPED_TEXT.length}/${MAX_LENGTH}`);
+  });
+});
+(0, _vitest.describe)('Textarea — size·className (TA-10)', () => {
+  const rootOf = view => requireElement(view, '.ncua-input--textarea');
+  (0, _vitest.it)('TA-10 size 기본값은 xs', () => {
+    const view = render();
+    (0, _vitest.expect)(rootOf(view).classList.contains('ncua-input--textarea--xs')).toBe(true);
+  });
+  (0, _vitest.it)('TA-10 size sm·className 을 루트 클래스로 반영하고 textarea 에는 붙이지 않는다', () => {
+    const view = render({
+      size: 'sm',
+      className: 'my-textarea'
+    });
+    (0, _vitest.expect)([rootOf(view).classList.contains('ncua-input--textarea--sm'), rootOf(view).classList.contains('my-textarea'), textareaOf(view).classList.contains('my-textarea')]).toEqual([true, true, false]);
+  });
+});