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

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

화면명: 거래처관리 파일: 거래처관리.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 거래처 목록

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 품목코드 탭

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 단가정보 탭

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 그룹화 옵션

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

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 (그룹화 제외)

{
  "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 개발 시 추가 구현

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

예상 재활용: v2-grouped-table은 5개 이상 화면에서 사용 가능

• 거래처관리, 품목정보, 작업지시, 입출고관리, 견적관리