#54 mbti 관련 라우터 추가

HiAlcohol · Jan 22, 2022 · f43a70c · f43a70c
1 parent 3aaa8ab
commit f43a70c
Show file tree

Hide file tree

Showing 5 changed files with 263 additions and 0 deletions.
diff --git a/main.js b/main.js
@@ -18,6 +18,7 @@ const boardProcessRouter = require('./routes/boardProcessRouter.js');
 const boardUpdateProcessRouter = require('./routes/boardUpdateProcessRouter.js');
 const boardDeleteProcessRouter = require('./routes/boardDeleteProcessRouter.js');
 const myboardRouter = require('./routes/myboardRouter.js');
+const mbtiRouter = require('./routes/mbtiRouter.js');
 const env = require('./config/env.js');
 
 const port = env.port;
@@ -73,6 +74,8 @@ app.use('/likes', likeRouter);
 
 app.use('/myboard', myboardRouter);
 
+app.use('/mbti', mbtiRouter);
+
 app.get('/logout', function(req, res) {
 	req.logout();
 	req.session.save(() => {

diff --git a/routes/mbtiRouter.js b/routes/mbtiRouter.js
@@ -0,0 +1,26 @@
+const express = require('express');
+const router = express.Router();
+const mbti_start = require('../template/mbti_start.js');
+const mbti_test = require('../template/mbti_test.js');
+const mbti_result = require('../template/mbti_result.js');
+// var db = require('../config/db'); // db.js 폴더 경로
+
+
+router.get('/', function(request, response){
+
+    const body = mbti_start.HOME();
+	response.send(mbti_start.HTML(body));
+});
+
+router.get('/test', function(request, response){
+    const body = mbti_test.HOME();
+	response.send(mbti_test.HTML(body));
+});
+
+router.get('/result', function(request, response){
+    const body = mbti_result.HOME();
+	response.send(mbti_result.HTML(body));
+});
+
+
+module.exports = router;
diff --git a/template/mbti_result.js b/template/mbti_result.js
@@ -0,0 +1,109 @@
+module.exports = {
+    HTML: function(body) {
+       const head = this.HEAD();
+       const tail = this.TAIL();
+       return `
+       ${head}
+       ${body}
+       ${tail}
+       `
+    },
+    HOME: function( ) {
+       return `
+       <script>
+       $("#restart").click(function() {
+       location.href = "test_start.html";
+   });
+   
+   $('.copy').click(function(){	
+   var link= $('#link');
+   link.css('display','block').select();
+   document.execCommand("Copy");
+   alert('결과 링크가 복사되었습니다.');	
+   return false;
+   });
+   
+   // // 카카오 공유를 위한 임시코드
+   // Kakao.init('b305a1173710e4ff765e09b5a62e314c'); 
+   // function link_kakao() {
+   //   var sh_title = "나와 어울리는 칵테일은?";
+   //   var sh_desc = "당신에게 어울리는 칵테일을 찾아보세요.\nHi Alcohol"; 
+   //   Kakao.Link.sendDefault({ 
+   //     objectType: 'feed', 
+   //     content: {
+   //      title: sh_title, description: sh_desc, 
+   //      imageUrl: "../img/cocktail.png", 
+   //      link: { mobileWebUrl: "모바일 링크 url", 
+   //      webUrl: "PC 링크 url" 
+   //     } 
+   //   }, 
+   // }); 
+   // }
+   
+   
+   </script>
+   
+       <body>
+         <div class="result">
+           <a>당신에게 어울리는 술은</a><br>
+           <img src="/public/img/cocktail.png"><br>
+           <a><span style="font-size: 30px">모히또</span></a>
+           <div class="exp" style="color: white">
+             <ul>
+               <li>낯가림이 심해서 예고없는 갑작스러운 변화는 싫어하는 편이에요.</li>
+               <li>특별한 것보다는 일반적이고 대중적인 것을 선호하는 편이에요.</li>
+               <li>겉보기에는 차가워 보이지만 친구들이 기억 못하는 추억들도 기억하고 있어요.</li>
+               <li>실수는 참지 못해요! 바로 수정해야 마음이 편해져요.</li>
+               <li>모든 일에서 정리정돈은 필수예요.</li>
+             </ul>
+           </div>
+         </div>
+       
+         <div class="match">
+             <div class="best">
+               최고의 궁합<br>
+               <a>데킬라 선라이즈 ></a>
+             </div>
+             <div class="worst">
+               최악의 궁합<br>
+               <a>미도리샤워 ></a>
+             </div>
+         </div>
+       
+         <main>
+           <div class="button"><button id="restart" class="btn"> 처음으로</button></div><br>
+           
+           <div class="copy"><button id="copy" class="btn">링크 복사</button></div>
+           <div class="share"><img src="/public/img/bt_kakao.png"><br>공유하기</div>
+          
+           
+           <input type="text" value="복사될 URL c경로" id="link" style="display:none;">
+         </main>
+
+     
+    `
+    },
+    HEAD: function() {
+       return `
+       <!DOCTYPE html>
+       <html lang="en">
+       <head>
+           <meta charset="UTF-8">
+           <title>Hi MBTI Result</title>
+	        <link rel="stylesheet" href="/public/css/test_result.css" />
+         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+         <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+       
+       </head>
+   
+       
+    
+       `;
+    },
+    TAIL: function() {
+       return `
+       </body>
+ </html>
+       `
+    }
+ };
diff --git a/template/mbti_start.js b/template/mbti_start.js
@@ -0,0 +1,53 @@
+module.exports = {
+    HTML: function(body) {
+       const head = this.HEAD();
+       const tail = this.TAIL();
+       return `
+       ${head}
+       ${body}
+       ${tail}
+       `
+    },
+    HOME: function( ) {
+       return `
+       <script>
+       $("#start").click(function() {
+       location.href = "/mbti/test";
+     });
+     </script>
+     
+     <body>
+       <header>
+         <a>당신에게 어울리는 <span style="color:#0BF3BC ">술</span>테스트</a>
+       </header>
+       <main>
+         
+         <div class="button"><button id="start" class="btn">테스트 시작</button></div>
+       </main>
+     
+    `
+    },
+    HEAD: function() {
+       return `
+       <!DOCTYPE html>
+       <html lang="en">
+        
+       <head>
+           <meta charset="UTF-8">
+           <title>Hi MBTI Start</title>
+           <meta name="viewport" content="width=device-width, initial-scale=1.0">
+           <link rel="stylesheet" href="/public/css/test_start.css" />
+           <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+       
+       </head>
+       
+    
+       `;
+    },
+    TAIL: function() {
+       return `
+       </body>
+ </html>
+       `
+    }
+ };
diff --git a/template/mbti_test.js b/template/mbti_test.js
@@ -0,0 +1,72 @@
+module.exports = {
+    HTML: function(body) {
+       const head = this.HEAD();
+       const tail = this.TAIL();
+       return `
+       ${head}
+       ${body}
+       ${tail}
+       `
+    },
+    HOME: function( ) {
+       return `
+       <script>
+       
+       
+       $(".btn").click(function() {
+       location.href = "test.html";
+     });
+     
+     </script>
+       <body>
+       <header>
+       
+       </header>
+       <main>
+           <div><a>1/12</a></div><br>
+       
+           <div class="qna">
+               <p id="q">Q1. 술집에서 멍하니 있는 당신의 머리속은?</p><br><br>
+             
+               <div class="button"><button id="brn_1" class="btn"> 무한한 상상의 나래 속으로</button></div>
+               <br>
+               <div class="button"><button id="btn_2" class="btn"> 집.. 어떻게 가지?</button></div>
+           </div>
+           <br><br>
+           <div class="move">
+           <div class="prev">이전</div>
+           <div class="next">다음</div>
+           </div>
+       </div>
+       
+       </main>
+     
+    `
+    },
+    HEAD: function() {
+       return `
+       <!DOCTYPE html>
+       <html lang="en">
+       
+       <head>
+           <meta charset="UTF-8">
+           <title>Hi MBTI</title>
+           <meta name="viewport" content="width=device-width, initial-scale=1.0">
+           <link rel="stylesheet" href="/public/css/test.css" />
+       
+           <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+       
+       </head>
+      
+   
+       
+    
+       `;
+    },
+    TAIL: function() {
+       return `
+       </body>
+ </html>
+       `
+    }
+ };