feat: 서버 통신 코드 작성

이준호
Commit e52f3a5e064c8ca9fd932e4082529dada9887dc4 e52f3a5e 1 parent 4af4ebd8
Showing 5 changed files with 63 additions and 36 deletions
package.json
src/components/card/Card.js
src/pages/SurveyPage.js
src/pages/SurveyPage.scss
yarn.lock
--- a/package.json
View file @e52f3a5
+++ b/package.json
View file @e52f3a5
@@ -8,6 +8,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "antd": "^4.8.2",
+    "axios": "^0.21.0",
     "node-sass": "4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
--- a/src/components/card/Card.js
View file @e52f3a5
+++ b/src/components/card/Card.js
View file @e52f3a5
@@ -6,9 +6,9 @@ function Card({data,onClick}){
     return(
         <>
             <div className="card" onClick={onClick}>
-                <div className="card__desc">{data.desc}</div>
+                <div className="card__desc">{data.question}</div>
-                <div className="card__content">{data.ans1}</div>
+                <div className="card__content">{data.answer1}</div>
-                <div className="card__content">{data.ans2}</div>
+                <div className="card__content">{data.answer2}</div>
             </div>
         </>        
     );
--- a/src/pages/SurveyPage.js
View file @e52f3a5
+++ b/src/pages/SurveyPage.js
View file @e52f3a5
-import React, { useState, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import Card from "../components/card/Card";
 import ProgressBar from "../components/progressbar/ProgressBar";
+import axios from 'axios';
 import "./SurveyPage.scss";
-const cardList = [
+// const cardList = [
-  {
+//   {
-    index: 0,
+//     index: 0,
-    desc: "나는 오랫동안 서 있을 수 있다.",
+//     desc: "나는 오랫동안 서 있을 수 있다.",
-    ans1: "그렇습니다.",
+//     ans1: "그렇습니다.",
-    ans2: "아닙니다.",
+//     ans2: "아닙니다.",
-  },
+//   },
-  {
+//   {
-    index: 1,
+//     index: 1,
-    desc: "배경호는 오랫동안 서 있을 수 있다.",
+//     desc: "배경호는 오랫동안 서 있을 수 있다.",
-    ans1: "그렇습니다.",
+//     ans1: "그렇습니다.",
-    ans2: "아닙니다.",
+//     ans2: "아닙니다.",
-  },
+//   },
-  {
+//   {
-    index: 2,
+//     index: 2,
-    desc: "이준호는 오랫동안 서 있을 수 있다.",
+//     desc: "이준호는 오랫동안 서 있을 수 있다.",
-    ans1: "그렇습니다.",
+//     ans1: "그렇습니다.",
-    ans2: "아닙니다.",
+//     ans2: "아닙니다.",
-  },
+//   },
-  {
+//   {
-    index: 3,
+//     index: 3,
-    desc: "박기홍은 오랫동안 서 있을 수 있다.",
+//     desc: "박기홍은 오랫동안 서 있을 수 있다.",
-    ans1: "그렇습니다.",
+//     ans1: "그렇습니다.",
-    ans2: "아닙니다.",
+//     ans2: "아닙니다.",
-  },
+//   },
-];
+// ];
 function SurveyPage() {
   const [curIdx, setCurIdx] = useState(0);
-  const clickToNext = (index) =>{
+  const [question, setQuestion] = useState([]);
+  const clickToNext = () =>{
     setCurIdx(curIdx+1);
   }
+  useEffect(()=>{
+    (async () => {
+        try{
+            const result = await axios.get("192.168.0.16:8000/getquestions");
+            setQuestion(result);
+            console.log(result);
+        }catch(e){
+            console.log("서버 통신 실패");
+        }
+    })();
+  },[]);
+
   return (
     <div className="container">
       <div className="container__progress">
         <ProgressBar percent={curIdx*10} />
       </div>
       <div className="slider">
-          {cardList.map((card) => (
+          {question && question.map((data,index) => (
                 <div className="slider__wrapper">
                   <Card 
-                    data={card} 
+                    key={data.num}
-                    onClick={()=>clickToNext(card.index)}
+                    data={data} 
+                    onClick={clickToNext}
                     style={{
-                        transform: `translateX(${-30*card.index}rem)`,
+                        transform: `translateX(${(-30)*curIdx}rem)`,
                         transition: "0.5s",
                     }}
                   />
--- a/src/pages/SurveyPage.scss
View file @e52f3a5
+++ b/src/pages/SurveyPage.scss
View file @e52f3a5
@@ -18,7 +18,6 @@
         border: 1px solid red;
         width: 30rem;
     }
-
     &__desc{
         font-size: 2rem;
         font-weight: bold;
--- a/yarn.lock
View file @e52f3a5
+++ b/yarn.lock
View file @e52f3a5
@@ -2847,6 +2847,13 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.0.2.tgz#c7cf7378378a51fcd272d3c09668002a4990b1cb"
   integrity sha512-arU1h31OGFu+LPrOLGZ7nB45v940NMDMEJeNmbutu57P+UFDVnkZg3e+J1I2HJRZ9hT7gO8J91dn/PMrAiKakA==
+axios@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.0.tgz#26df088803a2350dff2c27f96fef99fe49442aca"
+  integrity sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -5600,6 +5607,11 @@ follow-redirects@^1.0.0:
   dependencies:
     debug "^3.0.0"
+follow-redirects@^1.10.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
+  integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"