Leyve Docs

다크모드

Console 목록 구성·조회·페이지네이션 ​

2026-09-06 KST — 기존 2026-06-22의 수납 3축 전용 가이드를 대체합니다.

정본과 소유권 ​

  • 외형·구성은 설치된 EDS registry의 ETableCard, EListQueryBar, ECriteriaSelect, ETable, ETablePagination을 소비합니다. CSS·토큰은 manifest의 게시된 exact @leysys/eds 버전이 소유합니다.
  • 제품은 조회 초안/적용 상태, 원천 데이터, 선택 ID, 권한, 실제 업무 명령을 소유합니다. registry 내부에 도메인 상태를 넣지 않습니다.
  • ETableCard Body 순서는 Query → ListAction 또는 SelectionAction → TableBlock입니다. TableBlock 안에서 ETable의 스크롤 영역과 Pagination은 외부 간격 없이 인접합니다. CardFooter는 필수 영역이 아니며 페이지네이션을 넣지 않습니다.
  • Header에는 필요한 목록 정체성(제목·설명·카드 유틸리티)만 둡니다. 검색·조건·데이터 액션을 넣지 않습니다.
  • 표가 아닌 Portal 채널 펼침 카드 컬렉션은 원래 표현을 유지합니다. Body에 EListQueryBar를 사용하지만 의미 없는 ETable이나 페이지네이션을 만들지 않습니다.

타이틀 첫 데이터 컬럼 ​

2026-09-14 KST — Design LIST-PRIMARY-TITLE-FIRST-2026-09-14 / PR #631 / merge b14b5b32266f99283cd27e344c965e5b383d3a56을 채택합니다. 제품 배포 상태는 별도 검증 보고서에서 관리합니다.

순서는 선택/펼침 → 타이틀(주 식별자) → 유형·상태·기타 정보 → 행 액션입니다. 첫 데이터 컬럼은 항상 타이틀이며 Criteria·단일/복수귀속에 따른 분류 선행 예외는 없습니다. 조건·viewport가 바뀌어도 열 순서는 고정합니다.

거래처의 legalType과 roles를 분리했습니다. 표시 유형은 법인/개인이며 individual 조건은 개인사업자도 포함합니다. 원본 legalType·등록번호·UUID와 predicate는 유지합니다. 단일/복수 역할 여부가 타이틀 위치를 바꾸지 않습니다.

헤더와 행을 함께 이동하고 empty/error/loading colspan을 맞춥니다. 선택·상세·정렬·CSV는 DOM 열 인덱스가 아닌 기존 필드/ID를 유지합니다. 규칙 편차는 advisory이며, 데이터 매핑·클릭 대상·접근성 실패만 실제 고장으로 검증합니다.

제품 상태 API ​

상태 구현: src/composables/useConsoleListState.js, 기본 페이지 상태: src/composables/usePagination.js.

  1. 한 Main/목록에서 provideConsoleListState()를 만들고 실제 표의 useConsoleListRows(source, { key, searchText, criteria })가 원천을 연결합니다. 한 목록에는 원천 하나만 연결합니다.
  2. 원천을 부모가 이미 소유하거나 한 페이지에 표가 여러 개면 createConsoleListState()를 목록마다 만들고 명시적으로 연결합니다. 기존 도메인 composable의 계산·필터·저장은 대체하지 않습니다.
  3. searchText는 명시적 업무 필드 accessor입니다. 렌더된 DOM 문자열이나 임의 JSON 전체를 검색하지 않습니다.
  4. pageRows는 표시 전용입니다. filteredRows·원천 배열과 급여/청구 합계는 페이지 배열로 대체하지 않습니다. 그룹 목록은 최상위 그룹만 자르고 그 하위 행은 부모와 함께 렌더합니다.

usePagination은 page/pageSize/total, setTotal/setPage/setPageSize, slice를 제공합니다. 기본 20, 허용 크기는 20/50/100입니다. first/last 등 내부 계산 helper가 남아 있더라도 UI에 First/Last/goto/전체 옵션을 다시 노출하지 않습니다. 페이지 컨트롤의 렌더링은 ETablePagination이 소유합니다.

검색과 조건 ​

  • EListQueryBar mode=explicit. v-model은 draftSearch이고 search 이벤트가 적용 상태를 갱신합니다. 검색 제출 버튼은 입력 밖 1개입니다.
  • 상세 조건 invoker는 검색 입력 내부 끝의 EInputGroupButton(type=button)입니다. 기존 EDS 기본 전경을 사용하며 제품별 색상 override를 추가하지 않습니다.
  • 즉시 선택 기준은 inline ECriteriaSelect를 사용합니다. Query에 포함된 날짜·기간 초안은 해당 검색 제출 시 적용하고, Sheet 안의 날짜·기간 초안은 Sheet 적용으로만 반영합니다. 실제 조건이 없다면 trigger/Sheet도 없습니다.
  • Criteria Sheet는 native dialog + form.e-sheet-content 조합입니다. 검색 초안과 Sheet 조건 초안은 독립이며 Sheet 적용이 검색을 제출하지 않습니다. 취소·닫기 후 다시 열면 적용된 조건에서 초안을 복원합니다.
  • 조회가 적용되거나 pageSize가 바뀌면 1페이지로 돌아갑니다. 입력만 편집하는 동안 현재 결과와 페이지를 바꾸지 않습니다.

선택·액션·접근성 ​

  • 선택 ID는 업무 ID를 사용합니다. 현재 페이지 전체 선택과 결과 전체 선택은 같은 의미가 아닙니다. 현재 구현의 헤더 체크박스는 현재 페이지 선택입니다.
  • 선택 상태에서는 SelectionActionBar가 ListActionBar를 대체하고 role=status로 선택 개수를 한 번 표시합니다. 페이지 범위는 계속 표시합니다.
  • 선택 해제 또는 선택 행이 제거되어 기존 액션이 사라지면 연결된 선택 체크박스, 없으면 검색 입력으로 포커스를 복원합니다.
  • 전체 목록 작업은 ListAction, 선택 작업은 SelectionAction, 행 작업은 해당 행, 급여 확정 등 업무 단계 명령은 Card 밖 EPageActionBar가 소유합니다. 표를 페이지로 나눴다는 이유로 기존 API가 없는 일괄 작업을 만들지 않습니다.
  • ETable이 수평 스크롤을 소유합니다. Card Body나 데이터 액션 자식에 중첩 overflow 경계를 추가해 포커스 테두리를 자르지 않습니다. 별도 PageActionBar가 긴 명령 행을 소유할 경우 해당 영역이 국소 스크롤을 소유합니다.
  • 표는 caption, aria-labelledby 또는 aria-label로 이름을 갖고, 검색·조건·페이지 landmark 이름은 해당 목록을 식별합니다. 한 페이지 여러 목록은 서로 다른 이름을 사용합니다.
  • 로딩·오류·빈 결과는 목록의 실제 상태에 따라 표시합니다. 빈 결과에는 pager를 렌더하지 않습니다. 새 데이터가 없는 상태를 성공한 서버 조회로 표현하지 않습니다.

적용 범위와 예외 ​

이번 기능형 변경은 거래처·사업자, 시설 자산/유닛/거래처, 현장, CRM 4종, 룸/룸 타입, 조직 유닛, 구매요청/재고, 계정과목, 통합 계약 멤버/유닛, 급여/급여대장, 문서센터, 업무일지, 본부 고객계정과 Portal 채널을 포함합니다. 정적 목록·빌링·회계 보고서 전파와 실제 활성 경로 집계는 별도 전체 채택 보고서가 소유합니다. 이 문서만으로 모든 화면의 런타임 검증 완료를 주장하지 않습니다.

  • 보고서·계층 편집·로그인 조직 선택은 행 개수만 보고 목록 페이지로 강제 변환하지 않습니다.
  • Portal 채널의 카드 상세, 실제 권한/서버 원천, 기존 저장 미지원 안내는 유지합니다.
  • 원래 작동하지 않던 All/tag 1/tag 2와 업무일지 기간 토글은 조회 조건으로 남기지 않았습니다. 원천에 의미가 있는 유형·상태·기준일만 연결했습니다.
  • 본부 고객계정은 기존 서버 query/판매주체/status를 사용하고 반환된 배열을 클라이언트 페이지로 나눕니다. 이미 페이지된 서버 응답을 이 slice에 다시 넣으면 안 됩니다.

검증 근거와 한계 ​

기능형 targeted unit: functionalListAdoption.spec.js, functionalGroupedListAdoption.spec.js, PortalChannelsPag.spec.js, SalesCustomerAccountsPag.spec.js 및 각 도메인의 기존 관련 테스트를 사용합니다. synthetic fixture의 페이지 2/조건/선택 검증은 운영 서버 데이터 검증과 구분합니다.

최종 실제 route의 412/768/960/1024/1440 geometry, 수평 스크롤, Sheet 내부 날짜 picker와 포커스 검증은 해당 작업의 보존 artifact에 기록합니다. 기존 probe-pagination.mjs의 unprefixed selector·First/Last 측정이나 과거 build 수치를 현재 증거로 재사용하지 않습니다. 문서 미러·제품 게시·운영 배포는 별도 승인과 결과가 필요합니다.