[ADD] Survey 및 Result 페이지 반응형 추가

-import "./App.scss";
 import MainPage from "./pages/MainPage";
 import SurveyPageContainer from "./containers/SurveyPageContainer";
 import ResultPageContainer from "./containers/ResultPageContainer";

-.App{
-  min-width: 600px;
-}
\ No newline at end of file

@@ -3,12 +3,12 @@ import { useSelector } from 'react-redux';
 import ResultPage from '../pages/ResultPage';
 import Loading from '../components/loading/Loading';
 
-export function ResultPageContainer() {
+export function ResultPageContainer({history}) {
     const {loading,data,error} = useSelector((state) => state.result);
     return (
         <>
             {loading && <Loading />}
-            {data && <ResultPage result={data}/>}
+            {data && <ResultPage history={history} result={data}/>}
             {error && <div>에러 발생!!</div>}
         </>
     )

-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled, { css } from "styled-components";
+import { lighten,darken } from "polished";
+
+const sizes = {
+  desktop: 102.4,
+  tablet: 76.8,
+  phone: 36,
+};
+
+const media = Object.keys(sizes).reduce((acc, label) => {
+  acc[label] = (...args) => css`
+    @media (max-width: ${sizes[label]}rem) {
+      ${css(...args)}
+    }
+  `;
+  return acc;
+}, {});
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-    margin-top: 10rem;
+  margin-top: 4rem;
+  width: 40rem;
+  ${media.phone`
+    margin-top: 2rem;
+    width: 20rem;
+  `}
 `;
 
 const Title = styled.div`
   font-size: 5rem;
   font-weight: bold;
+  ${media.phone`
+    font-size: 3rem;
+  `}
 `;
 
 const Position = styled.div`
   font-size: 4.5rem;
+  font-weight: bold;
+  ${media.phone`
+    font-size: 1.6rem;
+  `}
+`;
+
+const ResultImg = styled.img`
+  border-radius: 1rem;
+  width: 30rem;
+  margin-top: 3rem;
+  ${media.phone`
+    width: 20rem;
+    margin-top: 1rem;
+  `}
 `;
 
 const Description = styled.div`
-    margin-top: 4rem;
-    font-size: 1.4rem;
+  color: #222222;
+  font-size: 1.2rem;
+  ${media.phone`
+    font-size: 1rem;
+  `}
+`;
+
+const ContentBox = styled.div`
+margin-top: 1rem;
+  background-color: #f2f2f2;
+  text-align: left;
+  border-radius: 1rem;
+  padding: 2rem;
+  width: 30rem;
+  ${media.phone`
+    width: 20rem;
+  `}
+`;
+
+const ResetBtn = styled.div`
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+  width: 25rem;
+  height: 5rem;
+  font-size: 1.6rem;
+  font-weight: bold;
+  border-radius: 1rem;
+  color: #010101;
+  background-color: #f2f2f2;
+  transform: background-color;
+  transition: ease-out 0.3s;
+  &:hover {
+    background: ${darken(0.1, "#f2f2f2")};
+  }
+  ${media.phone`
+    width: 16rem;
+    height: 4rem;
+    font-size: 1.2rem;
+  `}
 `;
 
 // TODO: 다시하기 and 카카오톡 공유
 // 다시하기 : getQuestion dispatch 해준 다음 push('/survey');
 
-function ResultPage({result}){
-    return(
-        <>
+function ResultPage({ history, result }) {
+  const onClick=()=>{
+    history.push('/');
+  }
+  return (
+    <Wrapper>
       {result && (
         <Container>
           <Title>{result.high}</Title>
           <Position>{result.low}</Position>
+          <ResultImg src={result.image} />
+          <ContentBox>
             <Description>{result.description}</Description>
-                    <img src={result.image} />
-                </Container>)
-            }  
-        </>
+          </ContentBox>
+        </Container>
+      )}
+      <ResetBtn onClick={onClick}>다시하기</ResetBtn>
+    </Wrapper>
   );
 }
 

@@ -6,20 +6,36 @@ import "antd/dist/antd.css";
 
 import styled, { css } from "styled-components";
 
+const sizes = {
+  desktop: 102.4,
+  tablet: 76.8,
+  phone: 36,
+};
+
+const media = Object.keys(sizes).reduce((acc, label) => {
+  acc[label] = (...args) => css`
+    @media (max-width: ${sizes[label]}rem) {
+      ${css(...args)}
+    }
+  `;
+  return acc;
+}, {});
+
 const SurveyContainer = styled.div`
   display: flex;
   justify-content: center;
-  // 얘도 배경 고려해보기
 `;
 
 const Container = styled.div`
-  /* border: solid 1px red; */
   width: 500px;
   height: 100vh;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
+  ${media.phone`
+    width: 360px;
+  `}
 `;
 
 const ProgressBar = styled.div`
@@ -31,6 +47,9 @@ const ProgressBar = styled.div`
   background-color: #747b4b;
   border-radius: 1rem;
   position: relative;
+  ${media.phone`
+    margin-top: 10rem;
+  `}
 `;
 
 // 적당한 icon 찾으면 바꿀 것임
@@ -50,11 +69,17 @@ const SliderCotainer = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
+  margin-top: 6rem;
   ${(props) => css`
         transform: translateX(${-500 * props.curIdx}px);
         transition: 0.5s;
   `}
-  margin-top: 6rem;
+  ${media.phone`
+  ${(props)=> css`
+    transform: translateX(${-360 * props.curIdx}px);
+    transition: 0.5s;
+  `}
+  `}
 `;
 
 function SurveyPage({ history, question }) {
@@ -72,12 +97,10 @@ function SurveyPage({ history, question }) {
   return (
     <SurveyContainer>
       <Container>
-        {/* 상태바 넣기 */}
         <ProgressBar>
           <ProgressIcon curIdx={curIdx}/>
         </ProgressBar>
         <SliderCotainer curIdx={curIdx}>
-          {/* 얘가 슬라이더 컨테이너 */}
           {question.map((question) => (
             <Card
               key={question.num}

-import getResultApi from '../../api/getResult';
+import getResultApi from '../../lib/api/getResult';
 
 // action
 const GET_RESULT = 'GET_RESULT';

-import getQuestionApi from '../../api/getQuestion';
+import getQuestionApi from '../../lib/api/getQuestion';
 
 // action
 const GET_SURVEY = 'GET_SURVEY';