@axboot-mcp/mcp-server 1.0.0

package/src/handlers/generate-listdatagrid.ts

@@ -0,0 +1,521 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * ListDataGrid 컴포넌트 생성 도구
+ * NH-FE-B 패턴 기반 ListDataGrid.tsx 파일을 생성합니다.
+ */
+export interface GenerateListDataGridParams {
+  /** 생성할 ListDataGrid 파일 경로 (절대 경로) */
+  outputPath: string;
+  /** ListDataGrid 설정 */
+  config: ListDataGridConfig;
+}
+
+export interface ListDataGridConfig {
+  /** Store 이름 (예: useProductListStore) */
+  storeName: string;
+  /** DTO 타입 (예: ProductRes) */
+  dtoType: string;
+  /** 행 키 (예: id, prdCd) */
+  rowKey: string;
+  /** 선택 모드 */
+  selectionMode?: 'single' | 'multi' | 'none';
+  /** FormHeader 포함 여부 */
+  withFormHeader?: boolean;
+  /** 엑셀 다운로드 포함 여부 */
+  withExcel?: boolean;
+  /** 컬럼 정의 */
+  columns: ColumnConfig[];
+  /** onClickItem 동작 타입 */
+  onClickType?: 'modal' | 'link' | 'select' | 'none';
+  /** 추가적인 import */
+  extraImports?: string[];
+}
+
+export interface ColumnConfig {
+  /** 컬럼 키 (DTO 필드명) */
+  key: string;
+  /** 라벨 */
+  label: string;
+  /** 컬럼 타입 */
+  type?: 'rowNo' | 'title' | 'money' | 'date' | 'dateTime' | 'user' | 'selectable' | 'custom';
+  /** 정렬 */
+  align?: 'left' | 'center' | 'right';
+  /** 너비 */
+  width?: number;
+  /** itemRender 코드 (사용자 정의 렌더링) */
+  itemRender?: string;
+  /** 코드 변수명 (코드 변환시 사용) */
+  codeVar?: string;
+}
+
+/**
+ * ListDataGrid 컴포넌트 생성
+ */
+export async function generateListDataGrid(params: GenerateListDataGridParams): Promise<{
+  content: Array<{ type: string; text: string }>;
+}> {
+  const { outputPath, config } = params;
+
+  // 코드 생성
+  const code = generateListDataGridCode(config);
+
+  // 파일에 쓰기
+  const dir = path.dirname(outputPath);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+  fs.writeFileSync(outputPath, code, 'utf-8');
+
+  return {
+    content: [
+      {
+        type: 'text',
+        text: JSON.stringify({
+          success: true,
+          outputPath,
+          message: `ListDataGrid 파일이 생성되었습니다: ${outputPath}`,
+          nextSteps: `
+## 다음 단계
+
+### 1. App.tsx에 ListDataGrid import 추가
+\`\`\`typescript
+import { ListDataGrid } from "./ListDataGrid";
+\`\`\`
+
+### 2. Store에 필요한 상태/액션 확인
+다음 상태가 Store에 있는지 확인하세요:
+
+**필수:**
+- listColWidths, listSortParams, listData, listPage, listSpinning
+- setListColWidths, setListSortParams, changeListPage
+
+**단일 선택 모드 시:**
+- selectedItem, setSelectedItem
+
+**다중 선택 모드 시:**
+- checkedRowKeys, setCheckedRowKeys
+
+**엑셀 다운로드 시:**
+- excelSpinning, callExcelDownloadApi
+
+### 3. 컬럼 정의 완료
+생성된 코드에서 컬럼 배열을 완성하세요:
+\`\`\`typescript
+const { columns } = useDataGridColumns<DtoItem>(
+  [
+    { key: "${config.rowKey}", label: t("번호"), type: "rowNo" },
+    // TODO: 여기에 컬럼 추가
+    ${config.columns.map(c => `{ key: "${c.key}", label: t("${c.label}")${c.type ? `, type: "${c.type}"` : ''}${c.width ? `, width: ${c.width}` : ''}${c.align ? `, align: "${c.align}"` : ''} }`).join('\n    ')}
+  ],
+  {
+    colWidths: listColWidths,
+    ${config.columns.some(c => c.codeVar) ? `deps: [${config.columns.filter(c => c.codeVar).map(c => c.codeVar).join(', ')}],` : ''}
+  }
+);
+\`\`\`
+
+### 4. onClickItem 핸들러 구현
+onClickType이 "${config.onClickType || 'select'}"이므로 필요한 동작을 구현하세요.
+          `.trim(),
+        }),
+      },
+    ],
+  };
+}
+
+/**
+ * ListDataGrid 코드 생성
+ */
+function generateListDataGridCode(config: ListDataGridConfig): string {
+  const {
+    storeName,
+    dtoType,
+    rowKey,
+    selectionMode = 'none',
+    withFormHeader = false,
+    withExcel = false,
+    columns,
+    onClickType = 'select',
+    extraImports = [],
+  } = config;
+
+  // Import 생성
+  const imports = generateImports(config, extraImports);
+
+  // Interface 생성
+  const interfaces = generateInterfaces(config);
+
+  // Store 연결
+  const storeConnections = generateStoreConnections(config);
+
+  // 컬럼 정의
+  const columnsDefinition = generateColumnsDefinition(config);
+
+  // 이벤트 핸들러
+  const eventHandlers = generateEventHandlers(config);
+
+  // FormHeader
+  const formHeader = generateFormHeader(config);
+
+  // DataGrid props
+  const dataGridProps = generateDataGridProps(config);
+
+  // Styled Components
+  const styledComponents = generateStyledComponents(config);
+
+  return `${imports}
+
+${interfaces}
+
+export function ListDataGrid({}: Props) {
+  const { t } = useI18n();${withFormHeader || withExcel ? `
+  const { messageApi } = useAntApp();` : ''}
+
+${storeConnections}
+
+${eventHandlers}
+
+${columnsDefinition}
+
+  const sortedListData = useDataGridSortedList<DtoItem>(listData, listSortParams);
+
+  return (
+${formHeader}
+    <Container ref={containerRef}>
+      <DataGrid<DtoItem>
+        frozenColumnIndex={0}
+        width={containerWidth}
+        height={containerHeight}
+        columns={columns}
+        data={sortedListData}
+        spinning={listSpinning}
+${dataGridProps}
+      />
+    </Container>${withFormHeader ? '\n    </>' : ''}
+  );
+}
+
+${styledComponents}
+`;
+}
+
+/**
+ * Import 생성
+ */
+function generateImports(config: ListDataGridConfig, extraImports: string[] = []): string {
+  const imports: string[] = [
+    `import { AXDGChangeColumnsInfo, AXDGClickParams } from "@axboot/datagrid";`,
+    `import { DataGrid } from "@core/components/DataGrid";`,
+    `import ${config.withFormHeader || config.withExcel ? `{ useAntApp } from "@core/hooks";` : `""// { useAntApp } from "@core/hooks";`}${config.withFormHeader || config.withExcel ? '' : ' // 필요시 추가'}`,
+    `import { useDataGridColumns } from "@core/hooks/useDataGridColumns";`,
+    `import { useDataGridSortedList } from "@core/hooks/useDataGridSortedList";`,
+    `import { useContainerSize } from "@core/hooks/useContainerSize";`,
+  ];
+
+  if (config.withFormHeader) {
+    imports.push(`import { Button, Flex } 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 { PageLayout } from "styles/pageStyled";`);
+  imports.push(`import { errorHandling } from "utils";`);
+  imports.push(`import { ${config.dtoType} } from "services";`);
+
+  // Store import
+  const storeFileName = config.storeName.replace(/^use/, '');
+  imports.push(`import { ${config.storeName} } from "./${storeFileName}";`);
+
+  // 컬럼 타입별 필요한 import
+  if (config.columns.some(c => c.type === 'money')) {
+    imports.push(`// import { formatterNumber } from "@core/utils"; // 금액 포맷 필요시`);
+  }
+  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"; // 날짜 포맷 필요시`);
+  }
+
+  // 추가 imports
+  if (extraImports.length > 0) {
+    imports.push(...extraImports);
+  }
+
+  return imports.join('\n');
+}
+
+/**
+ * Interface 생성
+ */
+function generateInterfaces(config: ListDataGridConfig): string {
+  return `interface DtoItem extends ${config.dtoType} {}
+
+interface Props {}`;
+}
+
+/**
+ * Store 연결 생성
+ */
+function generateStoreConnections(config: ListDataGridConfig): string {
+  const { storeName, selectionMode, withExcel } = config;
+
+  const connections: string[] = [
+    `  const listColWidths = ${storeName}((s) => s.listColWidths);`,
+    `  const listSortParams = ${storeName}((s) => s.listSortParams);`,
+    `  const listData = ${storeName}((s) => s.listData);`,
+    `  const listPage = ${storeName}((s) => s.listPage);`,
+    `  const listSpinning = ${storeName}((s) => s.listSpinning);`,
+    `  const setListColWidths = ${storeName}((s) => s.setListColWidths);`,
+    `  const setListSortParams = ${storeName}((s) => s.setListSortParams);`,
+    `  const changeListPage = ${storeName}((s) => s.changeListPage);`,
+  ];
+
+  // programFn
+  connections.push(`  const programFn = ${storeName}((s) => s.programFn);`);
+
+  // 선택 모드별 추가 연결
+  if (selectionMode === 'single') {
+    connections.push(
+      ``,
+      `  // 단일 선택`,
+      `  const selectedItem = ${storeName}((s) => s.selectedItem);`,
+      `  const setSelectedItem = ${storeName}((s) => s.setSelectedItem);`,
+    );
+  } else if (selectionMode === 'multi') {
+    connections.push(
+      ``,
+      `  // 다중 선택`,
+      `  const checkedRowKeys = ${storeName}((s) => s.checkedRowKeys);`,
+      `  const setCheckedRowKeys = ${storeName}((s) => s.setCheckedRowKeys);`,
+    );
+  }
+
+  // 엑셀 다운로드
+  if (withExcel) {
+    connections.push(
+      ``,
+      `  // 엑셀 다운로드`,
+      `  const excelSpinning = ${storeName}((s) => s.excelSpinning);`,
+      `  const callExcelDownloadApi = ${storeName}((s) => s.callExcelDownloadApi);`,
+    );
+  }
+
+  // Container
+  connections.push(`  const { containerRef, width: containerWidth, height: containerHeight } = useContainerSize();`);
+
+  return connections.join('\n');
+}
+
+/**
+ * 컬럼 정의 생성
+ */
+function generateColumnsDefinition(config: ListDataGridConfig): string {
+  const { storeName, columns, rowKey } = config;
+
+  // 컬럼 배열 생성
+  const columnItems = columns.map(col => {
+    const { key, label, type, align, width, itemRender, codeVar } = col;
+
+    // itemRender가 있는 경우
+    if (itemRender) {
+      return `    { key: "${key}", label: t("${label}")${width ? `, width: ${width}` : ''}${align ? `, align: "${align}"` : ''}, itemRender: ${itemRender} }`;
+    }
+
+    // 코드 변환이 필요한 경우
+    if (codeVar) {
+      return `    { key: "${key}", label: t("${label}")${width ? `, width: ${width}` : ''}${align ? `, align: "${align}"` : ''}, itemRender: ({ value }) => ${codeVar}?.find(value)?.label ?? value }`;
+    }
+
+    // 타입이 있는 경우
+    if (type) {
+      return `    { key: "${key}", label: t("${label}"), type: "${type}"${width ? `, width: ${width}` : ''}${align ? `, align: "${align}"` : ''} }`;
+    }
+
+    // 기본
+    return `    { key: "${key}", label: t("${label}")${width ? `, width: ${width}` : ''}${align ? `, align: "${align}"` : ''} }`;
+  });
+
+  const hasCodeVar = columns.some(c => c.codeVar);
+
+  return `  const handleColumnsChange = React.useCallback(
+    (columnIndex: number | null, { columns }: AXDGChangeColumnsInfo<DtoItem>) => {
+      setListColWidths(columns.map((column) => column.width));
+    },
+    [setListColWidths],
+  );
+
+  const { columns } = useDataGridColumns<DtoItem>(
+    [
+      { key: "${rowKey}", label: t("번호"), type: "rowNo" },
+${columnItems.join(',\n')}
+    ],
+    {
+      colWidths: listColWidths,${hasCodeVar ? '\n      deps: [' + columns.filter(c => c.codeVar).map(c => c.codeVar!).join(', ') + '],' : ''}
+    }
+  );`;
+}
+
+/**
+ * 이벤트 핸들러 생성
+ */
+function generateEventHandlers(config: ListDataGridConfig): string {
+  const { storeName, onClickType, withExcel } = config;
+  const handlers: string[] = [];
+
+  // 엑셀 다운로드 핸들러
+  if (withExcel) {
+    handlers.push(
+      `  const handleExcelDownload = React.useCallback(async () => {
+    try {
+      await callExcelDownloadApi();
+      messageApi.success("엑셀 다운로드가 완료되었습니다.");
+    } catch (err) {
+      await errorHandling(err);
+    }
+  }, [callExcelDownloadApi, messageApi]);`,
+    );
+  }
+
+  // onClickItem 핸들러
+  if (onClickType === 'modal') {
+    handlers.push(
+      ``,
+      `  const onClickItem = React.useCallback(
+    async (params: AXDGClickParams<DtoItem>) => {
+      try {
+        // TODO: 모달 열기
+        // const data = await openFormModal({ query: params.item });
+        // if (data.save) {
+        //   messageApi.info("저장되었습니다.");
+        //   await callListApi();
+        // }
+      } catch (err) {
+        await errorHandling(err);
+      }
+    },
+    [callListApi, messageApi],
+  );`,
+    );
+  } else if (onClickType === 'link') {
+    handlers.push(
+      ``,
+      `  const onClickItem = React.useCallback(
+    async (params: AXDGClickParams<DtoItem>) => {
+      try {
+        // TODO: 링크 이동
+        // const menu = MENUS_LIST.find((m) => m.progId === "TARGET_PAGE");
+        // if (menu) linkByMenu(menu, { id: params.item.${config.rowKey} });
+      } catch (err) {
+        await errorHandling(err);
+      }
+    },
+    [],
+  );`,
+    );
+  } else if (onClickType === 'select') {
+    const { selectionMode } = config;
+    if (selectionMode === 'single') {
+      handlers.push(
+        ``,
+        `  const onClickItem = React.useCallback(
+    async (params: AXDGClickParams<DtoItem>) => {
+      try {
+        await setSelectedItem(params.item);
+      } catch (err) {
+        await errorHandling(err);
+      }
+    },
+    [setSelectedItem],
+  );`,
+      );
+    }
+  }
+
+  return handlers.join('\n');
+}
+
+/**
+ * FormHeader 생성
+ */
+function generateFormHeader(config: ListDataGridConfig): string {
+  if (!config.withFormHeader) {
+    return '    <>';
+  }
+
+  const { withExcel } = config;
+
+  let buttons = '';
+  if (withExcel) {
+    buttons = `
+        {programFn?.fn04 && (
+          <Button size={"small"} icon={<IconDownload />} onClick={handleExcelDownload} loading={excelSpinning}>
+            {t("엑셀다운로드")}
+          </Button>
+        )}`;
+  }
+
+  return `    <>
+      <FormHeader>
+        목록
+        <Flex gap={6} align={"center"}>${buttons}
+        </Flex>
+      </FormHeader>`;
+}
+
+/**
+ * DataGrid Props 생성
+ */
+function generateDataGridProps(config: ListDataGridConfig): string {
+  const { selectionMode, rowKey } = config;
+  const props: string[] = [
+    `        onClick={onClickItem}`,
+    `        page={{`,
+    `          ...listPage,`,
+    `          loading: false,`,
+    `          onChange: async (currentPage, pageSize) => {`,
+    `            await changeListPage(currentPage, pageSize);`,
+    `          },`,
+    `        }}`,
+    `        sort={{`,
+    `          sortParams: listSortParams,`,
+    `          onChange: setListSortParams,`,
+    `        }}`,
+    `        onChangeColumns={handleColumnsChange}`,
+    `        rowKey={"${rowKey}"}`,
+  ];
+
+  // 선택 모드별 props
+  if (selectionMode === 'single') {
+    props.push(`        selectedRowKey={selectedItem?.${rowKey} ?? ""}`);
+  } else if (selectionMode === 'multi') {
+    props.push(
+      `        rowChecked={{`,
+      `          checkedRowKeys,`,
+      `          onChange: (checkedIndexes, checkedRowKeys, checkedAll) => {`,
+      `            setCheckedRowKeys(checkedRowKeys);`,
+      `          },`,
+      `        }}`,
+    );
+  }
+
+  return props.join('\n');
+}
+
+/**
+ * Styled Components 생성
+ */
+function generateStyledComponents(config: ListDataGridConfig): string {
+  let styled = `const Container = styled.div\`
+  flex: 1;
+\`;`;
+
+  if (config.withFormHeader) {
+    styled += `
+const FormHeader = styled(PageLayout.FrameHeader)\`\`;`;
+  }
+
+  return styled;
+}