# 견적관리 화면 구현 가이드

> **화면명**: 견적관리
> **파일**: 견적관리.html
> **분류**: 영업관리
> **구현 가능**: ✅ 완전 (현재 V2 컴포넌트)

---

## 1. 화면 개요

견적서 생성 및 관리 화면으로, 고객 요청에 대한 견적을 작성하고 수주로 전환합니다.

### 핵심 기능
- 견적 목록 조회/검색
- 견적 등록/수정/삭제
- 견적 상세 및 품목 내역 관리
- 견적서 인쇄/PDF 출력
- 수주 전환

---

## 2. 화면 레이아웃

```
┌─────────────────────────────────────────────────────────────────┐
│ [기간] [거래처] [견적번호] [품목명] [상태▼] [초기화][조회]        │
│                                          [사용자옵션][업로드][다운로드]│
├───────────────────────┬─────────────────────────────────────────┤
│ 📋 견적 목록            │ 📄 견적 상세                            │
│ ───────────────       │ [인쇄] [복사] [수주전환] [수정] [삭제]   │
│ [신규등록]             │ ─────────────────────────               │
│ ┌──────────────────┐  │ 견적번호: QT-2026-0001                  │
│ │견적번호|거래처|금액..│  │ 거래처: (주)테스트                      │
│ │QT-001 |A사|1,000..│  │ 견적일: 2026-01-30                     │
│ │QT-002 |B사|2,500..│  ├─────────────────────────────────────────┤
│ └──────────────────┘  │ [기본정보] [품목내역] [첨부파일]         │
│                       │ ───────────────────────────              │
│     리사이저 ↔        │ │품목코드|품목명|수량|단가|금액|비고│    │
│                       │ │P-001 |제품A|100|1,000|100,000|   │    │
└───────────────────────┴─────────────────────────────────────────┘
```

---

## 3. V2 컴포넌트 매핑

| HTML 영역 | V2 컴포넌트 | 상태 |
|-----------|-------------|------|
| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
| 견적 목록 | `v2-table-list` | ✅ 가능 |
| 분할 패널 | `v2-split-panel-layout` | ✅ 가능 |
| 상세 탭 | `v2-tabs-widget` | ✅ 가능 |
| 품목 내역 테이블 | `v2-table-list` | ✅ 가능 |

---

## 4. 테이블 정의

### 4.1 견적 목록 (좌측)

```typescript
columns: [
  { id: 'checkbox', type: 'checkbox', width: 50 },
  { id: 'quote_no', label: '견적번호', width: 120 },
  { id: 'quote_date', label: '견적일', width: 100 },
  { id: 'customer_name', label: '거래처', width: 150 },
  { id: 'total_amount', label: '견적금액', width: 120, align: 'right', format: 'currency' },
  { id: 'status', label: '상태', width: 80 },
  { id: 'valid_date', label: '유효기간', width: 100 },
  { id: 'manager', label: '담당자', width: 100 }
]
```

### 4.2 품목 내역 (우측 탭)

```typescript
detailColumns: [
  { id: 'seq', label: 'No', width: 50 },
  { id: 'item_code', label: '품목코드', width: 100 },
  { id: 'item_name', label: '품목명', width: 200 },
  { id: 'spec', label: '규격', width: 150 },
  { id: 'quantity', label: '수량', width: 80, align: 'right' },
  { id: 'unit', label: '단위', width: 60 },
  { id: 'unit_price', label: '단가', width: 100, align: 'right', format: 'currency' },
  { id: 'amount', label: '금액', width: 120, align: 'right', format: 'currency' },
  { id: 'remark', label: '비고', width: 150 }
]
```

---

## 5. 검색 조건

| 필드명 | 컴포넌트 | 설정 |
|--------|----------|------|
| 기간 | `v2-date` | dateRange: true |
| 거래처 | `v2-input` | placeholder: "거래처" |
| 견적번호 | `v2-input` | placeholder: "견적번호" |
| 품목명 | `v2-input` | placeholder: "품목명" |
| 상태 | `v2-select` | 작성중, 제출, 승인, 반려, 수주전환 |

---

## 6. 상세 탭 구성

```typescript
tabs: [
  {
    id: 'basic',
    label: '기본정보',
    fields: [
      { id: 'quote_no', label: '견적번호' },
      { id: 'quote_date', label: '견적일' },
      { id: 'customer_code', label: '거래처코드' },
      { id: 'customer_name', label: '거래처명' },
      { id: 'manager', label: '담당자' },
      { id: 'valid_date', label: '유효기간' },
      { id: 'delivery_date', label: '납기일' },
      { id: 'payment_term', label: '결제조건' },
      { id: 'remark', label: '비고' }
    ]
  },
  {
    id: 'items',
    label: '품목내역',
    type: 'table',
    entityId: 'quote_items'
  },
  {
    id: 'files',
    label: '첨부파일',
    type: 'file-list'
  }
]
```

---

## 7. 버튼 액션

### 7.1 목록 버튼
| 버튼 | 액션 |
|------|------|
| 신규등록 | 견적 등록 모달 열기 |

### 7.2 상세 버튼
| 버튼 | 액션 |
|------|------|
| 인쇄 | 견적서 PDF 출력 |
| 복사 | 선택 견적 복사하여 신규 생성 |
| 수주전환 | 견적 → 수주 데이터 생성 |
| 수정 | 견적 수정 모달 열기 |
| 삭제 | 견적 삭제 (확인 후) |

---

## 8. 구현 JSON

```json
{
  "screen_code": "QUOTE_MAIN",
  "screen_name": "견적관리",
  "components": [
    {
      "type": "v2-table-search-widget",
      "position": { "x": 0, "y": 0, "w": 12, "h": 2 },
      "config": {
        "searchFields": [
          { "type": "date", "id": "date_range", "placeholder": "기간", "dateRange": true },
          { "type": "input", "id": "customer_name", "placeholder": "거래처" },
          { "type": "input", "id": "quote_no", "placeholder": "견적번호" },
          { "type": "input", "id": "item_name", "placeholder": "품목명" },
          { "type": "select", "id": "status", "placeholder": "상태",
            "options": [
              { "value": "draft", "label": "작성중" },
              { "value": "submitted", "label": "제출" },
              { "value": "approved", "label": "승인" },
              { "value": "rejected", "label": "반려" },
              { "value": "converted", "label": "수주전환" }
            ]
          }
        ],
        "buttons": [
          { "label": "초기화", "action": "reset", "variant": "outline" },
          { "label": "조회", "action": "search", "variant": "primary" }
        ],
        "rightButtons": [
          { "label": "사용자옵션", "action": "userOptions", "variant": "outline" },
          { "label": "엑셀업로드", "action": "excelUpload", "variant": "outline" },
          { "label": "엑셀다운로드", "action": "excelDownload", "variant": "outline" }
        ]
      }
    },
    {
      "type": "v2-split-panel-layout",
      "position": { "x": 0, "y": 2, "w": 12, "h": 10 },
      "config": {
        "masterPanel": {
          "title": "견적 목록",
          "entityId": "quote_header",
          "buttons": [
            { "label": "신규등록", "action": "create", "variant": "primary" }
          ],
          "columns": [
            { "id": "quote_no", "label": "견적번호", "width": 120 },
            { "id": "quote_date", "label": "견적일", "width": 100 },
            { "id": "customer_name", "label": "거래처", "width": 150 },
            { "id": "total_amount", "label": "견적금액", "width": 120, "align": "right" },
            { "id": "status", "label": "상태", "width": 80 },
            { "id": "manager", "label": "담당자", "width": 100 }
          ]
        },
        "detailPanel": {
          "title": "견적 상세",
          "buttons": [
            { "label": "인쇄", "action": "print", "variant": "outline" },
            { "label": "복사", "action": "copy", "variant": "outline" },
            { "label": "수주전환", "action": "convert", "variant": "secondary" },
            { "label": "수정", "action": "edit", "variant": "outline" },
            { "label": "삭제", "action": "delete", "variant": "destructive" }
          ],
          "tabs": [
            {
              "id": "basic",
              "label": "기본정보",
              "type": "form"
            },
            {
              "id": "items",
              "label": "품목내역",
              "type": "table",
              "entityId": "quote_items",
              "relationType": "one-to-many",
              "relationKey": "quote_id"
            },
            {
              "id": "files",
              "label": "첨부파일",
              "type": "file"
            }
          ]
        },
        "defaultRatio": 40,
        "resizable": true
      }
    }
  ]
}
```

---

## 9. 데이터베이스 테이블

### quote_header (견적 헤더)
```sql
CREATE TABLE quote_header (
  id SERIAL PRIMARY KEY,
  company_code VARCHAR(20) NOT NULL,
  quote_no VARCHAR(50) NOT NULL,
  quote_date DATE NOT NULL,
  customer_code VARCHAR(50),
  customer_name VARCHAR(200),
  total_amount NUMERIC(15,2),
  tax_amount NUMERIC(15,2),
  status VARCHAR(20) DEFAULT 'draft',
  valid_date DATE,
  delivery_date DATE,
  payment_term VARCHAR(100),
  manager VARCHAR(100),
  remark TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);
```

### quote_items (견적 품목)
```sql
CREATE TABLE quote_items (
  id SERIAL PRIMARY KEY,
  company_code VARCHAR(20) NOT NULL,
  quote_id INTEGER REFERENCES quote_header(id),
  seq INTEGER,
  item_code VARCHAR(50),
  item_name VARCHAR(200),
  spec VARCHAR(200),
  quantity NUMERIC(15,3),
  unit VARCHAR(20),
  unit_price NUMERIC(15,2),
  amount NUMERIC(15,2),
  remark TEXT
);
```

---

## 10. 구현 체크리스트

- [x] 검색 영역: v2-table-search-widget
- [x] 분할 패널: v2-split-panel-layout
- [x] 목록 테이블: v2-table-list
- [x] 상세 탭: v2-tabs-widget
- [x] 품목 내역 테이블: v2-table-list (nested)
- [ ] 인쇄 기능: 별도 구현 필요
- [ ] 수주 전환: 비즈니스 로직 구현

**현재 V2 컴포넌트로 100% 구현 가능**
