CardSet 컴포넌트
CardSet은 동일한 데이터 소스의 여러 레코드를 반응형 카드 컬렉션으로 렌더링하는 데 사용됩니다. 제품 카탈로그, 애플리케이션 목록, 자산 카탈로그, 지식 항목 등 엔터티 요약을 빠르게 검색해야 하는 페이지에 적합합니다.
이 매뉴얼을 읽고 나면 다음 구성을 완료할 수 있습니다.
- 비즈니스 개체 또는 사용자 정의 URL을 사용하여 데이터 로드
- 사용자 정의 URL에 대한 재사용 가능한 응답 필드 정의 또는 가져오기
- 시각적 템플릿 라이브러리에서 표준, 표지 또는 컴팩트 카드를 선택하세요
- 반품 기록 필드를 제목, 설명, 이미지, 상태 및 메타데이터에 매핑
- 고정 필터, 쿼리 필드 및 쿼리 양식 구성
- 데스크톱, 태블릿, 모바일 장치에 대한 열 수 설정
- 페이지 매김과 추가 로드 중에서 페이지 넘김 방법을 선택하세요.
- 현재 기록을 사용하여 전체 카드 클릭 및 카드 작업 구성
CardSet은 데이터 중심의 반복 컬렉션이며 정적 카드를 하나씩 수동으로 관리하는 데 사용되지 않습니다. 표 형식 데이터의 경우 DataList 또는 ProTable을 사용하세요.
1. 사용 전 준비사항
1.1 데이터 소스 선택
CardSet은 다음 데이터 소스를 지원합니다.
| 데이터 소스 | 적용 가능한 시나리오 |
|---|---|
| 모델 데이터 소스 | 데이터는 Spark Business Object에서 제공되며 DQL, 모델 필드 또는 쿼리 양식이 필요합니다 |
| 맞춤 URL | 데이터는 애플리케이션 API, 외부 서비스 또는 사용자 정의 집계 인터페이스에서 제공됩니다. |
모델 데이터 소스를 사용하기 전에 개체 디자이너 에서 비즈니스 개체, 필드, 쿼리 및 QUERY 시나리오 데이터 양식을 작성해야 합니다.
맞춤 URL은 페이징 가능한 레코드 컬렉션을 제공해야 합니다. 권장 응답 형식:
{
"success": true,
"data": {
"current": 1,
"pageSize": 12,
"records": [],
"total": 0
}
}
1.2 이 기사의 예
이 문서에서는 Spark 샘플 제품 카탈로그 인터페이스를 사용합니다.
POST https://spark.hiforce.ai/spark/api/sample/cardset/products
인터페이스는 다음을 포함하여 23개의 영어 제품 데이터를 반환합니다.
| 필드 | 목적 |
|---|---|
id | 고유 키 기록 |
| '코드' | 카드 보조 제목 |
이름 | 카드 제목 |
설명 | 카드 설명 |
imageUrl | 표지 이미지 |
상태 | 상태 라벨 |
| '카테고리' | 상품분류 |
| '가격' | 제품 가격 |
| '주식' | 현재 재고 |
| '업데이트된 시간' | 업데이트 시간 |
2. 카드세트 추가
- 대상 페이지를 열고 페이지 디자이너 를 입력합니다.
- 왼쪽 구성 요소 패널에서 컨테이너 를 확장합니다.
- CardSet 을 페이지 컨테이너로 드래그합니다.
- CardSet을 선택하고, 오른쪽 속성 패널에서 Data Source 를 먼저 구성한 후 Card Template 을 구성합니다.
- 'productCardSet'과 같이 컨트롤에 대한 안정적인 이름을 설정합니다.
CardSet에서는 더 이상 Java CardTemplate 클래스 이름을 추측할 필요가 없습니다. 템플릿 모양과 필드 매핑이 시각적 구성 대화 상자에서 통합되었습니다.
3. 데이터 소스 구성
3.1 맞춤 URL 예시
데이터 소스 에서 사용자 정의 URL 을 선택하고 다음을 구성합니다.
| 속성 | 가치 |
|---|---|
| URL | /spark/api/샘플/카드세트/제품 |
| 요청 방법 | '포스트' |
| 행 경로 | data.records |
| 전체 경로 | 데이터.총 |
| 현재 페이지 경로 | 데이터.현재 |
| 페이지 크기 경로 | data.pageSize |
사용자 정의 URL 자체는 비즈니스 개체와 같은 모델 메타데이터를 제공할 수 없으므로 응답 필드 도 동일한 데이터 소스 대화 상자에서 구성해야 합니다. 이 문서의 예제 구성은 다음과 같습니다.
| 필드 경로 | 라벨 | 데이터 유형 |
|---|---|---|
id | 아이디 | '숫자' |
| '코드' | 코드 | 텍스트 |
이름 | 이름 | 텍스트 |
설명 | 설명 | 텍스트 |
imageUrl | 이미지 URL | URL |
상태 | 상태 | 텍스트 |
| '카테고리' | 카테고리 | 텍스트 |
| '가격' | 가격 | '숫자' |
| '주식' | 주식 | '숫자' |
| '업데이트된 시간' | 업데이트 날짜 | DATETIME |
응답 필드에는 두 가지 구성 방법이 있습니다.
- 필드 경로, 레이블 및 데이터 유형을 수동으로 추가하려면 더하기 기호를 클릭합니다.
- URL, 요청 메소드, 응답 경로를 입력한 후 Test & Import 를 클릭하여 실제 응답에서 가져옵니다.
테스트 및 가져오기는 최대 20개의 레코드를 읽고 그 안에 나타나는 필드를 병합합니다. 중첩된 개체는 owner.name 형식으로 포인트 경로를 생성합니다. 배열은 'ARRAY'로만 등록되며, 배열 첨자가 포함된 불안정한 경로는 생성되지 않습니다. 가져오기에서는 수동으로 수정된 라벨, 데이터 유형 및 순서를 유지하며 새 필드만 추가하고 이전 필드는 자동으로 삭제하지 않습니다. 인터페이스가 빈 배열을 반환하거나 요청이 실패하면 기존 구성이 변경되지 않습니다.
응답 필드는 페이지 구성에 저장된 필드 계약이며 인터페이스에서 반환된 샘플 값을 저장하지 않습니다. 데이터 원본 대화 상자를 열면 배경이 자동으로 호출되지 않습니다.
CardSet은 현재 페이지, 페이지당 개수, 고정 필터, 빠른 쿼리, 쿼리 양식 값을 전송합니다. POST 요청 예:
{
"current": 1,
"pageSize": 12,
"conditions": [
{"field": "status", "operator": "EQ", "value": "ACTIVE"}
],
"queryFormValues": {}
}
사용자 정의 URL 요청에는 통합된 페이지 컨텍스트 헤더도 자동으로 전달됩니다.
| 헤더 | 열거값 | 설명 |
|---|---|---|
X-스파크 페이지 환경 | DEV, TEST, PROD | 현재 페이지 환경 디자이너의 미리보기는 DEV를 사용하도록 수정되었습니다 |
X-Spark-페이지-렌더링 모드 | DESIGN_PREVIEW, RUNTIME | 페이지 디자이너, 디자이너가 연 미리보기 및 실제 기록 미리보기는 'DESIGN_PREVIEW'입니다. 정상적인 실행 페이지는 RUNTIME입니다 |
예를 들어 개발 환경 실행 페이지에서는 'DEV + RUNTIME'을 보내고, 카드 템플릿 대화 상자의 실제 기록 미리 보기에서는 'DEV + DESIGN_PREVIEW'를 보냅니다. 이는 CardSet뿐만 아니라 모든 페이지 디자이너 및 페이지 런타임 백엔드 요청에 대한 통합 사양입니다. 백엔드는 안정적인 열거를 처리해야 하며 Referer를 통해 시나리오를 추론하지 않아야 합니다. 교차 도메인 사용자 정의 URL은 CORS의 'Access-Control-Allow-Headers'에서 이 두 헤더를 허용해야 합니다.
3.2 모델 데이터 소스
모델 데이터 소스 를 선택한 후:
- 비즈니스 개체를 선택합니다.
- 필요에 따라 DQL 쿼리를 선택합니다.
- 요청 매개변수에 DQL 매개변수를 바인딩합니다.
- 카드 템플릿의 필드 드롭다운 목록은 현재 비즈니스 개체의 필드 메타데이터를 직접 사용합니다.
모델 데이터 소스의 페이징, DQL 매개변수 및 쿼리 조건은 Spark 런타임에 의해 균일하게 처리됩니다.
4. 카드 템플릿 선택
카드 템플릿 오른쪽에 있는 편집 아이콘을 클릭하면 넓은 구성 대화 상자가 열립니다. 최상위 템플릿 라이브러리에는 세 개의 썸네일 미리보기가 직접 표시됩니다.
| 템플릿 | 적용 가능한 시나리오 |
|---|---|
| 표준 | 공통 비즈니스 엔터티, 제목, 설명, 상태 및 메타데이터의 균형 잡힌 구조 |
| 표지 | 16:9 표지 이미지를 갖춘 머천다이징, 미디어 및 자산 카탈로그 |
| 컴팩트 | 운영 및 유지보수 또는 관리 워크벤치로 설명 영역 축소 및 정보 밀도 향상 |
템플릿을 선택하면 오른쪽의 미리보기가 즉시 변경됩니다. 템플릿의 모양을 판단하기 위해 실행 페이지를 저장하거나 들어갈 필요가 없습니다. 템플릿 라이브러리 하단은 테마에 따라 컨텐트, 쿼리, 레이아웃 및 페이징 의 세 가지 탭으로 구분되어 있습니다. 오른쪽의 미리보기는 항상 유지되며 데스크톱, 태블릿, 모바일을 사용하여 미리보기 너비를 전환합니다.
구성 영역과 미리보기 영역은 독립적으로 스크롤될 수 있습니다. 콘텐츠의 카드 필드, 메타데이터 및 상태 신호음은 모두 독립적인 그룹화를 사용합니다. 쿼리 필드와 고정 필터도 열 헤더가 있는 구성 테이블을 사용합니다. 구성이 많은 경우 현재 탭에서 계속 아래로 스크롤해야 하며 대화 상자에서 하단 구성이 잘리지 않습니다.
5. 필드 매핑 구성
카드 필드, 메타데이터 및 상태 신호음을 구성하려면 콘텐츠 탭으로 이동하세요. 각 카드 필드의 오른쪽에는 제목, 모서리, 제목 위, 본문 등 해당 카드 영역이 표시됩니다. 제목에는 빨간색 필수 표시가 표시되어 있습니다.
이 기사의 표지 예에서는 다음 매핑을 사용합니다.
| 카드 영역 | 필드 |
|---|---|
| 눈썹 분야 | '코드' |
| 제목 필드 | 이름 |
| 설명 필드 | 설명 |
| 이미지 필드 | imageUrl |
| 상태 필드 | 상태 |
제목 필드는 가장 중요한 식별 필드이므로 항상 구성해야 합니다. 다른 필드가 비어 있으면 해당 영역에 공백이 유지되지 않습니다.
5.1 필드 소스 및 사용자 정의 경로
필드 드롭다운 목록은 데이터 소스에서 제공됩니다.
- 모델 데이터 소스는 비즈니스 개체 필드 메타데이터를 사용합니다.
- 사용자 정의 URL은 저장된 응답 필드를 사용합니다.
필드를 선택하면 '레이블(경로)'이 표시되며, 레이블이나 경로로 검색할 수 있습니다. 등록되지 않은 동적 필드를 실제로 바인딩해야 하는 경우 사용자 정의 경로 추가 를 선택하고 수동으로 입력하세요. 다른 CardSet 또는 ProTable에서 문자열 경로의 반복적인 유지 관리를 피하기 위해 먼저 일반 필드를 응답 필드에 추가해야 합니다.
중첩된 객체는 점선 경로를 사용합니다. 예를 들면 다음과 같습니다.
owner.name
pricing.amount
CardSet을 저장하려면 제목 필드가 필요합니다. 다른 선택적 매핑이 비어 있으면 해당 카드 영역이 렌더링되지 않습니다.
5.2 실제 미리보기 새로고침
데이터 소스 및 필드 매핑이 저장되면 오른쪽의 실시간 미리 보기 제목 옆에 있는 새로 고침 아이콘을 클릭합니다. 디자이너는 'pageSize=1'로 레코드를 읽고 'X-Spark-Page-Environment: DEV' 및 'X-Spark-Page-Render-Mode: DESIGN_PREVIEW'를 보냅니다.
새로 고침은 오른쪽 카드의 표시 값만 업데이트하며, 응답 필드를 추가, 삭제, 수정하지는 않습니다. 요청이 실패하면 현재 미리보기 및 필드 구성을 유지합니다.
5.3 메타데이터 구성
메타데이터는 가격, 재고, 담당자, 업데이트 시간 등의 간단한 정보를 표시하는 데 사용됩니다. 새 행을 추가하려면 행 추가 를 클릭하세요. 구성 테이블에는 레이블, 필드 및 형식 열 헤더가 영구적으로 표시됩니다.
| 속성 | 설명 |
|---|---|
| 라벨 | 카드에 표시된 짧은 라벨입니다. '가격' |
| 필드 경로 | '가격' 등의 데이터 필드 |
| 형식 | TEXT, NUMBER, CURRENCY, DATE 또는 DATETIME |
제품 예시에서는 다음을 추가하는 것이 좋습니다.
| 라벨 | 필드 | 형식 |
|---|---|---|
| 카테고리 | '카테고리' | 텍스트 |
| 가격 | '가격' | 통화 |
| 주식 | '주식' | '숫자' |
5.4 상태 신호음 구성
상태 신호음은 선택적인 상태 색상 맵입니다. 구성 테이블은 상태가 같을 때와 신호음 표시라는 두 개의 열을 사용합니다. 예를 들어 'ACTIVE'는 'SUCCESS'에 매핑되고 'DRAFT'는 'WARNING'에 매핑됩니다. 매핑이 구성되지 않은 경우 CardSet은 일반적인 상태 값에 내장된 의미 색상을 사용하고 알 수 없는 값에는 'MUTED'를 사용합니다.
6. 쿼리 구성
쿼리 양식, 필터 표시줄 표시, 쿼리 필드 및 고정 필터를 구성하려면 쿼리 탭을 입력하세요. 상단 도구 모음에는 쿼리 양식과 필터 표시줄 표시가 있으며, 아래에는 쿼리 필드와 고정 조건이 그룹화되어 있습니다.
6.1 쿼리 필드
쿼리 필드는 쿼리 영역의 첫 번째 줄에 표시됩니다. 필드, 레이블, 연산자 및 유형 열 헤더의 구성 테이블 고정 표시.
필드를 선택하면 디자이너는 응답 필드 또는 비즈니스 개체 필드의 레이블 및 데이터 유형으로 쿼리 구성을 미리 채웁니다. 라벨과 쿼리 유형은 계속 조정할 수 있습니다. 'OBJECT' 및 'ARRAY'는 바로가기 쿼리 필드 후보에 표시되지 않습니다.
추천 제품의 예:
| 필드 | 라벨 | 운영자 | 유형 |
|---|---|---|---|
이름 | 제품 검색 | '좋아요' | 텍스트 |
| '카테고리' | 카테고리 | EQ | 텍스트 |
상태 | 상태 | EQ | 텍스트 |
날짜 및 시간 유형은 자동으로 범위 선택기로 렌더링됩니다. 검색, 자세히 및 재설정은 항상 쿼리 표시줄 오른쪽에 있습니다.
6.2 고정 필터
고정 필터는 쿼리할 때마다 적용되지만 실제 사용자에게는 표시되지 않습니다. 예를 들어 유효한 제품만 표시하려면 다음을 수행하세요.
| 필드 | 운영자 | 가치 |
|---|---|---|
상태 | EQ | '활성' |
필터 표시줄 표시 를 끄면 사용자 쿼리 영역만 숨겨지고 고정 필터는 비활성화되지 않습니다.
6.3 쿼리 양식
쿼리 양식은 선택적인 고급 쿼리 양식입니다. 드롭다운 목록에서 QUERY 시나리오의 데이터 양식을 선택한 후 런타임 중에 추가를 클릭하여 양식을 확장합니다. CardSet이 모델 데이터 소스를 사용하는 경우 드롭다운 목록은 현재 비즈니스 개체의 쿼리 형식을 표시하는 데 우선순위를 부여합니다. 맞춤 URL을 사용하면 애플리케이션에서 사용할 수 있는 QUERY 양식이 표시됩니다.
- 모델 데이터 소스는 현재 비즈니스 객체의 QUERY 데이터 형식을 선택해야 합니다.
- 맞춤 URL은
queryFormValues를 백엔드에 그대로 전송하고 인터페이스는 필드의 의미를 해석합니다.
7. 레이아웃 및 페이징 구성
반응형 열 번호, 간격, 페이징 및 행 고유 키를 구성하려면 레이아웃 및 페이징 탭을 입력하세요. 반응형 열 그룹은 데스크톱, 태블릿, 모바일의 세 가지 장치 다이어그램을 사용하여 현재 열 수를 실시간으로 표시합니다. 페이징 및 데이터 그룹은 페이징 모드, 페이지 크기 및 행 고유 키를 중앙에서 관리합니다.
권장 기본값:
| 속성 | 기본값 |
|---|---|
| 데스크탑 컬럼 | 4 |
| 태블릿 컬럼 | 2 |
| 모바일 칼럼 | '1' |
| 간격 | 기본값 |
| 페이지 크기 | '12' |
| 페이징 모드 | 페이지 매김 |
| 행 고유 키 | id |
페이징 모드는 다음을 지원합니다.
PAGINATION: 페이지 관리에 적합한 총 개수와 페이지 수를 표시합니다.LOAD_MORE: 디렉토리 검색에 적합한 레코드의 다음 페이지를 추가합니다.NONE: 현재 인터페이스에서 반환된 데이터만 표시되고 페이지 넘기기 컨트롤은 표시되지 않습니다.
단일 카드의 너비를 확인하려면 오른쪽에 있는 데스크탑, 태블릿 및 모바일 세그먼트 컨트롤을 사용하십시오. 실제 작업 중에 페이지 너비에 따라 열 수가 자동으로 전환됩니다.
8. 인터랙션 설정
CardSet은 다음 두 수준의 인터랙션을 지원합니다.
- 카드 전체의
onClick. - 카드 하단에 표시되는 액션의
onClick.
8.1 카드 액션 설정
Card Actions는 Card Template 대화상자 밖에서 설정합니다. 캔버스에서 CardSet을 선택한 다음 오른쪽 속성 패널의 Card Actions 하위 요소 섹션을 사용합니다.
- Add child element 를 클릭하여
CardAction을 생성합니다. - 추가 폼에 Title을 입력하고 확인합니다. 새 CardAction이 자동으로 선택됩니다.
- CardAction 속성 패널의 공통 Icon 선택기에서 시스템 아이콘을 선택하거나 사용자 지정 이미지를 업로드합니다.
- Interaction 을 클릭한 다음
onClick이벤트와 실행할 액션을 추가합니다.
기존 액션을 편집하려면 Card Actions 목록에서 해당 행을 클릭합니다. 왼쪽의 드래그 핸들로 순서를 바꿀 수 있습니다. 런타임에는 앞에서부터 세 개의 액션이 각 카드 하단에 해당 순서로 표시됩니다. 액션 클릭은 이벤트 전파를 중단하므로 카드 전체 클릭을 동시에 실행하지 않습니다.
8.2 카드 전체 클릭 설정
CardSet 자체를 다시 선택하고 Interaction 을 클릭하여 onClick을 설정합니다. 카드 전체 클릭이 설정된 카드는 Tab으로 포커스할 수 있으며 Enter 또는 Space로 실행할 수 있습니다.
8.3 현재 레코드 읽기
두 인터랙션 모두 실행 전에 클릭한 카드의 레코드를 런타임 컨텍스트의 record에 기록합니다. Interaction 편집기에서는 이 데이터 소스를 Current Record 로 표시하며, 이후 액션에서 다음과 같이 읽을 수 있습니다.
record.id
record.code
record.name
이 값들은 런타임에 클릭한 카드에서 가져오며 설계 시 고정한 값이 아닙니다. Interaction 편집기에 올바른 Current Record 필드 후보를 표시하려면 Custom URL에 Response Fields를 설정하거나 Model Data Source에 Business Object 필드 메타데이터를 제공해야 합니다.
8.4 예시: 서랍에 카드 정보 표시
View product 예제에서는 동일한 onClick 아래에 두 액션을 다음 순서로 설정합니다.
- Set component value 를 추가하고 이름을 Fill product details 로 지정합니다.
record.id,record.code,record.name등의 Current Record 필드를 상세 Drawer의 해당 폼 컨트롤에 매핑합니다. - Open/close dialog/drawer 를 추가하고 이름을 Open product details 로 지정합니다. Target component를 Product details (Drawer) 로 설정하고 Open target 을 활성화합니다.
먼저 폼 값을 입력한 다음 Drawer를 여세요. Interaction 편집기는 Action tree를 위에서 아래로 실행합니다. 순서가 반대이면 Drawer가 열릴 때 이전 레코드나 빈 값이 잠시 표시될 수 있습니다.
설정 후 카드 하단의 View product 를 클릭하면 해당 카드의 상품 상세 정보가 Drawer에 표시됩니다.
9. 샘플 백엔드 구현
샘플 코드는 다음 위치에 있습니다.
spark-sample/src/main/java/hiforce/spark/sample/cardset/
제품 쿼리는 ProTable 예제의 페이징 및 조건부 처리를 재사용합니다. CardSet 컨트롤러는 전용 URL 노출을 담당합니다. 표지 이미지는 로컬 PNG 엔드포인트에 의해 생성되며 외부 이미지 서비스에 의존하지 않습니다.
로컬로 시작한 후 확인할 수 있습니다.
curl -X POST 'http://localhost:18080/spark/api/sample/cardset/products' \
-H 'Content-Type: application/json' \
-H 'Accept-Language: zh-CN' \
-H 'X-Spark-Page-Environment: DEV' \
-H 'X-Spark-Page-Render-Mode: DESIGN_PREVIEW' \
-d '{"current":1,"pageSize":12,"conditions":[{"field":"status","operator":"EQ","value":"ACTIVE"}]}'
샘플 응답의 data.requestContext는 정규화된 environment 및 renderMode를 에코하여 백엔드가 실제로 페이지 컨텍스트를 수신하고 처리했는지 확인합니다. 프로덕션 비즈니스 인터페이스는 이 컨텍스트를 사용하여 에코 없이 데이터를 선택하거나 감사를 수행할 수 있습니다.
10. FAQ
디자이너는 템플릿 이름만 있고 모양은 없습니다.
새로운 카드 템플릿 편집 아이콘을 사용하고 있는지 확인하세요. 템플릿은 세 개의 축소판으로 표시되어야 합니다. ResourceInfoCard와 같은 이전 클래스 이름이 계속 나타나면 디자이너 메타데이터를 새로 고치고 CardSet을 다시 추가하세요.
실행 시 카드 없음
순서대로 확인하세요:
- Data Source의 저장 여부.
- 행 경로가 배열을 가리키는지 여부.
- 기록에 제목 필드가 존재하는지 여부.
- 브라우저 네트워크의 요청이 성공했는지 확인합니다.
- 고정 필터가 모든 기록을 제외하는지 여부.
맞춤 URL의 필드 드롭다운 목록이 비어 있습니다.
데이터 소스를 열고 응답 필드가 저장되었는지 확인하세요. 수동으로 추가할 수도 있고, URL과 행 경로가 올바른지 확인한 후 테스트 및 가져오기 를 사용할 수 있습니다. 실시간 미리 보기 새로 고침은 필드 카탈로그 생성을 담당하지 않습니다.
테스트 및 가져오기에는 가져오기 필드가 없습니다.
URL, 요청 방법, 행 경로 및 브라우저 네트워크를 확인하세요. 인터페이스는 현재 조건에서 하나 이상의 레코드를 반환해야 합니다. 합법적이지만 비어 있는 결과는 필드를 생성하지 않으며 이 경우 응답 필드를 수동으로 유지 관리해야 합니다.
사진이 표시되지 않습니다
이미지 필드는 브라우저에 액세스할 수 있는 이미지 URL을 반환해야 합니다. 상대 URL은 현재 Spark 도메인 이름을 기반으로 해야 하며 인터페이스가 HTML 로그인 페이지를 반환하지 않는지 확인해야 합니다.
쿼리 후 결과에 변화가 없습니다.
맞춤 URL 백엔드는 condition 및 queryFormValues를 처리해야 합니다. CardSet은 쿼리 의미 전송만 담당하며 브라우저의 전체 데이터 세트에 대해 2차 필터링을 수행하지 않습니다.
11. 구성 체크리스트
- 데이터 소스는
records및total을 반환할 수 있습니다. - 사용자 정의 URL 구성 및 저장된 응답 필드
- 행 고유 키는 각 레코드에서 고유합니다.
- 썸네일을 통해 적절한 템플릿이 선택되었습니다.
- 제목 필드가 구성되었으며 Null이 아닌 값을 반환합니다.
- 표지 템플릿이 접근 가능한 이미지 필드를 구성했습니다.
- 메타데이터가 페이지 스캔에 필요한 정보량을 초과하지 않습니다.
- 쿼리 필드 및 고정 필터는 백엔드에서 지원하는 필드 및 연산자를 사용합니다.
- 사용자 정의 URL 백엔드는 두 개의
X-Spark-Page-*헤더를 올바르게 처리합니다. - 데스크톱, 태블릿, 모바일 미리보기에서 오버플로가 발생하지 않습니다.
- 페이지 매김 또는 추가 로드는 다음 페이지를 올바르게 읽을 수 있습니다.
- 카드 클릭 및 작업 항목은 현재 기록을 읽을 수 있습니다.