Leyve Docs

다크모드

HR 문서센터 페이지 (FE 메인테이너) ​

독자: FE 메인테이너/AI. 문서센터(급여명세서·재직증명서) 화면을 이어 개발하려면 알아야 할 것. 작성: 2026-07-10, 공급사 비노출 경계 갱신: 2026-07-18. BE 연동 계약은 ../backend/hr-document-center-external-archive.md가 정본.

라우트 ​

  • /human-capital/document-center/general → src/views/human-capital/document-center/general/IndexView.vue

컴포넌트 트리 ​

IndexView
└─ MainOrg — 상태 허브(previewId·selectedId·vaultEmployeeId·tableRef + 필터 3종 소유) + 발급/일괄생성→재조회 배선
   ├─ DataToolBarOrg — 필터 3종(defineModel: period·docType·status) + [증명서 발급] + [명세서 생성](귀속월 게이트, emit createPayslips)
   ├─ DynamicTableOrg — 목록. 필터 props 소비(귀속월=payslip.period 또는 cert.issuedAt 월 일치)·빈 상태 행. reload() defineExpose. cert 행은 귀속월/지급총액/보관번호 '—'. 외부 연동 데모 이력이 있는 급여명세서는 [처리내역] 제공
   ├─ SheetDeliveryTraceArt — 처리내역·외부 보관 정보(급여명세서 데모 전용, 미구현 다운로드·증명서 액션 없음)
   ├─ SheetVaultArt — 직원별 문서 보관함(미구현 진본 확인 액션 없음)
   ├─ SheetPreviewDocumentArt — 문서종 무지 프리뷰(iframe srcdoc WYSIWYG + 인쇄)
   └─ SheetCreateCertArt — 증명서 발급 시트(종류[재직/경력] + 직원 + 용도, valid 게이트 — 종류별 seam 분기)

경로: src/components/human-capital/document-center/general/.

소비 컴포저블 (전부 src/composables/) ​

파일역할
documentCenterMock.js문서 시드·어휘(DOC_TYPE/status/typeLabel) + createEmploymentCert·createCareerCert(퇴사자 periodEnd=계약 terminationDate 스냅샷)·createPayslipBatch(period)(전 직원·중복 스킵·payrollMock 실계산) 뮤테이션
documentCenterRepo.js어댑터 seam — 컴포넌트는 이것만 호출(list/find/byEmployee/createEmploymentCert/createCareerCert/createPayslipBatch). mock↔Supabase 스왑 지점
documentTemplates.js문서종→렌더러 레지스트리 — 프리뷰 시트의 유일한 템플릿 진입점
payslipTemplate.js / employmentCertTemplate.jsprint HTML(Noto Sans KR·A4). 순수 문자열 — node(PDF 생성기)와 브라우저 공용. employmentCertTemplate은 재직·경력 공용 빌더(renderEmploymentCertHtml/renderCareerCertHtml — 제목·기간·문구만 config)
payrollMock.js급여 실계산(지급·4대보험·소득세) — payslip 렌더 데이터
contractMock.js직원 마스터(employees: 이름·회사·jobDuty·hireDate) — cert 렌더 데이터·발급 시트 select

데이터 흐름 ​

  • 조회: DynamicTableOrg reload() → documentCenterRepo.list(). 프리뷰는 find(id) → renderDocumentHtml(doc)(레지스트리 디스패치) → iframe srcdoc.
  • 발급: SheetCreateEmploymentCertArt → repo.createEmploymentCert({employeeId, purpose}) → 성공 시 자체 close + created(rowId) emit → MainOrg가 tableRef.reload() + previewId 세팅 + 프리뷰 showModal().
  • 일괄 생성: 툴바 createPayslips(period) emit → MainOrg repo.createPayslipBatch(period) → tableRef.reload()(새 행은 귀속월 필터와 일치해 즉시 표시).
  • 필터: MainOrg가 ref 3개 소유 → 툴바 v-model:period/doc-type/status ↔ 테이블 props. 테이블 computed가 적용(''=전체).
  • 컴포넌트는 mock을 직접 만지지 않는다(어휘 함수 제외) — 데이터 접근은 seam 한 곳.

DS 패턴 ​

  • 프리뷰 = sheet sheet-right sheet-width-5xl(문서가 210mm 폭이라 예외적 광폭). 발급 시트 = sheet-width-2xl(집중 폭, 단순 폼).
  • 발급 시트 = 하위 리소스 전용 SheetCreate(CLAUDE.md §0-8), 커밋 버튼은 sheet-footer([취소]+[발급]), valid 게이트(§0-7 — dirty 개념 없음, 생성 폼).
  • 폼 어휘: field field-md + field-label + input input-bordered input-md.

확장 포인트 — 새 문서종 추가 절차 ​

  1. xxxTemplate.js 템플릿 파일 1개(순수 문자열 render 함수).
  2. documentTemplates.js에 엔트리 1줄.
  3. documentCenterMock.js에 DOC_TYPE·typeLabel·(필요시 생성 뮤테이션).
  4. 진입 UI(툴바 버튼 + SheetCreate 시트) — 재직증명서 미러. 프리뷰 시트·테이블은 무수정으로 동작한다(문서종 무지).

게이팅·한계 ​

  • repo.register/issue(외부 보관·증명)는 NOT_WIRED throw — 운영 어댑터 준비 후 라이브 구현으로 스왑(backend 문서 §6).
  • 발급·생성 문서는 in-memory — 새로고침 시 소실(라이브 어댑터 전환 시 해소).
  • 공급사 이름은 화면·도움말·공개 문서에 노출하지 않는다. 화면에는 외부 전자문서 보관처럼 기능 중심 이름만 사용한다.
  • 실제 핸들러가 없는 [발송]·[일괄 발송]·[원본 다운로드]·[송달증명서 발급]·[진본 확인] 액션은 노출하지 않는다. 운영 어댑터 구현 시 권한·실패 상태·감사로그까지 함께 설계한 뒤 다시 추가한다.
  • 툴바 필터·[명세서 생성]은 실동작(2026-07-10 배선 — Playwright 11항목 실측).

테스트 ​

  • src/composables/documentCenterMock.test.js — 어휘·시드·생성 뮤테이션
  • src/composables/employmentCertTemplate.test.js — 필수 항목·주민번호 부재
  • src/composables/documentTemplates.test.js — 디스패치
  • src/composables/documentCenterRepo.test.js — seam·NOT_WIRED 가드
  • src/composables/payrollMock.test.js — 급여 계산(payslip 행만 순회 — cert 시드 주의)