Skip to content

FE 메인테이너 — 워크스페이스 홈

전역 헤더·언어 전환 (2026-07-16)

  • LeyveHomeAnchorMol은 데스크톱에서 Leyve Cloud, 모바일에서 홈 아이콘을 표시한다. 브랜드 텍스트에는 SSOT .font-brand를 사용하며 --font-family-brand = Google Sans가 적용된다.
  • SSOT .navbarpadding-inline: 1rem을 소유한다. 개별 AppHeaderOrg에서 px-*를 중복 적용하지 않는다.
  • LocaleSwitcherMol은 모든 AppHeader에서 공통으로 소비되지만 fixed positioning으로 화면 왼쪽 아래에 표시되어 헤더 폭을 점유하지 않는다. 활성 상태도 neutral-subtle로 낮춘다.
  • 상단 오른쪽은 AccountScopeSwitcherMol과 로그아웃처럼 현재 업무에 필요한 컨트롤만 유지한다.
  • 회귀 검증은 src/components/navigation/__tests__/globalHeaderConsistency.spec.js에서 브랜드명·브랜드 폰트·navbar 패딩·언어 전환 위치를 검사한다.

간결한 정보 위계

  • 범위·상품 표시 기준·집계 기준처럼 필요할 때만 읽는 설명은 공용 InfoHint로 제공한다.
  • 상품 카드 안에는 한국어 상품명과 subtitle-sm text-neutral-moderate 영문 정식명, 이동 affordance만 둔다. 카드 전체가 버튼이므로 내부에 별도 InfoHint 같은 중첩 인터랙션을 넣지 않는다.
  • 지속 노출하는 보조 레이블은 text-neutral-moderate를 사용한다. text-neutral-subtle은 비활성·메타 정보처럼 더 낮은 위계에만 사용한다.
  • 계정·AI 카드의 실행 버튼이 이미 목적을 설명하므로 반복 문장은 두지 않는다.

진입과 문맥

  • 라우트: /workspace/home
  • 화면: src/components/workspace/home/HomePag.vue
  • 계정 문맥: useAccountContext
  • 상품 권한: useModuleSubscription
  • 데모 경영현황: useBusinessOverview

워크스페이스 홈은 현재 Workspace 범위만 사용한다. AccountScopeSwitcherMol에는 접근 가능한 Workspace만 표시하며, 현재 Workspace entitlement와 권한을 기준으로 메뉴를 연다. Organization의 계약·결제·Workspace 관리는 company-admin에게만 보이는 왼쪽 메뉴 하단 조직관리에서 시작한다.

workspaceNav.jsPRODUCT_CATEGORIES의 범주 순서를 사용해 전역 상품 메뉴를 그룹화한다. filterWorkspaceNavItems()가 entitlement가 없는 상품과 그 결과 비게 된 그룹을 함께 제거한다. 내 계정placement: 'footer', 조직관리는 기존 company-admin 게이트를 유지한 채 같은 하단 영역에 렌더한다. AppAsideOrg.vue에서 상품명이나 그룹을 다시 하드코딩하지 않는다.

WORKSPACE_PRODUCT_ITEMSPRODUCT_MODULES를 1:1로 변환하며 englishName도 함께 전달한다. preview CRM은 같은 productVocabulary의 영문명을 사용한다. salespurchasingsales-purchasing 카드로 합치는 예외는 없다. 판매 카드는 판매·매출채권/sales/console/transaction, 구매 카드는 구매·매입채무/purchasing/console/transaction을 사용하고 각자의 entitlement만 검사한다. /workspace/trade는 두 상품 중 하나 이상이 있을 때 접근 가능한 비교 허브로 유지하되 Workspace 상품 카드로 노출하지 않는다.

데모 데이터 격리

useBusinessOverview는 현재 mock 증빙을 집계하므로 DEMO_COMPANY.id에서만 렌더한다. Supabase에서 복원한 실제 Company에는 mock 매출·매입·VAT·미분류 건수를 절대 노출하지 않는다. 실제 집계 API가 연결되면 Company/Office 식별자를 입력으로 받는 repository로 교체한다.

회귀 검증

  • Workspace가 없는 실제 Organization에서 데모 경영현황이 보이지 않는다.
  • Company 가상 범위 선택 행과 전사 관리 문구를 Workspace 전환 dialog에 표시하지 않는다.
  • 활성 entitlement만 좌측 메뉴와 업무 카드에 표시된다.
  • 상품은 PRODUCT_CATEGORIES 범주 아래에 한 번만 표시되고 빈 범주는 렌더되지 않는다.
  • 내 계정조직관리는 상품 그룹 아래의 하단 영역에 유지된다.
  • 판매와 구매가 각각 정식명·독립 카드·독립 진입 경로로 표시되고 매출·매입 통합 상품 카드는 없다.
  • 모바일에서도 Office 관리와 상품 카드가 가로로 넘치지 않는다.