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 102 additions and 176 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 + flex-direction: column;
8 + align-items: center;
9 + min-width: 500px;
10 + height: 100%;
11 + font-size: 20px;
12 + font-weight: bold;
13 + /* ${(props) => css`
14 + transform: translateX(${-500 * props.curIdx}px);
15 + transition: 0.5s;
16 + `} */
17 + `;
18 +
19 + const CardQuest = styled.div`
20 + font-size: 20px;
21 + font-weight: bold;
22 + margin-bottom: 60px;
23 + `;
24 +
25 + const CardContent = styled.div`
26 + cursor: pointer;
27 + width: 300px;
28 + height: 60px;
29 + margin: 10px;
30 + font-size: 16px;
31 + border-radius: 10px;
32 + color: #ffffff;
33 + background-color: #536349;
34 + display: flex;
35 + justify-content: center;
36 + align-items: center;
37 + `;
38 +
39 + const onClickOne = () => {
7 const temp = [ 40 const temp = [
8 - ...answer,{ 41 + ...answer,
42 + {
9 num: question.num, 43 num: question.num,
10 - choice: 0 44 + choice: 0,
11 - }]; 45 + },
46 + ];
12 setAnswer(temp); 47 setAnswer(temp);
13 - setCurIdx(curIdx+1); 48 + setCurIdx(curIdx + 1);
14 - } 49 + };
15 - const onClickTwo=()=>{ 50 + const onClickTwo = () => {
16 const temp = [ 51 const temp = [
17 - ...answer,{ 52 + ...answer,
53 + {
18 num: question.num, 54 num: question.num,
19 - choice: 1 55 + choice: 1,
20 - }]; 56 + },
57 + ];
21 setAnswer(temp); 58 setAnswer(temp);
22 - setCurIdx(curIdx+1); 59 + setCurIdx(curIdx + 1);
23 - } 60 + };
24 - return( 61 +
62 + return (
25 <> 63 <>
26 - <div className="card"> 64 + <CardWrap curIdx={curIdx}>
27 - <div className="card__desc">{question.question}</div> 65 + <CardQuest>{question.question}</CardQuest>
28 - <div className="card__content" onClick={onClickOne}>{question.answer1}</div> 66 + <CardContent onClick={onClickOne}>{question.answer1}</CardContent>
29 - <div className="card__content" onClick={onClickTwo}>{question.answer2}</div> 67 + <CardContent onClick={onClickTwo}>{question.answer2}</CardContent>
30 - </div> 68 + </CardWrap>
31 </> 69 </>
32 ); 70 );
33 } 71 }
......
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) => (
43 + <Card
44 + key={question.num}
45 + question={question}
72 answer={answer} 46 answer={answer}
73 setAnswer={setAnswer} 47 setAnswer={setAnswer}
74 curIdx={curIdx} 48 curIdx={curIdx}
75 setCurIdx={setCurIdx} 49 setCurIdx={setCurIdx}
76 - />) 50 + />
77 - } 51 + ))}
78 - </div> 52 + </SliderCotainer>
79 - </div> 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