맹주환 / take_an_umbrella

Go to a project
Toggle navigation Toggle navigation pinning
맹주환
2a687ccc 1 parent 2f1ba075

Add function client/location.js to get user's location and send this to server

Expand all
Inline Side-by-side
Showing 22 changed files with 323 additions and 86 deletions
......@@ -12,6 +12,8 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.24.0",
"google-map-react": "^2.1.10",
"google-maps-react": "^2.0.6",
"http-proxy-middleware": "^2.0.1",
"postcss-safe-parser": "^6.0.0",
"react": "^17.0.2",
......@@ -1515,6 +1517,14 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@googlemaps/js-api-loader": {
"version": "1.12.11",
"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.12.11.tgz",
"integrity": "sha512-YdxC1uQhz8bgNlX7LgaDnF4VIaL/Q+72KzHKtDK/xlXkRmwpFuVCXLn22q/Lb5h4d4+NkFYD3cvtqxW6VpFp/w==",
"dependencies": {
"fast-deep-equal": "^3.1.3"
}
},
"node_modules/@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
......@@ -1830,6 +1840,11 @@
"node": ">= 10.14.2"
}
},
"node_modules/@mapbox/point-geometry": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
"integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
......@@ -9239,9 +9254,9 @@
}
},
"node_modules/follow-redirects": {
"version": "1.14.5",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
"integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==",
"version": "1.14.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
"integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
"funding": [
{
"type": "individual",
......@@ -9739,6 +9754,33 @@
"node": ">= 4"
}
},
"node_modules/google-map-react": {
"version": "2.1.10",
"resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-2.1.10.tgz",
"integrity": "sha512-cqW2EcygYqF26inp5liM/pAcCwOGXB9LW32oGwf931Iuq8tnasCpyEtq87G+RyQCKCo2P8/QyV+MGHuc7r9AEg==",
"dependencies": {
"@googlemaps/js-api-loader": "^1.7.0",
"@mapbox/point-geometry": "^0.1.0",
"eventemitter3": "^4.0.4",
"prop-types": "^15.7.2"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"react": "^16.0.0 || ^17.0.0",
"react-dom": "^16.0.0 || ^17.0.0"
}
},
"node_modules/google-maps-react": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz",
"integrity": "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ==",
"peerDependencies": {
"react": "~0.14.8 || ^15.0.0 || ^16.0.0",
"react-dom": "~0.14.8 || ^15.0.0 || ^16.0.0"
}
},
"node_modules/graceful-fs": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
......@@ -23160,6 +23202,14 @@
}
}
},
"@googlemaps/js-api-loader": {
"version": "1.12.11",
"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.12.11.tgz",
"integrity": "sha512-YdxC1uQhz8bgNlX7LgaDnF4VIaL/Q+72KzHKtDK/xlXkRmwpFuVCXLn22q/Lb5h4d4+NkFYD3cvtqxW6VpFp/w==",
"requires": {
"fast-deep-equal": "^3.1.3"
}
},
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
......@@ -23409,6 +23459,11 @@
"chalk": "^4.0.0"
}
},
"@mapbox/point-geometry": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
"integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
},
"@nodelib/fs.scandir": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
......@@ -28760,9 +28815,9 @@
}
},
"follow-redirects": {
"version": "1.14.5",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
"integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA=="
"version": "1.14.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
"integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
},
"for-in": {
"version": "1.0.2",
......@@ -29098,6 +29153,23 @@
}
}
},
"google-map-react": {
"version": "2.1.10",
"resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-2.1.10.tgz",
"integrity": "sha512-cqW2EcygYqF26inp5liM/pAcCwOGXB9LW32oGwf931Iuq8tnasCpyEtq87G+RyQCKCo2P8/QyV+MGHuc7r9AEg==",
"requires": {
"@googlemaps/js-api-loader": "^1.7.0",
"@mapbox/point-geometry": "^0.1.0",
"eventemitter3": "^4.0.4",
"prop-types": "^15.7.2"
}
},
"google-maps-react": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz",
"integrity": "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ==",
"requires": {}
},
"graceful-fs": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
......
......@@ -7,6 +7,8 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.24.0",
"google-map-react": "^2.1.10",
"google-maps-react": "^2.0.6",
"http-proxy-middleware": "^2.0.1",
"postcss-safe-parser": "^6.0.0",
"react": "^17.0.2",
......
......@@ -2,17 +2,6 @@
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
......
import axios from "axios";
import {useEffect} from "react";
import './App.css';
import { useEffect} from "react";
import axios from 'axios';
function App() {
console.log("ang");
const callApi = async () => {
axios.get("/test").then((res) => console.log(res.data.test));
};
useEffect(() => {
callApi();
},);
function App(){
return (<div>test</div>);
return <div>
<title>Take an Umbrella</title>
<h1> Take an Umbrella </h1>
<h3> 철학과 2017101598 맹주환 </h3>
<pre align="center">
반가워요!
Take an umbrella는 스마트 조명 제품 Philips hue API와 기상청 공공데이터 날씨 API로 구성되어 있어요.
Hue가 연결된 WI-FI로 접속하셔서 아래의 지도로 현재 위치를 조회하시면, 해당 지역 기상 예보를 받아와 조명을 통해 우산을 챙겨야 하는지 알려줘요!
</pre>
</div>;
}
export default App;
\ No newline at end of file
......
......@@ -3,10 +3,13 @@ import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import MapContainer from './map/index';
import Location from './map/location';
ReactDOM.render(
<React.StrictMode>
<App />
<Location />
</React.StrictMode>,
document.getElementById('root')
);
......
import React, { Component } from "react";
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
import './style.css';
const mapStyles = {
width: '600px',
height: '600px',
};
class Demo1 extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<div class="map">
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{
lat: '37.5905144',
lng: '127.0576477'
}}
>
<Marker
onClick={this.onMarkerClick}
/>
</Map>
</div>
);
}
}
export default GoogleApiWrapper({
apiKey: 'AIzaSyAguo3zH8vWZJbzXEqyp8D8UvnBh3zX8rQ'
})(Demo1);
\ No newline at end of file
import React, { Component } from "react";
import axios from 'axios';
class App extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
let data = {
lat : null,
lag : null
};
navigator.geolocation.getCurrentPosition(function(position) {
data = {
lat : position.coords.latitude,
lag : position.coords.longitude
};
axios.post('/locate', JSON.stringify(data), {
headers: {
"Content-Type": `application/json`,
},
}).then((res) => {
console.log("complete");
});
});
return (
<div>
</div>
);
}
}
export default App;
\ No newline at end of file
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
h1 { text-align: center; }
h2 { text-align: center; }
h3 { text-align: center; }
......
......@@ -2,10 +2,15 @@ const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
proxy.createProxyMiddleware('/', {
target: 'http://localhost:5000/',
proxy.createProxyMiddleware('/api', {
target: 'http://localhost:5000',
changeOrigin : true
})
);
app.use(
proxy.createProxyMiddleware('/locate', {
target: 'http://localhost:5000',
changeOrigin : true
})
);
};
\ No newline at end of file
......
class App extends React.Component {
state = {
players: [
{name: 'LDK', score: 0, id: 1},
{name: 'HONG', score: 0, id: 2},
{name: 'KIM', score: 0, id: 3},
{name: 'PARK', score: 0, id: 4},
]
};
handleRemovePlayer = (id) => {
this.setState(prevState => {
return {
players: prevState.players.filter(item => item.id !== id)
}
})
}
render() {
return (
<div className="container p-3">
<Header title="My scoreboard" totalPlayers={this.state.players.length} />
{/*Players List*/}
{ this.state.players.map(item =>
<Player key={item.id}
name={item.name} score={item.score}
removePlayer={this.handleRemovePlayer} id={item.id} />) }
</div>
);
}
}
\ No newline at end of file
......@@ -1231,6 +1231,13 @@
"minimatch" "^3.0.4"
"strip-json-comments" "^3.1.1"
"@googlemaps/js-api-loader@^1.7.0":
"integrity" "sha512-YdxC1uQhz8bgNlX7LgaDnF4VIaL/Q+72KzHKtDK/xlXkRmwpFuVCXLn22q/Lb5h4d4+NkFYD3cvtqxW6VpFp/w=="
"resolved" "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.12.11.tgz"
"version" "1.12.11"
dependencies:
"fast-deep-equal" "^3.1.3"
"@hapi/address@2.x.x":
"integrity" "sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ=="
"resolved" "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz"
......@@ -1461,6 +1468,11 @@
"@types/yargs" "^16.0.0"
"chalk" "^4.0.0"
"@mapbox/point-geometry@^0.1.0":
"integrity" "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
"resolved" "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz"
"version" "0.1.0"
"@nodelib/fs.scandir@2.1.4":
"integrity" "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA=="
"resolved" "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz"
......@@ -4869,7 +4881,7 @@
"resolved" "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz"
"version" "1.8.1"
"eventemitter3@^4.0.0":
"eventemitter3@^4.0.0", "eventemitter3@^4.0.4":
"integrity" "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
"resolved" "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
"version" "4.0.7"
......@@ -5052,7 +5064,7 @@
"resolved" "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz"
"version" "1.3.0"
"fast-deep-equal@^3.1.1":
"fast-deep-equal@^3.1.1", "fast-deep-equal@^3.1.3":
"integrity" "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
"resolved" "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
"version" "3.1.3"
......@@ -5234,9 +5246,9 @@
"readable-stream" "^2.3.6"
"follow-redirects@^1.0.0", "follow-redirects@^1.14.4":
"integrity" "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA=="
"resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz"
"version" "1.14.5"
"integrity" "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
"resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz"
"version" "1.14.6"
"for-in@^1.0.2":
"integrity" "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
......@@ -5513,6 +5525,21 @@
"merge2" "^1.3.0"
"slash" "^3.0.0"
"google-map-react@^2.1.10":
"integrity" "sha512-cqW2EcygYqF26inp5liM/pAcCwOGXB9LW32oGwf931Iuq8tnasCpyEtq87G+RyQCKCo2P8/QyV+MGHuc7r9AEg=="
"resolved" "https://registry.npmjs.org/google-map-react/-/google-map-react-2.1.10.tgz"
"version" "2.1.10"
dependencies:
"@googlemaps/js-api-loader" "^1.7.0"
"@mapbox/point-geometry" "^0.1.0"
"eventemitter3" "^4.0.4"
"prop-types" "^15.7.2"
"google-maps-react@^2.0.6":
"integrity" "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ=="
"resolved" "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz"
"version" "2.0.6"
"graceful-fs@^4.1.11", "graceful-fs@^4.1.15", "graceful-fs@^4.1.2", "graceful-fs@^4.1.6", "graceful-fs@^4.2.0", "graceful-fs@^4.2.4":
"integrity" "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
"resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz"
......@@ -9413,7 +9440,7 @@
"strip-ansi" "6.0.0"
"text-table" "0.2.0"
"react-dom@*", "react-dom@^17.0.2":
"react-dom@*", "react-dom@^16.0.0 || ^17.0.0", "react-dom@^17.0.2", "react-dom@~0.14.8 || ^15.0.0 || ^16.0.0":
"integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
"resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
"version" "17.0.2"
......@@ -9508,7 +9535,7 @@
optionalDependencies:
"fsevents" "^2.1.3"
"react@*", "react@^17.0.2", "react@>= 16", "react@17.0.2":
"react@*", "react@^16.0.0 || ^17.0.0", "react@^17.0.2", "react@>= 16", "react@~0.14.8 || ^15.0.0 || ^16.0.0", "react@17.0.2":
"integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
"version" "17.0.2"
......
<!DOCTYPE html>
<html>
<head>
<title>Take an Umbrella</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1 style="font-family:Nanum Gothic;"> Take an Umbrella </h1>
<h3 style="font-family:Nanum Gothic;"> 철학과 2017101598 맹주환 </h3>
<pre align="center" style="font-family:Nanum Gothic;" font size="20">
반가워요!
Take an umbrella는 스마트 조명 제품 Philips hue API와 기상청 공공데이터 날씨 API로 구성되어 있어요.
Hue가 연결된 WI-FI로 접속하셔서 아래의 지도로 현재 위치를 조회하시면, 해당 지역 기상 예보를 받아와 조명을 통해 우산을 챙겨야 하는지 알려줘요!
</pre>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<h1 style="font-family:Nanum Gothic;"> 당신의 현재 위치 </h1>
<div align="center">현재 위도: <span id="lat"></span></div>
<div align="center">현재 경도: <span id="lng"></span></div>
</body>
<script src="map.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAguo3zH8vWZJbzXEqyp8D8UvnBh3zX8rQ&callback=initMap&v=weekly" async> </script>
</html>
\ No newline at end of file
This diff is collapsed. Click to expand it.
......@@ -11,7 +11,9 @@
"express": "^4.17.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.34",
"node-hue-api": "^5.0.0-beta.8",
"nodemon": "^2.0.15",
"request": "^2.88.2"
"request": "^2.88.2",
"require": "^2.4.20"
}
}
......
const express = require("express");
const router = express.Router();
router.get("/", function (req, res, next) {
res.json([
{ id: 1, username: "VictorOladipo" },
{ id: 2, username: "RussellWstbrook" },
]);
});
module.exports = router;
\ No newline at end of file
[
{
"GoodsCode": "1625717680",
"OriginalPrice": "29,800",
"SalePrice": "26,230",
"GoodsName": "달콤나시(OBWC5266)(갤러리아)",
"DiscountRate": "11",
"Delivery": {
"DeliveryInfo": "조건부무료",
"DeliveryText": "배송비 3,000원",
"DeliveryType": "GRAY",
"ShowDeliveryInfo": true
}
},
{
"GoodsCode": "1421117680",
"OriginalPrice": "9,800",
"SalePrice": "7,700",
"GoodsName": "나시(현대)"
}
]
\ No newline at end of file
const express = require('express');
const router = express.Router();
let location = new Array();
location = {
lat : null,
lng : null
}
router.post("/", (req,res) => {
location.lat = req.body.lat;
location.lng = req.body.lag;
res.send({test : "hi"});
});
module.exports =router;
\ No newline at end of file
const express = require('express');
const router = express.Router();
router.get("/", (req,res) => {
res.send([
{
"GoodsCode": "1625717680",
"OriginalPrice": "29,800",
"SalePrice": "26,230",
"GoodsName": "달콤나시(OBWC5266)(갤러리아)",
"DiscountRate": "11",
"Delivery": {
"DeliveryInfo": "조건부무료",
"DeliveryText": "배송비 3,000원",
"DeliveryType": "GRAY",
"ShowDeliveryInfo": true
}
},
{
"GoodsCode": "1421117680",
"OriginalPrice": "9,800",
"SalePrice": "7,700",
"GoodsName": "나시(현대)"
}
]);
});
module.exports =router;
\ No newline at end of file
const express = require('express');
const app = express();
const port = 5000;
const test = require('../router/test');
const weather = require('../router/Weather');
const user = require('../router/user');
const test = require('./router/test');
const weather = require('./router/Weather');
const location = require('./router/location');
const bodyParser = require('body-parser');
const cors = require('cors');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(cors());
app.use("/test", test);
app.use("/api", test);
app.use("/weather", weather);
app.use("/user", user);
app.use(bodyParser.json());
app.use("/locate", location);
......