diff --git a/src/assets/MainHome/Section1/main-EntertheRoom-hover.svg b/src/assets/MainHome/Section1/main-EntertheRoom-hover.svg
new file mode 100644
index 0000000..4468c5e
--- /dev/null
+++ b/src/assets/MainHome/Section1/main-EntertheRoom-hover.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/components/Home/HomeUnreg.jsx b/src/components/Home/HomeUnreg.jsx
index 7e1fecc..a40129b 100644
--- a/src/components/Home/HomeUnreg.jsx
+++ b/src/components/Home/HomeUnreg.jsx
@@ -1,14 +1,18 @@
import { useEffect, useRef, useState } from "react";
+import { useParams } from "react-router-dom";
import { useRecoilValue, useResetRecoilState } from "recoil";
import styled from "styled-components";
-import { useParams } from "react-router-dom";
import AOS from "aos";
+import googleLogo from "src/assets/googlelogo.svg";
+import kakaoLogo from "src/assets/kakaologo.svg";
+
import "aos/dist/aos.css";
import MainWoomoolText from "../../assets/MainHome/Section1/main-woomol-text.svg";
import MainPointDownImg from "../../assets/MainHome/Section1/main-point-down.svg";
import MainEntertheRoomImg from "../../assets/MainHome/Section1/main-EntertheRoom.svg";
+import MainEntertheRoomImgHover from "../../assets/MainHome/Section1/main-EntertheRoom-hover.svg";
import { authJwtAtom } from "../../recoil/auth/atoms";
import Header from "../Header";
@@ -17,10 +21,16 @@ import MainHomeComp2_1 from "./MainHomeComp2_1";
import MainHomeComp3 from "./MainHomeComp3";
import MainHomeComp4 from "./MainHomeComp4";
import Footer from "./Footer";
-import { pretendard } from "../../styles/fonts";
+import { pretendard, timesNewRoman } from "../../styles/fonts";
+import { HoverImageSpan } from "../../styles/stylePresets";
+import TheModal from "../TheModal";
+
+import headerLogo from "src/assets/header-logo.svg";
+import { serverRootUrl } from "../../constants";
function HomeUnreg() {
const [videoLoadedComplete, setVideoLoadedComplete] = useState(false);
+ const [openModal, setOpenModal] = useState("initial");
const jwtValue = useRecoilValue(authJwtAtom);
const resetAuth = useResetRecoilState(authJwtAtom);
@@ -57,7 +67,16 @@ function HomeUnreg() {
{/* */}
-
+ setOpenModal("show")}
+ >
+
+
+
+
+
+
+
+
+ LOGIN
+
+ Pure water is the world's
+
first and foremost medicine.
+
+
+
+
+ Google 계정으로 계속
+
+
+
+ Kakao 계정으로 계속
+
+
+
);
}
@@ -206,6 +256,7 @@ const MainEnterTheRoom = {
main: styled.div`
display: flex;
justify-content: center;
+ align-items: center;
/* position: absolute; */
/* bottom: 0;
transform: translateY(100%); */
@@ -250,3 +301,75 @@ const MainPointDown = styled.div`
const MainHomeSection2 = styled(ScrollSnap)`
background-color: black;
`;
+
+const HeaderModalLoginBtn = {
+ root: styled.div`
+ ${pretendard}
+ color: black;
+ font-size: 12px;
+ font-weight: 600; // Semi Bold
+ `,
+ google: styled.a`
+ /* Frame 6 */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 9px 51px;
+ gap: 10px;
+
+ background: rgba(255, 255, 255, 0.6);
+ box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25), inset 0px 0px 4px #ffffff;
+ border-radius: 30px;
+
+ margin-bottom: 11px;
+
+ text-decoration: none;
+ color: inherit;
+ `,
+ kakao: styled.a`
+ /* Frame 7 */
+
+ /* Auto layout */
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 11px 31px;
+ gap: 10px;
+
+ background: rgba(250, 255, 9, 0.6);
+ box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25),
+ inset 0px 0px 4px rgba(255, 255, 255, 0.8);
+ border-radius: 30px;
+
+ text-decoration: none;
+ color: inherit;
+ `,
+};
+
+const HeaderModalLoginText = {
+ logo: styled.div`
+ width: 47px;
+ margin-bottom: 18px;
+ img {
+ width: 100%;
+ }
+ `,
+ title: styled.div`
+ ${timesNewRoman}
+ font-size: 18px;
+ font-weight: bold;
+ font-style: italic;
+ text-transform: uppercase;
+ margin-bottom: 13px;
+ `,
+ text: styled.div`
+ ${timesNewRoman}
+ font-size: 12px;
+ text-transform: uppercase;
+ margin-bottom: 25px;
+ `,
+};