khusat / khusat-front

Go to a project
Toggle navigation Toggle navigation pinning
이준호
0cad49e7 1 parent 8627d7a2

[UPDATE] Main페이지 반응형 컨테이너로 리팩토링

Inline Side-by-side
Showing 3 changed files with 29 additions and 41 deletions
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
8 name="description" 8 name="description"
9 content="Web site created using create-react-app" 9 content="Web site created using create-react-app"
10 /> 10 />
11 - <title>React App</title> 11 + <title>KHUSAT</title>
12 </head> 12 </head>
13 <body> 13 <body>
14 <noscript>You need to enable JavaScript to run this app.</noscript> 14 <noscript>You need to enable JavaScript to run this app.</noscript>
......
...@@ -20,25 +20,17 @@ const media = Object.keys(sizes).reduce((acc, label) => { ...@@ -20,25 +20,17 @@ const media = Object.keys(sizes).reduce((acc, label) => {
20 return acc; 20 return acc;
21 }, {}); 21 }, {});
22 22
23 -const WrapperContainer = styled.div`
24 - width: 100%;
25 - height: 100vh;
26 -`;
27 -
28 -const Wrapper = styled.div`
29 - width: 100%;
30 - height: 100%;
31 - background-image: url(${pattern});
32 - background-repeat: no-repeat; // background-image가 컨테이너를 가득 채우지 못할 경우에도 반복하지 않는다.
33 - background-size: cover; // 사이즈가 container에 맞지 않아도 꽉 차도록 채운다.
34 - background-position: center; // background-image가 컨테이너에 가운데로 오도록 한다.
35 -`;
36 -
37 const Container = styled.div` 23 const Container = styled.div`
38 display: flex; 24 display: flex;
39 flex-direction: column; 25 flex-direction: column;
40 align-items: center; 26 align-items: center;
41 justify-content: center; 27 justify-content: center;
28 + width: 100%;
29 + height: 100vh;
30 + background-image: url(${pattern});
31 + background-repeat: none; // background-image가 컨테이너를 가득 채우지 못할 경우에도 반복하지 않는다.
32 + background-size: cover; // 사이즈가 container에 맞지 않아도 꽉 차도록 채운다.
33 + background-position: center; // background-image가 컨테이너에 가운데로 오도록 한다.
42 color: #ffffff; 34 color: #ffffff;
43 `; 35 `;
44 36
...@@ -47,18 +39,23 @@ const MainImg = styled.img` ...@@ -47,18 +39,23 @@ const MainImg = styled.img`
47 width: 30rem; 39 width: 30rem;
48 height: auto; 40 height: auto;
49 ${media.tablet` 41 ${media.tablet`
50 - width: 20rem; 42 + width: 25rem;
43 + `}
44 + ${media.phone`
45 + width: 22rem;
51 `} 46 `}
52 `; 47 `;
53 48
54 const MainTitle = styled.div` 49 const MainTitle = styled.div`
55 margin-top: 3rem; 50 margin-top: 3rem;
56 - text-align: center;
57 font-size: 5rem; 51 font-size: 5rem;
58 font-weight: bold; 52 font-weight: bold;
59 ${media.tablet` 53 ${media.tablet`
60 font-size: 4rem; 54 font-size: 4rem;
61 `} 55 `}
56 + ${media.phone`
57 + font-size: 3rem;
58 + `}
62 `; 59 `;
63 60
64 const MainDesc = styled.div` 61 const MainDesc = styled.div`
...@@ -70,15 +67,6 @@ const MainDesc = styled.div` ...@@ -70,15 +67,6 @@ const MainDesc = styled.div`
70 `} 67 `}
71 `; 68 `;
72 69
73 -const MainBtnWrapper = styled.div`
74 - display: flex;
75 - justify-content: center;
76 - align-items: center;
77 - ${media.tablet`
78 -
79 - `}
80 -`;
81 -
82 const MainBtn = styled.div` 70 const MainBtn = styled.div`
83 cursor: pointer; 71 cursor: pointer;
84 display: flex; 72 display: flex;
...@@ -100,6 +88,11 @@ const MainBtn = styled.div` ...@@ -100,6 +88,11 @@ const MainBtn = styled.div`
100 background-color: #ffffff; 88 background-color: #ffffff;
101 color: #010101; 89 color: #010101;
102 } 90 }
91 + ${media.phone`
92 + width: 20rem;
93 + height: 4rem;
94 + font-size: 1.2rem;
95 + `}
103 `; 96 `;
104 97
105 function MainPage({ history }) { 98 function MainPage({ history }) {
...@@ -114,21 +107,15 @@ function MainPage({ history }) { ...@@ -114,21 +107,15 @@ function MainPage({ history }) {
114 107
115 return ( 108 return (
116 <> 109 <>
117 - <WrapperContainer> 110 + <Container>
118 - <Wrapper> 111 + <MainTitle>KHUSAT</MainTitle>
119 - <Container> 112 + <MainDesc>
120 - <MainTitle>KHUSAT</MainTitle> 113 + KHUSAT 특별과정, <br></br>
121 - <MainDesc> 114 + 여러분의 보직을 추천드립니다.
122 - KHUSAT 특별과정, <br></br> 115 + </MainDesc>
123 - 여러분의 보직을 추천드립니다. 116 + <MainImg src={soldier} />
124 - </MainDesc> 117 + <MainBtn onClick={onClick}>시작하기</MainBtn>
125 - <MainImg src={soldier} /> 118 + </Container>
126 - </Container>
127 - <MainBtnWrapper>
128 - <MainBtn onClick={onClick}>시작하기</MainBtn>
129 - </MainBtnWrapper>
130 - </Wrapper>
131 - </WrapperContainer>
132 </> 119 </>
133 ); 120 );
134 } 121 }
......
...@@ -34,6 +34,7 @@ function ResultPage({result}){ ...@@ -34,6 +34,7 @@ function ResultPage({result}){
34 <Title>{result.high}</Title> 34 <Title>{result.high}</Title>
35 <Position>{result.low}</Position> 35 <Position>{result.low}</Position>
36 <Description>{result.description}</Description> 36 <Description>{result.description}</Description>
37 + <img src={result.image} />
37 </Container>) 38 </Container>)
38 } 39 }
39 </> 40 </>
......