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