diff --git a/package.json b/package.json
index d5104f5..b64f522 100644
--- a/package.json
+++ b/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",
diff --git a/public/icons/pwa-192.png b/public/icons/pwa-192.png
index 3ca1135..505a22e 100644
Binary files a/public/icons/pwa-192.png and b/public/icons/pwa-192.png differ
diff --git a/public/icons/pwa-512.png b/public/icons/pwa-512.png
index 0e32126..98baa04 100644
Binary files a/public/icons/pwa-512.png and b/public/icons/pwa-512.png differ
diff --git a/public/images/books/book1.svg b/public/images/books/book1.svg
new file mode 100644
index 0000000..4d72eac
--- /dev/null
+++ b/public/images/books/book1.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/images/books/book2.svg b/public/images/books/book2.svg
new file mode 100644
index 0000000..4dbbcd2
--- /dev/null
+++ b/public/images/books/book2.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/pages/loginpage/LoginPage.jsx b/src/pages/loginpage/LoginPage.jsx
index d391bfd..7aea7de 100644
--- a/src/pages/loginpage/LoginPage.jsx
+++ b/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 (
로그인
@@ -40,6 +42,10 @@ export const LoginPage = () => {
value={password}
errorMessage={errors.password}
/>
+
+ goToPage("/signup")}
+ >가입하기
theme.fonts.PretendardSB};
font-size: 1.25rem; /* 20px */
-`;
\ No newline at end of file
+`;
+
+export const Signup = styled.div`
+ ${({ theme }) => theme.fonts.PretendardR};
+ font-size: 14px;
+ font-weight: 400;
+
+ text-decoration: underline;
+ cursor: pointer;
+
+ display: flex;
+ width: 85%;
+`;
+
diff --git a/src/pages/mainpage/MainPage.jsx b/src/pages/mainpage/MainPage.jsx
index 96b00fd..abac46a 100644
--- a/src/pages/mainpage/MainPage.jsx
+++ b/src/pages/mainpage/MainPage.jsx
@@ -1,5 +1,6 @@
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";
@@ -7,12 +8,19 @@ 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 (
@@ -174,11 +192,24 @@ export const MainPage = () => {
)}
-
-
경험의 가치를 알아봐요
+
+ {randomSlides.map((item, index) => (
+
+ {item.id ? (
+ // 📌 유튜브 영상
+
+ ) : (
+ // 📌 책 표지
+ <>
+
+
+ )}
+
+ ))}
+
{isModalOpen && (
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;
`;
\ No newline at end of file