Leyve Docs

다크모드

모듈 개요 — 프론트엔드 메인테이너 ​

목적 ​

Workspace 상품 카드와 상품 메뉴의 첫 진입을 실제 작업 목록에서 Module Overview로 분리한다. 개요는 상태 파악과 다음 작업 선택을 담당하고, 기존 작업 화면은 그대로 유지한다. ✅구현

코드 구조 ​

  • 상품 진입 SSOT: src/composables/productCatalog.js
    • overviewEntry: Workspace에서 상품을 선택할 때의 첫 화면
    • operationalEntry·consoleEntry: 기존 실제 업무 화면
    • entry: overviewEntry 호환 alias
  • 개요 업무 정의: src/composables/moduleOverviewCatalog.js
  • 공통 개요: src/components/workspace/module-overview/ModuleOverviewPag.vue
  • 관리비 현황: src/components/workspace/module-overview/ServiceChargeOverviewOrg.vue
  • 관리비 추이 차트: src/components/workspace/module-overview/ServiceChargeTrendChartOrg.vue
  • 일반 모듈 라우트: src/router/moduleOverviewRoutes.js
  • 빌링 라인 개요 라우트: src/router/buildLineRoutes.js
  • 빌링 라인 메뉴: src/components/billing/_core/shell/LineAsideOrg.vue
  • View seam: src/views/workspace/module-overview/IndexView.vue

재무회계 /accounting/overview와 장기수선계획 /long-term-repair-planning/overview는 기존 전용 화면을 재사용한다. 관리비·임대차·매출·매입은 공통 개요 컴포넌트를 각 상품의 LineLayoutView 아래에 배치해 전용 header·aside·mobile sheet 문맥을 유지한다. 그 밖의 상품과 CRM은 Workspace 셸 아래의 공통 개요를 사용한다.

빌링 라인의 /overview는 buildLineRoutes()가 만드는 첫 child다. moduleOverviewRoutes.js에 같은 경로를 중복 등록하면 라우트가 Workspace 셸에 매칭되므로 금지한다. LineAsideOrg의 대시보드는 descriptor.launcher.entry를 사용하며, 모바일에서는 sheet-line-navigation을 닫은 뒤 같은 경로로 이동한다.

화면 계약 ​

공통 화면은 다음 순서로 구성한다.

  1. Page Header: 뒤로가기, 모듈명, Workspace명
  2. 영문 정식명과 모듈 설명
  3. 모듈별 운영 현황
  4. 주요 업무 카드
  5. 데이터가 없을 때의 다음 행동

운영 집계 계약이 없는 모듈에는 숫자 KPI나 그래프를 만들지 않는다. 업무 카드의 모든 경로는 실제 라우트여야 하며, globalIaIntegrity.spec.js에서 상품 진입점과 권한 경계를 함께 검증한다.

Page Header에는 주요 업무 버튼을 넣지 않는다. 360–448px에서 제목·Workspace명을 압박하고 본문의 지금 할 일·업무 카드와 진입점이 중복되기 때문이다. 영문 정식명은 subtitle-sm, 설명은 body-sm으로 두며 관리비 KPI는 실제 정기 관리비 개요와 같은 subtitle-sm + title-lg + body-sm 단위 체계를 사용한다.

관리비 반응형 구성 ​

  • 360·412·448px: KPI 2열, 현황·할 일 1열, 최근 정산 표는 카드 내부 가로 스크롤
  • 960px 이상: KPI 2열 유지 가능, 본문은 가용 폭 사용
  • 1280px 이상: KPI 4열, 추이 그래프와 할 일 2:1
  • 최대 콘텐츠 폭: max-w-5xl

추이는 Chart.js 4의 혼합 차트다. 부과액·수납액은 그룹 막대, 미수잔액은 선으로 표시하고 최근 6개 회차만 사용한다. ServiceChargeTrendChartOrg가 필요한 controller·element·plugin만 등록하며 페이지가 lazy-load될 때 별도 chart chunk로 내려간다. 색은 새 제품 CSS나 raw hex를 만들지 않고 EDS의 text-primary-bold·text-success-bold·text-warning-bold·text-neutral-moderate를 DOM에서 계산해 canvas에 전달한다. 높이는 모바일 224px, sm 이상 256px이고 maintainAspectRatio: false로 카드 가용 폭을 따른다. 차트가 없어도 최근 정산 표가 정확한 수치를 계속 제공한다.

index.html의 버전 미고정 Chart.js CDN과 전역 Chart는 제거했다. chart.js 패키지 의존성을 사용하며, 기존 headquarters 대시보드도 chart.js/auto를 명시적으로 import한다.

확장 절차 ​

  1. moduleOverviewCatalog.js에 실제 라우트 기반 업무 카드를 정의한다.
  2. 운영 집계가 있다면 모듈 소유 read model을 연결한 전용 섹션을 만든다.
  3. 공통 Page Header와 업무 카드 구조는 유지한다.
  4. 빈 데이터·부분 실패·권한 없음 상태를 추가한다.
  5. 상품 진입점, 업무 카드 라우트, 360·412·448·960·1280·1440·1920px를 검증한다.