김원진 / khusat-front

Go to a project
Toggle navigation Toggle navigation pinning
이준호
c5af9929 1 parent 88e26950

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

Inline Side-by-side
Showing 12 changed files with 80 additions and 12 deletions
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
17 "react-scripts": "4.0.0", 17 "react-scripts": "4.0.0",
18 "redux": "^4.0.5", 18 "redux": "^4.0.5",
19 "redux-devtools-extension": "^2.13.8", 19 "redux-devtools-extension": "^2.13.8",
20 + "redux-thunk": "^2.3.0",
20 "sass-loader": "^10.1.0", 21 "sass-loader": "^10.1.0",
21 "styled-components": "^5.2.1", 22 "styled-components": "^5.2.1",
22 "swiper": "^6.3.5", 23 "swiper": "^6.3.5",
......
...@@ -7,11 +7,12 @@ import 'antd/dist/antd.css' ...@@ -7,11 +7,12 @@ import 'antd/dist/antd.css'
7 7
8 // import redux 8 // import redux
9 import {Provider} from "react-redux"; 9 import {Provider} from "react-redux";
10 -import {createStore} from "redux"; 10 +import {createStore,applyMiddleware} from "redux";
11 import rootReducer from "./store/index"; 11 import rootReducer from "./store/index";
12 +import Thunk from 'redux-thunk';
12 import {composeWithDevTools} from "redux-devtools-extension"; 13 import {composeWithDevTools} from "redux-devtools-extension";
13 14
14 -const store = createStore(rootReducer,composeWithDevTools); 15 +const store = createStore(rootReducer,composeWithDevTools(applyMiddleware(Thunk)));
15 16
16 ReactDOM.render( 17 ReactDOM.render(
17 <Provider store={store}> 18 <Provider store={store}>
......
...@@ -2,9 +2,10 @@ import React,{useState} from 'react'; ...@@ -2,9 +2,10 @@ import React,{useState} from 'react';
2 import './MainPage.scss'; 2 import './MainPage.scss';
3 import ProgressBar from "../components/progressbar/ProgressBar"; 3 import ProgressBar from "../components/progressbar/ProgressBar";
4 import {Button} from "antd"; 4 import {Button} from "antd";
5 +import mainImg from "../assets/main-soldier.png";
5 6
6 function MainPage({history}){ 7 function MainPage({history}){
7 - const [percent,setPercent] = useState(30); 8 + //const [percent,setPercent] = useState(0);
8 const onClick = () => { 9 const onClick = () => {
9 history.push('/survey'); 10 history.push('/survey');
10 } 11 }
...@@ -17,11 +18,13 @@ function MainPage({history}){ ...@@ -17,11 +18,13 @@ function MainPage({history}){
17 KHUSAT 특별과정, <br></br> 18 KHUSAT 특별과정, <br></br>
18 여러분의 보직을 추천드립니다. 19 여러분의 보직을 추천드립니다.
19 </div> 20 </div>
20 - <ProgressBar percent={percent}/> 21 + {/* <ProgressBar percent={percent}/> */}
21 <Button 22 <Button
22 size="large" 23 size="large"
23 onClick={onClick} 24 onClick={onClick}
25 + color="#536349"
24 > 시작하기</Button> 26 > 시작하기</Button>
27 + <img className="main-image" src={mainImg}/>
25 </div> 28 </div>
26 </> 29 </>
27 ); 30 );
......
...@@ -5,6 +5,13 @@ ...@@ -5,6 +5,13 @@
5 // max-width: 50rem; 5 // max-width: 50rem;
6 } 6 }
7 7
8 +.main-image{
9 + margin-top: 2rem;
10 + width: 70rem;
11 + height: 35rem;
12 + border-radius: 1rem;
13 +}
14 +
8 .main-title{ 15 .main-title{
9 margin-top: 5rem; 16 margin-top: 5rem;
10 text-align: center; 17 text-align: center;
...@@ -12,6 +19,7 @@ ...@@ -12,6 +19,7 @@
12 font-weight: bold; 19 font-weight: bold;
13 &__desc{ 20 &__desc{
14 margin-top: 2rem; 21 margin-top: 2rem;
22 + margin-bottom: 2rem;
15 font-size: 1.5rem; 23 font-size: 1.5rem;
16 } 24 }
17 } 25 }
......
1 +import React from 'react';
2 +import {useSelector} from 'react-redux';
1 import './ResultPage.scss'; 3 import './ResultPage.scss';
2 4
3 function ResultPage(){ 5 function ResultPage(){
6 + const data = useSelector(state=>state.result.data);
7 +
4 return( 8 return(
5 - <> 9 + <div className="container">
6 - 결과 페이지 입니다. 10 + {data && (
7 - </> 11 + <div className="result">
12 + <div className="result__title">{data.high}</div>
13 + <div className="result__position">{data.low}</div>
14 + <div className="result__desc">{data.description}</div>
15 + <div><img src={data.image}/></div>
16 + </div>
17 + )}
18 +
19 + </div>
8 ); 20 );
9 } 21 }
10 22
......
1 +// .container{
2 +// background-color:#536349;
3 +// }
4 +
5 +.result{
6 + display: flex;
7 + flex-direction: column;
8 + justify-content: center;
9 + align-items: center;
10 + margin-top: 10rem;
11 +
12 + &__title{
13 + font-size: 5rem;
14 + font-weight: bold;
15 + }
16 +
17 + &__position{
18 + font-size: 4.5rem;
19 + }
20 +
21 + &__desc{
22 + margin-top: 4rem;
23 + font-size: 1.4rem;
24 + }
25 +}
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,18 +3,21 @@ import Card from "../components/card/Card"; ...@@ -3,18 +3,21 @@ import Card from "../components/card/Card";
3 import ProgressBar from "../components/progressbar/ProgressBar"; 3 import ProgressBar from "../components/progressbar/ProgressBar";
4 import axios from 'axios'; 4 import axios from 'axios';
5 import "./SurveyPage.scss"; 5 import "./SurveyPage.scss";
6 +import 'antd/dist/antd.css'
7 +// import redux
8 +import {useDispatch} from 'react-redux';
9 +import {getResult,getResultSuccess,getResultError} from '../store/action/result';
6 10
7 function SurveyPage({history}) { 11 function SurveyPage({history}) {
8 const [curIdx, setCurIdx] = useState(0); 12 const [curIdx, setCurIdx] = useState(0);
9 const [question, setQuestion] = useState([]); 13 const [question, setQuestion] = useState([]);
10 const [answer, setAnswer] = useState([]); 14 const [answer, setAnswer] = useState([]);
11 - const [respond, setRespond] = useState([]); 15 + const dispatch = useDispatch();
12 16
13 useEffect(()=>{ 17 useEffect(()=>{
14 const getApi = async() =>{ 18 const getApi = async() =>{
15 const {data} = await axios.get("getquestions"); 19 const {data} = await axios.get("getquestions");
16 setQuestion(data); 20 setQuestion(data);
17 - // console.log(question);
18 } 21 }
19 getApi(); 22 getApi();
20 },[]); 23 },[]);
...@@ -22,10 +25,14 @@ function SurveyPage({history}) { ...@@ -22,10 +25,14 @@ function SurveyPage({history}) {
22 useEffect(()=>{ 25 useEffect(()=>{
23 if(curIdx === 10){ 26 if(curIdx === 10){
24 const postApi = async ()=>{ 27 const postApi = async ()=>{
28 + dispatch(getResult);
29 + try{
25 const {data} = await axios.post("submit", answer); 30 const {data} = await axios.post("submit", answer);
26 console.log(data); 31 console.log(data);
27 - setRespond(data); 32 + dispatch(getResultSuccess(data));
28 - 33 + }catch(e){
34 + dispatch(getResultError(e));
35 + }
29 } 36 }
30 postApi(); 37 postApi();
31 history.push('/result'); 38 history.push('/result');
......
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
4 justify-content: center; 4 justify-content: center;
5 align-items: center; 5 align-items: center;
6 margin-top: 10rem; 6 margin-top: 10rem;
7 +
8 + &__progress{
9 + margin-bottom: 3rem;
10 + }
7 } 11 }
8 12
9 .slider{ 13 .slider{
...@@ -12,7 +16,7 @@ ...@@ -12,7 +16,7 @@
12 display: flex; 16 display: flex;
13 align-items: center; 17 align-items: center;
14 margin: 0; 18 margin: 0;
15 - // overflow: hidden; 19 + overflow: hidden;
16 20
17 &__wrapper{ 21 &__wrapper{
18 border: 1px solid red; 22 border: 1px solid red;
......
...@@ -40,6 +40,8 @@ function result( ...@@ -40,6 +40,8 @@ function result(
40 error: action.payload 40 error: action.payload
41 } 41 }
42 } 42 }
43 + default:
44 + return state;
43 } 45 }
44 } 46 }
45 47
......
...@@ -10238,6 +10238,11 @@ redux-devtools-extension@^2.13.8: ...@@ -10238,6 +10238,11 @@ redux-devtools-extension@^2.13.8:
10238 resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1" 10238 resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
10239 integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg== 10239 integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
10240 10240
10241 +redux-thunk@^2.3.0:
10242 + version "2.3.0"
10243 + resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
10244 + integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
10245 +
10241 redux@^4.0.5: 10246 redux@^4.0.5:
10242 version "4.0.5" 10247 version "4.0.5"
10243 resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f" 10248 resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
......