프로젝트

목록 슬라이더

• 기존 메인페이지의 UI를 싹 엎고 슬라이더를 사용하였다.
• 슬라이더는 React-slick 패키지를 사용하였다.
• 사용방법

const settings = {
      dots: false,
      infinite: true,
      slidesToShow:1,
      slidesToScroll: 1,
    };
    
<Slider {...settings}>
	<div>1</div>
	<div>2</div>
	<div>3</div>
</Slider>

• 스타일 설정방법

const StyledSlider = styled(Slider)`
  .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    width: 1300px;
  }

  .slick-prev:before,
  .slick-next:before {
    font-size: 30px;
    opacity: 0.5;
    color: black;
  }
`;

인근 주유소에 적용

• 사용방법을 따라하니 많은 시행착오 끝에 슬라이더를 구현하였다.
• 반응형 사이트를 만들기 위해 화면 크기에 따라 슬라이더의 개수를 설정하였다.
• window.innerWidth 를 이용해서 화면 크기에 따라 슬라이더 개수와 넘겨지는 개수를 설정하였다.
• 실시간으로 window.innerWidth의 값을 가져오기 위해서 window.onresize 함수에서 settings를 사용해서 useState에 저장하였다.

// Main.tsx

export default function Main({ filterData }: Props) {
  // 반경 1km 내에 있는 데이터를 props로 받아 useState에 저장해줌
  // slides가 화면 크기에 따라 나타나는 개수를 정해줌
  const [data, setData] = useState(filterData);
  const [settings, setSettings] = useState({
    dots: false,
    infinite: true,
    slidesToShow:
      window.innerWidth > 1200 ? 3 : window.innerWidth > 600 ? 2 : 1,
    slidesToScroll:
      window.innerWidth > 1200 ? 3 : window.innerWidth > 600 ? 2 : 1,
  });

  // 이름이 똑같은 주유소가 있어서 중복된 것을 제거한 뒤, 가까운 거리의 주유소로 정렬해줌
  let newData = Array.from(new Set(data)).sort(
    (a: Item, b: Item) => Number(a.dist) - Number(b.dist),
  );

  // 실시간으로 window.innerWidth의 값을 받아오기 위해 쓰는 함수
  window.onresize = function () {
    let innerWidth = window.innerWidth;

    const settings = {
      dots: false,
      infinite: true,
      slidesToShow: innerWidth > 1200 ? 3 : innerWidth > 600 ? 2 : 1,
      slidesToScroll: innerWidth > 1200 ? 3 : innerWidth > 600 ? 2 : 1,
    };

    setSettings(settings);
  };

  // 주변 데이터가 없을 때
  if (newData.length === 0) {
    return (
      <NearbyChargingStationWrap>
        ☠️ 주변에 데이터가 없다 ☠️
      </NearbyChargingStationWrap>
    );
  }

  // 슬라이더 부분
  return (
    <StyledSlider {...settings}>
      {newData.map((item: Item) => {
        return <MainItem data={data} item={item} key={item.statId} />;
      })}
    </StyledSlider>
  );
}