권주희 / 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 @@
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"bootstrap": "^3.4.1",
"daum-map-api": "^1.0.2",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-kakao-maps": "0.0.13",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
},
......
......@@ -10,6 +10,16 @@
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=61abec34d0855ba1d434ea222263d4a5&libraries=services,clusterer,drawing"
></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
......@@ -24,7 +34,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>HowsTheWeather</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
......@@ -15,13 +15,14 @@
.App-header {
background-color: #282c34;
min-height: 100vh;
min-height: 13vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
font-weight: bold;
}
.App-link {
......
.Home {
text-align: center;
}
.Home-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.Home-logo {
animation: Home-logo-spin infinite 20s linear;
}
}
.Home-header {
background-color: #282c34;
min-height: 13vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
font-weight: bold;
}
.Home-link {
color: #61dafb;
}
@keyframes Home-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.strong {
font-size: calc(10px + 1vmin);
font-weight: bold;
}
.map_wrap,
.map_wrap * {
margin: 0;
padding: 0;
font-family: "Malgun Gothic", dotum, "돋움", sans-serif;
font-size: 12px;
}
.map_wrap a,
.map_wrap a:hover,
.map_wrap a:active {
color: #000;
text-decoration: none;
}
.map_wrap {
position: relative;
width: 100%;
height: 500px;
}
#menu_wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 250px;
margin: 10px 0 30px 10px;
padding: 5px;
overflow-y: auto;
background: rgba(53, 53, 53, 0.8);
z-index: 1;
font-size: 12px;
border-radius: 10px;
}
.bg_white {
background: #fff;
}
x #menu_wrap hr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #5f5f5f;
margin: 3px 0;
}
#menu_wrap .option {
text-align: center;
color: #ffffff;
font-weight: bold;
}
#menu_wrap .option p {
margin: 10px 0;
}
#menu_wrap .option button {
margin-left: 5px;
}
#placesList li {
list-style: none;
}
#placesList .item {
position: relative;
border-bottom: 1px solid #888;
overflow: hidden;
cursor: pointer;
min-height: 65px;
}
#placesList .item span {
display: block;
margin-top: 4px;
}
#placesList .item h5,
#placesList .item .info {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#placesList .item .info {
padding: 10px 0 10px 55px;
color: #ffffff;
}
#placesList .info .gray {
color: #eaeaea;
}
#placesList .info .jibun {
padding-left: 26px;
background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png)
no-repeat;
}
#placesList .info .tel {
color: #ffbb00;
font-weight: bold;
}
#placesList .item .markerbg {
float: left;
position: absolute;
width: 36px;
height: 37px;
margin: 10px 0 0 10px;
background: url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png)
no-repeat;
}
#placesList .item .marker_1 {
background-position: 0 -10px;
}
#placesList .item .marker_2 {
background-position: 0 -56px;
}
#placesList .item .marker_3 {
background-position: 0 -102px;
}
#placesList .item .marker_4 {
background-position: 0 -148px;
}
#placesList .item .marker_5 {
background-position: 0 -194px;
}
#placesList .item .marker_6 {
background-position: 0 -240px;
}
#placesList .item .marker_7 {
background-position: 0 -286px;
}
#placesList .item .marker_8 {
background-position: 0 -332px;
}
#placesList .item .marker_9 {
background-position: 0 -378px;
}
#placesList .item .marker_10 {
background-position: 0 -423px;
}
#placesList .item .marker_11 {
background-position: 0 -470px;
}
#placesList .item .marker_12 {
background-position: 0 -516px;
}
#placesList .item .marker_13 {
background-position: 0 -562px;
}
#placesList .item .marker_14 {
background-position: 0 -608px;
}
#placesList .item .marker_15 {
background-position: 0 -654px;
}
#pagination {
margin: 10px auto;
text-align: center;
}
#pagination a {
display: inline-block;
margin-right: 10px;
}
#pagination .on {
font-weight: bold;
cursor: default;
color: #777;
}
.wraps {
position: absolute;
left: 0;
bottom: 40px;
width: 288px;
height: 132px;
margin-left: -144px;
text-align: left;
overflow: hidden;
font-size: 12px;
font-family: "Malgun Gothic", dotum, "돋움", sans-serif;
line-height: 1.5;
}
.wraps * {
padding: 0;
margin: 0;
}
.wraps .infos {
width: 286px;
height: 120px;
border-radius: 5px;
border-bottom: 2px solid #ccc;
border-right: 1px solid #ccc;
overflow: hidden;
background: #fff;
}
.wraps .infos:nth-child(1) {
border: 0;
box-shadow: 0px 1px 2px #888;
}
.infos .title {
padding: 5px 0 0 10px;
height: 30px;
background: #eee;
border-bottom: 1px solid #ddd;
font-size: 18px;
font-weight: bold;
}
.infos .close {
position: absolute;
top: 10px;
right: 10px;
color: #888;
width: 17px;
height: 17px;
background: url("http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png");
}
.infos .close:hover {
cursor: pointer;
}
.infos .body {
position: relative;
overflow: hidden;
}
.infos .desc {
position: relative;
margin: 13px 0 0 90px;
height: 75px;
}
.desc .ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desc .jibun {
font-size: 11px;
color: #888;
margin-top: -2px;
}
.infos .img {
position: absolute;
top: 6px;
left: 5px;
width: 73px;
height: 71px;
border: 1px solid #ddd;
color: #888;
overflow: hidden;
}
.infos:after {
content: "";
position: absolute;
margin-left: -12px;
left: 50%;
bottom: 0;
width: 22px;
height: 12px;
background: url("http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png");
}
.infos .link {
color: #5085bb;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #ccc;
}
.left-box {
float: left;
width: 20%;
}
.left-box h5 {
font-size: 1rem;
font-style: italic;
padding-left: 10px;
}
.right-box {
float: right;
width: 80%;
}
.right-box h5 {
font-size: 1rem;
font-style: italic;
padding-left: 10px;
}
#middle {
text-align: center;
}
.info-button {
border-radius: 4px;
background-color: #4641d9;
width: 100px;
color: white;
}
This diff is collapsed. Click to expand it.