[UPDATE] 메인 Page 배경화면 디자인 변경 및 버튼 커스텀

@@ -10,6 +10,7 @@
     "antd": "^4.8.2",
     "antd": "^4.8.2",
     "axios": "^0.21.0",
     "axios": "^0.21.0",
     "node-sass": "4",
     "node-sass": "4",
+    "polished": "^4.0.5",
     "react": "^17.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
     "react-redux": "^7.2.2",

 import React from "react";
 import React from "react";
 import styled, { css } from "styled-components";
 import styled, { css } from "styled-components";
+import { lighten,darken } from "polished";
 
 
 function Card({ question, answer, setAnswer, curIdx, setCurIdx }) {
 function Card({ question, answer, setAnswer, curIdx, setCurIdx }) {
   const CardWrap = styled.div`
   const CardWrap = styled.div`
@@ -30,6 +31,12 @@ function Card({ question, answer, setAnswer, curIdx, setCurIdx }) {
     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;
     align-items: center;
     align-items: center;
+    &:hover {
+      background: ${lighten(0.1, "#536349")}; // color of card -> theme화 하기
+    }
+    &:active {
+      background: ${darken(0.1, "#536349")};
+    }
   `;
   `;
 
 
   const onClickOne = () => {
   const onClickOne = () => {

-import React,{useEffect} from 'react';
-import {getQuestionThunk} from '../store/action/survey';
-import { useDispatch } from 'react-redux';
-import {Button} from "antd";
-import mainImg from "../assets/main-soldier.png";
-import styled from 'styled-components';
+import React, { useEffect } from "react";
+import { getQuestionThunk } from "../store/action/survey";
+import { useDispatch } from "react-redux";
+import soldier from '../assets/soldier.png';
+import styled from "styled-components";
+import pattern from '../assets/mainPattern.jpeg';
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+  background-image: url(${pattern});
+  background-repeat: no-repeat; // background-image가 컨테이너를 가득 채우지 못할 경우에도 반복하지 않는다.
+  background-size: cover; // 사이즈가 container에 맞지 않아도 꽉 차도록 채운다.
+  background-position: center; // background-image가 컨테이너에 가운데로 오도록 한다. 
+`;
 
 
 const Container = styled.div`
 const Container = styled.div`
-    display:flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
 `;
 `;
 
 
 const MainImg = styled.img`
 const MainImg = styled.img`
-    margin-top: 2rem;
-    width: 70rem;
-    height: 35rem;
-    border-radius: 1rem;
+  height: 50vh;
 `;
 `;
 
 
 const MainTitle = styled.div`
 const MainTitle = styled.div`
-    margin-top: 5rem;
-    text-align: center;
-    font-size: 5rem;
-    font-weight: bold;
+  margin-top: 5rem;
+  text-align: center;
+  font-size: 5rem;
+  font-weight: bold;
 `;
 `;
 
 
 const MainDesc = styled.div`
 const MainDesc = styled.div`
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-    font-size: 1.5rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  font-size: 1.5rem;
 `;
 `;
 
 
-
-function MainPage({history}){
-    const dispatch = useDispatch();
-    const onClick = () => {
-        history.push('/survey');
+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;
     }
     }
+`;
+
+function MainPage({ history }) {
+  const dispatch = useDispatch();
+  const onClick = () => {
+    history.push("/survey");
+  };
 
 
-    useEffect(()=>{
-        dispatch(getQuestionThunk());
-    },[]);
+  useEffect(() => {
+    dispatch(getQuestionThunk());
+  }, []);
 
 
-    return(
-        <>
-            <Container>
-                <MainTitle>KHUSAT</MainTitle>
-                <MainDesc>
-                    KHUSAT 특별과정, <br></br>
-                    여러분의 보직을 추천드립니다.
-                </MainDesc>
-                <Button 
-                    size="large"
-                    onClick={onClick}
-                    color="#536349"
-                    style={{}}
-                > 시작하기</Button>
-                <MainImg src={mainImg}/>
-            </Container>
-        </>
-    );
+  return (
+    <>
+      <Wrapper>
+        <Container>
+          <MainTitle>KHUSAT</MainTitle>
+          <MainDesc>
+            KHUSAT 특별과정, <br></br>
+            여러분의 보직을 추천드립니다.
+          </MainDesc>
+          <MainImg src={soldier} />
+          <MainBtn onClick={onClick}>시작하기</MainBtn>
+        </Container>
+      </Wrapper>
+    </>
+  );
 }
 }
 
 
 export default MainPage;
 export default MainPage;

@@ -8617,6 +8617,13 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
   dependencies:
     ts-pnp "^1.1.6"
     ts-pnp "^1.1.6"
 
 
+polished@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-4.0.5.tgz#3f91873c8f72dec1723b3f892f57fbb22645b23d"
+  integrity sha512-BY2+LVtOHQWBQpGN4GPAKpCdsBePOdSdHTpZegRDRCrvGPkRPTx1DEC+vGjIDPhXS7W2qiBxschnwRWTFdMZag==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 portfinder@^1.0.26:
 portfinder@^1.0.26:
   version "1.0.28"
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"