From 205f549461b8a1c299c089a865b1454f75777da2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= <gino9940@gmail.com>
Date: Tue, 13 Feb 2024 16:30:45 +0900
Subject: [PATCH] feat: separate TopicSlide from swiper

---
 .../Home/TopicSwiper/TopicSlide.tsx           | 87 +++++++++++++++++++
 .../Home/TopicSwiper/TopicSwiper.tsx          | 73 ++++------------
 2 files changed, 103 insertions(+), 57 deletions(-)
 create mode 100644 src/components/Home/TopicSwiper/TopicSlide.tsx

diff --git a/src/components/Home/TopicSwiper/TopicSlide.tsx b/src/components/Home/TopicSwiper/TopicSlide.tsx
new file mode 100644
index 0000000..09d00b2
--- /dev/null
+++ b/src/components/Home/TopicSwiper/TopicSlide.tsx
@@ -0,0 +1,87 @@
+import { PropsWithChildren } from 'react';
+import styled from 'styled-components';
+import { SwiperSlide } from 'swiper/react';
+
+import { colors } from '@styles/theme';
+
+import { RightChevronIcon } from '@icons/index';
+
+interface TopicSlideProps {
+  init: boolean;
+  swiperRef: any;
+  prevDisabled: any;
+  nextDisabled: any;
+  setNextDisabled: any;
+  setPrevDisabled: any;
+}
+
+const TopicSlide = (props: PropsWithChildren<TopicSlideProps>) => {
+  const {
+    init,
+    prevDisabled,
+    swiperRef,
+    setNextDisabled,
+    nextDisabled,
+    setPrevDisabled,
+    children,
+  } = props;
+  return (
+    <StyledSlide>
+      <PrevButton
+        disabled={init || prevDisabled}
+        onClick={() => {
+          swiperRef.current?.slidePrev();
+          setNextDisabled(false);
+        }}
+      >
+        <RightChevronIcon style={{ transform: 'rotate(180deg)' }} stroke={colors.white_40} />
+      </PrevButton>
+      {children}
+      <NextButton
+        disabled={nextDisabled}
+        onClick={() => {
+          swiperRef.current?.slideNext();
+          setPrevDisabled(false);
+        }}
+      >
+        <RightChevronIcon stroke={colors.white_40} />
+      </NextButton>
+    </StyledSlide>
+  );
+};
+
+TopicSlide.displayName = 'SwiperSlide';
+
+const StyledSlide = styled(SwiperSlide)`
+  overflow-y: auto;
+
+  &::-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;
+  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;
+`;
+
+export default TopicSlide;
diff --git a/src/components/Home/TopicSwiper/TopicSwiper.tsx b/src/components/Home/TopicSwiper/TopicSwiper.tsx
index 633e0ee..822d4f7 100644
--- a/src/components/Home/TopicSwiper/TopicSwiper.tsx
+++ b/src/components/Home/TopicSwiper/TopicSwiper.tsx
@@ -1,12 +1,9 @@
 import React, { useRef, useState } from 'react';
-import { styled } from 'styled-components';
 import SwiperCore from 'swiper';
 import { Navigation } from 'swiper/modules';
-import { Swiper, SwiperSlide } from 'swiper/react';
+import { Swiper } from 'swiper/react';
 
-import { colors } from '@styles/theme';
-
-import { RightChevronIcon } from '@icons/index';
+import TopicSlide from './TopicSlide';
 
 SwiperCore.use([Navigation]);
 
@@ -51,62 +48,24 @@ const TopicSwiper = ({ children, fetchNextPage, hasNextPage }: TopicSwiperProps)
         onReachBeginning={handleReachBeginning}
         observer={true}
       >
-        {children.map((child, index) => (
-          <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);
-              }}
+        {children.map((child) => {
+          return (
+            <TopicSlide
+              key={child.key}
+              init={init}
+              prevDisabled={prevDisabled}
+              swiperRef={swiperRef}
+              setNextDisabled={setNextDisabled}
+              nextDisabled={nextDisabled}
+              setPrevDisabled={setPrevDisabled}
             >
-              <RightChevronIcon stroke={colors.white_40} />
-            </NextButton>
-          </TopicSlide>
-        ))}
+              {child}
+            </TopicSlide>
+          );
+        })}
       </Swiper>
     </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;
-  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;
-`;
-
 export default TopicSwiper;