feat: 서버 통신 코드 작성

@@ -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",

@@ -6,9 +6,9 @@ function Card({data,onClick}){
     return(
         <>
             <div className="card" onClick={onClick}>
-                <div className="card__desc">{data.desc}</div>
-                <div className="card__content">{data.ans1}</div>
-                <div className="card__content">{data.ans2}</div>
+                <div className="card__desc">{data.question}</div>
+                <div className="card__content">{data.answer1}</div>
+                <div className="card__content">{data.answer2}</div>
             </div>
         </>        
     );

-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 = [
-  {
-    index: 0,
-    desc: "나는 오랫동안 서 있을 수 있다.",
-    ans1: "그렇습니다.",
-    ans2: "아닙니다.",
-  },
-  {
-    index: 1,
-    desc: "배경호는 오랫동안 서 있을 수 있다.",
-    ans1: "그렇습니다.",
-    ans2: "아닙니다.",
-  },
-  {
-    index: 2,
-    desc: "이준호는 오랫동안 서 있을 수 있다.",
-    ans1: "그렇습니다.",
-    ans2: "아닙니다.",
-  },
-  {
-    index: 3,
-    desc: "박기홍은 오랫동안 서 있을 수 있다.",
-    ans1: "그렇습니다.",
-    ans2: "아닙니다.",
-  },
-];
+// const cardList = [
+//   {
+//     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 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) => (
-              <div className="slider__wrapper">
+          {question && question.map((data,index) => (
+                <div className="slider__wrapper">
                   <Card 
-                    data={card} 
-                    onClick={()=>clickToNext(card.index)}
+                    key={data.num}
+                    data={data} 
+                    onClick={clickToNext}
                     style={{
-                        transform: `translateX(${-30*card.index}rem)`,
+                        transform: `translateX(${(-30)*curIdx}rem)`,
                         transition: "0.5s",
                     }}
                   />
-            </div>
+                </div>
           ))}
       </div>
     </div>

@@ -18,7 +18,6 @@
         border: 1px solid red;
         width: 30rem;
     }
-
     &__desc{
         font-size: 2rem;
         font-weight: bold;

@@ -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"