Skip to content

회원가입→첫 부과 — FE 메인테이너

라우트

  • /auth/signin/auth/password-reset → 메일 링크 /auth/password-recovery
  • /onboarding/products?mode=manage
  • /administration/organization/workspace/property
  • /service-charge/setting/item/general
  • /service-charge/actual/service-charge/actual/console/general

주요 구현

인증

  • passwordAuthRepo: requestPasswordReset, resetPasswordFromRecovery.
  • 요청/완료 페이지는 기존 card·field·button 토큰만 사용한다.
  • 완료 시 /auth/signin?password=changed로 복귀한다.

상품

  • useProductOnboarding.currentQuantities: 원격 subscription item 수량 기준선.
  • hasSubscriptionChanges: module delta 또는 수량 delta가 있을 때만 true.
  • 관리 모드의 최종 버튼은 무변경 시 disabled이며 submitCheckout도 같은 게이트를 재검증한다.

프로퍼티

  • MainOrg.vue의 단일 페이지 인라인 편집 패턴을 유지한다.
  • manualAreaTypes에서 D·E와 합계를 computed로 파생하고, 저장 시 source:'MANUAL' 스냅샷을 만든다.
  • 보조 설명은 InfoHint로 점진 공개한다.
  • propertyUnitMaster.propertyUnitsFromOffice()는 운영 Office의 propertyData.units[]를 동·층·호 기준 유닛으로 변환한다. 공공데이터 동명 앞에 현재 Office 이름이 공백 차이만 두고 반복되면 표시용 dongName에서만 제거하고 원문 기반 unitCode는 유지한다. propertyUnitDisplayName()은 세 원자 필드에 단위를 붙여 동-층-호 표시명을 파생한다. useFirstChargeReadiness가 이를 useAllocations.syncOfficeDimensions()에 동기화하며 운영 Office에서는 데모 멤버·계약·금액을 제거한다. 대신 활성 부과항목 × 실제 유닛의 unit-only 배분 원자를 만들고 면적값을 채운다.

부과항목

  • 상단 setup strip은 현재 기본 프리셋 항목 수와 다음 단계 CTA를 제공한다.
  • 항목명 클릭→상세, read↔edit, 배분기준 값 관리 시트는 기존 캐논을 유지한다.
  • useFirstChargeReadiness.unitMasterReady가 false면 상세의 호별 배분값을 0건으로 표시하고 값 보기/관리를 비활성화한다. 운영 Office에 데모 유닛을 노출하지 않는다.
  • 4개 고정 항목에 맞지 않던 가짜 페이지네이션은 제거했다.

첫 부과

  • actual/blocks/DynamicTableOrg.vue의 2025년 정적 배열을 제거하고 useBillingPeriod().periods를 표시한다.
  • 빈 상태에서 추가 CTA를 설명하고, 정산명 클릭으로 콘솔을 연다.
  • SheetCreateConsoleArt.vue는 current month 기본값, 날짜 유효성, 중복 생성 게이트, createPeriod 커밋을 소유한다.
  • useFirstChargeReadiness는 프로퍼티 면적·유닛 수 정합·활성 항목을 검사한다. setupStepskey/message/actionLabel/path/menuPath 구조로 각 미충족 조건의 바로가기와 권한 대체 경로를 제공하고, 기존 문자열 소비처를 위해 blockers를 함께 파생한다. 미충족 시 blocker alert를 보여주고 추가/생성을 비활성화한다.
  • 정기 관리비 목록의 MainOrg.vueuseFirstChargeReadiness.setupSteps 중 첫 항목만 압축 Alert에 표시한다. Alert는 EDS alert-icon + alert-content(title/description/actions) + alert-close anatomy를 그대로 사용하며 닫기 상태는 페이지 인스턴스 안에서만 유지한다. blocker 구성이 바뀌면 새 이유를 놓치지 않도록 Alert를 다시 표시한다.
  • DataToolBarOrg.vue추가는 준비 미완료 상태에서도 disabled 처리하지 않고 request-create를 emit한다. 부모가 준비 완료면 SheetCreateConsoleArt, 미완료면 native EDS Alert Dialog dialog-first-charge-readiness-art를 연다. Dialog는 role="alertdialog", closedby="none", Title·Description·Cancel·Action을 가지며 남은 모든 단계와 메뉴 경로를 표시한다. 첫 단계가 route면 RouterLink, 청구 대상 명부면 기존 시트를 연다.
  • SheetCreateConsoleArt.vue 안의 ready 검증과 저장 버튼 gate는 우회 진입에 대비한 방어선으로 유지한다. 미구현 기능의 disabled+상태 배지와 데이터 선행조건 Alert Dialog를 같은 상태로 표현하지 않는다.
  • 정기 관리비 목록 선택 상태는 MainOrg.vue가 소유하고 DynamicTableOrg.vuev-model:selected-codesDataToolBarOrg.vueselectedCount로 연결한다. 테이블은 단일 open 엔트리이면서 useConsoleStage.statusOf('charging')==='pending'인 행만 선택 가능하게 한다. 헤더 체크박스도 삭제 가능한 행만 전체 선택한다.
  • 데이터 툴바의 삭제는 왼쪽 destructive action이며 선택이 없으면 disabled다. 선택 후 DialogDeleteBillingPeriodsArt.vue Alert Dialog를 열고, 확인 시 useBillingPeriod.deleteDraft()를 호출한다. 컴포저블은 단일 open 체인을 다시 검증하고 billingRepo.deleteChain()을 통해 원격 삭제가 성공한 뒤 로컬 상태를 제거한다.
  • 부과 시작·확정·과거 회차는 체크박스부터 비활성화하지만, 최종 권한은 guard_service_charge_draft_period_delete 서버 trigger가 소유한다. 실패 시 선택과 Dialog를 유지하고 재확인 문구를 표시한다.
  • 목록 검색 도구는 SSOT 동적 테이블의 input-group + search action 구조와 gap-2(8px)를 그대로 사용한다. 제품 로컬로 추가돼 있던 입력창 내부 필터 버튼은 중복 control이라 제거했다. CSS override나 새 페이지 스타일은 없다.
  • 같은 watcher가 useCharges.syncOfficeCharges()를 호출해 운영 Office 부과금액을 0, targetCount를 실제 유닛 수로 초기화한다. 같은 Office 안에서 사용자가 입력한 금액은 재렌더링 시 다시 초기화하지 않는다.
  • 부과산정은 viewport와 무관하게 하나의 table-editable만 렌더한다. w-max min-w-full whitespace-nowrap으로 열 구조를 보존하고, MainOrgw-full grow overflow-auto 컨테이너가 모바일 좌우 스크롤을 소유한다. 항목명 sticky-col, 상세 sticky-col-end, tfoot 합계와 입력 셀을 모바일에서도 제거하거나 카드로 재투영하지 않는다. 이 구조가 회계형 행·열 비교와 셀 입력 복사·붙여넣기의 단일 UI 계약이다.
  • 항목 수가 적은 첫 부과에서는 비기능 검색·세금 필터·가짜 선택 수·100페이지를 렌더하지 않는다. 데이터 툴바의 중복 부과하기를 제거하고 스테이지 푸터의 시작·확정 행동만 상태 게이트를 소유한다.
  • 현재 부과총액이 0이면 일반 개요에서 누적 수납·미수·연체를 처리해 prototype seed를 현재 기간 지표로 오해하지 않게 한다.
  • 유닛명세 DynamicTableOrg는 유닛을 가로 열로 피벗하지 않는다. 유닛=세로 행, 활성 부과항목=열, 합계=마지막 열이며 25호실씩 페이지 처리한다. 첫 유닛 열은 모든 화면에서 동-층-호 파생 표시명을 sticky로 유지한다. 데스크톱에는 비교용 동 | 층 | 호 보조 열을 더하고 모바일에서는 숨긴다. 금액 셀은 기존 배분 근거 시트를 연다.
  • 유닛명세·계약명세·멤버명세의 DynamicTableOrg는 마운트 시 useFirstChargeReadiness()를 호출한다. 직접 URL 진입·새로고침에서도 운영 Office 차원과 0원 항목을 먼저 동기화해 모듈 초기 데모 시드가 보이지 않게 한다.
  • 계약명세·멤버명세도 같은 방향을 사용한다. 계약/멤버=세로 행, 활성 부과항목=열이며 25건씩 페이지 처리한다. 축 데이터가 0건이면 캐논 empty-state로 필요한 연결정보를 안내하고 표·가짜 페이지네이션을 렌더하지 않는다.
  • 공용 DateRangeFilter는 실행 시점의 현재 연도 1월 1일~12월 31일을 기본 범위로 만든다. 정기 관리비 목록도 같은 컴포넌트를 사용한다.
  • 헤더의 프로퍼티명·약칭·호실 수는 useAccountContext.activeOffice에서 읽는다.
  • 콘솔 일반·부과산정·유닛명세·계약명세·멤버명세 헤더와 보고서 기간은 동일한 useBillingPeriod Office-scoped period를 소비한다. 명세 헤더는 activeOffice.name을 표시하고 뒤로가기는 router.back()을 호출한다.

저장 스코프

  • buildOfficePeriodLine(line, officeId)는 운영 UUID Office만 line@officeId로 스코프한다.
  • billingRepo는 scoped key에서 office UUID를 추출해 office_id와 함께 upsert한다.
  • 로그인 전 익명 조회는 수행하지 않는다. requireAuthenticatedRoute가 Supabase 세션을 확인한 뒤 hydrateBillingPeriods(user.id)를 호출해 Office 기간을 로드한다.
  • Vitest·로컬 데모 ID는 기존 localStorage 경로를 유지한다.

테스트 위치

  • src/composables/__tests__/passwordAuthRepo.spec.js
  • src/composables/__tests__/useProductOnboarding.spec.js
  • src/composables/__tests__/useBillingPeriod.spec.js
  • src/composables/__tests__/billingRepo.spec.js
  • src/composables/__tests__/useFirstChargeReadiness.spec.js
  • src/composables/__tests__/propertyUnitMaster.spec.js
  • src/components/administration/organization/workspace/property/propertyMaster.spec.js
  • src/components/service-charge/actual/console/charging/allocation-unit/__tests__/HeaderOrg.spec.js
  • src/components/service-charge/actual/console/charging/allocation-contract/blocks/__tests__/DynamicTableOrg.spec.js
  • src/components/service-charge/actual/console/charging/assessment/AssessmentReleaseQc.spec.js
  • src/components/service-charge/actual/__tests__/EntryAvailability.spec.js
  • src/components/service-charge/actual/__tests__/SubjectRosterUi.spec.js
  • src/components/service-charge/actual/__tests__/PeriodSelectionDeleteUi.spec.js
  • src/composables/__tests__/useBillingPeriod.spec.js
  • src/composables/__tests__/billingRepo.spec.js

알려진 제한

  • 카드/PG 결제 UI는 미구현이다.
  • Leyve 플랫폼의 data.go.kr Secret이 없으면 공공데이터 버튼은 비활성화된다. 이 키는 Company·Office 입력값이 아니다.
  • 직접 입력 areaTypes[]만으로는 동·호 식별자가 생기지 않는다. 실제 호실 마스터 입력 경로가 추가되기 전에는 수동 면적만 저장한 운영 Office의 첫 부과 게이트가 닫힌다.
  • 부과항목과 배분기준 값은 아직 Office별 서버 영속이 아닌 프로토타입 싱글톤이다.
  • 실제 제품 /feeV2/maintenance-fee에는 첫 부과 readiness 응답이 아직 없다. leyve-admin-frontend는 서버 계약 없이 목록 행이나 기존 정산 유무로 readiness를 추정하지 않으며, 서버 응답 추가 뒤 같은 Alert·Alert Dialog 계약을 소비해야 한다.