@axboot-mcp/mcp-server 1.0.0 → 1.0.6

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