[#28] feat: 서버에서 미세먼지 데이터 받기

codesquad-member-2020 · Apr 3, 2020 · 3d7e3cb · 3d7e3cb
1 parent 56f084f
commit 3d7e3cb
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 13 deletions.
diff --git a/FE/js/common/util.js b/FE/js/common/util.js
@@ -0,0 +1,3 @@
+export const $ = document.querySelector.bind(document);
+
+export const $$ = document.querySelectorAll.bind(document);
diff --git a/FE/js/dust/dust.js b/FE/js/dust/dust.js
@@ -0,0 +1,34 @@
+import { TARGET } from "./dustUtil.js";
+
+export function getCurrentLocation() {
+    navigator.geolocation.getCurrentPosition((position) => {
+        getStationData(position.coords.latitude, position.coords.longitude);
+    });
+}
+
+async function getStationData(latitude, longitude) {
+    const options = {
+        method: 'GET'
+    };
+    const response = await fetch(`http://15.165.113.21:8080/location?coordinateWGS84=${longitude},${latitude}`, options);
+    const result = await response.json();
+    const stationName = result.responseMessage[0].stationName;
+    getDustData(stationName);
+}
+
+async function getDustData(stationName) {
+    const options = {
+        method: 'GET'
+    };
+    const response = await fetch(`http://15.165.113.21:8080/dust-status?stationName=${stationName}`, options);
+    const result = await response.json();
+    render(stationName, result.responseMessage);
+}
+
+function render(stationName, dustData) {
+    renderStation(stationName);
+}
+
+function renderStation(stationName) {
+    TARGET.location.innerText = stationName;
+}
diff --git a/FE/js/dust/dustUtil.js b/FE/js/dust/dustUtil.js
@@ -0,0 +1,5 @@
+import { $ } from "../common/util.js";
+
+export const TARGET = {
+    location: $('.dust-location')
+}
diff --git a/FE/js/main.js b/FE/js/main.js
@@ -0,0 +1,5 @@
+import { getCurrentLocation } from "./dust/dust.js";
+
+window.addEventListener('DOMContentLoaded', () => {
+    getCurrentLocation();
+});
diff --git a/FE/style/dust.css b/FE/style/dust.css
@@ -0,0 +1,67 @@
+@charset 'utf-8';
+
+body, html {
+    width: 100%;
+    height: 100%;
+}
+
+body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul {
+    margin: 0;
+    padding: 0;
+}
+
+body, button, input, select, table, textarea {
+    font-family: Dotum, "돋움", Helvetica, sans-serif;
+    font-size: 12px;
+    -webkit-text-size-adjust: none;
+}
+
+button, input, select, textarea {
+    border: 0;
+    border-radius: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+button {
+    cursor: pointer;
+    background-color: transparent;
+}
+
+a {
+    text-decoration: none;
+}
+
+html {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+html::-webkit-scrollbar {
+    display: none;
+}
+
+/* Phone Device */
+@media all and (min-width:375px) {
+
+    body {
+        text-align: center;
+        max-width: 100%;
+    }
+
+    .dust-nav {
+        width: 100%;
+        height: 45px;
+        display: flex;
+    }
+
+    .dust-nav-box {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 1rem;
+    }
+
+}
diff --git a/FE/view/index.html b/FE/view/index.html
@@ -5,23 +5,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dust</title>
+    <link rel="stylesheet" href="../style/dust.css">
 </head>
 
 <body>
     <div class="wrap">
         <div class="dust-nav">
-            <ul>
-                <li>
-                    <div class="dust-nav-box">
-                        <span>미세먼지</span>
-                    </div>
-                </li>
-                <li>
-                    <div class="dust-nav-box">
-                        <span>예보</span>
-                    </div>
-                </li>
-            </ul>
+            <div class="dust-nav-box">미세먼지</div>
+            <div class="dust-nav-box">예보</div>
         </div>
         <div class="dust-container">
             <div class="dust-app">
@@ -40,7 +31,7 @@ <h1>미세먼지 앱</h1>
                         </div>
                     </div>
                     <div class="dust-station">
-                        <span class="dust-gps"></span>
+                        <span class="dust-location"></span>
                         <span> 측정소 기준</span>
                     </div>
                 </div>
@@ -58,6 +49,7 @@ <h1>미세먼지 예보</h1>
             </div>
         </div>
     </div>
+    <script type="module" src="../js/main.js"></script>
 </body>
 
 </html>