권주희 / howsTheAir

Go to a project
Toggle navigation Toggle navigation pinning
권주희
babaa4e7 2 parents 68f89906 aad9a7f2

Merge branch 'feature/kakaomap_setting' into 'develop' 

Feature/kakaomap setting

- setting the basic layout of frontend
- display the kakao map in main page
   - display the kakao map in main page
   - add search location box
   - create the marker to each map
- implement InfoWindow 
   - add display infowindow function for each marker

See merge request !3
Expand all
Inline Side-by-side
Showing 6 changed files with 348 additions and 2 deletions
This diff is collapsed. Click to expand it.
...@@ -6,8 +6,12 @@ ...@@ -6,8 +6,12 @@
6 "@testing-library/jest-dom": "^4.2.4", 6 "@testing-library/jest-dom": "^4.2.4",
7 "@testing-library/react": "^9.3.2", 7 "@testing-library/react": "^9.3.2",
8 "@testing-library/user-event": "^7.1.2", 8 "@testing-library/user-event": "^7.1.2",
9 + "bootstrap": "^3.4.1",
10 + "daum-map-api": "^1.0.2",
9 "react": "^16.13.1", 11 "react": "^16.13.1",
12 + "react-bootstrap": "^1.0.1",
10 "react-dom": "^16.13.1", 13 "react-dom": "^16.13.1",
14 + "react-kakao-maps": "0.0.13",
11 "react-router-dom": "^5.2.0", 15 "react-router-dom": "^5.2.0",
12 "react-scripts": "3.4.1" 16 "react-scripts": "3.4.1"
13 }, 17 },
......
...@@ -10,6 +10,16 @@ ...@@ -10,6 +10,16 @@
10 content="Web site created using create-react-app" 10 content="Web site created using create-react-app"
11 /> 11 />
12 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 12 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 + <script
14 + type="text/javascript"
15 + src="//dapi.kakao.com/v2/maps/sdk.js?appkey=61abec34d0855ba1d434ea222263d4a5&libraries=services,clusterer,drawing"
16 + ></script>
17 + <link
18 + rel="stylesheet"
19 + href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
20 + integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
21 + crossorigin="anonymous"
22 + />
13 <!-- 23 <!--
14 manifest.json provides metadata used when your web app is installed on a 24 manifest.json provides metadata used when your web app is installed on a
15 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ 25 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
...@@ -24,7 +34,7 @@ ...@@ -24,7 +34,7 @@
24 work correctly both with client-side routing and a non-root public URL. 34 work correctly both with client-side routing and a non-root public URL.
25 Learn how to configure a non-root public URL by running `npm run build`. 35 Learn how to configure a non-root public URL by running `npm run build`.
26 --> 36 -->
27 - <title>React App</title> 37 + <title>HowsTheWeather</title>
28 </head> 38 </head>
29 <body> 39 <body>
30 <noscript>You need to enable JavaScript to run this app.</noscript> 40 <noscript>You need to enable JavaScript to run this app.</noscript>
......
...@@ -15,13 +15,14 @@ ...@@ -15,13 +15,14 @@
15 15
16 .App-header { 16 .App-header {
17 background-color: #282c34; 17 background-color: #282c34;
18 - min-height: 100vh; 18 + min-height: 13vh;
19 display: flex; 19 display: flex;
20 flex-direction: column; 20 flex-direction: column;
21 align-items: center; 21 align-items: center;
22 justify-content: center; 22 justify-content: center;
23 font-size: calc(10px + 2vmin); 23 font-size: calc(10px + 2vmin);
24 color: white; 24 color: white;
25 + font-weight: bold;
25 } 26 }
26 27
27 .App-link { 28 .App-link {
......
1 +.Home {
2 + text-align: center;
3 +}
4 +
5 +.Home-logo {
6 + height: 40vmin;
7 + pointer-events: none;
8 +}
9 +
10 +@media (prefers-reduced-motion: no-preference) {
11 + .Home-logo {
12 + animation: Home-logo-spin infinite 20s linear;
13 + }
14 +}
15 +
16 +.Home-header {
17 + background-color: #282c34;
18 + min-height: 13vh;
19 + display: flex;
20 + flex-direction: column;
21 + align-items: center;
22 + justify-content: center;
23 + font-size: calc(10px + 2vmin);
24 + color: white;
25 + font-weight: bold;
26 +}
27 +
28 +.Home-link {
29 + color: #61dafb;
30 +}
31 +
32 +@keyframes Home-logo-spin {
33 + from {
34 + transform: rotate(0deg);
35 + }
36 + to {
37 + transform: rotate(360deg);
38 + }
39 +}
40 +
41 +.strong {
42 + font-size: calc(10px + 1vmin);
43 + font-weight: bold;
44 +}
45 +.map_wrap,
46 +.map_wrap * {
47 + margin: 0;
48 + padding: 0;
49 + font-family: "Malgun Gothic", dotum, "돋움", sans-serif;
50 + font-size: 12px;
51 +}
52 +.map_wrap a,
53 +.map_wrap a:hover,
54 +.map_wrap a:active {
55 + color: #000;
56 + text-decoration: none;
57 +}
58 +.map_wrap {
59 + position: relative;
60 + width: 100%;
61 + height: 500px;
62 +}
63 +
64 +#menu_wrap {
65 + position: absolute;
66 + top: 0;
67 + left: 0;
68 + bottom: 0;
69 + width: 250px;
70 + margin: 10px 0 30px 10px;
71 + padding: 5px;
72 + overflow-y: auto;
73 + background: rgba(53, 53, 53, 0.8);
74 + z-index: 1;
75 + font-size: 12px;
76 + border-radius: 10px;
77 +}
78 +.bg_white {
79 + background: #fff;
80 +}
81 +x #menu_wrap hr {
82 + display: block;
83 + height: 1px;
84 + border: 0;
85 + border-top: 2px solid #5f5f5f;
86 + margin: 3px 0;
87 +}
88 +#menu_wrap .option {
89 + text-align: center;
90 + color: #ffffff;
91 + font-weight: bold;
92 +}
93 +#menu_wrap .option p {
94 + margin: 10px 0;
95 +}
96 +#menu_wrap .option button {
97 + margin-left: 5px;
98 +}
99 +
100 +#placesList li {
101 + list-style: none;
102 +}
103 +#placesList .item {
104 + position: relative;
105 + border-bottom: 1px solid #888;
106 + overflow: hidden;
107 + cursor: pointer;
108 + min-height: 65px;
109 +}
110 +#placesList .item span {
111 + display: block;
112 + margin-top: 4px;
113 +}
114 +#placesList .item h5,
115 +#placesList .item .info {
116 + text-overflow: ellipsis;
117 + overflow: hidden;
118 + white-space: nowrap;
119 +}
120 +#placesList .item .info {
121 + padding: 10px 0 10px 55px;
122 + color: #ffffff;
123 +}
124 +#placesList .info .gray {
125 + color: #eaeaea;
126 +}
127 +#placesList .info .jibun {
128 + padding-left: 26px;
129 + background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png)
130 + no-repeat;
131 +}
132 +#placesList .info .tel {
133 + color: #ffbb00;
134 + font-weight: bold;
135 +}
136 +#placesList .item .markerbg {
137 + float: left;
138 + position: absolute;
139 + width: 36px;
140 + height: 37px;
141 + margin: 10px 0 0 10px;
142 + background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png)
143 + no-repeat;
144 +}
145 +#placesList .item .marker_1 {
146 + background-position: 0 -10px;
147 +}
148 +#placesList .item .marker_2 {
149 + background-position: 0 -56px;
150 +}
151 +#placesList .item .marker_3 {
152 + background-position: 0 -102px;
153 +}
154 +#placesList .item .marker_4 {
155 + background-position: 0 -148px;
156 +}
157 +#placesList .item .marker_5 {
158 + background-position: 0 -194px;
159 +}
160 +#placesList .item .marker_6 {
161 + background-position: 0 -240px;
162 +}
163 +#placesList .item .marker_7 {
164 + background-position: 0 -286px;
165 +}
166 +#placesList .item .marker_8 {
167 + background-position: 0 -332px;
168 +}
169 +#placesList .item .marker_9 {
170 + background-position: 0 -378px;
171 +}
172 +#placesList .item .marker_10 {
173 + background-position: 0 -423px;
174 +}
175 +#placesList .item .marker_11 {
176 + background-position: 0 -470px;
177 +}
178 +#placesList .item .marker_12 {
179 + background-position: 0 -516px;
180 +}
181 +#placesList .item .marker_13 {
182 + background-position: 0 -562px;
183 +}
184 +#placesList .item .marker_14 {
185 + background-position: 0 -608px;
186 +}
187 +#placesList .item .marker_15 {
188 + background-position: 0 -654px;
189 +}
190 +#pagination {
191 + margin: 10px auto;
192 + text-align: center;
193 +}
194 +#pagination a {
195 + display: inline-block;
196 + margin-right: 10px;
197 +}
198 +#pagination .on {
199 + font-weight: bold;
200 + cursor: default;
201 + color: #777;
202 +}
203 +
204 +.wraps {
205 + position: absolute;
206 + left: 0;
207 + bottom: 40px;
208 + width: 288px;
209 + height: 132px;
210 + margin-left: -144px;
211 + text-align: left;
212 + overflow: hidden;
213 + font-size: 12px;
214 + font-family: "Malgun Gothic", dotum, "돋움", sans-serif;
215 + line-height: 1.5;
216 +}
217 +.wraps * {
218 + padding: 0;
219 + margin: 0;
220 +}
221 +.wraps .infos {
222 + width: 286px;
223 + height: 120px;
224 + border-radius: 5px;
225 + border-bottom: 2px solid #ccc;
226 + border-right: 1px solid #ccc;
227 + overflow: hidden;
228 + background: #fff;
229 +}
230 +.wraps .infos:nth-child(1) {
231 + border: 0;
232 + box-shadow: 0px 1px 2px #888;
233 +}
234 +.infos .title {
235 + padding: 5px 0 0 10px;
236 + height: 30px;
237 + background: #eee;
238 + border-bottom: 1px solid #ddd;
239 + font-size: 18px;
240 + font-weight: bold;
241 +}
242 +.infos .close {
243 + position: absolute;
244 + top: 10px;
245 + right: 10px;
246 + color: #888;
247 + width: 17px;
248 + height: 17px;
249 + background: url("http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png");
250 +}
251 +.infos .close:hover {
252 + cursor: pointer;
253 +}
254 +.infos .body {
255 + position: relative;
256 + overflow: hidden;
257 +}
258 +.infos .desc {
259 + position: relative;
260 + margin: 13px 0 0 90px;
261 + height: 75px;
262 +}
263 +.desc .ellipsis {
264 + overflow: hidden;
265 + text-overflow: ellipsis;
266 + white-space: nowrap;
267 +}
268 +.desc .jibun {
269 + font-size: 11px;
270 + color: #888;
271 + margin-top: -2px;
272 +}
273 +.infos .img {
274 + position: absolute;
275 + top: 6px;
276 + left: 5px;
277 + width: 73px;
278 + height: 71px;
279 + border: 1px solid #ddd;
280 + color: #888;
281 + overflow: hidden;
282 +}
283 +.infos:after {
284 + content: "";
285 + position: absolute;
286 + margin-left: -12px;
287 + left: 50%;
288 + bottom: 0;
289 + width: 22px;
290 + height: 12px;
291 + background: url("http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png");
292 +}
293 +.infos .link {
294 + color: #5085bb;
295 +}
296 +
297 +#footer {
298 + position: absolute;
299 + bottom: 0;
300 + width: 100%;
301 + height: 100px;
302 + background: #ccc;
303 +}
304 +
305 +.left-box {
306 + float: left;
307 + width: 20%;
308 +}
309 +.left-box h5 {
310 + font-size: 1rem;
311 + font-style: italic;
312 + padding-left: 10px;
313 +}
314 +.right-box {
315 + float: right;
316 + width: 80%;
317 +}
318 +.right-box h5 {
319 + font-size: 1rem;
320 + font-style: italic;
321 + padding-left: 10px;
322 +}
323 +#middle {
324 + text-align: center;
325 +}
326 +.info-button {
327 + border-radius: 4px;
328 + background-color: #4641d9;
329 + width: 100px;
330 + color: white;
331 +}
This diff is collapsed. Click to expand it.