개발 slecs

쇼핑몰 상품 카테고리 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

첫 댓글 달아줘.