김건희 / OSSW_Weather_Briefing

Go to a project
Toggle navigation Toggle navigation pinning
김건희
17dcc5f6 1 parent 0471c48c

[Update] MainPage Design

Inline Side-by-side
Showing 3 changed files with 97 additions and 123 deletions
This diff could not be displayed because it is too large.
...@@ -141,104 +141,94 @@ function MainPage(props) { ...@@ -141,104 +141,94 @@ function MainPage(props) {
141 return ( 141 return (
142 <> 142 <>
143 <dir id = "header"> 143 <dir id = "header">
144 - <dir className="clock"> 144 + <dir className="header_clock">
145 <h1 id="clock">{Time}</h1> 145 <h1 id="clock">{Time}</h1>
146 </dir> 146 </dir>
147 - <dir className="title"> 147 + <dir className="header_title">
148 <h1>Weather_Briefing</h1> 148 <h1>Weather_Briefing</h1>
149 </dir> 149 </dir>
150 - <dir className="Login-Register"> 150 + <dir className="header_choice_box">
151 - <button type="button" onclick="location.href='http://localhost:3000/login';">Login</button> 151 + <button type="button">Login</button>
152 - <button type="button" onclick="location.href='http://localhost:3000/register';">Register</button> 152 + <button type="button">Register</button>
153 </dir> 153 </dir>
154 </dir> 154 </dir>
155 155
156 <div id = "body"> 156 <div id = "body">
157 - <div className="submit-box"> 157 + <div className="info-box">
158 - <p className="info">정보를 입력해주세요.</p> 158 + <p className="info">정보를 입력해주세요.</p>
159 - <div className="input-area"> 159 + <div className="main-input-area">
160 - <li>이름</li> 160 + <li>이름</li>
161 - <input 161 + <input
162 - placeholder="이름을 적어주세요" 162 + placeholder="이름을 입력해주세요."
163 - type="text" 163 + type="text"
164 - value={Name} 164 + value={Name}
165 - onChange={onNameHandler} 165 + onChange={onNameHandler}
166 - /> 166 + />
167 - </div> 167 + </div>
168 - <div className="check-variable"> 168 + <div className="main-check-variable">
169 - {checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>} 169 + {checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>}
170 - </div> 170 + </div>
171 - <hr/> 171 + <hr/>
172 - <div className="input-area"> 172 + <div className="main-input-area">
173 - <li>성별</li> 173 + <li>성별</li>
174 - <p>남자</p> 174 + <p>남자</p>
175 - <input 175 + <input
176 - type="radio" //라디오 버튼 타입 176 + type="radio" //라디오 버튼 타입
177 - value = "0" 177 + value = "0"
178 - checked = {Sex === "0"} 178 + checked = {Sex === "0"}
179 - onChange={onSexHandler} 179 + onChange={onSexHandler}
180 - /> 180 + />
181 - <p>여자</p> 181 + <p>여자</p>
182 - <input 182 + <input
183 - type="radio" 183 + type="radio"
184 - value = "1" 184 + value = "1"
185 - checked = {Sex === "1"} 185 + checked = {Sex === "1"}
186 - onChange={onSexHandler} 186 + onChange={onSexHandler}
187 - /> 187 + />
188 - </div> 188 + </div>
189 - <hr/> 189 + <hr/>
190 - <div className="input-area"> 190 + <div className="main-input-area">
191 - <li>지역</li> 191 + <li>지역</li>
192 - <div className="CityAddSelect"> 192 + <div className="CityAddSelect">
193 - <select onChange={onCityAddhandler && GuAddSelector} value={CityAdd}> 193 + <select onChange={onCityAddhandler && GuAddSelector} value={CityAdd}>
194 - {CityAddselectList.map((item) => ( 194 + {CityAddselectList.map((item) => (
195 - <option value={item} key={item}> 195 + <option value={item} key={item}>
196 - {item} 196 + {item}
197 - </option> 197 + </option>
198 - ))} 198 + ))}
199 - value값을 구 선택시 넘겨줘야함 199 + value값을 구 선택시 넘겨줘야함
200 - </select> 200 + </select>
201 - </div> 201 + </div>
202 - <div className="GuAddSelect"> 202 + <div className="GuAddSelect">
203 - <select onChange={onGuAddhandler && DongAddSelector} value={GuAdd}> 203 + <select onChange={onGuAddhandler && DongAddSelector} value={GuAdd}>
204 - {GuAddselectList.map((item) => ( 204 + {GuAddselectList.map((item) => (
205 - <option value={item} key={item}> 205 + <option value={item} key={item}>
206 - {item} 206 + {item}
207 - </option> 207 + </option>
208 - ))} 208 + ))}
209 - </select> 209 + </select>
210 - </div> 210 + </div>
211 - <div className="DongAddSelect"> 211 + <div className="DongAddSelect">
212 - <select onChange={onDongAddhandler} value={DongAdd}> 212 + <select onChange={onDongAddhandler} value={DongAdd}>
213 - {DongAddselectList.map((item) => ( 213 + {DongAddselectList.map((item) => (
214 - <option value={item} key={item}> 214 + <option value={item} key={item}>
215 - {item} 215 + {item}
216 - </option> 216 + </option>
217 - ))} 217 + ))}
218 - </select> 218 + </select>
219 - </div> 219 + </div>
220 - </div> 220 + </div>
221 - <hr/> 221 + <hr/>
222 - <div className="btn-area" onClick={onSubmitHandler}> 222 + <div className="main-btn-area" onClick={onSubmitHandler}>
223 - <button className="submit-btn"> 223 + <button className="submit-btn">
224 - 양식 제출 224 + 양식 제출
225 - </button> 225 + </button>
226 - </div> 226 + </div>
227 - <div className="check-variable"> 227 + <div className="main-check-variable">
228 - {checkSubmitError && <div style={{color : 'red'}}>정보를 제대로 입력해주세요.</div>} 228 + {checkSubmitError && <div style={{color : 'red'}}>정보를 제대로 입력해주세요.</div>}
229 - </div> 229 + </div>
230 </div> 230 </div>
231 </div> 231 </div>
232 -
233 - <dir id = "footer">
234 - <dir className="logo">
235 - <h1>logo</h1>
236 - </dir>
237 - <dir className="info">
238 - <p>경희대학교</p>
239 - <p>컴퓨터공학과 김건희ㅣ오석진ㅣ손수민</p>
240 - </dir>
241 - </dir>
242 </> 232 </>
243 ); 233 );
244 } 234 }
......
...@@ -14,27 +14,21 @@ ...@@ -14,27 +14,21 @@
14 border-top: 2px solid; 14 border-top: 2px solid;
15 border-bottom: 2px solid; 15 border-bottom: 2px solid;
16 16
17 - .clock { 17 + .header_clock {
18 justify-content: left; 18 justify-content: left;
19 align-items: left; 19 align-items: left;
20 width: 10%; 20 width: 10%;
21 height: 10%; 21 height: 10%;
22 - margin-left: 30px;
23 - margin-top: 30px;
24 - margin-bottom: 30px;
25 h1{ 22 h1{
26 - display: flex;
27 color:rgb(0, 0, 0); 23 color:rgb(0, 0, 0);
28 - font-size: 5px; 24 + font-size: 15px;
29 } 25 }
30 } 26 }
31 27
32 - .title { 28 + .header_title {
33 display: flex; 29 display: flex;
34 justify-content: center; 30 justify-content: center;
35 align-items: center; 31 align-items: center;
36 - margin-top: 100px;
37 - margin-bottom: 100px;
38 margin-left: 300px; 32 margin-left: 300px;
39 margin-right: 300px; 33 margin-right: 300px;
40 h1 { 34 h1 {
...@@ -43,18 +37,16 @@ ...@@ -43,18 +37,16 @@
43 color: rgb(0, 0, 0); 37 color: rgb(0, 0, 0);
44 } 38 }
45 } 39 }
46 - .Login-Register { 40 + .header_choice_box {
47 display: flex; 41 display: flex;
48 justify-content: right; 42 justify-content: right;
49 align-items: right; 43 align-items: right;
50 - margin-top: 50px;
51 - margin-bottom: 5px;
52 margin-right: 10x; 44 margin-right: 10x;
53 } 45 }
54 button { 46 button {
55 - width: 50px; 47 + width: 70px;
56 - height: 20px; 48 + height: 25px;
57 - font-size: 10px; 49 + font-size: 15px;
58 font-weight: bold; 50 font-weight: bold;
59 cursor: pointer; 51 cursor: pointer;
60 } 52 }
...@@ -67,10 +59,10 @@ ...@@ -67,10 +59,10 @@
67 border-top: 2px solid; 59 border-top: 2px solid;
68 border-bottom: 2px solid; 60 border-bottom: 2px solid;
69 61
70 - .submit-box { 62 + .info-box {
71 border: 2px solid; 63 border: 2px solid;
72 - width: 90%; 64 + width: 55%;
73 - height: 200%; 65 + height: 100%;
74 margin-top: 150px; 66 margin-top: 150px;
75 margin-bottom: 30px; 67 margin-bottom: 30px;
76 } 68 }
...@@ -78,7 +70,7 @@ ...@@ -78,7 +70,7 @@
78 display: flex; 70 display: flex;
79 justify-content: center; 71 justify-content: center;
80 align-items: center; 72 align-items: center;
81 - margin-top: 50px; 73 + margin-top: 20px;
82 margin-left: 100px; 74 margin-left: 100px;
83 margin-right: 100px; 75 margin-right: 100px;
84 } 76 }
...@@ -95,47 +87,45 @@ ...@@ -95,47 +87,45 @@
95 margin-left: 30%; 87 margin-left: 30%;
96 margin-right: 30%; 88 margin-right: 30%;
97 } 89 }
98 - .input-area { 90 + .main-input-area {
99 display: flex; 91 display: flex;
100 justify-content: left; 92 justify-content: left;
101 align-items: left; 93 align-items: left;
102 - margin-top: 100px; 94 + margin-top: 20px;
103 margin-bottom: 15px; 95 margin-bottom: 15px;
104 li{ 96 li{
105 display:flex; 97 display:flex;
106 font-size: 15px; 98 font-size: 15px;
107 color: gray; 99 color: gray;
108 - margin-left: 20%; 100 + margin-left: 15%;
109 margin-right: 10%; 101 margin-right: 10%;
110 } 102 }
111 p{ 103 p{
112 display:flex; 104 display:flex;
113 font-size: 15px; 105 font-size: 15px;
114 border: 2px dotted gray; 106 border: 2px dotted gray;
115 - margin-top: 5px;
116 margin-bottom: 5px; 107 margin-bottom: 5px;
117 margin-left: 5%; 108 margin-left: 5%;
118 } 109 }
119 input { 110 input {
120 - padding: 10px 5rem; 111 + padding: 10px 2rem;
121 background-color: rgb(255, 255, 255); 112 background-color: rgb(255, 255, 255);
122 margin-left: 50px; 113 margin-left: 50px;
123 } 114 }
124 115
125 select { 116 select {
126 - 117 + padding: 10px 1.5rem;
127 - padding: 10px 3rem;
128 margin-right: 5px; 118 margin-right: 5px;
129 background-color: rgb(255, 255, 255); 119 background-color: rgb(255, 255, 255);
130 } 120 }
131 } 121 }
132 - .check-variable { 122 + .main-check-variable {
133 display: flex; 123 display: flex;
134 justify-content: center; 124 justify-content: center;
135 align-items: center; 125 align-items: center;
136 margin-bottom: 5px; 126 margin-bottom: 5px;
137 } 127 }
138 - .btn-area { 128 + .main-btn-area {
139 display: flex; 129 display: flex;
140 justify-content: center; 130 justify-content: center;
141 margin-top: 60px; 131 margin-top: 60px;
...@@ -143,7 +133,7 @@ ...@@ -143,7 +133,7 @@
143 133
144 button { 134 button {
145 width: 150px; 135 width: 150px;
146 - height: 80px; 136 + height: 60px;
147 font-size: 15px; 137 font-size: 15px;
148 font-weight: bold; 138 font-weight: bold;
149 background-color:rgb(255, 253, 238); 139 background-color:rgb(255, 253, 238);
...@@ -151,10 +141,4 @@ ...@@ -151,10 +141,4 @@
151 } 141 }
152 } 142 }
153 } 143 }
154 - #footer {
155 - display: flex;
156 - background-color: rgb(225, 208, 134);
157 - height: 10%;
158 -
159 - }
160 144
...\ No newline at end of file ...\ No newline at end of file
......