fix(topic-swiper): useSwiperSlide not working

src/components/Home/TopicCard/TopicCard.tsx

@@ -56,26 +56,21 @@ const TopicCard = ({ topic }: TopicCardProps) => {
 
   const swiperSlide = useSwiperSlide();
   const { BottomSheet: CommentSheet, toggleSheet } = useBottomSheet({});
-  const voteMutation = useVoteTopic();
+  /** Home의 useTopics에서 사용한 req와 동일하게 할것 */
+  const voteMutation = useVoteTopic({
+    status: 'VOTING',
+    side: 'TOPIC_B',
+    size: 10,
+  });
   const { data: previewComment } = usePreviewComment(
     topic.topicId,
-    topic.selectedOption !== null || isMyTopic
+    (topic.selectedOption !== null || isMyTopic) && swiperSlide.isActive
   );
   const { Modal, toggleModal } = useModal('action');
-  1;
   const reportMutation = useReportTopic(topic.topicId);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    if (swiperSlide.isActive) {
-      setSearchParams((searchParams) => {
-        searchParams.set('topicId', topic.topicId.toString());
-        return searchParams;
-      });
-    }
-  }, [swiperSlide]);
-
   const handleHideTopic = () => {};
 
   const handleReportTopic = () => {
@@ -117,14 +112,7 @@ const TopicCard = ({ topic }: TopicCardProps) => {
 
   return (
     <React.Fragment>
-      <TopicCardContainer
-        ref={containerRef}
-        style={{
-          marginBottom: containerRef.current
-            ? window.innerHeight - containerRef.current.scrollHeight + 60
-            : 0,
-        }}
-      >
+      <TopicCardContainer ref={containerRef}>
         <BestTopicCotainer>
           <Text size={18} color={colors.purple}>
             실시간 인기 토픽
@@ -191,6 +179,13 @@ const TopicCard = ({ topic }: TopicCardProps) => {
           />
         </TopicFooter>
       </TopicCardContainer>
+      <div
+        style={{
+          height: containerRef.current
+            ? window.innerHeight - containerRef.current.scrollHeight + 80
+            : 0,
+        }}
+      />
       <CommentSheet>
         <TopicComments topic={topic} />
       </CommentSheet>

src/components/Home/TopicSwiper/TopicSwiper.tsx

@@ -1,19 +1,26 @@
 import React, { useRef, useState } from 'react';
+import styled from 'styled-components';
 import SwiperCore from 'swiper';
 import { Navigation } from 'swiper/modules';
-import { Swiper } from 'swiper/react';
+import { Swiper, SwiperSlide } from 'swiper/react';
 
-import TopicSlide from './TopicSlide';
+import { TopicResponse } from '@interfaces/api/topic';
+
+import { colors } from '@styles/theme';
+
+import { RightChevronIcon } from '@icons/index';
+
+import TopicCard from '../TopicCard/TopicCard';
 
 SwiperCore.use([Navigation]);
 
 interface TopicSwiperProps {
-  children: JSX.Element[];
+  topics: TopicResponse[];
   fetchNextPage: () => void;
   hasNextPage: boolean;
 }
 
-const TopicSwiper = ({ children, fetchNextPage, hasNextPage }: TopicSwiperProps) => {
+const TopicSwiper = ({ topics, fetchNextPage, hasNextPage }: TopicSwiperProps) => {
   const swiperRef = useRef<SwiperCore>();
   const [init, setInit] = useState(true);
   const [prevDisabled, setPrevDisabled] = useState(false);
@@ -30,7 +37,7 @@ const TopicSwiper = ({ children, fetchNextPage, hasNextPage }: TopicSwiperProps)
       fetchNextPage();
     }
 
-    if (!hasNextPage && children.length - swiper.realIndex === 1) {
+    if (!hasNextPage && topics.length - swiper.realIndex === 1) {
       setNextDisabled(true);
     }
   };
@@ -42,25 +49,42 @@ const TopicSwiper = ({ children, fetchNextPage, hasNextPage }: TopicSwiperProps)
         modules={[Navigation]}
         spaceBetween={0}
         slidesPerView={1}
-        style={{ height: '100%' }}
+        style={{ height: '100%', overflowY: 'auto' }}
         onBeforeInit={(swiper) => (swiperRef.current = swiper)}
         onSlideChange={handleSlideChange}
         onReachBeginning={handleReachBeginning}
         observer={true}
+        observeSlideChildren={true}
+        observeParents={true}
       >
-        {children.map((child) => {
+        {topics.map((topic) => {
           return (
-            <TopicSlide
-              key={child.key}
-              init={init}
-              prevDisabled={prevDisabled}
-              swiperRef={swiperRef}
-              setNextDisabled={setNextDisabled}
-              nextDisabled={nextDisabled}
-              setPrevDisabled={setPrevDisabled}
-            >
-              {child}
-            </TopicSlide>
+            <SwiperSlide>
+              <SlideContainer>
+                <PrevButton
+                  disabled={init || prevDisabled}
+                  onClick={() => {
+                    swiperRef.current?.slidePrev();
+                    setNextDisabled(false);
+                  }}
+                >
+                  <RightChevronIcon
+                    style={{ transform: 'rotate(180deg)' }}
+                    stroke={colors.white_40}
+                  />
+                </PrevButton>
+                <TopicCard topic={topic} />
+                <NextButton
+                  disabled={nextDisabled}
+                  onClick={() => {
+                    swiperRef.current?.slideNext();
+                    setPrevDisabled(false);
+                  }}
+                >
+                  <RightChevronIcon stroke={colors.white_40} />
+                </NextButton>
+              </SlideContainer>
+            </SwiperSlide>
           );
         })}
       </Swiper>
@@ -69,3 +93,35 @@ const TopicSwiper = ({ children, fetchNextPage, hasNextPage }: TopicSwiperProps)
 };
 
 export default TopicSwiper;
+
+const SlideButton = styled.button<{ disabled: boolean }>`
+  position: absolute;
+  top: 63px;
+  z-index: 100;
+  width: 32px;
+  height: 32px;
+  padding: 4.8px 10.4px;
+  cursor: pointer;
+  background-color: transparent;
+
+  ${(props) => props.disabled && `display: none;`}
+`;
+
+const PrevButton = styled(SlideButton)`
+  left: 20px;
+`;
+
+const NextButton = styled(SlideButton)`
+  right: 20px;
+`;
+
+const SlideContainer = styled.div`
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+`;

src/routes/Home/Home.tsx

@@ -6,13 +6,15 @@ import 'swiper/css/scrollbar';
 import useTopics from '@apis/topic/useTopics';
 import NotificationButton from '@components/commons/Header/NotificationButton/NotificationButton';
 import Layout from '@components/commons/Layout/Layout';
-import TopicCard from '@components/Home/TopicCard/TopicCard';
 import TopicSwiper from '@components/Home/TopicSwiper/TopicSwiper';
 
 import { Container } from './Home.styles';
 
 const Home = () => {
-  const { data, fetchNextPage, hasNextPage } = useTopics();
+  const { data, fetchNextPage, hasNextPage } = useTopics({
+    status: 'VOTING',
+    size: 10,
+  });
 
   const topics = data?.pages.flatMap((page) => page.data);
 
@@ -26,11 +28,11 @@ const Home = () => {
     <Layout HeaderRight={<NotificationButton />}>
       <Container>
         {topics && (
-          <TopicSwiper fetchNextPage={handleFetchNextPage} hasNextPage={hasNextPage}>
-            {topics.map((topic) => (
-              <TopicCard topic={topic} key={topic.topicId} />
-            ))}
-          </TopicSwiper>
+          <TopicSwiper
+            topics={topics}
+            fetchNextPage={handleFetchNextPage}
+            hasNextPage={hasNextPage}
+          />
         )}
       </Container>
     </Layout>