쇼핑몰 상품 카테고리 3단 계층 구조 구현
목차
feat: 쇼핑몰 플랫폼 상품 목록 3단 카테고리 계층 구현 (Figma 시안 반영)
쇼핑몰 상품 카테고리를 3단 계층으로 구현함. 대분류 > 중분류 > 소분류 구조로 Figma 시안에 맞춤.
테이블 구조
CREATE TABLE category (
category_sn BIGINT PRIMARY KEY,
parent_sn BIGINT, -- NULL이면 대분류
depth INT, -- 1/2/3
category_nm VARCHAR(100),
sort_order INT
);
쿼리 전략
재귀 CTE가 깔끔하지만 MariaDB 버전 이슈로 애플리케이션 단에서 트리 조립하는 방식 선택함.
List<Category> roots = mapper.selectByDepth(1);
for (Category root : roots) {
root.setChildren(mapper.selectByParent(root.getSn()));
for (Category mid : root.getChildren()) {
mid.setChildren(mapper.selectByParent(mid.getSn()));
}
}
프론트 렌더링
| 레이어 | 동작 |
|---|---|
| 대분류 탭 | 클릭 시 중분류 갱신 |
| 중분류 탭 | 클릭 시 소분류 갱신 |
| 소분류 | 선택 시 상품 목록 필터링 |
선택 상태를 URL 파라미터에 담아 페이지 새로고침에도 유지되게 처리함.
끝
댓글 0
첫 댓글 달아줘.