[ADD] MainPage 반응형 구현 준비 및 일부 구현

 import React, { useEffect } from "react";
 import React, { useEffect } from "react";
 import { getQuestionThunk } from "../store/action/survey";
 import { getQuestionThunk } from "../store/action/survey";
 import { useDispatch } from "react-redux";
 import { useDispatch } from "react-redux";
-import soldier from '../assets/soldier.png';
-import styled from "styled-components";
-import pattern from '../assets/mainPattern.jpeg';
+import soldier from "../assets/soldier.png";
+import styled, { css } from "styled-components";
+import pattern from "../assets/mainPattern.jpeg";
 
 
-const Wrapper = styled.div`
+const sizes = {
+  desktop: 102.4,
+  tablet: 76.8,
+  phone: 36,
+};
+
+const media = Object.keys(sizes).reduce((acc, label) => {
+  acc[label] = (...args) => css`
+    @media (max-width: ${sizes[label]}rem) {
+      ${css(...args)}
+    }
+  `;
+  return acc;
+}, {});
+
+const WrapperContainer = styled.div`
   width: 100%;
   width: 100%;
   height: 100vh;
   height: 100vh;
+`;
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
   background-image: url(${pattern});
   background-image: url(${pattern});
   background-repeat: no-repeat; // background-image가 컨테이너를 가득 채우지 못할 경우에도 반복하지 않는다.
   background-repeat: no-repeat; // background-image가 컨테이너를 가득 채우지 못할 경우에도 반복하지 않는다.
   background-size: cover; // 사이즈가 container에 맞지 않아도 꽉 차도록 채운다.
   background-size: cover; // 사이즈가 container에 맞지 않아도 꽉 차도록 채운다.
-  background-position: center; // background-image가 컨테이너에 가운데로 오도록 한다. 
+  background-position: center; // background-image가 컨테이너에 가운데로 오도록 한다.
 `;
 `;
 
 
 const Container = styled.div`
 const Container = styled.div`
@@ -22,40 +42,64 @@ const Container = styled.div`
   color: #ffffff;
   color: #ffffff;
 `;
 `;
 
 
+// 반응형
 const MainImg = styled.img`
 const MainImg = styled.img`
-  height: 50vh;
+  width: 30rem;
+  height: auto;
+  ${media.tablet`
+    width: 20rem;
+  `}
 `;
 `;
 
 
 const MainTitle = styled.div`
 const MainTitle = styled.div`
-  margin-top: 5rem;
+  margin-top: 3rem;
   text-align: center;
   text-align: center;
   font-size: 5rem;
   font-size: 5rem;
   font-weight: bold;
   font-weight: bold;
+  ${media.tablet`
+    font-size: 4rem;
+  `}
 `;
 `;
 
 
 const MainDesc = styled.div`
 const MainDesc = styled.div`
   margin-top: 2rem;
   margin-top: 2rem;
   margin-bottom: 2rem;
   margin-bottom: 2rem;
   font-size: 1.5rem;
   font-size: 1.5rem;
+  ${media.tablet`
+    font-size: 1.1rem;
+  `}
+`;
+
+const MainBtnWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  ${media.tablet`
+    
+  `}
 `;
 `;
 
 
 const MainBtn = styled.div`
 const MainBtn = styled.div`
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 1rem;
-    width: 25rem;
-    height: 5rem;
-    font-size: 1.6rem;
-    font-weight: bold;
-    border-radius: 1rem;
-    border: 1px solid #010101;
-    background-color: #3c441d;
-    &:hover{
-        background-color: #ffffff;
-        color: #010101;
-    }
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+  width: 25rem;
+  height: 5rem;
+  font-size: 1.6rem;
+  font-weight: bold;
+  border-radius: 1rem;
+  border: 1px solid #010101;
+  color: #ffffff;
+  background-color: #3c441d;
+  transform: background-color;
+  transition: ease-out 0.3s;
+  &:hover {
+    background-color: #ffffff;
+    color: #010101;
+  }
 `;
 `;
 
 
 function MainPage({ history }) {
 function MainPage({ history }) {
@@ -70,17 +114,21 @@ function MainPage({ history }) {
 
 
   return (
   return (
     <>
     <>
-      <Wrapper>
-        <Container>
-          <MainTitle>KHUSAT</MainTitle>
-          <MainDesc>
-            KHUSAT 특별과정, <br></br>
-            여러분의 보직을 추천드립니다.
-          </MainDesc>
-          <MainImg src={soldier} />
-          <MainBtn onClick={onClick}>시작하기</MainBtn>
-        </Container>
-      </Wrapper>
+      <WrapperContainer>
+        <Wrapper>
+          <Container>
+            <MainTitle>KHUSAT</MainTitle>
+            <MainDesc>
+              KHUSAT 특별과정, <br></br>
+              여러분의 보직을 추천드립니다.
+            </MainDesc>
+            <MainImg src={soldier} />
+          </Container>
+          <MainBtnWrapper>
+            <MainBtn onClick={onClick}>시작하기</MainBtn>
+          </MainBtnWrapper>
+        </Wrapper>
+      </WrapperContainer>
     </>
     </>
   );
   );
 }
 }

@@ -6,7 +6,7 @@ const Container = styled.div`
     flex-direction: column;
     flex-direction: column;
     justify-content: center;
     justify-content: center;
     align-items: center;
     align-items: center;
-    margin-top: 100px;
+    margin-top: 10rem;
 `;
 `;
 
 
 const Title = styled.div`
 const Title = styled.div`

@@ -3,14 +3,13 @@ import Card from "../components/card/Card";
 import {useDispatch} from 'react-redux';
 import {useDispatch} from 'react-redux';
 import {getResultThunk} from "../store/action/result";
 import {getResultThunk} from "../store/action/result";
 import "antd/dist/antd.css";
 import "antd/dist/antd.css";
-import mainPattern from "../assets/mainPattern.jpeg";
 
 
 import styled, { css } from "styled-components";
 import styled, { css } from "styled-components";
 
 
 const SurveyContainer = styled.div`
 const SurveyContainer = styled.div`
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
-  background-image: url(${mainPattern});
+  // 얘도 배경 고려해보기
 `;
 `;
 
 
 const Container = styled.div`
 const Container = styled.div`