Leyve Docs

다크모드

CRM 업무 흐름·화면 상태 프런트엔드 계약 ​

목적 ​

CRM 화면이 거래처·계약·민원 원장을 중복 소유하거나, 동작하지 않는 버튼을 운영 저장처럼 보이게 하지 않기 위한 계약입니다.

Leyve 자체 시스템 판매도 이 CRM 흐름을 사용할 수 있습니다. CRM은 수주까지 담당하고, 수주 고객의 계정 생성·판매귀속·프로비저닝은 본사 Sales Center와 Sales Distribution repository가 담당합니다.

필수 흐름 ​

문의 → 리드 → 딜 → 범용 계약 초안

  • 문의: 영업 인입 접수. 시설/서비스/청구 이의는 민원관리로 라우팅합니다.
  • 리드: 거래처 확정 전 prospect를 허용합니다.
  • 딜: 마스터데이터 거래처 참조가 필수입니다.
  • 수주 확정: 계약을 즉시 확정하지 않고 계약 초안 생성 요청만 합니다.
  • 활동/업무 메모: 대상 유형과 대상 등록번호를 보존하는 보조 기록입니다.

UI 상태 계약 ​

  • AppSideNavMenuOrg.vue는 개요 → 파이프라인(리드·영업기회) → 문의 → 활동 → 업무 메모 → 설정 순서를 사용한다. 문의·활동은 1항목 disclosure를 만들지 않고 직속 항목으로 렌더한다.
  • 파이프라인 보드는 독립 상위 메뉴가 아니다. 기존 보드 라우트는 호환을 위해 유지하되 영업기회 화면의 보기 전환으로 수렴한다.
  • 좌측 메뉴는 리드·영업기회 업무 전환을 소유한다. 리드 헤더는 일반 단일 탭, 영업기회 헤더는 목록·보드 로컬 탭만 렌더하며 리드·영업기회를 다시 나열하지 않는다.
  • 메모 그룹·메모 라벨은 실행 업무가 아니라 설정 항목이다.
  • 각 페이지는 crmWorkflowPolicy.js에서 책임·전후 단계·Prototype 저장 모드를 파생합니다.
  • demo-readonly: 생성/수정 UI는 형태 검증용이며 서버에 저장되지 않음을 표시합니다.
  • demo-local: useCrmWorkflow.js의 문의·리드·활동·전환 이력을 localStorage에 함께 보존하되 서버 미저장을 명시합니다.
  • demo-session: 브라우저 반응 상태만 유지하며 새로고침 초기화를 표시합니다.
  • 문의 제목 클릭은 selectInquiry(id) 후 상세 시트를 열고, 상세의 확인 대화상자에서만 convertSelectedInquiry()를 실행합니다.
  • 전환 함수는 문의 상태, 생성 리드, 자동 활동, 멱등 전환 이력을 원자적으로 갱신합니다. 리드·활동 테이블은 같은 composable의 computed 목록을 소비하므로 별도 이벤트 복사본을 만들지 않습니다.
  • 딜 목록 DynamicTableOrg, 파이프라인 보드 MainOrg, 딜 상세 SheetReadDealArt는 모두 useCrmDeals.js의 deals·selectedDeal을 소비합니다. 목록의 딜명과 보드 카드가 selectDeal(id) 후 같은 상세 시트를 엽니다.
  • 보드 drop은 updateStage만 실행합니다. 수주 컬럼 이동만으로 wonAt을 만들지 않으며 딜 상세의 확인 다이얼로그에서 confirmWon을 실행해야 수주 fact가 확정됩니다.
  • confirmWon은 계약관리 상품 유무와 무관하게 동작합니다. 계약관리 entitlement는 수주된 딜의 계약 초안 작성 화면 열기 CTA 노출에만 사용합니다.
  • CTA는 requestContractDraft로 provider-neutral source snapshot과 활동 projection을 저장한 뒤 /contract-management/contracts에 query로 전달합니다. 계약관리 컴포저블·DB를 import하지 않으며 성공 메시지를 계약 생성으로 표현하지 않습니다.
  • contractDraftRequestedAt은 작성 화면을 연 이력입니다. 실제 계약 ID·등록번호·상태는 계약관리의 응답 projection이 생기기 전까지 표시하지 않습니다.
  • 빈 상태는 필터 초기화 또는 생성 진입 행동을 제공합니다.
  • 로딩·오류·권한없음은 빈 결과와 다른 상태로 렌더링해야 합니다.
  • 모바일에서는 상태 안내와 핵심 생성 액션이 표 가로 스크롤 밖으로 밀리지 않아야 합니다.
  • 파이프라인 보드는 기본 grid grid-cols-1로 단계를 세로 나열하고 md 이상에서만 flex·고정 컬럼 폭·overflow-x-auto를 사용한다. 레인의 높이 확장은 md:grow로 제한해 모바일 빈 공간을 만들지 않는다.
  • 모바일에서 네이티브 DnD를 제공하지 않는다. 단계 변경은 딜 상세 편집의 단계 Select를 사용한다.
  • 딜 상세 푸터 액션은 모바일에서 줄바꿈되고, 계약 CTA와 편집 CTA가 화면 밖으로 밀리지 않아야 합니다.

금지 ​

  • CRM 메뉴 아래에 거래처 원장 또는 범용/임대/관리비 계약 원장을 복제하지 않습니다.
  • 노트를 상위 제품 영역으로 표시하고 그 아래 CRM 전체가 종속된 것처럼 구성하지 않습니다.
  • 수주 단계 이동만으로 계약을 확정하거나 회계·청구를 생성하지 않습니다.
  • 성공 응답 없이 저장 완료 토스트를 표시하지 않습니다.
  • 본사를 가상의 파트너로 생성하거나 CRM 딜에 파트너 정산 fact를 직접 저장하지 않습니다.

테스트 위치 ​

  • src/composables/__tests__/useCrmWorkflow.spec.js: 원자적 전환과 멱등 재요청
  • src/composables/__tests__/useCrmDeals.spec.js: 선택 딜 SSOT, 단계 이동, 독립 수주 확정, 멱등 handoff
  • src/composables/__tests__/crmWorkflowPolicy.spec.js: 페이지별 저장 모드
  • src/components/crm/__tests__/WorkflowBoundaryMol.spec.js: 사용자에게 보이는 서버 미저장 고지
  • src/components/crm/pipeline/deal/general/__tests__/DealHandoffUi.spec.js: 목록 선택, entitlement별 계약 CTA, source query 전달