[FE] feat: 캐러셀 구현한 후, 홈 페이지에 적용

[soosoo22]

• resolves [FE] 홈 페이지 캐러셀을 구현한다. #397

---

🚀 어떤 기능을 구현했나요 ?

• Carousel 컴포넌트를 구현한 후, 홈 페이지에 적용했습니다.

🔥 어떻게 해결했나요 ?

• 일단 리뷰 작성 페이지 캐러셀을 활용할려고 했으나 자칫 잘못 건드리면 돌이킬 수 없는 강을 건널 것 같아서😅 캐러셀 컴포넌트를 만들었습니다. 지금은 공통 컴포넌트를 생각하지 않고 만들었으나 추후에 공통 컴포넌트로 리팩하겠습니다.

Carousel 컴포넌트의 pageWidth, pageHeight, gap, offset 속성값을 rem 단위로 전달하고 있습니다.

   <Carousel slides={OVERVIEW_SLIDES} pageWidth={32} pageHeight={40} gap={5} offset={3.6} />

곱하기 10을 한 이유

handleScroll에서 페이지 계산할 때, pageWidth와 gap이 rem 단위니까 px 단위로 변환하기 위해 * 10을 했습니다. scrollLeft는 기본적으로 px 단위로 계산을 해줘서, * 10을 안하면 이상한 값이 뜨더라구요.

const Carousel = ({ slides, pageWidth, pageHeight, gap, offset }: CarouselProps) => {
  const [page, setPage] = useState(0);
  const scrollRef = useRef<HTMLDivElement>(null);

  const handleScroll = () => {
    if (scrollRef.current) {
      const scrollLeft = scrollRef.current.scrollLeft;
      const newPage = Math.round(scrollLeft / ((pageWidth + gap) * 10));
      setPage(newPage);
    }
  };

  const scrollToPage = (pageIndex: number) => {
    if (scrollRef.current) {
      scrollRef.current.scrollTo({
        left: (pageWidth + gap) * 10 * pageIndex,
        behavior: 'smooth',
      });
      setPage(pageIndex);
    }
  };

  return (
    // .....
  );
};

export default Carousel;

📝 어떤 부분에 집중해서 리뷰해야 할까요?

캐러셀 이미지가 한 화면에 하나만 보이게 할지, 아니면 위 사진처럼 일단 나열하는게 좋을지 여러분들은 어떻게 생각하시나요?
일단 카드 크기가 그리 크지 않아서 전자의 방식을 택하면 빈공간이 많아질 것 같아서 사진처럼 일단 나열해서 슬라이드형식으로 넘어가게 구현하긴 했어요.

To. 올리

캐러셀을 도입하면서 OverviewItem이 필요 없어질 것 같은데 삭제해도 괜찮을까요? 올리?
ArrowIcon 이미지도 같이 삭제할 것 같아요.

📚 참고 자료, 할 말

• 참고 블로그 - 열심히 참고했어요~

[ImxYJL]

캐러셀 까다로웠을텐데 만드느라 고생 많았어요~~~~

[ImxYJL]

이렇게 계산식에 들어가는 변수는 따로 변수로 빼는 것도 좋을 것 같아요!

[ImxYJL]

👍

[BadaHertz52]

쑤쑤 🚀🚀🚀🚀 고생했어

[chysis]

사용성이 높은 공통 컴포넌트가 될 것 같아요! 고생했어요! 🔥