feat: result page를 위한 redux 코드 추가

이준호
Commit 88e26950605780fda5fc6e2a8f16650b1602609c 88e26950 1 parent cd175d87
Showing 10 changed files with 162 additions and 60 deletions
package.json
src/App.js
src/components/card/Card.js
src/index.js
src/pages/ResultPage.js
src/pages/ResultPage.scss
src/pages/SurveyPage.js
src/store/action/result.js
src/store/index.js
yarn.lock
--- a/package.json
View file @88e2695
+++ b/package.json
View file @88e2695
@@ -12,8 +12,11 @@
     "node-sass": "4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
+    "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.8",
     "sass-loader": "^10.1.0",
     "styled-components": "^5.2.1",
     "swiper": "^6.3.5",
@@ -31,6 +34,7 @@
       "react-app/jest"
     ]
   },
+  "proxy": "http://localhost:8000",
   "browserslist": {
     "production": [
       ">0.2%",
--- a/src/App.js
View file @88e2695
+++ b/src/App.js
View file @88e2695
 import "./App.scss";
 import MainPage from "./pages/MainPage";
 import SurveyPage from "./pages/SurveyPage";
+import ResultPage from "./pages/ResultPage";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 function App() {
@@ -10,6 +11,7 @@ function App() {
         <Switch>
           <Route exact path="/" component={MainPage} />
           <Route path="/survey" component={SurveyPage} />
+          <Route path="/result" component={ResultPage} />
         </Switch>
       </div>
     </BrowserRouter>
--- a/src/components/card/Card.js
View file @88e2695
+++ b/src/components/card/Card.js
View file @88e2695
 import React from 'react';
 import './Card.scss';
-function Card({data,answer,onClick1,onClick2}){
+function Card({question,answer,setAnswer,curIdx,setCurIdx}){
     // type: true false
+    const onClickOne=()=>{
+        const temp = [
+            ...answer,{
+                num: question.num,
+                choice: 0
+            }];
+        setAnswer(temp);
+        setCurIdx(curIdx+1);
+    }
+    const onClickTwo=()=>{
+        const temp = [
+            ...answer,{
+                num: question.num,
+                choice: 1
+            }];
+        setAnswer(temp);
+        setCurIdx(curIdx+1);
+    }
     return(
         <>
             <div className="card">
-                <div className="card__desc">{data.question}</div>
+                <div className="card__desc">{question.question}</div>
-                <div className="card__content" onClick={onClick1}>{data.answer1}</div>
+                <div className="card__content" onClick={onClickOne}>{question.answer1}</div>
-                <div className="card__content" onClick={onClick2}>{data.answer2}</div>
+                <div className="card__content" onClick={onClickTwo}>{question.answer2}</div>
             </div>
         </>        
     );
--- a/src/index.js
View file @88e2695
+++ b/src/index.js
View file @88e2695
@@ -5,10 +5,20 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import 'antd/dist/antd.css'
+// import redux
+import {Provider} from "react-redux";
+import {createStore} from "redux";
+import rootReducer from "./store/index";
+import {composeWithDevTools} from "redux-devtools-extension";
+
+const store = createStore(rootReducer,composeWithDevTools);
+
 ReactDOM.render(
-  <React.StrictMode>
+  <Provider store={store}>
-    <App />
+    <React.StrictMode>
-  </React.StrictMode>,
+      <App />
+    </React.StrictMode>
+  </Provider>,
   document.getElementById('root')
 );
 reportWebVitals();
--- a/src/pages/ResultPage.js 0 → 100644
View file @88e2695
+++ b/src/pages/ResultPage.js 0 → 100644
View file @88e2695
+import './ResultPage.scss';
+
+function ResultPage(){
+    return(
+        <>
+            결과 페이지 입니다.
+        </>
+    );
+}
+
+export default ResultPage;
\ No newline at end of file
--- a/src/pages/ResultPage.scss 0 → 100644
View file @88e2695
+++ b/src/pages/ResultPage.scss 0 → 100644
View file @88e2695
--- a/src/pages/SurveyPage.js
View file @88e2695
+++ b/src/pages/SurveyPage.js
View file @88e2695
@@ -4,75 +4,49 @@ import ProgressBar from "../components/progressbar/ProgressBar";
 import axios from 'axios';
 import "./SurveyPage.scss";
-// const cardList = [
+function SurveyPage({history}) {
-//   {
-//     index: 0,
-//     desc: "나는 오랫동안 서 있을 수 있다.",
-//     ans1: "그렇습니다.",
-//     ans2: "아닙니다.",
-//   },
-//   {
-//     index: 1,
-//     desc: "배경호는 오랫동안 서 있을 수 있다.",
-//     ans1: "그렇습니다.",
-//     ans2: "아닙니다.",
-//   },
-//   {
-//     index: 2,
-//     desc: "이준호는 오랫동안 서 있을 수 있다.",
-//     ans1: "그렇습니다.",
-//     ans2: "아닙니다.",
-//   },
-//   {
-//     index: 3,
-//     desc: "박기홍은 오랫동안 서 있을 수 있다.",
-//     ans1: "그렇습니다.",
-//     ans2: "아닙니다.",
-//   },
-// ];
-
-function SurveyPage() {
   const [curIdx, setCurIdx] = useState(0);
   const [question, setQuestion] = useState([]);
-  const [answer, serAnswer] = useState([]);
+  const [answer, setAnswer] = useState([]);
-
+  const [respond, setRespond] = useState([]);
-  // const clickAns1 = (e) =>{
-  //   setCurIdx(curIdx+1);
-  //   const temp 
-  // }
-  // const clickAns2 = (e) =>{
-  //   setCurIdx(curIdx+1);
-  // }
   useEffect(()=>{
     const getApi = async() =>{
-      const apis = axios.create({
+      const {data} = await axios.get("getquestions");
-        baseURL: "",
+      setQuestion(data);
-        withCredentials: true
+      // console.log(question);
-      });
-      const result = await apis.get("http://192.168.0.16:8000/getquestions");
-      console.log(result);
-      return result;
     }
-    const data = getApi();
+    getApi();
-    // setQuestion(data);
-    // console.log(data);
   },[]);
+  useEffect(()=>{
+    if(curIdx === 10){
+      const postApi = async ()=>{
+        const {data} = await axios.post("submit", answer);
+        console.log(data);
+        setRespond(data);
+        
+      }
+      postApi();
+      history.push('/result');
+    }
+  },[curIdx]);
+
   return (
     <div className="container">
       <div className="container__progress">
         <ProgressBar percent={curIdx*10} />
       </div>
       <div className="slider">
-          {question && question.map((data,index) => (
+          {question && question.map((question,index) => (
                 <div className="slider__wrapper">
                   <Card 
-                    key={data.num}
+                    key={question.num}
-                    data={data}
+                    question={question}
-                    // onClick1={clickAns1}
-                    // onClick2={clickAns2}
                     answer={answer}
+                    setAnswer={setAnswer}
+                    curIdx={curIdx}
+                    setCurIdx={setCurIdx}
                     style={{
                         transform: `translateX(${(-30)*curIdx}rem)`,
                         transition: "0.5s",
--- a/src/store/action/result.js 0 → 100644
View file @88e2695
+++ b/src/store/action/result.js 0 → 100644
View file @88e2695
+// action
+const GET_RESULT = 'GET_RESULT';
+const GET_RESULT_SUCCESS = 'GET_RESULT_SUCCESS';
+const GET_RESULT_ERROR = 'GET_RESULT_ERROR'; 
+
+// action creators
+export const getResult = () => ({type:GET_RESULT});
+export const getResultSuccess = (data) => ({type: GET_RESULT_SUCCESS,payload: data});
+export const getResultError = (e) => ({type: GET_RESULT_ERROR, payload: e});
+
+const initialState = {
+    loading: true,
+    data: null,
+    error: null
+}
+
+function result(
+    state = initialState,
+    action
+){
+    switch(action.type){
+        case GET_RESULT: {
+            return{
+                loading: true,
+                data: null,
+                error: null
+            }
+        }
+        case GET_RESULT_SUCCESS:{
+            return{
+                loading: false,
+                data: action.payload,
+                error: null
+            }
+        }
+        case GET_RESULT_ERROR:{
+            return{
+                loading: false,
+                data: null,
+                error: action.payload
+            }
+        }
+    }
+}
+
+export default result;
\ No newline at end of file
--- a/src/store/index.js 0 → 100644
View file @88e2695
+++ b/src/store/index.js 0 → 100644
View file @88e2695
+import {combineReducers} from 'redux';
+import result from "./action/result";
+
+const rootReducer = combineReducers({
+    result,
+})
+
+export default rootReducer;
\ No newline at end of file
--- a/yarn.lock
View file @88e2695
+++ b/yarn.lock
View file @88e2695
@@ -9986,7 +9986,7 @@ react-error-overlay@^6.0.8:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
   integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
-react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -10001,6 +10001,17 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+react-redux@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736"
+  integrity sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -10222,6 +10233,19 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
+redux-devtools-extension@^2.13.8:
+  version "2.13.8"
+  resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
+  integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
+
+redux@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
+  integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -11554,6 +11578,11 @@ swiper@^6.3.5:
     dom7 "^3.0.0-alpha.7"
     ssr-window "^3.0.0-alpha.4"
+symbol-observable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"