🐛Fix: 유튜브 크롤링 되돌리기

src/pages/main/RelatedSns.style.js

@@ -12,14 +12,15 @@ export const StyledTitleDiv = styled.div`
   font-weight: bold;
 `;
 export const YoutubeContent = styled.div`
-  background-color: ${(props) => (props.darkMode ? "#333333" : "#ededed")};
+  background-color: ${(props) => (props.darkMode ? "#47484A" : "#E0E0E0")};
   width: 90%;
   height: 200px;
   border-radius: 9px;
   align-content: center;
+  justify-content:center;
 `;
 export const InstagramContent = styled.div`
-  background-color: ${(props) => (props.darkMode ? "#333333" : "#ededed")};
+  background-color: ${(props) => (props.darkMode ? "#47484A" : "#E0E0E0")};
   width: 90%;
   height: 120px;
   border-radius: 9px;

src/pages/main/contents-item/ContentHeader.jsx

@@ -45,7 +45,7 @@ export default function ContentHeader(props) {
         }}
       >
         <a href={props.toLink}>
-          <GlowIcon>
+          <GlowIcon darkMode={darkMode}>
             <HiChevronDoubleRight
               style={{
                 color: darkMode ? "#F2F2F2" : "#00537A",

src/pages/main/contents-item/ContentHeader.style.js

@@ -16,15 +16,15 @@ export const GlowIcon = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-
+  
   svg {
     width: 40px;
     height: 40px;
     color: #00537a;
     transition: filter 0.3s ease-in-out;
 
     &:hover {
-      filter: drop-shadow(0 0 3px rgba(0, 83, 122, 0.8));
+      filter: ${(props) => (props.darkMode ? "drop-shadow(0 0 3px #43D2FF)" : "drop-shadow(0 0 3px rgba(0, 83, 122, 0.8))")};
     }
   }
 `;

src/pages/main/contents-item/Contents.style.js

@@ -15,19 +15,20 @@ export const StyledContentsDiv = styled.div`
   border: 2px solid #d3d3d3;
   border-radius: 20px;
   margin: 4px;
-
+  
   &:hover {
     border-color: #43d2ff;
   }
 `;
 
 // TitleGroup
 export const StyledContentsTitleGroup = styled.div`
+  margin-top:15px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 10px;
+  gap: 5px;
   font-weight: 800;
   font-size: 1.5rem;
 `;

src/pages/main/contents-item/YoutubeVideo.jsx

@@ -28,34 +28,10 @@ export default function YoutubeVideo({ keyword }) {
     const fetchVideos = async () => {
       try {
         const response = await axios.get("/api/youtube", {
-          params: { word: keyword },
-        });
-        const videoData = response.data.slice(0, 5);
-        setVideos(videoData);
-        console.log(videos);
-        console.log("Fetched Videos:", videoData);
-
-        if (videoData.length > 0) {
-          console.log("Video ID:", videoData[0].videoRenderer.videoId);
-          console.log(
-            "URL:",
-            `https://www.youtube.com${videoData[0].videoRenderer.inlinePlaybackEndpoint.commandMetadata.webCommandMetadata.url}`
-          );
-          console.log(
-            "Thumbnail:",
-            videoData[0].videoRenderer.thumbnail.thumbnails[0].url
-          );
-          console.log(
-            "Title:",
-            videoData[0].videoRenderer.title.accessibility.accessibilityData
-              .label
-          );
-          console.log(
-            "Channel:",
-            videoData[0].videoRenderer.longBylineText.runs[0].text
-          );
-        }
 
+          params: { word: keyword, limit: 5 },
+        });
+        setVideos(response.data);
         setLoading(false);
       } catch (err) {
         setError(err);
@@ -65,6 +41,7 @@ export default function YoutubeVideo({ keyword }) {
 
     fetchVideos();
   }, [keyword]);
+
   const settings = {
     slidesToShow: 3,
     slidesToScroll: 1,
@@ -88,7 +65,7 @@ export default function YoutubeVideo({ keyword }) {
   };
 
   if (loading) return <ClipLoader color="#43d2ff"></ClipLoader>;
-  if (!loading && (error || videos.length === 0))
+  if (!loading && (error || videos.length === 0))   
     return !darkMode ? (
       <img
         style={{ marginLeft: "2rem", width: "100%", height: "100%" }}
@@ -102,38 +79,30 @@ export default function YoutubeVideo({ keyword }) {
     );
 
   return (
-    <></>
-    // <SliderContainer>
-    //   <Slider {...settings}>
-    //     {videos.map((video, index) => (
-    //       <Slide key={video.videoRenderer.videoId}>
-    //         <CenteredSlideWrapper>
-    //           <a
-    //             href={`https://www.youtube.com${video.videoRenderer.inlinePlaybackEndpoint.commandMetadata.webCommandMetadata.url}`}
-    //             target="_blank"
-    //             rel="noopener noreferrer"
-    //           >
-    //             <CenteredSlideImage
-    //               src={video.videoRenderer.thumbnail.thumbnails[0].url}
-    //               alt="썸네일"
-    //               isCenter={index === centerSlideIndex}
-    //             />
-    //           </a>
-    //           <CenteredSlideContent isCenter={index === centerSlideIndex}>
-    //             <Title>
-    //               {
-    //                 video.videoRenderer.title.accessibility.accessibilityData
-    //                   .label
-    //               }
-    //             </Title>
-    //             <Channel>
-    //               | {video.videoRenderer.longBylineText.runs[0].text} |
-    //             </Channel>
-    //           </CenteredSlideContent>
-    //         </CenteredSlideWrapper>
-    //       </Slide>
-    //     ))}
-    //   </Slider>
-    // </SliderContainer>
+    <SliderContainer>
+      <Slider {...settings}>
+        {!error &&
+          videos.length !== 0 &&
+          videos.map((video, index) => (
+            <Slide key={video.url}>
+              <CenteredSlideWrapper>
+                <a href={video.url} target="_blank" rel="noopener noreferrer">
+                  <CenteredSlideImage
+                    src={video.thumbnail_url}
+                    alt={video.title}
+                    isCenter={index === centerSlideIndex}
+
+                  />
+                </a>
+                <CenteredSlideContent isCenter={index === centerSlideIndex}>
+                  <Title darkMode={darkMode}>{video.title}</Title>
+                  <Channel darkMode={darkMode}>| {video.channel} |</Channel>
+                </CenteredSlideContent>
+              </CenteredSlideWrapper>
+            </Slide>
+          ))}
+      </Slider>
+    </SliderContainer>
+
   );
-}
+}

src/pages/main/contents-item/YoutubeVideo.style.js

@@ -20,6 +20,7 @@ export const SlideContent = styled.div`
   text-align: center;
 `;
 export const Title = styled.div`
+color: ${(props) => (props.darkMode ? "white" : "black")};
 margin-left:-12.7px;
 width:120%;  
 font-size: 12px;
@@ -31,6 +32,7 @@ font-size: 12px;
 export const Channel = styled.div`
   font-size: 10px;
   color: #666;
+  color: ${(props) => (props.darkMode ? "#ddd" : "#666")};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -49,8 +51,10 @@ export const CenteredSlideImage = styled(SlideImage)`
   height: auto;
   border-radius: 10px;
   transition: transform 0.3s, opacity 0.3s;
-  margin-bottom:5px;
-
+  margin-bottom:7px;
+  img{
+    height:100px;
+  }
   ${props => props.isCenter && css`
     transform: scale(1.05);
     opacity: 1;
@@ -88,10 +92,10 @@ export const CustomArrow = styled.div`
   }
 
   &.slick-prev {
-    left: -15px;
+    left: -30px;
   }
 
   &.slick-next {
-    right: -15px;
+    right: -30px;
   }
 `;