다크모드
기준정보 개요 프론트엔드 메인테이너 가이드
목적
기준정보는 Workspace 전역 메뉴의 단일 진입점이다. 전역 메뉴에서 세부 항목을 펼치지 않고 /master-data/overview에 진입한 뒤, 기준정보 전용 사이드 메뉴와 개요 카드를 통해 각 화면으로 이동한다.
라우트와 셸
/master-data는/master-data/overview로 리다이렉트한다./master-data/overview는master-data/app-view의 자식 라우트다.- 레이아웃:
src/views/master-data/LayoutView.vue - 개요:
src/views/master-data/LandingView.vue - 데스크톱 메뉴:
src/components/master-data/AppSideNavMenuOrg.vue - 모바일 메뉴 시트:
src/components/master-data/app-overlays/SheetAsideOrg.vue - 전역 Workspace 메뉴 SSOT:
src/composables/workspaceNav.js
개요 라우트를 셸 밖의 독립 페이지로 옮기지 않는다. 데스크톱 사이드 메뉴와 모바일 메뉴 시트가 동일한 AppSideNavMenuOrg.vue를 사용해야 한다.
정보 구조
사이드바와 개요 카드는 하나의 내비게이션 SSOT에서 다음 구조를 파생한다.
- 공간: 프로퍼티, 유닛
- 사람·거래처: 멤버, 거래처
- 차량: 1개 항목이므로 그룹을 만들지 않고 직속 항목으로 표시
- 수납 정보: 가상계좌, 자동이체
- 관련 업무: 소유·점유
내비게이션 라벨에는 불필요한 관리 접미사를 붙이지 않는다. 화면의 목적을 설명해야 할 때만 페이지 제목에 ○○ 관리를 사용할 수 있다.
소유·점유는 기준정보 소유 화면이 아니라 관련 업무 링크다. /contract/integration/unit/general로 이동하면 소유·점유 셸이 내비게이션 문맥을 소유한다. 사업자등록 프로필·현금영수증 발급정보·관계자는 향후 Party 상세의 연결 정보로 수렴할 대상이며, 이번 내비게이션 정비는 저장 모델을 마이그레이션하지 않는다.
데이터 흐름
개요는 실제로 연결된 수치만 노출한다.
- 유닛 건수:
usePropertyUnitMaster()의units.value.length - 나머지 카드: 신뢰할 수 있는 집계 소스가 연결되기 전까지 건수 미표시
자리 채우기용 숫자나 화면별 하드코딩 건수를 추가하지 않는다. 새로운 집계를 표시하려면 해당 마스터의 읽기 모델 또는 집계 계약을 먼저 확정한다.
디자인 시스템과 반응형
- 페이지 표면은
PageBody와 EDSpage-header,card,badge, 타이포그래피 클래스를 사용한다. - 제품 로컬 CSS,
!important, EDS 미게시 우회는 금지한다. - 카드 그리드는 모바일 1열, 작은 데스크톱 2열, 넓은 데스크톱 3열이다.
- 콘텐츠 최대 폭은
max-w-5xl이며 큰 화면에서 카드가 과도하게 늘어나지 않게 한다. - 검증 기준은 360, 412, 448, 960, 1280, 1440, 1920px이고 모바일 대표 화면은 412px이다.
변경 시 검증
workspaceNav.spec.js: 전역 기준정보가direct항목인지 확인globalIaIntegrity.spec.js: 개요 라우트가 기준정보 셸 아래에서 해석되는지 확인MobileShellCloseContract.spec.js: 모바일 메뉴의 닫힘 계약 확인sidebarDisclosureChevronConsistency.spec.js: 사이드 메뉴 disclosure 규칙 확인- 브라우저: 각 기준 폭에서 가로 넘침, 카드 열 수, 데스크톱 사이드바 및 모바일 시트 확인