1차 프로젝트때 만들었던 캐러셀이다.
정말 단순하고 간단한 캐러셀이지만, 처음 만든 기념으로 블로그에 남겨놓으려고 한다.
(1,2차 프로젝트때 너무 정신이 없어서 뒤늦게 블로그에 이것저것 정리하는 중..😅)

JavaScript 코드

//카테고리 데이터를 저장할 state
const [categories, setCategories] = useState([]);

//hover 여부 확인
const [isHovering, setIsHovering] = useState(false);

//click 여부 확인
const [isClick, setIsClick] = useState(true);

const navigate = useNavigate();

//백에서 카테고리 데이터를 받아와 categories에 저장한다.
useEffect(() => {
  fetch('http://43.201.0.95:8000/works')
    .then(res => res.json())
    .then(json => {
      setCategories(json.categorySortCountList);
    });
}, []);

//hover 여부에 따라 isHovering 값이 바뀌도록 한다.
const handleMouseOver = () => {
  setIsHovering(true);
};
const handleMouseOut = () => {
  setIsHovering(false);
};

//click 여부에 따라 isClick 값이 바뀌도록 한다.
const handleRightClick = () => {
  setIsClick(true);
};
const handleLeftClick = () => {
  setIsClick(false);
};

JSX코드

• 각 카테고리 데이터는 백에서 배열로 받아와 map으로 돌린다.

<div className="category-wrap">
      <h3>Category</h3>
      {/*캐러셀을 감싸는 div에 마우스를 올리면 isHovering = true*/}
      <div
        className="carousel-div"
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
      >
        {/*isClick의 값에 따라 className을 다르게 준다.*/}
        <div
          className={
            isClick === false
              ? 'thumbnail-list goToRight'
              : 'thumbnail-list goToLeft'
          }
        >
          <ul>
            {/*백에서 받아온 데이터를 map함수를 통해서 UI에 나타낸다.*/}
            {categories.map(category => {
              return (
                <li
                  className="item"
                  key={category.id}
                  onClick={() => {
                    navigate('/category/' + category.eng_category_name);
                  }}
                >
                  <div
                    className={
                      'categoryImg ' + category.eng_category_name + 'Img'
                    }
                  />
                  <div className={'category ' + category.eng_category_name}>
                    <div className="title">
                      <span>{category.category_name}</span>
                      <span>{category.category_cnt}</span>
                    </div>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
        {/*최상위 div에 hover시 나타나는 버튼*/}
        <button
          onClick={handleLeftClick}
          className={
            isHovering
              ? 'on category-btn previous'
              : 'off category-btn previous'
          }
        />
        <button
          onClick={handleRightClick}
          className={
            isHovering ? 'on category-btn next' : 'off category-btn next'
          }
        />
      </div>
    </div>

SCSS 코드

• 중요한 부분의 scss 코드만 골라서 정리해보았다.

  .carousel-div {
    //최상위 div의 width를 벗어나는 부분을 hidden으로 처리한다.
    overflow: hidden;
    position: relative;
  }
    
  // 최상위 div에 hover되었을 때 on클래스가 추가되면서 버튼이 연하게 나타난다.
  .on {
    opacity: 0.6;
  }
    
  // 마우스가 캐러셀에서 벗어나게 되면 off클래스가 추가되면서 버튼이 안보이게 된다.
  .off {
    opacity: 0;
  }
    
  //다음(오른쪽)으로 넘어가는 버튼 클릭 시 translateX에 의해 -755px만큼 넘어간다.
  //부드럽게 움직이는 효과를 위해 transform 속성을 0.5초로 주었다. 
  .goToRight {
    transform: translateX(-755px);
    transition: transform 0.5s;
  }
    
    //왼쪽으로 움직이는건 다시 원래 위치로 돌아가는것과 동일하므로 translateX를 0px로 준다.
  .goToLeft {
    transform: translateX(0px);
    transition: transform 0.5s;
  }

기록하면서 든 생각은, 굳이 클래스를 on과 off로 나누었어야 하나? 라는 생각이다.
on클래스의 유무로도 충분히 만들 수 있을 것 같다. 후에 리팩토링때 불필요해보이는 클래스들을 정리해야겠다.
(리팩토링 과정은 블로그에 업로드 예정입니다.)