pwa 및 react-yotube 설정

package.json

@@ -19,6 +19,7 @@
     "react-icons": "^5.4.0",
     "react-router-dom": "^6.26.2",
     "react-slick": "^0.30.3",
+    "react-youtube": "^10.1.0",
     "sass": "^1.85.0",
     "slick-carousel": "^1.8.1",
     "styled-components": "^6.1.13",

src/pages/loginpage/LoginPage.jsx

@@ -3,6 +3,7 @@ import useLogin from "@hooks/useLogin";
 import { InputwithTitle } from "@components/common/inputs/inputwithtitle/InputwithTitle";
 import { Footer2 } from "@components/layout/footer/footer2/Footer2";
 import { LoginModal } from "@components/common/signupmodal/LoginModal";
+import useCustomNavigate from "@hooks/useCustomNavigate";
 
 export const LoginPage = () => {
   const {
@@ -19,6 +20,7 @@ export const LoginPage = () => {
     isLoginSuccess,
   } = useLogin();
 
+  const { goToPage } = useCustomNavigate();
   return (
     <S.Wrapper>
       <S.SemiTitle>로그인</S.SemiTitle>
@@ -40,6 +42,10 @@ export const LoginPage = () => {
         value={password}
         errorMessage={errors.password}
       />
+
+      <S.Signup
+        onClick={() => goToPage("/signup")}
+      >가입하기</S.Signup>
       <Footer2 
         isLoginEnabled={isLoginEnabled}
         onLoginClick={handleLogin}

src/pages/loginpage/styled.js

@@ -4,6 +4,7 @@ export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  align-items: center;
 `;
 
 export const SemiTitle = styled.div`
@@ -13,4 +14,17 @@ export const SemiTitle = styled.div`
 
   ${({ theme }) => theme.fonts.PretendardSB};
   font-size: 1.25rem; /* 20px */
-`;
+`;
+
+export const Signup = styled.div`
+  ${({ theme }) => theme.fonts.PretendardR};
+  font-size: 14px;
+  font-weight: 400;
+
+  text-decoration: underline;
+  cursor: pointer;
+
+  display: flex;
+  width: 85%;
+`;
+

src/pages/mainpage/MainPage.jsx

@@ -1,18 +1,26 @@
 import * as S from "./styled";
 import { useState, useEffect } from "react";
+import YouTube from "react-youtube";
 import Left from "/images/main/Left.svg";
 import Right from "/images/main/Right.svg";
 import Arrow from "/images/main/Arrow.svg";
 import warning from "/images/main/warning.svg";
 import Calendar from "/images/main/Calendar.svg";
 import useCustomNavigate from "@hooks/useCustomNavigate";
 import { MainFooter } from "@components/layout/footer/mainfooter/MainFooter";
-import { instance } from "@services/instance";
 import { UserService } from "@services/UserService";
-import { SelectService } from "@services/SelectService";
 import { ExperienceService } from "@services/ExperienceService";
 import { ChoiceModal } from "@components/common/choicemodal/ChoiceModal";
 
+const youtubeVideos = [
+  { id: "GpNCT9ZSZPk", title: "Rick Astley - Never Gonna Give You Up" },
+  { id: "9FoS-z3vIDI", title: "Queen - Bohemian Rhapsody" },
+];
+const books = [
+  { cover: "/images/books/book1.svg", title: "모두의 알고리즘" },
+  { cover: "/images/books/book2.svg", title: "클린 코드" },
+];
+
 export const MainPage = () => {
   const { goToPage } = useCustomNavigate();
 
@@ -21,6 +29,7 @@ export const MainPage = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isModalOpen2, setIsModalOpen2] = useState(false);
   const [dDayText, setDDayText] = useState("");
+  const [randomSlides, setRandomSlides] = useState([]);
 
   useEffect(() => {
     const getUserState = async () => {
@@ -88,6 +97,15 @@ export const MainPage = () => {
     setDDayText(dDayResult);
   };
 
+  const shuffleArray = (array) => {
+    return array.sort(() => Math.random() - 0.5);
+  };
+
+  useEffect(() => {
+    // 📌 유튜브와 책을 하나의 배열로 합친 후 랜덤으로 섞음
+    const mixedContent = shuffleArray([...youtubeVideos, ...books]);
+    setRandomSlides(mixedContent);
+  }, []);
 
   return (
     <S.Wrapper>
@@ -174,11 +192,24 @@ export const MainPage = () => {
 
         </>
       )}
-
-
 
       <S.SubTitle>경험의 가치를 알아봐요</S.SubTitle>
 
+      <S.SliderContainer>
+        {randomSlides.map((item, index) => (
+          <S.SlideItem key={index} $type={item.id ? "youtube" : "book"}>
+            {item.id ? (
+              // 📌 유튜브 영상
+              <YouTube videoId={item.id} opts={{ width: "100%", height: "120px" }} />
+            ) : (
+              // 📌 책 표지
+              <>
+                <S.BookCover src={item.cover} alt={item.title} />
+              </>
+            )}
+          </S.SlideItem>
+        ))}
+      </S.SliderContainer>
 
       {isModalOpen && (
         <ChoiceModal

src/pages/mainpage/styled.js

@@ -147,4 +147,41 @@ export const DateBox = styled.div`
   border-radius: 12px;
   background: ${({ theme }) => theme.colors.black};
   color: ${({ theme }) => theme.colors.white};
+`;
+
+export const SliderContainer = styled.div`
+  display: flex;
+
+  transform: translateY(-20px);
+  gap: 15px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  white-space: nowrap;
+  width: 85%;
+  padding: 10px;
+  -webkit-overflow-scrolling: touch; /* iOS 스크롤 부드럽게 */
+
+  &::-webkit-scrollbar {
+    display: none; /* 스크롤바 숨김 */
+  }
+`;
+
+export const SlideItem = styled.div`
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+  width: ${({ $type }) => ($type === "youtube" ? "220px" : "160px")};
+  text-align: center;
+`;
+
+export const SlideTitle = styled.div`
+  margin-top: 5px;
+  font-size: 14px;
+  font-weight: bold;
+`;
+
+export const BookCover = styled.img`
+  width: 82px;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 10px;
 `;