@axboot-mcp/mcp-server 1.0.0 → 1.0.1

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Axboot MCP Server - Store 생성 및 다른 기능 확장 가능",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/handlers/generate-listdatagrid.ts

@@ -31,6 +31,14 @@ export interface ListDataGridConfig {
   onClickType?: 'modal' | 'link' | 'select' | 'none';
   /** 추가적인 import */
   extraImports?: string[];
+  /** 행 높이 */
+  itemHeight?: number;
+  /** 행별 스타일 (조건 필드명) */
+  rowClassNameField?: string;
+  /** 삭제 버튼 포함 */
+  withDelete?: boolean;
+  /** 복사 버튼 포함 */
+  withCopy?: boolean;
 }
 
 export interface ColumnConfig {
@@ -39,7 +47,7 @@ export interface ColumnConfig {
   /** 라벨 */
   label: string;
   /** 컬럼 타입 */
-  type?: 'rowNo' | 'title' | 'money' | 'date' | 'dateTime' | 'user' | 'selectable' | 'custom';
+  type?: 'rowNo' | 'title' | 'money' | 'date' | 'dateTime' | 'user' | 'selectable' | 'image' | 'bbsTitle' | 'custom';
   /** 정렬 */
   align?: 'left' | 'center' | 'right';
   /** 너비 */
@@ -48,6 +56,10 @@ export interface ColumnConfig {
   itemRender?: string;
   /** 코드 변수명 (코드 변환시 사용) */
   codeVar?: string;
+  /** 이미지 타입 (ThumbPreview 또는 ImagePreview) */
+  imageType?: 'ThumbPreview' | 'ImagePreview';
+  /** className */
+  className?: string;
 }
 
 /**
@@ -139,6 +151,10 @@ function generateListDataGridCode(config: ListDataGridConfig): string {
     columns,
     onClickType = 'select',
     extraImports = [],
+    itemHeight,
+    rowClassNameField,
+    withDelete = false,
+    withCopy = false,
   } = config;
 
   // Import 생성
@@ -215,15 +231,21 @@ function generateImports(config: ListDataGridConfig, extraImports: string[] = []
   ];
 
   if (config.withFormHeader) {
-    imports.push(`import { Button, Flex } from "antd";`);
+    imports.push(`import { Button, Flex, Space, Divider } from "antd";`);
     imports.push(`import { IconDownload } from "components/icon";`);
   }
 
   imports.push(`import styled from "@emotion/styled";`);
   imports.push(`import { useI18n } from "hooks";`);
-  imports.push(`import React from "react";`);
+  imports.push(`import React, { useCallback, useState } from "react";`);
   imports.push(`import { PageLayout } from "styles/pageStyled";`);
   imports.push(`import { errorHandling } from "utils";`);
+
+  // 모달이나 삭제/복사 기능이 있을 때
+  if (config.withFormHeader || config.onClickType === 'modal' || config.withDelete || config.withCopy) {
+    imports.push(`import { alertDialog, confirmDialog } from "@core/components/dialogs";`);
+  }
+
   imports.push(`import { ${config.dtoType} } from "services";`);
 
   // Store import
@@ -231,12 +253,31 @@ function generateImports(config: ListDataGridConfig, extraImports: string[] = []
   imports.push(`import { ${config.storeName} } from "./${storeFileName}";`);
 
   // 컬럼 타입별 필요한 import
-  if (config.columns.some(c => c.type === 'money')) {
-    imports.push(`// import { formatterNumber } from "@core/utils"; // 금액 포맷 필요시`);
+  const hasMoney = config.columns.some(c => c.type === 'money');
+  const hasDate = config.columns.some(c => c.type === 'date' || c.type === 'dateTime');
+  const hasImage = config.columns.some(c => c.type === 'image');
+  const hasCode = config.columns.some(c => c.codeVar);
+
+  if (hasMoney || hasDate) {
+    imports.push(`import { formatterDate, formatterNumber } from "../../../../@core/utils";`);
+    imports.push(`import { DT_FORMAT } from "../../../../@types";`);
+  }
+
+  if (hasImage) {
+    const hasThumbPreview = config.columns.some(c => c.imageType === 'ThumbPreview');
+    const hasImagePreview = config.columns.some(c => c.imageType === 'ImagePreview');
+
+    if (hasThumbPreview && hasImagePreview) {
+      imports.push(`import { ImagePreview, ThumbPreview } from "../../../../components/common";`);
+    } else if (hasThumbPreview) {
+      imports.push(`import { ThumbPreview } from "../../../../components/common/ThumbPreview";`);
+    } else if (hasImagePreview) {
+      imports.push(`import { ImagePreview } from "../../../../components/common";`);
+    }
   }
-  if (config.columns.some(c => c.type === 'date' || c.type === 'dateTime')) {
-    imports.push(`// import { formatterDate } from "@core/utils"; // 날짜 포맷 필요시`);
-    imports.push(`// import { DT_FORMAT } from "@types"; // 날짜 포맷 필요시`);
+
+  if (hasCode) {
+    imports.push(`import { useCodeStore } from "stores";`);
   }
 
   // 추가 imports
@@ -313,15 +354,29 @@ function generateStoreConnections(config: ListDataGridConfig): string {
  * 컬럼 정의 생성
  */
 function generateColumnsDefinition(config: ListDataGridConfig): string {
-  const { storeName, columns, rowKey } = config;
+  const { storeName, columns, rowKey, withDelete, withCopy } = config;
 
   // 컬럼 배열 생성
   const columnItems = columns.map(col => {
-    const { key, label, type, align, width, itemRender, codeVar } = col;
+    const { key, label, type, align, width, itemRender, codeVar, imageType, className } = col;
 
     // itemRender가 있는 경우
     if (itemRender) {
-      return `    { key: "${key}", label: t("${label}")${width ? `, width: ${width}` : ''}${align ? `, align: "${align}"` : ''}, itemRender: ${itemRender} }`;
+      return `    { key: "${key}", label: t("${label}")${width ? `, width: ${width}` : ''}${align ? `, align: "${align}"` : ''}${className ? `, className: "${className}"` : ''}, itemRender: ${itemRender} }`;
+    }
+
+    // 이미지 타입
+    if (type === 'image') {
+      if (imageType === 'ThumbPreview') {
+        return `    { key: "${key}", label: t("${label}"), align: "center"${width ? `, width: ${width}` : ', width: 100'}, itemRender: ({ value }) => <ThumbPreview url={value?.prevewUrlCtnts} /> }`;
+      } else if (imageType === 'ImagePreview') {
+        return `    { key: "${key}", label: t("${label}"), align: "right"${width ? `, width: ${width}` : ', width: 80'}${className ? `, className: "${className}"` : ''}, itemRender: (item) => <ImagePreview files={item.values.${key}List} height={60} swap rotate zoom thumbList text /> }`;
+      }
+    }
+
+    // bbsTitle 타입
+    if (type === 'bbsTitle') {
+      return `    { key: "${key}", label: t("${label}"), type: "bbsTitle"${width ? `, width: ${width}` : ''} }`;
     }
 
     // 코드 변환이 필요한 경우
@@ -340,6 +395,22 @@ function generateColumnsDefinition(config: ListDataGridConfig): string {
 
   const hasCodeVar = columns.some(c => c.codeVar);
 
+  // 관리 버튼 컬럼
+  if (withDelete || withCopy) {
+    const actionButtons: string[] = [];
+    if (withCopy) actionButtons.push('handleCopy');
+    if (withDelete) actionButtons.push('handleDelete');
+
+    const actionColumn = `    { key: "", label: t("관리"), align: "center", width: ${actionButtons.length * 80 + 40}, itemRender: (item) => (
+      <Space size={8}>
+        ${withCopy ? `<Button size={"small"} variant={"outlined"} color={"primary"} onClick={() => handleCopy(item.values.${rowKey})}>{t("복사")}</Button>` : ''}
+        ${withDelete ? `<Button size={"small"} variant={"outlined"} color={"danger"} onClick={() => handleDelete(item.values.${rowKey})}>{t("삭제")}</Button>` : ''}
+      </Space>
+    ) }`;
+
+    columnItems.push(actionColumn);
+  }
+
   return `  const handleColumnsChange = React.useCallback(
     (columnIndex: number | null, { columns }: AXDGChangeColumnsInfo<DtoItem>) => {
       setListColWidths(columns.map((column) => column.width));
@@ -347,7 +418,7 @@ function generateColumnsDefinition(config: ListDataGridConfig): string {
     [setListColWidths],
   );
 
-  const { columns } = useDataGridColumns<DtoItem>(
+  const ${hasCodeVar ? '// 코드 의존성\n  ' : ''}{ columns } = useDataGridColumns<DtoItem>(
     [
       { key: "${rowKey}", label: t("번호"), type: "rowNo" },
 ${columnItems.join(',\n')}
@@ -362,7 +433,7 @@ ${columnItems.join(',\n')}
  * 이벤트 핸들러 생성
  */
 function generateEventHandlers(config: ListDataGridConfig): string {
-  const { storeName, onClickType, withExcel } = config;
+  const { storeName, onClickType, withExcel, withDelete, withCopy, rowKey } = config;
   const handlers: string[] = [];
 
   // 엑셀 다운로드 핸들러
@@ -379,6 +450,52 @@ function generateEventHandlers(config: ListDataGridConfig): string {
     );
   }
 
+  // 삭제 핸들러
+  if (withDelete) {
+    handlers.push(
+      `  const handleDelete = useCallback(
+    async (id: string) => {
+      try {
+        await confirmDialog({
+          content: "정말 삭제하시겠습니까?",
+        });
+
+        // TODO: Service.delete 호출
+        // await Service.delete({ ${rowKey}: id });
+        messageApi.info("삭제되었습니다.");
+        await callListApi({ pageNumber: 1 });
+      } catch (err) {
+        await errorHandling(err);
+      }
+    },
+    [callListApi, messageApi]
+  );`,
+    );
+  }
+
+  // 복사 핸들러
+  if (withCopy) {
+    handlers.push(
+      `  const handleCopy = useCallback(
+    async (id: string) => {
+      try {
+        await confirmDialog({
+          content: "해당 정보를 복사하시겠습니까?",
+        });
+
+        // TODO: Service.copy 호출
+        // const result = await Service.copy({ ${rowKey}: id });
+        messageApi.success("복사되었습니다.");
+        await callListApi();
+      } catch (err) {
+        await errorHandling(err);
+      }
+    },
+    [callListApi, messageApi]
+  );`,
+    );
+  }
+
   // onClickItem 핸들러
   if (onClickType === 'modal') {
     handlers.push(
@@ -407,7 +524,7 @@ function generateEventHandlers(config: ListDataGridConfig): string {
       try {
         // TODO: 링크 이동
         // const menu = MENUS_LIST.find((m) => m.progId === "TARGET_PAGE");
-        // if (menu) linkByMenu(menu, { id: params.item.${config.rowKey} });
+        // if (menu) linkByMenu(menu, ${rowKey}: params.item.${rowKey} });
       } catch (err) {
         await errorHandling(err);
       }
@@ -469,7 +586,7 @@ function generateFormHeader(config: ListDataGridConfig): string {
  * DataGrid Props 생성
  */
 function generateDataGridProps(config: ListDataGridConfig): string {
-  const { selectionMode, rowKey } = config;
+  const { selectionMode, rowKey, itemHeight, rowClassNameField } = config;
   const props: string[] = [
     `        onClick={onClickItem}`,
     `        page={{`,
@@ -501,6 +618,18 @@ function generateDataGridProps(config: ListDataGridConfig): string {
     );
   }
 
+  // 행 높이
+  if (itemHeight) {
+    props.push(`        itemHeight={${itemHeight}}`);
+  }
+
+  // 행별 스타일
+  if (rowClassNameField) {
+    props.push(`        getRowClassName={(ri, item) => {`);
+    props.push(`          return item.values.${rowClassNameField} === "Y" ? "highlight-row" : "";`);
+    props.push(`        }}`);
+  }
+
   return props.join('\n');
 }
 
@@ -512,6 +641,17 @@ function generateStyledComponents(config: ListDataGridConfig): string {
   flex: 1;
 \`;`;
 
+  if (config.rowClassNameField) {
+    styled = `const Container = styled.div\`
+  flex: 1;
+
+  .highlight-row {
+    background-color: #fffbe6;
+    color: var(--text-display-color);
+  }
+\`;`;
+  }
+
   if (config.withFormHeader) {
     styled += `
 const FormHeader = styled(PageLayout.FrameHeader)\`\`;`;

package/src/prompts/listdatagrid-usage.md

@@ -0,0 +1,1026 @@
+# ListDataGrid 생성 가이드
+
+이 프롬프트는 NH-FE-B 패턴의 ListDataGrid 컴포넌트를 자동 생성하는 방법을 안내합니다.
+
+## 사용자 요청 인식
+
+사용자가 다음과 같은 요청을 하면 이 가이드를 따르세요:
+- "ListDataGrid 만들어줘"
+- "데이터그리드 생성"
+- "목록 화면 만들어줘"
+- "컬럼 정의해줘"
+
+## 처리 단계
+
+### 1. 요구사항 파싱
+
+사용자 입력에서 다음 패턴을 추출:
+- **컬럼 타입**: `rowNo`, `title`, `money`, `date`, `dateTime`, `user`, `selectable`, `custom`
+- **기능**: `checkbox`, `modal`, `excel`, `delete`, `copy`
+- **선택 모드**: `single`, `multi`, `none`
+
+**예시:**
+```
+사용자: "ListDataGrid 만들어줘: rowNo title code:STATUS_CODE money date 관리버튼"
+
+파싱 결과:
+- rowNo: { key: "no", label: "번호", type: "rowNo" }
+- title: { key: "name", label: "이름", type: "title", width: 250 }
+- code:STATUS_CODE: { key: "statusCd", label: "상태", codeVar: "STATUS_CODE", align: "center", width: 100 }
+- money: { key: "amount", label: "금액", type: "money", align: "right", width: 120 }
+- date: { key: "creatDtm", label: "등록일", type: "date", width: 150 }
+- 관리버튼: { key: "", label: "관리", itemRender: customButtons }
+```
+
+### 2. 파일 경로 확인
+
+**현재 열린 파일 또는 지정된 경로 사용:**
+```
+/Users/kyle/Desktop/nh-fe-bo/src/pages/resources/{category}/{page}/ListDataGrid.tsx
+```
+
+### 3. Store 자동 감지
+
+동일한 경로에서 Store 파일을 찾습니다.
+
+**Store 파일 찾기:**
+1. `use*.ts` 패턴으로 파일 검색
+2. 찾은 Store에서 필요한 상태 추출
+
+**필요한 Store 상태:**
+```typescript
+// 읽기 전용
+const listColWidths = useStore((s) => s.listColWidths);
+const listSortParams = useStore((s) => s.listSortParams);
+const listData = useStore((s) => s.listData);
+const listPage = useStore((s) => s.listPage);
+const listSpinning = useStore((s) => s.listSpinning);
+
+// 쓰기
+const setListColWidths = useStore((s) => s.setListColWidths);
+const setListSortParams = useStore((s) => s.setListSortParams);
+const changeListPage = useStore((s) => s.changeListPage);
+const callListApi = useStore((s) => s.callListApi);
+
+// 선택적
+const selectedItem = useStore((s) => s.selectedItem);
+const setSelectedItem = useStore((s) => s.setSelectedItem);
+const listSelectedRowKey = useStore((s) => s.listSelectedRowKey);
+const setListSelectedRowKey = useStore((s) => s.setListSelectedRowKey);
+const programFn = useStore((s) => s.programFn);
+const callExcelDownloadApi = useStore((s) => s.callExcelDownloadApi);
+const excelSpinning = useStore((s) => s.excelSpinning);
+```
+
+### 4. Import 문 추가
+
+```typescript
+import { AXDGChangeColumnsInfo, AXDGClickParams } from "@axboot/datagrid";
+import { DataGrid } from "@core/components/DataGrid";
+import { useAntApp } from "@core/hooks";
+import { useContainerSize } from "@core/hooks/useContainerSize";
+import { useDataGridColumns } from "@core/hooks/useDataGridColumns";
+import { useDataGridSortedList } from "@core/hooks/useDataGridSortedList";
+import styled from "@emotion/styled";
+import { Button, Flex, Divider } from "antd";
+import { useI18n } from "hooks";
+import React, { useCallback } from "react";
+import { PageLayout } from "styles/pageStyled";
+import { errorHandling } from "utils";
+import { IconDownload } from "components/icon";
+```
+
+### 5. DTO 타입 정의
+
+```typescript
+// Service 타입을 확장하여 DtoItem 정의
+interface DtoItem extends [ServiceResponseType] {}
+
+interface Props {}
+```
+
+### 6. 컬럼 정의 (useDataGridColumns)
+
+```typescript
+const { columns } = useDataGridColumns<DtoItem>(
+  [
+    // 컬럼 정의 배열
+  ],
+  {
+    colWidths: listColWidths,
+    deps: [CODE_DEPENDENCIES], // 코드 사용 시 추가
+  }
+);
+```
+
+## 컬럼 타입별 정의 규칙
+
+### rowNo (행 번호)
+
+```typescript
+{
+  key: "no",
+  label: t("번호"),
+  type: "rowNo"
+}
+```
+
+### title (제목 - 클릭 가능)
+
+```typescript
+{
+  key: "name",
+  label: t("이름"),
+  type: "title",
+  width: 250,
+  align: "left"
+}
+```
+
+### money (금액)
+
+```typescript
+{
+  key: "amount",
+  label: t("금액"),
+  type: "money",
+  align: "right",
+  width: 120,
+  itemRender: ({ value }) => formatterNumber(value)
+}
+```
+
+### date (날짜)
+
+```typescript
+{
+  key: "creatDtm",
+  label: t("등록일"),
+  type: "date",
+  width: 150,
+  itemRender: ({ value }) => formatterDate(value, DT_FORMAT.DATE)
+}
+```
+
+### dateTime (날짜시간)
+
+```typescript
+{
+  key: "creatDtm",
+  label: t("등록일시"),
+  type: "dateTime",
+  width: 150,
+  itemRender: ({ value }) => formatterDate(value, DT_FORMAT.DATETIME)
+}
+```
+
+### user (사용자 정보)
+
+```typescript
+{
+  key: "crtrId",
+  label: t("등록자"),
+  type: "user",
+  width: 150,
+  itemRender: (item) => {
+    return `${item.values.crtrNm}(${item.values.crtrId})`;
+  }
+}
+```
+
+### code (코드 변환)
+
+```typescript
+{
+  key: "statusCd",
+  label: t("상태"),
+  align: "center",
+  width: 100,
+  itemRender: ({ value }) => {
+    return STATUS_CODE?.find(value)?.label;
+  }
+}
+```
+
+### selectable (클릭 가능한 링크)
+
+```typescript
+{
+  key: "prdNm",
+  label: t("제품명"),
+  align: "left",
+  width: 200,
+  type: "selectable",
+}
+```
+
+### image (이미지 미리보기)
+
+**ThumbPreview (썸네일):**
+```typescript
+{
+  key: "imageFlInfo",
+  label: t("이미지"),
+  align: "center",
+  width: 100,
+  itemRender: ({ value }) => {
+    return <ThumbPreview url={value?.prevewUrlCtnts} />;
+  },
+}
+```
+
+**ImagePreview (이미지 리스트):**
+```typescript
+{
+  key: "imageFlCnt",
+  label: t("포토"),
+  align: "right",
+  width: 80,
+  className: "selectable",
+  itemRender: (item) => {
+    return <ImagePreview files={item.values.imageFlInfoList} height={60} swap rotate zoom thumbList text />;
+  },
+}
+```
+
+**Import 추가:**
+```typescript
+import { ImagePreview } from "../../../../components/common";
+// 또는
+import { ThumbPreview } from "../../../../components/common/ThumbPreview";
+```
+
+### bbsTitle (게시판 제목)
+
+```typescript
+{
+  key: "bbscttSjNm",
+  label: t("제목"),
+  type: "bbsTitle"
+}
+```
+
+### custom (사용자 정의)
+
+```typescript
+{
+  key: "action",
+  label: t("관리"),
+  align: "center",
+  width: 150,
+  itemRender: (item) => {
+    return (
+      <Flex gap={6} justify={"center"}>
+        <Button size={"small"} onClick={() => handleAction(item.values.id)}>
+          {t("버튼")}
+        </Button>
+      </Flex>
+    );
+  }
+}
+```
+
+### Space를 사용한 여러 버튼
+
+```typescript
+{
+  key: "",
+  label: t("관리"),
+  align: "center",
+  width: 120,
+  itemRender: (item) => {
+    return (
+      <Space size={8}>
+        <Button size={"small"} variant={"outlined"} color={"primary"} onClick={() => handleCopy(item.values.id)}>
+          {t("복사")}
+        </Button>
+        <Button size={"small"} variant={"outlined"} color={"danger"} onClick={() => handleDelete(item.values.id)}>
+          {t("삭제")}
+        </Button>
+      </Space>
+    );
+  },
+}
+```
+
+### 조건부 렌더링
+
+```typescript
+{
+  key: "status",
+  label: t("상태"),
+  align: "center",
+  width: 100,
+  itemRender: (item) => {
+    const code = item.values.statusCd;
+    if (code === "01") {
+      return <span style={{ color: "green" }}>활성</span>;
+    } else if (code === "02") {
+      return <span style={{ color: "red" }}>비활성</span>;
+    }
+    return "-";
+  }
+}
+```
+
+### 복합 필드 렌더링
+
+```typescript
+{
+  key: "period",
+  label: t("기간"),
+  align: "center",
+  width: 200,
+  itemRender: (item) => {
+    if (item.values.periodType === "01") {
+      return `${formatterDate(item.values.startDate)}~${formatterDate(item.values.endDate)}`;
+    } else if (item.values.periodType === "02") {
+      return `지급 후 ${item.values.days}일까지`;
+    }
+    return "제한없음";
+  }
+}
+```
+
+## FormHeader 패턴
+
+### 기본 FormHeader
+
+```typescript
+<FormHeader>
+  {t("목록")}
+  <Flex gap={6} align={"center"}>
+    {programFn?.fn02 && (
+      <Button size={"small"} type={"primary"} onClick={handleAdd}>
+        {t("등록")}
+      </Button>
+    )}
+  </Flex>
+</FormHeader>
+```
+
+### 엑셀 다운로드 포함
+
+```typescript
+<FormHeader>
+  {t("목록")}
+  <Flex gap={6} align={"center"}>
+    {programFn?.fn02 && (
+      <Button size={"small"} type={"primary"} onClick={handleAdd}>
+        {t("등록")}
+      </Button>
+    )}
+    <Divider type={"vertical"} />
+    {programFn?.fn04 && (
+      <Button size={"small"} icon={<IconDownload />} onClick={handleExcelDownload} loading={excelSpinning}>
+        {t("엑셀다운로드")}
+      </Button>
+    )}
+  </Flex>
+</FormHeader>
+```
+
+### 여러 액션 포함
+
+```typescript
+<FormHeader>
+  {t("현황")}
+  <Flex gap={6} align={"center"}>
+    <Button onClick={handleReward}>{t("지급")}</Button>
+    <Button onClick={handleAdd} type={"primary"}>
+      {t("등록")}
+    </Button>
+  </Flex>
+</FormHeader>
+```
+
+### Form 포함 (결과 내 재검색)
+
+```typescript
+<FormHeader>
+  목록
+  <Flex gap={6} align={"center"} justify={"flex-end"}>
+    <Form<any>
+      className={"SIR"}
+      form={form}
+      layout={"horizontal"}
+      colon={false}
+      onValuesChange={onValuesChange}
+      initialValues={{ rsltSrchwrdType: "PRD_NM" }}
+    >
+      <Row gutter={8} align={"middle"}>
+        <Col>
+          <Form.Item name={"rsltSrchwrdType"}>
+            <Select
+              style={{ width: "100px" }}
+              options={[
+                { label: t("제품명"), value: "PRD_NM" },
+                { label: t("제품코드"), value: "PRD_CD" },
+              ]}
+            />
+          </Form.Item>
+        </Col>
+        <Col>
+          <Form.Item name={"rsltSrchwrd"}>
+            <Input />
+          </Form.Item>
+        </Col>
+        <Col>
+          <Button size={"small"} type={"primary"} onClick={onSearch}>
+            {t("결과 내 재검색")}
+          </Button>
+        </Col>
+      </Row>
+    </Form>
+    <Divider type={"vertical"} />
+    {programFn?.fn02 && (
+      <>
+        <Divider type={"vertical"} />
+        <Button size={"small"} type={"primary"} onClick={() => handleStatus("전시")}>
+          {t("전시")}
+        </Button>
+        <Button size={"small"} type={"primary"} onClick={() => handleStatus("비전시")}>
+          {t("비전시")}
+        </Button>
+      </>
+    )}
+  </Flex>
+</FormHeader>
+```
+
+**Import 추가:**
+```typescript
+import { Col, Divider, Form, Input, Row, Select } from "antd";
+```
+
+**Props 추가:**
+```typescript
+interface Props {
+  form: FormInstance<any>;
+  onValuesChange: (requestValue, changedValues?) => void;
+  onSearch: () => void;
+}
+```
+
+**Styled 컴포넌트:**
+```typescript
+const FormHeader = styled(PageLayout.FrameHeader)`
+  .SIR .ant-form-item {
+    margin-bottom: 0;
+  }
+`;
+```
+
+## DataGrid Props 패턴
+
+### 기본 DataGrid
+
+```typescript
+<DataGrid<DtoItem>
+  frozenColumnIndex={0}
+  width={containerWidth}
+  height={containerHeight}
+  columns={columns}
+  data={sortedListData}
+  spinning={listSpinning}
+  page={{
+    ...listPage,
+    loading: false,
+    onChange: async (currentPage, pageSize) => {
+      await changeListPage(currentPage, pageSize);
+    },
+  }}
+  sort={{
+    sortParams: listSortParams,
+    onChange: setListSortParams,
+  }}
+  onChangeColumns={handleColumnsChange}
+/>
+```
+
+### 선택 포함
+
+```typescript
+<DataGrid<DtoItem>
+  // ... 기본 props
+  rowKey={"id"}
+  selectedRowKey={selectedItem?.id ?? ""}
+  onClick={onClickItem}
+/>
+```
+
+### 체크박스 포함
+
+```typescript
+<DataGrid<DtoItem>
+  // ... 기본 props
+  rowChecked={{
+    checkedRowKeys,
+    onChange: (checkedIndexes, checkedRowKeys, checkedAll) => {
+      setCheckedRowKeys(checkedRowKeys);
+    },
+  }}
+/>
+```
+
+### getRowClassName (행별 스타일)
+
+```typescript
+<DataGrid<DtoItem>
+  // ... 기본 props
+  getRowClassName={(ri, item) => {
+    return item.values.noticeYn === "Y" ? "notice-row" : "";
+  }}
+/>
+```
+
+**Styled 컴포넌트:**
+```typescript
+const Container = styled.div`
+  flex: 1;
+
+  .notice-row {
+    background-color: #fffbe6;
+    color: var(--text-display-color);
+  }
+`;
+```
+
+### itemHeight (행 높이 지정)
+
+```typescript
+<DataGrid<DtoItem
+  // ... 기본 props
+  itemHeight={60}
+/>
+```
+
+## 이벤트 핸들러 패턴
+
+### handleColumnsChange
+
+```typescript
+const handleColumnsChange = React.useCallback(
+  (columnIndex: number | null, { columns }: AXDGChangeColumnsInfo<DtoItem>) => {
+    setListColWidths(columns.map((column) => column.width));
+  },
+  [setListColWidths]
+);
+```
+
+### onClickItem (모달 오픈)
+
+```typescript
+const onClickItem = React.useCallback(
+  async (params: AXDGClickParams<DtoItem>) => {
+    try {
+      // 특정 컬럼 클릭 시 무시
+      if (params.columnIndex === columnIndex) {
+        return false;
+      }
+
+      const data = await openFormModal({
+        query: params.item,
+      });
+
+      if (data.save) {
+        messageApi.success(t("저장되었습니다."));
+        await callListApi();
+      } else if (data.delete) {
+        messageApi.info(t("삭제되었습니다."));
+        await callListApi({ pageNumber: 1 });
+      }
+    } catch (err) {
+      await errorHandling(err);
+    }
+  },
+  [callListApi, messageApi, t]
+);
+```
+
+### handleAdd
+
+```typescript
+const handleAdd = React.useCallback(async () => {
+  try {
+    await setSelectedItem({ __status__: "C" });
+  } catch (err) {
+    await errorHandling(err);
+  }
+}, [setSelectedItem]);
+```
+
+### handleDelete
+
+```typescript
+const handleDelete = useCallback(
+  async (id: number) => {
+    try {
+      await confirmDialog({
+        content: "정말 삭제하시겠습니까?",
+      });
+
+      await Service.delete({ id });
+      messageApi.info("삭제되었습니다.");
+      await callListApi({ pageNumber: 1 });
+    } catch (err) {
+      await errorHandling(err);
+    }
+  },
+  [callListApi, messageApi]
+);
+```
+
+### handleCopy
+
+```typescript
+const handleCopy = useCallback(
+  async (id: number) => {
+    try {
+      await confirmDialog({
+        content: "해당 정보를 복사하시겠습니까?",
+      });
+
+      const result = await Service.copy({ id });
+      const data = await openFormModal({
+        query: result.rs,
+        copyYn: true,
+      });
+
+      if (data.save) {
+        messageApi.success(t("저장되었습니다."));
+        await callListApi();
+      }
+    } catch (err) {
+      await errorHandling(err);
+    }
+  },
+  [callListApi, messageApi, t]
+);
+```
+
+### handleExcelDownload
+
+```typescript
+const handleExcelDownload = useCallback(async () => {
+  try {
+    await callExcelDownloadApi();
+    messageApi.success("엑셀 다운로드가 완료되었습니다.");
+  } catch (err) {
+    await errorHandling(err);
+  }
+}, [callExcelDownloadApi, messageApi]);
+```
+
+## Styled 컴포넌트
+
+### 기본 컨테이너
+
+```typescript
+const Container = styled.div`
+  flex: 1;
+`;
+```
+
+### 링크 스타일 포함
+
+```typescript
+const Container = styled.div`
+  flex: 1;
+  .selectable {
+    text-decoration: underline;
+    color: ${(p) => p.theme.link_hover_color};
+  }
+`;
+```
+
+### 테마 오버라이드
+
+```typescript
+const Container = styled.div`
+  flex: 1;
+
+  [role="ax-datagrid"] {
+    --axdg-body-bg: #fff !important;
+    --axdg-body-hover-bg: #f6f6f6 !important;
+  }
+`;
+```
+
+### FormHeader
+
+```typescript
+const FormHeader = styled(PageLayout.FrameHeader)``;
+```
+
+## 필수 확인 사항
+
+1. **타입 정의:**
+   - `interface DtoItem extends [ServiceType] {}`
+
+2. **Store 상태:**
+   - `listColWidths`, `listSortParams`, `listData`, `listPage`, `listSpinning`
+   - `setListColWidths`, `setListSortParams`, `changeListPage`
+   - 필요에 따라 `selectedItem`, `setSelectedItem`, `callListApi`
+
+3. **필수 Hooks:**
+   - `useContainerSize()`: containerRef, containerWidth, containerHeight
+   - `useDataGridColumns<DtoItem>()`: columns 정의
+   - `useDataGridSortedList<DtoItem>()`: 정렬된 데이터
+
+4. **DataGrid 필수 Props:**
+   - `frozenColumnIndex={0}`
+   - `width`, `height`
+   - `columns`, `data`
+   - `spinning`
+   - `page`, `sort`, `onChangeColumns`
+
+## 예시 응답
+
+### 케이스 1: 기본 목록 (rowNo + title + date)
+
+**사용자:** "ListDataGrid 만들어줘: rowNo title code:STATUS_CODE date"
+
+```typescript
+// 완전한 컴포넌트 코드 생성
+import { AXDGChangeColumnsInfo, AXDGClickParams } from "@axboot/datagrid";
+import { DataGrid } from "@core/components/DataGrid";
+import { useContainerSize } from "@core/hooks/useContainerSize";
+import { useDataGridColumns } from "@core/hooks/useDataGridColumns";
+import { useDataGridSortedList } from "@core/hooks/useDataGridSortedList";
+import { formatterDate } from "@core/utils";
+import styled from "@emotion/styled";
+import { useI18n } from "hooks";
+import React from "react";
+import { PageLayout } from "styles/pageStyled";
+import { errorHandling } from "utils";
+import { useCodeStore } from "stores";
+import { DT_FORMAT } from "@types";
+import { useXxxStore } from "./useXxxStore";
+
+interface DtoItem extends XxxRes {}
+
+interface Props {}
+
+export function ListDataGrid({}: Props) {
+  const { t } = useI18n();
+
+  const listColWidths = useXxxStore((s) => s.listColWidths);
+  const listSortParams = useXxxStore((s) => s.listSortParams);
+  const listData = useXxxStore((s) => s.listData);
+  const listPage = useXxxStore((s) => s.listPage);
+  const listSpinning = useXxxStore((s) => s.listSpinning);
+  const setListColWidths = useXxxStore((s) => s.setListColWidths);
+  const setListSortParams = useXxxStore((s) => s.setListSortParams);
+  const changeListPage = useXxxStore((s) => s.changeListPage);
+
+  const STATUS_CODE = useCodeStore((s) => s.STATUS_CODE);
+
+  const { containerRef, width: containerWidth, height: containerHeight } = useContainerSize();
+
+  const handleColumnsChange = React.useCallback(
+    (columnIndex: number | null, { columns }: AXDGChangeColumnsInfo<DtoItem>) => {
+      setListColWidths(columns.map((column) => column.width));
+    },
+    [setListColWidths]
+  );
+
+  const { columns } = useDataGridColumns<DtoItem>(
+    [
+      { key: "no", label: t("번호"), type: "rowNo" },
+      { key: "name", label: t("이름"), type: "title", width: 250 },
+      {
+        key: "statusCd",
+        label: t("상태"),
+        align: "center",
+        width: 100,
+        itemRender: ({ value }) => STATUS_CODE?.find(value)?.label
+      },
+      {
+        key: "creatDtm",
+        label: t("등록일"),
+        type: "date",
+        width: 150,
+        itemRender: ({ value }) => formatterDate(value, DT_FORMAT.DATE)
+      },
+    ],
+    {
+      colWidths: listColWidths,
+      deps: [STATUS_CODE],
+    }
+  );
+
+  const sortedListData = useDataGridSortedList<DtoItem>(listData, listSortParams);
+
+  return (
+    <Container ref={containerRef}>
+      <DataGrid<DtoItem>
+        frozenColumnIndex={0}
+        width={containerWidth}
+        height={containerHeight}
+        columns={columns}
+        data={sortedListData}
+        spinning={listSpinning}
+        page={{
+          ...listPage,
+          loading: false,
+          onChange: async (currentPage, pageSize) => {
+            await changeListPage(currentPage, pageSize);
+          },
+        }}
+        sort={{
+          sortParams: listSortParams,
+          onChange: setListSortParams,
+        }}
+        onChangeColumns={handleColumnsChange}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  flex: 1;
+`;
+```
+
+### 케이스 2: 관리 버튼 포함 (등록 + 엑셀 + 삭제/복사)
+
+**사용자:** "ListDataGrid 만들어줘: rowNo title money 관리:복사,삭제 excel"
+
+```typescript
+// FormHeader 추가 및 관리 버튼 컬럼 포함
+// 위 케이스 1에 다음 추가:
+
+// 1. FormHeader
+<FormHeader>
+  {t("목록")}
+  <Flex gap={6} align={"center"}>
+    {programFn?.fn02 && (
+      <Button size={"small"} type={"primary"} onClick={handleAdd}>
+        {t("등록")}
+      </Button>
+    )}
+    <Divider type={"vertical"} />
+    {programFn?.fn04 && (
+      <Button size={"small"} icon={<IconDownload />} onClick={handleExcelDownload} loading={excelSpinning}>
+        {t("엑셀다운로드")}
+      </Button>
+    )}
+  </Flex>
+</FormHeader>
+
+// 2. 관리 컬럼 추가
+{
+  key: "",
+  label: t("관리"),
+  align: "center",
+  width: 150,
+  itemRender: (item) => {
+    return (
+      <Flex gap={6} justify={"center"}>
+        <Button size='small' onClick={() => handleCopy(item.values.id)}>
+          {t("복사")}
+        </Button>
+        <Button
+          size='small'
+          variant={"outlined"}
+          color={"danger"}
+          onClick={() => handleDelete(item.values.id)}
+        >
+          {t("삭제")}
+        </Button>
+      </Flex>
+    );
+  }
+}
+```
+
+### 케이스 3: 체크박스 포함
+
+**사용자:** "ListDataGrid 만들어줘: checkbox rowNo title date"
+
+```typescript
+// Store 상태 추가
+const checkedRowKeys = useXxxStore((s) => s.checkedRowKeys);
+const setCheckedRowKeys = useXxxStore((s) => s.setCheckedRowKeys);
+
+// DataGrid에 rowChecked 추가
+<DataGrid<DtoItem>
+  // ... 기본 props
+  rowChecked={{
+    checkedRowKeys,
+    onChange: (checkedIndexes, checkedRowKeys, checkedAll) => {
+      setCheckedRowKeys(checkedRowKeys);
+    },
+  }}
+/>
+```
+
+### 케이스 4: 사용자 정의 렌더링
+
+**사용자:** "ListDataGrid 만들어줘: rowNo title 기간(시작일~종료일) 상태(활성/비활성 색상)"
+
+```typescript
+const { columns } = useDataGridColumns<DtoItem>(
+  [
+    { key: "no", label: t("번호"), type: "rowNo" },
+    { key: "name", label: t("이름"), type: "title", width: 250 },
+    {
+      key: "period",
+      label: t("기간"),
+      align: "center",
+      width: 200,
+      itemRender: (item) => {
+        if (item.values.periodType === "01") {
+          return `${formatterDate(item.values.startDate, "YYYY-MM-DD")}~${formatterDate(item.values.endDate, "YYYY-MM-DD")}`;
+        } else if (item.values.periodType === "02") {
+          return `지급 후 ${item.values.days}일까지`;
+        }
+        return "제한없음";
+      }
+    },
+    {
+      key: "status",
+      label: t("상태"),
+      align: "center",
+      width: 100,
+      itemRender: (item) => {
+        const code = item.values.statusCd;
+        if (code === "01") {
+          return <span style={{ color: "green", fontWeight: "bold" }}>활성</span>;
+        } else if (code === "02") {
+          return <span style={{ color: "red" }}>비활성</span>;
+        }
+        return "-";
+      }
+    },
+  ],
+  {
+    colWidths: listColWidths,
+  }
+);
+```
+
+## 복잡한 itemRender 패턴
+
+### 복수 조건 분기
+
+```typescript
+itemRender: (item) => {
+  const { field1, field2, field3 } = item.values;
+
+  if (field1 === "A" && field2 === "X") {
+    return "A-X";
+  } else if (field1 === "B") {
+    return `B: ${formatterNumber(field3)}원`;
+  } else if (field1 === "C") {
+    return (
+      <Button size={"small"} onClick={() => handleClick(field3)}>
+        {t("상세보기")}
+      </Button>
+    );
+  }
+  return "-";
+}
+```
+
+### 배열 매핑
+
+```typescript
+itemRender: (item) => {
+  const tags = item.values.tags || [];
+  return (
+    <Flex gap={4}>
+      {tags.map((tag, idx) => (
+        <span key={idx} style={{ padding: "2px 8px", background: "#f0f0f0", borderRadius: "4px" }}>
+          {tag.label}
+        </span>
+      ))}
+    </Flex>
+  );
+}
+```
+
+### 중첩 필드 접근
+
+```typescript
+itemRender: (item) => {
+  const user = item.values.user;
+  const dept = item.values.department;
+  return (
+    <div>
+      <div>{user?.name || "-"}</div>
+      <div style={{ fontSize: "12px", color: "#888" }}>{dept?.deptNm || ""}</div>
+    </div>
+  );
+}
+```
+
+## 주의사항
+
+1. **코드 사용 시 useCodeStore에서 반드시 import:** `import { useCodeStore } from "stores";`
+2. **DTO 타입은 Service 응답 타입을 확장:** `interface DtoItem extends XxxRes {}`
+3. **itemRender에서 값 접근:** `item.values.fieldName` 또는 `item.value`
+4. **컬럼 너비는 colWidths로 관리:** `useDataGridColumns`의 `colWidths` 옵션 사용
+5. **onClickItem에서 특정 컬럼 무시:** `params.columnIndex === X` 체크
+6. **에러 처리는 errorHandling 함수 사용:** 모든 비동기 함수에서 try-catch