FEAT : 부트스트랩을 통한 디자인 로직 추가

-

+/*!
+ * Bootstrap Reboot v5.0.0-alpha1 (https://getbootstrap.com/)
+ * Copyright 2011-2020 The Bootstrap Authors
+ * Copyright 2011-2020 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+[tabindex="-1"]:focus:not(:focus-visible) {
+  outline: 0 !important;
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  background-color: currentColor;
+  border: 0;
+  opacity: 0.25;
+}
+
+hr:not([size]) {
+  height: 1px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+a {
+  color: #0d6efd;
+  text-decoration: underline;
+}
+
+a:hover {
+  color: #024dbc;
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+  -ms-overflow-style: scrollbar;
+}
+
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: #d63384;
+  word-wrap: break-word;
+}
+
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 0.875em;
+  color: #fff;
+  background-color: #212529;
+  border-radius: 0.2rem;
+}
+
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+  font-weight: 700;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #6c757d;
+  text-align: left;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role="button"] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+
+[list]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button:not(:disabled),
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled),
+[type="submit"]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+  white-space: normal;
+}
+
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+
+legend + * {
+  clear: left;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.css.map */
\ No newline at end of file

 var express = require("express");
 var express = require("express");
 var router = express.Router();
 var router = express.Router();
 
 
-//var request = require("request");
+var request = require("request");
 var bodyParser = require("body-parser");
 var bodyParser = require("body-parser");
 
 
 var { OAuth2Client } = require("google-auth-library");
 var { OAuth2Client } = require("google-auth-library");
-//var querystring = require("querystring");
+var querystring = require("querystring");
 
 
 var CLIENT_ID =
 var CLIENT_ID =
   "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com";
   "94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com";

-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621433406098}
\ No newline at end of file

+{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621704357295,"user":{"name":"‍최정민[학생](소프트웨어융합대학 컴퓨터공학과)","email":"cjm2021401@khu.ac.kr","nickname":"cjm","age":"24","gender":"male"}}
\ No newline at end of file

-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621187236305}
\ No newline at end of file

-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621534089028,"user":{"name":"‍최정민[학생](소프트웨어융합대학 컴퓨터공학과)","email":"cjm2021401@khu.ac.kr"}}
\ No newline at end of file

-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621408098038}
\ No newline at end of file

-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621338937349}
\ No newline at end of file

-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621186188104}
\ No newline at end of file

-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621592914035,"user":{"name":"‍최정민[학생](소프트웨어융합대학 컴퓨터공학과)","email":"cjm2021401@khu.ac.kr","nickname":"MickeyMouse","age":"19","gender":"male"}}
\ No newline at end of file

-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621191395860,"user":{"name":"‍최정민[학생](소프트웨어융합대학 컴퓨터공학과)","email":"cjm2021401@khu.ac.kr","nickname":"Mayf","age":"25","gender":"male"},"gender":"male"}
\ No newline at end of file

-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621338737470}
\ No newline at end of file

-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621216159014}
\ No newline at end of file

-{"cookie":{"originalMaxAge":null,"expires":null,"httpOnly":true,"path":"/"},"__lastAccess":1621337475210}
\ No newline at end of file

@@ -6,13 +6,63 @@
     <meta name="google-signin-client_id" content="94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com">
     <meta name="google-signin-client_id" content="94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>first</title>
     <title>first</title>
-    <link rel='stylesheet' href='/stylesheets/style.css' />
+    <link rel="stylesheet" href="stylesheets/bootstrap.css">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
+
+    <style>
+        img{
+            max-width: 100%;
+            height: 100% !important;
+        }
+        h1{font-family: 'Noto Sans KR', sans-serif;}
+        h4{font-family: 'Noto Sans KR', sans-serif;}
+        h2{font-family: 'Noto Sans KR', sans-serif;}
+        h3{font-family: 'Noto Sans KR', sans-serif;}
+        h5{font-family: 'Noto Sans KR', sans-serif;}
+        .middle{
+            display: inline-block;
+            vertical-align: middle;
+        }
+    </style>
+
+
 </head>
 </head>
 
 
+
+
+
 <body>
 <body>
-<h1>Login</h1>
-<div class="g-signin2" data-onsuccess="onSignIn"></div>
-<a href="#" onclick="signOut();">Sign out</a>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <a class="navbar-brand" href="/"><img src="images/home.png" width="40" height="40" alt="">
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <a class="navbar-brand" href="/" ><strong>Home</strong></a>
+        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+
+            <li class="nav-item active">
+                <a class="nav-link" style="color:#ffffff" href="/" onclick="signOut();">Logout<span class="sr-only">(current)</span></a>
+            </li>
+
+        </ul>
+    </div>
+</nav>
+<div class="pricing-header px-3 py-1 pt-md-3 pb-md-1 mx-auto text-center">
+    <h3 class="display-6 font-weight-bold" >Login</h3>
+</div>
+<section id="carousel-3" class="text-center">
+    <div class="row">
+        <div class="col-4"></div>
+
+        <div class="col-4"><div class="g-signin2" class="text-center" data-onsuccess="onSignIn"></div></div>
+
+
+    <a href="#" onclick="signOut();">Sign out</a>
+            </div>
+    </div>
+</section>
 </body>
 </body>
 
 
 
 
@@ -40,4 +90,5 @@
         });
         });
     }
     }
 </script>
 </script>
+<script src="javascripts/bootstrap.js"></script>
 </html>
 </html>

@@ -5,23 +5,84 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 
     <title>logined</title>
     <title>logined</title>
+
+    <link rel="stylesheet" href="stylesheets/bootstrap.css">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
+
+    <style>
+        img{
+            max-width: 100%;
+            height: 100% !important;
+        }
+        h1{font-family: 'Noto Sans KR', sans-serif;}
+        h4{font-family: 'Noto Sans KR', sans-serif;}
+        h2{font-family: 'Noto Sans KR', sans-serif;}
+        h3{font-family: 'Noto Sans KR', sans-serif;}
+        h5{font-family: 'Noto Sans KR', sans-serif;}
+        .middle{
+            display: inline-block;
+            vertical-align: middle;
+        }
+    </style>
 </head>
 </head>
 <body>
 <body>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <a class="navbar-brand" href="/"><img src="images/home.png" width="40" height="40" alt="">
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <a class="navbar-brand" href="/" ><strong>Home</strong></a>
+        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+
+            <li class="nav-item active">
+                <a class="nav-link" style="color:#ffffff" href="/" onclick="signOut();">Logout<span class="sr-only">(current)</span></a>
+            </li>
+
+        </ul>
+    </div>
+</nav>
+<div class="pricing-header px-3 py-1 pt-md-3 pb-md-1 mx-auto text-center">
+    <h3 class="display-6 font-weight-bold" >Signup</h3>
+</div>
+
+
+<hr class="my-2" >
+<section id="carousel-1">
+    <div class="row">
+        <div class="col-2"></div>
+        <div class="col-8">
+            <hr class="my-4" style="background-color: white">
+            <form method="post">
+                <div class="form-group ">
+                    <label for="id_input">닉네임을 입력하세요</label>
+                    <input type="text" class="form-control form-control-lg" name="nickname" aria-describedby="idHelp" placeholder="ID">
+                    <small id="idHelp" class="form-text text-muted">중복이 허용되지 않습니다.</small>
+                </div>
+                <hr class="my-3" style="background-color: white">
+                <div class="form-group">
+                    <label for="age_input">나이를 입력하세요</label>
+                    <input class="form-control form-control-lg" type="number" name="age"placeholder="Age">
+                </div>
+                <hr class="my-3" style="background-color: white">
 
 
-<h1>Hi <%= user.name %></h1>
-<form method="post">
-    NickName:<br>
-    <input type="text" name="nickname" value="MickeyMouse"><br>
-    Age:<br>
-    <input type="text" name="age" value="19"><br><br>
+                <label for="gender" class="form-label ">성별을 입력하세요</label>
+                <select class="form-select form-select-lg" id="gender"  name="gender" required>
+                    <option selected disabled value="">Choose...</option>
+                    <option value="male">Male</option>
+                    <option value="female">Female</option>
+                </select>
 
 
-    <input type="radio" id="male" name="gender" value="male">
-    <label for="male">Male</label><br>
-    <input type="radio" id="female" name="gender" value="female">
-    <label for="female">Female</label><br>
+                <hr class="my-4" style="background-color: white">
+                <button type="submit" style="float:right" class="btn btn-primary btn-lg" id="please">Submit</button>
+
+            </form>
+        </div>
+        <div class="col-2"></div>
+    </div>
+</section>
 
 
-    <input type="submit" value="Submit">
-</form>
 <a href="/logout" onclick="signOut();">Sign Out</a>
 <a href="/logout" onclick="signOut();">Sign Out</a>
 <%if (message=='same nickname'){%>
 <%if (message=='same nickname'){%>
     <script type="text/javascript">
     <script type="text/javascript">
@@ -40,5 +101,12 @@
             console.log('User signed out.');
             console.log('User signed out.');
         });
         });
     }
     }
+    function signOut() {
+        var auth2 = gapi.auth2.getAuthInstance();
+        auth2.signOut().then(function () {
+            console.log('User signed out.');
+        });
+    }
 </script>
 </script>
+<script src="javascripts/bootstrap.js"></script>
 </html>
 </html>
\ No newline at end of file

 <!DOCTYPE html>
 <!DOCTYPE html>
 <html>
 <html>
-  <head>
+<head>
+  <link rel="stylesheet" href="stylesheets/bootstrap.css">
   <title>Cafe Map</title>
   <title>Cafe Map</title>
   <style>
   <style>
+    .navbar{
+      background-color: #1d2124 !important;
+    }
+    .btn-primary{
+      color : white !important;
+    }
+    p{font-family: 'Noto Sans KR', sans-serif;}
+    h1{font-family: 'Noto Sans KR', sans-serif;}
+    h4{font-family: 'Noto Sans KR', sans-serif;}
+    h2{font-family: 'Noto Sans KR', sans-serif;}
+    h3{font-family: 'Noto Sans KR', sans-serif;}
+    h5{font-family: 'Noto Sans KR', sans-serif;}
     .placeinfo_wrap {
     .placeinfo_wrap {
       position: absolute;
       position: absolute;
       bottom: 28px;
       bottom: 28px;
@@ -70,43 +83,54 @@
       margin-top: 0;
       margin-top: 0;
     }
     }
   </style>
   </style>
-  </head>
-  <body>
-    <div id="map" style="width: 100%; height: 575px"></div>
-
-    <script
+</head>
+<body>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <a class="navbar-brand" href="/"><img src="images/home.png" width="40" height="40" alt="">
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <a class="navbar-brand" href="/" ><strong>Home</strong></a>
+    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+
+      <li class="nav-item active">
+        <a class="nav-link" style="color:#ffffff" href="/" onclick="signOut();">Logout<span class="sr-only">(current)</span></a>
+      </li>
+
+    </ul>
+  </div>
+</nav>
+<div class="pricing-header px-3 py-1 pt-md-3 pb-md-1 mx-auto text-center">
+  <h3 class="display-6 font-weight-bold" >Map</h3>
+</div>
+
+<div id="map" style="width: 100%; height: 575px"></div>
+<script
         type="text/javascript"
         type="text/javascript"
         src="//dapi.kakao.com/v2/maps/sdk.js?appkey=68cbccbcd6f0fef0a213e62ad37393ee&libraries=services"
         src="//dapi.kakao.com/v2/maps/sdk.js?appkey=68cbccbcd6f0fef0a213e62ad37393ee&libraries=services"
-    ></script>
-    <script>
+></script>
+<script>
   var lat = "";
   var lat = "";
   var lon = "";
   var lon = "";
-
   var placeOverlay = new kakao.maps.CustomOverlay({ zIndex: 1 });
   var placeOverlay = new kakao.maps.CustomOverlay({ zIndex: 1 });
   var contentNode = document.createElement("div");
   var contentNode = document.createElement("div");
   var markers = [];
   var markers = [];
   var currCategory = "CE7"; // 카테고리코드: 카페
   var currCategory = "CE7"; // 카테고리코드: 카페
   var order = 1;
   var order = 1;
-
   var mapContainer = document.getElementById("map"),
   var mapContainer = document.getElementById("map"),
           mapOption = {
           mapOption = {
             center: new kakao.maps.LatLng(36.2477502, 127.078164),
             center: new kakao.maps.LatLng(36.2477502, 127.078164),
             level: 3,
             level: 3,
           };
           };
-
   var map = new kakao.maps.Map(mapContainer, mapOption);
   var map = new kakao.maps.Map(mapContainer, mapOption);
-
   var ps = new kakao.maps.services.Places(map);
   var ps = new kakao.maps.services.Places(map);
-
   kakao.maps.event.addListener(map, "idle", searchPlaces);
   kakao.maps.event.addListener(map, "idle", searchPlaces);
-
   contentNode.className = "placeinfo_wrap";
   contentNode.className = "placeinfo_wrap";
-
   addEventHandle(contentNode, "mousedown", kakao.maps.event.preventMap);
   addEventHandle(contentNode, "mousedown", kakao.maps.event.preventMap);
   addEventHandle(contentNode, "touchstart", kakao.maps.event.preventMap);
   addEventHandle(contentNode, "touchstart", kakao.maps.event.preventMap);
-
   placeOverlay.setContent(contentNode);
   placeOverlay.setContent(contentNode);
-
   function addEventHandle(target, type, callback) {
   function addEventHandle(target, type, callback) {
     if (target.addEventListener) {
     if (target.addEventListener) {
       target.addEventListener(type, callback);
       target.addEventListener(type, callback);
@@ -114,51 +138,40 @@
       target.attachEvent("on" + type, callback);
       target.attachEvent("on" + type, callback);
     }
     }
   }
   }
-
   placeOverlay.setContent(contentNode);
   placeOverlay.setContent(contentNode);
   if (navigator.geolocation) {
   if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function (position) {
     navigator.geolocation.getCurrentPosition(function (position) {
       lat = position.coords.latitude;
       lat = position.coords.latitude;
       lon = position.coords.longitude;
       lon = position.coords.longitude;
-
       var locPosition = new kakao.maps.LatLng(lat, lon);
       var locPosition = new kakao.maps.LatLng(lat, lon);
-
       displayCurrentPosition(locPosition);
       displayCurrentPosition(locPosition);
     });
     });
   } else {
   } else {
     var locPosition = new kakao.maps.LatLng(36.2477502, 127.078164);
     var locPosition = new kakao.maps.LatLng(36.2477502, 127.078164);
-
     displayCurrentPosition(locPosition);
     displayCurrentPosition(locPosition);
   }
   }
-
   function displayCurrentPosition(locPosition) {
   function displayCurrentPosition(locPosition) {
     map.setCenter(locPosition);
     map.setCenter(locPosition);
   }
   }
-
   kakao.maps.event.addListener(map, "idle", searchPlaces);
   kakao.maps.event.addListener(map, "idle", searchPlaces);
-
   function searchPlaces() {
   function searchPlaces() {
     if (!currCategory) {
     if (!currCategory) {
       return;
       return;
     }
     }
     placeOverlay.setMap(null);
     placeOverlay.setMap(null);
-
     ps.categorySearch(currCategory, placesSearchCB, { usemapBounds: true });
     ps.categorySearch(currCategory, placesSearchCB, { usemapBounds: true });
   }
   }
-
   function placesSearchCB(data, status, pagination) {
   function placesSearchCB(data, status, pagination) {
     if (status === kakao.maps.services.Status.OK) {
     if (status === kakao.maps.services.Status.OK) {
       displayPlaces(data);
       displayPlaces(data);
     }
     }
   }
   }
-
   function displayPlaces(places) {
   function displayPlaces(places) {
     for (var i = 0; i < places.length; i++) {
     for (var i = 0; i < places.length; i++) {
       var marker = addMarker(
       var marker = addMarker(
               new kakao.maps.LatLng(places[i].y, places[i].x),
               new kakao.maps.LatLng(places[i].y, places[i].x),
               order
               order
       );
       );
-
       (function (marker, place) {
       (function (marker, place) {
         kakao.maps.event.addListener(marker, "click", function () {
         kakao.maps.event.addListener(marker, "click", function () {
           displayPlaceInfo(place);
           displayPlaceInfo(place);
@@ -166,7 +179,6 @@
       })(marker, places[i]);
       })(marker, places[i]);
     }
     }
   }
   }
-
   function addMarker(position, order) {
   function addMarker(position, order) {
     var imageSrc =
     var imageSrc =
             "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png";
             "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_category.png";
@@ -181,18 +193,14 @@
             imageSize,
             imageSize,
             imgOptions
             imgOptions
     );
     );
-
     var marker = new kakao.maps.Marker({
     var marker = new kakao.maps.Marker({
       position: position,
       position: position,
       image: markerImage,
       image: markerImage,
     });
     });
-
     marker.setMap(map);
     marker.setMap(map);
     markers.push(marker);
     markers.push(marker);
-
     return marker;
     return marker;
   }
   }
-
   function displayPlaceInfo(place) {
   function displayPlaceInfo(place) {
     var content =
     var content =
             '<div class="placeinfo">' +
             '<div class="placeinfo">' +
@@ -203,7 +211,6 @@
             '">' +
             '">' +
             place.place_name +
             place.place_name +
             "</a>";
             "</a>";
-
     if (place.road_address_name) {
     if (place.road_address_name) {
       content +=
       content +=
               '    <span title="' +
               '    <span title="' +
@@ -224,18 +231,18 @@
               place.address_name +
               place.address_name +
               "</span>";
               "</span>";
     }
     }
-
     content +=
     content +=
             '    <span class="tel">' +
             '    <span class="tel">' +
             place.phone +
             place.phone +
             "</span>" +
             "</span>" +
             "</div>" +
             "</div>" +
             '<div class="after"></div>';
             '<div class="after"></div>';
-
     contentNode.innerHTML = content;
     contentNode.innerHTML = content;
     placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x));
     placeOverlay.setPosition(new kakao.maps.LatLng(place.y, place.x));
     placeOverlay.setMap(map);
     placeOverlay.setMap(map);
   }
   }
-    </script>
-  </body>
+</script>
+<script src="javascripts/bootstrap.js"></script>
+<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+</body>
 </html>
 </html>