ERP-node/docs/screen-implementation-guide/02_sales/quote.md

견적관리 화면 구현 가이드

화면명: 견적관리 파일: 견적관리.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 견적 목록 (좌측)

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 품목 내역 (우측 탭)

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

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

{
  "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 (견적 헤더)

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 (견적 품목)

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. 구현 체크리스트

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

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