[FEAT] 입력 검증 디바운스 + 붉은 테두리·카운터 현출

public/locales/en/translation.json

@@ -248,6 +248,10 @@
   "토론 주제를 입력해주세요": "Please enter a debate topic",
   "팀명": "Team name",
   "팀명은 최대 15자까지 입력할 수 있습니다.": "Team name can be up to 15 characters.",
+  "팀명에 사용할 수 없는 문자가 포함되어 있습니다.": "Team name contains characters that are not allowed.",
+  "시간표 이름은 최대 {{val0}}자까지 입력할 수 있습니다.": "Table name can be up to {{val0}} characters.",
+  "시간표 이름에 사용할 수 없는 문자가 포함되어 있습니다.": "Table name contains characters that are not allowed.",
+  "토론 주제는 최대 {{val0}}자까지 입력할 수 있습니다.": "Debate topic can be up to {{val0}} characters.",
   "다음": "Next",
   "볼륨 조절": "Volume control",
   "투표 종료에 실패했습니다.": "Failed to end the vote.",

public/locales/ko/translation.json

@@ -248,6 +248,10 @@
   "토론 주제를 입력해주세요": "토론 주제를 입력해주세요",
   "팀명": "팀명",
   "팀명은 최대 15자까지 입력할 수 있습니다.": "팀명은 최대 15자까지 입력할 수 있습니다.",
+  "팀명에 사용할 수 없는 문자가 포함되어 있습니다.": "팀명에 사용할 수 없는 문자가 포함되어 있습니다.",
+  "시간표 이름은 최대 {{val0}}자까지 입력할 수 있습니다.": "시간표 이름은 최대 {{val0}}자까지 입력할 수 있습니다.",
+  "시간표 이름에 사용할 수 없는 문자가 포함되어 있습니다.": "시간표 이름에 사용할 수 없는 문자가 포함되어 있습니다.",
+  "토론 주제는 최대 {{val0}}자까지 입력할 수 있습니다.": "토론 주제는 최대 {{val0}}자까지 입력할 수 있습니다.",
   "다음": "다음",
   "볼륨 조절": "볼륨 조절",
   "투표 종료에 실패했습니다.": "투표 종료에 실패했습니다.",

src/components/ClearableInput/ClearableInput.tsx

@@ -1,27 +1,52 @@
 import clsx from 'clsx';
 import { InputHTMLAttributes } from 'react';
 import { IoMdCloseCircle } from 'react-icons/io';
+import { useTranslation } from 'react-i18next';
 
 interface ClearableInputProps extends InputHTMLAttributes<HTMLInputElement> {
   value: string;
   disabled?: boolean;
   onClear?: () => void;
+  /** 검증 실패 시 붉은 테두리로 표시 */
+  isError?: boolean;
+  /** 설정 시 입력창 경계 바로 아래에 `현재/최대` 글자 수 카운터를 노출한다. */
+  maxCount?: number;
+  /** 설정 시 입력창 경계 바로 아래(왼쪽)에 붉은 에러 메시지를 노출한다. */
+  errorMessage?: string;
 }
 
 export default function ClearableInput({
   value,
   onClear,
   disabled = false,
+  isError = false,
+  maxCount,
+  errorMessage,
   className,
+  id,
   ...rest
 }: ClearableInputProps) {
+  const { t } = useTranslation();
+  const hasCounter = typeof maxCount === 'number';
+  const isOverLimit = hasCounter && value.length > maxCount;
+  const errorId = errorMessage && id ? `${id}-error` : undefined;
+
   return (
     <div className={clsx('relative w-full', className)}>
       <input
         {...rest}
+        id={id}
         value={value}
         disabled={disabled}
-        className="text-body h-[48px] w-full appearance-none rounded-[4px] border border-default-border p-[12px] text-default-black placeholder-default-border focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        aria-invalid={isError || undefined}
+        aria-describedby={errorId}
+        className={clsx(
+          'text-body h-[48px] w-full appearance-none rounded-[4px] p-[12px] text-default-black placeholder-default-border focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+          // box-border 기준이라 테두리를 굵혀도 외곽 크기(48px)는 유지 → 레이아웃 밀림 없음
+          isError
+            ? 'border-2 border-semantic-error'
+            : 'border border-default-border',
+        )}
       />
       {value && !disabled && onClear && (
         <button
@@ -32,6 +57,34 @@ export default function ClearableInput({
           <IoMdCloseCircle />
         </button>
       )}
+      {hasCounter && (
+        // 박스 경계 바로 아래에 절대배치 → 레이아웃을 밀지 않아 행 간격이 균일하게 유지된다.
+        <span
+          aria-live="polite"
+          className={clsx(
+            'pointer-events-none absolute right-1 top-full mt-[2px] text-[11px] leading-none',
+            isOverLimit
+              ? 'font-semibold text-semantic-error'
+              : 'text-default-neutral',
+          )}
+        >
+          {t('{{current}}/{{max}}', {
+            current: value.length,
+            max: maxCount,
+          })}
+        </span>
+      )}
+      {errorMessage && (
+        // 카운터(우하단)와 겹치지 않도록 우측 여백을 두고 좌하단에 절대배치한다.
+        <span
+          id={errorId}
+          role="alert"
+          aria-live="polite"
+          className="absolute left-1 top-full mt-[2px] pr-14 text-[12px] font-semibold leading-none text-semantic-error"
+        >
+          {errorMessage}
+        </span>
+      )}
     </div>
   );
 }

src/hooks/useDebounce.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * 값의 변경이 delay(ms) 동안 멈추면(= 입력이 끝났다고 판단되면) 갱신되는 디바운스 값을 반환한다.
+ * 입력 중에는 이전 값을 유지하므로, 타이핑 도중이 아니라 입력이 마쳤을 때 검증을 트리거하는 데 사용한다.
+ */
+const useDebounce = <T>(value: T, delay = 400): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;

src/page/TableComposition/components/TableNameAndType/TableNameAndType.test.tsx

@@ -0,0 +1,122 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { GlobalPortal } from '../../../../util/GlobalPortal';
+import { DebateInfo } from '../../../../type/type';
+import TableNameAndType from './TableNameAndType';
+
+// ------------------
+// 헬퍼: 유효한 기본 info 를 만들고 필요한 필드만 덮어쓴다.
+// ------------------
+function makeInfo(overrides: Partial<DebateInfo> = {}): DebateInfo {
+  return {
+    name: '토론 시간표',
+    agenda: '토론 주제',
+    prosTeamName: '우리팀',
+    consTeamName: '상대팀',
+    ...overrides,
+  };
+}
+
+function renderComponent(info: DebateInfo, onButtonClick = vi.fn()) {
+  const queryClient = new QueryClient();
+  render(
+    <QueryClientProvider client={queryClient}>
+      <GlobalPortal.Provider>
+        <MemoryRouter>
+          <TableNameAndType
+            info={info}
+            isLoading={false}
+            onInfoChange={vi.fn()}
+            onButtonClick={onButtonClick}
+          />
+        </MemoryRouter>
+      </GlobalPortal.Provider>
+    </QueryClientProvider>,
+  );
+}
+
+async function clickNext() {
+  await userEvent.click(screen.getByRole('button', { name: '다음' }));
+}
+
+describe('TableNameAndType - 제출 검증 인라인 에러', () => {
+  // useDebounce 는 초기 useState(value) 라 마운트 시 디바운스값=초기값 →
+  // 무효값으로 렌더하면 인라인 사유 메시지가 즉시 노출된다.
+  it('시간표 이름 길이 초과 시 사유 메시지를 인라인으로 노출하고 진행을 막는다', async () => {
+    const onButtonClick = vi.fn();
+    renderComponent(makeInfo({ name: 'a'.repeat(21) }), onButtonClick);
+
+    expect(
+      await screen.findByText(
+        '시간표 이름은 최대 20자까지 입력할 수 있습니다.',
+      ),
+    ).toBeInTheDocument();
+
+    await clickNext();
+
+    expect(onButtonClick).not.toHaveBeenCalled();
+  });
+
+  it('토론 주제 길이 초과 시 사유 메시지를 인라인으로 노출한다', async () => {
+    renderComponent(makeInfo({ agenda: 'a'.repeat(256) }));
+
+    expect(
+      await screen.findByText('토론 주제는 최대 255자까지 입력할 수 있습니다.'),
+    ).toBeInTheDocument();
+  });
+
+  it('팀명 길이 초과 시 사유 메시지를 인라인으로 노출한다', async () => {
+    renderComponent(makeInfo({ prosTeamName: 'a'.repeat(16) }));
+
+    expect(
+      await screen.findByText('팀명은 최대 15자까지 입력할 수 있습니다.'),
+    ).toBeInTheDocument();
+  });
+
+  it('팀명에 사용할 수 없는 문자가 있으면 형식 오류 메시지를 인라인으로 노출한다', async () => {
+    // 제어문자(U+0001)는 NAME_REGEX 를 통과하지 못한다(FORM 오류).
+    renderComponent(
+      makeInfo({ consTeamName: `team${String.fromCharCode(1)}` }),
+    );
+
+    expect(
+      await screen.findByText(
+        '팀명에 사용할 수 없는 문자가 포함되어 있습니다.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('여러 필드가 잘못되면 각 입력창 아래 사유 메시지를 동시에 노출한다', async () => {
+    const onButtonClick = vi.fn();
+    renderComponent(
+      makeInfo({ name: 'a'.repeat(21), prosTeamName: 'b'.repeat(16) }),
+      onButtonClick,
+    );
+
+    expect(
+      await screen.findByText(
+        '시간표 이름은 최대 20자까지 입력할 수 있습니다.',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('팀명은 최대 15자까지 입력할 수 있습니다.'),
+    ).toBeInTheDocument();
+
+    await clickNext();
+
+    expect(onButtonClick).not.toHaveBeenCalled();
+  });
+
+  it('모든 필드가 유효하면 에러 메시지 없이 onButtonClick 을 호출한다', async () => {
+    const onButtonClick = vi.fn();
+    renderComponent(makeInfo(), onButtonClick);
+
+    await clickNext();
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    expect(onButtonClick).toHaveBeenCalledOnce();
+  });
+});