diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6704566
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..80e50ee
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,6 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+   
+}
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..ba71547
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 kw-ic-web
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8f1a7a2
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+다영 git
+
+
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..28b5fda
--- /dev/null
+++ b/app.js
@@ -0,0 +1,44 @@
+var createError = require("http-errors");
+var express = require("express");
+var path = require("path");
+var cookieParser = require("cookie-parser");
+var logger = require("morgan");
+
+var indexRouter = require("./routes/index");
+var usersRouter = require("./routes/users");
+var customersRouter = require("./routes/api/customers");
+
+var app = express();
+
+// view engine setup
+app.set("views", path.join(__dirname, "views"));
+app.set("view engine", "jade");
+
+app.use(logger("dev"));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, "public")));
+
+app.use("/", indexRouter);
+app.use("/users", usersRouter);
+app.use("/api/customers", customersRouter);
+
+
+// catch 404 and forward to error handler
+app.use(function (req, res, next) {
+  next(createError(404));
+});
+
+// error handler
+app.use(function (err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get("env") === "development" ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.send("something wrong!");
+});
+
+module.exports = app;
diff --git a/bin/www b/bin/www
new file mode 100644
index 0000000..d288ce0
--- /dev/null
+++ b/bin/www
@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('express-skeleton-html:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3031');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}
diff --git a/js/header.js b/js/header.js
new file mode 100644
index 0000000..7f9d3b1
--- /dev/null
+++ b/js/header.js
@@ -0,0 +1,52 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const header = document.getElementById("header");
+    const buttonContainer = document.querySelector(".button-container");
+
+    // Simulating data (replace this with actual data)
+    const user = { name: "hello" };
+    const isLogin = true;
+
+    // Function to navigate to a specific URL
+    const navigateTo = (url) => {
+        window.location.href = url;
+    };
+
+    // Function to handle logout
+    const logout = () => {
+        alert("You have been logged out.");
+        navigateTo('/');
+    };
+
+    // Dynamically add buttons based on login status
+    if (isLogin && user) {
+        const nicknameContainer = document.createElement("div");
+        nicknameContainer.className = "nickname";
+        
+        const usernameContainer = document.createElement("div");
+        usernameContainer.className = "username";
+        usernameContainer.textContent = user.name;
+
+        const createPostButton = createButton("새글작성", () => navigateTo('/write'));
+        const logoutButton = createButton("Log out", logout);
+
+        buttonContainer.appendChild(nicknameContainer);
+        nicknameContainer.appendChild(usernameContainer);
+        buttonContainer.appendChild(createPostButton);
+        buttonContainer.appendChild(logoutButton);
+    } else {
+        const loginButton = createButton("Log in", () => navigateTo('/login'));
+        const joinButton = createButton("Join the membership", () => navigateTo('/signup'));
+
+        buttonContainer.appendChild(loginButton);
+        buttonContainer.appendChild(joinButton);
+    }
+});
+
+// Function to create a button with a specific text and click handler
+function createButton(text, clickHandler) {
+    const button = document.createElement("button");
+    button.className = "button";
+    button.textContent = text;
+    button.addEventListener("click", clickHandler);
+    return button;
+}
\ No newline at end of file
diff --git a/js/login.js b/js/login.js
new file mode 100644
index 0000000..aab4468
--- /dev/null
+++ b/js/login.js
@@ -0,0 +1,59 @@
+const loginForm = document.getElementById("login-form");
+const loginButton = document.getElementById("login-form-submit");
+const loginErrorMsg = document.getElementById("login-error-msg");
+
+loginButton.addEventListener("click", (event) => {
+    event.preventDefault();
+    const username = loginForm.username.value;
+    const password = loginForm.password.value;
+
+    if (username === "user" && password === "web_dev") {
+        alert("You have successfully logged in.");
+        location.reload();
+    } else {
+        loginErrorMsg.style.opacity = 1;
+    }
+});
+
+/*
+const { Session } = require("session/lib/session");
+
+console.log("js/login.js");
+
+async function submit() {
+    var userid = document.getElementById('userid').value;
+    var userpwd = document.getElementById('userpwd').value;
+
+    // 비번 encoding
+    var encodedPwd = window.btoa(userpwd);
+    var Msg = document.querySelector('#Msg');
+
+    var sql = {
+        params :{
+        userid : userid,
+        userpwd : encodedPwd,} 
+    };
+
+    try {
+        const result = await axios.get('/serverclient/logincheck', sql)
+
+        console.log(result.data);
+        console.log("토큰값::", result.data.token);
+        sessionStorage.setItem("jwtToken", result.data.token);
+        console.log(result.data.data)
+
+        // 로그인 그리스
+        if (result.data.data === 1) {
+
+            console.log(`userid is ${userid}`);
+            location.href = `/home?${userid}`;
+            
+        } else {
+            Msg.innerHTML = result.data;
+        }
+    } catch (error) {
+        console.error("Login error:", error);
+        Msg.innerHTML = "Login failed. Please try again.";
+    }
+}*/
+
diff --git a/js/signup.js b/js/signup.js
new file mode 100644
index 0000000..b42fc24
--- /dev/null
+++ b/js/signup.js
@@ -0,0 +1,90 @@
+// 가입부분 체크
+
+function signUpCheck(){
+
+   let email = document.getElementById("email").value
+   let name = document.getElementById("name").value
+   let password = document.getElementById("password").value
+   let passwordCheck = document.getElementById("passwordCheck").value
+   //let area = document.getElementById("area").value
+   //let gender_man = document.getElementById("gender_man").checked
+   let gender_woman = document.getElementById("gender_woman").checked
+   let check = true;
+ 
+   // 이메일확인
+   if(email.includes('@')){
+     let emailId = email.split('@')[0]
+     let emailServer = email.split('@')[1]
+     if(emailId === "" || emailServer === ""){
+       document.getElementById("emailError").innerHTML="이메일이 올바르지 않습니다."
+       check = false
+     }
+     else{
+       document.getElementById("emailError").innerHTML=""
+     }
+    }
+    else{
+     document.getElementById("emailError").innerHTML="이메일이 올바르지 않습니다."
+     check = false
+   }
+
+   // 이름확인
+   if(name===""){
+      document.getElementById("nameError").innerHTML="이름이 올바르지 않습니다."
+      check = false
+   }
+   else{
+   document.getElementById("nameError").innerHTML=""
+   }
+ 
+ 
+   
+ 
+ 
+   // 비밀번호 확인
+   if(password !== passwordCheck){
+     document.getElementById("passwordError").innerHTML=""
+     document.getElementById("passwordCheckError").innerHTML="비밀번호가 동일하지 않습니다."
+     check = false
+   }else{
+     document.getElementById("passwordError").innerHTML=""
+     document.getElementById("passwordCheckError").innerHTML=""
+   }
+ 
+   if(password===""){
+     document.getElementById("passwordError").innerHTML="비밀번호를 입력해주세요."
+     check = false
+   }else{
+     //document.getElementById("passwordError").innerHTML=""
+   }
+   if(passwordCheck===""){
+     document.getElementById("passwordCheckError").innerHTML="비밀번호를 다시 입력해주세요."
+     check = false
+   }else{
+     //document.getElementById("passwordCheckError").innerHTML=""
+   }
+   // 성별체크확인
+  if(!gender_man && !gender_woman){
+   document.getElementById("genderError").innerHTML="성별을 선택해주세요."
+   check = false
+ }else{
+   document.getElementById("genderError").innerHTML=""
+ }
+ 
+ if(check){
+   document.getElementById("emailError").innerHTML=""
+   document.getElementById("nameError").innerHTML=""
+   document.getElementById("passwordError").innerHTML=""
+   document.getElementById("passwordCheckError").innerHTML=""
+   //document.getElementById("areaError").innerHTML=""
+   document.getElementById("genderError").innerHTML=""
+   
+   //비동기 처리이벤트
+   setTimeout(function() {
+     alert("가입이 완료되었습니다.")
+ },0);
+ }
+}
+
+ 
+ 
\ No newline at end of file
diff --git a/logo/logo3.jpg b/logo/logo3.jpg
new file mode 100644
index 0000000..c2e4129
Binary files /dev/null and b/logo/logo3.jpg differ
diff --git a/mysql/index.js b/mysql/index.js
new file mode 100644
index 0000000..675de2e
--- /dev/null
+++ b/mysql/index.js
@@ -0,0 +1,32 @@
+//const mysql = require("mysql");
+//const sql = require("sql.js");
+
+require("dotenv").config({
+  path: ".env",
+});
+
+const pool = mysql.createPool({
+  connectionLimit: process.env.MYSQL_LIMIT,
+  host: process.env.MYSQL_HOST,
+  port: process.env.MYSQL_PORT,
+  user: process.env.MYSQL_USERNAME,
+  password: process.env.MYSQL_PASSWORD,
+  database: process.env.MYSQL_DB,
+});
+
+const query = async (alias, values) => {
+  return new Promise((resolve, reject) =>
+    pool.query(sql[alias], values, (error, results) => {
+      if (error) {
+        console.log(error);
+        reject({
+          error,
+        });
+      } else resolve(results);
+    })
+  );
+};
+
+module.exports = {
+  query,
+};
diff --git a/mysql/sql.js b/mysql/sql.js
new file mode 100644
index 0000000..864f9ad
--- /dev/null
+++ b/mysql/sql.js
@@ -0,0 +1,9 @@
+module.exports = {
+  customerList: `select * from customers`,
+  customerInsert: `insert into customers set ?`,
+  customerUpdate: `update customers set ? where id=?`,
+  customerDelete: `delete from customers where id=?`,
+
+
+  
+};
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..cc89868
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1964 @@
+{
+  "name": "express-skeleton-html",
+  "version": "0.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "express-skeleton-html",
+      "version": "0.0.0",
+      "dependencies": {
+        "axios": "^1.6.2",
+        "cookie-parser": "~1.4.4",
+        "debug": "~2.6.9",
+        "dotenv": "^16.0.3",
+        "express": "~4.16.1",
+        "http-errors": "~1.6.3",
+        "install": "^0.13.0",
+        "jade": "~1.11.0",
+        "morgan": "~1.9.1",
+        "mysql": "^2.18.1"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz",
+      "integrity": "sha512-pXK8ez/pVjqFdAgBkF1YPVRacuLQ9EXBKaKWaeh58WNfMkCmZhOZzu+NtKSPD5PHmCCHheQ5cD29qM1K4QTxIg==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-globals": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-1.0.9.tgz",
+      "integrity": "sha512-j3/4pkfih8W4NK22gxVSXcEonTpAHOHh0hu5BoZrKcOsW/4oBPxTi4Yk3SAj+FhC1f3+bRTkXdm4019gw1vg9g==",
+      "dependencies": {
+        "acorn": "^2.1.0"
+      }
+    },
+    "node_modules/align-text": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
+      "integrity": "sha512-GrTZLRpmp6wIC2ztrWW9MjjTgSKccffgFagbNDOX95/dcjEcYZibYTeaOntySQLcdw1ztBoFkviiUvTMbb9MYg==",
+      "dependencies": {
+        "kind-of": "^3.0.2",
+        "longest": "^1.0.1",
+        "repeat-string": "^1.5.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==",
+      "engines": {
+        "node": ">=0.4.2"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+    },
+    "node_modules/asap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-1.0.0.tgz",
+      "integrity": "sha512-Ej9qjcXY+8Tuy1cNqiwNMwFRXOy9UwgTeMA8LxreodygIPV48lx8PU1ecFxb5ZeU1DpMKxiq6vGLTxcitWZPbA=="
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "dependencies": {
+        "safe-buffer": "5.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/bignumber.js": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.0.tgz",
+      "integrity": "sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.18.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
+      "integrity": "sha512-YQyoqQG3sO8iCmf8+hyVpgHHOv0/hCEFiS4zTGUwTA1HjAFX66wRcNQrVCeJq9pgESMRvUAOvSil5MJlmccuKQ==",
+      "dependencies": {
+        "bytes": "3.0.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "~1.6.3",
+        "iconv-lite": "0.4.23",
+        "on-finished": "~2.3.0",
+        "qs": "6.5.2",
+        "raw-body": "2.3.3",
+        "type-is": "~1.6.16"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+      "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/center-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
+      "integrity": "sha512-Baz3aNe2gd2LP2qk5U+sDk/m4oSuwSDcBfayTCTBoWpfIGO5XFxPmjILQII4NGiZjD6DoDI6kf7gKaxkf7s3VQ==",
+      "dependencies": {
+        "align-text": "^0.1.3",
+        "lazy-cache": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/character-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-1.2.1.tgz",
+      "integrity": "sha512-6OEBVBlf/y8LaAphnbAnt743O3zMhlBer+FO5D40H6wqAdU9B1TvuApkejgLW0cvv0tEZNLktv1AnRI+C87ueQ=="
+    },
+    "node_modules/clean-css": {
+      "version": "3.4.28",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.28.tgz",
+      "integrity": "sha512-aTWyttSdI2mYi07kWqHi24NUU9YlELFKGOAgFzZjDN1064DMAOy2FBuoyGmkKRlXkbpXd0EVHmiVkbKhKoirTw==",
+      "dependencies": {
+        "commander": "2.8.x",
+        "source-map": "0.4.x"
+      },
+      "bin": {
+        "cleancss": "bin/cleancss"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/clean-css/node_modules/commander": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
+      "integrity": "sha512-+pJLBFVk+9ZZdlAOB5WuIElVPPth47hILFkmGym57aq8kwxsowvByvB0DHs1vQAhyMZzdcpTtF0VDKGkSDR4ZQ==",
+      "dependencies": {
+        "graceful-readlink": ">= 1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6.x"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
+      "integrity": "sha512-GIOYRizG+TGoc7Wgc1LiOTLare95R3mzKgoln+Q/lE4ceiYH19gUpl0l0Ffq4lJDEf3FxujMe6IBfOCs7pfqNA==",
+      "dependencies": {
+        "center-align": "^0.1.1",
+        "right-align": "^0.1.1",
+        "wordwrap": "0.0.2"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
+      "integrity": "sha512-PhbTMT+ilDXZKqH8xbvuUY2ZEQNef0Q7DKxgoEKb4ccytsdvVVJmYqR0sGbi96nxU6oGrwEIQnclpK2NBZuQlg==",
+      "engines": {
+        "node": ">= 0.6.x"
+      }
+    },
+    "node_modules/constantinople": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.0.2.tgz",
+      "integrity": "sha512-UnEggAQrmhxuTxlb7n1OsTtagNXWUv2CRlOogZhWOU4jLK4EJEbF8UDSNxuGu+jVtWNtO2j51ab2H1wlBIzF/w==",
+      "deprecated": "Please update to at least constantinople 3.1.1",
+      "dependencies": {
+        "acorn": "^2.1.0"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-parser": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.6.tgz",
+      "integrity": "sha512-z3IzaNjdwUC2olLIB5/ITd0/setiaFMLYiZJle7xg5Fe9KWAceil7xszYfHHBtDFYLSgJduS2Ty0P1uJdPDJeA==",
+      "dependencies": {
+        "cookie": "0.4.1",
+        "cookie-signature": "1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
+    "node_modules/css": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/css/-/css-1.0.8.tgz",
+      "integrity": "sha512-qmTYWhHk910nQWnGqMAiWWPQlB6tESiWgNebQJmiozOAGcBAQ1+U/UzUOkhdrcshlkSRRiKWodwmVvO0OmnIGg==",
+      "dependencies": {
+        "css-parse": "1.0.4",
+        "css-stringify": "1.0.5"
+      }
+    },
+    "node_modules/css-parse": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.0.4.tgz",
+      "integrity": "sha512-pfstzKVRZiHprDXdsmtfH1HYUEw22lzjuHdnpe1hscwoQvgW2C5zDQIBE0RKoALEReTn9W1ECdY8uaT/kO4VfA=="
+    },
+    "node_modules/css-stringify": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/css-stringify/-/css-stringify-1.0.5.tgz",
+      "integrity": "sha512-aIThpcErhG5EyHorGqNlTh0TduNBqLrrXLO3x5rku3ZKBxuVfY+T7noyM2G2X/01iQANqJUb6d3+FLoa+N7Xwg=="
+    },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha512-3NdhDuEXnfun/z7x9GOElY49LoqVHoGScmOKwmxhsS8N5Y+Z8KyPPDnaSzqWgYt/ji4mqwfTS34Htrk0zPIXVg=="
+    },
+    "node_modules/dotenv": {
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.16.4",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
+      "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
+      "dependencies": {
+        "accepts": "~1.3.5",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.18.3",
+        "content-disposition": "0.5.2",
+        "content-type": "~1.0.4",
+        "cookie": "0.3.1",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.1.1",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.2",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.4",
+        "qs": "6.5.2",
+        "range-parser": "~1.2.0",
+        "safe-buffer": "5.1.2",
+        "send": "0.16.2",
+        "serve-static": "1.13.2",
+        "setprototypeof": "1.1.0",
+        "statuses": "~1.4.0",
+        "type-is": "~1.6.16",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/express/node_modules/cookie": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+      "integrity": "sha512-+IJOX0OqlHCszo2mBUq+SrEbCj6w7Kpffqx60zYbPTFaO4+yYgRjHwcZNpWvaTylDHaV7PPmBHzSecZiMhtPgw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
+      "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.2",
+        "statuses": "~1.4.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/graceful-readlink": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
+      "integrity": "sha512-8tLu60LgxF6XpdbK8OW3FA+IfTNBn1ZHGHKF4KQbEeSkajYw5PlYJcKluntgegDPTg8UkHjpet1T82vk6TQ68w=="
+    },
+    "node_modules/http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
+      "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
+    "node_modules/install": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/install/-/install-0.13.0.tgz",
+      "integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/jade": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/jade/-/jade-1.11.0.tgz",
+      "integrity": "sha512-J76sbGKeLtu7uwW97Ntzb1UvGnpKTDplYa9ROr2gNRhM+SxvlBSG0Ees3TQ8+7ya2UVkzMEeFxhRhEpN68s7Tg==",
+      "deprecated": "Jade has been renamed to pug, please install the latest version of pug instead of jade",
+      "dependencies": {
+        "character-parser": "1.2.1",
+        "clean-css": "^3.1.9",
+        "commander": "~2.6.0",
+        "constantinople": "~3.0.1",
+        "jstransformer": "0.0.2",
+        "mkdirp": "~0.5.0",
+        "transformers": "2.1.0",
+        "uglify-js": "^2.4.19",
+        "void-elements": "~2.0.1",
+        "with": "~4.0.0"
+      },
+      "bin": {
+        "jade": "bin/jade.js"
+      }
+    },
+    "node_modules/jstransformer": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-0.0.2.tgz",
+      "integrity": "sha512-b7tmf91j1ChMuYhwbPBnNgB62dmHuqiHpOdd6QLKzde8HydZqm+ud3qWreGWecSxPBFFNOf1Ozjx0xo2plFdHA==",
+      "dependencies": {
+        "is-promise": "^2.0.0",
+        "promise": "^6.0.1"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha512-RE2g0b5VGZsOCFOCgP7omTRYFqydmZkBwl5oNnQ1lDYC57uyO9KqNnNVxT7COSHTxrRCWVcAVOcbjk+tvh/rgQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/longest": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
+      "integrity": "sha512-k+yt5n3l48JU4k8ftnKG6V7u32wyH2NfKzeMto9F/QRE0amxy/LayxwlvjjkZEIzqR+19IrtFO8p5kB9QaYUFg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
+      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==",
+      "bin": {
+        "mime": "cli.js"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/morgan": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.1.tgz",
+      "integrity": "sha512-HQStPIV4y3afTiCYVxirakhlCfGkI161c76kKFca7Fk1JusM//Qeo1ej2XaMniiNeaZklMVrh3vTtIzpzwbpmA==",
+      "dependencies": {
+        "basic-auth": "~2.0.0",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "on-headers": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/mysql": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz",
+      "integrity": "sha512-Bca+gk2YWmqp2Uf6k5NFEurwY/0td0cpebAucFpY/3jhrwrVGuxU2uQFCHjU19SJfje0yQvi+rVWdq78hR5lig==",
+      "dependencies": {
+        "bignumber.js": "9.0.0",
+        "readable-stream": "2.3.7",
+        "safe-buffer": "5.1.2",
+        "sqlstring": "2.3.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/optimist": {
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz",
+      "integrity": "sha512-TCx0dXQzVtSCg2OgY/bO9hjM9cV4XYx09TVK+s3+FhkjT6LovsLe+pPMzpWf+6yXK/hUizs2gUoTw3jHM0VaTQ==",
+      "dependencies": {
+        "wordwrap": "~0.0.2"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "node_modules/promise": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-6.1.0.tgz",
+      "integrity": "sha512-O+uwGKreKNKkshzZv2P7N64lk6EP17iXBn0PbUnNQhk+Q0AHLstiTrjkx3v5YBd3cxUe7Sq6KyRhl/A0xUjk7Q==",
+      "dependencies": {
+        "asap": "~1.0.0"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
+    "node_modules/qs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
+      "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
+      "dependencies": {
+        "bytes": "3.0.0",
+        "http-errors": "1.6.3",
+        "iconv-lite": "0.4.23",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/right-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
+      "integrity": "sha512-yqINtL/G7vs2v+dFIZmFUDbnVyFUJFKd6gK22Kgo6R4jfJGFtisKyncWDDULgjfqf4ASQuIQyjJ7XZ+3aWpsAg==",
+      "dependencies": {
+        "align-text": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/send": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
+      "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.6.2",
+        "mime": "1.4.1",
+        "ms": "2.0.0",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.0",
+        "statuses": "~1.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
+      "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
+      "dependencies": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.2",
+        "send": "0.16.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+    },
+    "node_modules/source-map": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+      "integrity": "sha512-Y8nIfcb1s/7DcobUz1yOO1GSp7gyL+D9zLHDehT7iRESqGSxjJ448Sg7rvfgsRJCnKLdSl11uGf0s9X80cH0/A==",
+      "dependencies": {
+        "amdefine": ">=0.0.4"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/sqlstring": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.1.tgz",
+      "integrity": "sha512-ooAzh/7dxIG5+uDik1z/Rd1vli0+38izZhGzSa34FwR7IbelPWCCKSNIl8jlL/F7ERvy8CB2jNeM1E9i9mXMAQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
+      "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/transformers": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/transformers/-/transformers-2.1.0.tgz",
+      "integrity": "sha512-zJf5m2EIOngmBbDe2fhTPpCjzM2qkZVqrFJZc2jaln+KBeEaYKhS2QMOIkfVrNUyoOwqgbTwOHATzr3jZRQDyg==",
+      "deprecated": "Deprecated, use jstransformer",
+      "dependencies": {
+        "css": "~1.0.8",
+        "promise": "~2.0",
+        "uglify-js": "~2.2.5"
+      }
+    },
+    "node_modules/transformers/node_modules/is-promise": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-1.0.1.tgz",
+      "integrity": "sha512-mjWH5XxnhMA8cFnDchr6qRP9S/kLntKuEfIYku+PaN1CnS8v+OG9O/BKpRCVRJvpIkgAZm0Pf5Is3iSSOILlcg=="
+    },
+    "node_modules/transformers/node_modules/promise": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-2.0.0.tgz",
+      "integrity": "sha512-OgMc+sxI3zWF8D5BJGtA0z7/IsrDy1/0cPaDv6HPpqa2fSTo7AdON5U10NbZCUeF+zCAj3PtfPE50Hf02386aA==",
+      "dependencies": {
+        "is-promise": "~1"
+      }
+    },
+    "node_modules/transformers/node_modules/source-map": {
+      "version": "0.1.43",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
+      "integrity": "sha512-VtCvB9SIQhk3aF6h+N85EaqIaBFIAfZ9Cu+NJHHVvc8BbEcnvDcFw6sqQ2dQrT6SlOrZq3tIvyD9+EGq/lJryQ==",
+      "dependencies": {
+        "amdefine": ">=0.0.4"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/transformers/node_modules/uglify-js": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.2.5.tgz",
+      "integrity": "sha512-viLk+/8G0zm2aKt1JJAVcz5J/5ytdiNaIsKgrre3yvSUjwVG6ZUujGH7E2TiPigZUwLYCe7eaIUEP2Zka2VJPA==",
+      "dependencies": {
+        "optimist": "~0.3.5",
+        "source-map": "~0.1.7"
+      },
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/uglify-js": {
+      "version": "2.8.29",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
+      "integrity": "sha512-qLq/4y2pjcU3vhlhseXGGJ7VbFO4pBANu0kwl8VCa9KEI0V8VfZIx2Fy3w01iSTA/pGwKZSmu/+I4etLNDdt5w==",
+      "dependencies": {
+        "source-map": "~0.5.1",
+        "yargs": "~3.10.0"
+      },
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      },
+      "optionalDependencies": {
+        "uglify-to-browserify": "~1.0.0"
+      }
+    },
+    "node_modules/uglify-js/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/uglify-to-browserify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+      "integrity": "sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q==",
+      "optional": true
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/window-size": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+      "integrity": "sha512-1pTPQDKTdd61ozlKGNCjhNRd+KPmgLSGa3mZTHoOliaGcESD8G1PXhh7c1fgiPjVbNVfgy2Faw4BI8/m0cC8Mg==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/with": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/with/-/with-4.0.3.tgz",
+      "integrity": "sha512-mJZFpyEc1JTAdxhi/vhVeAM2S7vsltEKDiexDDo1HuAzlYKhcVUU6cwY8cHrFYdt82ZNkfKCeyhA3IYFegI0Kg==",
+      "dependencies": {
+        "acorn": "^1.0.1",
+        "acorn-globals": "^1.0.3"
+      }
+    },
+    "node_modules/with/node_modules/acorn": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz",
+      "integrity": "sha512-FsqWmApWGMGLKKNpHt12PMc5AK7BaZee0WRh04fCysmTzHe+rrKOa2MKjORhnzfpe4r0JnfdqHn02iDA9Dqj2A==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/wordwrap": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
+      "integrity": "sha512-xSBsCeh+g+dinoBv3GAOWM4LcVVO68wLXRanibtBSdUvkGWQRGeE9P7IwU9EmDDi4jA6L44lz15CGMwdw9N5+Q==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+      "integrity": "sha512-QFzUah88GAGy9lyDKGBqZdkYApt63rCXYBGYnEP4xDJPXNqXXnBDACnbrXnViV6jRSqAePwrATi2i8mfYm4L1A==",
+      "dependencies": {
+        "camelcase": "^1.0.2",
+        "cliui": "^2.1.0",
+        "decamelize": "^1.0.0",
+        "window-size": "0.1.0"
+      }
+    }
+  },
+  "dependencies": {
+    "accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "requires": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      }
+    },
+    "acorn": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz",
+      "integrity": "sha512-pXK8ez/pVjqFdAgBkF1YPVRacuLQ9EXBKaKWaeh58WNfMkCmZhOZzu+NtKSPD5PHmCCHheQ5cD29qM1K4QTxIg=="
+    },
+    "acorn-globals": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-1.0.9.tgz",
+      "integrity": "sha512-j3/4pkfih8W4NK22gxVSXcEonTpAHOHh0hu5BoZrKcOsW/4oBPxTi4Yk3SAj+FhC1f3+bRTkXdm4019gw1vg9g==",
+      "requires": {
+        "acorn": "^2.1.0"
+      }
+    },
+    "align-text": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
+      "integrity": "sha512-GrTZLRpmp6wIC2ztrWW9MjjTgSKccffgFagbNDOX95/dcjEcYZibYTeaOntySQLcdw1ztBoFkviiUvTMbb9MYg==",
+      "requires": {
+        "kind-of": "^3.0.2",
+        "longest": "^1.0.1",
+        "repeat-string": "^1.5.2"
+      }
+    },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg=="
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+    },
+    "asap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-1.0.0.tgz",
+      "integrity": "sha512-Ej9qjcXY+8Tuy1cNqiwNMwFRXOy9UwgTeMA8LxreodygIPV48lx8PU1ecFxb5ZeU1DpMKxiq6vGLTxcitWZPbA=="
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "bignumber.js": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.0.tgz",
+      "integrity": "sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A=="
+    },
+    "body-parser": {
+      "version": "1.18.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
+      "integrity": "sha512-YQyoqQG3sO8iCmf8+hyVpgHHOv0/hCEFiS4zTGUwTA1HjAFX66wRcNQrVCeJq9pgESMRvUAOvSil5MJlmccuKQ==",
+      "requires": {
+        "bytes": "3.0.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "~1.6.3",
+        "iconv-lite": "0.4.23",
+        "on-finished": "~2.3.0",
+        "qs": "6.5.2",
+        "raw-body": "2.3.3",
+        "type-is": "~1.6.16"
+      }
+    },
+    "bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw=="
+    },
+    "camelcase": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+      "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g=="
+    },
+    "center-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
+      "integrity": "sha512-Baz3aNe2gd2LP2qk5U+sDk/m4oSuwSDcBfayTCTBoWpfIGO5XFxPmjILQII4NGiZjD6DoDI6kf7gKaxkf7s3VQ==",
+      "requires": {
+        "align-text": "^0.1.3",
+        "lazy-cache": "^1.0.3"
+      }
+    },
+    "character-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-1.2.1.tgz",
+      "integrity": "sha512-6OEBVBlf/y8LaAphnbAnt743O3zMhlBer+FO5D40H6wqAdU9B1TvuApkejgLW0cvv0tEZNLktv1AnRI+C87ueQ=="
+    },
+    "clean-css": {
+      "version": "3.4.28",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.28.tgz",
+      "integrity": "sha512-aTWyttSdI2mYi07kWqHi24NUU9YlELFKGOAgFzZjDN1064DMAOy2FBuoyGmkKRlXkbpXd0EVHmiVkbKhKoirTw==",
+      "requires": {
+        "commander": "2.8.x",
+        "source-map": "0.4.x"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.8.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
+          "integrity": "sha512-+pJLBFVk+9ZZdlAOB5WuIElVPPth47hILFkmGym57aq8kwxsowvByvB0DHs1vQAhyMZzdcpTtF0VDKGkSDR4ZQ==",
+          "requires": {
+            "graceful-readlink": ">= 1.0.0"
+          }
+        }
+      }
+    },
+    "cliui": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
+      "integrity": "sha512-GIOYRizG+TGoc7Wgc1LiOTLare95R3mzKgoln+Q/lE4ceiYH19gUpl0l0Ffq4lJDEf3FxujMe6IBfOCs7pfqNA==",
+      "requires": {
+        "center-align": "^0.1.1",
+        "right-align": "^0.1.1",
+        "wordwrap": "0.0.2"
+      }
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "commander": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
+      "integrity": "sha512-PhbTMT+ilDXZKqH8xbvuUY2ZEQNef0Q7DKxgoEKb4ccytsdvVVJmYqR0sGbi96nxU6oGrwEIQnclpK2NBZuQlg=="
+    },
+    "constantinople": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.0.2.tgz",
+      "integrity": "sha512-UnEggAQrmhxuTxlb7n1OsTtagNXWUv2CRlOogZhWOU4jLK4EJEbF8UDSNxuGu+jVtWNtO2j51ab2H1wlBIzF/w==",
+      "requires": {
+        "acorn": "^2.1.0"
+      }
+    },
+    "content-disposition": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA=="
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
+    },
+    "cookie-parser": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.6.tgz",
+      "integrity": "sha512-z3IzaNjdwUC2olLIB5/ITd0/setiaFMLYiZJle7xg5Fe9KWAceil7xszYfHHBtDFYLSgJduS2Ty0P1uJdPDJeA==",
+      "requires": {
+        "cookie": "0.4.1",
+        "cookie-signature": "1.0.6"
+      }
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+    },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
+    "css": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/css/-/css-1.0.8.tgz",
+      "integrity": "sha512-qmTYWhHk910nQWnGqMAiWWPQlB6tESiWgNebQJmiozOAGcBAQ1+U/UzUOkhdrcshlkSRRiKWodwmVvO0OmnIGg==",
+      "requires": {
+        "css-parse": "1.0.4",
+        "css-stringify": "1.0.5"
+      }
+    },
+    "css-parse": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.0.4.tgz",
+      "integrity": "sha512-pfstzKVRZiHprDXdsmtfH1HYUEw22lzjuHdnpe1hscwoQvgW2C5zDQIBE0RKoALEReTn9W1ECdY8uaT/kO4VfA=="
+    },
+    "css-stringify": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/css-stringify/-/css-stringify-1.0.5.tgz",
+      "integrity": "sha512-aIThpcErhG5EyHorGqNlTh0TduNBqLrrXLO3x5rku3ZKBxuVfY+T7noyM2G2X/01iQANqJUb6d3+FLoa+N7Xwg=="
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ=="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha512-3NdhDuEXnfun/z7x9GOElY49LoqVHoGScmOKwmxhsS8N5Y+Z8KyPPDnaSzqWgYt/ji4mqwfTS34Htrk0zPIXVg=="
+    },
+    "dotenv": {
+      "version": "16.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
+      "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ=="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
+    },
+    "express": {
+      "version": "4.16.4",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
+      "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
+      "requires": {
+        "accepts": "~1.3.5",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.18.3",
+        "content-disposition": "0.5.2",
+        "content-type": "~1.0.4",
+        "cookie": "0.3.1",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.1.1",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.2",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.4",
+        "qs": "6.5.2",
+        "range-parser": "~1.2.0",
+        "safe-buffer": "5.1.2",
+        "send": "0.16.2",
+        "serve-static": "1.13.2",
+        "setprototypeof": "1.1.0",
+        "statuses": "~1.4.0",
+        "type-is": "~1.6.16",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+          "integrity": "sha512-+IJOX0OqlHCszo2mBUq+SrEbCj6w7Kpffqx60zYbPTFaO4+yYgRjHwcZNpWvaTylDHaV7PPmBHzSecZiMhtPgw=="
+        }
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
+      "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.2",
+        "statuses": "~1.4.0",
+        "unpipe": "~1.0.0"
+      }
+    },
+    "follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
+    },
+    "graceful-readlink": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
+      "integrity": "sha512-8tLu60LgxF6XpdbK8OW3FA+IfTNBn1ZHGHKF4KQbEeSkajYw5PlYJcKluntgegDPTg8UkHjpet1T82vk6TQ68w=="
+    },
+    "http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
+      "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
+    "install": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/install/-/install-0.13.0.tgz",
+      "integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA=="
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+    },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
+    "is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "jade": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/jade/-/jade-1.11.0.tgz",
+      "integrity": "sha512-J76sbGKeLtu7uwW97Ntzb1UvGnpKTDplYa9ROr2gNRhM+SxvlBSG0Ees3TQ8+7ya2UVkzMEeFxhRhEpN68s7Tg==",
+      "requires": {
+        "character-parser": "1.2.1",
+        "clean-css": "^3.1.9",
+        "commander": "~2.6.0",
+        "constantinople": "~3.0.1",
+        "jstransformer": "0.0.2",
+        "mkdirp": "~0.5.0",
+        "transformers": "2.1.0",
+        "uglify-js": "^2.4.19",
+        "void-elements": "~2.0.1",
+        "with": "~4.0.0"
+      }
+    },
+    "jstransformer": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-0.0.2.tgz",
+      "integrity": "sha512-b7tmf91j1ChMuYhwbPBnNgB62dmHuqiHpOdd6QLKzde8HydZqm+ud3qWreGWecSxPBFFNOf1Ozjx0xo2plFdHA==",
+      "requires": {
+        "is-promise": "^2.0.0",
+        "promise": "^6.0.1"
+      }
+    },
+    "kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "requires": {
+        "is-buffer": "^1.1.5"
+      }
+    },
+    "lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha512-RE2g0b5VGZsOCFOCgP7omTRYFqydmZkBwl5oNnQ1lDYC57uyO9KqNnNVxT7COSHTxrRCWVcAVOcbjk+tvh/rgQ=="
+    },
+    "longest": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
+      "integrity": "sha512-k+yt5n3l48JU4k8ftnKG6V7u32wyH2NfKzeMto9F/QRE0amxy/LayxwlvjjkZEIzqR+19IrtFO8p5kB9QaYUFg=="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w=="
+    },
+    "mime": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
+      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
+    },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
+    "minimist": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g=="
+    },
+    "mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "requires": {
+        "minimist": "^1.2.6"
+      }
+    },
+    "morgan": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.1.tgz",
+      "integrity": "sha512-HQStPIV4y3afTiCYVxirakhlCfGkI161c76kKFca7Fk1JusM//Qeo1ej2XaMniiNeaZklMVrh3vTtIzpzwbpmA==",
+      "requires": {
+        "basic-auth": "~2.0.0",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "on-headers": "~1.0.1"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "mysql": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz",
+      "integrity": "sha512-Bca+gk2YWmqp2Uf6k5NFEurwY/0td0cpebAucFpY/3jhrwrVGuxU2uQFCHjU19SJfje0yQvi+rVWdq78hR5lig==",
+      "requires": {
+        "bignumber.js": "9.0.0",
+        "readable-stream": "2.3.7",
+        "safe-buffer": "5.1.2",
+        "sqlstring": "2.3.1"
+      }
+    },
+    "negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
+    },
+    "optimist": {
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz",
+      "integrity": "sha512-TCx0dXQzVtSCg2OgY/bO9hjM9cV4XYx09TVK+s3+FhkjT6LovsLe+pPMzpWf+6yXK/hUizs2gUoTw3jHM0VaTQ==",
+      "requires": {
+        "wordwrap": "~0.0.2"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "promise": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-6.1.0.tgz",
+      "integrity": "sha512-O+uwGKreKNKkshzZv2P7N64lk6EP17iXBn0PbUnNQhk+Q0AHLstiTrjkx3v5YBd3cxUe7Sq6KyRhl/A0xUjk7Q==",
+      "requires": {
+        "asap": "~1.0.0"
+      }
+    },
+    "proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "requires": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
+    "qs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
+      "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
+      "requires": {
+        "bytes": "3.0.0",
+        "http-errors": "1.6.3",
+        "iconv-lite": "0.4.23",
+        "unpipe": "1.0.0"
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w=="
+    },
+    "right-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
+      "integrity": "sha512-yqINtL/G7vs2v+dFIZmFUDbnVyFUJFKd6gK22Kgo6R4jfJGFtisKyncWDDULgjfqf4ASQuIQyjJ7XZ+3aWpsAg==",
+      "requires": {
+        "align-text": "^0.1.1"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "send": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
+      "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.6.2",
+        "mime": "1.4.1",
+        "ms": "2.0.0",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.0",
+        "statuses": "~1.4.0"
+      }
+    },
+    "serve-static": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
+      "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.2",
+        "send": "0.16.2"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+    },
+    "source-map": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+      "integrity": "sha512-Y8nIfcb1s/7DcobUz1yOO1GSp7gyL+D9zLHDehT7iRESqGSxjJ448Sg7rvfgsRJCnKLdSl11uGf0s9X80cH0/A==",
+      "requires": {
+        "amdefine": ">=0.0.4"
+      }
+    },
+    "sqlstring": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.1.tgz",
+      "integrity": "sha512-ooAzh/7dxIG5+uDik1z/Rd1vli0+38izZhGzSa34FwR7IbelPWCCKSNIl8jlL/F7ERvy8CB2jNeM1E9i9mXMAQ=="
+    },
+    "statuses": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
+      "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "transformers": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/transformers/-/transformers-2.1.0.tgz",
+      "integrity": "sha512-zJf5m2EIOngmBbDe2fhTPpCjzM2qkZVqrFJZc2jaln+KBeEaYKhS2QMOIkfVrNUyoOwqgbTwOHATzr3jZRQDyg==",
+      "requires": {
+        "css": "~1.0.8",
+        "promise": "~2.0",
+        "uglify-js": "~2.2.5"
+      },
+      "dependencies": {
+        "is-promise": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-1.0.1.tgz",
+          "integrity": "sha512-mjWH5XxnhMA8cFnDchr6qRP9S/kLntKuEfIYku+PaN1CnS8v+OG9O/BKpRCVRJvpIkgAZm0Pf5Is3iSSOILlcg=="
+        },
+        "promise": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-2.0.0.tgz",
+          "integrity": "sha512-OgMc+sxI3zWF8D5BJGtA0z7/IsrDy1/0cPaDv6HPpqa2fSTo7AdON5U10NbZCUeF+zCAj3PtfPE50Hf02386aA==",
+          "requires": {
+            "is-promise": "~1"
+          }
+        },
+        "source-map": {
+          "version": "0.1.43",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
+          "integrity": "sha512-VtCvB9SIQhk3aF6h+N85EaqIaBFIAfZ9Cu+NJHHVvc8BbEcnvDcFw6sqQ2dQrT6SlOrZq3tIvyD9+EGq/lJryQ==",
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        },
+        "uglify-js": {
+          "version": "2.2.5",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.2.5.tgz",
+          "integrity": "sha512-viLk+/8G0zm2aKt1JJAVcz5J/5ytdiNaIsKgrre3yvSUjwVG6ZUujGH7E2TiPigZUwLYCe7eaIUEP2Zka2VJPA==",
+          "requires": {
+            "optimist": "~0.3.5",
+            "source-map": "~0.1.7"
+          }
+        }
+      }
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "uglify-js": {
+      "version": "2.8.29",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
+      "integrity": "sha512-qLq/4y2pjcU3vhlhseXGGJ7VbFO4pBANu0kwl8VCa9KEI0V8VfZIx2Fy3w01iSTA/pGwKZSmu/+I4etLNDdt5w==",
+      "requires": {
+        "source-map": "~0.5.1",
+        "uglify-to-browserify": "~1.0.0",
+        "yargs": "~3.10.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+        }
+      }
+    },
+    "uglify-to-browserify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+      "integrity": "sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q==",
+      "optional": true
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
+    },
+    "void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung=="
+    },
+    "window-size": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+      "integrity": "sha512-1pTPQDKTdd61ozlKGNCjhNRd+KPmgLSGa3mZTHoOliaGcESD8G1PXhh7c1fgiPjVbNVfgy2Faw4BI8/m0cC8Mg=="
+    },
+    "with": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/with/-/with-4.0.3.tgz",
+      "integrity": "sha512-mJZFpyEc1JTAdxhi/vhVeAM2S7vsltEKDiexDDo1HuAzlYKhcVUU6cwY8cHrFYdt82ZNkfKCeyhA3IYFegI0Kg==",
+      "requires": {
+        "acorn": "^1.0.1",
+        "acorn-globals": "^1.0.3"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz",
+          "integrity": "sha512-FsqWmApWGMGLKKNpHt12PMc5AK7BaZee0WRh04fCysmTzHe+rrKOa2MKjORhnzfpe4r0JnfdqHn02iDA9Dqj2A=="
+        }
+      }
+    },
+    "wordwrap": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
+      "integrity": "sha512-xSBsCeh+g+dinoBv3GAOWM4LcVVO68wLXRanibtBSdUvkGWQRGeE9P7IwU9EmDDi4jA6L44lz15CGMwdw9N5+Q=="
+    },
+    "yargs": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+      "integrity": "sha512-QFzUah88GAGy9lyDKGBqZdkYApt63rCXYBGYnEP4xDJPXNqXXnBDACnbrXnViV6jRSqAePwrATi2i8mfYm4L1A==",
+      "requires": {
+        "camelcase": "^1.0.2",
+        "cliui": "^2.1.0",
+        "decamelize": "^1.0.0",
+        "window-size": "0.1.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..52a1d08
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "express-skeleton-html",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "axios": "^1.6.2",
+    "cookie-parser": "~1.4.4",
+    "debug": "~2.6.9",
+    "dotenv": "^16.0.3",
+    "express": "~4.16.1",
+    "http-errors": "~1.6.3",
+    "install": "^0.13.0",
+    "jade": "~1.11.0",
+    "morgan": "~1.9.1",
+    "mysql": "^2.18.1"
+  }
+}
diff --git a/public/javascripts/index.js b/public/javascripts/index.js
new file mode 100644
index 0000000..3f952ea
--- /dev/null
+++ b/public/javascripts/index.js
@@ -0,0 +1,2 @@
+let a = "hello javascript";
+console.log(a);
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
new file mode 100644
index 0000000..9453385
--- /dev/null
+++ b/public/stylesheets/style.css
@@ -0,0 +1,8 @@
+body {
+  padding: 50px;
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: #00B7FF;
+}
diff --git a/routes/api/customers.js b/routes/api/customers.js
new file mode 100644
index 0000000..e2fc188
--- /dev/null
+++ b/routes/api/customers.js
@@ -0,0 +1,71 @@
+const express = require("express");
+//const mysql = require("../../mysql/index.js");
+const router = express.Router();
+
+router.get("/", async (req, res) => {
+  const customers = await mysql.query("customerList");
+  console.log(customers);
+  res.send(customers);
+});
+
+
+// 자유게시판 새글 작성API
+router.get("/freeboard/insertnewcontent", async (req, res) => {
+  try {
+    const content = await mysql.query("content");
+
+    console.log(req.query);
+
+    // Check if 'content' is not empty and has at least two elements
+    if (Array.isArray(content)) {
+      const index = '1';   // 내용이 비어있지 않으면 index '1' 을 반환 -> 즉, 새글작성 성공인거임.
+      return res.send(index);
+    } else {
+      return res.status(404).send("No content or not enough elements");
+    }
+  } catch (error) {
+    console.error("Error fetching free board list:", error);
+    return res.status(500).send("Internal Server Error");
+  }
+});
+
+
+// 자유게시판 목록 API
+router.get("/freeboard/getfreeboardlist", async (req, res) => {
+  const arr=[]
+  
+  const id = await mysql.query("id");
+  const nickname = await mysql.query("user_nickname");
+  const title = await mysql.query("title");
+  const content = await mysql.query("content");
+  const time = await mysql.query("created_at");
+  
+
+  freeBoard.forEach((el,index)=>{
+    arr.push({id: id, user_nickname : nickname, title : title, content : content, created_at : time})
+  });
+
+  res.send(arr)
+});
+
+
+
+
+
+router.post("/insert", async (req, res) => {
+  const result = await mysql.query("customerInsert", req.body.param);
+  res.send(result);
+});
+
+router.put("/update", async (req, res) => {
+  const result = await mysql.query("customerUpdate", req.body.param);
+  res.send(result);
+});
+
+router.delete("/delete/:id", async (req, res) => {
+  const { id } = req.params;
+  const result = await mysql.query("customerDelete", id);
+  res.send(result);
+});
+
+module.exports = router;
diff --git a/routes/index.js b/routes/index.js
new file mode 100644
index 0000000..0ddb322
--- /dev/null
+++ b/routes/index.js
@@ -0,0 +1,18 @@
+const express = require("express");
+const router = express.Router();
+const fs = require("fs");
+
+/* GET home page. */
+router.get("/", function (req, res, next) {
+  fs.readFile("./views/index.html", (err, data) => {
+    if (err) {
+      res.send("error");
+    } else {
+      res.writeHead(200, { "Content-Type": "text/html" });
+      res.write(data);
+      res.end();
+    }
+  });
+});
+
+module.exports = router;
diff --git a/routes/users.js b/routes/users.js
new file mode 100644
index 0000000..623e430
--- /dev/null
+++ b/routes/users.js
@@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+router.get('/', function(req, res, next) {
+  res.send('respond with a resource');
+});
+
+module.exports = router;
diff --git a/src/main/resources/static/css/css.css b/src/main/resources/static/css/css.css
index e69de29..70c330e 100644
--- a/src/main/resources/static/css/css.css
+++ b/src/main/resources/static/css/css.css
@@ -0,0 +1,2 @@
+@import url(../../../../../views/css/style.css);
+@import url(../../../../../views/css/media.css);
\ No newline at end of file
diff --git a/src/main/resources/static/css/css2.css b/src/main/resources/static/css/css2.css
new file mode 100644
index 0000000..3145ee8
--- /dev/null
+++ b/src/main/resources/static/css/css2.css
@@ -0,0 +1,2 @@
+@import url(../../../../../views/css/style2.css);
+@import url(../../../../../views/css/media2.css);
\ No newline at end of file
diff --git a/src/main/resources/static/css/media.css b/src/main/resources/static/css/media.css
new file mode 100644
index 0000000..21e899b
--- /dev/null
+++ b/src/main/resources/static/css/media.css
@@ -0,0 +1,81 @@
+@media (max-width: 1000px) {
+    .board_wrap {
+        width: 100%;
+        min-width: 320px;
+        padding: 0 30px;
+        box-sizing: border-box;
+    }
+
+    .board_list .num,
+    .board_list .writer,
+    .board_list .count {
+        display: none;
+    }
+
+    .board_list .date {
+        width: 40%;
+    }
+
+    .board_list .title {
+        text-indent: 10px;
+    }
+
+    .board_list .top .title {
+        text-indent: 0;
+    }
+
+    .board_page a {
+        width: 26px;
+        height: 26px;
+    }
+
+    .board_page a.bt {
+        padding-top: 7px;
+    }
+    
+    .board_page a.num {
+        padding-top: 6px;
+    }
+
+    .board_view .info dl {
+        width: 50%;
+        padding: 0;
+    }
+
+    .board_view .info dl:nth-child(-n+2) {
+        margin-bottom: 5px;
+    }
+
+    .board_view .info dl::before {
+        display: none;
+    }
+
+    .board_view .info dl dt,
+    .board_view .info dl dd {
+        font-size: 1.2rem;
+    }
+
+    .board_write .info dl {
+        width: 49%;
+    }
+
+    .board_write .info dl:first-child {
+        margin-right: 2%;
+    }
+
+    .board_write .title dt,
+    .board_write .info dt {
+        display: none;
+    }
+
+    .board_write .title dd,
+    .board_write .info dd {
+        width: 100%;
+    }
+
+    .board_write .title input[type="text"],
+    .board_write .info input[type="text"],
+    .board_write .info input[type="password"] {
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/media2.css b/src/main/resources/static/css/media2.css
new file mode 100644
index 0000000..21e899b
--- /dev/null
+++ b/src/main/resources/static/css/media2.css
@@ -0,0 +1,81 @@
+@media (max-width: 1000px) {
+    .board_wrap {
+        width: 100%;
+        min-width: 320px;
+        padding: 0 30px;
+        box-sizing: border-box;
+    }
+
+    .board_list .num,
+    .board_list .writer,
+    .board_list .count {
+        display: none;
+    }
+
+    .board_list .date {
+        width: 40%;
+    }
+
+    .board_list .title {
+        text-indent: 10px;
+    }
+
+    .board_list .top .title {
+        text-indent: 0;
+    }
+
+    .board_page a {
+        width: 26px;
+        height: 26px;
+    }
+
+    .board_page a.bt {
+        padding-top: 7px;
+    }
+    
+    .board_page a.num {
+        padding-top: 6px;
+    }
+
+    .board_view .info dl {
+        width: 50%;
+        padding: 0;
+    }
+
+    .board_view .info dl:nth-child(-n+2) {
+        margin-bottom: 5px;
+    }
+
+    .board_view .info dl::before {
+        display: none;
+    }
+
+    .board_view .info dl dt,
+    .board_view .info dl dd {
+        font-size: 1.2rem;
+    }
+
+    .board_write .info dl {
+        width: 49%;
+    }
+
+    .board_write .info dl:first-child {
+        margin-right: 2%;
+    }
+
+    .board_write .title dt,
+    .board_write .info dt {
+        display: none;
+    }
+
+    .board_write .title dd,
+    .board_write .info dd {
+        width: 100%;
+    }
+
+    .board_write .title input[type="text"],
+    .board_write .info input[type="text"],
+    .board_write .info input[type="password"] {
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
new file mode 100644
index 0000000..3560013
--- /dev/null
+++ b/src/main/resources/static/css/style.css
@@ -0,0 +1,309 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 13px;
+}
+
+ul, li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.board_wrap {
+    width: 1200px;
+    margin: 100px auto;
+}
+
+.board_title {
+    margin-bottom: 30px;
+}
+
+.board_title strong {
+    font-size: 4rem;
+}
+
+.board_title p {
+    margin-top: 5px;
+    font-size: 1.6rem;
+}
+
+.bt_wrap {
+    margin-top: 30px;
+    text-align: center;
+    font-size: 0;
+}
+
+.bt_wrap a {
+    display: inline-block;
+    min-width: 80px;
+    margin-left: 10px;
+    padding: 10px;
+    border: 3px solid rgb(237, 185, 43);
+    border-radius: 2px;
+    font-size: 1.4rem;
+}
+
+.bt_wrap a:first-child {
+    margin-left: 0;
+}
+
+.bt_wrap a.on {
+    background: #000;
+    color: #fff;
+}
+
+.board_list {
+    width: 100%;
+    border-top: 2px solid #000;
+}
+
+.board_list > div {
+    border-bottom: 1px solid #ddd;
+    font-size: 0;
+}
+
+.board_list_wrap .top {
+    color: black;
+    font-weight: 600;
+    font-size: 1.4rem; /* Adjust the font size as needed */
+    padding: 10px; /* Add padding for better visibility */
+}
+
+.board_list_wrap .top > div {
+    display: inline-block;
+    text-align: center;
+    width: 20%; /* Equal width for each column */
+}
+
+.board_list_wrap .top .title {
+    text-align: center;
+    width: 10%;
+}
+
+.board_list_wrap .top .num {
+    width: 10%;
+}
+
+.board_list_wrap .top .writer{
+    text-align: right;
+    width : 58%;
+
+}
+.board_list_wrap .top .date {
+    text-align: right;
+    width: 15%;
+}
+.board_list > div:last-child {
+    border-bottom: 1px solid #000;
+}
+
+.board_list > div > div {
+    display: inline-block;
+    padding: 20px 0;
+    text-align: center;
+    font-size: 1.6rem;
+}
+
+.board_list > div.top > div {
+    font-weight: 600;
+}
+
+.board_list .num {
+    width: 10%;
+}
+
+.board_list .title {
+    width: 60%;
+    text-align: left;
+}
+
+.board_list .top .title {
+    text-align: center;
+}
+
+.board_list .category{
+    width : 10%;
+}
+
+.board_list .writer{
+    width: 15%;
+}
+.board_list .date {
+    width: 15%;
+}
+
+.board_page {
+    margin-top: 30px;
+    text-align: center;
+    font-size: 0;
+}
+
+.board_page a {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    box-sizing: border-box;
+    vertical-align: middle;
+    border: 1px solid #ddd;
+    border-left: 0;
+    line-height: 120%;
+}
+
+.board_page a.bt {
+    padding-top: 10px;
+    font-size: 1.2rem;
+    letter-spacing: -1px;
+}
+
+.board_page a.num {
+    padding-top: 9px;
+    font-size: 1.4rem;
+}
+
+.board_page a.num.on {
+    border-color: #000;
+    background: #000;
+    color: #fff;
+}
+
+.board_page a:first-child {
+    border-left: 1px solid #ddd;
+}
+
+.board_view {
+    width: 100%;
+    border-top: 2px solid #000;
+}
+
+.board_view .title {
+    padding: 20px 15px;
+    border-bottom: 1px dashed #ddd;
+    font-size: 2rem;
+}
+
+.board_view .info {
+    padding: 15px;
+    border-bottom: 1px solid #999;
+    font-size: 0;
+}
+
+.board_view .info dl {
+    position: relative;
+    display: inline-block;
+    padding: 0 20px;
+}
+
+.board_view .info dl:first-child {
+    padding-left: 0;
+}
+
+.board_view .info dl::before {
+    content: "";
+    position: absolute;
+    top: 1px;
+    left: 0;
+    display: block;
+    width: 1px;
+    height: 13px;
+    background: #ddd;
+}
+
+.board_view .info dl:first-child::before {
+    display: none;
+}
+
+.board_view .info dl dt,
+.board_view .info dl dd {
+    display: inline-block;
+    font-size: 1.4rem;
+}
+
+
+.board_view .info dl dd {
+    margin-left: 10px;
+    color: #777;
+}
+
+.board_view .cont {
+    padding: 20px;
+    border-bottom: 1px solid #000;
+    line-height: 180%;
+    font-size: 1.6rem;
+}
+
+.board_write {
+    border-top: 2px solid #000;
+}
+
+.board_write .title,
+.board_write .info {
+    padding: 15px;
+}
+
+.board_write .info {
+    border-top: 1px dashed #ddd;
+    border-bottom: 1px solid #000;
+    font-size: 0;
+}
+
+.board_write .title dl {
+    font-size: 0;
+}
+
+.board_write .info dl {
+    display: inline-block;
+    width: 50%;
+    vertical-align: middle;
+}
+
+.board_write .title dt,
+.board_write .title dd,
+.board_write .info dt,
+.board_write .info dd {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 1.4rem;
+}
+
+.board_write .title dt,
+.board_write .info dt {
+    width: 100px;
+}
+
+.board_write .title dd {
+    width: calc(100% - 100px);
+}
+
+.board_write .title input[type="text"],
+.board_write .info input[type="text"],
+.board_write .info input[type="password"] {
+    padding: 10px;
+    box-sizing: border-box;
+    font-size: 1.4rem;
+}
+
+.board_write .title input[type="text"] {
+    width: 80%;
+}
+
+.board_write .cont {
+    border-bottom: 1px solid #000;
+}
+
+.board_write .cont textarea {
+    display: block;
+    width: 100%;
+    height: 300px;
+    padding: 15px;
+    box-sizing: border-box;
+    border: 0;
+    resize: vertical;
+    font-size: 1.4rem;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/style2.css b/src/main/resources/static/css/style2.css
new file mode 100644
index 0000000..aa3576c
--- /dev/null
+++ b/src/main/resources/static/css/style2.css
@@ -0,0 +1,321 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 13px;
+}
+
+ul, li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.board_wrap {
+    width: 1200px;
+    margin: 100px auto;
+}
+
+.board_title {
+    margin-bottom: 30px;
+}
+
+.board_title strong {
+    font-size: 4rem;
+}
+
+.board_title p {
+    margin-top: 5px;
+    font-size: 1.6rem;
+}
+
+.bt_wrap {
+    margin-top: 30px;
+    text-align: center;
+    font-size: 0;
+}
+
+.bt_wrap a {
+    display: inline-block;
+    min-width: 80px;
+    margin-left: 10px;
+    padding: 10px;
+    border: 3px solid rgb(237, 185, 43);
+    border-radius: 2px;
+    font-size: 1.4rem;
+}
+
+.bt_wrap a:first-child {
+    margin-left: 0;
+}
+
+.bt_wrap a.on {
+    background: #000;
+    color: #fff;
+}
+
+.board_list {
+    width: 100%;
+    border-top: 2px solid #000;
+}
+
+.board_list > div {
+    border-bottom: 1px solid #ddd;
+    font-size: 0;
+}
+
+.board_list_wrap .top {
+    color: black;
+    font-weight: 600;
+    font-size: 1.4rem; /* Adjust the font size as needed */
+    padding: 5px; /* Add padding for better visibility */
+}
+
+.board_list_wrap .top > div {
+    display: inline-block;
+    text-align: center;
+    width: 80%; /* Equal width for each column */
+}
+
+.board_list_wrap .top .title {
+    text-align: center;
+    width: 10%;
+}
+.board_list_wrap .top .cate {
+    width: 10%;
+}
+
+.board_list_wrap .top .num {
+    width: 10%;
+}
+
+.board_list_wrap .top .writer{
+    width : 38%;
+
+}
+.board_list_wrap .top .date {
+    text-align: right;
+    width: 22%;
+}
+.board_list > div:last-child {
+    border-bottom: 1px solid #000;
+}
+
+.board_list > div > div {
+    display: inline-block;
+    width: 50%;
+    padding: 15px 0;
+    text-align: center;
+    font-size: 1.6rem;
+}
+
+.board_list > div.top > div {
+    font-weight: 600;
+}
+
+
+.board_list .num {
+    width: 10%;
+}
+
+.board_list .title {
+    width: 60%;
+    text-align: left;
+}
+
+.board_list .top .title {
+    text-align: center;
+    width : 10%
+}
+
+.board_list .cate{
+    width : 10%;
+}
+
+.board_list .writer{
+    text-align: right;
+    width: 70%;
+    
+}
+.board_list .date {
+    text-align: right;
+    width: 24%;
+    
+}
+
+
+
+
+.board_page {
+    margin-top: 30px;
+    text-align: center;
+    font-size: 0;
+}
+
+.board_page a {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    box-sizing: border-box;
+    vertical-align: middle;
+    border: 1px solid #ddd;
+    border-left: 0;
+    line-height: 120%;
+}
+
+.board_page a.bt {
+    padding-top: 10px;
+    font-size: 1.2rem;
+    letter-spacing: -1px;
+}
+
+.board_page a.num {
+    padding-top: 9px;
+    font-size: 1.4rem;
+}
+
+.board_page a.num.on {
+    border-color: #000;
+    background: #000;
+    color: #fff;
+}
+
+.board_page a:first-child {
+    border-left: 1px solid #ddd;
+}
+
+.board_view {
+    width: 100%;
+    border-top: 2px solid #000;
+}
+
+.board_view .title {
+    padding: 20px 15px;
+    border-bottom: 1px dashed #ddd;
+    font-size: 2rem;
+}
+
+.board_view .info {
+    padding: 15px;
+    border-bottom: 1px solid #999;
+    font-size: 0;
+}
+
+.board_view .info dl {
+    position: relative;
+    display: inline-block;
+    padding: 0 20px;
+}
+
+.board_view .info dl:first-child {
+    padding-left: 0;
+}
+
+.board_view .info dl::before {
+    content: "";
+    position: absolute;
+    top: 1px;
+    left: 0;
+    display: block;
+    width: 1px;
+    height: 13px;
+    background: #ddd;
+}
+
+.board_view .info dl:first-child::before {
+    display: none;
+}
+
+.board_view .info dl dt,
+.board_view .info dl dd {
+    display: inline-block;
+    font-size: 1.4rem;
+}
+
+
+.board_view .info dl dd {
+    margin-left: 10px;
+    color: #777;
+}
+
+.board_view .cont {
+    padding: 20px;
+    border-bottom: 1px solid #000;
+    line-height: 180%;
+    font-size: 1.6rem;
+}
+
+.board_write {
+    border-top: 2px solid #000;
+}
+
+.board_write .title,
+.board_write .info {
+    padding: 15px;
+}
+
+.board_write .info {
+    border-top: 1px dashed #ddd;
+    border-bottom: 1px solid #000;
+    font-size: 0;
+}
+
+.board_write .title dl {
+    font-size: 0;
+}
+
+.board_write .info dl {
+    display: inline-block;
+    width: 50%;
+    vertical-align: middle;
+}
+
+.board_write .title dt,
+.board_write .title dd,
+.board_write .info dt,
+.board_write .info dd {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 1.4rem;
+}
+
+.board_write .title dt,
+.board_write .info dt {
+    width: 100px;
+}
+
+.board_write .title dd {
+    width: calc(100% - 100px);
+}
+
+.board_write .title input[type="text"],
+.board_write .info input[type="text"],
+.board_write .info input[type="password"] {
+    padding: 10px;
+    box-sizing: border-box;
+    font-size: 1.4rem;
+}
+
+.board_write .title input[type="text"] {
+    width: 80%;
+}
+
+.board_write .cont {
+    border-bottom: 1px solid #000;
+}
+
+.board_write .cont textarea {
+    display: block;
+    width: 100%;
+    height: 300px;
+    padding: 15px;
+    box-sizing: border-box;
+    border: 0;
+    resize: vertical;
+    font-size: 1.4rem;
+}
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/views/free_boardEdit.html b/src/main/webapp/WEB-INF/views/free_boardEdit.html
new file mode 100644
index 0000000..280b6a7
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/free_boardEdit.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>공지사항</title>
+    <link rel="stylesheet" href="../../../../../views/css/css.css">
+    <link rel="stylesheet" href="../../../../../views/css/header.css">
+
+</head>
+
+<body>
+    <div id = 'head' class="header">
+      <div class="logo" onclick="location.href='/login'"></div>
+      <div class="button-container">
+        <!-- Conditionally render buttons based on login status -->
+        <!-- For example, you can use server-side templating or JavaScript to determine login status -->
+        <!-- Replace the following buttons with your server-side logic -->
+        <div class="nickname">
+          <div class="username">웹썰미</div>님
+        </div>
+        <button class="button" style="margin: 7px; margin-right: 15px;" onclick=" " location.href='/write'>새 글 작성</button>
+        <button class="button" style="margin: 7px; margin-right: 15px;" onclick="logout()">로그아웃</button>
+        <!-- Or render login/signup buttons -->
+        <!--
+          <button class="button" onclick="location.href='/login'">로그인</button>
+          <button class="button" onclick="location.href='/signup'">회원가입</button>
+        -->
+      </div>
+    </div>
+</body>   
+<style type="text/css">
+    @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+
+    * {
+    margin: 0px;
+    font-family: "Do Hyeon";
+
+    }
+</style>
+<body>
+    <div class="board_wrap">
+        <div class="board_title">
+            <strong>자유게시판(수정)</strong>
+            <p>수정할 정보를 입력해주세요.</p>
+        </div>
+        <div class="board_write_wrap">
+            <div class="board_write">
+                <div class="title">
+                    <dl>
+                        <dt>제목</dt>
+                        <dd><input type="text" name = "subject" placeholder="제목 입력"></dd>
+                    </dl>
+                </div>
+                <div class="info">
+                    <dl>
+                        <dt>글쓴이</dt>
+                        <dd id="userNickname"></dd>
+                    </dl>
+                </div>
+                <div class="cont">
+                    <textarea name = "content" placeholder="내용 입력"></textarea>
+                </div>
+            </div>
+            <div class="bt_wrap">
+                <a id="editbtn" class="on">수정</a>
+                <a href="../../../../../views/free_boardList.html">취소</a>
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>    
+
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<script type="module"></script>
+<script>
+     // Move the window.onload outside the click event listener
+     
+     window.onload = function () {
+
+         // Retrieve user_nickname from the URL parameters
+        const urlParams = new URLSearchParams(window.location.search);
+        const userNickname = urlParams.get('userNickname');
+
+        console.log(userNickname);
+
+        // Check if the element with id 'userNickname' exists before updating innerText
+        const userNicknameElement = document.getElementById('userNickname');
+        if (userNicknameElement) {
+            userNicknameElement.innerText = userNickname;
+        }
+
+            const editBtn = document.getElementById("editbtn");
+
+            editBtn.addEventListener("click", async (e) => {
+                e.preventDefault();
+
+                const updatedSubject = document.querySelector('input[name="subject"]').value;
+                const updatedContent = document.querySelector('textarea[name="content"]').value;
+
+                // Check each field individually
+                if (!updatedSubject || !updatedContent) {
+                    alert("수정할 제목, 내용을 모두 입력해주세요!");
+                    return;
+
+
+                }
+
+                // URL에서 직접 idx 값을 가져오기
+
+                const urlParams = new URLSearchParams(window.location.search);
+                const idx = urlParams.get('idx');
+
+                console.log(idx); // Now, idx should
+
+                try {
+                    const response = await axios.put(`http://35.212.196.164/freeboard/putcontent/${idx}/${updatedSubject}/${updatedContent}`);
+
+                    console.log(response.data);
+
+                    // Check response data and process success or failure
+                    if (response.data === true) {
+                        console.log("글 수정 성공!");
+                        // Redirect or perform other actions on success
+                        window.location.href = 'free_boardList.html';
+                        alert('수정이 완료되었습니다.')
+                    } else {
+                        console.log('글 수정 실패!');
+                        // Handle in case of failure, display error message, etc.
+                    }
+                } catch (error) {
+                    console.error("PUT 요청 중 오류 발생:", error);
+                    // Error handling, displaying error messages, etc.
+                }
+            });
+        };
+        
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/views/free_boardList.html b/src/main/webapp/WEB-INF/views/free_boardList.html
new file mode 100644
index 0000000..73d206d
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/free_boardList.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html> 
+<html lang="ko">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>헤더 </title>
+        <link rel = 'stylesheet' href = "../../../../../views/css/header.css">
+        <link rel = 'stylesheet' href = "../css/index.css">
+       
+      </head>
+      
+      <body>
+        <div id = 'head' class="header">
+          <div class="logo" onclick="location.href='/login'"></div>
+          <div class="button-container">
+              <!-- Add login and signup buttons -->
+            <button class="button" style="margin: 7px; margin-right: 15px; " id="loginBtn" onclick="location.href='/login'">로그인</button>
+            <button class="button" style="margin: 7px; margin-right: 15px; " id="signupBtn" onclick="location.href='/signup'">회원가입</button>
+            <div class="nickname" id="nicknameDiv"></div>
+            <button class="button" style="margin: 7px; margin-right: 15px; display: none;" id="logoutBtn" onclick="logout()">로그아웃</button>
+                    
+          </div>
+        </div>
+      
+        <div class="nav__bar">
+          <ul class="nav__menu">
+            <li><a href="/public" style="margin-top: 10px; margin-left: 10px;" class="white_font"> 홈 </a></li>
+            <li><a href="/PostListPage" style="margin-top: 10px; margin-left: 10px;" class="white_font"> 후기 목록 </a></li>
+            <li><a href="free_boardList.html" style="margin-top: 10px; margin-left: 10px;" class="white_font"> 자유게시판 </a></li>
+            <li><a href="/MyPage" style="margin-top: 10px; margin-left: 10px;" class="white_font"> 마이페이지 </a></li>
+          </ul>
+        </div>
+      </body>     
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>공지사항</title>
+    <link rel="stylesheet" href="../../../../../views/css/css.css">
+</head>
+<style type="text/css">
+    @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+
+    * {
+    margin: 0px;
+    font-family: "Do Hyeon";
+
+    }
+</style>
+<body>
+    <div class="board_wrap">
+        <div class="board_title">
+            <strong>자유게시판</strong>
+            <p>여러 정보들을 공유해주세요.</p>
+        </div>
+        <div class="board_list_wrap">
+          <div class="top">
+            <div class="num">번호</div>  <!-- 아마 id가 들어가면됌.-->
+            <div class="title">제목</div>  <!--title-->
+            <div class="writer">글쓴이</div> <!--user_nickname-->
+            <div class="date">작성일</div> <!--createdAt-->
+        </div>
+            <div class="board_list" id ="boardList" >
+                <div>
+                    <div class="num"></div>
+                    <div class="title"><a href="free_boardView.html"></a></div>
+                    <div class="writer"></div>
+                    <div class="date"></div>
+                </div>
+            </div>
+            <div class="board_page">
+                <a href="#" class="bt first"></a>
+                <a href="#" class="bt prev"></a>
+                <a href="#" class="num on">1</a>
+                <a href="#" class="num">2</a>
+                <a href="#" class="num">3</a>
+                <a href="#" class="num">4</a>
+                <a href="#" class="num">5</a>
+                <a href="#" class="bt next">></a>
+                <a href="#" class="bt last">>></a>
+            </div>
+            <div class="bt_wrap">
+                <a href="../../../../../views/free_boardWrite.html" class="on">글쓰기</a>
+                <!--<a href="#">수정</a>-->
+            </div>
+        </div>
+    </div>
+</body>
+</html> 
+
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+
+<script>
+  //import axios from 'axios';
+
+   // 페이지 로드 시 실행되는 함수
+  window.onload = async function () {
+    // 서버로부터 자유게시판 목록을 가져오는 요청
+    try {
+      const response = await axios.get('http://35.212.196.164/freeboard/getfreeboardlist');
+
+      // 서버로부터 받은 데이터를 변수에 저장
+      const boardList = response.data;
+
+      // 가져온 데이터를 화면에 출력하는 함수 호출
+      displayBoardList(boardList);
+    } catch (error) {
+      console.error('서버로부터 자유게시판 목록을 가져오는 중 오류 발생:', error);
+      // 오류 처리, 오류 메시지 표시 등
+    }
+  };
+
+  // 서버로부터 받은 데이터를 화면에 출력하는 함수
+  function displayBoardList(boardList) {
+    const boardListContainer = document.getElementById('boardList');
+
+    // 이전에 표시된 목록 삭제 (새로고침을 했을 때 중복 방지)
+    boardListContainer.innerHTML = '';
+
+
+    // boardList를 최신순으로 정렬
+    boardList.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+
+
+    let i = 1;
+    // 받아온 목록을 화면에 출력 id index관리/........
+    for (const boardItem of boardList) {
+
+      const date = new Date(boardItem.created_at);
+      const formattedDate = `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`;
+
+      const boardItemElement = document.createElement('div');
+      boardItemElement.innerHTML = `
+      <div class="num">${i++}</div>
+      <div class="title"><a href="free_boardView.html?idx=${boardItem.id}">${boardItem.title}</a></div>
+      <div class="writer">${boardItem.user_nickname}</div>
+      <div class="date">${formattedDate}</div>
+      <div class="idx" style="display: none;">${boardItem.id}</div>
+      `;
+      boardListContainer.appendChild(boardItemElement);
+    }
+  }
+
+</script>
diff --git a/src/main/webapp/WEB-INF/views/free_boardView.html b/src/main/webapp/WEB-INF/views/free_boardView.html
new file mode 100644
index 0000000..0c933fd
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/free_boardView.html
@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv = "X-UA-Compatible" content="IE-edge">
+    <meta name="viewport" content="width=device-width", initial-scale="1.0">
+    <title>공지사항</title>
+    <link rel="stylesheet" href="../../../../../views/css/css.css">
+    <link rel="stylesheet" href="../../../../../views/css/comment.css">
+    <link rel = 'stylesheet' href = "../../../../../views/css/header.css">
+    <link rel = 'stylesheet' href = "../css/index.css">
+    
+</head>
+<style type="text/css">
+    @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+
+    * {
+    margin: 0px;
+    font-family: "Do Hyeon";
+
+    }
+</style>
+<body>
+    <div id = 'head' class="header">
+        <div class="logo" onclick="location.href='/login'"></div>
+        <div class="button-container">
+          <!-- Conditionally render buttons based on login status -->
+          <!-- For example, you can use server-side templating or JavaScript to determine login status -->
+          <!-- Replace the following buttons with your server-side logic -->
+          <div class="nickname">
+            <div class="username">웹썰미</div>님
+          </div>
+          <button class="button" style="margin: 7px; margin-right: 15px;" onclick=" " location.href='/write'>새 글 작성</button>
+          <button class="button" style="margin: 7px; margin-right: 15px;" onclick="logout()">로그아웃</button>
+          <!-- Or render login/signup buttons -->
+          <!--
+            <button class="button" onclick="location.href='/login'">로그인</button>
+            <button class="button" onclick="location.href='/signup'">회원가입</button>
+          -->
+        </div>
+      </div>
+    <div class="board_wrap">
+        <div class="board_title">
+            <strong>자유게시판</strong>
+            <p>여러 정보들을 공유해주세요.</p>
+        </div>
+        <div class="board_view_wrap">
+            <div class="board_view">
+                <div class="title" id="title"></div><!-- 루프 내에서 사용 중이라고 가정합니다 -->
+                <div class="info">
+                    <dl style="display: none;">
+                        <dt>번호</dt>
+                        <dd id="PostNumber"></dd>
+                    </dl>
+                    <dl>
+                        <dt>글쓴이</dt>
+                        <dd id="userNickname"></dd>
+                    </dl>
+                    <dl>
+                        <dt>작성일</dt>
+                        <dd id="createdAt"></dd>
+                    </dl>
+                </div>
+                <div class="cont" id="content">
+                    글 내용이 들어갑니다<br>                   
+                </div>
+            </div>     
+            <div class="bt_wrap">
+                <a href="../../../../../views/free_boardList.html" class="on">목록</a>
+                <a id="editLink" href="#" class="on">수정</a>
+                <!--button id="btn-delete" class ="btn btn-danger">삭제</button>-->
+            </div>
+        </div>
+    </div>
+</body>
+<body>
+    <div>
+        <li class="comment-form">
+            <form id="commentFrm">
+                <h3>댓글 작성<span></span></h3>
+                <span class="ps_box">
+                    <input type="text" placeholder="댓글 내용을 입력해주세요" class="int" name="content"/>
+                </span>
+                <input type="submit" class ="btn" value="등록">
+            </form> 
+        </li>
+        <li id="comment-list"></li>
+    </div>
+    <!--script src="js/comment.js"></script>--> 
+</body>
+</html>
+
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+
+<script>
+
+    function formatDateString(dateString) {
+        const date = new Date(dateString);
+        return `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`;
+    }
+
+
+    window.onload = async function () {
+
+        // URL에서 직접 idx 값을 가져오기
+        const urlParams = new URLSearchParams(window.location.search);
+        const idx = urlParams.get('idx');
+
+        try {
+            // Fetch the board item from the server
+            const response = await axios.get(`http://35.212.196.164/freeboard/complete/${idx}`);
+
+            console.log(response);
+            const selectedItem = response.data;
+
+            console.log(selectedItem);
+
+            // Call the function with the received data
+            displaySelectedItem(selectedItem);
+
+        } catch (error) {
+            console.error('Error fetching data for the selected item:', error);
+                // Handle errors as needed
+        }
+        
+    };
+
+    /*function displaySelectedItem(selectedItem) {
+            // Update the content of the board_view_wrap section with the details of the selected item
+            document.getElementById('.title a').innerText = selectedItem.title;
+            document.getElementById('PostNumber').innerText = selectedItem.id;
+            document.getElementById('content').innerText = selectedItem.content; // Use innerHTML for rendering HTML content
+            document.getElementById('userNickname').innerText = selectedItem.user_nickname;
+            document.getElementById('createdAt').innerText = formatDateString(selectedItem.created_at);
+
+            // Populate other elements as needed
+        }*/
+
+
+    function displaySelectedItem(selectedItem) {
+
+    const titleElement = document.getElementById('title');
+    if (titleElement) {
+        titleElement.innerHTML = selectedItem.title;
+    }
+    // Update the content of the board_view_wrap section with the details of the selected item
+
+    // Check if the element with id 'PostNumber' exists before updating innerText
+    const postNumberElement = document.getElementById('PostNumber');
+    if (postNumberElement) {
+        postNumberElement.innerText = selectedItem.id;
+    }
+
+    // Check if the element with id 'userNickname' exists before updating innerText
+    const userNicknameElement = document.getElementById('userNickname');
+    if (userNicknameElement) {
+        userNicknameElement.innerText = selectedItem.user_nickname;
+    }
+
+    // Check if the element with id 'createdAt' exists before updating innerText
+    const createdAtElement = document.getElementById('createdAt');
+    if (createdAtElement) {
+        createdAtElement.innerText = formatDateString(selectedItem.created_at);
+    }
+
+    // Check if the element with id 'content' exists before updating innerHTML
+    const contentElement = document.getElementById('content');
+    if (contentElement) {
+        contentElement.innerHTML = selectedItem.content;
+    }
+
+
+    // 수정 페이지 idx,userNickname 연결
+    const editLink = document.getElementById('editLink');
+    editLink.href = `free_boardEdit.html?idx=${selectedItem.id}&userNickname=${selectedItem.user_nickname}`;
+  
+}
+    
+
+
+
+
+
+    const commentBtn = document.querySelector("#commentFrm");
+    const commentList = document.querySelector("#comment-list");
+    const total = document.querySelector("h3 > span");
+
+    const list =[];
+
+    function Comment(content){
+    this.userid="cloudcoke";   // user_nickname으로 바꾸고
+    this.content = content;
+    this.date="2023-11-23";  // createdat으로 하면됌.
+
+    }
+
+    function createRow(userid, content, date){
+    const ul = document.createElement("ul");
+    const li1 = document.createElement("li");
+    const li2 = document.createElement("li");
+    const li3 = document.createElement("li");
+
+    ul.append(li1);
+    ul.append(li2);
+    ul.append(li3);
+
+    ul.setAttribute("class", "comment-row");
+    li1.setAttribute("class", "comment-id");
+    li2.setAttribute("class", "comment-content");
+    li3.setAttribute("class", "comment-date");
+
+    li1.innerHTML=userid;
+    li2.innerHTML=content;
+    li3.innerHTML = date;
+
+
+    return ul;
+    
+    }
+
+    function drawing(){
+        commentList.innerHTML="";
+        for(let i = list.length - 1; i>=0; i--){
+            const row = createRow(list[i].userid, list[i].content, list[i].date);
+            commentList.append(row);
+        }
+    }
+
+    function totalRecord(){
+        total.innerHTML=`(${list.length})`;
+    }
+
+
+
+    function commentBtnHandler(e){
+        e.preventDefault();
+        //list.push(e.target.content.value);
+        const input = e.target.content;
+        if(input.value === ""){
+        alert("댓글을 입력 한 후 등록 버튼을 눌러주세요.");
+        return console.log(list);
+        }
+        
+        const commentObj = new Comment(input.value);
+        list.push(commentObj);
+        totalRecord();
+
+
+        drawing();
+        e.target.reset();
+
+
+        return console.log(commentObj);
+    }   
+
+    commentBtn.addEventListener("submit",commentBtnHandler);
+
+ 
+</script>
diff --git a/src/main/webapp/WEB-INF/views/free_boardWrite.html b/src/main/webapp/WEB-INF/views/free_boardWrite.html
new file mode 100644
index 0000000..7930e04
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/free_boardWrite.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>공지사항</title>
+    <link rel="stylesheet" href="../../../../../views/css/css.css">
+    <link rel="stylesheet" href="../../../../../views/css/header.css">
+</head>
+<body>
+    <div id = 'head' class="header">
+      <div class="logo" onclick="location.href='/login'"></div>
+      <div class="button-container">
+        <!-- Conditionally render buttons based on login status -->
+        <!-- For example, you can use server-side templating or JavaScript to determine login status -->
+        <!-- Replace the following buttons with your server-side logic -->
+        <div class="nickname">
+          <div class="username">웹썰미</div>님
+        </div>
+        <button class="button" style="margin: 7px; margin-right: 15px;" onclick=" " location.href='/write'>새 글 작성</button>
+        <button class="button" style="margin: 7px; margin-right: 15px;" onclick="logout()">로그아웃</button>
+        <!-- Or render login/signup buttons -->
+        <!--
+          <button class="button" onclick="location.href='/login'">로그인</button>
+          <button class="button" onclick="location.href='/signup'">회원가입</button>
+        -->
+      </div>
+    </div>
+</body>   
+<style type="text/css">
+    @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+
+    * {
+    margin: 0px;
+    font-family: "Do Hyeon";
+
+    }
+</style>
+<body>
+    <div class="board_wrap">
+        <div class="board_title">
+            <strong>자유게시판</strong>
+            <p>여러 정보들을 공유해주세요.</p>
+        </div>
+        <div class="board_write_wrap">
+            <div class="board_write">
+            <form id="writeFrm">                   
+                <div class="title">   
+                    <dl>
+                      <dt>제목</dt>
+                      <dd><input type="text" name = "subject" placeholder="제목 입력"></dd>
+                    </dl>
+                </div>
+                <div class="info">
+                    <dl>
+                        <dt>아이디</dt>
+                        <dd><input type="text" name = "id" placeholder="글쓴이 입력"></dd>
+                    </dl>
+                </div>
+                <div class="cont">
+                    <textarea name="content" placeholder="내용 입력"></textarea>
+                </div>
+                <div class="idx" style="display: none;">${boardItem.id}</div>
+            </div>
+            <div class="bt_wrap">
+                <a href ="#" id="registrationBtn">등록</a>
+                <!--input type="submit" value="등록">-->
+
+                <a href="free_boardList.html">취소</a>
+            </form>      
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<script type="module"></script>
+<script>
+
+
+  const registrationBtn = document.getElementById("registrationBtn");
+
+  registrationBtn.addEventListener("click", async (e) => {
+    e.preventDefault();
+
+  const subject = document.querySelector('input[name="subject"]').value;
+  const id = document.querySelector('input[name="id"]').value;
+  const content = document.querySelector('textarea[name="content"]').value;
+
+  // 각 필드를 개별적으로 확인
+  if (!subject || !id || !content) {
+    alert("제목, 아이디, 내용을 모두 입력해주세요!");
+    return;
+  }
+
+  try {
+    const response = await axios.post(`http://35.212.196.164/freeboard/insertnewcontent/${id}/${subject}/${content}`);
+
+    console.log(response.data);
+
+    // 응답 데이터를 확인하여 성공 또는 실패 처리
+    if (response.data === true ) {
+      console.log("새글 등록 성공!");
+      // 성공 시 리다이렉트하거나 기타 작업 수행 가능
+
+      // 성공 시 리다이렉트하거나 기타 작업 수행 가능
+      window.location.href = 'free_boardList.html';
+        
+    } else {
+      console.log('새글 등록 실패!');
+      // 실패 시 처리, 오류 메시지 표시 등
+    }
+  } catch (error) {
+    console.error("POST 요청 중 오류 발생:", error);
+    // 오류 처리, 오류 메시지 표시 등
+  }
+});
+
+
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/views/storeEdit.html b/src/main/webapp/WEB-INF/views/storeEdit.html
new file mode 100644
index 0000000..4551082
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/storeEdit.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>공지사항</title>
+    <link rel="stylesheet" href="../../../../../views/css/css.css">
+    <link rel="stylesheet" href="../../../../../views/css/header.css">
+
+</head>
+
+<body>
+    <div id = 'head' class="header">
+      <div class="logo" onclick="location.href='/login'"></div>
+      <div class="button-container">
+        <!-- Conditionally render buttons based on login status -->
+        <!-- For example, you can use server-side templating or JavaScript to determine login status -->
+        <!-- Replace the following buttons with your server-side logic -->
+        <div class="nickname">
+          <div class="username">웹썰미</div>님
+        </div>
+        <button class="button" style="margin: 7px; margin-right: 15px;" onclick=" " location.href='/write'>새 글 작성</button>
+        <button class="button" style="margin: 7px; margin-right: 15px;" onclick="logout()">로그아웃</button>
+        <!-- Or render login/signup buttons -->
+        <!--
+          <button class="button" onclick="location.href='/login'">로그인</button>
+          <button class="button" onclick="location.href='/signup'">회원가입</button>
+        -->
+      </div>
+    </div>
+</body>   
+<style type="text/css">
+    @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+
+    * {
+    margin: 0px;
+    font-family: "Do Hyeon";
+
+    }
+</style>
+<body>
+    <div class="board_wrap">
+        <div class="board_title">
+            <strong>알바 후기 게시판(수정)</strong>
+            <p>작성한 후기를 확인해주세요.</p>
+        </div>
+        <div class="board_write_wrap">
+            <div class="board_write">
+                <div class="title">
+                    <dl>
+                        <dt>제목</dt>
+                        <dd><input type="text" name = "subject" placeholder="제목 입력"></dd>
+                    </dl>
+                </div>
+                <div class="info">
+                    <dl>
+                        <dt>아이디</dt>
+                        <dd><input type="text" name = "id" placeholder="아이디 입력"></dd>
+                    </dl>
+                </div>
+                <div class="cont">
+                    <textarea name = "content" placeholder="내용 입력"></textarea>
+                </div>
+            </div>
+            <div class="bt_wrap">
+                <a href="#" id="editbtn" class="on">수정</a>
+                <a href="store_List.html">취소</a>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+
+<script>
+    const Editbtn = document.getElementById("editbtn");
+
+    Editbtn.addEventListener("click", (e) => {
+    e.preventDefault();
+
+    const subject = document.querySelector('input[name="subject"]').value;
+    const id = document.querySelector('input[name="id"]').value;
+    const content = document.querySelector('textarea[name="content"]').value;
+
+    // Do something with the collected data, e.g., log it
+    console.log("Title:", subject);
+    console.log("Author:", id);
+    console.log("Content:", content);
+
+    // Check each field individually
+    if (!subject) {
+      alert("수정하실 제목을 입력해주세요!");
+      return;
+    }
+
+    if (!id) {
+      alert("수정하실 아이디를 입력해주세요 !");
+      return;
+    }
+
+    if (!content) {
+      alert("수정하실 내용을 입력해주세요 !");
+      return;
+    }
+
+
+    // Redirect to view.html after collecting data
+    window.location.href = "store_List.html";
+    });
+
+
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/views/storeView.html b/src/main/webapp/WEB-INF/views/storeView.html
new file mode 100644
index 0000000..eb0d7d0
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/storeView.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv = "X-UA-Compatible" content="IE-edge">
+    <meta name="viewport" content="width=device-width", initial-scale="1.0">
+    <title>공지사항</title>
+    <link rel="stylesheet" href="../../../../../views/css/css.css">
+    <link rel="stylesheet" href="../../../../../views/css/comment.css">
+    <link rel = 'stylesheet' href = "../../../../../views/css/header.css">
+    <link rel = 'stylesheet' href = "../css/index.css">
+    
+</head>
+<style type="text/css">
+    @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+
+    * {
+    margin: 0px;
+    font-family: "Do Hyeon";
+
+    }
+</style>
+<body>
+    <div id = 'head' class="header">
+        <div class="logo" onclick="location.href='/login'"></div>
+        <div class="button-container">
+          <!-- Conditionally render buttons based on login status -->
+          <!-- For example, you can use server-side templating or JavaScript to determine login status -->
+          <!-- Replace the following buttons with your server-side logic -->
+          <div class="nickname">
+            <div class="username">웹썰미</div>님
+          </div>
+          <button class="button" style="margin: 7px; margin-right: 15px;" onclick=" " location.href='/write'>새 글 작성</button>
+          <button class="button" style="margin: 7px; margin-right: 15px;" onclick="logout()">로그아웃</button>
+          <!-- Or render login/signup buttons -->
+          <!--
+            <button class="button" onclick="location.href='/login'">로그인</button>
+            <button class="button" onclick="location.href='/signup'">회원가입</button>
+          -->
+        </div>
+      </div>
+    <div class="board_wrap">
+        <div class="board_title">
+            <strong>알바 후기 게시판</strong>
+            <p>알바생 여러분들 자유롭게 후기를 적어주세요.</p>
+        </div>
+        <div class="board_view_wrap">
+            <div class="board_view">
+                <div class="title">
+                    글 제목이 들어갑니다.
+                <div class="info">
+                    <dl>
+                        <dt>번호</dt>
+                        <dd id="PostNumber">1</dd>
+                    </dl>
+                    <dl>
+                        <dt>글쓴이</dt>
+                        <dd id="userNickname">김이름</dd>
+                    </dl>
+                    <dl>
+                        <dt>작성일</dt>
+                        <dd id="createdAt">2021.1.16</dd>
+                    </dl>
+                </div>
+                <div class="cont" id="cotent">
+                    글 내용이 들어갑니다<br>
+                    글 내용이 들어갑니다<br>
+                    글 내용이 들어갑니다<br>
+                    글 내용이 들어갑니다<br>
+                    글 내용이 들어갑니다<br>
+                    글 내용이 들어갑니다<br>
+                    글 내용이 들어갑니다<br>
+                    글 내용이 들어갑니다
+                </div>
+            </div>     
+            <div class="bt_wrap">
+                <a href="store_List.html" class="on">목록</a>
+                <a href="storeEdit.html">수정</a>
+                <!--button id="btn-delete" class ="btn btn-danger">삭제</button>-->
+            </div>
+        </div>
+    </div>
+</body>
+<body>
+    <div>
+        <li class="comment-form">
+            <form id="commentFrm">
+                <h3>댓글 작성<span></span></h3>
+                <span class="ps_box">
+                    <input type="text" placeholder="댓글 내용을 입력해주세요" class="int" name="content"/>
+                </span>
+                <input type="submit" class ="btn" value="등록">
+            </form> 
+        </li>
+        <li id="comment-list"></li>
+    </div>
+    <!--script src="js/comment.js"></script>--> 
+</body>
+</html>
+
+<script>
+    // 자신이 작성한 글 목록 가져오기 API
+      const commentBtn = document.querySelector("#commentFrm");
+      const commentList = document.querySelector("#comment-list");
+      const total = document.querySelector("h3 > span");
+  
+      const list =[];
+  
+      function Comment(content){
+      this.userid="cloudcoke";   // user_nickname으로 바꾸고
+      this.content = content;
+      this.date="2023-11-23";  // createdat으로 하면됌.
+  
+      }
+  
+      function createRow(userid, content, date){
+      const ul = document.createElement("ul");
+      const li1 = document.createElement("li");
+      const li2 = document.createElement("li");
+      const li3 = document.createElement("li");
+  
+      ul.append(li1);
+      ul.append(li2);
+      ul.append(li3);
+  
+      ul.setAttribute("class", "comment-row");
+      li1.setAttribute("class", "comment-id");
+      li2.setAttribute("class", "comment-content");
+      li3.setAttribute("class", "comment-date");
+  
+      li1.innerHTML=userid;
+      li2.innerHTML=content;
+      li3.innerHTML = date;
+  
+  
+      return ul;
+      
+      }
+  
+      function drawing(){
+          commentList.innerHTML="";
+          for(let i = list.length - 1; i>=0; i--){
+              const row = createRow(list[i].userid, list[i].content, list[i].date);
+              commentList.append(row);
+          }
+      }
+  
+      function totalRecord(){
+          total.innerHTML=`(${list.length})`;
+      }
+  
+  
+  
+      function commentBtnHandler(e){
+          e.preventDefault();
+          //list.push(e.target.content.value);
+          const input = e.target.content;
+          if(input.value === ""){
+          alert("댓글을 입력 한 후 등록 버튼을 눌러주세요.");
+          return console.log(list);
+          }
+          
+          const commentObj = new Comment(input.value);
+          list.push(commentObj);
+          totalRecord();
+  
+  
+          drawing();
+          e.target.reset();
+  
+  
+          return console.log(commentObj);
+      }   
+
+      commentBtn.addEventListener("submit",commentBtnHandler);
+
+  
+  
+  
+  </script>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/views/storeWrite.html b/src/main/webapp/WEB-INF/views/storeWrite.html
new file mode 100644
index 0000000..62e681d
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/storeWrite.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>공지사항</title>
+    <link rel="stylesheet" href="../../../../../views/css/css.css">
+    <link rel="stylesheet" href="../../../../../views/css/header.css">
+</head>
+<body>
+    <div id = 'head' class="header">
+      <div class="logo" onclick="location.href='/login'"></div>
+      <div class="button-container">
+        <!-- Conditionally render buttons based on login status -->
+        <!-- For example, you can use server-side templating or JavaScript to determine login status -->
+        <!-- Replace the following buttons with your server-side logic -->
+        <div class="nickname">
+          <div class="username">웹썰미</div>님
+        </div>
+        <button class="button" style="margin: 7px; margin-right: 15px;" onclick=" " location.href='/write'>새 글 작성</button>
+        <button class="button" style="margin: 7px; margin-right: 15px;" onclick="logout()">로그아웃</button>
+        <!-- Or render login/signup buttons -->
+        <!--
+          <button class="button" onclick="location.href='/login'">로그인</button>
+          <button class="button" onclick="location.href='/signup'">회원가입</button>
+        -->
+      </div>
+    </div>
+</body>   
+<style type="text/css">
+    @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+
+    * {
+    margin: 0px;
+    font-family: "Do Hyeon";
+
+    }
+</style>
+<body>
+    <div class="board_wrap">
+        <div class="board_title">
+            <strong>알바후기 게시판</strong>
+            <p>알바생 여러분들 후기 작성해주세요.</p>
+        </div>
+        <div class="board_write_wrap">
+            <div class="board_write">
+            <form id="writeFrm">                   
+                <div class="title">   
+                    <dl>
+                        <dt>제목</dt>
+                        <dd><input type="text" name = "subject" placeholder="제목 입력"></dd>
+                    </dl>
+                </div>
+                <div class="info">
+                    <dl>
+                        <dt>아이디</dt>
+                        <dd><input type="text" name = "id" placeholder="글쓴이 입력"></dd>
+                    </dl>
+                </div>
+                <div class="cont">
+                    <textarea name="content" placeholder="내용 입력"></textarea>
+                </div>
+            </div>
+            <div class="bt_wrap">
+                <!--a href ="#" id="registrationBtn">등록</a>-->
+                <a href="storeView.html">등록</a>
+                <!--input type="submit" value="등록">-->
+
+                <a href="store_List.html">취소</a>
+            </form>      
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+
+
+<script>
+
+
+   
+
+    /*
+    const registrationBtn = document.getElementById("registrationBtn");
+
+    registrationBtn.addEventListener("click", async (e) => {
+        e.preventDefault();
+
+    const subject = document.querySelector('input[name="subject"]').value;
+    const id = document.querySelector('input[name="id"]').value;
+    const content = document.querySelector('textarea[name="content"]').value;
+
+    // 각 필드를 개별적으로 확인
+    if (!subject || !id || !content) {
+        alert("제목, 아이디, 내용을 모두 입력해주세요!");
+        return;
+    }
+
+    var sql = {
+        params :{
+        title : subject,
+        user_nickname : id,
+        content : content,
+        }
+    }
+
+    try {
+        const response = await axios.post('/api/customers/freeboard/insertnewcontent', sql);
+
+        console.log(response.data);
+
+        // 응답 데이터를 확인하여 성공 또는 실패 처리
+        if (response.data.data === 1) {
+        console.log("새글 등록 성공!");
+        // 성공 시 리다이렉트하거나 기타 작업 수행 가능
+        window.location.href = "/free_boardList.html";
+        } else {
+        console.log('새글 등록 실패!');
+        // 실패 시 처리, 오류 메시지 표시 등
+        }
+    } catch (error) {
+        console.error("POST 요청 중 오류 발생:", error);
+        // 오류 처리, 오류 메시지 표시 등
+    }
+    });*/
+    /*
+    const subject = document.querySelector('input[name="subject"]').value;
+    const id = document.querySelector('input[name="id"]').value;
+    const content = document.querySelector('textarea[name="content"]').value;
+
+    axios({
+        method : 'post',
+        url : ''
+    })*/
+
+
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/views/store_List.html b/src/main/webapp/WEB-INF/views/store_List.html
new file mode 100644
index 0000000..18a3d31
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/store_List.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html> 
+<html lang="ko">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>헤더 </title>
+        <link rel = 'stylesheet' href = "../../../../../views/css/header.css">
+        <link rel = 'stylesheet' href = "../../../../../views/css/css.css">
+       
+      </head>
+      
+      <body>
+        <div id = 'head' class="header">
+          <div class="logo" onclick="location.href='/login'"></div>
+          <div class="button-container">
+              <!-- Add login and signup buttons -->
+            <button class="button" style="margin: 7px; margin-right: 15px; " id="loginBtn" onclick="location.href='/login'">로그인</button>
+            <button class="button" style="margin: 7px; margin-right: 15px; " id="signupBtn" onclick="location.href='/signup'">회원가입</button>
+            <div class="nickname" id="nicknameDiv"></div>
+            <button class="button" style="margin: 7px; margin-right: 15px; display: none;" id="logoutBtn" onclick="logout()">로그아웃</button>
+                    
+          </div>
+        </div>
+      
+        <div class="nav__bar">
+          <ul class="nav__menu">
+            <li><a style="margin-top: 10px; margin-left: 10px;" class="white_font"> 홈 </a></li>
+            <li><a style="margin-top: 10px; margin-left: 10px;" class="white_font"> 후기 목록 </a></li>
+            <li><a style="margin-top: 10px; margin-left: 10px;" class="white_font"> 자유게시판 </a></li>
+            <li><a style="margin-top: 10px; margin-left: 10px;" class="white_font"> 마이페이지 </a></li>
+          </ul>
+        </div>
+      </body> 
+      <body>
+        <div class="category">
+            <ul class="store__menu">
+              <li><a style="margin-top: 40px; margin-left: 30px;"> 카페 </a></li>
+              <li><a style="margin-top: 40px; margin-left: 30px;" > 술집 </a></li>
+              <li><a style="margin-top: 40px; margin-left: 30px;"> 놀이공원 </a></li>
+              <li><a style="margin-top: 40px; margin-left: 30px;" > 피시방 </a></li>
+              <li><a style="margin-top: 40px; margin-left: 30px;" > 영화관 </a></li>
+            </ul>
+          </div>
+      </body>
+      <body>
+        <div class="category2">
+            <ul class="store__menu2">
+              <li><a style="margin-top: 10px; margin-left: 30px;"> 패스트푸드점 </a></li>
+              <li><a style="margin-top: 10px; margin-left: 30px;" > 음식점 </a></li>
+              <li><a style="margin-top: 10px; margin-left: 30px;"> 편의점 </a></li>
+              <li><a style="margin-top: 10px; margin-left: 30px;" > 뷰티 </a></li>
+              <li><a style="margin-top: 10px; margin-left: 30px;" > 일일알바 </a></li>
+            </ul>
+          </div>
+      </body>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>알바후기 게시판</title>
+    <link rel="stylesheet" href="../../../../../views/css/css2.css">
+</head>
+<style type="text/css">
+    @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+
+    * {
+    margin: 0px;
+    font-family: "Do Hyeon";
+
+    }
+</style>
+<body>
+    <div class="board_wrap">
+        <div class="board_title">
+            <strong>알바 후기 게시판</strong>
+            <p>알바생 여러분들 마음껏 후기를 보시고 작성해주세요.</p>
+        </div>
+        <div class="board_list_wrap">
+            <div class="board_list" id ="boardList">
+                <div class="top">
+                    <div class="num">번호</div>  <!-- 아마 id가 들어가면됌.-->
+                    <div class="cate">카테고리</div>
+                    <div class="title">제목</div>  <!--title-->
+                    <div class="writer">글쓴이</div> <!--user_nickname-->
+                    <div class="date">작성일</div> <!--createdAt-->
+                </div>
+                <div>
+                    <div class="num">5</div>
+                    <div class="cate">카페</div>
+                    <div class="title"><a href="free_boardView.html">글 제목이 들어갑니다.</a></div>
+                    <div class="writer">김이름</div>
+                    <div class="date">2021.1.15</div>
+                </div>
+                <div>
+                    <div class="num">4</div>
+                    <div class="cate">카페</div>
+                    <div class="title"><a href="free_boardView.html">글 제목이 들어갑니다.</a></div>
+                    <div class="writer">김이름</div>
+                    <div class="date">2021.1.15</div>
+                </div>
+                <div>
+                    <div class="num">3</div>
+                    <div class="cate">카페</div>
+                    <div class="title"><a href="free_boardView.html">글 제목이 들어갑니다.</a></div>
+                    <div class="writer">김이름</div>
+                    <div class="date">2021.1.15</div>
+                </div>
+                <div>
+                    <div class="num">2</div>
+                    <div class="cate">카페</div>
+                    <div class="title"><a href="free_boardView.html">글 제목이 들어갑니다.</a></div>
+                    <div class="writer">김이름</div>
+                    <div class="date">2021.1.15</div>
+                </div>
+                <div>
+                    <div class="num">1</div>
+                    <div class="cate">카페</div>
+                    <div class="title"><a href="free_boardView.html">글 제목이 들어갑니다.</a></div>
+                    <div class="writer">김이름</div>
+                    <div class="date">2021.1.15</div>
+                </div>
+            </div>
+            <div class="board_page">
+                <a href="#" class="bt first"></a>
+                <a href="#" class="bt prev"></a>
+                <a href="#" class="num on">1</a>
+                <a href="#" class="num">2</a>
+                <a href="#" class="num">3</a>
+                <a href="#" class="num">4</a>
+                <a href="#" class="num">5</a>
+                <a href="#" class="bt next">></a>
+                <a href="#" class="bt last">>></a>
+            </div>
+            <div class="bt_wrap">
+                <a href="../../../../../views/storeWrite.html" class="on">글쓰기</a>
+                <!--<a href="#">수정</a>-->
+            </div>
+        </div>
+    </div>
+</body>
+</html> 
diff --git a/views/comment.html b/views/comment.html
new file mode 100644
index 0000000..1aef050
--- /dev/null
+++ b/views/comment.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv = "X-UA-Compatible" content="IE-edge">
+        <meta name="viewport" content="width=device-width; initiak-scale=1.0">
+        <title>Document</title>
+        <link rel = "stylesheet" href="css/comment.css">
+    </head>
+    <body>
+        <div>
+            <ul class ="comment">
+                <li class="comment-form">
+                    <form id="commentFrm">
+                        <h3>댓글 작성<span></span></h3>
+                        <span class="ps_box">
+                            <input type="text" placeholder="댓글 내용을 입력해주세요" class="int" name="content"/>
+                        </span>
+                        <input type="submit" class ="btn" value="등록">
+                    </form> 
+                </li>
+                <li id="comment-list"></li>
+            </ul>
+        </div>
+        <!--script scr="js/comment.js"></script>-->
+    </body>
+</html>
+
+<script>
+
+    const commentBtn = document.querySelector("#commentFrm");
+    const commentList = document.querySelector("#comment-list");
+    const total = document.querySelector("h3 > span");
+
+    const list =[];
+    const replies = [];
+
+    function Comment(content){
+    this.userid="cloudcoke";   // user_nickname으로 바꾸고
+    this.content = content;
+    this.date="2023-11-23";  // createdat으로 하면됌.
+    //this.replies =  // 답글을 저장하는 배열
+
+    }
+
+function createRow(userid, content, date, index){
+    const ul = document.createElement("ul");
+    const li1 = document.createElement("li");
+    const li2 = document.createElement("li");
+    const li3 = document.createElement("li");
+    //const li4 = document.createElement("li");
+
+    ul.append(li1);
+    ul.append(li2);
+    ul.append(li3);
+    //ul.append(li4);
+
+    ul.setAttribute("class", "comment-row");
+    li1.setAttribute("class", "comment-id");
+    li2.setAttribute("class", "comment-content");
+    li3.setAttribute("class", "comment-date");
+    //li4.setAttribute("class", "comment-reply");
+
+    li1.innerHTML= userid;
+    li2.innerHTML= content;
+    li3.innerHTML = date;
+    //li4.innerHTML = "<button class='reply-btn' data-index='" + index + "'>답글</button>"; // 답글 버튼 추가
+
+
+    return ul;
+    
+    }
+
+    function drawing(){
+        commentList.innerHTML="";
+        for(let i = list.length - 1; i>=0; i--){
+            const row = createRow(list[i].userid, list[i].content, list[i].date);
+            commentList.append(row);
+        }
+    }
+
+    function totalRecord(){
+        total.innerHTML=`(${list.length})`;
+    }
+
+
+
+    function commentBtnHandler(e){
+        e.preventDefault();
+        //list.push(e.target.content.value);
+        const input = e.target.content;
+        if(input.value === ""){
+        alert("댓글을 입력 한 후 등록 버튼을 눌러주세요.");
+        return console.log(list);
+        }
+        
+        const commentObj = new Comment(input.value);
+        list.push(commentObj);
+        totalRecord();
+
+
+        drawing();
+        e.target.reset();
+
+
+        return console.log(commentObj);
+    }   
+
+    commentBtn.addEventListener("submit",commentBtnHandler);
+
+    document.addEventListener("click", function (e) {
+    if (e.target.classList.contains("reply-btn")) {
+        const index = e.target.getAttribute("data-index");
+        const replyContent = prompt("답글을 입력하세요:");
+    }
+});
+
+</script>
\ No newline at end of file
diff --git a/views/commentAdd.html b/views/commentAdd.html
new file mode 100644
index 0000000..705add3
--- /dev/null
+++ b/views/commentAdd.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv = "X-UA-Compatible" content="IE-edge">
+        <meta name="viewport" content="width=device-width; initiak-scale=1.0">
+        <title>Document</title>
+        <link rel = "stylesheet" href="css/comment.css">
+    </head>
+    <body>
+        <div>
+            <ul class ="comment">
+                <li class="comment-form">
+                    <form id="commentFrm">
+                        <h3>댓글 작성<span></span></h3>
+                        <span class="ps_box">
+                            <input type="text" placeholder="댓글 내용을 입력해주세요" class="int" name="content"/>
+                        </span>
+                        <input type="submit" class ="btn" value="등록">
+                    </form> 
+                </li>
+                <li id="comment-list"></li>
+                <li id="commentAdd-list"></li>
+            </ul>
+        </div>
+        <!--script scr="js/comment.js"></script>-->
+    </body>
+</html>
+
+<script>
+    const commentBtn = document.querySelector("#commentFrm");
+    const commentList = document.querySelector("#comment-list");
+    const commentAddList = document.querySelector("#commentAdd-list");
+    const total = document.querySelector("h3 > span");
+
+    const list = [];
+
+    function Comment(userid, content, date) {
+        this.userid = userid;
+        this.content = content;
+        this.date = date;
+        this.replies = [];
+}
+
+    function createRow(comment) {
+        const ul = document.createElement("ul");
+        const li1 = document.createElement("li");
+        const li2 = document.createElement("li");
+        const li3 = document.createElement("li");
+        const replyButton = document.createElement("button");
+
+        ul.append(li1);
+        ul.append(li2);
+        ul.append(li3);
+        ul.append(replyButton);
+
+        ul.setAttribute("class", "comment-row");
+        li1.setAttribute("class", "comment-id");
+        li2.setAttribute("class", "comment-content");
+        li3.setAttribute("class", "comment-date");
+        replyButton.setAttribute("class", "reply-button");
+
+        li1.innerHTML = comment.userid;
+        li2.innerHTML = comment.content;
+        li3.innerHTML = comment.date;
+        replyButton.innerHTML = "답글 달기";
+
+        replyButton.addEventListener("click", function () {
+            const replyContent = prompt("답글을 입력하세요:");
+            if (replyContent !== null && replyContent !== "") {
+                const reply = new Comment("cloudcoke", replyContent, "2023-11-23");
+                comment.replies.push(reply);
+                drawing();
+            }
+        });
+
+        return ul;
+    }
+
+    function drawing() {
+        commentList.innerHTML = "";
+        for (let i = list.length - 1; i >= 0; i--) {
+            const row = createRow(list[i]);
+            commentList.append(row);
+
+            for (let j = list[i].replies.length - 1; j >= 0; j--) {
+                const replyRow = createRow(list[i].replies[j]);
+                replyRow.style.marginLeft = "20px";
+                commentList.append(replyRow);
+            }
+        }
+    }
+
+    function totalRecord() {
+        total.innerHTML = `(${list.length})`;
+    }
+
+    function commentBtnHandler(e) {
+        e.preventDefault();
+
+        const input = e.target.content;
+        if (input.value === "") {
+            alert("댓글을 입력한 후 제출해주세요.");
+            return;
+        }
+
+        const commentObj = new Comment("cloudcoke", input.value, "2023-11-23");
+        list.push(commentObj);
+        totalRecord();
+
+        drawing();
+        e.target.reset();
+    }
+
+    commentBtn.addEventListener("submit", commentBtnHandler);
+</script>
\ No newline at end of file
diff --git a/views/css/comment.css b/views/css/comment.css
new file mode 100644
index 0000000..b59c1cd
--- /dev/null
+++ b/views/css/comment.css
@@ -0,0 +1,124 @@
+*{
+    margin : 0;
+    padding : 0;
+}
+
+ul,
+li{
+    list-style:none;
+}
+
+.comment{
+    display : flex;
+    flex-direction : column;
+    flex-wrap : nowrap;
+    padding: 30px;
+    width : 600px;
+    margin : 0 auto;
+}
+
+.comment > li{
+    margin-top: 20px;
+}
+
+.comment > li:nth-child(1){
+    margin : 0px;
+}
+
+.comment-row{
+    display : flex;
+    justify-content: space-between;
+    flex-direction: row;
+}
+
+.comment-row{
+    margin-top: 20px;
+    width: 100;
+}
+
+.comment-row > li:nth-child(2){
+    flex-shrink : 0;
+    flex-grow: 1;
+    padding-left: 25px;
+    z-index : 1;
+    width: 100%;
+
+}
+
+.comment > li:nth-child(2){
+    width: 85px;
+}
+
+.comment-form > form{
+    display : flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.comment-form > form > h3{
+    width : 80%;
+    margin: 14px 0px 14px 0px;
+}
+
+.comment-content{
+    cursor : pointer;
+    word-break : break-all;
+    padding-right :25px;
+   
+}
+
+.ps_box{
+    display: block;
+    position: relative;
+    width: 80%;
+    height: 51px;
+    border: solid 1px #dadada;
+    padding : 10px 14px 10px 14px;
+    background: #fff;
+    box-sizing: border-box;
+}
+
+.ps_box > input{
+    outline: none;
+}
+
+.int{
+    display: block;
+    position: relative;
+    width : 100%;
+    height: 29px;
+    padding-right: 25px;
+    line-height: 29px;
+    border: none;
+    background: #fff;
+    font-size: 15px;
+    box-sizing: border-box;
+    z-index: 10;
+}
+
+.btn{
+    width:18%;
+    padding: 18px 0 16px;
+    text-align: center;
+    box-sizing: border-box;
+    text-decoration: none;
+    border: none;
+    background: #333;
+    color: #fff;
+    font-size: 14px;
+}
+
+.comment-delete-btn{
+    display: inline-block;
+    margin-left: 7px;
+    cursor: pointer;
+}
+
+.comment-update-input{
+    border: none;
+    border-bottom: 1px solid #333;
+    font-size: 16px;
+    color: #666;
+    outline: none;
+}
\ No newline at end of file
diff --git a/views/css/header.css b/views/css/header.css
new file mode 100644
index 0000000..94941b4
--- /dev/null
+++ b/views/css/header.css
@@ -0,0 +1,189 @@
+.header {
+    display: flex;
+    flex-direction: row;
+    width: 100vw;
+    height: 75px;
+    background-color: #ffffff;
+    position: sticky;
+    top: 0px;
+    z-index: 999;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+  }
+  
+  .button {
+    font: inherit;
+    font-size: 0.9rem;
+    align-items: center;
+    width: 100px;
+    height: 35px;
+    padding-top: 0.3rem;
+    margin: 0px;
+    border: 0px solid;
+    background-color: #ffcc00;
+    border-radius: 10px;
+    cursor: pointer;
+  }
+  
+  .button:hover {
+    transition: all 0.3s;
+    font-weight: bold;
+  }
+  
+  .button-container {
+    display: flex;
+    width: 90%;
+    margin: 0px auto;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  
+  .logo {
+    display: flex;
+    width: 13rem;
+    height: 4.5rem;
+    background-size: cover;
+    background-image: url("your-logo-image-url");
+    align-items: flex-end;
+    justify-content: center;
+  }
+  
+  .nickname {
+    width: 12.5rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-right: 10px;
+    align-items: center;
+  }
+  
+  .username {
+    font-weight: 700;
+    width: 7rem;
+    margin-right: 5px;
+    display: flex;
+    justify-content: flex-end;
+    font-size: 1rem;
+  }
+  .nav__bar {
+          background-color: rgb(237, 185, 43);
+          padding-bottom: .8%;
+          color:  #fff;
+          margin: 0 auto;
+      }
+      
+      .nav__menu {
+          display: flex;
+          justify-content: space-around;
+          font-size: 1.2rem;
+          align-items: center;
+          margin: 0 auto;
+          color:  #fff;
+      }
+      
+      
+      /* common */
+      a {
+          cursor: pointer;
+          text-decoration: none;
+      }
+      
+      li {
+          list-style: none;
+      }
+      
+      .white_font {
+          color:  #fff;
+      }
+  
+      .cate {
+          margin-top: 50px; 
+          align-items: flex-end;
+          justify-content: center;
+      }
+
+      .category {
+        background-color: transparent;
+        padding-bottom: 1.0%;
+        color: #fff;
+        margin: 50px auto;
+        width: 80%;
+        border: 2px solid rgb(237, 185, 43); /* Add border style */
+        border-radius: 20px; /* Adjust the value as needed for the desired roundness */
+        vertical-align: middle;
+    }
+    .store__menu {
+        display: flex;
+        justify-content: space-around;
+        font-size: 1.7rem;
+        align-items: center;
+        margin: 5px auto;
+        margin-top: 5px 0;
+        color:  black;
+    }
+    
+    
+    /* common */
+    a {
+        cursor: pointer;
+        text-decoration: none;
+    }
+    
+    li {
+        list-style: none;
+    }
+
+    .category a {
+      color: black; /* Set the desired font color */
+      text-decoration: none; /* Remove underline from links if needed */
+  }
+
+    .cate {
+        margin-top: 50px; 
+        align-items: flex-end;
+        justify-content: center;
+    }    
+
+
+  .category2 {
+      background-color: transparent;
+      padding-bottom: 1.0%;
+      color: #fff;
+      margin: 5px auto;
+      width: 80%;
+      border: 2px solid rgb(237, 185, 43); /* Add border style */
+      border-radius: 20px; /* Adjust the value as needed for the desired roundness */
+      vertical-align: middle;
+    }
+    .store__menu2 {
+        display: flex;
+        justify-content: space-around;
+        font-size: 1.7rem;
+        align-items: center;
+        margin: 5px auto;
+        margin-top: 5px 0;
+        color:  black;
+    }
+    
+    
+    /* common */
+    a {
+        cursor: pointer;
+        text-decoration: none;
+    }
+    
+    li {
+        list-style: none;
+    }
+
+    .category a {
+      color: black; /* Set the desired font color */
+      text-decoration: none; /* Remove underline from links if needed */
+  }
+
+    .cate {
+        margin-top: 50px; 
+        align-items: flex-end;
+        justify-content: center;
+    }      
\ No newline at end of file
diff --git a/views/css/header1.css b/views/css/header1.css
new file mode 100644
index 0000000..a6825f1
--- /dev/null
+++ b/views/css/header1.css
@@ -0,0 +1,72 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.header {
+    display: flex;
+    flex-direction: row;
+    width: 100vw;
+    height: 75px;
+    background-color: #ffffff;
+    position: sticky;
+    top: 0px;
+    z-index: 999;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+}
+
+.button {
+    font: inherit;
+    font-size: 0.9rem;
+    align-items: center;
+    width: 100px;
+    height: 35px;
+    padding-top: 0.3rem;
+    margin: 0px;
+    border: 0px solid;
+    background-color: #ffcc00;
+    border-radius: 10px;
+}
+
+.button:hover {
+    transition: all 0.3s;
+    font-weight: bold;
+}
+
+.button-container {
+    display: flex;
+    width: 90%;
+    margin: 0px auto;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+div.logo {
+    display: flex;
+    width: 13rem;
+    height: 4.5rem;
+    background-size: cover;
+    background-image: url('../logo/logo3.jpg'); /* Add your background image path here */
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.nickname {
+    width: 12.5rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-right: 10px;
+    align-items: center;
+}
+
+.username {
+    font-weight: 700;
+    width: 7rem;
+    margin-right: 5px;
+    display: flex;
+    justify-content: flex-end;
+    font-size: 1rem;
+}
\ No newline at end of file
diff --git a/views/css/login.css b/views/css/login.css
new file mode 100644
index 0000000..b4cdbe2
--- /dev/null
+++ b/views/css/login.css
@@ -0,0 +1,82 @@
+html {
+    height: 100%;
+  }
+  
+  body {
+    height: 100%;
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    background-color: white;  /* 색깔 바꾸기*/
+  }
+  
+  #main-holder {
+    width: 50%;
+    height: 70%;
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    background-color: white;
+    border-radius: 7px;
+    box-shadow: 0px 0px 10px 4px yellow;
+  }
+  
+  #login-error-msg-holder {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    justify-items: center;
+    align-items: center;
+  }
+  
+  #login-error-msg {
+    width: 23%;
+    text-align: center;
+    margin: 0;
+    padding: 5px;
+    font-size: 12px;
+    font-weight: bold;
+    color: #8a0000;
+    border: 1px solid #8a0000;
+    background-color: #e58f8f;
+    opacity: 0;
+  }
+  
+  #error-msg-second-line {
+    display: block;
+  }
+  
+  #login-form {
+    align-self: flex-start;
+    display: grid;
+    justify-items: center;
+    align-items: center;
+  }
+  
+  .login-form-field::placeholder {
+    color: #3a3a3a;
+  }
+  
+  .login-form-field {
+    border: none;
+    border-bottom: 1px solid #3a3a3a;    /* 색깔 바꾸기 */
+    margin-bottom: 10px;
+    border-radius: 3px;
+    outline: none;
+    padding: 0px 0px 5px 5px;
+  }
+  
+  #login-form-submit {
+    width: 100%;
+    padding: 7px;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    font-weight: bold;
+    background-color: #3a3a3a;
+    cursor: pointer;
+    outline: none;
+  }
+  
\ No newline at end of file
diff --git a/views/css/myprofile.css b/views/css/myprofile.css
new file mode 100644
index 0000000..c08ba2e
--- /dev/null
+++ b/views/css/myprofile.css
@@ -0,0 +1,106 @@
+#loginForm {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 32rem;
+    margin: 0px auto;
+    margin-top: 6.25rem;
+    border: 2px solid #f9ebff;
+    border-radius: 20px;
+    padding: 50px;
+    background-color: #f4f4f4;
+  }
+  
+  #loginForm h1 {
+    display: flex;
+    justify-content: center;
+    margin: 0px auto;
+    margin-bottom: 30px;
+  }
+  
+  #loginForm p {
+    font-size: 20px;
+    color: #000000;
+    margin: 0px auto;
+    margin-bottom: 5px;
+    margin-left: 50px;
+    margin-top: 10px;
+  }
+  
+  #loginForm input {
+    width: 25rem;
+    height: 40px;
+    margin: 0px auto;
+    padding-left: 5px;
+  }
+  
+  #loginForm button {
+    width: 12.5rem;
+    height: 3rem;
+    margin: 30px auto;
+    background-color: #ffcc00;
+    border: 0px solid #e6ccef;
+    border-radius: 5px;
+    font-size: 1rem;
+  }
+  
+  #question {
+    font-size: 1rem;
+    width: 12.5rem;
+    display: flex;
+    flex-direction: row;
+    margin-left: 19rem;
+    justify-content: flex-end;
+  }
+  
+  @media all and (max-width: 414px) {
+    #loginForm {
+      width: auto;
+      margin: 1rem;
+    }
+  
+    #loginForm h1 {
+      font-size: 1.5rem;
+    }
+  
+    #loginForm p {
+      margin-left: 0;
+      font-size: 1rem;
+    }
+  
+    #loginForm input {
+      width: 100%;
+    }
+  
+    #question {
+      width: auto;
+      margin: 0;
+      justify-content: center;
+    }
+  }
+  
+  @media all and (max-width: 375px) {
+    #loginForm {
+      width: auto;
+      margin: 1rem;
+    }
+  
+    #loginForm h1 {
+      font-size: 1.5rem;
+    }
+  
+    #loginForm p {
+      margin-left: 0;
+      font-size: 1rem;
+    }
+  
+    #loginForm input {
+      width: 100%;
+    }
+  
+    #question {
+      width: auto;
+      margin: 0;
+      justify-content: center;
+    }
+  }
\ No newline at end of file
diff --git a/views/css/signup.css b/views/css/signup.css
new file mode 100644
index 0000000..1682eb1
--- /dev/null
+++ b/views/css/signup.css
@@ -0,0 +1,83 @@
+*{
+    margin: 3px;
+    box-sizing: border-box;
+    font-size: 13px;
+}
+
+html {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: 150px;
+    padding-bottom: 20px;
+    background-color: white;
+}
+
+body {
+    width: 70%;
+    border: 1px solid black;
+    background-color: white;
+    box-shadow: 0px 0px 5px 2px yellow;
+}
+
+input{
+    border: 1px solid black;
+    border-radius: 3px;
+    line-height: 35px;
+    font-size: 15px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+
+.wrapper {
+    padding: 10px;
+}
+
+div {
+    padding-top: 3px;
+    padding-bottom: 8px;
+}
+
+.title {
+    text-align: center;
+    font-weight: 700;
+}
+
+.email input {
+    width: 100%;
+}
+
+.name input {
+    width: 100%;
+}
+
+.password input {
+    width: 100%;
+}
+
+.passwordCheck input {
+    width: 100%;
+}
+
+.gender {
+    text-align: center;
+}
+
+.signUp button {
+    width: 100%;
+    cursor:pointer;
+    
+}
+
+button{
+    cursor: pointer;
+    height: 30px;
+}
+
+.error{
+    font-size: 1px;
+    height: 20px;
+    color:red;
+    font-weight: 700;
+}
\ No newline at end of file
diff --git a/views/css/style1.css b/views/css/style1.css
new file mode 100644
index 0000000..21e899b
--- /dev/null
+++ b/views/css/style1.css
@@ -0,0 +1,81 @@
+@media (max-width: 1000px) {
+    .board_wrap {
+        width: 100%;
+        min-width: 320px;
+        padding: 0 30px;
+        box-sizing: border-box;
+    }
+
+    .board_list .num,
+    .board_list .writer,
+    .board_list .count {
+        display: none;
+    }
+
+    .board_list .date {
+        width: 40%;
+    }
+
+    .board_list .title {
+        text-indent: 10px;
+    }
+
+    .board_list .top .title {
+        text-indent: 0;
+    }
+
+    .board_page a {
+        width: 26px;
+        height: 26px;
+    }
+
+    .board_page a.bt {
+        padding-top: 7px;
+    }
+    
+    .board_page a.num {
+        padding-top: 6px;
+    }
+
+    .board_view .info dl {
+        width: 50%;
+        padding: 0;
+    }
+
+    .board_view .info dl:nth-child(-n+2) {
+        margin-bottom: 5px;
+    }
+
+    .board_view .info dl::before {
+        display: none;
+    }
+
+    .board_view .info dl dt,
+    .board_view .info dl dd {
+        font-size: 1.2rem;
+    }
+
+    .board_write .info dl {
+        width: 49%;
+    }
+
+    .board_write .info dl:first-child {
+        margin-right: 2%;
+    }
+
+    .board_write .title dt,
+    .board_write .info dt {
+        display: none;
+    }
+
+    .board_write .title dd,
+    .board_write .info dd {
+        width: 100%;
+    }
+
+    .board_write .title input[type="text"],
+    .board_write .info input[type="text"],
+    .board_write .info input[type="password"] {
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/views/ex/join.html b/views/ex/join.html
new file mode 100644
index 0000000..faaab51
--- /dev/null
+++ b/views/ex/join.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <title>회원가입 페이지</title>
+
+    <link href="css/signup.css" rel="stylesheet" />
+    <script src="/js/signup.js"></script>
+
+</head>
+
+<body>
+    <div class="wrapper">
+        <div class="title"><h1 style="font-size: 21px;">회원가입</h1></div>
+        <div class="email">
+            <input id="email" type="text" placeholder="아이디를 입력해 주세요.">
+            <button id="checkIdButton" onclick="checkID()">중복체크</button>
+            <div id="emailError" class="error"></div>
+        </div>
+        <div class="name">
+            <input id="name"  type="text" placeholder="닉네임을 입력해 주세요.">
+            <div id="nameError" class="error"></div>
+        </div>
+        <div class="password">
+            <input id="password" type="password" placeholder="비밀번호를 입력해 주세요.">
+            <div id="passwordError" class="error"></div>
+        </div>
+        <div class="passwordCheck">
+            <input id="passwordCheck" type="password" placeholder="비밀번호를 다시 입력해 주세요.">
+            <div id="passwordCheckError" class="error"></div>
+        </div>
+        <!--div class="gender">
+          <input id="gender_man" type="radio" name="gender">남성  
+          <input id="gender_woman" type="radio" name="gender">여성
+          <div id="genderError" class="error"></div>
+      </div>-->
+      <div class="line">
+          <hr>
+      </div>
+      <div class="signUp">
+          <button id="signUpButton" onclick="signUpCheck()">가입하기</button>
+      </div>
+  </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/ex/login.html b/views/ex/login.html
new file mode 100644
index 0000000..d647405
--- /dev/null
+++ b/views/ex/login.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login</title>
+  <link rel="stylesheet" href="css/login.css">
+  <script defer src="js/login.js"></script>
+</head>
+
+<body>
+  <main id="main-holder">
+    <h1 id="login-header">알바닷컴</h1>
+    <h2 id="login-header2">Login</h2>
+    
+    <div id="login-error-msg-holder">
+      <p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>
+    </div>
+    
+    <form id="login-form">
+      <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Email">
+      <input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password">
+      <input type="submit" value="Login" id="login-form-submit">
+    </form>
+  
+  </main>
+</body>
+
+</html>
diff --git a/views/ex/myProfile.html b/views/ex/myProfile.html
new file mode 100644
index 0000000..c6e4fa7
--- /dev/null
+++ b/views/ex/myProfile.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <link rel="stylesheet" href="css/myprofile.css">
+    <link rel="stylesheet" href="css/style1.css">
+
+</head>
+<body>
+    <div id="loginForm">
+        <h1>Login</h1>
+        <p>ID</p>
+        <input type="text" id="idInput" placeholder="Please enter your ID.">
+        <p>Password</p>
+        <input type="password" id="pwdInput" placeholder="Please enter your password.">
+        <button onclick="login()">Log in</button>
+        <div id="question">
+            <p>Not a member yet?</p>
+            <a href="/signup">Join the membership</a>
+        </div>
+    </div>
+    <script src="path-to-your-scripts.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/views/ex/profile.html b/views/ex/profile.html
new file mode 100644
index 0000000..2a2a1cc
--- /dev/null
+++ b/views/ex/profile.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>사용자 프로필</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+</head>
+
+<body>
+  <div class="container">
+    <h1>사용자 프로필</h1>
+
+    <div class="form-group">
+      <label for="id">아이디</label>
+      <input type="text" class="form-control" id="id" value="사용자 아이디" readonly>
+    </div>
+
+    <div class="form-group">
+      <label for="name">닉네임</label>
+      <input type="text" class="form-control" id="name" value="사용자 닉네임" readonly>
+    </div>
+
+    <div class="form-group">
+      <label for="oneline">한줄 소개</label>
+      <input type="text" class="form-control" id="oneline" value="사용자 한줄 소개" readonly>
+    </div>
+
+    <div class="form-group">
+      <label for="birthdate">생년월일</label>
+      <input type="text" class="form-control" id="birthdate" value="사용자 생년월일" readonly>
+    </div>
+
+    <button class="btn btn-primary" onclick="location.href='/views/profile_edit'">프로필 편집</button>
+  </div>
+
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+</body>
+
+</html>
diff --git a/views/ex/profile_edit.html b/views/ex/profile_edit.html
new file mode 100644
index 0000000..d6bb86c
--- /dev/null
+++ b/views/ex/profile_edit.html
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head><!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-RDCM2F77Z4"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+  
+    gtag('config', 'G-RDCM2F77Z4');
+  </script>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>프로필 편집</title>
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
+    <style>
+        .bg-light{
+            height: 1053px;
+            padding-top:55px;
+            padding-bottom:75px;
+        }
+        .flex-fill.mx-xl-5.mb-2{
+            margin: 0 auto;
+            width : 700px;
+            padding-right: 7rem;
+            padding-left: 7rem;
+        }
+        /* <!-- 입력창 --> */
+        .container.py-4{
+            margin: 0 auto;
+            width : 503px;
+        }
+        .d-grid.gap-2{
+            padding-top: 30px;
+            display: flex;
+        }
+        
+        .bir_yy,.bir_mm,.bir_dd{
+            width:160px;
+            display:table-cell;
+        }
+        .bir_mm+.bir_dd, .bir_yy+.bir_mm{
+            padding-left:10px;
+        }
+    
+    </style>
+          <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+</head>
+
+<body>
+    <section class="bg-light">
+        <div class="container sm">
+            <div class="row align-items-center justify-content-between">
+                <span class="h1 text-center-dark h4">프로필 수정</span>              
+            </div>
+
+            <form action = "/api/users/edit" onsubmit="return trySubmit()" method="post">
+              <div class="form-group">              
+              <label for="id" class="form-label mt-4">아이디</label>
+              <input type="text" onkeyup="idReCheck(this);" class="form-control" name="id" id="id" value='' readonly>
+            </div>
+
+                <div class="form-group">
+               		<label for="name" class="form-label mt-4">새로운 닉네임</label>
+                    <input type="text" onkeyup="nameReCheck(this);" class="form-control" name="name" id="name" aria-describedby="checknameFeedback" required>
+                    <div id='checknameFeedback' class="invalid-feedback">
+                        동일한 닉네임이 존재합니다.
+                    </div>
+                    <button type="button" onclick="nameCheck()" class="btn btn-primary col-6 mx-auto">중복 체크</button>
+                </div>
+
+                <div class="form-group has-success">
+                  <label class="form-label mt-4" for="newPW">새로운 비밀번호</label>
+                  <input type="password" onkeyup="pwcheck(this);" name="newPW" class="form-control" id="newPW" required>
+                        </div>
+        
+                <div class="form-group has-danger">
+                  <label class="form-label mt-4" for="checkPW">비밀번호 확인</label> 
+                  <input type="password" onkeyup="pwcheck(this);" class="form-control is-invalid" id="checkPW" aria-describedby="checkPWFeedback" required>
+                  <div id="checkPWFeedback" class="invalid-feedback">
+                                비밀번호가 다릅니다.
+                            </div>
+
+              <div class="form-group">
+               <label class="form-label mt-4">한줄 소개</label>
+               <input type="text" class="form-control" name="oneline" id="oneline" required>
+                </div>
+
+                <div class ="bir_wrap">
+                	<label class="form-label mt-4">생년월일</label>
+                	<div class="bir_yy">
+                		<span class="ps_box">
+                			<input type="text" class="form-control" name="year" id="yy" placeholder="년(4자)" maxlength="4" required>
+                		</span>
+                	</div>
+                	<div class="bir_mm">
+                		<span class="ps_box focus">
+			                <select class="form-select" name="month" id="mm" required>
+						        <option>월</option>
+						        <option>1</option>
+						        <option>2</option>
+						        <option>3</option>
+						        <option>4</option>
+						        <option>5</option>
+						        <option>6</option>
+						        <option>7</option>
+						        <option>8</option>
+						        <option>9</option>
+						        <option>10</option>
+						        <option>11</option>
+						        <option>12</option>
+						     </select>
+                		</span>
+                	</div>
+                	<div class="bir_dd">
+                		<span class="ps_box">
+                			<input type ="text" class="form-control" name="day" id ="dd" placeholder="일" maxlength="2" required>
+                		</span>
+                	</div>
+                </div>
+
+				<div class="d-grid gap-2 col-6 mx-auto">
+                    <button class="btn btn-primary col-sm-10"  type="submit">수정하기</button>
+                    <button class="btn btn-secondary col-sm-8" onclick="location.href='/profile'"> 취소 </button>
+                </div>
+            </form>
+        </div>
+    </section>
+
+    <script>
+      const token = {"token":""};
+      fetch("/api/users/login")
+        .then((response) => response.json())
+        .then((token) => {
+          console.log('성공', token["token"])
+          sessionStorage.setItem("token", token["token"]); //sessionStorage에 token저장
+          const jwt = sessionStorage.getItem("token")
+          console.log(parseJwt(jwt))
+          const id = parseJwt(jwt)
+          $('input[name=id]').attr('value',id);
+          
+        })
+        var id = id;
+
+      
+      //JWT 복호화 후 id만 리턴
+      function parseJwt (token) {
+          var base64Url = token.split('.')[1];
+          var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+          var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
+              return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+          }).join(''));
+
+          return JSON.parse(jsonPayload).id;
+      };
+
+        function pwcheck(){
+          let inputPW = $('#newPW').val();
+          let checkPW = $('#checkPW').val();
+  
+          if (checkPW == inputPW){
+  
+            document.getElementById('checkPW').className='form-control is-valid';
+            document.getElementById('checkPWFeedback').className = "valid-feedback"
+            document.getElementById('checkPWFeedback').innerHTML="비밀번호가 일치합니다."
+          }
+          else{
+            document.getElementById('checkPW').className='form-control is-invalid';
+            document.getElementById('checkPWFeedback').className = "invalid-feedback"
+            document.getElementById('checkPWFeedback').innerHTML="비밀번호가 다릅니다."
+          }
+        }
+
+        function nameCheck(){
+          if ($('#name').val()!='') {
+            let data = { "name": $('#name').val() };
+            fetch('/join', {
+                method: 'POST', 
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+              })
+              .then((response) => response.json())
+              .then((data) => {
+                console.log('성공:', data);
+                if (data == 1) {
+                document.getElementById('name').className="form-control is-invalid"
+                document.getElementById('checknameFeedback').innerHTML="동일한 닉네임이 존재합니다."
+                document.getElementById('checknameFeedback').className="invalid-feedback"
+                }
+                else {
+                document.getElementById('name').className="form-control is-valid"
+                document.getElementById('checknameFeedback').innerHTML="사용 가능한 닉네임입니다."
+                document.getElementById('checknameFeedback').className="valid-feedback"
+                }
+            
+              })
+              .catch((error) => {
+                console.log('실패:', error);
+            });
+          }
+        }
+
+  
+        function idReCheck(){
+          document.getElementById('id').className="form-control"
+        }
+        function nameReCheck(){
+          document.getElementById('name').className="form-control"
+        }
+  
+        function trySubmit(){
+          //둘다 문제 없는 상황이면 submit
+          if(document.getElementById('checkPW').className=='form-control is-valid' 
+          && document.getElementById('name').className=="form-control is-valid"){
+            console.log("오예~~")
+            let origin = $('#newPW').val()
+            let code = btoa(origin)
+            $('#newPW').val(code)
+            console.log($('#newPW').val())
+
+            return true;
+          }
+          else{
+            console.log("놉")
+            return false;
+          }
+        }
+  
+        
+  
+      </script>
+  
+      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/header.html b/views/header.html
new file mode 100644
index 0000000..c9e3a9a
--- /dev/null
+++ b/views/header.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/header1.css">
+    <title>Header</title>
+</head>
+<style type="text/css">
+    @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+
+    * {
+    margin: 0px;
+    font-family: "Do Hyeon";
+
+    }
+</style>
+<body>
+    <div id="header" class="header">
+        <div class="logo" onclick="navigateTo('/login')"></div>
+        <div class="button-container">
+            <!-- Buttons will be dynamically added here -->
+        </div>
+    </div>
+
+    <script src="../js/header.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/views/js/comment.js b/views/js/comment.js
new file mode 100644
index 0000000..315b2ad
--- /dev/null
+++ b/views/js/comment.js
@@ -0,0 +1,74 @@
+const commentBtn = document.querySelector("#commentFrm");
+const commentList = document.querySelector("#comment-list");
+//const commentAddList = document.querySelector("#commentAdd-list");
+const total = document.querySelector("h3 > span");
+
+const list =[];
+
+function Comment(content){
+    this.userid="cloudcoke";   // user_nickname으로 바꾸고
+    this.content = content;
+    this.date="2023-11-23";  // createdat으로 하면됌.
+
+    }
+
+function createRow(userid, content, date){
+    const ul = document.createElement("ul");
+    const li1 = document.createElement("li");
+    const li2 = document.createElement("li");
+    const li3 = document.createElement("li");
+
+    ul.append(li1);
+    ul.append(li2);
+    ul.append(li3);
+
+    ul.setAttribute("class", "comment-row");
+    li1.setAttribute("class", "comment-id");
+    li2.setAttribute("class", "comment-content");
+    li3.setAttribute("class", "comment-date");
+
+    li1.innerHTML=userid;
+    li2.innerHTML=content;
+    li3.innerHTML = date;
+
+
+    return ul;
+    
+    }
+
+function drawing(){
+    commentList.innerHTML="";
+    for(let i = list.length - 1; i>=0; i--){
+        const row = createRow(list[i].userid, list[i].content, list[i].date);
+        commentList.append(row);
+    }
+}
+
+function totalRecord(){
+    total.innerHTML=`(${list.length})`;
+    }
+
+
+
+function commentBtnHandler(e){
+    e.preventDefault();
+        //list.push(e.target.content.value);
+    const input = e.target.content;
+    if(input.value === ""){
+    alert("댓글을 입력 한 후 등록 버튼을 눌러주세요.");
+    return console.log(list);
+    }
+        
+    const commentObj = new Comment(input.value);
+    list.push(commentObj);
+    totalRecord();
+
+
+    drawing();
+    e.target.reset();
+
+
+    return console.log(commentObj);
+}   
+
+commentBtn.addEventListener("submit",commentBtnHandler);
\ No newline at end of file
diff --git a/views/js/commentAdd.js b/views/js/commentAdd.js
new file mode 100644
index 0000000..b02b7bf
--- /dev/null
+++ b/views/js/commentAdd.js
@@ -0,0 +1,85 @@
+const commentBtn = document.querySelector("#commentFrm");
+    const commentList = document.querySelector("#comment-list");
+    const commentAddList = document.querySelector("#commentAdd-list");
+    const total = document.querySelector("h3 > span");
+
+    const list = [];
+
+    function Comment(userid, content, date) {
+        this.userid = userid;
+        this.content = content;
+        this.date = date;
+        this.replies = [];
+}
+
+    function createRow(comment) {
+        const ul = document.createElement("ul");
+        const li1 = document.createElement("li");
+        const li2 = document.createElement("li");
+        const li3 = document.createElement("li");
+        const replyButton = document.createElement("button");
+
+        ul.append(li1);
+        ul.append(li2);
+        ul.append(li3);
+        ul.append(replyButton);
+
+        ul.setAttribute("class", "comment-row");
+        li1.setAttribute("class", "comment-id");
+        li2.setAttribute("class", "comment-content");
+        li3.setAttribute("class", "comment-date");
+        replyButton.setAttribute("class", "reply-button");
+
+        li1.innerHTML = comment.userid;
+        li2.innerHTML = comment.content;
+        li3.innerHTML = comment.date;
+        replyButton.innerHTML = "답글 달기";
+
+        replyButton.addEventListener("click", function () {
+            const replyContent = prompt("답글을 입력하세요:");
+            if (replyContent !== null && replyContent !== "") {
+                const reply = new Comment("cloudcoke", replyContent, "2023-11-23");
+                comment.replies.push(reply);
+                drawing();
+            }
+        });
+
+        return ul;
+    }
+
+    function drawing() {
+        commentList.innerHTML = "";
+        for (let i = list.length - 1; i >= 0; i--) {
+            const row = createRow(list[i]);
+            commentList.append(row);
+
+            for (let j = list[i].replies.length - 1; j >= 0; j--) {
+                const replyRow = createRow(list[i].replies[j]);
+                replyRow.style.marginLeft = "20px";
+                commentList.append(replyRow);
+            }
+        }
+    }
+
+    function totalRecord() {
+        total.innerHTML = `(${list.length})`;
+    }
+
+    function commentBtnHandler(e) {
+        e.preventDefault();
+
+        const input = e.target.content;
+        if (input.value === "") {
+            alert("댓글을 입력한 후 제출해주세요.");
+            return;
+        }
+
+        const commentObj = new Comment("cloudcoke", input.value, "2023-11-23");
+        list.push(commentObj);
+        totalRecord();
+
+        drawing();
+        e.target.reset();
+    }
+
+    commentBtn.addEventListener("submit", commentBtnHandler);
\ No newline at end of file
diff --git a/views/js/view.js b/views/js/view.js
new file mode 100644
index 0000000..6a968af
--- /dev/null
+++ b/views/js/view.js
@@ -0,0 +1,21 @@
+// view.js
+document.addEventListener("DOMContentLoaded", () => {
+    // Retrieve posts from wherever you store them (simulated here)
+    const posts = [
+        { subject: "Post 1", id: "User1", content: "Content of post 1" },
+        { subject: "Post 2", id: "User2", content: "Content of post 2" },
+        // ... Add more posts as needed ...
+    ];
+
+    const contentElement = document.getElementById("content");
+
+    // Render posts
+    posts.forEach((post) => {
+        const postElement = document.createElement("div");
+        postElement.innerHTML = `
+            <h2>${post.subject}</h2>
+            <p>${post.id} - ${post.content}</p>
+        `;
+        contentElement.appendChild(postElement);
+    });
+});