feat: enable scroll when height is not enough (#192)

* feat: enable scroll when height is not enough * fix: move slide button inside slide * fix: slide button position
team-offonoff · Feb 12, 2024 · 413afd3 · 413afd3
1 parent 4f56d8e
commit 413afd3
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 26 deletions.
diff --git 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
@@ -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<LatestComment | undefined>();
 
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
   useEffect(() => {
     if (swiperSlide.isActive) {
       setSearchParams((searchParams) => {
@@ -76,7 +78,14 @@ const TopicCard = ({ topic }: TopicCardProps) => {
 
   return (
     <React.Fragment>
-      <TopicCardContainer>
+      <TopicCardContainer
+        ref={containerRef}
+        style={{
+          marginBottom: containerRef.current
+            ? window.innerHeight - containerRef.current.scrollHeight + 60
+            : 0,
+        }}
+      >
         <BestTopicCotainer>
           <Text size={18} color={colors.purple}>
             실시간 인기 토픽

diff --git 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 (
     <React.Fragment>
-      <PrevButton
-        disabled={init || prevDisabled}
-        onClick={() => {
-          swiperRef.current?.slidePrev();
-          setNextDisabled(false);
-        }}
-      >
-        <RightChevronIcon style={{ transform: 'rotate(180deg)' }} stroke={colors.white_40} />
-      </PrevButton>
       <Swiper
         allowTouchMove={false}
         modules={[Navigation]}
@@ -61,23 +52,45 @@ const TopicSwiper = ({ children, fetchNextPage, hasNextPage }: TopicSwiperProps)
         observer={true}
       >
         {children.map((child, index) => (
-          <SwiperSlide key={index}>{child}</SwiperSlide>
+          <TopicSlide key={index} style={{ overflowY: 'auto' }}>
+            <PrevButton
+              disabled={init || prevDisabled}
+              onClick={() => {
+                swiperRef.current?.slidePrev();
+                setNextDisabled(false);
+              }}
+            >
+              <RightChevronIcon style={{ transform: 'rotate(180deg)' }} stroke={colors.white_40} />
+            </PrevButton>
+            {child}
+            <NextButton
+              disabled={nextDisabled}
+              onClick={() => {
+                swiperRef.current?.slideNext();
+                setPrevDisabled(false);
+              }}
+            >
+              <RightChevronIcon stroke={colors.white_40} />
+            </NextButton>
+          </TopicSlide>
         ))}
       </Swiper>
-      <NextButton
-        disabled={nextDisabled}
-        onClick={() => {
-          swiperRef.current?.slideNext();
-          setPrevDisabled(false);
-        }}
-      >
-        <RightChevronIcon stroke={colors.white_40} />
-      </NextButton>
     </React.Fragment>
   );
 };
 
+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;
 `;