sonamu 0.7.21 → 0.7.23

package/src/template/implementations/view_list.template.ts

@@ -1,14 +1,11 @@
-import assert from "assert";
 import inflection from "inflection";
-import { flat, unique } from "radashi";
+import { flat } from "radashi";
 import { z } from "zod";
 import { EntityManager, type EntityNamesRecord } from "../../entity/entity-manager";
 import type { RenderingNode, TemplateKey, TemplateOptions } from "../../types/types";
-import { getColumnsNode } from "../entity-converter";
 import { getEnumInfoFromColName, getRelationPropFromColName } from "../helpers";
 import type { RenderedTemplate } from "../template";
 import { Template } from "../template";
-import { getZodTypeById, zodTypeToRenderingNode } from "../zod-converter";
 
 export class Template__view_list extends Template {
   constructor() {
@@ -17,7 +14,7 @@ export class Template__view_list extends Template {
 
   getTargetAndPath(names: EntityNamesRecord) {
     return {
-      target: "web/src/pages/admin",
+      target: "web/src/routes/admin",
       path: `${names.fsPlural}/index.tsx`,
     };
   }
@@ -35,7 +32,17 @@ export class Template__view_list extends Template {
     parentObj: string = "row",
     withoutName: boolean = false,
   ): string {
-    const colName = withoutName ? `${parentObj}` : `${parentObj}.${col.name}`;
+    // 중첩 경로 처리 (예: "user.name" -> "row.user?.name")
+    let colName: string;
+    if (withoutName) {
+      colName = parentObj;
+    } else if (col.name.includes(".")) {
+      // 중첩 경로는 optional chaining으로 변환
+      const parts = col.name.split(".");
+      colName = `${parentObj}.${parts.join("?.")}`;
+    } else {
+      colName = `${parentObj}.${col.name}`;
+    }
 
     switch (col.renderType) {
       case "string-plain":
@@ -43,35 +50,50 @@ export class Template__view_list extends Template {
       case "number-id":
         return `<>{${colName}}</>`;
       case "number-fk_id": {
-        const relPropFk = getRelationPropFromColName(entityId, col.name.replace("_id", ""));
-        return `<>${relPropFk.with}#{${colName}}</>`;
+        try {
+          const baseName = col.name.includes(".")
+            ? (col.name.split(".").pop() ?? col.name).replace("_id", "")
+            : col.name.replace("_id", "");
+          const relPropFk = getRelationPropFromColName(entityId, baseName);
+          return `<>${relPropFk.with}#{${colName}}</>`;
+        } catch {
+          return `<>{${colName}}</>`;
+        }
       }
       case "string-image":
-        return `<>{${col.nullable ? `${colName} && ` : ""}<img src={${colName}} />}</>`;
+        return `<>{${
+          col.nullable ? `${colName} && ` : ""
+        }<img src={${colName}} alt="${col.label ?? col.name}" className="h-8 w-8 object-cover rounded" />}</>`;
       case "datetime":
-        if (col.nullable) {
-          return `<span className="text-tiny">{${colName} === null ? '-' : formatDateTime(${colName})}</span>`;
+        if (col.nullable || col.name.includes(".")) {
+          return `<span>{${colName} ? datetimeF(${colName}) : '-'}</span>`;
         } else {
-          return `<span className="text-tiny">{formatDateTime(${colName})}</span>`;
+          return `<span>{datetimeF(${colName})}</span>`;
         }
       case "string-datetime":
-        if (col.nullable) {
-          return `<span className="text-tiny">{${colName} === null ? '-' : dateF(${colName})}</span>`;
+        if (col.nullable || col.name.includes(".")) {
+          return `<span>{${colName} ? dateF(${colName}) : '-'}</span>`;
         } else {
-          return `<span className="text-tiny">{dateF(${colName})}</span>`;
+          return `<span>{dateF(${colName})}</span>`;
         }
       case "boolean":
-        return `<>{${colName} ? <Label color='green' circular>O</Label> : <Label color='grey' circular>X</Label> }</>`;
+        return `<>{${colName} ? <Badge variant="default">O</Badge> : <Badge variant="secondary">X</Badge>}</>`;
       case "enums": {
-        const { id: enumId } = getEnumInfoFromColName(entityId, col.name);
-        return `<>{${col.nullable ? `${colName} && ` : ""}${enumId}Label[${colName}]}</>`;
+        try {
+          const { id: enumId } = getEnumInfoFromColName(entityId, col.name);
+          return `<>{${col.nullable ? `${colName} && ` : ""}${enumId}Label[${colName}]}</>`;
+        } catch {
+          return `<>{${colName}}</>`;
+        }
       }
       case "array-images":
-        return `<>{ ${colName}.map(r => ${col.nullable ? `r && ` : ""}<img src={r} />) }</>`;
+        return `<div className="flex gap-1">{ ${colName}?.map((r, i) => ${
+          col.nullable ? `r && ` : ""
+        }<img key={i} src={r} alt={\`${col.label ?? col.name} \${i + 1}\`} className="h-8 w-8 object-cover rounded" />) }</div>`;
       case "number-plain":
-        return `<>{${col.nullable ? `${colName} && ` : ""}numF(${colName})}</>`;
+        return `<>{${col.nullable || col.name.includes(".") ? `${colName} && ` : ""}numF(${colName})}</>`;
       case "object":
-        return `<>{/* object ${colName} */}</>`;
+        return `<span className="text-xs">{${col.nullable ? `${colName} ? ` : ""}JSON.stringify(${colName})${col.nullable ? ` : '-'` : ""}}</span>`;
       case "object-pick": {
         const pickedChild = col.children?.find((child) => child.name === col.config?.picked);
         if (!pickedChild) {
@@ -105,17 +127,17 @@ export class Template__view_list extends Template {
     } else if (col.renderType === "object") {
       try {
         const relProp = getRelationPropFromColName(entityId, col.name);
-        const result = col.children?.map((child) => {
+        const result = (col.children ?? []).map((child) => {
           entityId = relProp.with;
           names = EntityManager.getNamesFromId(relProp.with);
           return this.renderColumnImport(entityId, child, names);
         });
-        return flat(result ?? []);
+        return flat(result);
       } catch {
         return [null];
       }
     } else if (col.renderType === "array") {
-      assert(col.element);
+      if (!col.element) return [null];
       return this.renderColumnImport(entityId, col.element, names);
     }
 
@@ -192,23 +214,32 @@ export class Template__view_list extends Template {
   getDefault(columns: RenderingNode[]): {
     orderBy: string;
     search: string;
+    hasSearch: boolean;
+    hasOrderBy: boolean;
   } {
     const def = {
-      orderBy: "id-desc",
-      search: "title",
+      orderBy: "",
+      search: "",
+      hasSearch: false,
+      hasOrderBy: false,
     };
     const orderByZodType = columns.find((col) => col.name === "orderBy")?.zodType;
     if (orderByZodType && orderByZodType instanceof z.ZodEnum) {
-      def.orderBy = orderByZodType.options[0].toString();
+      def.orderBy = Object.keys(orderByZodType.enum)[0];
+      def.hasOrderBy = true;
     }
     const searchZodType = columns.find((col) => col.name === "search")?.zodType;
     if (searchZodType && searchZodType instanceof z.ZodEnum) {
-      def.search = searchZodType.options[0].toString();
+      def.search = Object.keys(searchZodType.enum)[0];
+      def.hasSearch = true;
     }
     return def;
   }
 
   async render({ entityId }: TemplateOptions["view_list"]) {
+    const { getColumnsNode } = await import("../entity-converter");
+    const { getZodTypeById, zodTypeToRenderingNode } = await import("../zod-converter");
+
     const columnsNode = await getColumnsNode(entityId, "A");
     const listParamsZodType = await getZodTypeById(`${entityId}ListParams`);
     const listParamsNode = zodTypeToRenderingNode(listParamsZodType);
@@ -218,13 +249,20 @@ export class Template__view_list extends Template {
 
     // 실제 리스트 컬럼
     const columns = (columnsNode.children as RenderingNode[])
-      .filter((col) => col.name !== "id")
+
+      .sort((a, b) => (a.name === "id" ? -1 : b.name === "id" ? 1 : 0))
       .map((col) => {
         const propCandidate = entity.props.find((p) => p.name === col.name);
+        const rendered = this.renderColumn(entityId, col, names);
         return {
           name: col.name,
-          label: propCandidate?.desc ?? col.label,
-          tc: `(row) => ${this.renderColumn(entityId, col, names)}`,
+          label: col.name === "id" ? "ID" : (propCandidate?.desc ?? col.label),
+          tc: `(row) => ${rendered}`,
+          fit:
+            col.renderType === "number-id" ||
+            col.renderType === "datetime" ||
+            col.renderType === "string-datetime",
+          align: col.renderType === "number-id" ? "center" : undefined,
         };
       });
 
@@ -250,17 +288,23 @@ export class Template__view_list extends Template {
 
       if (col.renderType === "enums") {
         if (col.name === "search") {
-          key = "view_enums_dropdown";
+          key = "view_enums_select";
           enumId = `${names.capital}SearchField`;
           targetEntityId = names.capital;
         } else {
           key = "view_enums_select";
-          try {
-            const { targetEntityNames, id } = getEnumInfoFromColName(entityId, col.name);
-            targetEntityId = targetEntityNames.capital;
-            enumId = id;
-          } catch {
-            continue;
+          // config.enumId 우선 사용
+          if (col.config && "enumId" in col.config) {
+            enumId = (col.config as { enumId: string }).enumId;
+            targetEntityId = entityId;
+          } else {
+            try {
+              const { targetEntityNames, id } = getEnumInfoFromColName(entityId, col.name);
+              targetEntityId = targetEntityNames.capital;
+              enumId = id;
+            } catch {
+              continue;
+            }
           }
         }
       } else {
@@ -282,19 +326,19 @@ export class Template__view_list extends Template {
       });
     }
 
-    // 리스트 컬럼
-    assert(columnsNode.children);
-    const columnImports = unique(
-      columnsNode.children
-        .flatMap((col) => {
-          return this.renderColumnImport(entityId, col, names);
-        })
-        .filter((col) => col !== null),
-    ).join("\n");
+    // 컬럼에서 사용하는 enum들 수집
+    const columnEnums: string[] = [];
+    (columnsNode.children ?? []).forEach((col) => {
+      if (col.renderType === "enums") {
+        try {
+          const { id: enumId } = getEnumInfoFromColName(entityId, col.name);
+          columnEnums.push(enumId);
+        } catch {}
+      }
+    });
 
     // SearchInput
-    assert(preTemplates);
-    preTemplates.push({
+    preTemplates?.push({
       key: "view_search_input",
       options: {
         entityId,
@@ -302,224 +346,390 @@ export class Template__view_list extends Template {
     });
 
     // 디폴트 파라미터
-    const def = this.getDefault(filterColumns);
+    // const def = this.getDefault(filterColumns);
 
     return {
       ...this.getTargetAndPath(names),
       body: `
-import React from 'react';
-import { Link } from 'react-router-dom';
-import {
-  Breadcrumb,
-  Checkbox,
-  Pagination,
-  Segment,
-  Table,
-  TableRow,
-  Message,
-  Transition,
-  Button,
-  Label,
-} from 'semantic-ui-react';
-import classNames from 'classnames';
-import { DateTime } from "luxon";
-import { DelButton, EditButton, AppBreadcrumbs, AddButton, useSelection, useListParams, SonamuCol, numF, formatDate, formatDateTime } from '@sonamu-kit/react-sui';
-
+import { useState, Fragment } from "react";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+
+import { Card, CardContent, CardHeader } from "@sonamu-kit/react-components/components";
+import { Badge } from "@sonamu-kit/react-components/components";
+import { Button } from "@sonamu-kit/react-components/components";
+import { Pagination, Table, TableBody, TableCell, type TableCol, TableHead, TableHeader, TableRow } from "@sonamu-kit/react-components/components";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@sonamu-kit/react-components/components";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@sonamu-kit/react-components/components";
+import { Input } from "@sonamu-kit/react-components/components";
+import { Checkbox } from "@sonamu-kit/react-components/components";
+
+import { useListParams, numF, dateF, datetimeF } from "@sonamu-kit/react-components/lib";
 import { ${names.capital}SubsetA } from "@/services/sonamu.generated";
-import { ${names.capital}Service } from '@/services/services.generated';
-import { ${names.capital}ListParams } from '@/services/${names.fs}/${names.fs}.types';
-${columnImports}
-${filterColumns
-  .map((col) => {
-    return this.renderFilterImport(entityId, col, names);
-  })
-  .join("\n")}
+import { ${names.capital}Service } from "@/services/services.generated";
+import { ${names.capital}ListParams } from "@/services/${names.fs}/${names.fs}.types";
+import { ${(() => {
+        // 기본 enum 수집 (filterColumns에 있는 것만)
+        const baseEnums: string[] = [];
+        if (filterColumns.some((col) => col.name === "orderBy")) {
+          baseEnums.push(`${names.capital}OrderBy`, `${names.capital}OrderByLabel`);
+        }
+        if (filterColumns.some((col) => col.name === "search")) {
+          baseEnums.push(`${names.capital}SearchField`, `${names.capital}SearchFieldLabel`);
+        }
+
+        // 필터 enum 수집 (config.enumId 우선, 없으면 getEnumInfoFromColName)
+        const filterEnumIds = filterColumns
+          .filter(
+            (col) => col.renderType === "enums" && col.name !== "search" && col.name !== "orderBy",
+          )
+          .map((col) => {
+            if (col.config && "enumId" in col.config) {
+              return (col.config as { enumId: string }).enumId;
+            }
+            try {
+              const { id: enumId } = getEnumInfoFromColName(entityId, col.name);
+              return enumId;
+            } catch {
+              return null;
+            }
+          })
+          .filter(Boolean) as string[];
+
+        // 모든 enum 합치고 중복 제거
+        const allEnums = [...new Set([...filterEnumIds, ...columnEnums])];
+        const enumImports = allEnums.flatMap((enumId) => [`${enumId}`, `${enumId}Label`]);
+
+        return [...baseEnums, ...enumImports].join(", ");
+      })()} } from "@/services/sonamu.generated";
+${(() => {
+  // FK 필드의 AsyncSelect 컴포넌트 import
+  const fkColumns = filterColumns.filter((col) => col.name.endsWith("_id") && col.name !== "id");
+  return fkColumns
+    .map((col) => {
+      try {
+        const relProp = getRelationPropFromColName(entityId, col.name.replace("_id", ""));
+        const targetNames = EntityManager.getNamesFromId(relProp.with);
+        return `import { ${relProp.with}IdAsyncSelect } from "@/components/${targetNames.fs}/${relProp.with}IdAsyncSelect";`;
+      } catch {
+        return "";
+      }
+    })
+    .filter(Boolean)
+    .join("\n");
+})()}
+${
+  filterColumns.some((col) => col.name === "search")
+    ? `
+import { ${names.capital}SearchFieldSelect } from "@/components/${names.fs}/${names.capital}SearchFieldSelect";`
+    : ""
+}
+${
+  filterColumns.some((col) => col.name === "orderBy")
+    ? `
+import { ${names.capital}OrderBySelect } from "@/components/${names.fs}/${names.capital}OrderBySelect";`
+    : ""
+}
+
+import EditIcon from "~icons/lucide/square-pen";
+import TrashIcon from "~icons/lucide/trash-2";
+import ListIcon from "~icons/mdi/format-list-bulleted";
+import SearchIcon from "~icons/mdi/magnify";
+
+export const Route = createFileRoute("/admin/${names.fsPlural}/")({\n  head: () => ({\n    meta: [\n      { title: "${entity.title ?? names.capital} List" },\n      { name: "description", content: "${entity.title ?? names.capital} 목록 관리" },\n    ],\n  }),\n  component: ${names.capital}List,\n});\n\ntype ${names.capital}ListProps = {};
+
+function ${names.capital}List({}: ${names.capital}ListProps) {
+  const navigate = useNavigate();
+
+  // 상태 관리
+  const [selectedItems, setSelectedItems] = useState<Set<number>>(new Set());
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [itemToDelete, setItemToDelete] = useState<{ id: number; name?: string } | null>(null);
 
-type ${names.capital}ListProps = {};
-export default function ${names.capital}List({}: ${names.capital}ListProps) {
   // 리스트 필터
   const { listParams, register } = useListParams(${names.capital}ListParams, {
-    num: 12,
+    num: 10,
     page: 1,
-    orderBy: '${def.orderBy}',
-    search: '${def.search}',
+    keyword: "",${
+      filterColumns.some((col) => col.name === "search")
+        ? `
+    search: ${names.capital}SearchField.options[0],`
+        : ""
+    }${
+      filterColumns.some((col) => col.name === "orderBy")
+        ? `
+    orderBy: ${names.capital}OrderBy.options[0],`
+        : ""
+    }
   });
 
   // 리스트 쿼리
-  const { data, refetch, isLoading } = ${names.capital}Service.use${
-    names.capitalPlural
-  }('A', listParams);
+  const { data, refetch, isLoading } = ${names.capital}Service.use${names.capitalPlural}("A", listParams);
   const { rows, total } = data ?? {};
 
-  // 삭제
-  const confirmDel = (ids: number[]) => {
-    const answer = confirm('삭제하시겠습니까?');
-    if (!answer) {
-      return;
+  // 현재 경로와 타이틀
+  const PAGE = {
+    route: "/admin/${names.fsPlural}",
+    title: "${entity.title ?? names.capital}",
+  };
+
+  // 컬럼 정의
+  type ${names.capital}Row = NonNullable<typeof rows>[number];
+  const columns: TableCol<${names.capital}Row>[] = [
+${columns
+  .map(
+    (col) => `    {
+      label: "${col.label}",
+      tc: ${col.tc},${
+        col.fit
+          ? `
+      fit: true,`
+          : ""
+      }${
+        col.align
+          ? `
+      align: "${col.align}",`
+          : ""
+      }
+    }`,
+  )
+  .join(",\n")},
+    {
+      label: "Manage",
+      fit: true,
+      align: "center",
+      tc: (row) => (
+        <div className="flex items-center justify-center gap-1">
+          <Button
+            variant="yellow"
+            size="xs"
+            icon={<EditIcon />}
+            onClick={() => navigate({ to: \`\${PAGE.route}/form\`, search: { id: row.id } })}
+          />
+          <Button
+            variant="red"
+            size="xs"
+            icon={<TrashIcon />}
+            onClick={() => handleDeleteClick(row.id)}
+          />
+        </div>
+      ),
+    },
+  ];
+
+  // 선택 핸들러
+  const handleToggleItem = (id: number) => {
+    const newSelection = new Set(selectedItems);
+    if (newSelection.has(id)) {
+      newSelection.delete(id);
+    } else {
+      newSelection.add(id);
     }
+    setSelectedItems(newSelection);
+  };
 
-    ${names.capital}Service.del(ids).then(() => {
-      refetch();
-    });
+  const isAllSelected = () => {
+    return (rows?.length ?? 0) > 0 && rows!.every((row) => selectedItems.has(row.id));
   };
 
-  // 일괄 삭제
-  const confirmDelSelected = () => {
-    const answer = confirm(\`\${selectedKeys.length}건을 일괄 삭제하시겠습니까?\`);
-    if (!answer) {
-      return;
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedItems(new Set(rows?.map((row) => row.id) ?? []));
+    } else {
+      setSelectedItems(new Set());
     }
-
-    ${names.capital}Service.del(selectedKeys).then(() => {
-      refetch();
-    });
   };
 
-  // 현재 경로와 타이틀
-  const PAGE = {
-    route: '/admin/${names.fsPlural}',
-    title: '${entity.title ?? names.capital}',
+  // 삭제 핸들러
+  const handleDeleteClick = (id: number, name?: string) => {
+    setItemToDelete({ id, name });
+    setDeleteDialogOpen(true);
   };
 
-  // 선택
-  const {
-    getSelected,
-    isAllSelected,
-    selectedKeys,
-    toggle,
-    selectAll,
-    deselectAll,
-    handleCheckboxClick,
-  } = useSelection((rows ?? []).map((row) => row.id));
-
-  // 컬럼
-  const columns:SonamuCol<${names.capital}SubsetA>[] = [${columns
-    .map((col) => {
-      return [
-        `{ label: "${col.label}",`,
-        `tc: ${col.tc}, `,
-        `collapsing: ${["Title", "Name"].includes(col.label) === false}, }`,
-      ].join("\n");
-    })
-    .join(",\n")}];
+  const handleConfirmDelete = () => {
+    if (itemToDelete) {
+      ${names.capital}Service.del([itemToDelete.id]).then(() => {
+        refetch();
+      });
+    }
+    setDeleteDialogOpen(false);
+    setItemToDelete(null);
+  };
 
   return (
-    <div className="list ${names.fsPlural}-index">
-      <div className="top-nav">
-        <div className="header-row">
-          <div className="header">{PAGE.title}</div>
-          <AppBreadcrumbs>
-            <Breadcrumb.Section active>{PAGE.title}</Breadcrumb.Section>
-          </AppBreadcrumbs>
-          <${names.capital}SearchInput
-            input={register('keyword')}
-            dropdown={register('search')}
-          />
-        </div>
-        <div className="filters-row">
-          ${filterColumns
-            .map((col) => {
-              return this.renderFilter(entityId, col, names);
-            })
-            .join("&nbsp;\n")}
-        </div>
-      </div>
-
-      <Segment basic padded className="contents-segment" loading={isLoading}>
-        <div className="buttons-row">
-          <div className={classNames('count', { hidden: isLoading })}>
-            {total} 건
+    <div className="flex-1 overflow-auto">
+      <div className="max-w-[1800px] mx-auto p-8">
+        <div className="space-y-6 mb-8">
+          {/* Header */}
+          <div className="flex items-center gap-2">
+            <ListIcon className="h-5 w-5" />
+            <span className="text-lg font-semibold h-5">{PAGE.title}</span>
           </div>
-          <div className="buttons">
-            <AddButton currentRoute={PAGE.route} icon="write" label="추가" />
-          </div>
-        </div>
 
-        <Table
-          celled
-          compact
-          selectable
-          className={classNames({ hidden: total === undefined || total === 0 })}
-        >
-          <Table.Header>
-            <TableRow>
-              <Table.HeaderCell collapsing>
-                <Checkbox
-                  label="ID"
-                  checked={isAllSelected}
-                  onChange={isAllSelected ? deselectAll : selectAll}
-                />
-              </Table.HeaderCell>
-              {
-                /* Header */
-                columns.map((col, index) => col.th ?? <Table.HeaderCell key={index} collapsing={col.collapsing}>{ col.label }</Table.HeaderCell>)
-              }
-              <Table.HeaderCell>관리</Table.HeaderCell>
-            </TableRow>
-          </Table.Header>
-          <Table.Body>
-            {rows &&
-              rows.map((row, rowIndex) => (
-                <Table.Row key={row.id}>
-                  <Table.Cell>
-                    <Checkbox
-                      label={row.id}
-                      checked={getSelected(row.id)}
-                      onChange={() => toggle(row.id)}
-                      onClick={(e) =>
-                        handleCheckboxClick(e, rowIndex)
-                      }
+          <Card className="shadow-sm border-border/40 overflow-hidden">
+            <CardHeader className="pb-0 px-0 pt-0">
+              {/* Filters */}
+              <div className="bg-gray-100 px-6 py-4 space-y-3">
+                <div className="flex items-center gap-3 flex-wrap">
+${
+  filterColumns.some((col) => col.name === "search")
+    ? `                  <${names.capital}SearchFieldSelect
+                    {...register("search")}
+                    placeholder="Search Type"
+                    className="w-[200px] h-8 bg-white border-gray-300 text-xs"
+                  />`
+    : ""
+}
+
+                  <div className="relative flex-1 max-w-xs">
+                    <Input
+                      {...register("keyword")}
+                      placeholder="Search..."
+                      className="h-8 pr-8 text-xs bg-white border-gray-300"
                     />
-                  </Table.Cell>
-                  {
-                    /* Body */
-                    columns.map((col, colIndex) => (
-                      <Table.Cell key={colIndex} collapsing={col.collapsing} className={col.className}>
-                        {col.tc(row, rowIndex)}
-                      </Table.Cell>
-                    ))
-                  }
-                  <Table.Cell collapsing>
-                    <EditButton
-                      as={Link}
-                      to={\`\${PAGE.route}/form?id=\${row.id}\`}
-                      state={{ from: PAGE.route }}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      icon={<SearchIcon />}
+                      className="absolute right-0 top-0 h-8 w-8 hover:bg-transparent"
                     />
-                    <DelButton onClick={() => confirmDel([row.id])} />
-                  </Table.Cell>
-                </Table.Row>
-              ))}
-          </Table.Body>
-        </Table>
-        <div
-          className={classNames('pagination-row', {
-            hidden: (total ?? 0) === 0,
-          })}
-        >
-          <Pagination
-            totalPages={Math.ceil((total ?? 0) / (listParams.num ?? 24))}
-            {...register('page')}
-          />
+                  </div>
+
+                  <div className="ml-auto">
+                    <Button
+                      className="h-8 px-4 bg-primary hover:bg-primary/90 text-white"
+                      onClick={() => navigate({ to: \`\${PAGE.route}/form\` })}
+                    >
+                      <span className="text-xs">Create</span>
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-3 flex-wrap">
+${filterColumns
+  .filter((col) => col.name !== "search" && col.name !== "orderBy")
+  .map((col) => {
+    if (col.renderType === "enums") {
+      try {
+        // config.enumId가 있으면 우선 사용, 없으면 getEnumInfoFromColName 시도
+        const enumId =
+          col.config && "enumId" in col.config
+            ? (col.config as { enumId: string }).enumId
+            : getEnumInfoFromColName(entityId, col.name).id;
+        return `                  <Select key={\`${col.name}-\${listParams.${col.name}}\`} {...register("${col.name}")} clearable>
+                    <SelectTrigger className="w-[200px] h-8 bg-white border-gray-300 text-xs">
+                      <SelectValue placeholder="${col.label}" className="truncate" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {${enumId}.options.map((key) => (
+                        <SelectItem key={key} value={key}>
+                          {${enumId}Label[key]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>`;
+      } catch {
+        return "";
+      }
+    }
+    // FK 필드 (AsyncSelect)
+    if (col.name.endsWith("_id") && col.name !== "id") {
+      try {
+        const relProp = getRelationPropFromColName(entityId, col.name.replace("_id", ""));
+        return `                  <${relProp.with}IdAsyncSelect
+                    subset="A"
+                    {...register("${col.name}")}
+                    placeholder="${col.label ?? relProp.with}"
+                    clearable
+                    className="w-[200px] h-8 text-xs"
+                  />`;
+      } catch {
+        return "";
+      }
+    }
+    return "";
+  })
+  .filter(Boolean)
+  .join("\n")}
+${
+  filterColumns.some((col) => col.name === "orderBy")
+    ? `                  <${names.capital}OrderBySelect
+                    {...register("orderBy")}
+                    placeholder="Sort"
+                    textPrefix="Sort: "
+                    className="w-[200px] h-8 bg-white border-gray-300 text-xs"
+                  />`
+    : ""
+}
+                  <span className="text-xs text-muted-foreground">{total ?? 0} results</span>
+                </div>
+              </div>
+            </CardHeader>
+
+            <CardContent className="px-6 pb-6 pt-6 bg-white">
+              {/* Table */}
+              <Table>
+                <TableHeader>
+                  <TableRow className="hover:bg-transparent bg-gray-100">
+                    <TableHead className="h-9 text-xs w-[40px]">
+                      <Checkbox
+                        checked={isAllSelected()}
+                        onValueChange={handleSelectAll}
+                      />
+                    </TableHead>
+                    {columns.map((col, idx) => (
+                      <TableHead key={idx} fit={col.fit} align={col.align}>
+                        {col.label}
+                      </TableHead>
+                    ))}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {!isLoading && rows && rows.map((row) => (
+                    <Fragment key={row.id}>
+                      <TableRow>
+                        <TableCell className="py-3">
+                          <Checkbox
+                            checked={selectedItems.has(row.id)}
+                            onValueChange={() => handleToggleItem(row.id)}
+                          />
+                        </TableCell>
+                        {columns.map((col, idx) => (
+                          <TableCell key={idx} fit={col.fit} align={col.align} className="py-3">
+                            {col.tc(row)}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    </Fragment>
+                  ))}
+                </TableBody>
+              </Table>
+
+              {/* Pagination */}
+              <Pagination
+                {...register("page")}
+                total={total ?? 0}
+                itemsPerPage={listParams.num ?? 10}
+              />
+            </CardContent>
+          </Card>
         </div>
-      </Segment>
-
-      <div className="fixed-menu">
-        <Transition
-          visible={selectedKeys.length > 0}
-          animation="slide left"
-          duration={500}
-        >
-          <Message size="small" color="violet" className="text-center">
-            <span className="px-4">{selectedKeys.length}개 선택됨</span>
-            <Button size="tiny" color="violet" onClick={() => deselectAll()}>
-              선택 해제
-            </Button>
-            <Button size="tiny" color="red" onClick={confirmDelSelected}>
-              일괄 삭제
-            </Button>
-          </Message>
-        </Transition>
       </div>
+
+      {/* Delete Dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete this item.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleConfirmDelete}>Delete</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }