화면 구성 — 기본

화면 정의

{
  "refId": "scr_hcm_items",
  "label": "품목관리",
  "screenType": "list",
  "menuIcon": "AppstoreOutlined",
  "menuOrder": 1,
  "boundTableRef": "hcm_items",
  "parentMenuRef": "mg_hcm_master"
}

화면 필드 명세

필드	타입	필수	설명
`refId`	`string`	필수	화면 참조 ID: `scr_{접두사}_{기능명}`
`label`	`string`	필수	한글 화면명
`screenType`	`string`	필수	화면 유형
`menuIcon`	`string`	필수	Ant Design 아이콘명
`menuOrder`	`number`	필수	메뉴 내 정렬 순서 (1부터)
`boundTableRef`	`string`	필수	바인딩 테이블 `refId`
`parentMenuRef`	`string`	필수	소속 메뉴 그룹 `refId`

화면 유형 (screenType)

유형	설명	용도
`list`	리스트/테이블 화면	목록 조회, 검색, 인라인 편집
`form`	폼 화면	등록/수정 입력
`detail`	상세 화면	읽기 전용 상세 보기
`dashboard`	대시보드	KPI, 차트, 통계
`pop`	POP 현장 화면	반드시 popConfig 정의 필요
`master-detail`	마스터-디테일	헤더+항목 (발주서, BOM)
`document`	전표/문서 화면	견적서, 수주서, 발주서 (헤더+품목+합계). `renderMode: "full-page"` 지원
`pivot`	피벗 테이블	교차 분석
`gantt`	간트 차트	일정 관리
`tree`	트리뷰	반드시 treeConfig 정의 필요
`graph`	네트워크 그래프	반드시 graphConfig 정의 필요

document screenType

document 화면은 반드시 documentConfig를 함께 정의해야 합니다. 두 가지 렌더 모드 지원:

renderMode: "split" (기본) — 좌우 분할 화면
renderMode: "full-page" — 목록↔전체화면 폼 전환 (SAP Fiori 패턴, 복잡한 전표에 권장)

상세 문법은 화면 구성 (고급)을 참조하세요.

기본 화면 (listConfig/formConfig 없는 경우)

listConfig나 formConfig가 없으면 시스템이 자동 생성:

list → 모든 컬럼 표시, 기본 정렬
form → 모든 컬럼 입력 가능

고급 화면 설정 — listConfig

{
  "refId": "scr_hcm_items",
  "screenType": "list",
  "boundTableRef": "hcm_items",
  "parentMenuRef": "mg_hcm_master",
  "listConfig": {
    "columns": [
      { "columnName": "item_code", "width": 120, "fixed": "left", "sortable": true },
      { "columnName": "item_name", "width": 200, "sortable": true, "searchable": true },
      { "columnName": "item_type", "width": 100, "filterable": true },
      { "columnName": "status", "width": 80, "filterable": true }
    ],
    "filters": [
      { "columnName": "item_type", "filterType": "select", "label": "품목유형" },
      { "columnName": "status", "filterType": "select", "label": "상태" }
    ],
    "defaultSort": { "columnName": "item_code", "order": "ascend" },
    "pageSize": 20,
    "showRowNumber": true,
    "showStatistics": false,
    "quickFilters": [
      { "label": "전체", "field": "status", "value": null },
      { "label": "사용중", "field": "status", "value": "사용" },
      { "label": "미사용", "field": "status", "value": "미사용" }
    ]
  }
}

고급 화면 설정 — formConfig

{
  "refId": "scr_hcm_items_form",
  "screenType": "form",
  "boundTableRef": "hcm_items",
  "parentMenuRef": "mg_hcm_master",
  "formConfig": {
    "sections": [
      {
        "title": "기본정보",
        "icon": "InfoCircleOutlined",
        "collapsible": true,
        "defaultCollapsed": false,
        "fields": [
          { "columnName": "item_code", "required": true, "span": 8 },
          { "columnName": "item_name", "required": true, "span": 8 },
          { "columnName": "item_type", "required": true, "span": 8 }
        ]
      },
      {
        "title": "상세정보",
        "icon": "FileTextOutlined",
        "fields": [
          { "columnName": "unit_price", "span": 8 },
          { "columnName": "safety_stock", "span": 8 },
          { "columnName": "remark", "span": 24 }
        ]
      }
    ],
    "subtables": [
      {
        "tableRef": "hcm_bom",
        "label": "BOM 구성",
        "fkColumn": "item_id",
        "columns": ["component_id", "quantity", "unit"],
        "editable": true
      }
    ]
  }
}

고급 화면 설정 — treeConfig

{
  "refId": "scr_lot_genealogy_tree",
  "screenType": "tree",
  "boundTableRef": "lot_genealogy",
  "parentMenuRef": "menu_mes_production",
  "treeConfig": {
    "parentColumn": "parent_lot_id",
    "childColumn": "child_lot_id",
    "labelColumn": "parent_lot_id",
    "badgeColumn": "relation_type",
    "detailColumns": ["consumed_qty", "produced_qty", "linked_at"],
    "direction": "TB",
    "maxDepth": 10,
    "searchEnabled": true,
    "detailPanelEnabled": true
  },
  "listConfig": { "..." : "fallback용 리스트 설정 (선택)" }
}

treeConfig 필드 명세

필드	타입	필수	설명
`parentColumn`	`string`	필수	부모 레코드를 가리키는 FK 컬럼명
`childColumn`	`string`	필수	자식 레코드를 가리키는 FK 컬럼명
`labelColumn`	`string`	필수	트리 노드에 표시할 라벨 컬럼
`badgeColumn`	`string`	선택	관계유형 뱃지 컬럼
`detailColumns`	`string[]`	선택	노드 보조 정보 컬럼들
`direction`	`string`	선택	트리 방향: `TB`(기본), `LR`, `BT`
`maxDepth`	`number`	선택	최대 탐색 깊이 (기본 10)
`searchEnabled`	`boolean`	선택	검색 바 표시 여부 (기본 true)
`detailPanelEnabled`	`boolean`	선택	노드 클릭 시 상세 패널 표시 (기본 true)

listConfig 병행 사용

treeConfig와 함께 listConfig를 정의하면, 시스템이 트리뷰를 지원하지 않는 환경에서 리스트 형태로 fallback됩니다.

상세 가이드

다른 솔루션에 tree/graph를 적용하는 방법은 시각화 화면 구성을 참고하세요.

고급 화면 설정 — graphConfig

{
  "refId": "scr_lot_trace_graph",
  "screenType": "graph",
  "boundTableRef": "lot_genealogy",
  "parentMenuRef": "menu_mes_production",
  "graphConfig": {
    "sourceColumn": "parent_lot_id",
    "targetColumn": "child_lot_id",
    "labelColumn": "parent_lot_id",
    "edgeLabelColumn": "relation_type",
    "edgeWeightColumn": "consumed_qty",
    "layout": "elk",
    "detailPanelEnabled": true,
    "zoomControlEnabled": true,
    "minimapEnabled": true
  },
  "listConfig": { "..." : "fallback용 리스트 설정 (선택)" }
}

graphConfig 필드 명세

필드	타입	필수	설명
`sourceColumn`	`string`	필수	소스(출발) 노드 FK 컬럼명
`targetColumn`	`string`	필수	타겟(도착) 노드 FK 컬럼명
`labelColumn`	`string`	필수	노드 라벨 컬럼
`edgeLabelColumn`	`string`	선택	엣지 라벨 컬럼
`edgeWeightColumn`	`string`	선택	엣지 가중치 컬럼
`layout`	`string`	선택	레이아웃: `elk`(기본), `force`, `circular`
`detailPanelEnabled`	`boolean`	선택	노드 클릭 시 상세 패널 표시 (기본 true)
`zoomControlEnabled`	`boolean`	선택	확대/축소 컨트롤 표시 (기본 true)
`minimapEnabled`	`boolean`	선택	미니맵 표시 (기본 true)

레이아웃 엔진

elk 레이아웃은 계층적 구조에 적합하고, force는 자유로운 네트워크 구조에 적합합니다. LOT 계보처럼 방향성이 있는 데이터에는 elk을 권장합니다.

상세 가이드

다른 솔루션에 tree/graph를 적용하는 방법은 시각화 화면 구성을 참고하세요.

메뉴 그룹 정의

{
  "refId": "mg_hcm_master",
  "label": "기초정보",
  "icon": "DatabaseOutlined",
  "menuOrder": 1,
  "businessFunction": "admin"
}

메뉴 그룹 필드 명세

필드	타입	필수	설명
`refId`	`string`	필수	메뉴 그룹 참조 ID: `mg_{접두사}_{기능명}`
`label`	`string`	필수	한글 메뉴명
`icon`	`string`	필수	Ant Design 아이콘명
`menuOrder`	`number`	필수	좌측 메뉴 정렬 순서 (1부터)
`businessFunction`	`string`	선택	업무 기능 키 (솔루션 간 메뉴 통합용)

businessFunction 목록

키	한글명	아이콘
`sales`	영업/판매	`ShopOutlined`
`production`	생산/제조	`ExperimentOutlined`
`quality`	품질관리	`SafetyCertificateOutlined`
`procurement`	구매/외주	`ShoppingCartOutlined`
`logistics`	물류/창고	`SendOutlined`
`finance`	재무/회계	`DollarOutlined`
`maintenance`	설비/보전	`ToolOutlined`
`hr`	인사/노무	`TeamOutlined`
`rnd`	연구개발	`BulbOutlined`
`energy`	에너지	`ThunderboltOutlined`
`safety`	안전관리	`AlertOutlined`
`it_security`	IT/보안	`LockOutlined`
`admin`	기초정보/관리	`SettingOutlined`
`executive`	경영정보	`DashboardOutlined`

메뉴 그룹 규칙

모든 screens의 parentMenuRef는 menuGroups 내 존재하는 refId 를 참조해야 함
menuOrder는 1부터 시작, 중복 금지
POP 화면을 포함하는 일반 메뉴 그룹도 정의 가능 (예: menu_hcm_pop)
POP 전용 메뉴는 popMenuGroups에 별도 정의 → 다음 섹션 참조

이전: 관계 정의 | 다음: 화면 구성 (고급)

화면 정의​

화면 필드 명세​

화면 유형 (screenType)​

기본 화면 (listConfig/formConfig 없는 경우)​

고급 화면 설정 — listConfig​

고급 화면 설정 — formConfig​

고급 화면 설정 — treeConfig​

treeConfig 필드 명세​

고급 화면 설정 — graphConfig​

graphConfig 필드 명세​

메뉴 그룹 정의​

메뉴 그룹 필드 명세​

businessFunction 목록​

메뉴 그룹 규칙​