[Day4] 5-2. ItemSlider 만들기

 

slide효과는 리액트 슬릭 라이브러리를 이용해서 구현한다.

* 사이트 주소

https://www.npmjs.com/package/react-slick

react-slick

 

https://react-slick.neostack.com/

Neostack

여기 들어가서 위쪽 탭의 Docs - Examples를 누르면 여러 가지 슬라이드 효과 예제를 확인할 수 있다.

---

# react-slick 설치

터미널에 코드 입력해서 다운해 준다.

npm i react-slick
npm install slick-carousel

---

✔️ useFetch.js  

레퍼에서 가져온 코드

//useFetch.js
import { useState, useEffect } from 'react';
import { fetchData } from '../src/apiService';

function useFetch(url, deps = []) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetchData(url).then((result) => {
      setData(result);
      setLoading(false);
    });
  }, deps);

  return [data, loading];
}

export default useFetch;

 

✔️ ItemSlider.jsx

react-slick의 예시를 따라 형식에 맞게 코드를 넣어준다.

// ItemSlider.jsx
import React from 'react';
import ItemCard from './ItemCard';
import Slider from 'react-slick';

export default function ItemSlider({ title, items, loading }) {
  // Slider 설정
  var settings = {
    dots: true,
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 4,
    arrows: true,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 3000,
    cssEase: "linear"
  };

  return (
    <section className='Slider-items'>
      <h2 className='Slider-title'>{title}</h2>
      <div className='Slider-main'>
        {loading ? (
          <p>Loading...</p>
        ) : items && items.length > 0 ? (
          // 랭킹 아이템을 반복하여 Slider에 표시
          <Slider {...settings}>
            {items.map((item) => (
              <div key={item.id}>
                {/* 각 아이템에 대한 ItemCard 컴포넌트 표시 */}
                <ItemCard
                  imageUrl={item.imageUrl}
                  title={item.title}
                  price={item.price}
                />
              </div>
            ))}
          </Slider>
        ) : (
          <p>표시할 항목이 없습니다.</p>
        )}
      </div>
    </section>
  );
}

 

✔️ MainPage.jsx

계속 로드가 안되었는데 ㅠㅠ

!loadingRankingItems 마지막으로 이부분 수정하니까 성공했다 😄

// MainPage.jsx
import React, { useState, useEffect } from 'react';
import { fetchData } from '../apiService';
import CategoryBox from '../components/CategoryBox';
import CategoryTab from '../components/CategoryTab';
import ItemSlider from '../components/ItemSlider';
import { API_URL } from '../constants';
import useFetch from "../useFetch";

export default function MainPage() {
  const [items, setItems] = useState([]);
  const [selectedId, setSelectedId] = useState(null);
  const [categories, setCategories] = useFetch("/categories");
  const [rankingItems, loadingRankingItems] = useFetch("/ranking");

  useEffect(() => {
    fetchData('categories').then((data) => setCategories(data));
  }, []);

  useEffect(() => {
    setItems([]);
    fetchData(
      `/products?limit=16&${
        selectedId > 0 ? `category=${selectedId}` : ""
      }`,
    ).then((data) => setItems(data.items));
  }, [selectedId]);

  return (
    <main>
      <section className="main_container">
        {categories && (
          <CategoryTab
            categories={categories}
            selectedId={selectedId}
            setSelectedId={setSelectedId}
          />
        )}
        <CategoryBox items={items} />
      </section>
      <section className="main_container">
        {!loadingRankingItems && (
          <ItemSlider items={rankingItems.items} title="실시간 랭킹" />
        )}
      </section>
    </main>
  );
}

 

여기까지 구현화면

어지럽다....😵‍💫

---

# 슬라이더 및 CSS 수정하기

✔️ 구현화면

먼저 구현화면

 

✔️ ItemSlider.jsx 코드

arrow는 내장된 기본 화살표이다.

하나씩 누르면 수동으로 넘어가는 슬라이더이다.

// ItemSlider.jsx
import React from 'react';
import ItemCard from './ItemCard';
import Slider from 'react-slick';

export default function ItemSlider({ title, items, loading }) {
  // Slider 설정
  var settings = {
    // dots: true,
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    speed : 500,
    arrows: true,
    // autoplay: true,
    // autoplaySpeed: 3000,
    // speed: 5000,
    // cssEase: "ease-in"
  };

  return (
    <section className='Slider-items'>
      <h2 className='Slider-title'>{title}</h2>
      <div className='Slider-main'>
        {loading ? (
          <p>Loading...</p>
        ) : items && items.length > 0 ? (
          // 랭킹 아이템을 반복하여 Slider에 표시
          <Slider {...settings}>
            {items.map((item) => (
              <div key={item.id}>
                {/* ItemCard 컴포넌트를 그대로 렌더링 */}
                <ItemCard {...item} />
              </div>
            ))}
          </Slider>
        ) : (
          <p>표시할 항목이 없습니다.</p>
        )}
      </div>
    </section>
  );
}

 

✔️ App.css 코드

슬라이더 부분 css 코드이다.

/* 슬라이더 CSS */
.Slider-items{
  border: 2px solid red;
  margin: 20px;
  padding : 20px;
  display: flex;
  flex-direction: row;

}
.Slider-title{
  height:450px;
  width: 20%;
  border: 2px solid blue;
  font-size : 30px;
  overflow: hiddlen;
  white-space: nowrap;

}

.Slider-main{
  border: 2px solid green;
  /* margin: 20px auto; */
  width : 80%;
  height : 450px;
  overflow: hiddlen;
  white-space: nowrap;

}

 

 

그리고 10x10 홈페이지를 참고해서 구조를 변경했다.

변경된 구조

Slider 전체에 div를 주고 (Slider-items)

title을 내부 왼쪽 (Slider-title),

슬라이더를 오른쪽 (Slider-main)으로  변경했다.

갑자기 이게 이뻐보여서... 그냥 바꿨다! 끝 😄