[ADD] progressBar 추가, 이후 아이콘 커스텀 예정

@@ -2,33 +2,60 @@ import React, { useState, useEffect } from "react";
 import Card from "../components/card/Card";
 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 ProgressBar from "../components/progressbar/ProgressBar";
 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`
-  border: solid 1px red;
+  /* border: solid 1px red; */
   width: 500px;
   width: 500px;
   height: 100vh;
   height: 100vh;
   overflow: hidden;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const ProgressBar = styled.div`
+  display: flex;
+  align-items: center;
+  width: 300px;
+  padding: 0.25rem;
+  margin-top: 14rem;
+  background-color: #747b4b;
+  border-radius: 1rem;
+  position: relative;
+`;
+
+// 적당한 icon 찾으면 바꿀 것임
+const ProgressIcon = styled.div`
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background-color: #3c441d;
+  ${(props)=> css`
+    transform: translateX(${30 * props.curIdx}px);
+    transition: 0.5s;
+  `}
 `;
 `;
 
 
 const SliderCotainer = styled.div`
 const SliderCotainer = styled.div`
   width: 100%;
   width: 100%;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
-  /* margin: 0 auto; */
   ${(props) => css`
   ${(props) => css`
         transform: translateX(${-500 * props.curIdx}px);
         transform: translateX(${-500 * props.curIdx}px);
         transition: 0.5s;
         transition: 0.5s;
   `}
   `}
-  margin-top: 20rem;
+  margin-top: 6rem;
 `;
 `;
 
 
 function SurveyPage({ history, question }) {
 function SurveyPage({ history, question }) {
@@ -47,6 +74,9 @@ function SurveyPage({ history, question }) {
     <SurveyContainer>
     <SurveyContainer>
       <Container>
       <Container>
         {/* 상태바 넣기 */}
         {/* 상태바 넣기 */}
+        <ProgressBar>
+          <ProgressIcon curIdx={curIdx}/>
+        </ProgressBar>
         <SliderCotainer curIdx={curIdx}>
         <SliderCotainer curIdx={curIdx}>
           {/* 얘가 슬라이더 컨테이너 */}
           {/* 얘가 슬라이더 컨테이너 */}
           {question.map((question) => (
           {question.map((question) => (