index 프론트

project_index/index_server.js

@@ -0,0 +1,36 @@
+const express = require('express')
+
+const app = express()
+
+var shopname = "";
+
+// 랜더링할 파일이 있는 디렉토리
+app.set('views', __dirname + '/views');
+// 사용하는 뷰 엔진
+app.set('view engine', 'ejs');
+
+//디자인 파일이 위치할 정적 요소들을 저장하는 디렉토리
+app.use(express.static(__dirname + '/public'));
+
+app.get('/', function(req, res){
+    res.render('index');
+});
+
+app.get('/index', function(req, res){
+    res.render('index');
+});
+
+app.get('/shop', function(req, res){
+    shopname = req.query.shopname;
+    console.log(shopname);
+    res.render('shop');
+});
+
+app.get('/payment', function(req, res){
+    res.render('payment');
+});
+
+app.listen(3000, function () {
+	console.log('server on!');
+});
+

project_index/public/css/index.css

@@ -0,0 +1,258 @@
+/* 매장정보 */
+
+.main_text {
+  font-size: x-large;
+  color: #000;
+}
+
+.shop_distance_text {
+  font-size: small;
+  color: #000;
+  text-align: right;
+}
+
+.test {
+  text-align: right;
+}
+
+.subscribe-position {
+  width: 60%;
+  margin: auto;
+
+}
+
+
+/* 슬라이드쇼 */
+#slide_show {
+  width: auto;
+  height: auto;
+  overflow: hidden;
+}
+
+#slide_show>ul {
+  font-size: 0;
+}
+
+#slide_show>ul>li {
+  display: inline-block;
+  font-size: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.slider {
+  width: 50%;
+  margin: 100px auto;
+}
+
+.slick-slide {
+  margin: 0px 20px;
+}
+
+.slick-slide img {
+  width: 100%;
+}
+
+.slick-prev:before,
+.slick-next:before {
+  color: black;
+}
+
+
+.slick-slide {
+  transition: all ease-in-out .3s;
+  opacity: .2;
+}
+
+.slick-active {
+  opacity: .5;
+}
+
+.slick-current {
+  opacity: 1;
+}
+
+
+/* 햄버거바 */
+
+.header {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+}
+
+.menu_btn {
+  text-align: right;
+  padding: 10px;
+}
+
+.menu_bg {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  position: absolute;
+  top: 0;
+  display: none;
+}
+
+.sidebar_menu {
+  width: 30%;
+  height: 50%;
+  background: #fff;
+  position: absolute;
+  top: 0;
+  right: -50%;
+
+}
+
+.close_btn {
+  width: 25px;
+  height: 25px;
+  margin: 10px;
+}
+
+.close_btn>a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.menu_wrap {
+  list-style: none;
+  background: #fff;
+}
+
+.menu_wrap li a {
+  color: #000;
+  text-decoration: none;
+}
+
+.menu_wrap li a:hover {
+  color: rgb(118, 130, 240);
+  text-decoration: none;
+}
+
+.menu_coupon {
+  width: 100%;
+  background: #fff;
+}
+
+.menu_coupon_div {
+  width: 50%;
+  height: 100px;
+  margin-top: 5%;
+  display: inline-block;
+  background: #000;
+}
+
+
+
+/* 로그인 로그아웃 */
+
+.logoutBtn {
+  visibility: hidden;
+}
+
+
+/* 모달 */
+.modal-wrapper-addWorker {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.25s ease-in-out;
+}
+
+.modal-wrapper-addWorker.open {
+  opacity: 1;
+  visibility: visible;
+}
+
+.modal_head {
+  width: 100%;
+  height: 60px;
+  padding: 12px 30px;
+  overflow: hidden;
+  background: #8ca0f7;
+}
+
+.modal-wrapper-addWorker .modal {
+  width: 600px;
+  height: 400px;
+  display: block;
+  margin: 50% 0 0 -300px;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  background: #fff;
+  opacity: 0;
+  transition: all 0.5s ease-in-out;
+}
+
+.modal-wrapper-addWorker.open .modal {
+  margin-top: -200px;
+  opacity: 1;
+}
+
+.btn-close-addWorker {
+  font-size: 25px;
+  display: block;
+  float: right;
+  color: rgb(255, 255, 255)255, 255, 255);
+}
+
+.content-addWorker {
+  padding-top: 10px;
+  text-align: center;
+}
+
+.content-receive {
+  padding-top: 10px;
+}
+
+
+
+
+/* 관심작가 */
+#myfvworker {
+  text-align: center;
+  padding-top: 10px;
+  font-family: "Nanum Gothic", sans-serif;
+  height: 150px;
+  overflow: auto;
+}
+
+#goShop {
+  width: 150px;
+  height: 30%;
+  flex: 1 1 auto;
+  margin: 10px;
+  padding: 10px;
+  text-align: center;
+  text-transform: uppercase;
+  transition: 0.5s;
+  background-size: 200% auto;
+  color: white;
+  /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
+  box-shadow: 0 0 20px #eee;
+  border-radius: 10px;
+  border: 0;
+  outline: 0;
+  background-image: linear-gradient(to right, #8ca0f7 0%, #74a9f9 19%, #86b0fd 60%, #8bc6fe 100%);
+}
+
+
+#goShop:hover {
+  background-position: right center;
+  /* change the direction of the change here */
+}
+
+
+#largePopup {
+  visibility: hidden;
+}

project_index/public/js/index.js

@@ -0,0 +1,41 @@
+$(document).on('ready', function() {
+
+    var store_name = "";
+
+    // 가게 클릭 (자주가는)
+    $('.table_body_fre').click(function(){
+      var tr = $(this);
+      var strname = tr.find('td:eq(0)').text();
+      store_name = strname;
+      $('.modal-wrapper-addWorker').toggleClass('open');
+      $('.modal_shopname').empty();
+      $('.modal_shopname').append('<text>' + store_name + ' 정보 </text>');
+
+    });
+
+    // 가까운 가게
+    $('.table_body_near').click(function(){
+      var tr = $(this);
+      var strname = tr.find('td:eq(0)').text();
+      store_name = strname;
+      $('.modal-wrapper-addWorker').toggleClass('open');
+      $('.modal_shopname').empty();
+      $('.modal_shopname').append('<text>' + store_name + ' 정보 </text>');
+    });
+
+
+    $(document).on('click','.btn-close-addWorker',function(e){
+      $('.modal-wrapper-addWorker').toggleClass('open');
+      $('#service').toggleClass('blur-it');
+
+      store_name = "";
+
+    });
+
+
+    // 쇼핑하기 클릭
+    $('#goShop').click(function(){
+      location.href="shop?shopname=" + store_name;
+    });
+
+});