@axboot-mcp/mcp-server 1.0.0

package/src/docs//354/202/254/354/232/251/353/262/225//355/231/224/353/251/264/352/265/254/354/204/261-/355/203/200/354/236/205/353/263/204-/352/260/234/353/260/234/354/210/234/354/204/234.md

@@ -0,0 +1,1805 @@
+# 화면 구성 타입별 개발순서 가이드
+
+AXBoot 프로젝트에서 화면을 개발할 때, 화면 구성 타입에 따라 체계적인 개발 순서를 제시하는 가이드입니다. 실제 NH 프로젝트의 화면들을 분석하여 타입별로 분류하고 각각의 개발 순서를 정리했습니다.
+
+## 목차
+1. [화면 구성 타입 분류](#화면-구성-타입-분류)
+   - [기본 화면 타입 (6가지)](#기본-화면-타입-6가지)
+   - [확장 화면 타입 (20가지)](#확장-화면-타입-20가지)
+2. [타입별 개발 순서](#타입별-개발-순서)
+3. [확장 타입별 개발 순서](#확장-타입별-개발-순서)
+4. [공통 개발 패턴](#공통-개발-패턴)
+5. [체크리스트](#체크리스트)
+
+## 화면 구성 타입 분류
+
+### 기본 화면 타입 (6가지)
+
+### 1. 📋 목록 관리형 (List Management)
+**특징**: 검색 + 목록 + 상세 정보 표시
+**예시**: 회원 관리, 쿠폰 관리, SEO 관리
+**대표 URL**: `/NH/member.list` (회원 관리)
+**구성요소**:
+- SearchParams (검색 폼)
+- ListDataGrid (목록 그리드)
+- DetailDrawer/Panel (상세 정보)
+
+![목록 관리형 화면](imgs/list-management-type.png)
+
+**주요 특징**:
+- 복합 검색 조건 (날짜범위, 검색구분, 다중선택 필터)
+- 페이징 처리된 목록 그리드
+- 선택 시 상세정보를 Drawer로 표시
+- 액션 버튼들 (포인트지급, 엑셀다운로드 등)
+
+### 2. 📊 대시보드형 (Dashboard)
+**특징**: 요약 정보 + 탭 + 차트/통계
+**예시**: 회원 대시보드
+**대표 URL**: `/NH/member.dashboard` (회원 대시보드)
+**구성요소**:
+- Summary (요약 정보)
+- Tabs (탭 네비게이션)
+- Charts/Statistics (차트 및 통계)
+
+![대시보드형 화면](imgs/dashboard-type.png)
+
+**주요 특징**:
+- 상단에 요약 통계 정보 표시
+- 탭으로 구분된 컨텐츠 영역
+- 기간별 데이터 표시
+- 차트 및 그래프 (선택 사항)
+
+### 3. 🌳 트리 관리형 (Tree Management)
+**특징**: 계층 구조 + 상세 폼
+**예시**: 카테고리 관리, 메뉴 관리
+**대표 URL**: `/NH/product.category-mng` (카테고리 관리)
+**구성요소**:
+- TreeView (계층 트리)
+- DetailForm (상세 폼)
+- ColResizer (컬럼 크기 조정)
+
+![트리 관리형 화면](imgs/tree-management-type.png)
+
+**주요 특징**:
+- 좌우 분할 레이아웃 (Tree + Form)
+- 드래그앤드롭으로 계층 구조 변경 가능
+- 컬럼 크기 조정 기능
+- 트리 노드별 액션 버튼 (추가/삭제)
+
+### 4. 📝 단일 폼형 (Single Form)
+**특징**: 하나의 폼으로 CRUD 처리
+**예시**: 시스템 설정, 배치 작업
+**대표 URL**: `/NH/system.clear-cache` (캐시 클리어)
+**구성요소**:
+- Form (단일 폼)
+- Action Buttons (액션 버튼)
+
+![단일 폼형 화면](imgs/single-form-type.png)
+
+**주요 특징**:
+- 단순한 설정이나 관리 기능
+- 하나의 카드 형태 폼
+- 저장/초기화 등 기본 액션 버튼
+- 유효성 검증 및 에러 처리
+
+### 5. 💬 게시판형 (Board/BBS)
+**특징**: 게시글 목록 + 상세 + 댓글
+**예시**: 공지사항, FAQ, 게시판
+**대표 URL**: `/NH/system.bbs` (시스템 게시판)
+**구성요소**:
+- ListDataGrid (게시글 목록)
+- PostDetail (게시글 상세)
+- Comments (댓글)
+
+![게시판형 화면](imgs/board-type.png)
+
+**주요 특징**:
+- 좌우 분할 레이아웃 (목록 + 상세)
+- 게시글 검색 기능
+- 댓글 시스템
+- 게시글 작성/수정 폼
+
+### 6. 🏠 홈/랜딩형 (Home/Landing)
+**특징**: 다양한 위젯과 정보를 종합 표시
+**예시**: 메인 홈
+**대표 URL**: `/NH/home` (홈 대시보드)
+**구성요소**:
+- Multiple Widgets
+- Quick Actions
+- Summary Cards
+
+![홈/랜딩형 화면](imgs/home-type.png)
+
+**주요 특징**:
+- 다양한 정보 위젯들의 조합
+- 빠른 액션 버튼들
+- 카드 형태의 요약 정보
+- 커스터마이징 가능한 레이아웃
+
+---
+
+## 타입별 개발 순서
+
+## 1. 📋 목록 관리형 (List Management) 개발 순서
+
+**대표 예시**: `member.list`, `benefit.coupon`, `system.seo`
+
+### Step 1: 기본 구조 설정
+```bash
+# 폴더 구조 생성
+your-feature/
+├── App.tsx                    # 메인 컨테이너
+├── ListDataGrid.tsx          # 목록 그리드
+├── useYourFeatureStore.ts    # Zustand Store
+└── index.ts                  # 내보내기
+```
+
+### Step 2: Store 개발 (핵심)
+```typescript
+// useYourFeatureStore.ts
+interface ListRequest extends ApiRequestType {
+  dateRange?: [string, string];
+  searchType?: string;
+  searchText?: string;
+}
+
+interface States {
+  listData: AXDGDataItem<DtoItem>[];
+  listSpinning: boolean;
+  listRequestValue: ListRequest;
+  selectedItem?: DtoItem;
+  // ... 기타 상태
+}
+
+interface Actions {
+  callListApi: (request?: ListRequest) => Promise<void>;
+  setListRequestValue: (value: ListRequest) => void;
+  setSelectedItem: (item?: DtoItem) => Promise<void>;
+  // ... 기타 액션
+}
+```
+
+### Step 3: 메인 App 컴포넌트
+```typescript
+// App.tsx
+export default function App() {
+  // 1. Store 구독
+  const store = useYourFeatureStore();
+
+  // 2. 검색 폼 설정
+  const [searchForm] = Form.useForm();
+
+  // 3. 생명주기 훅
+  useDidMountEffect(() => {
+    store.init();
+    store.callListApi();
+  });
+
+  // 4. 이벤트 핸들러
+  const handleSearch = useCallback(async () => {
+    await store.callListApi({ pageNumber: 1 });
+  }, []);
+
+  return (
+    <Container>
+      <Header>
+        <ProgramTitle />
+        <SearchParams
+          params={searchParams}
+          onSearch={handleSearch}
+        />
+      </Header>
+      <Body>
+        <ListDataGrid />
+      </Body>
+      <DetailDrawer />
+    </Container>
+  );
+}
+```
+
+### Step 4: SearchParams 정의
+```typescript
+const searchParams = [
+  // 날짜 범위
+  {
+    label: "기간",
+    name: "dateRange",
+    type: SearchParamType.DTPICKER_DATE_RANGE,
+    format: DT_FORMAT.DATE,
+    presetRender: DtPickerPresetRender({})
+  },
+
+  // 검색 구분 + 검색어
+  {
+    type: SearchParamType.GROUP,
+    children: [
+      {
+        label: "검색구분",
+        name: "searchType",
+        type: SearchParamType.SELECT,
+        options: searchTypeOptions
+      },
+      {
+        label: "검색어",
+        name: "searchText",
+        type: SearchParamType.INPUT,
+        placeholder: "검색어 입력"
+      }
+    ]
+  },
+
+  // 다중 선택 필터
+  {
+    label: "상태",
+    name: "statusFilter",
+    type: SearchParamType.SELECT_MULTI,
+    options: statusOptions,
+    checkAllItem: true
+  }
+];
+```
+
+### Step 5: ListDataGrid 구현
+```typescript
+// ListDataGrid.tsx
+export function ListDataGrid() {
+  const listData = useYourFeatureStore(s => s.listData);
+  const listPage = useYourFeatureStore(s => s.listPage);
+  const setSelectedItem = useYourFeatureStore(s => s.setSelectedItem);
+
+  const columns = [
+    { key: 'id', label: 'ID', width: 80 },
+    { key: 'name', label: '이름', width: 200 },
+    { key: 'status', label: '상태', width: 100 },
+    { key: 'createdAt', label: '등록일', width: 150 }
+  ];
+
+  return (
+    <AXDataGrid
+      data={listData}
+      columns={columns}
+      page={listPage}
+      onRowClick={(record) => setSelectedItem(record.values)}
+    />
+  );
+}
+```
+
+### Step 6: 상세 정보 (Drawer/Panel) 구현
+```typescript
+// DetailDrawer.tsx 또는 DetailPanel.tsx
+export function DetailDrawer({ open, onClose, selectedItem }) {
+  return (
+    <AXDrawer open={open} onClose={onClose}>
+      <AXDrawer.Header>
+        <h3>상세 정보</h3>
+      </AXDrawer.Header>
+      <AXDrawer.Body>
+        {selectedItem && (
+          <Form>
+            <Form.Item label="이름">
+              <Input value={selectedItem.name} readOnly />
+            </Form.Item>
+            {/* 기타 필드들 */}
+          </Form>
+        )}
+      </AXDrawer.Body>
+    </AXDrawer>
+  );
+}
+```
+
+---
+
+## 2. 📊 대시보드형 (Dashboard) 개발 순서
+
+**대표 예시**: `member.dashboard`
+
+### Step 1: 기본 구조 설정
+```bash
+your-dashboard/
+├── App.tsx           # 메인 대시보드
+├── Summary.tsx       # 요약 정보
+├── PanelIndex.tsx    # 탭 컨텐츠 라우터
+├── PanelPg1.tsx      # 첫 번째 탭
+├── PanelPg2.tsx      # 두 번째 탭
+└── useStore.ts       # 대시보드 Store
+```
+
+### Step 2: 대시보드 Store 개발
+```typescript
+// useDashboardStore.ts
+interface States {
+  activeTabKey: string;
+  summaryData: SummaryData;
+  summarySpinning: boolean;
+  // 탭별 데이터
+  tab1Data: Tab1Data[];
+  tab2Data: Tab2Data[];
+}
+
+interface Actions {
+  setActiveTabKey: (key: string) => void;
+  callSummaryApi: () => Promise<void>;
+  callTab1Api: () => Promise<void>;
+  callTab2Api: () => Promise<void>;
+}
+```
+
+### Step 3: 메인 App 컴포넌트
+```typescript
+// App.tsx
+export default function App() {
+  const store = useDashboardStore();
+
+  const handleSearch = useCallback(async () => {
+    await Promise.all([
+      store.callSummaryApi(),
+      store.callTab1Api(),
+      store.callTab2Api()
+    ]);
+  }, []);
+
+  return (
+    <Container>
+      <Header>
+        <ProgramTitle />
+        <Button onClick={handleSearch}>검색</Button>
+        <Summary />
+      </Header>
+
+      <PageTabBar>
+        <Tabs
+          items={tabItems}
+          activeKey={store.activeTabKey}
+          onChange={store.setActiveTabKey}
+        />
+      </PageTabBar>
+
+      <PanelIndex contentType={store.activeTabKey} />
+    </Container>
+  );
+}
+```
+
+### Step 4: Summary 컴포넌트
+```typescript
+// Summary.tsx
+export function Summary() {
+  const summaryData = useDashboardStore(s => s.summaryData);
+  const summarySpinning = useDashboardStore(s => s.summarySpinning);
+
+  return (
+    <Descriptions loading={summarySpinning}>
+      <Descriptions.Item label="전체">{summaryData.total}</Descriptions.Item>
+      <Descriptions.Item label="활성">{summaryData.active}</Descriptions.Item>
+      <Descriptions.Item label="비활성">{summaryData.inactive}</Descriptions.Item>
+    </Descriptions>
+  );
+}
+```
+
+### Step 5: 탭별 Panel 구현
+```typescript
+// PanelIndex.tsx
+export function PanelIndex({ contentType }: { contentType: string }) {
+  switch (contentType) {
+    case 'tab1':
+      return <Tab1Panel />;
+    case 'tab2':
+      return <Tab2Panel />;
+    default:
+      return <div>선택된 탭이 없습니다.</div>;
+  }
+}
+```
+
+---
+
+## 3. 🌳 트리 관리형 (Tree Management) 개발 순서
+
+**대표 예시**: `product.category-mng`, `display.gnb-menu`
+
+### Step 1: 기본 구조 설정
+```bash
+your-tree/
+├── App.tsx              # 메인 컨테이너
+├── TreeList.tsx         # 트리 컴포넌트
+├── DetailForm.tsx       # 상세 폼
+├── useTreeStore.ts      # Tree Store
+└── utils/
+    └── treeUtils.ts     # 트리 유틸리티
+```
+
+### Step 2: Tree Store 개발
+```typescript
+// useTreeStore.ts
+interface States {
+  treeData: TreeNode[];
+  selectedItem?: TreeNode;
+  expandedKeys: React.Key[];
+  flexGrow: number;
+}
+
+interface Actions {
+  callTreeApi: () => Promise<void>;
+  setSelectedItem: (item?: TreeNode) => Promise<void>;
+  setExpandedKeys: (keys: React.Key[]) => void;
+  setFlexGrow: (width: number) => void;
+  handleAddNode: (parentKey?: number) => Promise<void>;
+  handleDelNode: (key: number) => Promise<void>;
+}
+```
+
+### Step 3: 메인 App 컴포넌트 (분할 레이아웃)
+```typescript
+// App.tsx
+export default function App() {
+  const store = useTreeStore();
+  const resizerContainerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <Container>
+      <Header>
+        <ProgramTitle />
+      </Header>
+
+      <Body ref={resizerContainerRef}>
+        {/* 왼쪽: 트리 */}
+        <Frame style={{ flex: `0 1 ${store.flexGrow}px`, minWidth: "400px" }}>
+          <TreeList />
+        </Frame>
+
+        {/* 구분자 */}
+        <ColResizer
+          containerRef={resizerContainerRef}
+          onResize={store.setFlexGrow}
+        />
+
+        {/* 오른쪽: 상세 폼 */}
+        <Frame style={{ minWidth: "500px" }}>
+          {store.selectedItem ? <DetailForm /> : <EmptyMsg />}
+        </Frame>
+      </Body>
+    </Container>
+  );
+}
+```
+
+### Step 4: TreeList 구현
+```typescript
+// TreeList.tsx
+export function TreeList() {
+  const treeData = useTreeStore(s => s.treeData);
+  const selectedItem = useTreeStore(s => s.selectedItem);
+  const expandedKeys = useTreeStore(s => s.expandedKeys);
+  const setExpandedKeys = useTreeStore(s => s.setExpandedKeys);
+  const handleClickTreeItem = useTreeStore(s => s.handleClickTreeItem);
+  const handleAddNode = useTreeStore(s => s.handleAddNode);
+  const handleDelNode = useTreeStore(s => s.handleDelNode);
+
+  return (
+    <TreeContainer>
+      <Tree
+        treeData={treeData}
+        selectedKeys={selectedItem ? [selectedItem.id] : []}
+        expandedKeys={expandedKeys}
+        onExpand={setExpandedKeys}
+        titleRender={(nodeData) => (
+          <TreeNode onClick={(e) => handleClickTreeItem(e, nodeData)}>
+            <div role="tools">
+              <Tooltip title="추가">
+                <IconAdd onClick={(e) => {
+                  e.stopPropagation();
+                  handleAddNode(nodeData.key);
+                }} />
+              </Tooltip>
+              <Tooltip title="삭제">
+                <IconBin onClick={(e) => {
+                  e.stopPropagation();
+                  handleDelNode(nodeData.key);
+                }} />
+              </Tooltip>
+            </div>
+            {nodeData.title}
+          </TreeNode>
+        )}
+      />
+    </TreeContainer>
+  );
+}
+```
+
+---
+
+## 4. 📝 단일 폼형 (Single Form) 개발 순서
+
+**대표 예시**: `system.clear-cache`, `system.isms-env-config`
+
+### Step 1: 기본 구조 설정
+```bash
+your-form/
+├── App.tsx           # 메인 폼 컨테이너
+├── FormFields.tsx    # 폼 필드 구성
+├── useFormStore.ts   # 폼 Store
+└── validations.ts    # 유효성 검증
+```
+
+### Step 2: Form Store 개발
+```typescript
+// useFormStore.ts
+interface SaveRequest {
+  // 폼 필드들
+}
+
+interface States {
+  saveRequestValue: SaveRequest;
+  saveSpinning: boolean;
+  formMode: 'view' | 'edit' | 'create';
+}
+
+interface Actions {
+  setSaveRequestValue: (value: SaveRequest) => void;
+  callLoadApi: () => Promise<void>;
+  callSaveApi: (data: SaveRequest) => Promise<void>;
+  setFormMode: (mode: 'view' | 'edit' | 'create') => void;
+}
+```
+
+### Step 3: 메인 App 컴포넌트
+```typescript
+// App.tsx
+export default function App() {
+  const store = useFormStore();
+  const [form] = Form.useForm();
+
+  const handleSave = useCallback(async () => {
+    try {
+      await form.validateFields();
+      const values = form.getFieldsValue();
+      await store.callSaveApi(values);
+      message.success('저장되었습니다.');
+    } catch (error) {
+      await errorHandling(error);
+    }
+  }, [form, store]);
+
+  return (
+    <Container>
+      <Header>
+        <ProgramTitle />
+        <Space>
+          <Button onClick={handleSave} loading={store.saveSpinning}>
+            저장
+          </Button>
+          <Button onClick={() => form.resetFields()}>
+            초기화
+          </Button>
+        </Space>
+      </Header>
+
+      <Body>
+        <FormCard>
+          <Form
+            form={form}
+            layout="vertical"
+            initialValues={store.saveRequestValue}
+            onValuesChange={(_, values) => store.setSaveRequestValue(values)}
+          >
+            <FormFields />
+          </Form>
+        </FormCard>
+      </Body>
+    </Container>
+  );
+}
+```
+
+---
+
+## 5. 💬 게시판형 (Board/BBS) 개발 순서
+
+**대표 예시**: `system.bbs`, `cs.faq`
+
+### Step 1: 기본 구조 설정
+```bash
+your-bbs/
+├── App.tsx              # 메인 컨테이너
+├── ListDataGrid.tsx     # 게시글 목록
+├── PostDetail.tsx       # 게시글 상세
+├── FormSet.tsx          # 게시글 폼
+├── comments/
+│   ├── BbsComments.tsx  # 댓글 목록
+│   └── BbsCommentList.tsx
+└── useBbsStore.ts       # 게시판 Store
+```
+
+### Step 2: BBS Store 개발
+```typescript
+// useBbsStore.ts
+interface States {
+  listData: PostItem[];
+  selectedPost?: PostItem;
+  comments: CommentItem[];
+  formActive: boolean;
+  saveRequestValue: SaveRequest;
+}
+
+interface Actions {
+  callListApi: () => Promise<void>;
+  setSelectedPost: (post?: PostItem) => void;
+  callSaveApi: (data: SaveRequest) => Promise<void>;
+  callDeleteApi: (postId: number) => Promise<void>;
+  setFormActive: (active: boolean) => void;
+  // 댓글 관련
+  callCommentsApi: (postId: number) => Promise<void>;
+  addComment: (comment: CommentData) => Promise<void>;
+}
+```
+
+### Step 3: 메인 App 컴포넌트 (좌우 분할)
+```typescript
+// App.tsx
+export default function App() {
+  const store = useBbsStore();
+  const [form] = Form.useForm();
+
+  return (
+    <Container>
+      <Header>
+        <ProgramTitle />
+        <SearchParams />
+      </Header>
+
+      <Body>
+        {/* 왼쪽: 목록 */}
+        <Frame>
+          <FrameHeader>
+            게시글 목록
+            <Button onClick={() => store.setFormActive(true)}>
+              새 게시글
+            </Button>
+          </FrameHeader>
+          <ListDataGrid />
+        </Frame>
+
+        {/* 오른쪽: 상세/폼 */}
+        <Frame>
+          {store.formActive ? (
+            <PostForm form={form} />
+          ) : (
+            <PostDetail />
+          )}
+        </Frame>
+      </Body>
+    </Container>
+  );
+}
+```
+
+---
+
+## 공통 개발 패턴
+
+### 1. 필수 파일 구조
+```bash
+your-feature/
+├── App.tsx                 # 메인 컨테이너 (필수)
+├── ListDataGrid.tsx        # 목록 그리드 (목록형)
+├── useFeatureStore.ts      # Zustand Store (필수)
+├── types.ts                # 타입 정의 (선택)
+└── components/             # 하위 컴포넌트들
+```
+
+### 2. Store 개발 패턴
+```typescript
+// 모든 Store의 공통 구조
+interface States extends MetaData {
+  // 로딩 상태
+  listSpinning: boolean;
+  saveSpinning: boolean;
+  deleteSpinning: boolean;
+
+  // 데이터 상태
+  listData: DataItem[];
+  selectedItem?: DataItem;
+  saveRequestValue: SaveRequest;
+
+  // UI 상태
+  listRequestValue: ListRequest;
+  listPage: AXDGPage;
+  checkedRowKeys: React.Key[];
+}
+
+interface Actions extends PageStoreActions<States> {
+  // API 호출
+  callListApi: (request?: ListRequest) => Promise<void>;
+  callSaveApi: (data: SaveRequest) => Promise<void>;
+  callDeleteApi: (id: number) => Promise<void>;
+
+  // 상태 변경
+  setListRequestValue: (value: ListRequest) => void;
+  setSelectedItem: (item?: DataItem) => void;
+  setSaveRequestValue: (value: SaveRequest) => void;
+}
+```
+
+### 3. 생명주기 패턴
+```typescript
+// 모든 App 컴포넌트의 공통 생명주기
+export default function App() {
+  const store = useYourStore();
+
+  // 마운트 시 초기화
+  useDidMountEffect(() => {
+    (async () => {
+      try {
+        await store.init();
+        await store.callListApi(); // 또는 초기 데이터 로딩
+      } catch (error) {
+        await errorHandling(error);
+      }
+    })();
+  });
+
+  // 언마운트 시 정리
+  useUnmountEffect(() => {
+    store.destroy();
+  });
+
+  // URL 파라미터 처리 (선택)
+  const [searchParams] = useSearchParams();
+  const paramId = searchParams.get("id");
+
+  useEffect(() => {
+    if (paramId) {
+      // 파라미터 기반 초기화
+    }
+  }, [paramId]);
+
+  // 컴포넌트 렌더링
+  return <div>...</div>;
+}
+```
+
+### 4. 에러 처리 패턴
+```typescript
+// 모든 비동기 작업의 공통 에러 처리
+const handleApiCall = useCallback(async () => {
+  try {
+    setSpinning(true);
+    await apiCall();
+    message.success('성공했습니다.');
+  } catch (error) {
+    await errorHandling(error);
+  } finally {
+    setSpinning(false);
+  }
+}, [dependencies]);
+```
+
+---
+
+## 체크리스트
+
+### 📋 목록 관리형 체크리스트
+
+#### Store 개발
+- [ ] ListRequest, DtoItem, SaveRequest 인터페이스 정의
+- [ ] MetaData 인터페이스 정의 (영속화 데이터)
+- [ ] States, Actions 인터페이스 정의
+- [ ] callListApi 구현 (페이징, 정렬, 필터링)
+- [ ] setSelectedItem 구현 (상세 정보 로딩)
+- [ ] 메타데이터 구독 설정 (탭 상태 유지)
+
+#### 검색 기능
+- [ ] SearchParams 배열 정의
+- [ ] 날짜 범위 검색 (DTPICKER_DATE_RANGE)
+- [ ] 검색어 구분 + 검색어 (GROUP)
+- [ ] 다중 선택 필터 (SELECT_MULTI, CHECKBOX)
+- [ ] 라디오 버튼 필터 (RADIO)
+- [ ] 검색 조건 초기값 설정
+
+#### 목록 그리드
+- [ ] 컬럼 정의 (key, label, width, formatter)
+- [ ] 페이징 설정
+- [ ] 정렬 기능
+- [ ] 행 선택 기능
+- [ ] 체크박스 선택 (필요시)
+- [ ] 더블클릭 이벤트
+
+#### 상세 정보
+- [ ] Drawer 또는 Panel 구현
+- [ ] 상세 정보 폼 구성
+- [ ] 편집 모드 지원 (필요시)
+- [ ] 저장/삭제 기능 (필요시)
+
+#### 추가 기능
+- [ ] 엑셀 다운로드
+- [ ] 일괄 처리 (선택 항목 대상)
+- [ ] 권한 체크 (programFn)
+- [ ] URL 파라미터 처리
+
+### 📊 대시보드형 체크리스트
+
+#### Store 개발
+- [ ] 탭별 데이터 상태 정의
+- [ ] activeTabKey 상태 관리
+- [ ] 각 탭별 API 호출 액션
+- [ ] Summary API 호출 액션
+
+#### Summary 컴포넌트
+- [ ] 요약 데이터 표시 (Descriptions)
+- [ ] 로딩 상태 처리
+- [ ] 숫자 포맷팅
+- [ ] 기간 정보 표시
+
+#### 탭 구성
+- [ ] Tabs 컴포넌트 설정
+- [ ] 탭별 Panel 컴포넌트 구현
+- [ ] PanelIndex 라우터 구현
+- [ ] 탭 변경 시 데이터 로딩
+
+#### 차트/통계
+- [ ] Chart 라이브러리 연동
+- [ ] 데이터 변환 로직
+- [ ] 반응형 크기 조정
+
+### 🌳 트리 관리형 체크리스트
+
+#### Store 개발
+- [ ] TreeNode 인터페이스 정의
+- [ ] treeData 상태 관리
+- [ ] expandedKeys 상태 관리
+- [ ] flexGrow 상태 관리 (컬럼 크기)
+- [ ] 드래그앤드롭 처리 (필요시)
+
+#### 트리 컴포넌트
+- [ ] Tree 컴포넌트 설정
+- [ ] titleRender 커스터마이징
+- [ ] 노드별 액션 버튼 (추가/삭제)
+- [ ] 트리 데이터 변환 로직
+
+#### 상세 폼
+- [ ] 선택된 노드 정보 표시
+- [ ] 폼 필드 구성
+- [ ] 저장/삭제 기능
+- [ ] 유효성 검증
+
+#### 레이아웃
+- [ ] ColResizer 구현
+- [ ] 좌우 분할 레이아웃
+- [ ] 최소 너비 설정
+- [ ] EmptyMsg 처리
+
+### 📝 단일 폼형 체크리스트
+
+#### Store 개발
+- [ ] SaveRequest 인터페이스 정의
+- [ ] formMode 상태 관리
+- [ ] callSaveApi, callLoadApi 구현
+
+#### 폼 구성
+- [ ] Form 컴포넌트 설정
+- [ ] FormFields 구성 요소
+- [ ] 초기값 설정
+- [ ] onValuesChange 핸들러
+
+#### 유효성 검증
+- [ ] 필드별 validation rules
+- [ ] 커스텀 validator 함수
+- [ ] 에러 메시지 처리
+
+#### 액션 버튼
+- [ ] 저장 버튼
+- [ ] 초기화 버튼
+- [ ] 권한별 버튼 표시 제어
+
+### 💬 게시판형 체크리스트
+
+#### Store 개발
+- [ ] PostItem, CommentItem 인터페이스 정의
+- [ ] formActive 상태 관리
+- [ ] 게시글 CRUD 액션
+- [ ] 댓글 관리 액션
+
+#### 목록 기능
+- [ ] 게시글 목록 표시
+- [ ] 검색 기능
+- [ ] 페이징 처리
+- [ ] 정렬 기능
+
+#### 상세/폼
+- [ ] 게시글 상세 표시
+- [ ] 게시글 작성/수정 폼
+- [ ] 에디터 연동 (필요시)
+- [ ] 첨부파일 처리 (필요시)
+
+#### 댓글 시스템
+- [ ] 댓글 목록 표시
+- [ ] 댓글 작성 폼
+- [ ] 대댓글 처리 (필요시)
+- [ ] 댓글 삭제 기능
+
+---
+
+## 마무리
+
+이 가이드를 통해 화면 구성 타입을 먼저 파악하고, 해당 타입에 맞는 개발 순서를 따라가면 일관성 있고 효율적인 개발이 가능합니다.
+
+### 🎯 핵심 포인트
+1. **타입 분류가 우선**: 화면의 성격을 먼저 파악하고 적절한 타입을 선택
+2. **Store부터 시작**: 비즈니스 로직과 상태 관리를 먼저 구현
+3. **컴포넌트는 단순하게**: UI 컴포넌트는 Store의 상태와 액션만 연결
+4. **체크리스트 활용**: 놓치기 쉬운 기능들을 체크리스트로 확인
+5. **공통 패턴 준수**: 프로젝트 전체의 일관성 유지
+
+---
+
+## 확장 화면 타입 (20가지)
+
+### 7. 🖼️ 이미지 썸네일 그리드 + 모달형 (Image Grid Modal)
+**특징**: 이미지 썸네일이 포함된 그리드 + FormModal을 통한 상세 관리
+**예시**: 배너 관리, 이미지 갤러리
+**대표 URL**: `/NH/system/app/banner` (앱 배너 관리)
+**구성요소**:
+- SearchParams (검색 폼)
+- ListDataGrid with ThumbPreview (썸네일 그리드)
+- FormModal (배너 등록/수정 모달)
+- SortModal (순서 관리 모달)
+
+![이미지 썸네일 그리드 모달형 화면](imgs/image-grid-modal-type.png)
+
+**주요 특징**:
+- 탭으로 구분된 위치별 배너 관리
+- 이미지 썸네일 미리보기
+- 모달을 통한 배너 등록/수정
+- 드래그앤드롭 순서 관리
+- 노출 기간 설정 기능
+
+### 8. 📝 일반 그리드 목록 + 모달형 (Grid Modal)
+**특징**: 일반 그리드 + FormModal을 통한 CRUD 처리
+**예시**: SEO 관리, 설정 관리
+**대표 URL**: `/NH/system/website/seo` (SEO 관리)
+**구성요소**:
+- SearchParams (날짜범위, 검색조건)
+- ListDataGrid (일반 목록 그리드)
+- FormModal (등록/수정 모달)
+
+![일반 그리드 모달형 화면](imgs/grid-modal-type.png)
+
+**주요 특징**:
+- 기간별 검색 필터
+- 제목/설명 검색 구분
+- 모달창을 통한 상세 등록/수정
+- 삭제 기능 포함
+
+### 9. ☑️ 체크박스 그리드 + 인라인 에디터형 (Checkbox Inline Editor)
+**특징**: 체크박스 선택 + 그리드 내 직접 편집
+**예시**: 금지어 관리
+**대표 URL**: `/NH/system/general/forbidden-word` (금지어 관리)
+**구성요소**:
+- SearchParams (검색 조건)
+- ListDataGrid with Checkbox (체크박스 그리드)
+- Inline Editor (인라인 편집)
+- Bulk Actions (일괄 처리)
+
+![체크박스 인라인 에디터형 화면](imgs/checkbox-inline-editor-type.png)
+
+**주요 특징**:
+- 체크박스로 다중 선택
+- 그리드 셀 내에서 직접 편집
+- 일괄 추가/삭제 기능
+- 실시간 저장
+
+### 10. 📄 타이틀 셀병합 그리드 + 모달 + 에디터형 (Title Merged Grid Modal Editor)
+**특징**: 셀 병합된 그리드 + 에디터가 포함된 모달
+**예시**: 이용약관 관리
+**대표 URL**: `/NH/system/general/terms-conditions` (이용약관 관리)
+**구성요소**:
+- SearchParams (복합 검색)
+- ListDataGrid with Merged Cells (셀 병합 그리드)
+- FormModal with Editor (에디터 모달)
+
+![타이틀 셀병합 그리드 모달 에디터형 화면](imgs/title-merged-grid-modal-editor-type.png)
+
+**주요 특징**:
+- 정책별 셀 병합 표시
+- 버전별 약관 관리
+- 에디터를 통한 약관 내용 편집
+- 기간별 검색 필터
+- 사용여부 관리
+
+### 11. ↔️ 좌우 그리드 목록형 (Dual Grid Layout)
+**특징**: 좌우 두 개의 그리드로 구성
+**예시**: 환경설정 관리
+**대표 URL**: `/NH/system/general/isms-env-config` (ISMS 환경설정)
+**구성요소**:
+- Left Grid (카테고리/그룹)
+- Right Grid (상세 항목)
+- SearchParams (필터링)
+
+![좌우 그리드 목록형 화면](imgs/dual-grid-layout-type.png)
+
+**주요 특징**:
+- 좌측 그리드에서 카테고리 선택
+- 우측 그리드에서 해당 카테고리의 상세 항목 표시
+- 연동된 필터링 시스템
+
+### 12. 📊 StatDataGrid 사용형 (Statistical Grid)
+**특징**: 통계 데이터를 위한 특수 그리드
+**예시**: 캐시 클리어
+**대표 URL**: `/NH/system/general/clear-cache` (캐시 클리어)
+**구성요소**:
+- StatDataGrid (통계용 그리드)
+- Action Buttons (실행 버튼)
+- Status Display (상태 표시)
+
+![통계 그리드형 화면](imgs/statistical-grid-type.png)
+
+**주요 특징**:
+- 캐시 통계 정보 표시
+- 실행 버튼을 통한 캐시 클리어
+- 실시간 상태 업데이트
+
+### 13. 🔐 좌그리드 + 우상세폼 + 하단상세형 (Grid Form Detail)
+**특징**: 3단 구성 - 그리드 + 상세폼 + 하단 상세 정보
+**예시**: 사용자 역할 관리
+**대표 URL**: `/NH/system/user-roles/roles` (역할 관리)
+**구성요소**:
+- Left Grid (역할 목록)
+- Right Form (역할 상세)
+- Bottom Detail (권한 상세)
+
+![그리드 폼 상세형 화면](imgs/grid-form-detail-type.png)
+
+**주요 특징**:
+- 3단 레이아웃 구성
+- 역할별 권한 관리
+- 계층적 정보 표시
+
+### 14. 👤 좌그리드 + 우상세폼형 (Grid Form)
+**특징**: 좌우 분할 - 그리드 + 상세 폼
+**예시**: 사용자 관리
+**대표 URL**: `/NH/system/user-roles/users` (사용자 관리)
+**구성요소**:
+- Left Grid (사용자 목록)
+- Right Form (사용자 상세 폼)
+
+![그리드 폼형 화면](imgs/grid-form-type.png)
+
+**주요 특징**:
+- 사용자 목록과 상세 정보 분할 표시
+- 실시간 연동
+- 폼 기반 상세 편집
+
+### 15. 📝 좌드래그박스 + 우상세폼 + 하단트리형 (Drag Box Form Tree)
+**특징**: 드래그 박스 + 상세 폼 + 트리 목록
+**예시**: 메뉴 관리
+**대표 URL**: `/NH/system/menu` (메뉴 관리)
+**구성요소**:
+- Left Drag Box (드래그 박스)
+- Right Form (메뉴 상세 폼)
+- Bottom Tree (하위 메뉴 트리)
+
+![드래그 박스 폼 트리형 화면](imgs/drag-box-form-tree-type.png)
+
+**주요 특징**:
+- 드래그앤드롭으로 메뉴 이동
+- 메뉴 상세 정보 편집
+- 계층적 메뉴 구조 관리
+
+### 16. ➕ 모달 행추가삭제형 (Modal Row Management)
+**특징**: 모달창에서 행 추가/삭제 기능
+**예시**: 부서 관리
+**대표 URL**: `/NH/b2b/mng-dept` (부서 관리)
+**구성요소**:
+- ListDataGrid (기본 목록)
+- FormModal with Row Actions (행 관리 모달)
+
+![모달 행추가삭제형 화면](imgs/modal-row-management-type.png)
+
+**주요 특징**:
+- 모달창 내에서 동적 행 추가/삭제
+- 실시간 데이터 업데이트
+- 일괄 저장 기능
+
+### 17. 🖼️ 모달 이미지업로드형 (Modal Image Upload)
+**특징**: 모달창에서 이미지 업로드 기능
+**예시**: 소개 사례
+**대표 URL**: `/NH/b2b/intro-case` (소개 사례)
+**구성요소**:
+- ListDataGrid (사례 목록)
+- FormModal with Image Upload (이미지 업로드 모달)
+
+![모달 이미지업로드형 화면](imgs/modal-image-upload-type.png)
+
+**주요 특징**:
+- 모달창에서 이미지 업로드/관리
+- 썸네일 미리보기
+- 다중 이미지 처리
+
+### 18. 📋 모달 내용테이블형 (Modal Content Table)
+**특징**: 모달창에서 테이블 형태 내용 표시
+**예시**: 견적 상담
+**대표 URL**: `/NH/b2b/estimate-consulting` (견적 상담)
+**구성요소**:
+- ListDataGrid (상담 목록)
+- FormModal with Content Table (내용 테이블 모달)
+
+![모달 내용테이블형 화면](imgs/modal-content-table-type.png)
+
+**주요 특징**:
+- 모달창에서 테이블 형태 내용 관리
+- 구조화된 데이터 입력
+- 동적 테이블 생성
+
+### 19. ✉️ 모달 추가삭제 기능형 (Modal Add Delete Function)
+**특징**: 함수 호출로 열리는 모달에서 추가/삭제 기능
+**예시**: 관리자 이메일
+**대표 URL**: `func://openAdminEmailsModal?type=report-center` (관리자 이메일 모달)
+**구성요소**:
+- Function-based Modal (함수 기반 모달)
+- Dynamic Content (동적 컨텐츠)
+- CRUD Operations (추가/삭제 기능)
+
+![모달 추가삭제 기능형 화면](imgs/modal-add-delete-function-type.png)
+
+**주요 특징**:
+- 프로그래매틱 모달 호출
+- 타입별 모달 컨텐츠 변경
+- 실시간 데이터 관리
+
+### 20. 🏢 체크박스 모달 드래그 서브항목형 (Checkbox Modal Drag Sub)
+**특징**: 체크박스 + 모달창에서 드래그 + 서브 항목 관리
+**예시**: 회사 연혁
+**대표 URL**: `NH/kdh/company-history` (회사 연혁)
+**구성요소**:
+- Checkbox Grid (체크박스 그리드)
+- FormModal with Drag (드래그 모달)
+- Sub Item Management (서브 항목 관리)
+
+![체크박스 모달 드래그 서브항목형 화면](imgs/checkbox-modal-drag-sub-type.png)
+
+**주요 특징**:
+- 체크박스로 다중 선택
+- 모달창에서 드래그앤드롭 순서 변경
+- 서브 항목 추가/삭제 기능
+
+### 21. 📋 탭 서브탭 일괄등록형 (Tab SubTab Bulk Register)
+**특징**: 탭과 서브탭을 통한 일괄 등록 시스템
+**예시**: 사업 영역
+**대표 URL**: `/NH/kdh/biz-area` (사업 영역)
+**구성요소**:
+- Main Tabs (메인 탭)
+- Sub Tabs (서브 탭)
+- Bulk Register Form (일괄 등록 폼)
+
+![탭 서브탭 일괄등록형 화면](imgs/tab-subtab-bulk-register-type.png)
+
+**주요 특징**:
+- 2단계 탭 네비게이션
+- 탭별 일괄 등록 기능
+- 카테고리별 데이터 관리
+
+### 22. 📁 모달 파일업로드형 (Modal File Upload)
+**특징**: 모달창에서 다양한 파일 업로드 방식
+**예시**: 디지털 상품, 아카이브 보고서, 공고사항, 사업보고서
+**대표 URL**:
+- `/NH/kdh/pr-center/digital-goods` (파일 업로드)
+- `/NH/kdh/sustainability/archive-reports` (단건 업로드)
+- `/NH/kdh/invest/public-notices` (드래그 업로드)
+- `/NH/kdh/invest/IR/business-reports` (고정 파일 업로드)
+
+**구성요소**:
+- ListDataGrid (파일 목록)
+- FormModal with File Upload (파일 업로드 모달)
+- Upload Variations (업로드 방식 선택)
+
+![모달 파일업로드형 화면](imgs/modal-file-upload-type.png)
+
+**주요 특징**:
+- 다중 파일 업로드
+- 단건 파일 업로드
+- 드래그앤드롭 업로드
+- 고정 파일 형식 업로드
+- 파일 미리보기
+
+### 23. 🎯 드로우모달형 (Draw Modal)
+**특징**: Drawer와 Modal이 결합된 형태
+**예시**: 회원 목록
+**대표 URL**: `/NH/member/member-list` (회원 목록)
+**구성요소**:
+- ListDataGrid (회원 목록)
+- DetailDrawer (상세 정보 drawer)
+- ActionModal (액션 모달)
+
+![드로우모달형 화면](imgs/draw-modal-type.png)
+
+**주요 특징**:
+- Drawer로 상세 정보 표시
+- 추가 액션을 위한 모달 팝업
+- 단계별 사용자 경험
+
+### 24. 🎪 모달 내 모달형 (Modal in Modal)
+**특징**: 모달창에서 또 다른 모달 호출
+**예시**: 타임딜, 상품 마스터, 상품 배송 설정
+**대표 URL**:
+- `/NH/benefit/time-deal` (타임딜)
+- `/NH/product/product-common/product-master` (상품 마스터)
+- `/NH/product/setting/product-delivery-config` (배송 설정)
+
+**구성요소**:
+- Primary Modal (1차 모달)
+- Secondary Modal (2차 모달)
+- Modal Stack Management (모달 스택 관리)
+
+![모달 내 모달형 화면](imgs/modal-in-modal-type.png)
+
+**주요 특징**:
+- 다단계 모달 시스템
+- 모달 스택 관리
+- 복잡한 워크플로우 처리
+
+### 25. 📑 모달 탭구현형 (Modal Tab Implementation)
+**특징**: 모달창 내에서 탭을 통한 기능 분리
+**예시**: 상품 마스터
+**대표 URL**: `/NH/product/product-common/product-master` (상품 마스터)
+**구성요소**:
+- FormModal (메인 모달)
+- Inner Tabs (모달 내 탭)
+- Tab Content Panels (탭별 컨텐츠)
+
+![모달 탭구현형 화면](imgs/modal-tab-implementation-type.png)
+
+**주요 특징**:
+- 모달 내 탭 네비게이션
+- 탭별 독립적 기능
+- 통합 저장 시스템
+
+### 26. ⚖️ 모달 데이터 좌우이동형 (Modal Data Transfer)
+**특징**: 모달창에서 데이터를 좌우로 이동하는 선택 시스템
+**예시**: 필터 설정
+**대표 URL**: `/NH/product/product-common/filter` (필터 설정)
+**구성요소**:
+- Source List (원본 목록)
+- Target List (대상 목록)
+- Transfer Controls (이동 컨트롤)
+- FormModal Container (모달 컨테이너)
+
+![모달 데이터 좌우이동형 화면](imgs/modal-data-transfer-type.png)
+
+**주요 특징**:
+- 좌우 데이터 이동 인터페이스
+- 다중 선택 및 이동
+- 검색 및 필터링
+- 순서 조정 기능
+
+### 27. 📊 모달 테이블드래그형 (Modal Table Drag)
+**특징**: 모달창 내에서 테이블 행의 드래그앤드롭 순서 변경
+**예시**: 추천 상품
+**대표 URL**: `/NH/display/personal/recommended-product` (추천 상품)
+**구성요소**:
+- FormModal (모달 컨테이너)
+- Draggable Table (드래그 가능 테이블)
+- Sort Controls (순서 제어)
+
+![모달 테이블드래그형 화면](imgs/modal-table-drag-type.png)
+
+**주요 특징**:
+- 테이블 행 드래그앤드롭
+- 실시간 순서 변경
+- 시각적 드래그 피드백
+
+## 확장 타입별 개발 순서
+
+### 7. 🖼️ 이미지 썸네일 그리드 + 모달형 개발 순서
+
+**Step 1: 기본 구조 설정**
+```bash
+image-grid-modal/
+├── App.tsx                    # 메인 컨테이너
+├── ListDataGrid.tsx          # 썸네일 포함 그리드
+├── FormModal.tsx             # 이미지 등록/수정 모달
+├── SortModal.tsx             # 순서 관리 모달
+├── useStore.ts               # Store
+└── components/
+    ├── ThumbPreview.tsx      # 썸네일 미리보기
+    └── ImageUpload.tsx       # 이미지 업로드
+```
+
+**Step 2: Store 개발**
+```typescript
+interface States {
+  // 탭 상태
+  bannerLocTp: BannerLocTp[];
+  activeBannerLocTp: string;
+
+  // 목록 데이터
+  listData: Banner[];
+  listSpinning: boolean;
+
+  // 이미지 관리
+  uploadedImages: ImageInfo[];
+  sortModalVisible: boolean;
+}
+
+interface Actions {
+  setActiveBannerLocTp: (key: string) => void;
+  callListApi: (params?: ListRequest) => Promise<void>;
+  openBannerModal: (item?: Banner) => Promise<void>;
+  openSortModal: () => Promise<void>;
+  handleImageUpload: (file: File) => Promise<string>;
+}
+```
+
+**Step 3: 메인 App 컴포넌트**
+```typescript
+export default function App() {
+  return (
+    <Container>
+      <Header>
+        <ProgramTitle />
+      </Header>
+
+      {/* 탭 기반 위치 선택 */}
+      <PageSearchBar>
+        <Tabs
+          activeKey={activeBannerLocTp}
+          onChange={setActiveBannerLocTp}
+          items={bannerLocTp.map(item => ({
+            key: item.bannerLocTpcd,
+            label: item.bannerLocTpnm
+          }))}
+        />
+      </PageSearchBar>
+
+      {/* 검색 조건 */}
+      <Header>
+        <SearchParams
+          params={[
+            {
+              label: "카테고리",
+              name: "ctgrNo",
+              type: SearchParamType.SELECT,
+              options: productCategoryList,
+              hidden: activeBannerLocTp !== "1"
+            },
+            {
+              label: "채널",
+              name: "mdiaClcd",
+              type: SearchParamType.RADIO,
+              options: MDIA_CLCD?.options
+            }
+          ]}
+        />
+      </Header>
+
+      <Body>
+        <ListDataGrid />
+      </Body>
+    </Container>
+  );
+}
+```
+
+**Step 4: 썸네일 그리드 구현**
+```typescript
+export function ListDataGrid() {
+  const columns = [
+    {
+      key: "bannerNm",
+      label: "배너명",
+      width: 200
+    },
+    {
+      key: "image",
+      label: "이미지",
+      width: 180,
+      itemRender: ({ values }) => (
+        <Flex gap={6} justify="center">
+          {values.pcImageFlInfo && (
+            <ThumbPreview url={values.pcImageFlInfo.prevewUrlCtnts} />
+          )}
+          {values.moImageFlInfo && (
+            <ThumbPreview url={values.moImageFlInfo.prevewUrlCtnts} />
+          )}
+        </Flex>
+      )
+    },
+    {
+      key: "expsrBgnDtm",
+      label: "노출기간",
+      width: 150,
+      itemRender: ({ values }) => (
+        values.expsrBgnDtm ? (
+          <Flex wrap gap={5} justify="center">
+            <span>{dayjs(values.expsrBgnDtm).format(DT_FORMAT.DATETIME_HHMM)}</span>
+            <span>~</span>
+            <span>{dayjs(values.expsrEndDtm).format(DT_FORMAT.DATETIME_HHMM)}</span>
+          </Flex>
+        ) : "제한없음"
+      )
+    }
+  ];
+
+  return (
+    <>
+      <FormHeader>
+        <Flex gap={6}>
+          {programFn?.fn02 && (
+            <Button onClick={handleSort} icon={<IconSettingsVertical />}>
+              순서관리
+            </Button>
+          )}
+        </Flex>
+        <Flex gap={6}>
+          {programFn?.fn02 && (
+            <Button type="primary" onClick={handleAddItem}>
+              등록
+            </Button>
+          )}
+        </Flex>
+      </FormHeader>
+
+      <DataGrid
+        columns={columns}
+        data={listData}
+        onClick={onClickItem}
+      />
+    </>
+  );
+}
+```
+
+### 8-27. 기타 확장 타입 개발 가이드
+
+각 확장 타입은 다음과 같은 공통 패턴을 따릅니다:
+
+**공통 개발 단계**:
+1. **타입 특성 파악**: 해당 화면의 고유 기능 식별
+2. **Store 설계**: 타입별 특수 상태 및 액션 정의
+3. **컴포넌트 구조**: 타입별 특수 컴포넌트 구현
+4. **모달/UI 구현**: 특수 UI 패턴 적용
+5. **이벤트 처리**: 타입별 특수 이벤트 핸들링
+6. **데이터 플로우**: API 연동 및 데이터 흐름 구성
+
+**모달 기반 타입 공통 패턴**:
+- FormModal 컴포넌트 활용
+- 모달 상태 관리 (open/close)
+- 모달 간 데이터 전달
+- 모달 스택 관리 (modal in modal)
+
+**파일 업로드 타입 공통 패턴**:
+- 파일 선택/드래그앤드롭 처리
+- 업로드 진행률 표시
+- 파일 검증 (크기, 형식)
+- 썸네일 생성 및 미리보기
+
+**드래그앤드롭 타입 공통 패턴**:
+- react-beautiful-dnd 또는 유사 라이브러리
+- 드래그 피드백 UI
+- 순서 변경 API 연동
+- 최적적 업데이트
+
+---
+
+## 초급자를 위한 실전 가이드
+
+### 🎯 개발 시작 전 필수 체크사항
+
+#### 1. 개발 환경 설정 확인
+```bash
+# Node.js 버전 확인 (v18+ 필요)
+node --version
+
+# 프로젝트 의존성 설치
+npm install
+
+# 서브모듈 초기화 (백엔드 인터페이스)
+npm run submodule
+
+# 개발 서버 실행
+npm run dev
+```
+
+#### 2. 프로젝트 구조 이해
+```
+src/
+├── @core/           # 프레임워크 핵심 (수정 금지)
+├── @types/          # 전역 타입 정의
+├── components/      # 공통 컴포넌트
+├── hooks/           # 커스텀 훅
+├── modals/          # 모달 컴포넌트들
+├── pages/           # 실제 페이지들
+│   └── resources/
+│       └── NH/      # ⭐ 여기서 작업!
+├── services/        # API 서비스 레이어
+├── stores/          # 전역 상태 관리
+└── styles/          # 스타일 정의
+```
+
+### 🚀 단계별 개발 가이드
+
+#### Step 1: 새 페이지 폴더 생성
+```bash
+# 예시: 상품 관리 페이지 만들기
+mkdir -p src/pages/resources/NH/product.management
+cd src/pages/resources/NH/product.management
+```
+
+#### Step 2: 기본 파일 생성
+```bash
+# 필수 파일들 생성
+touch App.tsx                    # 메인 컴포넌트
+touch index.ts                   # 내보내기
+touch useProductStore.ts         # Store (상태관리)
+
+# 목록이 있다면
+touch ListDataGrid.tsx           # 데이터 그리드
+
+# 모달이 있다면
+touch FormModal.tsx              # 등록/수정 모달
+
+# 필요시 추가
+touch types.ts                   # 타입 정의
+```
+
+#### Step 3: index.ts 작성 (내보내기)
+```typescript
+// index.ts - 가장 간단함
+export { default } from './App';
+```
+
+#### Step 4: 기본 App.tsx 템플릿 (복사해서 사용!)
+```typescript
+// App.tsx
+import React from 'react';
+import { PageLayout } from 'styles/pageStyled';
+import { ProgramTitle } from '@core/components/common';
+import { useDidMountEffect, useUnmountEffect } from 'hooks';
+import { errorHandling } from 'utils';
+
+// TODO: Store import 추가
+// import { useProductStore } from './useProductStore';
+
+interface Props {}
+
+export default function App({}: Props) {
+  // TODO: Store 구독 추가
+  // const init = useProductStore((s) => s.init);
+  // const destroy = useProductStore((s) => s.destroy);
+
+  // 🔄 컴포넌트 시작할 때 실행
+  useDidMountEffect(() => {
+    (async () => {
+      try {
+        // TODO: 초기화 로직 추가
+        console.log('페이지 로드됨!');
+      } catch (e) {
+        await errorHandling(e);
+      }
+    })();
+  });
+
+  // 🔄 컴포넌트 종료할 때 실행
+  useUnmountEffect(() => {
+    // TODO: 정리 로직 추가
+    console.log('페이지 종료됨!');
+  });
+
+  return (
+    <PageLayout stretch>
+      {/* 📋 상단 헤더: 제목 + 버튼들 */}
+      <PageLayout.Header>
+        <ProgramTitle />
+        {/* TODO: 검색, 등록 버튼 등 추가 */}
+      </PageLayout.Header>
+
+      {/* 📊 메인 컨텐츠 영역 */}
+      <PageLayout.FrameRow>
+        <PageLayout.FrameColumn>
+          {/* TODO: 실제 컨텐츠 추가 */}
+          <div style={{ padding: 20 }}>
+            <h2>🎯 개발 단계</h2>
+            <ol>
+              <li>✅ 기본 구조 생성 (현재 단계)</li>
+              <li>⏳ Store 구현</li>
+              <li>⏳ 컴포넌트 구현</li>
+              <li>⏳ API 연동</li>
+            </ol>
+          </div>
+        </PageLayout.FrameColumn>
+      </PageLayout.FrameRow>
+    </PageLayout>
+  );
+}
+```
+
+### 🐛 자주 발생하는 오류와 해결법
+
+#### 1. "Cannot read property of undefined" 에러
+```typescript
+// ❌ 잘못된 방법
+const name = user.profile.name;
+
+// ✅ 올바른 방법 (옵셔널 체이닝)
+const name = user?.profile?.name;
+
+// ✅ 기본값 설정
+const name = user?.profile?.name || '이름 없음';
+
+// ✅ 조건부 렌더링
+{user && <div>{user.name}</div>}
+```
+
+#### 2. Store 구독이 안 되는 경우
+```typescript
+// ❌ 잘못된 방법 (전체 구독 - 성능 문제)
+const store = useProductStore();
+const { listData, loading } = store;
+
+// ✅ 올바른 방법 (필요한 것만 구독)
+const listData = useProductStore((s) => s.listData);
+const loading = useProductStore((s) => s.listLoading);
+const loadList = useProductStore((s) => s.loadList);
+```
+
+### 🎯 개발 순서 체크리스트
+
+#### 📋 화면 개발 전 체크리스트
+- [ ] 🎨 화면 타입 결정 (목록형? 모달형? 대시보드형?)
+- [ ] 📡 필요한 API 엔드포인트 확인
+- [ ] 📋 디자인 시안 또는 요구사항 문서 검토
+- [ ] 🔍 기존 유사한 화면 참고 사례 찾기
+- [ ] 🗂️ 데이터 구조 및 타입 정의
+
+#### 🛠️ 개발 중 체크리스트
+- [ ] 📁 폴더 및 파일 구조 생성
+- [ ] 📝 TypeScript 인터페이스 정의
+- [ ] 🏪 Store 기본 구조 작성
+- [ ] 🖼️ App.tsx 기본 레이아웃 작성
+- [ ] 🎭 더미 데이터로 UI 확인
+- [ ] 📡 실제 API 연동
+- [ ] ❌ 에러 처리 추가
+- [ ] ⏳ 로딩 상태 처리
+- [ ] ✅ Form 유효성 검증
+
+#### ✨ 개발 완료 후 체크리스트
+- [ ] 🧪 모든 기능 동작 확인
+- [ ] 💥 에러 상황 테스트
+- [ ] 🔐 권한별 기능 제한 확인
+- [ ] 📱 반응형 레이아웃 확인
+- [ ] 🔍 코드 리뷰 요청
+- [ ] 📚 문서 업데이트
+
+### 💡 네이밍 컨벤션 가이드
+
+#### 1. 폴더 및 파일명
+```bash
+# 폴더명: kebab-case (소문자 + 하이픈)
+product.management/
+user.profile/
+order.history/
+
+# 컴포넌트 파일명: PascalCase
+App.tsx
+ListDataGrid.tsx
+FormModal.tsx
+
+# 훅/스토어 파일명: camelCase with prefix
+useProductStore.ts
+useOrderHistory.ts
+
+# 타입 파일명: camelCase
+types.ts
+interfaces.ts
+```
+
+#### 2. 컴포넌트 및 함수명
+```typescript
+// 컴포넌트명: PascalCase
+export function ProductManagement() {}
+export function UserProfile() {}
+
+// 함수명: camelCase + 동사로 시작
+const handleClick = () => {};
+const loadProductList = () => {};
+const saveUserProfile = () => {};
+
+// 상태명: camelCase + 명사
+const [loading, setLoading] = useState(false);
+const [productList, setProductList] = useState([]);
+const [modalOpen, setModalOpen] = useState(false);
+```
+
+#### 3. Store 및 API 네이밍
+```typescript
+// Store 액션: 동사로 시작
+const loadList = async () => {};
+const saveItem = async () => {};
+const deleteItem = async () => {};
+
+// API 서비스: 동사 + 명사
+ProductService.getList()
+ProductService.create()
+ProductService.update()
+ProductService.delete()
+
+// 상태 변수: 명사 + 상태 표시
+listLoading: boolean
+saveLoading: boolean
+listData: Product[]
+selectedItem: Product
+```
+
+### 🆘 문제 해결 가이드
+
+#### 문제 1: 화면이 하얗게 나옴
+```typescript
+// 🔍 확인사항
+// 1. 브라우저 콘솔 에러 확인
+// 2. 컴포넌트 return 문 확인
+// 3. Router 설정 확인
+
+// ✅ 최소 작동 구조
+export default function App() {
+  return (
+    <div>
+      <h1>테스트 페이지</h1>
+      <p>정상 작동 중...</p>
+    </div>
+  );
+}
+```
+
+#### 문제 2: Store 상태가 업데이트 안됨
+```typescript
+// 🔍 확인사항
+// 1. Store 구독 방법 확인
+// 2. set 함수 사용 확인
+// 3. 객체/배열 불변성 확인
+
+// ❌ 잘못된 예 (원본 수정)
+state.listData.push(newItem);
+state.user.name = 'New Name';
+
+// ✅ 올바른 예 (새 객체/배열 생성)
+set(state => ({
+  listData: [...state.listData, newItem]
+}));
+
+set(state => ({
+  user: { ...state.user, name: 'New Name' }
+}));
+```
+
+#### 문제 3: API 호출이 안됨
+```typescript
+// 🔍 확인사항
+// 1. 브라우저 네트워크 탭에서 요청 확인
+// 2. CORS 오류 확인
+// 3. 인증 토큰 확인
+// 4. API 엔드포인트 확인
+
+// ✅ 에러 처리 개선
+try {
+  console.log('API 호출 시작:', url);
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+  console.log('API 응답:', data);
+  return data;
+
+} catch (error) {
+  console.error('API 호출 실패:', error);
+  throw error;
+}
+```
+
+이제 초급자도 이 상세한 가이드를 따라 체계적으로 화면을 개발할 수 있습니다! 🎉