[React] 슬라이드 비율 에러 해결

useEffect(() => {
    slideRef.current.style.transition = 'all 0.5s ease-in-out';
    console.log('currentSlide: ' + currentSlide);
    console.log('currentSlide: ' + -(currentSlide * 5) + '0%');
    //slideRef.current.style.transform = `translateX(-51.5%)`; // 이 되어야 함 (슬라이드 사진 6개 경우)
    slideRef.current.style.transform = `translateX(-${currentSlide * 5}0%)`;
  }, [currentSlide]);

// slideRef.current.style.transform = translateX(-51.5%); 이 되어야 함 (슬라이드 사진 6개 경우)
여기서 나는 transform의 값안에서만 변경하려고 했었는데 그 전에 변경해주는 방법이 있었다!!

이걸 밑 코드로 변경

useEffect(() => {
    let slideValue = currentSlide * 5 * 10;
    if (currentSlide > 0) {
      slideValue += 1.5;
    }
    slideRef.current.style.transition = 'all 0.5s ease-in-out';
    slideRef.current.style.transform = `translateX(-${slideValue}%)`;
  }, [currentSlide]);

아니면 디자인을 살짝 수정하는 방법이 있음

<Location>
     <Tag margin='0 4rem 0 0'></Tag>
</Location>

// margin-right를 3rem 으로 변경
<Location>
     <Tag margin='0 3rem 0 0'></Tag>
</Location>

const TagBox = styled.div`
  width: 29rem;
  height: 40rem;
`

// width 크기를 0.5rem 더해줌
const TagBox = styled.div`
  width: 29.5rem;
  height: 40rem;
`

해결 완료!