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">
+
+                <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>
 
 
-<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>
+                <hr class="my-4" style="background-color: white">
+                <button type="submit" style="float:right" class="btn btn-primary btn-lg" id="please">Submit</button>
 
 
-    <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>
+            </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