Showing
3 changed files
with
26 additions
and
15 deletions
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import './Card.scss'; | 2 | import './Card.scss'; |
3 | 3 | ||
4 | -function Card({data,onClick}){ | 4 | +function Card({data,answer,onClick1,onClick2}){ |
5 | // type: true false | 5 | // type: true false |
6 | return( | 6 | return( |
7 | <> | 7 | <> |
8 | - <div className="card" onClick={onClick}> | 8 | + <div className="card"> |
9 | <div className="card__desc">{data.question}</div> | 9 | <div className="card__desc">{data.question}</div> |
10 | - <div className="card__content">{data.answer1}</div> | 10 | + <div className="card__content" onClick={onClick1}>{data.answer1}</div> |
11 | - <div className="card__content">{data.answer2}</div> | 11 | + <div className="card__content" onClick={onClick2}>{data.answer2}</div> |
12 | </div> | 12 | </div> |
13 | </> | 13 | </> |
14 | ); | 14 | ); | ... | ... |
... | @@ -34,20 +34,29 @@ import "./SurveyPage.scss"; | ... | @@ -34,20 +34,29 @@ import "./SurveyPage.scss"; |
34 | function SurveyPage() { | 34 | function SurveyPage() { |
35 | const [curIdx, setCurIdx] = useState(0); | 35 | const [curIdx, setCurIdx] = useState(0); |
36 | const [question, setQuestion] = useState([]); | 36 | const [question, setQuestion] = useState([]); |
37 | - const clickToNext = () =>{ | 37 | + const [answer, serAnswer] = useState([]); |
38 | - setCurIdx(curIdx+1); | 38 | + |
39 | - } | 39 | + // const clickAns1 = (e) =>{ |
40 | + // setCurIdx(curIdx+1); | ||
41 | + // const temp | ||
42 | + // } | ||
43 | + // const clickAns2 = (e) =>{ | ||
44 | + // setCurIdx(curIdx+1); | ||
45 | + // } | ||
40 | 46 | ||
41 | useEffect(()=>{ | 47 | useEffect(()=>{ |
42 | - (async () => { | 48 | + const getApi = async() =>{ |
43 | - try{ | 49 | + const apis = axios.create({ |
44 | - const result = await axios.get("192.168.0.16:8000/getquestions"); | 50 | + baseURL: "", |
45 | - setQuestion(result); | 51 | + withCredentials: true |
52 | + }); | ||
53 | + const result = await apis.get("http://192.168.0.16:8000/getquestions"); | ||
46 | console.log(result); | 54 | console.log(result); |
47 | - }catch(e){ | 55 | + return result; |
48 | - console.log("서버 통신 실패"); | ||
49 | } | 56 | } |
50 | - })(); | 57 | + const data = getApi(); |
58 | + // setQuestion(data); | ||
59 | + // console.log(data); | ||
51 | },[]); | 60 | },[]); |
52 | 61 | ||
53 | return ( | 62 | return ( |
... | @@ -61,7 +70,9 @@ function SurveyPage() { | ... | @@ -61,7 +70,9 @@ function SurveyPage() { |
61 | <Card | 70 | <Card |
62 | key={data.num} | 71 | key={data.num} |
63 | data={data} | 72 | data={data} |
64 | - onClick={clickToNext} | 73 | + // onClick1={clickAns1} |
74 | + // onClick2={clickAns2} | ||
75 | + answer={answer} | ||
65 | style={{ | 76 | style={{ |
66 | transform: `translateX(${(-30)*curIdx}rem)`, | 77 | transform: `translateX(${(-30)*curIdx}rem)`, |
67 | transition: "0.5s", | 78 | transition: "0.5s", | ... | ... |
This diff could not be displayed because it is too large.
-
Please register or login to post a comment