sonamu 0.7.53 → 0.8.0

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

@@ -2,8 +2,12 @@ import inflection from "inflection";
 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 { getEnumInfoFromColName, getRelationPropFromColName } from "../helpers";
+import type { RenderingNode, TemplateOptions } from "../../types/types";
+import {
+  getEnumInfoFromColName,
+  getRelationNameFromColumnName,
+  getRelationPropFromColName,
+} from "../helpers";
 import type { RenderedTemplate } from "../template";
 import { Template } from "../template";
 
@@ -52,8 +56,10 @@ export class Template__view_list extends Template {
       case "string-plain":
       case "string-date":
       case "number-id":
+      case "string-id":
         return `<>{${colName}}</>`;
-      case "number-fk_id": {
+      case "number-fk_id":
+      case "string-fk_id": {
         try {
           const baseName = col.name.includes(".")
             ? (col.name.split(".").pop() ?? col.name).replace("_id", "")
@@ -169,7 +175,7 @@ export class Template__view_list extends Template {
           return "";
         }
       }
-    } else if (col.renderType === "number-fk_id") {
+    } else if (col.renderType === "number-fk_id" || col.renderType === "string-fk_id") {
       try {
         const relProp = getRelationPropFromColName(entityId, col.name.replace("_id", ""));
         const targetNames = EntityManager.getNamesFromId(relProp.with);
@@ -202,7 +208,7 @@ export class Template__view_list extends Template {
         }
       }
       return `<${componentId} {...register('${col.name}')} ${isClearable ? "clearable" : ""} />`;
-    } else if (col.renderType === "number-fk_id") {
+    } else if (col.renderType === "number-fk_id" || col.renderType === "string-fk_id") {
       try {
         const relProp = getRelationPropFromColName(entityId, col.name.replace("_id", ""));
         componentId = `${relProp.with}IdAsyncSelect`;
@@ -262,17 +268,31 @@ export class Template__view_list extends Template {
 
       .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);
+
+        // 라벨 생성: common 필드(created_at)는 SD("common.{field}"), entity 필드는 SD("entity.{Entity}.{field}")
+        let label: string;
+        if (col.name === "id") {
+          label = '"ID"';
+        } else if (["created_at"].includes(col.name)) {
+          // camelCase로 변환 (created_at -> createdAt)
+          const camelName = col.name.replace(/_([a-z])/g, (_, char) => char.toUpperCase());
+          label = `SD("common.${camelName}")`;
+        } else {
+          const labelName = getRelationNameFromColumnName(entityId, col.name);
+          label = `SD("entity.${names.capital}.${labelName}")`;
+        }
+
         return {
           name: col.name,
-          label: col.name === "id" ? "ID" : (propCandidate?.desc ?? col.label),
+          label,
           tc: `(row) => ${rendered}`,
           fit:
+            col.name === "id" ||
             col.renderType === "number-id" ||
             col.renderType === "datetime" ||
             col.renderType === "string-datetime",
-          align: col.renderType === "number-id" ? "center" : undefined,
+          align: col.name === "id" || col.renderType === "number-id" ? "center" : undefined,
         };
       });
 
@@ -282,7 +302,7 @@ export class Template__view_list extends Template {
         (col) =>
           col.name !== "id" &&
           col.name !== "queryMode" &&
-          (["enums", "number-id"].includes(col.renderType) || col.name.endsWith("_id")),
+          ["enums", "number-id", "number-fk_id", "string-fk_id"].includes(col.renderType),
       )
       // orderBy가 가장 뒤로 오게 순서 조정
       .sort((a) => {
@@ -291,50 +311,6 @@ export class Template__view_list extends Template {
 
     // 필터 컬럼을 프리 템플릿으로 설정
     const preTemplates: RenderedTemplate["preTemplates"] = [];
-    for (const col of filterColumns) {
-      let key: TemplateKey;
-      let targetEntityId = entityId;
-      let enumId: string | undefined;
-
-      if (col.renderType === "enums") {
-        if (col.name === "search") {
-          key = "view_enums_select";
-          enumId = `${names.capital}SearchField`;
-          targetEntityId = names.capital;
-        } else {
-          key = "view_enums_select";
-          // 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 {
-        key = "view_id_async_select";
-        try {
-          const relProp = getRelationPropFromColName(entityId, col.name.replace("_id", ""));
-          targetEntityId = relProp.with;
-        } catch {
-          continue;
-        }
-      }
-
-      preTemplates.push({
-        key,
-        options: {
-          entityId: targetEntityId,
-          enumId,
-        },
-      });
-    }
 
     // 컬럼에서 사용하는 enum들 수집
     const columnEnums: string[] = [];
@@ -347,14 +323,6 @@ export class Template__view_list extends Template {
       }
     });
 
-    // SearchInput
-    preTemplates?.push({
-      key: "view_search_input",
-      options: {
-        entityId,
-      },
-    });
-
     // 디폴트 파라미터
     // const def = this.getDefault(filterColumns);
 
@@ -368,13 +336,14 @@ import { Card, CardContent, CardHeader } from "@sonamu-kit/react-components/comp
 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 { EnumSelect } 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 { SonamuFilterModal, SonamuFilterPopover, extractFieldMetaFromSchema, type Rule } 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}SubsetA, ${names.capital}BaseSchema } from "@/services/sonamu.generated";
 import { ${names.capital}Service } from "@/services/services.generated";
 import { ${names.capital}ListParams } from "@/services/${names.fs}/${names.fs}.types";
 import { ${(() => {
@@ -411,37 +380,30 @@ import { ${(() => {
 
         return [...baseEnums, ...enumImports].join(", ");
       })()} } from "@/services/sonamu.generated";
+import { IdAsyncSelect } from "@sonamu-kit/react-components/components";
 ${(() => {
-  // FK 필드의 AsyncSelect 컴포넌트 import
-  const fkColumns = filterColumns.filter((col) => col.name.endsWith("_id") && col.name !== "id");
-  return fkColumns
+  // FK 필드의 AsyncIdConfig import
+  const fkColumns = filterColumns.filter(
+    (col) => col.renderType === "number-fk_id" || col.renderType === "string-fk_id",
+  );
+  const configNames = 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";`;
+        return `${relProp.with}AsyncIdConfig`;
       } catch {
         return "";
       }
     })
-    .filter(Boolean)
-    .join("\n");
+    .filter(Boolean);
+  return configNames.length > 0
+    ? `import { ${configNames.join(", ")} } from "@/services/services.generated";`
+    : "";
 })()}
-${
-  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 FilterIcon from "~icons/mdi/filter-variant";
 import ListIcon from "~icons/mdi/format-list-bulleted";
 import SearchIcon from "~icons/mdi/magnify";
 import { SD } from "@/i18n/sd.generated";
@@ -455,9 +417,11 @@ function ${names.capital}List({}: ${names.capital}ListProps) {
   const [selectedItems, setSelectedItems] = useState<Set<${idTsType}>>(new Set());
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [itemToDelete, setItemToDelete] = useState<{ id: ${idTsType}; name?: string } | null>(null);
+  const [filterModalOpen, setFilterModalOpen] = useState(false);
+  const [appliedRules, setAppliedRules] = useState<Rule[]>([]);
 
   // 리스트 필터
-  const { listParams, register } = useListParams(${names.capital}ListParams, {
+  const { listParams, register, setListParams } = useListParams(${names.capital}ListParams, {
     num: 10,
     page: 1,
     keyword: "",${
@@ -471,6 +435,7 @@ function ${names.capital}List({}: ${names.capital}ListProps) {
     orderBy: ${names.capital}OrderBy.options[0],`
         : ""
     }
+    sonamuFilter: {},
   });
 
   // 리스트 쿼리
@@ -480,7 +445,7 @@ function ${names.capital}List({}: ${names.capital}ListProps) {
   // 현재 경로와 타이틀
   const PAGE = {
     route: "/admin/${names.fsPlural}",
-    title: "${entity.title ?? names.capital}",
+    title: SD("entity.list")(SD("entity.${names.capital}")),
   };
 
   // 컬럼 정의
@@ -489,7 +454,7 @@ function ${names.capital}List({}: ${names.capital}ListProps) {
 ${columns
   .map(
     (col) => `    {
-      label: "${col.label}",
+      label: ${col.label},
       tc: ${col.tc},${
         col.fit
           ? `
@@ -505,7 +470,7 @@ ${columns
   )
   .join(",\n")},
     {
-      label: "Manage",
+      label: SD("common.manage"),
       fit: true,
       align: "center",
       tc: (row) => (
@@ -583,10 +548,12 @@ ${columns
                 <div className="flex items-center gap-3 flex-wrap">
 ${
   filterColumns.some((col) => col.name === "search")
-    ? `                  <${names.capital}SearchFieldSelect
+    ? `                  <EnumSelect
+                    enum={${names.capital}SearchField}
+                    labels={${names.capital}SearchFieldLabel}
                     {...register("search")}
-                    placeholder="Search Type"
-                    className="w-[200px] h-8 bg-white border-gray-300 text-xs"
+                    placeholder={SD("common.searchType")}
+                    className="w-50 h-8 bg-white border-gray-300 text-xs"
                   />`
     : ""
 }
@@ -594,7 +561,7 @@ ${
                   <div className="relative flex-1 max-w-xs">
                     <Input
                       {...register("keyword")}
-                      placeholder="Search..."
+                      placeholder={SD("common.search")}
                       className="h-8 pr-8 text-xs bg-white border-gray-300"
                     />
                     <Button
@@ -605,13 +572,35 @@ ${
                     />
                   </div>
 
-                  <div className="ml-auto">
+                  <div className="ml-auto flex items-center gap-2">
                     <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>
+                      <span className="text-xs">{SD("common.create")}</span>
                     </Button>
+                    <SonamuFilterPopover
+                      rules={appliedRules}
+                      fieldMeta={extractFieldMetaFromSchema(
+                        ${names.capital}BaseSchema,
+                        SD as (key: string) => string,
+                      )}
+                    >
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        icon={<FilterIcon />}
+                        onClick={() => setFilterModalOpen(true)}
+                        className="h-8"
+                      >
+                        <span className="text-xs">{SD("rc.sonamuFilter.title")}</span>
+                        {appliedRules.length > 0 && (
+                          <Badge variant="secondary" className="ml-1">
+                            {appliedRules.length}
+                          </Badge>
+                        )}
+                      </Button>
+                    </SonamuFilterPopover>
                   </div>
                 </div>
 
@@ -626,32 +615,30 @@ ${filterColumns
           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>`;
+        return `                  <EnumSelect
+                    key={\`${col.name}-\${listParams.${col.name}}\`}
+                    enum={${enumId}}
+                    labels={${enumId}Label}
+                    {...register("${col.name}")}
+                    placeholder="${col.label}"
+                    clearable
+                    className="w-50 h-8 bg-white border-gray-300 text-xs"
+                  />`;
       } catch {
         return "";
       }
     }
-    // FK 필드 (AsyncSelect)
-    if (col.name.endsWith("_id") && col.name !== "id") {
+    // FK 필드 (IdAsyncSelect)
+    if (col.renderType === "number-fk_id" || col.renderType === "string-fk_id") {
       try {
         const relProp = getRelationPropFromColName(entityId, col.name.replace("_id", ""));
-        return `                  <${relProp.with}IdAsyncSelect
+        return `                  <IdAsyncSelect
+                    config={${relProp.with}AsyncIdConfig}
                     subset="A"
                     {...register("${col.name}")}
                     placeholder="${col.label ?? relProp.with}"
                     clearable
-                    className="w-[200px] h-8 text-xs"
+                    className="w-50 h-8 text-xs"
                   />`;
       } catch {
         return "";
@@ -663,15 +650,17 @@ ${filterColumns
   .join("\n")}
 ${
   filterColumns.some((col) => col.name === "orderBy")
-    ? `                  <${names.capital}OrderBySelect
+    ? `                  <EnumSelect
+                    enum={${names.capital}OrderBy}
+                    labels={${names.capital}OrderByLabel}
                     {...register("orderBy")}
-                    placeholder="Sort"
-                    textPrefix="Sort: "
-                    className="w-[200px] h-8 bg-white border-gray-300 text-xs"
+                    placeholder={SD("common.sort")}
+                    textPrefix={\`\${SD("common.sort")}: \`}
+                    className="w-50 h-8 bg-white border-gray-300 text-xs"
                   />`
     : ""
 }
-                  <span className="text-xs text-muted-foreground">{total ?? 0} results</span>
+                  <span className="text-xs text-muted-foreground">{SD("common.results")(total ?? 0)}</span>
                 </div>
               </div>
             </CardHeader>
@@ -730,17 +719,29 @@ ${
       <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>
+            <AlertDialogTitle>{SD("delete.confirm.title")}</AlertDialogTitle>
+            <AlertDialogDescription>{SD("delete.confirm.description")}</AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleConfirmDelete}>Delete</AlertDialogAction>
+            <AlertDialogCancel>{SD("common.cancel")}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleConfirmDelete}>
+              {SD("common.delete")}
+            </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+
+      {/* Sonamu Filter Modal */}
+      <SonamuFilterModal
+        baseSchema={${names.capital}BaseSchema}
+        open={filterModalOpen}
+        onOpenChange={setFilterModalOpen}
+        initialRules={appliedRules}
+        onApply={(filters, rules) => {
+          setListParams({ ...listParams, sonamuFilter: filters, page: 1 });
+          setAppliedRules(rules);
+        }}
+      />
     </div>
   );
 }

package/src/template/implementations/view_search_input.template.ts

@@ -24,37 +24,32 @@ export class Template__view_search_input extends Template {
     return {
       ...this.getTargetAndPath(names),
       body: `
-import { Button, Input } from "@sonamu-kit/react-components/components";
+import { Button, EnumSelect, Input } from "@sonamu-kit/react-components/components";
+import { useSonamuBaseContext } from "@sonamu-kit/react-components/contexts";
 import type React from "react";
 import { useState } from "react";
-import { ${names.capital}SearchFieldSelect } from "@/components/${names.fs}/${names.capital}SearchFieldSelect";
+import { ${names.capital}SearchField, ${names.capital}SearchFieldLabel } from "@/services/sonamu.generated";
 import SearchIcon from "~icons/lucide/search";
 import { SD } from "@/i18n/sd.generated";
 export type ${names.capital}SearchInputProps = {
   input: {
     value?: string;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onValueChange?: (value: string | null | undefined) => void;
   };
   dropdown: {
     value?: string;
-    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    onValueChange?: (value: string | null | undefined) => void;
   };
 };
 
 export function ${names.capital}SearchInput({
-  input: { value: inputValue, onChange: inputOnChange },
+  input: { value: inputValue, onValueChange: inputOnValueChange },
   dropdown: dropdownProps,
 }: ${names.capital}SearchInputProps) {
   const [keyword, setKeyword] = useState<string>(inputValue ?? "");
 
   const handleSearch = () => {
-    if (inputOnChange) {
-      const syntheticEvent = {
-        target: { value: keyword },
-        currentTarget: { value: keyword },
-      } as React.ChangeEvent<HTMLInputElement>;
-      inputOnChange(syntheticEvent);
-    }
+    inputOnValueChange?.(keyword || undefined);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -65,7 +60,16 @@ export function ${names.capital}SearchInput({
 
   return (
     <div className="flex items-center gap-1">
-      <${names.capital}SearchFieldSelect {...dropdownProps} />
+      <EnumSelect
+        enum={${names.capital}SearchField}
+        labels={${names.capital}SearchFieldLabel}
+        value={dropdownProps.value}
+        onValueChange={(value) => {
+          dropdownProps.onValueChange?.(value as string | null | undefined);
+        }}
+        placeholder={SD("common.search")}
+        className="w-[150px] h-8"
+      />
       <div className="relative flex items-center">
         <Input
           type="text"

package/src/template/zod-converter.ts

@@ -57,6 +57,7 @@ import {
   type RenderingNode,
   SonamuFileArraySchema,
   SonamuFileSchema,
+  type ZodStringFormat,
 } from "../types/types";
 import { createImportUrl } from "../utils/esm-utils";
 import { runtimePath } from "../utils/path-utils";
@@ -87,6 +88,72 @@ export const BUILT_IN_TYPES = {
   },
 } as const;
 
+/**
+ * zodFormat을 Zod 4 코드 문자열로 변환합니다.
+ * Zod 4에서는 z.email(), z.uuid() 등 독립적인 함수 형태를 사용합니다.
+ */
+function zodFormatToCode(format: ZodStringFormat): string {
+  // ISO 포맷은 z.iso.xxx() 형태
+  const isoFormats: Record<string, string> = {
+    isoDate: "z.iso.date()",
+    isoTime: "z.iso.time()",
+    isoDatetime: "z.iso.datetime()",
+    isoDuration: "z.iso.duration()",
+  };
+
+  // hash 포맷은 z.hash("algorithm") 형태
+  const hashFormats: Record<string, string> = {
+    hashMd5: 'z.hash("md5")',
+    hashSha1: 'z.hash("sha1")',
+    hashSha256: 'z.hash("sha256")',
+    hashSha384: 'z.hash("sha384")',
+    hashSha512: 'z.hash("sha512")',
+  };
+
+  if (format in isoFormats) {
+    return isoFormats[format];
+  }
+
+  if (format in hashFormats) {
+    return hashFormats[format];
+  }
+
+  // 기본 포맷은 z.xxx() 형태 (Zod 4)
+  return `z.${format}()`;
+}
+
+/**
+ * zodFormat을 Zod 4 타입으로 변환합니다.
+ * Zod 4에서는 z.email(), z.uuid() 등 독립적인 함수 형태를 사용합니다.
+ */
+function zodFormatToType(format: ZodStringFormat): z.ZodType {
+  // ISO 포맷은 z.iso.xxx() 형태
+  switch (format) {
+    case "isoDate":
+      return z.iso.date();
+    case "isoTime":
+      return z.iso.time();
+    case "isoDatetime":
+      return z.iso.datetime();
+    case "isoDuration":
+      return z.iso.duration();
+    // hash 포맷은 z.hash("algorithm") 형태
+    case "hashMd5":
+      return z.hash("md5");
+    case "hashSha1":
+      return z.hash("sha1");
+    case "hashSha256":
+      return z.hash("sha256");
+    case "hashSha384":
+      return z.hash("sha384");
+    case "hashSha512":
+      return z.hash("sha512");
+    // 기본 포맷은 z.xxx() 형태 (Zod 4)
+    default:
+      return (z as unknown as Record<string, () => z.ZodType>)[format]();
+  }
+}
+
 /**
  * Zod 타입 ID로부터 동적으로 Zod 스키마를 로드합니다.
  * 내장 타입(BUILT_IN_TYPE_IDS)은 바로 반환하고,
@@ -136,17 +203,29 @@ export async function propToZodType(prop: EntityProp): Promise<z.ZodTypeAny> {
   } else if (isEnumArrayProp(prop)) {
     zodType = (await getZodTypeById(prop.id)).array();
   } else if (isStringSingleProp(prop)) {
-    if (prop.length) {
+    if (prop.zodFormat) {
+      zodType = zodFormatToType(prop.zodFormat);
+      if (prop.length && "max" in zodType) {
+        zodType = (zodType as z.ZodString).max(prop.length);
+      }
+    } else if (prop.length) {
       zodType = z.string().max(prop.length);
     } else {
       zodType = z.string();
     }
   } else if (isStringArrayProp(prop)) {
-    if (prop.length) {
-      zodType = z.string().max(prop.length).array();
+    let elementType: z.ZodType;
+    if (prop.zodFormat) {
+      elementType = zodFormatToType(prop.zodFormat);
+      if (prop.length && "max" in elementType) {
+        elementType = (elementType as z.ZodString).max(prop.length);
+      }
+    } else if (prop.length) {
+      elementType = z.string().max(prop.length);
     } else {
-      zodType = z.string().array();
+      elementType = z.string();
     }
+    zodType = elementType.array();
   } else if (isNumberSingleProp(prop)) {
     zodType = z.number();
   } else if (isNumberArrayProp(prop)) {
@@ -220,13 +299,27 @@ export function propToZodTypeDef(prop: EntityProp, injectImportKeys: string[]):
     stmt = `${prop.name}: ${prop.id}.array()`;
     injectImportKeys.push(prop.id);
   } else if (isStringSingleProp(prop)) {
-    if (prop.length) {
+    if (prop.zodFormat) {
+      const base = zodFormatToCode(prop.zodFormat);
+      if (prop.length) {
+        stmt = `${prop.name}: ${base}.max(${prop.length})`;
+      } else {
+        stmt = `${prop.name}: ${base}`;
+      }
+    } else if (prop.length) {
       stmt = `${prop.name}: z.string().max(${prop.length})`;
     } else {
       stmt = `${prop.name}: z.string()`;
     }
   } else if (isStringArrayProp(prop)) {
-    if (prop.length) {
+    if (prop.zodFormat) {
+      const base = zodFormatToCode(prop.zodFormat);
+      if (prop.length) {
+        stmt = `${prop.name}: ${base}.max(${prop.length}).array()`;
+      } else {
+        stmt = `${prop.name}: ${base}.array()`;
+      }
+    } else if (prop.length) {
       stmt = `${prop.name}: z.string().max(${prop.length}).array()`;
     } else {
       stmt = `${prop.name}: z.string().array()`;
@@ -653,6 +746,10 @@ function resolveRenderType(key: string, zodType: z.ZodTypeAny): RenderingNode["r
       return "string-datetime";
     } else if (key.endsWith("date")) {
       return "string-date";
+    } else if (key === "id") {
+      return "string-id";
+    } else if (key.endsWith("_id")) {
+      return "string-fk_id";
     } else {
       return "string-plain";
     }

package/src/testing/_relation-graph.ts

@@ -44,7 +44,7 @@ export class RelationGraph {
             }
           } else if (isManyToManyRelationProp(prop)) {
             // ManyToMany 관계의 경우 양방향 의존성 추가
-            const relatedIds = column.value as unknown as number[];
+            const relatedIds = column.value as unknown as (number | string)[];
             for (const relatedId of relatedIds) {
               const relatedFixtureId = `${prop.with}#${relatedId}`;
               if (this.graph.has(relatedFixtureId)) {