From 9caf38630bfe5aee5d515de83757cacf067e6233 Mon Sep 17 00:00:00 2001
From: Thunnini <yunjh1994@gmail.com>
Date: Fri, 28 Feb 2025 19:40:58 +0900
Subject: [PATCH] =?UTF-8?q?FullHorizontalSlider=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=96=91=20=EC=98=86=20gradient=EA=B0=80=20=ED=95=AD=EC=83=81?=
 =?UTF-8?q?=20=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../full-horizontal-silder/index.tsx          | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/apps/extension/src/components/full-horizontal-silder/index.tsx b/apps/extension/src/components/full-horizontal-silder/index.tsx
index 5a0d16fa4c..f50a7d8ae4 100644
--- a/apps/extension/src/components/full-horizontal-silder/index.tsx
+++ b/apps/extension/src/components/full-horizontal-silder/index.tsx
@@ -74,9 +74,19 @@ export const FullHorizontalSlider: FunctionComponent<{
       </Box>
 
       {slideIndex === 0 ? (
-        <SliderButton Icon={ArrowRightIcon} handleNext={handleNext} />
+        <SliderButton
+          // hover state 문제로 위치가 바뀌면 unmount를 시켜줘야해서
+          // key를 사용해서 강제로 unmount 시킴
+          key={slideIndex}
+          Icon={ArrowRightIcon}
+          handleNext={handleNext}
+        />
       ) : (
-        <SliderButton Icon={ArrowLeftIcon} handlePrev={handlePrev} />
+        <SliderButton
+          key={slideIndex}
+          Icon={ArrowLeftIcon}
+          handlePrev={handlePrev}
+        />
       )}
     </Box>
   );
@@ -87,9 +97,12 @@ const SliderButton: FunctionComponent<{
   handlePrev?: () => void;
   Icon: React.FunctionComponent<IconProps>;
 }> = ({ handleNext, handlePrev, Icon }) => {
+  const [isHover, setIsHover] = useState(false);
+
   return (
     <Box
       as="button"
+      onHoverStateChange={setIsHover}
       onClick={handleNext ?? handlePrev}
       marginLeft="auto"
       position="absolute"
@@ -102,25 +115,23 @@ const SliderButton: FunctionComponent<{
         left: handlePrev ? "0" : "auto",
         border: "none",
         cursor: "pointer",
-        transition: "opacity 0.3s ease, background 0.3s ease",
-      }}
-      height="100%"
-      width="70px"
-      opacity={0}
-      backgroundColor="transparent"
-      hover={{
-        opacity: 1,
         background: `linear-gradient(${handleNext ? "270deg" : "90deg"}, ${
           ColorPalette["gray-700"]
         } 0%, rgba(9, 9, 10, 0.00) 100%)`,
       }}
+      height="100%"
+      width="70px"
     >
       <Box
+        opacity={isHover ? 1 : 0}
         borderColor={ColorPalette["gray-400"]}
         backgroundColor={ColorPalette["gray-500"]}
         borderRadius="10rem"
         padding="0.5rem"
         margin={handleNext ? "0 0.5rem 0 0" : "0 0 0 0.5rem"}
+        style={{
+          transition: "opacity 0.3s ease",
+        }}
       >
         <Icon width="1rem" height="1rem" color={ColorPalette["gray-200"]} />
       </Box>