Skip to content

임대차 독립 제품 원장 — FE 핸드오프

데이터 seam

propertyOccupancyPeriodRepo.js가 v2 계약·차임·보증금·정산 RPC를 제공하고 usePropertyOccupancyPeriods.js가 Office scope, stale 응답 폐기, request key retry, revision conflict 재조회를 담당한다. useLeaseContracts.js가 기존 charging/deposit/settlement 화면에 이 seam을 노출한다.

차임 목록은 listLeaseRentCharges({ companyId, officeId })lease_rent_charges를 Office 범위로 직접 조회한다. 다른 상품의 청구·회계 테이블을 읽지 않는다. 계약 목록과 차임 목록은 같은 Office scope watcher에서 병렬 로드되고 scope 변경 시 함께 비운다.

서버 계약 normalize는 다음을 보장한다.

  • 공간 표시는 legacy unit key가 아니라 property_spaces.display_name 우선.
  • lease_contract_terms가 있을 때만 financialTermsPersisted=true.
  • 월 차임·과세·납부일과 보증금 약정/수취/반환/정산공제/잔액을 숫자로 제공.
  • 금액이 없는 legacy 계약은 null을 유지하고 0으로 변환하지 않음.

useMoveOutSettlement.js는 관리비 billingNature import를 제거하고 임대계약에 스냅샷된 세율을 사용한다.

현재 화면 배선

  • ✅ charging/deposit 목록은 v2 서버 계약의 실제 월 차임·보증금 잔액을 표시한다.
  • ✅ Supabase 퇴거정산 잠정 저장과 확정은 새 서버 RPC를 사용하며 별도 end_lease_contract를 호출하지 않는다.
  • SheetCreateLeaseContractArt가 active unit·active Office party assignment를 로드해 v2 초안을 작성한다. DialogLeaseOperationArt가 활성·초안취소와 월 차임 산정·확정·취소를 revision/request-key seam에 연결한다.
  • ✅ charging 목록은 계약마다 한 행의 canonical projection만 렌더링하고 최근 차임만 요약한다. 계약명 클릭은 차임 유무와 무관하게 선택한 정확한 계약의 SheetReadLeaseContractArt를 연다.
  • ✅ 3xl 계약 상세는 관리코드를 zone-top 우측에만 표시하고, draft만 단일 card 전체 read↔edit로 전환한다. 저장은 dirty && valid, 취소·닫기는 dirty 확인을 거친다.
  • updateContractV2는 계약·terms aggregate payload와 expected revision을 public RPC로 전달한다. 활성 계약의 종료는 상세 edit가 아니라 퇴거정산 final 경계로 안내한다.
  • ✅ 보증금 수취·반환 dialog는 실제 금액·일자·메모를 RPC로 제출하고 DialogDepositReverseArt는 정정 가능한 수취·반환 원행만 선택해 reversal을 추가한다.
  • ✅ 계약 상세의 차임 이력은 서버 lease_rent_charges 스냅샷만 표시한다. 기존 대표 금액, 인상 스케줄, 간주임대료, 분개 미리보기는 제거했다.
  • ✅ 차임·보증금·퇴거정산 헤더의 기간과 Office 표시는 현재 로컬 월·활성 Office에서 파생한다.
  • ✅ 차임 산정 화면의 미수·수납 탭은 lease 전용 repo/composable을 통해 확정 차임 미수, 부분수납과 append-only 정정을 처리한다.
  • ✅ mock 계약·임차인·금액 fallback은 제거했다. no-config는 unavailable 경고, 서버 연결 후 0건은 계약 empty state로 구분한다.
  • ✅ Main mutation은 Company·Office scope key와 mutation sequence를 캡처한다. stale 결과가 undefined이거나 scope가 달라지면 성공/오류/close/complete를 남기지 않는다.
  • ✅ 기준정보 loader도 별도 sequence/key로 stale rows·error·loading을 모두 폐기하며 Office watcher가 선택 상세·pending·feedback을 초기화한다.
  • ✅ 계약 작성과 초안 편집의 시작일·종료일은 native input[type=date] 대신 SSOT DatePicker를 사용한다. useIsoDateValue가 서버 ISO 문자열과 @internationalized/date 값을 양방향 변환하므로 payload는 기존 YYYY-MM-DD 계약을 유지한다.

구현 규칙

계약 작성은 3xl create sheet를 사용한다. 공간 selector는 active unit, 임차인은 active Office party assignment를 사용한다. 관리코드는 목록에 노출하지 않고 계약 등록번호·계약명·공간·임차인을 식별자로 사용한다. create와 draft edit는 모든 필드를 펼친 단일 outer card를 쓰며 별도 update sheet를 만들지 않는다. 활성화 후 금액 조건은 서버에서 불변이므로 edit UI를 제공하지 않는다.

차임 confirmed와 final 정산은 불변 스냅샷이다. 수정 UI 대신 취소/재생성 또는 정정 흐름을 제공한다. 모든 submit은 disabled/dirty/valid, pending 중복 클릭, revision conflict 재조회 상태를 반영해야 한다.

usePropertyOccupancyPeriods.js는 assess/confirm/cancel 응답을 leaseRentCharges에 upsert한다. 보증금 mutation 응답은 서버 contract payload의 잔액과 응답 entry를 합쳐 현재 계약의 depositEntries를 유지한다. reversal 응답이면 원행의 reversible=false도 즉시 반영한다. 재접속 시에는 계약 관계의 보증금 원행과 별도 차임 목록을 다시 읽는다.

차임 수납은 leaseRentCollectionRepo.jsuseLeaseRentCollections.js가 소유한다. 목록·상세는 billingReceivableStatusMeta만 공통 소비하며 관리비나 계약 Billing store/RPC를 import하지 않는다. LeaseRentCollectionPanel.vue가 검색·필터·목록을, SheetLeaseRentReceivableArt.vue가 read/record/reverse mode와 3xl 집중 폭을 담당한다. Office 전환 시 sequence를 증가시켜 이전 Office의 늦은 목록·명령 결과를 폐기하고 ambiguous retry에는 같은 request key를 재사용한다.

검증 위치:

  • src/components/lease/console/charging/__tests__/LeaseOperationsUi.spec.js
  • src/components/lease/console/charging/__tests__/LeaseScopeMutationUi.spec.js
  • src/composables/__tests__/propertyOccupancyPeriodRepo.spec.js
  • src/composables/__tests__/usePropertyOccupancyPeriods.spec.js
  • src/composables/__tests__/useLeaseContractsLoader.spec.js
  • src/composables/__tests__/leaseRentCollectionRepo.spec.js
  • src/composables/__tests__/useLeaseRentCollections.spec.js
  • src/components/lease/console/charging/__tests__/LeaseRentCollectionUi.spec.js
  • src/composables/useIsoDateValue.spec.js