khusat / khusat-front

Go to a project
Toggle navigation Toggle navigation pinning
이준호
c32336d3 1 parent 0b0532f7

[ADD] 이미지 슬라이더로 변경 & scss->styled-component로 변경:

Inline Side-by-side
Showing 4 changed files with 116 additions and 190 deletions
1 -import React, { useEffect } from 'react'; 1 +import React from "react";
2 -import './Card.scss'; 2 +import styled, { css } from "styled-components";
3 3
4 -function Card({question,answer,setAnswer,curIdx,setCurIdx}){ 4 +function Card({ question, answer, setAnswer, curIdx, setCurIdx }) {
5 - // type: true false 5 + const CardWrap = styled.div`
6 - const onClickOne=()=>{ 6 + display: flex;
7 - const temp = [ 7 + flex-direction: column;
8 - ...answer,{ 8 + align-items: center;
9 - num: question.num, 9 + min-width: 500px;
10 - choice: 0 10 + height: 100%;
11 - }]; 11 + font-size: 20px;
12 - setAnswer(temp); 12 + font-weight: bold;
13 - setCurIdx(curIdx+1); 13 + /* ${(props) => css`
14 - } 14 + transform: translateX(${-500 * props.curIdx}px);
15 - const onClickTwo=()=>{ 15 + transition: 0.5s;
16 - const temp = [ 16 + `} */
17 - ...answer,{ 17 + `;
18 - num: question.num, 18 +
19 - choice: 1 19 + const CardQuest = styled.div`
20 - }]; 20 + font-size: 20px;
21 - setAnswer(temp); 21 + font-weight: bold;
22 - setCurIdx(curIdx+1); 22 + margin-bottom: 60px;
23 - } 23 + `;
24 - return( 24 +
25 - <> 25 + const CardContent = styled.div`
26 - <div className="card"> 26 + cursor: pointer;
27 - <div className="card__desc">{question.question}</div> 27 + width: 300px;
28 - <div className="card__content" onClick={onClickOne}>{question.answer1}</div> 28 + height: 60px;
29 - <div className="card__content" onClick={onClickTwo}>{question.answer2}</div> 29 + margin: 10px;
30 - </div> 30 + font-size: 16px;
31 - </> 31 + border-radius: 10px;
32 - ); 32 + color: #ffffff;
33 + background-color: #536349;
34 + display: flex;
35 + justify-content: center;
36 + align-items: center;
37 + `;
38 +
39 + const onClickOne = () => {
40 + const temp = [
41 + ...answer,
42 + {
43 + num: question.num,
44 + choice: 0,
45 + },
46 + ];
47 + setAnswer(temp);
48 + setCurIdx(curIdx + 1);
49 + };
50 + const onClickTwo = () => {
51 + const temp = [
52 + ...answer,
53 + {
54 + num: question.num,
55 + choice: 1,
56 + },
57 + ];
58 + setAnswer(temp);
59 + setCurIdx(curIdx + 1);
60 + };
61 +
62 + return (
63 + <>
64 + <CardWrap curIdx={curIdx}>
65 + <CardQuest>{question.question}</CardQuest>
66 + <CardContent onClick={onClickOne}>{question.answer1}</CardContent>
67 + <CardContent onClick={onClickTwo}>{question.answer2}</CardContent>
68 + </CardWrap>
69 + </>
70 + );
33 } 71 }
34 // 나중에 데이터 넘어오면 넘어온 데이터로 카드 업데이트 72 // 나중에 데이터 넘어오면 넘어온 데이터로 카드 업데이트
35 73
36 -export default Card;
...\ No newline at end of file ...\ No newline at end of file
74 +export default Card;
......
1 -.card{
2 - display: flex;
3 - flex-direction: column;
4 - align-items: center;
5 - width: 30rem;
6 - font-size: 2rem;
7 - font-weight: bold;
8 -
9 - &__desc{
10 - font-size: 2rem;
11 - font-weight: bold;
12 - margin-bottom: 6rem;
13 - }
14 -
15 - &__content{
16 - cursor: pointer;
17 - width: 25rem;
18 - height: 5rem;
19 - margin: 1rem;
20 - font-size: 1rem;
21 - border-radius: 1rem;
22 - color: #ffffff;
23 - background-color: #536349;
24 - display: flex;
25 - justify-content: center;
26 - align-items: center;
27 - }
28 -}
...\ No newline at end of file ...\ No newline at end of file
1 -import React, { useState, useEffect } from "react"; 1 +import React, { useState } from "react";
2 import Card from "../components/card/Card"; 2 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 "antd/dist/antd.css";
5 -import "./SurveyPage.scss";
6 -import 'antd/dist/antd.css'
7 -// import redux
8 -import {useDispatch,useSelector} from 'react-redux';
9 -import {getResult,getResultSuccess,getResultError} from '../store/action/result';
10 -import {getSurvey,getSurveySuccess,getSurveyError} from '../store/action/survey';
11 -import ResultPage from "./ResultPage";
12 -// import styled,{css} from 'styled-components';
13 5
14 -// const Slider = styled.div` 6 +import styled, { css } from "styled-components";
15 -// border: 1px solid gray;
16 -// width: 30rem;
17 -// display: flex;
18 -// align-items: center;
19 -// margin: 0 auto;
20 -// transform: translateX(${-30}rem);
21 -// transition: 0.5s
22 -// overflow: hidden;
23 -// `;
24 7
25 -function SurveyPage({history}) { 8 +const SurveyContainer = styled.div`
26 - const [curIdx, setCurIdx] = useState(0); 9 + display: flex;
27 - const [question, setQuestion] = useState(JSON.parse(localStorage.getItem('question')||'{}')); 10 + justify-content: center;
28 - const [answer, setAnswer] = useState([]); 11 +`;
29 - const dispatch = useDispatch(); 12 +
13 +const Container = styled.div`
14 + border: solid 1px red;
15 + width: 500px;
16 + height: 100vh;
17 + overflow: hidden;
18 +`;
30 19
31 - const data = useSelector(state=>state.survey.data); 20 +const SliderCotainer = styled.div`
32 - // useEffect(()=>{ 21 + border: 1px solid gray;
33 - // const getApi = async() =>{ 22 + width: 100%;
34 - // dispatch(getSurvey()); 23 + display: flex;
35 - // try{ 24 + align-items: center;
36 - // const {data} = await axios.get("getquestions"); 25 + margin: 0 auto;
37 - // setQuestion(data); 26 + ${(props) => css`
38 - // dispatch(getSurveySuccess(data)); 27 + transform: translateX(${-500 * props.curIdx}px);
39 - // }catch(e){ 28 + transition: 0.5s;
40 - // dispatch(getSurveyError(e)); 29 + `}
41 - // } 30 +`;
42 - // }
43 - // getApi();
44 - // },[]);
45 31
46 - useEffect(()=>{ 32 +function SurveyPage({ history, question }) {
47 - console.log(curIdx); 33 + const [curIdx, setCurIdx] = useState(0);
48 - if(curIdx === 10){ 34 + const [answer, setAnswer] = useState([]); // post로 보낼 state
49 - // setCurIdx(curIdx-1);
50 - const postApi = async ()=>{
51 - dispatch(getResult());
52 - try{
53 - const {data} = await axios.post("submit", answer);
54 - console.log(data);
55 - dispatch(getResultSuccess(data));
56 - }catch(e){
57 - dispatch(getResultError(e));
58 - }
59 - }
60 - postApi();
61 - history.push('/result');
62 - }
63 - },[curIdx]);
64 35
65 return ( 36 return (
66 - <div className="container"> 37 + <SurveyContainer>
67 - <div className="container__progress"></div> 38 + <Container>
68 - <div className="slider"> 39 + {/* 상태바 넣기 */}
69 - { 40 + <SliderCotainer curIdx={curIdx}>
70 - curIdx === 11? history.push('/result') :(<Card 41 + {/* 얘가 슬라이더 컨테이너 */}
71 - question={question[curIdx]} 42 + {question.map((question) => (
72 - answer={answer} 43 + <Card
73 - setAnswer={setAnswer} 44 + key={question.num}
74 - curIdx={curIdx} 45 + question={question}
75 - setCurIdx={setCurIdx} 46 + answer={answer}
76 - />) 47 + setAnswer={setAnswer}
77 - } 48 + curIdx={curIdx}
78 - </div> 49 + setCurIdx={setCurIdx}
79 - </div> 50 + />
51 + ))}
52 + </SliderCotainer>
53 + </Container>
54 + </SurveyContainer>
80 ); 55 );
81 } 56 }
82 57
83 export default SurveyPage; 58 export default SurveyPage;
84 -
85 -// {/* <Slider> */}
86 -// {question && question.map((question,index) => (
87 -// <div className="slider__wrapper">
88 -// {/* <ProgressBar percent={curIdx*10} /> */}
89 -// <Card
90 -// key={question.num}
91 -// question={question}
92 -// answer={answer}
93 -// setAnswer={setAnswer}
94 -// curIdx={curIdx}
95 -// setCurIdx={setCurIdx}
96 -// style={{
97 -// transform: `translate3d(${(-30)*curIdx}rem,0,0)`,
98 -// transition: "0.5s",
99 -// }}
100 -// />
101 -// </div>
102 -// ))}
103 -// {/* </Slider> */}
...\ No newline at end of file ...\ No newline at end of file
......
1 -.container{
2 - display: flex;
3 - flex-direction: column;
4 - justify-content: center;
5 - align-items: center;
6 - margin-top: 10rem;
7 -
8 - &__progress{
9 - margin-bottom: 3rem;
10 - }
11 -}
12 -
13 -.slider{
14 - // border: 1px solid gray;
15 - width: 30rem;
16 - display: flex;
17 - align-items: center;
18 - margin: 0 auto;
19 - overflow: hidden;
20 -
21 - &__wrapper{
22 - width: 30rem;
23 - }
24 - &__desc{
25 - font-size: 2rem;
26 - font-weight: bold;
27 - margin-bottom: 2rem;
28 - }
29 -}
30 -
31 -// .slider__wrapper{
32 -// // border: 1px solid red;
33 -// width: 30rem;
34 -// }
35 -// .slider__desc{
36 -// font-size: 2rem;
37 -// font-weight: bold;
38 -// margin-bottom: 2rem;
39 -// }
...\ No newline at end of file ...\ No newline at end of file