CHORE: 부트스트랩 CDN으로 변경

김대철
Commit b5cb78d89c576d53143ee398580c9133d73068d1 b5cb78d8 1 parent e5a3d2b9
Showing 4 changed files with 344 additions and 100 deletions
views/index.ejs
views/login.ejs
views/map.ejs
views/review.ejs
--- a/views/index.ejs
View file @b5cb78d
+++ b/views/index.ejs
View file @b5cb78d
 <!DOCTYPE html>
 <html>
-<head>
+  <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <script src="https://apis.google.com/js/platform.js" async defer></script>
-    <meta name="google-signin-client_id" content="94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com">
+    <meta
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      name="google-signin-client_id"
+      content="94679084723-s5f0686p2porp9mkakrp1p89a48n24nj.apps.googleusercontent.com"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>first</title>
-    <link rel="stylesheet" href="stylesheets/bootstrap.css">
+    <link
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+      integrity="undefined"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap"
+      rel="stylesheet"
+    />
     <style>
-        img{
+      img {
         max-width: 100%;
         height: 100% !important;
       }
-        h1{font-family: 'Noto Sans KR', sans-serif;}
+      h1 {
-        h4{font-family: 'Noto Sans KR', sans-serif;}
+        font-family: "Noto Sans KR", sans-serif;
-        h2{font-family: 'Noto Sans KR', sans-serif;}
+      }
-        h3{font-family: 'Noto Sans KR', sans-serif;}
+      h4 {
-        h5{font-family: 'Noto Sans KR', sans-serif;}
+        font-family: "Noto Sans KR", sans-serif;
-        .center{
+      }
+      h2 {
+        font-family: "Noto Sans KR", sans-serif;
+      }
+      h3 {
+        font-family: "Noto Sans KR", sans-serif;
+      }
+      h5 {
+        font-family: "Noto Sans KR", sans-serif;
+      }
+      .center {
         background-color: #848484;
         margin-right: 20%;
         margin-left: 20%;
         margin-top: 5%;
-            text-align:center;
+        text-align: center;
       }
-        .g-signin2{
+      .g-signin2 {
         width: 100%;
       }
-        .g-signin2 > div{
+      .g-signin2 > div {
         margin: 0 auto;
       }
     </style>
+  </head>
-</head>
+  <body>
-
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-<body>
+      <a class="navbar-brand" href="/"
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        ><img src="images/home.png" width="40" height="40" alt="" />
-    <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">
+      <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>
+        <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>
+            <a
+              class="nav-link"
+              style="color: #ffffff"
+              href="/"
+              onclick="signOut();"
+              >Logout<span class="sr-only">(current)</span></a
+            >
           </li>
-
         </ul>
       </div>
-</nav>
+    </nav>
-<br><br>
+    <br /><br />
-    <div class ="center" >
+    <div class="center">
-        <br>
+      <br />
-        <h5 class="display-5 font-weight-bold" style="color: white">Cafe Recommend</h5>
+      <h5 class="display-5 font-weight-bold" style="color: white">
-        <br><br>
+        Cafe Recommend
-        <div class="g-signin2" data-onsuccess="onSignIn" -theme="light" data-width="300" data-height="50" data-longtitle="true">button</div>
+      </h5>
-        <br><br>
+      <br /><br />
+      <div
+        class="g-signin2"
+        data-onsuccess="onSignIn"
+        -theme="light"
+        data-width="300"
+        data-height="50"
+        data-longtitle="true"
+      >
+        button
       </div>
-</body>
+      <br /><br />
-
+    </div>
+  </body>
-<script>
+  <script>
     function onSignIn(googleUser) {
       var id_token = googleUser.getAuthResponse().id_token;
       var xhr = new XMLHttpRequest();
-        xhr.open('POST', '/index');
+      xhr.open("POST", "/index");
-        xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.setRequestHeader("Content-Type", "application/json");
-        xhr.onload = function() {
+      xhr.onload = function () {
-            console.log('Signed in as: ' + xhr.responseText);
+        console.log("Signed in as: " + xhr.responseText);
-            if(xhr.responseText == 'success'){
+        if (xhr.responseText == "success") {
           signOut();
-                location.assign('/login');
+          location.assign("/login");
         }
       };
-        xhr.send(JSON.stringify({token : id_token}));
+      xhr.send(JSON.stringify({ token: id_token }));
     }
-</script>
+  </script>
-<script src="javascripts/bootstrap.js"></script>
+  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
-<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+  <script
+    src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+    integrity="undefined"
+    crossorigin="anonymous"
+  ></script>
 </html>
-
--- a/views/login.ejs
View file @b5cb78d
+++ b/views/login.ejs
View file @b5cb78d
@@ -6,7 +6,12 @@
     <title>logined</title>
-    <link rel="stylesheet" href="stylesheets/bootstrap.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+      integrity="undefined"
+      crossorigin="anonymous"
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap"
       rel="stylesheet"
@@ -43,14 +48,28 @@
       <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">
+      <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>
+            <a
+              class="nav-link"
+              style="color: #ffffff"
+              href="/"
+              onclick="signOut();"
+              >Logout<span class="sr-only">(current)</span></a
+            >
           </li>
         </ul>
       </div>
@@ -64,115 +83,280 @@
       <div class="row">
         <div class="col-2"></div>
         <div class="col-8">
-          <hr class="my-2" style="background-color: white">
+          <hr class="my-2" 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">
+              <input
-              <small id="idHelp" class="form-text text-muted">중복이 허용되지 않습니다.</small>
+                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" >
+            <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">
+              <input
+                class="form-control form-control-lg"
+                type="number"
+                name="age"
+                placeholder="Age"
+              />
             </div>
-            <hr class="my-3" style="background-color: white" >
+            <hr class="my-3" style="background-color: white" />
             <label for="gender" class="form-label">성별을 입력하세요</label>
-            <select class="form-select form-select-lg" id="gender" name="gender" required>
+            <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>
-            <hr class="my-3" style="background-color: white">
+            <hr class="my-3" style="background-color: white" />
             <hr class="my-2" />
-            <hr class="my-2" style="background-color: white">
+            <hr class="my-2" style="background-color: white" />
-            <div class="pricing-header px-3 py-1 pt-md-3 pb-md-1 mx-auto text-center">
+            <div
-              <h5 class="display- ">PREFERENCE</h5>
+              class="
-                <hr class="my-1" style="background-color: white">
+                pricing-header
-              <p>카페를 선택할 떄 중요하게 여기는 요소들의 순위를 매겨주세요.</p>
+                px-3
+                py-1
+                pt-md-3
+                pb-md-1
+                mx-auto
+                text-center
+              "
+            >
+              <h5 class="display-">PREFERENCE</h5>
+              <hr class="my-1" style="background-color: white" />
+              <p>
+                카페를 선택할 떄 중요하게 여기는 요소들의 순위를 매겨주세요.
+              </p>
               <p>[ 순위가 중복되면 안됩니다. ex) 가격 1순위, 친절 1순위(X) ]</p>
             </div>
             <div class="text-center">
-            <label for="price_form" class="form-label font-weight-bold" style="margin-right: 15px">가격</label>
+              <label
+                for="price_form"
+                class="form-label font-weight-bold"
+                style="margin-right: 15px"
+                >가격</label
+              >
               <div class="form-check form-check-inline" id="price_form">
-              <input class="form-check-input" type="radio" name="price" id="price1" value="1" checked>
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="price"
+                  id="price1"
+                  value="1"
+                  checked
+                />
                 <label class="form-check-label" for="price1">1순위</label>
               </div>
               <div class="form-check form-check-inline">
-              <input class="form-check-input" type="radio" name="price" id="price2" value="2">
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="price"
+                  id="price2"
+                  value="2"
+                />
                 <label class="form-check-label" for="price2">2순위</label>
               </div>
               <div class="form-check form-check-inline">
-              <input class="form-check-input" type="radio" name="price" id="price3" value="3" >
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="price"
+                  id="price3"
+                  value="3"
+                />
                 <label class="form-check-label" for="price3">3순위</label>
               </div>
               <div class="form-check form-check-inline">
-              <input class="form-check-input" type="radio" name="price" id="price4" value="4" >
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="price"
+                  id="price4"
+                  value="4"
+                />
                 <label class="form-check-label" for="price4">4순위</label>
               </div>
               <hr class="my-1" style="background-color: white" />
-            <label for="kindness_form" class="form-label font-weight-bold" style="margin-right: 5px">친절도</label>
+              <label
+                for="kindness_form"
+                class="form-label font-weight-bold"
+                style="margin-right: 5px"
+                >친절도</label
+              >
               <div class="form-check form-check-inline" id="kindness_form">
-              <input class="form-check-input" type="radio" name="kindness" id="kindness1" value="1">
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="kindness"
+                  id="kindness1"
+                  value="1"
+                />
                 <label class="form-check-label" for="kindness">1순위</label>
               </div>
               <div class="form-check form-check-inline">
-              <input class="form-check-input" type="radio" name="kindness" id="kindness2" value="2" checked>
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="kindness"
+                  id="kindness2"
+                  value="2"
+                  checked
+                />
                 <label class="form-check-label" for="kindness2">2순위</label>
               </div>
               <div class="form-check form-check-inline">
-              <input class="form-check-input" type="radio" name="kindness" id="kindness3" value="3" >
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="kindness"
+                  id="kindness3"
+                  value="3"
+                />
                 <label class="form-check-label" for="kindness3">3순위</label>
               </div>
               <div class="form-check form-check-inline">
-              <input class="form-check-input" type="radio" name="kindness" id="kindness4" value="4" >
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="kindness"
+                  id="kindness4"
+                  value="4"
+                />
                 <label class="form-check-label" for="kindness4">4순위</label>
               </div>
               <hr class="my-1" style="background-color: white" />
-            <label for="noise_form" class="form-label font-weight-bold" style="margin-right: 15px">소음</label>
+              <label
+                for="noise_form"
+                class="form-label font-weight-bold"
+                style="margin-right: 15px"
+                >소음</label
+              >
               <div class="form-check form-check-inline" id="noise_form">
-              <input class="form-check-input" type="radio" name="noise" id="noise1" value="1">
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="noise"
+                  id="noise1"
+                  value="1"
+                />
                 <label class="form-check-label" for="noise">1순위</label>
               </div>
               <div class="form-check form-check-inline">
-              <input class="form-check-input" type="radio" name="noise" id="noise2" value="2">
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="noise"
+                  id="noise2"
+                  value="2"
+                />
                 <label class="form-check-label" for="kindness2">2순위</label>
               </div>
               <div class="form-check form-check-inline">
-              <input class="form-check-input" type="radio" name="noise" id="noise3" value="3" checked>
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="noise"
+                  id="noise3"
+                  value="3"
+                  checked
+                />
                 <label class="form-check-label" for="noise3">3순위</label>
               </div>
               <div class="form-check form-check-inline">
-              <input class="form-check-input" type="radio" name="noise" id="noise4" value="4" >
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="noise"
+                  id="noise4"
+                  value="4"
+                />
                 <label class="form-check-label" for="noise4">4순위</label>
               </div>
               <hr class="my-1" style="background-color: white" />
-            <label for="accessibility_form" class="form-label font-weight-bold" style="margin-right: 5px">접근성</label>
+              <label
+                for="accessibility_form"
+                class="form-label font-weight-bold"
+                style="margin-right: 5px"
+                >접근성</label
+              >
               <div class="form-check form-check-inline" id="accessibility_form">
-              <input class="form-check-input" type="radio" name="accessibility" id="accessibility1" value="1">
+                <input
-              <label class="form-check-label" for="accessibility">1순위</label>
+                  class="form-check-input"
+                  type="radio"
+                  name="accessibility"
+                  id="accessibility1"
+                  value="1"
+                />
+                <label class="form-check-label" for="accessibility"
+                  >1순위</label
+                >
               </div>
               <div class="form-check form-check-inline">
-              <input class="form-check-input" type="radio" name="accessibility" id="accessibility2" value="2">
+                <input
-              <label class="form-check-label" for="accessibility2">2순위</label>
+                  class="form-check-input"
+                  type="radio"
+                  name="accessibility"
+                  id="accessibility2"
+                  value="2"
+                />
+                <label class="form-check-label" for="accessibility2"
+                  >2순위</label
+                >
               </div>
               <div class="form-check form-check-inline">
-              <input class="form-check-input" type="radio" name="accessibility" id="accessibility3" value="3" >
+                <input
-              <label class="form-check-label" for="accessibility3">3순위</label>
+                  class="form-check-input"
+                  type="radio"
+                  name="accessibility"
+                  id="accessibility3"
+                  value="3"
+                />
+                <label class="form-check-label" for="accessibility3"
+                  >3순위</label
+                >
               </div>
               <div class="form-check form-check-inline">
-              <input class="form-check-input" type="radio" name="accessibility" id="accessibility4" value="4" checked>
+                <input
-              <label class="form-check-label" for="accessibility4">4순위</label>
+                  class="form-check-input"
+                  type="radio"
+                  name="accessibility"
+                  id="accessibility4"
+                  value="4"
+                  checked
+                />
+                <label class="form-check-label" for="accessibility4"
+                  >4순위</label
+                >
               </div>
             </div>
             <hr class="my-3" style="background-color: white" />
-            <button type="submit" style="float: right" class="btn btn-primary btn-lg" id="please">Submit</button>
+            <button
+              type="submit"
+              style="float: right"
+              class="btn btn-primary btn-lg"
+              id="please"
+            >
+              Submit
+            </button>
           </form>
         </div>
         <div class="col-2"></div>
@@ -186,18 +370,14 @@
           "다른 NICKNAME을 입력하여 주세요"
       );
     </script>
-    <%}%>
+    <%}%> <%if (message=='need data'){%>
-
-    <%if (message=='need data'){%>
     <script type="text/javascript">
       alert(
         "입력하시지 않은 정보가 있습니다." +
           "모든 정보를 입력해주시길 바라겠습니다."
       );
     </script>
-    <%}%>
+    <%}%> <%if (message=='wrong preference'){%>
-
-    <%if (message=='wrong preference'){%>
     <script type="text/javascript">
       alert(
         "중복된 선호도 순위가 있습니다." +
@@ -214,6 +394,10 @@
       });
     }
   </script>
-  <script src="javascripts/bootstrap.js"></script>
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+  <script
+    src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+    integrity="undefined"
+    crossorigin="anonymous"
+  ></script>
 </html>
--- a/views/map.ejs
View file @b5cb78d
+++ b/views/map.ejs
View file @b5cb78d
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="stylesheets/bootstrap.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+      integrity="undefined"
+      crossorigin="anonymous"
+    />
     <title>Cafe Map</title>
     <style>
       .navbar {
@@ -378,8 +383,12 @@
         placeOverlay.setMap(map);
       }
     </script>
-    <script src="javascripts/bootstrap.js"></script>
     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
+      integrity="undefined"
+      crossorigin="anonymous"
+    ></script>
     <!-- 모달 바디 -->
     <div
--- a/views/review.ejs
View file @b5cb78d
+++ b/views/review.ejs
View file @b5cb78d
@@ -5,7 +5,12 @@
     <title>Enroll Review</title>
-    <link rel="stylesheet" href="/stylesheets/bootstrap.css">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+      integrity="undefined"
+      crossorigin="anonymous"
+    />
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
     <style>
@@ -123,6 +128,6 @@
     </div>
 </section>
 </body>
-<script src="/javascripts/bootstrap.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>
 </html>
\ No newline at end of file