[9.20(수) 북스탁 프로젝트] Category Modal 카테고리 모달창 구현 | 메인카테고리와 서브카테고리 보여주기

 

 

도서 역경매 사이트이다보니 도서 카테고리는 정말정말 중요하다고 생각한다!

일단 리디북스의 카테고리를 참고해서 데려왔다!

 

 

 

import React, { useState } from 'react';

function CategoryList({ onCategoryClick }) {
  const [selectedCategory, setSelectedCategory] = useState(null);

 

useState(null) 초기 상태 값을 null로 설정해서 처음에는 선택된 카테고리가 없게한다!

 

selectedCategory는 현재 선택된 카테고리 정보를 저장하는 상태 변수고
setSelectedCategory는 selectedCategory에서 선택된 카테고리 정보를 업데이트할 수 있다!

 

 

 

 

const categories = [
    {
        name: '소설',
        subcategories: [
            '소설 전체',
            '한국소설',
            '영미소설',
            // ...등등 서브카테고리
        ],
    },
    // ...다른 카테고리들
];

 

categories변수에 카테고리정보를 저장한다!

 

 

 

return (
    <div className="category-list">
        <ul>
            {categories.map((category, index) => (
                <li
                    key={index}
                    onClick={() => onCategoryClick(category.name)}
                    onMouseEnter={() => setSelectedCategory(category)}
                >
                    {category.name}
                </li>
            ))}
        </ul>

반응형

첫 번째 컬럼에서는 메인카테고리 목록을 보여준다!

<ul> 요소 안에서 .map() 함수로 각 카테고리 객체마다 <li> 요소들을 생성한다!

클릭 이벤트와 마우스 호버 이벤트에 따라 선택된 카테고리 정보가 업데이트된다!

 

 

 

        {/* 두 번째 컬럼 */}
        <ul style={{ background: 'rgba(17, 135, 207, 0.2)', marginLeft: '0.5rem' }}>
            {selectedCategory?.subcategories && selectedCategory.subcategories.map((sub, idx) => (
                <li key={idx}>{sub}</li>
            ))}
        </ul>
    </div>
);

 

두 번째 컬럼은 선택된 메인카테고리의 서브카테고리 목록을 보여준다!

{selectedCategory?.subcategories && selectedCategory.subcategories.map((sub, idx) => ...} 부분에서

선택된 메인카테고리의 서브카테고리가 존재하는 경우만 .map() 함수로 순회해서 <li> 요소로 변환된다!

 

 

 

 

 

CSS를 장인정신으로 한땀한땀 만들어주면~!

두 컬럼의 가로 배치는 디스플레이 플렉스~!

 

요로코롬 변한다! ㅎㅎ 꽤 예쁜 것 같다><