ERP-node/docs/screen-implementation-guide/05_equipment/equipment-info.md

설비정보 화면 구현 가이드

화면명: 설비정보 파일: 설비정보.html 분류: 설비관리 구현 가능: ✅ 완전 (v2-card-display 활용)

---

1. 화면 개요

생산 설비의 기본정보 및 상태를 관리하는 화면입니다.

핵심 기능

• 설비 목록 조회 (카드 형태)
• 설비 등록/수정/삭제
• 설비 상세 정보 탭 관리
• 설비 이미지 관리

---

2. 화면 레이아웃

┌─────────────────────────────────────────────────────────────────┐
│ [설비코드] [설비명] [설비유형▼] [상태▼] [초기화][조회]            │
│                                          [사용자옵션][업로드][다운로드]│
├───────────────────────┬─────────────────────────────────────────┤
│ 🏭 설비 목록            │ [기본정보][보전이력][점검이력][가동현황]  │
│ ───────────────       │ ─────────────────────────────────────  │
│ [신규등록]             │ 설비코드: EQ-001                        │
│ ┌──────────────────┐  │ 설비명: CNC 밀링머신 1호기               │
│ │ [이미지] EQ-001   │  │ 설비유형: 가공설비                       │
│ │ CNC 밀링 [가동중]  │  │ 상태: 가동중                            │
│ ├──────────────────┤  │ 제조사: 현대공작기계                      │
│ │ [이미지] EQ-002   │  ├─────────────────────────────────────────┤
│ │ 선반 1호 [점검중]  │  │ [보전이력 테이블]                        │
│ ├──────────────────┤  │ │일자    |유형  |내용        |담당자│    │
│ │ [이미지] EQ-003   │  │ │2026-01|정기  |오일 교환    |김철수│    │
│ │ 프레스 [고장]     │  │ │2026-01|수리  |베어링 교체  |이영희│    │
│ └──────────────────┘  │                                         │
└───────────────────────┴─────────────────────────────────────────┘

---

3. V2 컴포넌트 매핑

HTML 영역	V2 컴포넌트	상태
검색 섹션	v2-table-search-widget	✅ 가능
설비 카드 목록	v2-card-display	✅ 가능
분할 패널	v2-split-panel-layout	✅ 가능
상세 탭	v2-tabs-widget	✅ 가능

---

4. 설비 카드 구조

interface EquipmentCard {
  id: string;
  image: string;  // 설비 이미지 URL
  code: string;   // 설비코드
  name: string;   // 설비명
  type: string;   // 설비유형
  status: 'running' | 'idle' | 'maintenance' | 'broken';
  location: string;
}

// 상태별 스타일
statusStyles: {
  running: { bg: '#d1fae5', color: '#065f46', label: '가동중' },
  idle: { bg: '#e5e7eb', color: '#374151', label: '대기중' },
  maintenance: { bg: '#fef3c7', color: '#92400e', label: '점검중' },
  broken: { bg: '#fee2e2', color: '#991b1b', label: '고장' }
}

---

5. 상세 탭 구성

tabs: [
  {
    id: 'basic',
    label: '기본정보',
    fields: [
      { id: 'eq_code', label: '설비코드' },
      { id: 'eq_name', label: '설비명' },
      { id: 'eq_type', label: '설비유형' },
      { id: 'status', label: '상태' },
      { id: 'manufacturer', label: '제조사' },
      { id: 'model', label: '모델명' },
      { id: 'serial_no', label: '시리얼번호' },
      { id: 'install_date', label: '설치일' },
      { id: 'location', label: '설치위치' },
      { id: 'manager', label: '담당자' }
    ]
  },
  {
    id: 'maintenance',
    label: '보전이력',
    type: 'table',
    entityId: 'equipment_maintenance',
    columns: [
      { id: 'date', label: '일자' },
      { id: 'type', label: '유형' },
      { id: 'content', label: '내용' },
      { id: 'worker', label: '담당자' },
      { id: 'cost', label: '비용' }
    ]
  },
  {
    id: 'inspection',
    label: '점검이력',
    type: 'table',
    entityId: 'equipment_inspection'
  },
  {
    id: 'operation',
    label: '가동현황',
    type: 'chart'  // 향후 확장
  }
]

---

6. 검색 조건

필드명	컴포넌트	옵션
설비코드	v2-input	placeholder: "설비코드"
설비명	v2-input	placeholder: "설비명"
설비유형	v2-select	가공설비, 조립설비, 검사설비 등
상태	v2-select	가동중, 대기중, 점검중, 고장

---

7. 현재 구현 가능 범위

✅ 가능

• 검색 영역: v2-table-search-widget
• 설비 카드 목록: v2-card-display (이미지+정보 조합 지원)
• 분할 패널 레이아웃: v2-split-panel-layout
• 상세 탭: v2-tabs-widget
• 보전이력/점검이력 테이블: v2-table-list

⚠️ 부분 가능

• 가동현황 차트: 별도 차트 컴포넌트 필요

---

8. 테이블 대체 구현 JSON

{
  "screen_code": "EQUIPMENT_MAIN",
  "screen_name": "설비정보",
  "components": [
    {
      "type": "v2-table-search-widget",
      "position": { "x": 0, "y": 0, "w": 12, "h": 2 },
      "config": {
        "searchFields": [
          { "type": "input", "id": "eq_code", "placeholder": "설비코드" },
          { "type": "input", "id": "eq_name", "placeholder": "설비명" },
          { "type": "select", "id": "eq_type", "placeholder": "설비유형" },
          { "type": "select", "id": "status", "placeholder": "상태",
            "options": [
              { "value": "running", "label": "가동중" },
              { "value": "idle", "label": "대기중" },
              { "value": "maintenance", "label": "점검중" },
              { "value": "broken", "label": "고장" }
            ]
          }
        ]
      }
    },
    {
      "type": "v2-split-panel-layout",
      "position": { "x": 0, "y": 2, "w": 12, "h": 10 },
      "config": {
        "masterPanel": {
          "title": "설비 목록",
          "entityId": "equipment",
          "buttons": [
            { "label": "신규등록", "action": "create", "variant": "primary" }
          ],
          "columns": [
            { "id": "eq_code", "label": "설비코드", "width": 100 },
            { "id": "eq_name", "label": "설비명", "width": 200 },
            { "id": "eq_type", "label": "설비유형", "width": 100 },
            { "id": "status", "label": "상태", "width": 80 },
            { "id": "location", "label": "설치위치", "width": 150 }
          ]
        },
        "detailPanel": {
          "tabs": [
            { "id": "basic", "label": "기본정보", "type": "form" },
            { "id": "maintenance", "label": "보전이력", "type": "table", "entityId": "eq_maintenance" },
            { "id": "inspection", "label": "점검이력", "type": "table", "entityId": "eq_inspection" },
            { "id": "operation", "label": "가동현황", "type": "custom" }
          ]
        }
      }
    }
  ]
}

---

9. v2-card-display 설정 예시

v2-card-display는 이미 존재하는 컴포넌트입니다.

// v2-card-display 설정
cardDisplayConfig: {
  cardsPerRow: 3,
  cardSpacing: 16,
  cardStyle: {
    showTitle: true,      // eq_name 표시
    showSubtitle: true,   // eq_code 표시
    showDescription: true,
    showImage: true,      // 설비 이미지 표시
    showActions: true,
    imagePosition: "top",
    imageSize: "medium",
  },
  columnMapping: {
    title: "eq_name",
    subtitle: "eq_code",
    image: "image_url",
    status: "status"
  },
  dataSource: "table"
}

현재 V2 컴포넌트로 완전 구현 가능