Merge pull request #244 from LikeLion-at-DGU/dev

🚀 Deploy
LikeLion-at-DGU · Aug 4, 2024 · 830d2a0 · 830d2a0
2 parents e002d46 + 3d8ad32
commit 830d2a0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 25 deletions.
diff --git a/src/components/ImgSlider/ImgSlider.jsx b/src/components/ImgSlider/ImgSlider.jsx
@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useRef } from "react";
 import * as S from "./styled";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 const ImageSlider = ({ ThemeImg }) => {
+  const navigate = useNavigate();
   const [current, setCurrent] = useState(0);
   const [translateX, setTranslateX] = useState(0);
   const count = ThemeImg.length;
@@ -34,6 +35,11 @@ const ImageSlider = ({ ThemeImg }) => {
     updateTranslateX();
   }, [current]);
 
+  const handleMoveonTheme = (url) => {
+    console.log(`Navigating to theme with theme_id: ${url}`);
+    navigate(`/theme/${url}`);
+  };
+
   return (
     <S.SliderContainer ref={sliderContainerRef}>
       <S.Slide
@@ -42,29 +48,23 @@ const ImageSlider = ({ ThemeImg }) => {
           transition: "transform 0.5s ease-out",
         }}
       >
-        {ThemeImg.map((item, index) => {
-          const themeUrl = `/api/theme/${item.url}`;
-          console.log(`Generated URL for slide ${index + 1}: ${themeUrl}`);
-          return (
-            <Link
-              to={themeUrl}
-              key={index + 1}
-              style={{ textDecoration: "none" }}
-            >
-              <S.SlideContent $active={index === current}>
-                <S.SlideImage src={item.image} alt={`slide-${index}`} />
-                <S.SlideTitle>{item.title}</S.SlideTitle>
-                <div className="routineTitle">
-                  {item.routine_title.map((title, titleIndex) => (
-                    <S.SlideRoutineTitle key={titleIndex}>
-                      {title}
-                    </S.SlideRoutineTitle>
-                  ))}
-                </div>
-              </S.SlideContent>
-            </Link>
-          );
-        })}
+        {ThemeImg.map((item, index) => (
+          <S.SlideContent
+            key={item.url || index + 1}
+            $active={index === current}
+            onClick={() => handleMoveonTheme(item.url)}
+          >
+            <S.SlideImage src={item.image} alt={`slide-${index}`} />
+            <S.SlideTitle>{item.title}</S.SlideTitle>
+            <div className="routineTitle">
+              {item.routine_title.map((title, titleIndex) => (
+                <S.SlideRoutineTitle key={titleIndex}>
+                  {title}
+                </S.SlideRoutineTitle>
+              ))}
+            </div>
+          </S.SlideContent>
+        ))}
       </S.Slide>
     </S.SliderContainer>
   );

diff --git a/src/components/mainRoutineBox/styled.js b/src/components/mainRoutineBox/styled.js
@@ -56,7 +56,6 @@ export const BoxContent = styled.div`
   font-size: 14px;
   overflow-x: hidden;
   overflow-y: auto;
-  white-space: nowrap;
   scroll-snap-type: y mandatory;
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */