[REFACTOR] Container를 이용한 모듈화 및 전체 기능 구현 리팩토링

 import "./App.scss";
 import "./App.scss";
 import MainPage from "./pages/MainPage";
 import MainPage from "./pages/MainPage";
 import SurveyPageContainer from "./containers/SurveyPageContainer";
 import SurveyPageContainer from "./containers/SurveyPageContainer";
-import ResultPage from "./pages/ResultPage";
+import ResultPageContainer from "./containers/ResultPageContainer";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 
 
 function App() {
 function App() {
@@ -11,7 +11,7 @@ function App() {
         <Switch>
         <Switch>
           <Route exact path="/" component={MainPage} />
           <Route exact path="/" component={MainPage} />
           <Route path="/survey" component={SurveyPageContainer} />
           <Route path="/survey" component={SurveyPageContainer} />
-          <Route path="/result" component={ResultPage} />
+          <Route path="/result" component={ResultPageContainer} />
         </Switch>
         </Switch>
       </div>
       </div>
     </BrowserRouter>
     </BrowserRouter>

+import React from 'react'
+import { useSelector } from 'react-redux';
+import ResultPage from '../pages/ResultPage';
+
+export function ResultPageContainer() {
+    const data = useSelector((state) => state.result.data);
+    return (
+        <>
+            <ResultPage
+                result={data}
+            />
+        </>
+    )
+}
+
+export default ResultPageContainer;
\ No newline at end of file

-import React from 'react'
+import React from 'react';
 import { useSelector } from 'react-redux';
 import { useSelector } from 'react-redux';
 import SurveyPage from '../pages/SurveyPage';
 import SurveyPage from '../pages/SurveyPage';
+// import { createHashHistory } from 'history'
+// const history = createHashHistory();
 
 
-export function SurveyPageContainer() {
+export function SurveyPageContainer({history}) {
     const data = useSelector((state) => state.survey.data);
     const data = useSelector((state) => state.survey.data);
     return (
     return (
         <>
         <>
             <SurveyPage
             <SurveyPage
+                history={history}
                 question={data}
                 question={data}
             />
             />
         </>
         </>

 import React,{useEffect} from 'react';
 import React,{useEffect} from 'react';
-import './MainPage.scss';
+import {getQuestionThunk} from '../store/action/survey';
+import { useDispatch } from 'react-redux';
 import {Button} from "antd";
 import {Button} from "antd";
-import axios from 'axios';
 import mainImg from "../assets/main-soldier.png";
 import mainImg from "../assets/main-soldier.png";
-import {getSurvey, getSurveySuccess, getSurveyError} from '../store/action/survey';
-import { useDispatch } from 'react-redux';
+import styled from 'styled-components';
+
+const Container = styled.div`
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+`;
+
+const MainImg = styled.img`
+    margin-top: 2rem;
+    width: 70rem;
+    height: 35rem;
+    border-radius: 1rem;
+`;
+
+const MainTitle = styled.div`
+    margin-top: 5rem;
+    text-align: center;
+    font-size: 5rem;
+    font-weight: bold;
+`;
+
+const MainDesc = styled.div`
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    font-size: 1.5rem;
+`;
 
 
 
 
 function MainPage({history}){
 function MainPage({history}){
@@ -12,35 +37,27 @@ function MainPage({history}){
     const onClick = () => {
     const onClick = () => {
         history.push('/survey');
         history.push('/survey');
     }
     }
+
     useEffect(()=>{
     useEffect(()=>{
-        const getApi = async() =>{
-            dispatch(getSurvey());
-            try{
-              const {data} = await axios.get("getquestions");
-              dispatch(getSurveySuccess(data));
-            }catch(e){
-              dispatch(getSurveyError(e));
-            }
-          }
-        getApi();    
+        dispatch(getQuestionThunk());
     },[]);
     },[]);
 
 
     return(
     return(
         <>
         <>
-            <div className="main-wrapper">
-                <div className="main-title">KHUSAT</div>
-                <div className="main-title__desc">
+            <Container>
+                <MainTitle>KHUSAT</MainTitle>
+                <MainDesc>
                     KHUSAT 특별과정, <br></br>
                     KHUSAT 특별과정, <br></br>
                     여러분의 보직을 추천드립니다.
                     여러분의 보직을 추천드립니다.
-                </div>
+                </MainDesc>
                 <Button 
                 <Button 
                     size="large"
                     size="large"
                     onClick={onClick}
                     onClick={onClick}
                     color="#536349"
                     color="#536349"
                     style={{}}
                     style={{}}
                 > 시작하기</Button>
                 > 시작하기</Button>
-                <img className="main-image" src={mainImg}/>
-            </div>
+                <MainImg src={mainImg}/>
+            </Container>
         </>
         </>
     );
     );
 }
 }

-.main-wrapper{
-    display:flex;
-    flex-direction: column;
-    align-items: center;
-    // max-width: 50rem;
-}
-
-.main-image{
-    margin-top: 2rem;
-    width: 70rem;
-    height: 35rem;
-    border-radius: 1rem;
-}
-
-.main-title{
-    margin-top: 5rem;
-    text-align: center;
-    font-size: 5rem;
-    font-weight: bold;
-    &__desc{
-        margin-top: 2rem;
-        margin-bottom: 2rem;
-        font-size: 1.5rem;
-    }
-}

 import React from 'react';
 import React from 'react';
-import {useSelector} from 'react-redux';
 import styled from 'styled-components';
 import styled from 'styled-components';
 
 
 const Container = styled.div`
 const Container = styled.div`
@@ -24,18 +23,15 @@ const Description = styled.div`
     font-size: 1.4rem;
     font-size: 1.4rem;
 `;
 `;
 
 
-function ResultPage(){
-    const data = useSelector(state=>state.result.data);
-
+function ResultPage({result}){
     return(
     return(
         <>
         <>
-            {data ? (
+            {result && (
                 <Container>
                 <Container>
-                    <Title>{data.high}</Title>
-                    <Position>{data.low}</Position>
-                    <Description>{data.description}</Description>
+                    <Title>{result.high}</Title>
+                    <Position>{result.low}</Position>
+                    <Description>{result.description}</Description>
                 </Container>)
                 </Container>)
-                : <div>로딩중</div>
             }  
             }  
         </>
         </>
     );
     );

 import React, { useState, useEffect } from "react";
 import React, { useState, useEffect } from "react";
 import Card from "../components/card/Card";
 import Card from "../components/card/Card";
+import {useDispatch} from 'react-redux';
+import {getResultThunk} from "../store/action/result";
 import ProgressBar from "../components/progressbar/ProgressBar";
 import ProgressBar from "../components/progressbar/ProgressBar";
 import "antd/dist/antd.css";
 import "antd/dist/antd.css";
 
 
@@ -35,8 +37,10 @@ function SurveyPage({ history, question }) {
   const dispatch = useDispatch();
   const dispatch = useDispatch();
 
 
   useEffect(()=>{
   useEffect(()=>{
-    if(answer.length === 10){
-      dispatch()
+    if(answer.length === 10){ // answer state 배열에 10개가 채워지면,
+      dispatch(getResultThunk(answer));
+      history.push('/result');
+      console.log(history);
     }
     }
   },[answer]);
   },[answer]);