feat: result page 디자인 제외 구현 완료

@@ -17,6 +17,7 @@
     "react-scripts": "4.0.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
+    "redux-thunk": "^2.3.0",
     "sass-loader": "^10.1.0",
     "styled-components": "^5.2.1",
     "swiper": "^6.3.5",

@@ -7,11 +7,12 @@ import 'antd/dist/antd.css'
 
 // import redux
 import {Provider} from "react-redux";
-import {createStore} from "redux";
+import {createStore,applyMiddleware} from "redux";
 import rootReducer from "./store/index";
+import Thunk from 'redux-thunk';
 import {composeWithDevTools} from "redux-devtools-extension";
 
-const store = createStore(rootReducer,composeWithDevTools);
+const store = createStore(rootReducer,composeWithDevTools(applyMiddleware(Thunk)));
 
 ReactDOM.render(
   <Provider store={store}>
@@ -21,4 +22,4 @@ ReactDOM.render(
   </Provider>,
   document.getElementById('root')
 );
-reportWebVitals();
+reportWebVitals();
\ No newline at end of file

@@ -2,9 +2,10 @@ import React,{useState} from 'react';
 import './MainPage.scss';
 import ProgressBar from "../components/progressbar/ProgressBar";
 import {Button} from "antd";
+import mainImg from "../assets/main-soldier.png";
 
 function MainPage({history}){
-    const [percent,setPercent] = useState(30);
+    //const [percent,setPercent] = useState(0);
     const onClick = () => {
         history.push('/survey');
     }
@@ -17,11 +18,13 @@ function MainPage({history}){
                     KHUSAT 특별과정, <br></br>
                     여러분의 보직을 추천드립니다.
                 </div>
-                <ProgressBar percent={percent}/>
+                {/* <ProgressBar percent={percent}/> */}
                 <Button 
                     size="large"
                     onClick={onClick}
+                    color="#536349"
                 > 시작하기</Button>
+                <img className="main-image" src={mainImg}/>
             </div>
         </>
     );

@@ -5,6 +5,13 @@
     // max-width: 50rem;
 }
 
+.main-image{
+    margin-top: 2rem;
+    width: 70rem;
+    height: 35rem;
+    border-radius: 1rem;
+}
+
 .main-title{
     margin-top: 5rem;
     text-align: center;
@@ -12,6 +19,7 @@
     font-weight: bold;
     &__desc{
         margin-top: 2rem;
+        margin-bottom: 2rem;
         font-size: 1.5rem;
     }
 }

+import React from 'react';
+import {useSelector} from 'react-redux';
 import './ResultPage.scss';
 
 function ResultPage(){
+    const data = useSelector(state=>state.result.data);
+
     return(
-        <>
-            결과 페이지 입니다.
-        </>
+        <div className="container">
+            {data && (
+                <div className="result">
+                    <div className="result__title">{data.high}</div>
+                    <div className="result__position">{data.low}</div>
+                    <div className="result__desc">{data.description}</div>
+                    <div><img src={data.image}/></div>
+                </div>
+            )}
+            
+        </div>
     );
 }
 

+// .container{
+//     background-color:#536349;
+// }
+
+.result{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10rem;
+
+    &__title{
+        font-size: 5rem;
+        font-weight: bold;
+    }
+
+    &__position{
+        font-size: 4.5rem;
+    }
+
+    &__desc{
+        margin-top: 4rem;
+        font-size: 1.4rem;
+    }
+}
\ No newline at end of file

@@ -3,18 +3,21 @@ import Card from "../components/card/Card";
 import ProgressBar from "../components/progressbar/ProgressBar";
 import axios from 'axios';
 import "./SurveyPage.scss";
+import 'antd/dist/antd.css'
+// import redux
+import {useDispatch} from 'react-redux';
+import {getResult,getResultSuccess,getResultError} from '../store/action/result';
 
 function SurveyPage({history}) {
   const [curIdx, setCurIdx] = useState(0);
   const [question, setQuestion] = useState([]);
-  const [answer, setAnswer] = useState([]);
-  const [respond, setRespond] = useState([]);
+  const [answer, setAnswer] = useState([]);  
+  const dispatch = useDispatch();
 
   useEffect(()=>{
     const getApi = async() =>{
       const {data} = await axios.get("getquestions");
       setQuestion(data);
-      // console.log(question);
     }
     getApi();
   },[]);
@@ -22,10 +25,14 @@ function SurveyPage({history}) {
   useEffect(()=>{
     if(curIdx === 10){
       const postApi = async ()=>{
-        const {data} = await axios.post("submit", answer);
-        console.log(data);
-        setRespond(data);
-        
+        dispatch(getResult);
+        try{
+          const {data} = await axios.post("submit", answer);
+          console.log(data);
+          dispatch(getResultSuccess(data));
+        }catch(e){
+          dispatch(getResultError(e));
+        }
       }
       postApi();
       history.push('/result');

@@ -4,6 +4,10 @@
     justify-content: center;
     align-items: center;
     margin-top: 10rem;
+
+    &__progress{
+        margin-bottom: 3rem;
+    }
 }
 
 .slider{
@@ -12,7 +16,7 @@
     display: flex;
     align-items: center;
     margin: 0;
-    // overflow: hidden;
+    overflow: hidden;
 
     &__wrapper{
         border: 1px solid red;

@@ -40,6 +40,8 @@ function result(
                 error: action.payload
             }
         }
+        default:
+            return state;
     }
 }
 

@@ -10238,6 +10238,11 @@ redux-devtools-extension@^2.13.8:
   resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
   integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
 
+redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
 redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"