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

🚀 Deploy
LikeLion-at-DGU · Aug 4, 2024 · 12c664c · 12c664c
2 parents f6f2618 + 209f13d
commit 12c664c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/src/components/ImgSlider/ImgSlider.jsx b/src/components/ImgSlider/ImgSlider.jsx
@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 const ImageSlider = ({ ThemeImg }) => {
   const [current, setCurrent] = useState(0);
   const [translateX, setTranslateX] = useState(0);
-  console.log(ThemeImg);
+  console.log("ThemeImg:", ThemeImg);
   const count = ThemeImg.length;
   console.log(count);
   const slideWidth = 356 + 14; // px
@@ -53,7 +53,13 @@ const ImageSlider = ({ ThemeImg }) => {
             <S.SlideContent $active={index === current}>
               <S.SlideImage src={item.image} alt={`slide-${index}`} />
               <S.SlideTitle>{item.title}</S.SlideTitle>
-              <S.SlideRoutineTitle>{item.routine_title}</S.SlideRoutineTitle>
+              <div className="routineTitle">
+                {item.routine_title.map((title, titleIndex) => (
+                  <S.SlideRoutineTitle key={titleIndex}>
+                    {title}
+                  </S.SlideRoutineTitle>
+                ))}
+              </div>
             </S.SlideContent>
           </Link>
         ))}

diff --git a/src/components/ImgSlider/styled.js b/src/components/ImgSlider/styled.js
@@ -25,6 +25,13 @@ export const SlideContent = styled.div`
   justify-content: center;
   transform: ${({ $active }) => ($active ? "scale(1)" : "scale(0.8)")};
   transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+  .routineTitle {
+    display: flex;
+    flex-direction: row;
+    width: 80%;
+    overflow: hidden;
+  }
 `;
 
 export const SlideImage = styled.img`

diff --git a/src/hooks/useMain.js b/src/hooks/useMain.js
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { getMainContent } from "@/apis/main";
 
 export const useMainData = () => {
-  const [mainData, setMainData] = useState([]);
+  const [mainData, setMainData] = useState(null);
 
   const fetchMainData = async () => {
     try {

diff --git a/src/pages/Mainpage/Mainpage.jsx b/src/pages/Mainpage/Mainpage.jsx
@@ -10,21 +10,27 @@ import { useMainData } from "@/hooks/useMain";
 function Mainpage() {
   const { mainData } = useMainData();
   console.log("mainData:", mainData);
+
+  if (!mainData) {
+    return <div>Loading...</div>;
+  }
+
+  const themeData = mainData.theme;
   return (
     <>
       <S.MainTitle>
         <S.ImageFame src={Logo1} />
         <S.ImageFame src={Logo2} />
       </S.MainTitle>
-      <ImageSlider ThemeImg={mainData.theme} />
+      <ImageSlider ThemeImg={themeData} />
       <S.MainContainer>
-        {mainData.map((title, index) => (
+        {Object.keys(mainData).map((key, index) => (
           <div key={index}>
             <S.CategoryWrapper>
-              <CategoryTitle section={title} fontSize="20px" />
+              <CategoryTitle section={key} fontSize="20px" />
             </S.CategoryWrapper>
             <S.RoutineBoxWrapper>
-              {title.map((data) => (
+              {mainData[key].map((data) => (
                 <RoutineBox
                   key={data.id}
                   id={data.id}