khusat / khusat-front

Go to a project
Toggle navigation Toggle navigation pinning
이준호
4f98305c 1 parent 60aa6407

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

Inline Side-by-side
Showing 9 changed files with 150 additions and 39 deletions
1 -import "./App.scss";
2 import MainPage from "./pages/MainPage"; 1 import MainPage from "./pages/MainPage";
3 import SurveyPageContainer from "./containers/SurveyPageContainer"; 2 import SurveyPageContainer from "./containers/SurveyPageContainer";
4 import ResultPageContainer from "./containers/ResultPageContainer"; 3 import ResultPageContainer from "./containers/ResultPageContainer";
......
1 -.App{
2 - min-width: 600px;
3 -}
...\ No newline at end of file ...\ No newline at end of file
...@@ -3,12 +3,12 @@ import { useSelector } from 'react-redux'; ...@@ -3,12 +3,12 @@ import { useSelector } from 'react-redux';
3 import ResultPage from '../pages/ResultPage'; 3 import ResultPage from '../pages/ResultPage';
4 import Loading from '../components/loading/Loading'; 4 import Loading from '../components/loading/Loading';
5 5
6 -export function ResultPageContainer() { 6 +export function ResultPageContainer({history}) {
7 const {loading,data,error} = useSelector((state) => state.result); 7 const {loading,data,error} = useSelector((state) => state.result);
8 return ( 8 return (
9 <> 9 <>
10 {loading && <Loading />} 10 {loading && <Loading />}
11 - {data && <ResultPage result={data}/>} 11 + {data && <ResultPage history={history} result={data}/>}
12 {error && <div>에러 발생!!</div>} 12 {error && <div>에러 발생!!</div>}
13 </> 13 </>
14 ) 14 )
......
1 -import React from 'react'; 1 +import React from "react";
2 -import styled from 'styled-components'; 2 +import styled, { css } from "styled-components";
3 +import { lighten,darken } from "polished";
4 +
5 +const sizes = {
6 + desktop: 102.4,
7 + tablet: 76.8,
8 + phone: 36,
9 +};
10 +
11 +const media = Object.keys(sizes).reduce((acc, label) => {
12 + acc[label] = (...args) => css`
13 + @media (max-width: ${sizes[label]}rem) {
14 + ${css(...args)}
15 + }
16 + `;
17 + return acc;
18 +}, {});
19 +
20 +const Wrapper = styled.div`
21 + display: flex;
22 + flex-direction: column;
23 + justify-content: center;
24 + align-items: center;
25 +`;
3 26
4 const Container = styled.div` 27 const Container = styled.div`
5 - display: flex; 28 + display: flex;
6 - flex-direction: column; 29 + flex-direction: column;
7 - justify-content: center; 30 + justify-content: center;
8 - align-items: center; 31 + align-items: center;
9 - margin-top: 10rem; 32 + margin-top: 4rem;
33 + width: 40rem;
34 + ${media.phone`
35 + margin-top: 2rem;
36 + width: 20rem;
37 + `}
10 `; 38 `;
11 39
12 const Title = styled.div` 40 const Title = styled.div`
13 - font-size: 5rem; 41 + font-size: 5rem;
14 - font-weight: bold; 42 + font-weight: bold;
43 + ${media.phone`
44 + font-size: 3rem;
45 + `}
15 `; 46 `;
16 47
17 const Position = styled.div` 48 const Position = styled.div`
18 - font-size: 4.5rem; 49 + font-size: 4.5rem;
50 + font-weight: bold;
51 + ${media.phone`
52 + font-size: 1.6rem;
53 + `}
54 +`;
55 +
56 +const ResultImg = styled.img`
57 + border-radius: 1rem;
58 + width: 30rem;
59 + margin-top: 3rem;
60 + ${media.phone`
61 + width: 20rem;
62 + margin-top: 1rem;
63 + `}
19 `; 64 `;
20 65
21 const Description = styled.div` 66 const Description = styled.div`
22 - margin-top: 4rem; 67 + color: #222222;
23 - font-size: 1.4rem; 68 + font-size: 1.2rem;
69 + ${media.phone`
70 + font-size: 1rem;
71 + `}
72 +`;
73 +
74 +const ContentBox = styled.div`
75 +margin-top: 1rem;
76 + background-color: #f2f2f2;
77 + text-align: left;
78 + border-radius: 1rem;
79 + padding: 2rem;
80 + width: 30rem;
81 + ${media.phone`
82 + width: 20rem;
83 + `}
84 +`;
85 +
86 +const ResetBtn = styled.div`
87 + cursor: pointer;
88 + display: flex;
89 + justify-content: center;
90 + align-items: center;
91 + margin-top: 1rem;
92 + margin-bottom: 2rem;
93 + width: 25rem;
94 + height: 5rem;
95 + font-size: 1.6rem;
96 + font-weight: bold;
97 + border-radius: 1rem;
98 + color: #010101;
99 + background-color: #f2f2f2;
100 + transform: background-color;
101 + transition: ease-out 0.3s;
102 + &:hover {
103 + background: ${darken(0.1, "#f2f2f2")};
104 + }
105 + ${media.phone`
106 + width: 16rem;
107 + height: 4rem;
108 + font-size: 1.2rem;
109 + `}
24 `; 110 `;
25 111
26 // TODO: 다시하기 and 카카오톡 공유 112 // TODO: 다시하기 and 카카오톡 공유
27 // 다시하기 : getQuestion dispatch 해준 다음 push('/survey'); 113 // 다시하기 : getQuestion dispatch 해준 다음 push('/survey');
28 114
29 -function ResultPage({result}){ 115 +function ResultPage({ history, result }) {
30 - return( 116 + const onClick=()=>{
31 - <> 117 + history.push('/');
32 - {result && ( 118 + }
33 - <Container> 119 + return (
34 - <Title>{result.high}</Title> 120 + <Wrapper>
35 - <Position>{result.low}</Position> 121 + {result && (
36 - <Description>{result.description}</Description> 122 + <Container>
37 - <img src={result.image} /> 123 + <Title>{result.high}</Title>
38 - </Container>) 124 + <Position>{result.low}</Position>
39 - } 125 + <ResultImg src={result.image} />
40 - </> 126 + <ContentBox>
41 - ); 127 + <Description>{result.description}</Description>
128 + </ContentBox>
129 + </Container>
130 + )}
131 + <ResetBtn onClick={onClick}>다시하기</ResetBtn>
132 + </Wrapper>
133 + );
42 } 134 }
43 135
44 -export default ResultPage;
...\ No newline at end of file ...\ No newline at end of file
136 +export default ResultPage;
......
...@@ -6,20 +6,36 @@ import "antd/dist/antd.css"; ...@@ -6,20 +6,36 @@ import "antd/dist/antd.css";
6 6
7 import styled, { css } from "styled-components"; 7 import styled, { css } from "styled-components";
8 8
9 +const sizes = {
10 + desktop: 102.4,
11 + tablet: 76.8,
12 + phone: 36,
13 +};
14 +
15 +const media = Object.keys(sizes).reduce((acc, label) => {
16 + acc[label] = (...args) => css`
17 + @media (max-width: ${sizes[label]}rem) {
18 + ${css(...args)}
19 + }
20 + `;
21 + return acc;
22 +}, {});
23 +
9 const SurveyContainer = styled.div` 24 const SurveyContainer = styled.div`
10 display: flex; 25 display: flex;
11 justify-content: center; 26 justify-content: center;
12 - // 얘도 배경 고려해보기
13 `; 27 `;
14 28
15 const Container = styled.div` 29 const Container = styled.div`
16 - /* border: solid 1px red; */
17 width: 500px; 30 width: 500px;
18 height: 100vh; 31 height: 100vh;
19 overflow: hidden; 32 overflow: hidden;
20 display: flex; 33 display: flex;
21 flex-direction: column; 34 flex-direction: column;
22 align-items: center; 35 align-items: center;
36 + ${media.phone`
37 + width: 360px;
38 + `}
23 `; 39 `;
24 40
25 const ProgressBar = styled.div` 41 const ProgressBar = styled.div`
...@@ -31,6 +47,9 @@ const ProgressBar = styled.div` ...@@ -31,6 +47,9 @@ const ProgressBar = styled.div`
31 background-color: #747b4b; 47 background-color: #747b4b;
32 border-radius: 1rem; 48 border-radius: 1rem;
33 position: relative; 49 position: relative;
50 + ${media.phone`
51 + margin-top: 10rem;
52 + `}
34 `; 53 `;
35 54
36 // 적당한 icon 찾으면 바꿀 것임 55 // 적당한 icon 찾으면 바꿀 것임
...@@ -50,11 +69,17 @@ const SliderCotainer = styled.div` ...@@ -50,11 +69,17 @@ const SliderCotainer = styled.div`
50 width: 100%; 69 width: 100%;
51 display: flex; 70 display: flex;
52 align-items: center; 71 align-items: center;
72 + margin-top: 6rem;
53 ${(props) => css` 73 ${(props) => css`
54 transform: translateX(${-500 * props.curIdx}px); 74 transform: translateX(${-500 * props.curIdx}px);
55 transition: 0.5s; 75 transition: 0.5s;
56 `} 76 `}
57 - margin-top: 6rem; 77 + ${media.phone`
78 + ${(props)=> css`
79 + transform: translateX(${-360 * props.curIdx}px);
80 + transition: 0.5s;
81 + `}
82 + `}
58 `; 83 `;
59 84
60 function SurveyPage({ history, question }) { 85 function SurveyPage({ history, question }) {
...@@ -72,12 +97,10 @@ function SurveyPage({ history, question }) { ...@@ -72,12 +97,10 @@ function SurveyPage({ history, question }) {
72 return ( 97 return (
73 <SurveyContainer> 98 <SurveyContainer>
74 <Container> 99 <Container>
75 - {/* 상태바 넣기 */}
76 <ProgressBar> 100 <ProgressBar>
77 <ProgressIcon curIdx={curIdx}/> 101 <ProgressIcon curIdx={curIdx}/>
78 </ProgressBar> 102 </ProgressBar>
79 <SliderCotainer curIdx={curIdx}> 103 <SliderCotainer curIdx={curIdx}>
80 - {/* 얘가 슬라이더 컨테이너 */}
81 {question.map((question) => ( 104 {question.map((question) => (
82 <Card 105 <Card
83 key={question.num} 106 key={question.num}
......
1 -import getResultApi from '../../api/getResult'; 1 +import getResultApi from '../../lib/api/getResult';
2 2
3 // action 3 // action
4 const GET_RESULT = 'GET_RESULT'; 4 const GET_RESULT = 'GET_RESULT';
......
1 -import getQuestionApi from '../../api/getQuestion'; 1 +import getQuestionApi from '../../lib/api/getQuestion';
2 2
3 // action 3 // action
4 const GET_SURVEY = 'GET_SURVEY'; 4 const GET_SURVEY = 'GET_SURVEY';
......