230214-15 TIL

이미지 슬라이드 코드

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import styled from 'styled-components';

const TestImgSlide = () => {
  const { state: detailData } = useLocation();

  const img = detailData.imgURL;
//   console.log('detailData', detailData);
//   console.log('detailData,imgURL', img);

  const [nav1, setNav1] = useState<any>(null);
  const [nav2, setNav2] = useState<any>(null);
  const [slider1, setSlider1] = useState<any>(null);
  const [slider2, setSlider2] = useState<any>(null);

  useEffect(() => {
    setNav1(slider1);
    setNav2(slider2);
  });

  // 메인 이미지 슬라이드 세팅
  const settingsMain: any = {
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav',
  };

  // 썸네일 이미지 슬라이드 세팅
  const settingsThumbs: any = {
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    arrows: false,
    centerMode: true,
    swipeToSlide: true,
    focusOnSelect: true,
    centerPadding: '10px',
  };

  return (
    <ImgSlideWrap>
      <ImgContainer>
        <MainImgContainer>
          <SliderStyle
            {...settingsMain}
            asNavFor={nav2}
            ref={(slider) => setSlider1(slider)}
          >
            {img.map((slide: any, idx: any) => {
              return (
                <MainImgDiv key={idx}>
                  <img src={`${slide}=${slide.id}`} />
                </MainImgDiv>
              );
            })}
          </SliderStyle>
        </MainImgContainer>
        <ThumbnailImgContainer>
          <SliderStyle
            {...settingsThumbs}
            asNavFor={nav1}
            ref={(slider) => setSlider2(slider)}
          >
            {img.map((slide: any, idx: any) => {
              return (
                <ThumbnailImg key={idx}>
                  <img src={`${slide}=${slide.id}`} />
                </ThumbnailImg>
              );
            })}
          </SliderStyle>
        </ThumbnailImgContainer>
      </ImgContainer>
    </ImgSlideWrap>
  );
};

export default TestImgSlide;

export const ImgSlideWrap = styled.div``;

export const ImgContainer = styled.div``;

export const MainImgContainer = styled.div``;

export const MainImgDiv = styled.div` 
  height: 40vh;

  img {
    margin: 0 auto;
    object-fit: contain;
    height: 100%;
  }
`;

export const ThumbnailImgContainer = styled.div`
  margin: 25px auto;
  width: 70%;
`;

export const ThumbnailImg = styled.div`
  img {
    margin: 0 auto;
    width: 130px;
    height: 130px;
  }
`;

export const SliderStyle = styled(Slider)`
  cursor: pointer;
  width: 100%;
`;