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
import React, { useEffect } from 'react';
import './Card.scss';
import React from "react";
import styled, { css } from "styled-components";
function Card({question,answer,setAnswer,curIdx,setCurIdx}){
// type: true false
const onClickOne=()=>{
const temp = [
...answer,{
num: question.num,
choice: 0
}];
setAnswer(temp);
setCurIdx(curIdx+1);
}
const onClickTwo=()=>{
const temp = [
...answer,{
num: question.num,
choice: 1
}];
setAnswer(temp);
setCurIdx(curIdx+1);
}
return(
<>
<div className="card">
<div className="card__desc">{question.question}</div>
<div className="card__content" onClick={onClickOne}>{question.answer1}</div>
<div className="card__content" onClick={onClickTwo}>{question.answer2}</div>
</div>
</>
);
function Card({ question, answer, setAnswer, curIdx, setCurIdx }) {
const CardWrap = styled.div`
display: flex;
flex-direction: column;
align-items: center;
min-width: 500px;
height: 100%;
font-size: 20px;
font-weight: bold;
/* ${(props) => css`
transform: translateX(${-500 * props.curIdx}px);
transition: 0.5s;
`} */
`;
const CardQuest = styled.div`
font-size: 20px;
font-weight: bold;
margin-bottom: 60px;
`;
const CardContent = styled.div`
cursor: pointer;
width: 300px;
height: 60px;
margin: 10px;
font-size: 16px;
border-radius: 10px;
color: #ffffff;
background-color: #536349;
display: flex;
justify-content: center;
align-items: center;
`;
const onClickOne = () => {
const temp = [
...answer,
{
num: question.num,
choice: 0,
},
];
setAnswer(temp);
setCurIdx(curIdx + 1);
};
const onClickTwo = () => {
const temp = [
...answer,
{
num: question.num,
choice: 1,
},
];
setAnswer(temp);
setCurIdx(curIdx + 1);
};
return (
<>
<CardWrap curIdx={curIdx}>
<CardQuest>{question.question}</CardQuest>
<CardContent onClick={onClickOne}>{question.answer1}</CardContent>
<CardContent onClick={onClickTwo}>{question.answer2}</CardContent>
</CardWrap>
</>
);
}
// 나중에 데이터 넘어오면 넘어온 데이터로 카드 업데이트
export default Card;
\ No newline at end of file
export default Card;
......
.card{
display: flex;
flex-direction: column;
align-items: center;
width: 30rem;
font-size: 2rem;
font-weight: bold;
&__desc{
font-size: 2rem;
font-weight: bold;
margin-bottom: 6rem;
}
&__content{
cursor: pointer;
width: 25rem;
height: 5rem;
margin: 1rem;
font-size: 1rem;
border-radius: 1rem;
color: #ffffff;
background-color: #536349;
display: flex;
justify-content: center;
align-items: center;
}
}
\ No newline at end of file
import React, { useState, useEffect } from "react";
import React, { useState } from "react";
import Card from "../components/card/Card";
import ProgressBar from "../components/progressbar/ProgressBar";
import axios from 'axios';
import "./SurveyPage.scss";
import 'antd/dist/antd.css'
// import redux
import {useDispatch,useSelector} from 'react-redux';
import {getResult,getResultSuccess,getResultError} from '../store/action/result';
import {getSurvey,getSurveySuccess,getSurveyError} from '../store/action/survey';
import ResultPage from "./ResultPage";
// import styled,{css} from 'styled-components';
import "antd/dist/antd.css";
// const Slider = styled.div`
// border: 1px solid gray;
// width: 30rem;
// display: flex;
// align-items: center;
// margin: 0 auto;
// transform: translateX(${-30}rem);
// transition: 0.5s
// overflow: hidden;
// `;
import styled, { css } from "styled-components";
function SurveyPage({history}) {
const [curIdx, setCurIdx] = useState(0);
const [question, setQuestion] = useState(JSON.parse(localStorage.getItem('question')||'{}'));
const [answer, setAnswer] = useState([]);
const dispatch = useDispatch();
const SurveyContainer = styled.div`
display: flex;
justify-content: center;
`;
const Container = styled.div`
border: solid 1px red;
width: 500px;
height: 100vh;
overflow: hidden;
`;
const data = useSelector(state=>state.survey.data);
// useEffect(()=>{
// const getApi = async() =>{
// dispatch(getSurvey());
// try{
// const {data} = await axios.get("getquestions");
// setQuestion(data);
// dispatch(getSurveySuccess(data));
// }catch(e){
// dispatch(getSurveyError(e));
// }
// }
// getApi();
// },[]);
const SliderCotainer = styled.div`
border: 1px solid gray;
width: 100%;
display: flex;
align-items: center;
margin: 0 auto;
${(props) => css`
transform: translateX(${-500 * props.curIdx}px);
transition: 0.5s;
`}
`;
useEffect(()=>{
console.log(curIdx);
if(curIdx === 10){
// setCurIdx(curIdx-1);
const postApi = async ()=>{
dispatch(getResult());
try{
const {data} = await axios.post("submit", answer);
console.log(data);
dispatch(getResultSuccess(data));
}catch(e){
dispatch(getResultError(e));
}
}
postApi();
history.push('/result');
}
},[curIdx]);
function SurveyPage({ history, question }) {
const [curIdx, setCurIdx] = useState(0);
const [answer, setAnswer] = useState([]); // post로 보낼 state
return (
<div className="container">
<div className="container__progress"></div>
<div className="slider">
{
curIdx === 11? history.push('/result') :(<Card
question={question[curIdx]}
answer={answer}
setAnswer={setAnswer}
curIdx={curIdx}
setCurIdx={setCurIdx}
/>)
}
</div>
</div>
<SurveyContainer>
<Container>
{/* 상태바 넣기 */}
<SliderCotainer curIdx={curIdx}>
{/* 얘가 슬라이더 컨테이너 */}
{question.map((question) => (
<Card
key={question.num}
question={question}
answer={answer}
setAnswer={setAnswer}
curIdx={curIdx}
setCurIdx={setCurIdx}
/>
))}
</SliderCotainer>
</Container>
</SurveyContainer>
);
}
export default SurveyPage;
// {/* <Slider> */}
// {question && question.map((question,index) => (
// <div className="slider__wrapper">
// {/* <ProgressBar percent={curIdx*10} /> */}
// <Card
// key={question.num}
// question={question}
// answer={answer}
// setAnswer={setAnswer}
// curIdx={curIdx}
// setCurIdx={setCurIdx}
// style={{
// transform: `translate3d(${(-30)*curIdx}rem,0,0)`,
// transition: "0.5s",
// }}
// />
// </div>
// ))}
// {/* </Slider> */}
\ No newline at end of file
......
.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 10rem;
&__progress{
margin-bottom: 3rem;
}
}
.slider{
// border: 1px solid gray;
width: 30rem;
display: flex;
align-items: center;
margin: 0 auto;
overflow: hidden;
&__wrapper{
width: 30rem;
}
&__desc{
font-size: 2rem;
font-weight: bold;
margin-bottom: 2rem;
}
}
// .slider__wrapper{
// // border: 1px solid red;
// width: 30rem;
// }
// .slider__desc{
// font-size: 2rem;
// font-weight: bold;
// margin-bottom: 2rem;
// }
\ No newline at end of file