# 견적관리 화면 구현 가이드 > **화면명**: 견적관리 > **파일**: 견적관리.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% 구현 가능**