[#4] feat : add main page

src/apis/index.js

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export const axiosInstance = axios.create({
+  baseURL: `http://${process.env.REACT_APP_ENDPOINT}`,
+  timeout: 20000,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});

src/components/TestBox/index.jsx

@@ -31,7 +31,7 @@ const TestBox = ({ step }) => {
         return (
           <>
             {gender === "man" ? "여사친" : "남사친"}이 붕어빵을 굽다가
-            <br /> 손이 데였다고 한다.
+            <br /> 손이 베였다고 한다.
             <br />
             이때 나의 답변은?
           </>

src/components/TestBox/styled.js

@@ -14,7 +14,7 @@ export const Container = styled.div`
 
 export const Text = styled.p`
   color: white;
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   text-align: center;
   line-height: 1.3;
 `;

src/components/TestHeader/index.jsx

@@ -1,12 +1,23 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import { Container, BackButton, Logo } from "./styled";
 import back from "../../assets/images/back.png";
 import logo from "../../assets/images/test_header_logo.png";
 
 const TestHeader = () => {
+  const navigate = useNavigate();
+
+  const handleBackButtonClick = () => {
+    navigate("/");
+  };
+
   return (
     <Container>
-      <BackButton src={back} alt="Back Button" />
+      <BackButton
+        src={back}
+        alt="Back Button"
+        onClick={handleBackButtonClick}
+      />
       <Logo src={logo} alt="Logo" />
     </Container>
   );

src/index.js

@@ -1,8 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import axios from "axios";
 import App from "./App";
 
 import "./styles/global.css";
 
+axios.defaults.withCredentials = true;
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);

src/pages/Main/index.jsx

@@ -1,7 +1,48 @@
-import React from "react";
+import React, { useState } from "react";
+import { SnowAnimation, SideMenu, LoginModal } from "../../components";
+import {
+  Background,
+  MainImage,
+  SnowmanImage,
+  MainLogo,
+  StartButton,
+  Container,
+  MenuImage,
+} from "./styled";
+import main from "../../assets/images/main.png";
+import logo from "../../assets/images/main_logo.png";
+import snowman from "../../assets/images/snowman.png";
+import menu from "../../assets/images/menu.png";
 
 const Main = () => {
-  return <>Main</>;
+  const [isMenuVisible, setIsMenuVisible] = useState(false);
+  const [isLoginVisible, setIsLoginVisible] = useState(false);
+
+  const handleStartButtonClick = () => {
+    setIsLoginVisible(!isLoginVisible);
+  };
+
+  const handleMenuClick = () => {
+    setIsMenuVisible(!isMenuVisible);
+  };
+
+  return (
+    <>
+      <Background />
+      <SnowAnimation />
+      <MenuImage src={menu} alt="menu" onClick={handleMenuClick} />
+      <MainLogo src={logo} alt="logo" />
+      <MainImage src={main} alt="main" />
+      <SnowmanImage src={snowman} alt="snowman" />
+      <Container>
+        <StartButton onClick={handleStartButtonClick}>
+          서비스 시작하기
+        </StartButton>
+      </Container>
+      {isMenuVisible && <SideMenu onClose={handleMenuClick} />}
+      {isLoginVisible && <LoginModal />}
+    </>
+  );
 };
 
 export default Main;

src/pages/Main/styled.js

@@ -1,6 +1,60 @@
 import styled from "styled-components";
 
+export const Background = styled.div`
+  background: #102531;
+  width: 100vw;
+  height: 84vh;
+  position: fixed;
+  z-index: -2;
+`;
+
+export const MainImage = styled.img`
+  position: fixed;
+  width: 100vw;
+  height: auto;
+  bottom: 15vh;
+  z-index: -1;
+`;
+
+export const MenuImage = styled.img`
+  position: fixed;
+  width: 10vw;
+  height: auto;
+  top: 1vh;
+  right: 3vw;
+  z-index: 0;
+`;
+
+export const MainLogo = styled.img`
+  position: fixed;
+  top: 10vh;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: -1;
+`;
+
+export const SnowmanImage = styled.img`
+  position: fixed;
+  top: 25vh;
+  left: 20%;
+  z-index: -1;
+`;
+
+export const StartButton = styled.button`
+  background: white;
+  width: 85vw;
+  height: 8vh;
+  border-radius: 15px;
+  box-shadow: 0px 0px 8px 5px rgba(16, 37, 49, 0.5);
+  font-size: 1.2rem;
+  font-weight: bold;
+`;
+
 export const Container = styled.div`
   width: 100vw;
-  height: 100vh;
+  height: 95vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
 `;

src/pages/TestPage/buttonTexts.js

@@ -24,7 +24,7 @@ const buttonTexts = [
   { top: "ㅋㅋㅋ 잘 놀고 곱게 들어가!", bottom: "괜찮아? 많이 취했어?" },
   {
     top: "아 이제 사적으로 둘이서 보는 일은 피해야겠다.",
-    bottom: "나를 좋게 봐줬다는 거니까 좋네네",
+    bottom: "나를 좋게 봐줬다는 거니까 좋네",
   },
   {
     top: "오 밖에 눈 오는구나.",

src/pages/TestPage/styled.js

@@ -18,6 +18,7 @@ export const Container = styled.div`
 
 export const StepImage = styled.img`
   margin: 10vw;
+  width: 80vw;
 `;
 
 export const Button = styled.button`
@@ -26,7 +27,7 @@ export const Button = styled.button`
   margin-top: 3vh;
   border-radius: 30px;
   border: 1px solid white;
-  font-size: 1.2rem;
+  font-size: 1rem;
   background: rgba(255, 255, 255, 0);
   color: white;
 `;