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

-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 Card from "../components/card/Card";
 import ProgressBar from "../components/progressbar/ProgressBar";
 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 (
   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;
 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