diff --git a/src/components/Home/TopicCard/TopicCard.styles.tsx b/src/components/Home/TopicCard/TopicCard.styles.tsx index 34a863f..f61656f 100644 --- a/src/components/Home/TopicCard/TopicCard.styles.tsx +++ b/src/components/Home/TopicCard/TopicCard.styles.tsx @@ -9,7 +9,7 @@ export const TopicCardContainer = styled.div` display: flex; flex-direction: column; align-items: center; - height: 100%; + margin-bottom: 100px; overflow: hidden; `; diff --git a/src/components/Home/TopicCard/TopicCard.tsx b/src/components/Home/TopicCard/TopicCard.tsx index 62b92e9..3b17cb2 100644 --- a/src/components/Home/TopicCard/TopicCard.tsx +++ b/src/components/Home/TopicCard/TopicCard.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useSearchParams } from 'react-router-dom'; import { useSwiperSlide } from 'swiper/react'; @@ -44,6 +44,8 @@ const TopicCard = ({ topic }: TopicCardProps) => { ); const [latestComment, setLatestComment] = useState(); + const containerRef = useRef(null); + useEffect(() => { if (swiperSlide.isActive) { setSearchParams((searchParams) => { @@ -76,7 +78,14 @@ const TopicCard = ({ topic }: TopicCardProps) => { return ( - + 실시간 인기 토픽 diff --git a/src/components/Home/TopicSwiper/TopicSwiper.tsx b/src/components/Home/TopicSwiper/TopicSwiper.tsx index 5768593..633e0ee 100644 --- a/src/components/Home/TopicSwiper/TopicSwiper.tsx +++ b/src/components/Home/TopicSwiper/TopicSwiper.tsx @@ -40,15 +40,6 @@ const TopicSwiper = ({ children, fetchNextPage, hasNextPage }: TopicSwiperProps) return ( - { - swiperRef.current?.slidePrev(); - setNextDisabled(false); - }} - > - - {children.map((child, index) => ( - {child} + + { + swiperRef.current?.slidePrev(); + setNextDisabled(false); + }} + > + + + {child} + { + swiperRef.current?.slideNext(); + setPrevDisabled(false); + }} + > + + + ))} - { - swiperRef.current?.slideNext(); - setPrevDisabled(false); - }} - > - - ); }; +const TopicSlide = styled(SwiperSlide)` + &::-webkit-scrollbar { + display: none; + } + + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +`; + const SlideButton = styled.button<{ disabled: boolean }>` + position: absolute; + top: 63px; z-index: 100; width: 32px; height: 32px; @@ -89,14 +102,10 @@ const SlideButton = styled.button<{ disabled: boolean }>` `; const PrevButton = styled(SlideButton)` - position: absolute; - top: 110px; left: 20px; `; const NextButton = styled(SlideButton)` - position: absolute; - top: 110px; right: 20px; `;