feat(web): apply KxDataTable to holiday/program/ruleset admin (screens 5-7)

Replace hand-rolled zebra tables with KxDataTable (sort/filter/CSV,
per-column control) on HolidayAdminPage, ProgramAdminPage and
RulesetVersionsPage. Manage columns excluded from CSV/sort/search;
empty states delegated to the table.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/frontend/src/screens/admin/HolidayAdminPage.tsx

@@ -7,11 +7,12 @@
 import { useMemo, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { ErrorState, Skeleton } from '../../components/ui/States';
 import { Button } from '../../components/ui/Button';
+import { KxDataTable, type KxColumn } from '../../components/KxDataTable';
 import { IconPlus } from '../../components/ui/icons';
 import { errMessage, useToast } from '../work/workShared';
-import { holidayApi, type HolidayCreateBody } from './holidayApi';
+import { holidayApi, type Holiday, type HolidayCreateBody } from './holidayApi';
 import './admin-modules.css';
 
 /** 데이터 미존재 시 폴백 연도 목록(V41 시드 범위). */
@@ -72,6 +73,37 @@ export function HolidayAdminPage() {
 
   const count = useMemo(() => list.filter((h) => h.isHoliday).length, [list]);
 
+  const columns = useMemo<KxColumn<Holiday>[]>(
+    () => [
+      { key: 'ymd', header: t('holiday.date'), value: (h) => h.ymd,
+        render: (h) => <span className="kx-adm-mono" style={weekdayIndex(h.ymd) === 0 ? { color: 'var(--color-error)' } : undefined}>{h.ymd}</span> },
+      { key: 'weekday', header: t('holiday.weekday'), sortable: false, value: (h) => t(`common.weekday.${weekdayIndex(h.ymd)}`),
+        render: (h) => <span style={weekdayIndex(h.ymd) === 0 ? { color: 'var(--color-error)' } : undefined}>{t(`common.weekday.${weekdayIndex(h.ymd)}`)}</span> },
+      { key: 'name', header: t('holiday.name'), value: (h) => h.name,
+        render: (h) => <span className="kx-adm-tbl__strong" style={{ color: 'var(--color-error)' }}>{h.name}</span> },
+      { key: 'type', header: t('holiday.type'), value: (h) => (h.isSubstitute ? t('holiday.substitute') : t('holiday.legal')),
+        render: (h) => h.isSubstitute
+          ? <span className="kx-adm-pill kx-adm-pill--neutral">{t('holiday.substitute')}</span>
+          : <span className="kx-adm-muted">{t('holiday.legal')}</span> },
+      { key: 'status', header: t('holiday.status'), value: (h) => (h.isHoliday ? t('holiday.on') : t('holiday.off')),
+        render: (h) => <span className={`kx-adm-pill kx-adm-pill--${h.isHoliday ? 'success' : 'neutral'}`}>{h.isHoliday ? t('holiday.on') : t('holiday.off')}</span> },
+      { key: 'manage', header: t('holiday.manage'), csv: false, sortable: false, searchable: false,
+        thClassName: 'kx-adm-col-manage', tdClassName: 'kx-adm-col-manage',
+        render: (h) => (
+          <div className="kx-adm-tbl__actions">
+            <Button variant="ghost" disabled={toggleM.isPending} onClick={() => toggleM.mutate({ ymd: h.ymd, isHoliday: !h.isHoliday })}>
+              {h.isHoliday ? t('holiday.setOff') : t('holiday.setOn')}
+            </Button>
+            <Button variant="ghost" className="kx-adm-del" disabled={delM.isPending}
+              onClick={() => { if (window.confirm(t('holiday.deleteConfirm', { name: h.name }))) delM.mutate(h.ymd); }}>
+              {t('holiday.delete')}
+            </Button>
+          </div>
+        ) },
+    ],
+    [t, toggleM, delM],
+  );
+
   return (
     <div className="kx-page kx-adm">
       <header className="kx-adm__head">
@@ -106,83 +138,23 @@ export function HolidayAdminPage() {
       )}
 
       {!listQ.isLoading && !listQ.isError && (
-        list.length === 0 ? (
+        <section className="kx-card">
-          <EmptyState title={t('holiday.emptyTitle')} description={t('holiday.emptyDesc')} />
+          <div className="kx-adm-codes__head">
-        ) : (
+            <h2>{t('holiday.listOf', { y: year })}</h2>
-          <section className="kx-card">
+            <p className="kx-adm-muted">{t('holiday.count', { n: count })}</p>
-            <div className="kx-adm-codes__head">
+          </div>
-              <h2>{t('holiday.listOf', { y: year })}</h2>
+          <div className="kx-adm-codes__tbl">
-              <p className="kx-adm-muted">{t('holiday.count', { n: count })}</p>
+            <KxDataTable
-            </div>
+              columns={columns}
-            <div className="kx-table-scroll">
+              rows={list}
-              <table className="kx-table kx-table--zebra kx-adm-tbl">
+              rowKey={(h) => h.ymd}
-                <thead>
+              csvFileName={`holidays_${year}`}
-                  <tr>
+              ariaLabel={t('holiday.listOf', { y: year })}
-                    <th>{t('holiday.date')}</th>
+              emptyTitle={t('holiday.emptyTitle')}
-                    <th>{t('holiday.weekday')}</th>
+              emptyDescription={t('holiday.emptyDesc')}
-                    <th>{t('holiday.name')}</th>
+            />
-                    <th>{t('holiday.type')}</th>
+          </div>
-                    <th>{t('holiday.status')}</th>
+        </section>
-                    <th style={{ textAlign: 'right' }}>{t('holiday.manage')}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {list.map((h) => {
-                    const dow = weekdayIndex(h.ymd);
-                    const isSun = dow === 0;
-                    return (
-                      <tr key={h.ymd}>
-                        <td className="kx-adm-mono" style={isSun ? { color: 'var(--color-error)' } : undefined}>
-                          {h.ymd}
-                        </td>
-                        <td style={isSun ? { color: 'var(--color-error)' } : undefined}>
-                          {t(`common.weekday.${dow}`)}
-                        </td>
-                        <td className="kx-adm-tbl__strong" style={{ color: 'var(--color-error)' }}>
-                          {h.name}
-                        </td>
-                        <td>
-                          {h.isSubstitute ? (
-                            <span className="kx-adm-pill kx-adm-pill--neutral">{t('holiday.substitute')}</span>
-                          ) : (
-                            <span className="kx-adm-muted">{t('holiday.legal')}</span>
-                          )}
-                        </td>
-                        <td>
-                          <span className={`kx-adm-pill kx-adm-pill--${h.isHoliday ? 'success' : 'neutral'}`}>
-                            {h.isHoliday ? t('holiday.on') : t('holiday.off')}
-                          </span>
-                        </td>
-                        <td>
-                          <div className="kx-adm-tbl__actions">
-                            <Button
-                              variant="ghost"
-                              disabled={toggleM.isPending}
-                              onClick={() => toggleM.mutate({ ymd: h.ymd, isHoliday: !h.isHoliday })}
-                            >
-                              {h.isHoliday ? t('holiday.setOff') : t('holiday.setOn')}
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              className="kx-adm-del"
-                              disabled={delM.isPending}
-                              onClick={() => {
-                                if (window.confirm(t('holiday.deleteConfirm', { name: h.name })))
-                                  delM.mutate(h.ymd);
-                              }}
-                            >
-                              {t('holiday.delete')}
-                            </Button>
-                          </div>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-          </section>
-        )
       )}
 
       {adding && (

src/frontend/src/screens/admin/ProgramAdminPage.tsx

@@ -2,11 +2,12 @@
  * W12 시스템관리 — 프로그램(화면) 등록부.
  * 정본: GET/POST /api/admin/programs · DELETE /{id} (ProgramController). 라우트/화면 마스터(메뉴와 연결).
  */
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { ErrorState, Skeleton } from '../../components/ui/States';
 import { Button } from '../../components/ui/Button';
+import { KxDataTable, type KxColumn } from '../../components/KxDataTable';
 import { IconPlus, IconSearch } from '../../components/ui/icons';
 import { errMessage, useToast } from '../work/workShared';
 import { programApi, PROGRAM_TYPES, type Program, type ProgramSaveBody } from './systemBasicsApi';
@@ -38,6 +39,31 @@ export function ProgramAdminPage() {
     onError: (e) => show(errMessage(e)),
   });
 
+  const columns = useMemo<KxColumn<Program>[]>(
+    () => [
+      { key: 'name', header: t('program.colName'), value: (r) => r.programName },
+      { key: 'type', header: t('program.colType'), value: (r) => r.programType,
+        render: (r) => <span className="kx-adm-pill kx-adm-pill--neutral">{r.programType}</span> },
+      { key: 'url', header: t('program.colUrl'), value: (r) => r.programUrl ?? '',
+        render: (r) => <span className="kx-adm-mono">{r.programUrl ?? '-'}</span> },
+      { key: 'category', header: t('program.colCategory'), value: (r) => r.category ?? '', render: (r) => r.category ?? '-' },
+      { key: 'use', header: t('program.colUse'), value: (r) => (r.useYn === 'N' ? t('sysadmin.noUse') : t('sysadmin.use')),
+        render: (r) => (r.useYn === 'N' ? t('sysadmin.noUse') : t('sysadmin.use')) },
+      { key: 'manage', header: t('sysadmin.actions'), csv: false, sortable: false, searchable: false,
+        thClassName: 'kx-adm-col-manage', tdClassName: 'kx-adm-col-manage',
+        render: (r) => (
+          <div className="kx-adm-tbl__actions">
+            <Button variant="ghost" onClick={() => setEditing(r)}>{t('sysadmin.edit')}</Button>
+            <Button variant="ghost" className="kx-adm-del" disabled={delM.isPending}
+                    onClick={() => { if (window.confirm(t('program.deleteConfirm', { name: r.programName }))) delM.mutate(r.id); }}>
+              {t('sysadmin.delete')}
+            </Button>
+          </div>
+        ) },
+    ],
+    [t, delM],
+  );
+
   return (
     <div className="kx-page kx-adm">
       <header className="kx-adm__head">
@@ -66,42 +92,16 @@ export function ProgramAdminPage() {
 
       {!q.isLoading && !q.isError && (
         <section className="kx-card kx-adm-table-card">
-          {rows.length === 0 ? (
+          <KxDataTable
-            <EmptyState title={t('program.emptyTitle')} description={t('program.emptyDesc')} />
+            columns={columns}
-          ) : (
+            rows={rows}
-            <div className="kx-table-scroll">
+            rowKey={(r) => r.id}
-              <table className="kx-table kx-table--zebra">
+            searchable={false}
-                <thead>
+            csvFileName="programs"
-                  <tr>
+            ariaLabel={t('program.title')}
-                    <th>{t('program.colName')}</th>
+            emptyTitle={t('program.emptyTitle')}
-                    <th>{t('program.colType')}</th>
+            emptyDescription={t('program.emptyDesc')}
-                    <th>{t('program.colUrl')}</th>
+          />
-                    <th>{t('program.colCategory')}</th>
-                    <th>{t('program.colUse')}</th>
-                    <th aria-label={t('sysadmin.actions')} />
-                  </tr>
-                </thead>
-                <tbody>
-                  {rows.map((r) => (
-                    <tr key={r.id}>
-                      <td>{r.programName}</td>
-                      <td><span className="kx-adm-pill kx-adm-pill--neutral">{r.programType}</span></td>
-                      <td className="kx-adm-mono">{r.programUrl ?? '-'}</td>
-                      <td>{r.category ?? '-'}</td>
-                      <td>{r.useYn === 'N' ? t('sysadmin.noUse') : t('sysadmin.use')}</td>
-                      <td className="kx-adm-tbl__actions">
-                        <Button variant="ghost" onClick={() => setEditing(r)}>{t('sysadmin.edit')}</Button>
-                        <Button variant="ghost" className="kx-adm-del" disabled={delM.isPending}
-                                onClick={() => { if (window.confirm(t('program.deleteConfirm', { name: r.programName }))) delM.mutate(r.id); }}>
-                          {t('sysadmin.delete')}
-                        </Button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
         </section>
       )}
 

src/frontend/src/screens/admin/RulesetVersionsPage.tsx

@@ -3,11 +3,12 @@
  * 데이터 원천: 실 API(읽기 전용) — GET /api/admin/rulesets(요약 목록) · GET /api/admin/rulesets/{name}(규칙 전문).
  * 백엔드는 룰셋을 classpath 리소스(resources/rulesets/*.json)로 버전 관리하며 편집 엔드포인트는 없다(규정 개정=리소스 교체).
  */
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
 import { EmptyState, ErrorState, Skeleton } from '../../components/ui/States';
+import { KxDataTable, type KxColumn } from '../../components/KxDataTable';
 import { rulesetApi, type RulesetRule } from './adminModulesApi';
 import './admin-modules.css';
 
@@ -41,6 +42,29 @@ export function RulesetVersionsPage() {
 
   const rules: RulesetRule[] = detailQ.data?.rules ?? [];
 
+  const ruleColumns = useMemo<KxColumn<RulesetRule>[]>(
+    () => [
+      { key: 'name', header: t('ruleset.colRuleName'), value: (r) => `${r.label ?? r.code} ${r.code}`,
+        render: (r) => (
+          <>
+            <span className="kx-adm-rulename">{r.label ?? r.code}</span>
+            <span className="kx-adm-rulecode">{r.code}</span>
+          </>
+        ) },
+      { key: 'value', header: t('ruleset.colValue'), value: (r) => formatValue(t, r),
+        render: (r) => <span className="kx-adm-mono">{formatValue(t, r)}</span> },
+      { key: 'logic', header: t('ruleset.colLogic'), value: (r) => formatLogic(t, r),
+        render: (r) => <span className="kx-adm-muted">{formatLogic(t, r)}</span> },
+      { key: 'severity', header: t('ruleset.colSeverity'), value: (r) => (r.severity === 'block' ? t('ruleset.block') : t('ruleset.warn')),
+        render: (r) => (
+          <span className={`kx-adm-pill kx-adm-pill--${r.severity === 'block' ? 'error' : 'warn'}`}>
+            {r.severity === 'block' ? t('ruleset.block') : t('ruleset.warn')}
+          </span>
+        ) },
+    ],
+    [t],
+  );
+
   return (
     <div className="kx-page kx-adm">
       <header className="kx-adm__head">
@@ -121,36 +145,14 @@ export function RulesetVersionsPage() {
             )}
 
             {rules.length > 0 && (
-              <div className="kx-table-scroll">
+              <div className="kx-adm-rules-dt">
-                <table className="kx-table kx-table--zebra kx-adm-rules">
+                <KxDataTable
-                  <thead>
+                  columns={ruleColumns}
-                    <tr>
+                  rows={rules}
-                      <th>{t('ruleset.colRuleName')}</th>
+                  rowKey={(r) => r.code}
-                      <th>{t('ruleset.colValue')}</th>
+                  csvFileName={`ruleset_${activeName ?? 'rules'}`}
-                      <th>{t('ruleset.colLogic')}</th>
+                  ariaLabel={t('ruleset.ruleList')}
-                      <th>{t('ruleset.colSeverity')}</th>
+                />
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {rules.map((r) => (
-                      <tr key={r.code}>
-                        <td>
-                          <span className="kx-adm-rulename">{r.label ?? r.code}</span>
-                          <span className="kx-adm-rulecode">{r.code}</span>
-                        </td>
-                        <td className="kx-adm-mono">{formatValue(t, r)}</td>
-                        <td className="kx-adm-muted">{formatLogic(t, r)}</td>
-                        <td>
-                          <span
-                            className={`kx-adm-pill kx-adm-pill--${r.severity === 'block' ? 'error' : 'warn'}`}
-                          >
-                            {r.severity === 'block' ? t('ruleset.block') : t('ruleset.warn')}
-                          </span>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
               </div>
             )}