Shop Review Showcase
docs/hcs-asset/shop-review-showcase.md
id: 'shop-review-showcase' status: completed
Shop Review Showcase
Reference
- Source:
apps/builder/data/hcs-asset/advanced-product-detail.json - 목적: 상품 단일 PDP 리뷰 블록이 아니라, shop 전체 리뷰를 탐색하는 리뷰 허브 섹션
- 구조:
Reviewheading + 검색바 + 인스타그램형 미디어 그리드 + 페이지네이션 리뷰 리스트 + reels modal
React Component
- Path:
apps/makitt-standard-commerce/src/components/assets/shop-review-showcase/ - Status: implemented
- 특징:
- 상품 단일 문맥 없이 shop-wide 리뷰를 조회
- 검색어
q를 media feed / review list 둘 다 공유 - 미디어 카드를 누르면
advanced-product-detail의 reels modal 패턴을 재사용
Prerequisites
makitt-server (shop-api)
| API | Method | Endpoint | Status |
|---|---|---|---|
| Review list | GET | /shop/{shopId}/reviews/list | available |
| Media reviews | GET | /shop/{shopId}/reviews/media | available |
| Review detail | GET | /shop/{shopId}/reviews/{reviewId} | available |
@makitt/api resources
| Resource | 설명 | Status |
|---|---|---|
review.reviews | shop/product 리뷰 페이지네이션 목록 | available |
review.mediaFeed | 미디어 리뷰 카드 grid 데이터 | available |
review.mediaFeedModal | modal infinite feed 데이터 | available |
makitt-shop (HCS 렌더링)
| 항목 | 설명 | Status |
|---|---|---|
form renderer | 검색바 입력 + submit 처리 | available |
section/container/button/input/image/video | 섹션 기본 구조 | available |
modal/backdrop/modal-content/modal-body | reels modal | available |
sentinel renderer | modal infinite feed load-more | available |
setState, setFormField, openModal, closeModal, fetchNext | 상호작용 액션 | available |
HCS Conversion Notes
advanced-product-detail의 리뷰 블록을 shop-wide 문맥으로 분리한 assetproduct.entry의존은 제거하고, 리뷰 리소스만으로 grid/list/modal을 구성- search form은
form.values.q -> reviewQuerystate 복사 구조로 구현 - modal은
review.mediaFeedModal.items|rotate(selectedReviewIndex)패턴을 그대로 차용