이준호

[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;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 4rem;
width: 40rem;
${media.phone`
margin-top: 2rem;
width: 20rem;
`}
`;
const Title = styled.div`
font-size: 5rem;
font-weight: bold;
font-size: 5rem;
font-weight: bold;
${media.phone`
font-size: 3rem;
`}
`;
const Position = styled.div`
font-size: 4.5rem;
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(
<>
{result && (
<Container>
<Title>{result.high}</Title>
<Position>{result.low}</Position>
<Description>{result.description}</Description>
<img src={result.image} />
</Container>)
}
</>
);
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>
</ContentBox>
</Container>
)}
<ResetBtn onClick={onClick}>다시하기</ResetBtn>
</Wrapper>
);
}
export default ResultPage;
\ No newline at end of file
export default ResultPage;
......
......@@ -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';
......