# 설비정보 화면 구현 가이드

> **화면명**: 설비정보
> **파일**: 설비정보.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. 설비 카드 구조

```typescript
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. 상세 탭 구성

```typescript
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

```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`는 이미 존재하는 컴포넌트입니다.

```typescript
// 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 컴포넌트로 완전 구현 가능**