# 거래처관리 화면 구현 가이드

> **화면명**: 거래처관리
> **파일**: 거래처관리.html
> **분류**: 영업관리
> **구현 가능**: ⚠️ 부분 (그룹화 테이블 필요)

---

## 1. 화면 개요

고객사 및 공급업체 정보를 통합 관리하는 화면입니다.

### 핵심 기능
- 거래처 목록 조회/검색
- 그룹화 기능 (거래처유형, 지역별)
- 거래처 등록/수정/삭제
- 거래처별 품목코드/단가 관리
- 담당자 정보 관리

---

## 2. 화면 레이아웃

```
┌─────────────────────────────────────────────────────────────────┐
│ [거래처코드] [거래처명] [거래처유형▼] [사용여부▼] [초기화][조회]  │
│                                          [사용자옵션][업로드][다운로드]│
├───────────────────────┬─────────────────────────────────────────┤
│ 📋 거래처 목록          │ [기본정보][품목코드][단가정보][담당자]   │
│ ─────────────────     │ ─────────────────────────────────────  │
│ Group by: [거래처유형▼] │ 거래처코드: C-001                       │
│ ┌──────────────────┐  │ 거래처명: (주)테스트                     │
│ │▼ 고객사 (15)       │  │ 사업자번호: 123-45-67890               │
│ │  C-001 | A사      │  │ 대표자: 홍길동                          │
│ │  C-002 | B사      │  ├─────────────────────────────────────────┤
│ │▼ 공급업체 (8)      │  │ [품목코드 탭 내용]                       │
│ │  S-001 | 원자재사  │  │ ┌────────────────────────────────┐    │
│ └──────────────────┘  │ │거래처품목코드|품목명|자사품목코드│    │
│                       │ │CP-001      |원료A |M-001      │    │
│     리사이저 ↔        │ └────────────────────────────────┘    │
└───────────────────────┴─────────────────────────────────────────┘
```

---

## 3. V2 컴포넌트 매핑

| HTML 영역 | V2 컴포넌트 | 상태 |
|-----------|-------------|------|
| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
| 거래처 목록 (그룹화) | `v2-table-list` | ⚠️ 그룹화 미지원 |
| 분할 패널 | `v2-split-panel-layout` | ✅ 가능 |
| 상세 탭 | `v2-tabs-widget` | ✅ 가능 |

---

## 4. 테이블 정의

### 4.1 거래처 목록

```typescript
columns: [
  { id: 'checkbox', type: 'checkbox', width: 50 },
  { id: 'customer_code', label: '거래처코드', width: 100 },
  { id: 'customer_name', label: '거래처명', width: 200 },
  { id: 'customer_type', label: '거래처유형', width: 100 },
  { id: 'business_no', label: '사업자번호', width: 120 },
  { id: 'ceo_name', label: '대표자', width: 100 },
  { id: 'tel', label: '전화번호', width: 120 },
  { id: 'status', label: '사용여부', width: 80 }
]
```

### 4.2 품목코드 탭

```typescript
itemCodeColumns: [
  { id: 'customer_item_code', label: '거래처품목코드', width: 150 },
  { id: 'item_name', label: '품목명', width: 200 },
  { id: 'our_item_code', label: '자사품목코드', width: 150 },
  { id: 'spec', label: '규격', width: 150 }
]
```

### 4.3 단가정보 탭

```typescript
priceColumns: [
  { id: 'item_code', label: '품목코드', width: 120 },
  { id: 'item_name', label: '품목명', width: 200 },
  { id: 'unit_price', label: '단가', width: 100, format: 'currency' },
  { id: 'currency', label: '통화', width: 60 },
  { id: 'apply_date', label: '적용일', width: 100 },
  { id: 'remark', label: '비고', width: 150 }
]
```

---

## 5. 그룹화 기능 (신규 컴포넌트 필요)

### 5.1 그룹화 옵션

```typescript
groupByOptions: [
  { id: 'customer_type', label: '거래처유형' },
  { id: 'region', label: '지역' },
  { id: 'status', label: '사용여부' }
]
```

### 5.2 그룹 헤더 표시

```
▼ 고객사 (15) ← 그룹명 + 건수
  │ C-001 │ (주)A사 │ ...
  │ C-002 │ (주)B사 │ ...
▼ 공급업체 (8)
  │ S-001 │ 원자재사 │ ...
```

### 5.3 필요 인터랙션

- 그룹 접기/펼치기
- 그룹 전체 선택 체크박스
- 다중 그룹핑 (선택)

---

## 6. 탭 구성

```typescript
tabs: [
  {
    id: 'basic',
    label: '기본정보',
    fields: [
      { id: 'customer_code', label: '거래처코드' },
      { id: 'customer_name', label: '거래처명' },
      { id: 'customer_type', label: '거래처유형' },
      { id: 'business_no', label: '사업자번호' },
      { id: 'ceo_name', label: '대표자' },
      { id: 'address', label: '주소' },
      { id: 'tel', label: '전화번호' },
      { id: 'fax', label: '팩스' },
      { id: 'email', label: '이메일' }
    ]
  },
  {
    id: 'item_codes',
    label: '품목코드',
    type: 'table',
    entityId: 'customer_item_mapping'
  },
  {
    id: 'prices',
    label: '단가정보',
    type: 'table',
    entityId: 'customer_prices'
  },
  {
    id: 'contacts',
    label: '담당자',
    type: 'table',
    entityId: 'customer_contacts'
  }
]
```

---

## 7. 현재 구현 가능 범위

### ✅ 가능
- 검색 영역
- 분할 패널 레이아웃
- 상세 탭
- 품목코드/단가/담당자 테이블

### ⚠️ 부분 가능
- 거래처 목록: 그룹화 없이 일반 테이블로 구현

### ❌ 불가능
- 동적 그룹화 (그룹 접기/펼치기)

---

## 8. 간소화 구현 JSON (그룹화 제외)

```json
{
  "screen_code": "CUSTOMER_MAIN",
  "screen_name": "거래처관리",
  "components": [
    {
      "type": "v2-table-search-widget",
      "config": {
        "searchFields": [
          { "type": "input", "id": "customer_code", "placeholder": "거래처코드" },
          { "type": "input", "id": "customer_name", "placeholder": "거래처명" },
          { "type": "select", "id": "customer_type", "placeholder": "거래처유형",
            "options": [
              { "value": "customer", "label": "고객사" },
              { "value": "supplier", "label": "공급업체" },
              { "value": "both", "label": "고객사/공급업체" }
            ]
          },
          { "type": "select", "id": "status", "placeholder": "사용여부" }
        ]
      }
    },
    {
      "type": "v2-split-panel-layout",
      "config": {
        "masterPanel": {
          "title": "거래처 목록",
          "entityId": "customer_master",
          "columns": [
            { "id": "customer_code", "label": "거래처코드", "width": 100 },
            { "id": "customer_name", "label": "거래처명", "width": 200 },
            { "id": "customer_type", "label": "거래처유형", "width": 100 },
            { "id": "ceo_name", "label": "대표자", "width": 100 }
          ]
        },
        "detailPanel": {
          "tabs": [
            { "id": "basic", "label": "기본정보", "type": "form" },
            { "id": "items", "label": "품목코드", "type": "table", "entityId": "customer_items" },
            { "id": "prices", "label": "단가정보", "type": "table", "entityId": "customer_prices" },
            { "id": "contacts", "label": "담당자", "type": "table", "entityId": "customer_contacts" }
          ]
        }
      }
    }
  ]
}
```

---

## 9. v2-grouped-table 개발 시 추가 구현

```typescript
// 그룹화 테이블 설정
groupedTableConfig: {
  groupBy: 'customer_type',
  groupByOptions: ['customer_type', 'region', 'status'],
  showGroupCount: true,
  expandAll: false,
  groupCheckbox: true
}
```

**예상 재활용**: `v2-grouped-table`은 5개 이상 화면에서 사용 가능
- 거래처관리, 품목정보, 작업지시, 입출고관리, 견적관리