이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
송효섭
9311b8f4 1 parent 045c0289

발표 전 최종 확인

Expand all
Inline Side-by-side
Showing 19 changed files with 13 additions and 528 deletions
...@@ -68,20 +68,23 @@ npm install -g npm ...@@ -68,20 +68,23 @@ npm install -g npm
68 npm start 68 npm start
69 ``` 69 ```
70 70
71 -## 사용 방법 (구체화 중) 71 +## 사용 방법
72 -1. IE 8 이상의 웹 브라우저로 localhost:8000에 접속합니다. 72 +1. 본 페이지에서 다운받아 실행하는 경우, IE 8 이상의 웹 브라우저로 localhost:23023에 접속합니다.
73 ![메인-화면](images/mainpage.jpg)<br> 73 ![메인-화면](images/mainpage.jpg)<br>
74 74
75 -2. 나의 근처 공연/ 검색하기 / 로그인 버튼 중 하나를 선택합니다.<br> 75 +2. 나의 근처 공연/ 로그인 버튼 중 하나를 선택합니다.<br>
76 -기능 1. 나의 근처 공연<br> 76 -기능 1. 나의 근처 공연<br>
77 본인의 위치를 받아올 수 있도록 위치 수집 권한을 허락해주세요.<br> 77 본인의 위치를 받아올 수 있도록 위치 수집 권한을 허락해주세요.<br>
78 - 지도 중심에 본인의 위치가 나오고 주변의 공연 장소에 마크가 달립니다.(보완 중)<br> 78 + 권한 허용 후 새로고침하면 지도 중심에 본인의 위치가 표시되고 주변의 공연 장소에 마크가 달립니다.<br>
79 + 주변 공연 장소는 지도 아래에 표로 자동 생성됩니다. 이 곳에서 정보를 확인하시고 전송하기 기능을 사용할 수 있습니다.<br>
80 + 전송하기 기능은 카카오톡으로 접근되며, 접근을 위해서는 추가적인 권한 허용이 요구될 수 있습니다.
79 81
80 -기능 2. 검색하기<br> 82 -기능 2. 검색하기<br>
81 - 원하는 필터를 체크한 후, 검색하면 해당 조건을 충족하는 공연들이 나옵니다.(개발 중)<br> 83 + 원하는 필터를 체크한 후, 검색하면 해당 조건을 충족하는 공연들이 나옵니다.<br>
84 + 검색창에 입력 시 별도의 검색창으로 이동됩니다. 검색 기준은 제목, 위치, 장소를 통합 반영하여 검색합니다.<br>
82 85
83 -기능 3. 로그인<br> 86 -기능 3. 로그인<br>
84 - 카카오톡 계정 로그인을 통해 더 많은 기능을 사용하세요!<br> 87 + 카카오톡 계정 로그인을 통해 더 많은 기능을 사용해보세요!<br>
85 로그인을 하면 보러 가고 싶은 공연의 정보를 카카오톡 친구와 공유할 수 있습니다.<br> 88 로그인을 하면 보러 가고 싶은 공연의 정보를 카카오톡 친구와 공유할 수 있습니다.<br>
86 89
87 ## 라이센스 90 ## 라이센스
......
1 const express = require('express'); 1 const express = require('express');
2 const path = require('path'); 2 const path = require('path');
3 const app = express(); 3 const app = express();
4 -var bodyparser = require('body-parser');
5 var url = require('url'); 4 var url = require('url');
6 require('dotenv').config(); 5 require('dotenv').config();
7 6
...@@ -9,7 +8,7 @@ require('dotenv').config(); ...@@ -9,7 +8,7 @@ require('dotenv').config();
9 var mainRouter = require('./routes') //호출시 index.js 실행 (main.js : title 할당하고 main.html 열어줌) 8 var mainRouter = require('./routes') //호출시 index.js 실행 (main.js : title 할당하고 main.html 열어줌)
10 9
11 //디폴트 포트 값 : 8000 10 //디폴트 포트 값 : 8000
12 -app.set('port', process.env.PORT || 8000); 11 +app.set('port', process.env.PORT || 23023);
13 12
14 //ejs (html포맷) 파일을 웹사이트에 view로 띄워주기 위한 view engine 설정. 13 //ejs (html포맷) 파일을 웹사이트에 view로 띄워주기 위한 view engine 설정.
15 app.set('views', path.join(__dirname, 'views')); 14 app.set('views', path.join(__dirname, 'views'));
......
1 -const searchBox = document.querySelector(".search-box");
2 -const searchBtn = document.querySelector(".search-icon");
3 -const cancelBtn = document.querySelector(".cancel-icon");
4 -const searchInput = document.querySelector("input");
5 -const searchData = document.querySelector(".search-data");
6 -searchBtn.onclick = () => {
7 - searchBox.classList.add("active");
8 - searchBtn.classList.add("active");
9 - searchInput.classList.add("active");
10 - cancelBtn.classList.add("active");
11 - searchInput.focus();
12 - if (searchInput.value != "") {
13 - var values = searchInput.value;
14 - searchData.classList.remove("active");
15 - searchData.innerHTML = "You just typed " + "<span style='font-weight: 500;'>" + values + "</span>";
16 - } else {
17 - searchData.textContent = "";
18 - }
19 -}
20 -cancelBtn.onclick = () => {
21 - searchBox.classList.remove("active");
22 - searchBtn.classList.remove("active");
23 - searchInput.classList.remove("active");
24 - cancelBtn.classList.remove("active");
25 - searchData.classList.toggle("active");
26 - searchInput.value = "";
27 -}
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
1 -@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 -*{
3 - margin: 0;
4 - padding: 0;
5 - box-sizing: border-box;
6 - font-family: 'Poppins', sans-serif;
7 -}
8 -html,body{
9 - display: grid;
10 - height: 100%;
11 - place-items: center;
12 - background: #000000;
13 -}
14 -.search-box{
15 - position: relative;
16 - height: 60px;
17 - width: 60px;
18 - border-radius: 50%;
19 - transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
20 -}
21 -/* //박스 길이 조절 */
22 -.search-box.active{
23 - width: 700px;
24 -}
25 -.search-box input{
26 - width: 100%;
27 - height: 100%;
28 - border: none;
29 - border-radius: 50px;
30 - background: #fff;
31 - outline: none;
32 - padding: 0 60px 0 20px;
33 - font-size: 18px;
34 - opacity: 0;
35 - transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
36 -}
37 -/* 불투명도 */
38 -.search-box input.active{
39 - opacity: 1;
40 -}
41 -.search-box input::placeholder{
42 - color: #a6a6a6;
43 -}
44 -.search-box .search-icon{
45 - position: absolute;
46 - /* 버튼위치 */
47 - right: -380px;
48 - top: 50%;
49 - transform: translateY(-50%);
50 - height: 60px;
51 - width: 60px;
52 - background: #fff;
53 - border-radius: 50%;
54 - text-align: center;
55 - line-height: 60px;
56 - font-size: 22px;
57 - color: #CB25FF;
58 - cursor: pointer;
59 - z-index: 1;
60 - /* transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05); */
61 - /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
62 - transition-timing-function: linear;
63 -}
64 -.search-box .search-icon.active{
65 - right: 5px;
66 - height: 50px;
67 - line-height: 50px;
68 - width: 50px;
69 - font-size: 20px;
70 - background: #CB25FF;
71 - color: #fff;
72 - transform: translateY(-50%) rotate(360deg);
73 -}
74 -.search-box .cancel-icon{
75 - position: absolute;
76 - right: -380px;
77 - top: 50%;
78 - transform: translateY(-50%);
79 - font-size: 25px;
80 - color: #fff;
81 - cursor: pointer;
82 - /* transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
83 - /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
84 - transition-timing-function: linear;
85 -}
86 -.search-box .cancel-icon.active{
87 - right: -40px;
88 -}
89 -.search-box .search-data{
90 - text-align: center;
91 - padding-top: 7px;
92 - color: #fff;
93 - font-size: 18px;
94 - word-wrap: break-word;
95 -}
96 -.search-box .search-data.active{
97 - display: none;
98 -}
1 -<!DOCTYPE html>
2 -<html lang="en" dir="ltr">
3 -
4 -<head>
5 - <meta charset="utf-8">
6 - <title>검색창 애니메이션</title>
7 -</head>
8 -
9 -<body>
10 - <div class="searchBtn">
11 - <link rel="stylesheet" href="btnstyle.css">
12 - <script src="btnsource.js"></script>
13 - <div class="search-box">
14 - <input type="text" placeholder="검색어를 입력하세요 (ex. AAAI 2020)..">
15 - <!-- encoded function for activating search-bar in lisensed resouce -->
16 - <div class="search-icon">
17 - <i class="fas fa-search"></i>
18 - </div>
19 - <div class="cancel-icon">
20 - <i class="fas fa-times"></i>
21 - </div>
22 - <div class="search-data"></div>
23 - </div>
24 - <script src="btnClickEvent.js"></script>
25 - </div>
26 -</body>
27 -
28 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -<div class="searchBtn">
2 - <link rel="stylesheet" href="btnstyle.css">
3 - <script src="btnsource.js"></script>
4 - <div class="search-box">
5 - <input type="text" placeholder="검색어를 입력하세요 (ex. AAAI 2020)..">
6 - <!-- encoded function for activating search-bar in lisensed resouce -->
7 - <div class="search-icon">
8 - <i class="fas fa-search"></i>
9 - </div>
10 - <div class="cancel-icon">
11 - <i class="fas fa-times"></i>
12 - </div>
13 - <div class="search-data"></div>
14 - </div>
15 - <script src="btnClickEvent.js"></script>
16 -</div>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
1 -var http = require('http');
2 -var fs = require('fs');
3 -var app = http.createServer(function (request, response) {
4 - var url = request.url;
5 - if (url == '/') {
6 - url = '/send.html';
7 - }
8 - if (url == '/loginmainpage') {
9 - url = '/loginmainpage.html';
10 - }
11 - response.writeHead(200);
12 - response.end(fs.readFileSync(__dirname + url));
13 -});
14 -
15 -
16 -app.listen(8080);
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8"/>
5 - <title>login page title</title>
6 - <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 -
8 - </head>
9 -<body>
10 - <a id="kakao-login-btn"></a>
11 - <a href="http://developers.kakao.com/logout"></a>
12 - <script>
13 - Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
14 -
15 - console.log(Kakao.isInitialized());
16 -
17 - Kakao.Auth.createLoginButton({
18 - container: '#kakao-login-btn',
19 - success: function(authObj){
20 - console.log(JSON.stringify(authObj));
21 - alert(JSON.stringify(authObj));//authObj -> 토큰임.
22 - redirectUrl
23 - },
24 - fail: function(err){
25 - alert(JSON.stringify(err));
26 - }
27 - })
28 - console.log('hi');
29 - Kakao.Link.createDefaultButton({
30 - container: ".kakao-link",
31 - objectType: "feed",
32 - content:{
33 - title: "안녕하세요",
34 - description: "반갑습니다.",
35 - link:{
36 - webUrl: "https://www.naver.com/",
37 - mobileWebUrl: "https://www.naver.com/"
38 - },
39 - },
40 - })
41 - function kakaoLogout(){
42 - Kakao.Auth.logout(function(response){
43 - alert(response+'logout');
44 - Kakao.API.request({
45 - url: '/v1/user/unlink',
46 - success: function(response) {
47 - console.log(response);
48 - },
49 - fail: function(error) {
50 - console.log(error);
51 - console.log("error");
52 - },
53 - })
54 - })
55 - }
56 -</script>
57 -<script>
58 - console.log('hi');
59 - Kakao.Link.createDefaultButton({
60 - container: ".kakao-link",
61 - objectType: "feed",
62 - content:{
63 - title: "안녕하세요",
64 - description: "반갑습니다.",
65 - link:{
66 - webUrl: "https://www.naver.com/",
67 - mobileWebUrl: "https://www.naver.com/"
68 - },
69 - },
70 - })
71 -</script>
72 -
73 -<a onclick="kakaoLogout();">카카오 로그아웃</a>
74 -</body>
75 -</html>
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <title>login main page title</title>
5 - </head>
6 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8"/>
5 - <title>send page title</title>
6 - <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 - <script src="send.js"></script>
8 - </head>
9 - <body>
10 - <a onclick="sendLink()">보내기</a>
11 - </body>
12 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -function sendLink(){
2 - Kakao.init('0678e32dab56db1c52ac63ab4ccb7663')
3 - Kakao.Link.sendDefault({
4 - objectType: 'feed',
5 - content:{
6 - title: "관심있는 공연 정보",
7 - description: '주소-> http://naver.com',
8 - imageUrl:'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
9 - link:{
10 - mobileWebUrl: 'http://naver.com',
11 - webUrl: 'http://naver.com',
12 - },
13 - },
14 - buttons: [
15 - {
16 - title: '웹으로 보기',
17 - link: {
18 - mobileWebUrl: 'http://naver.com',
19 - webUrl: 'http://naver.com',
20 - },
21 - },
22 - {
23 - title: '웹으로 보기',
24 - link: {
25 - mobileWebUrl: 'http://naver.com',
26 - webUrl: 'http://naver.com',
27 - },
28 - },
29 - ],
30 - })
31 -};
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html lang="en">
3 -
4 -<head>
5 - <meta charset="UTF-8">
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 - <title>Document</title>
8 -</head>
9 -
10 -<body>
11 - <div>
12 - <!-- 로그인 세션 -->
13 - login successed.
14 - </div>
15 -</body>
16 -
17 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html lang="en">
3 -
4 -<head>
5 - <meta charset="UTF-8">
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 - <title>My Gallery</title>
8 -</head>
9 -
10 -<body>
11 - <strong> Culture Gallery</strong>
12 -
13 - <h1>
14 - 수정 기록 | 수정 날짜 : 2020-12-02
15 - </h1>
16 - <div>
17 - <h2>
18 - 웹사이트 node에 연결 -> 디자인 구상 필요
19 - api database 구축 -> 카테고리별로 가공해서 받아오기
20 - </h2>
21 - </div>
22 - <div>
23 - 로그인 버튼 연결
24 - <input type="button" value="Login" onclick="location.href='login'">
25 - </div>
26 - <script type="text/javascript">
27 - function movepage() {
28 - location.href = "/login";
29 - }
30 - </script>
31 - <div>
32 - ================= 수정필요 : 간단한 계획서 =================
33 - <br>
34 - 주제 : 공연전시정보 공공API를 이용한 전시회 웹 플랫폼 ( Culture Gallery (가제))
35 - <br>
36 - 구현하고자 하는 기능은 아래와 같습니다.
37 - <br>
38 - 전국 대, 소규모 전시회의 관람 정보를 알려줌.
39 - 전시회 위치를 카카오맵 api로 받아 올 계획
40 - <br>
41 - > 관심 장르 / 관심 장소에서 진행되는 전시회 구독 기능
42 - <br>
43 - >>> 주기적인 e-mail or 카카오톡 등으로 client에게 알려줌
44 - <br>
45 - >지방에서 진행되는 소규모 전시회나 공연에도 관심을 가질 수 있도록,
46 - <br>
47 - 주최측에서 게시 신청을 할 수 있는 페이지를 마련.
48 - <br>
49 - >>> 가성비 전시회 등을 찾아가서 구경하는 문화 형성 등..
50 - <br>
51 - > 관심 가질만한 공연 정보를 추천해주는 기능
52 - <br>
53 - >>> 과거의 관람 데이터 기반 , 위치 기반
54 - <br>
55 - ===================================================
56 - </div>
57 -</body>
58 -
59 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -function sendLink(){
2 - Kakao.init('0678e32dab56db1c52ac63ab4ccb7663')
3 - Kakao.Link.sendDefault({
4 - objectType: 'feed',
5 - content:{
6 - title: "관심있는 공연 정보",
7 - description: '주소-> http://naver.com',
8 - imageUrl:'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
9 - link:{
10 - mobileWebUrl: 'http://naver.com',
11 - webUrl: 'http://naver.com',
12 - },
13 - },
14 - buttons: [
15 - {
16 - title: '웹으로 보기',
17 - link: {
18 - mobileWebUrl: 'http://naver.com',
19 - webUrl: 'http://naver.com',
20 - },
21 - },
22 - {
23 - title: '웹으로 보기',
24 - link: {
25 - mobileWebUrl: 'http://naver.com',
26 - webUrl: 'http://naver.com',
27 - },
28 - },
29 - ],
30 - })
31 -};
...\ No newline at end of file ...\ No newline at end of file
1 -@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 -*{
3 - margin: 0;
4 - padding: 0;
5 - box-sizing: border-box;
6 - font-family: 'Poppins', sans-serif;
7 -}
8 -html,body{
9 - display: grid;
10 - height: 100%;
11 - place-items: center;
12 - background: #664AFF;
13 -}
14 -::selection{
15 - color: #fff;
16 - background: #664AFF;
17 -}
18 -.search-box{
19 - position: relative;
20 - height: 60px;
21 - width: 60px;
22 - border-radius: 50%;
23 - box-shadow: 5px 5px 30px rgba(0,0,0,.2);
24 - transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
25 -}
26 -.search-box.active{
27 - width: 350px;
28 -}
29 -.search-box input{
30 - width: 100%;
31 - height: 100%;
32 - border: none;
33 - border-radius: 50px;
34 - background: #fff;
35 - outline: none;
36 - padding: 0 60px 0 20px;
37 - font-size: 18px;
38 - opacity: 0;
39 - transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
40 -}
41 -.search-box input.active{
42 - opacity: 1;
43 -}
44 -.search-box input::placeholder{
45 - color: #a6a6a6;
46 -}
47 -.search-box .search-icon{
48 - position: absolute;
49 - right: 0px;
50 - top: 50%;
51 - transform: translateY(-50%);
52 - height: 60px;
53 - width: 60px;
54 - background: #fff;
55 - border-radius: 50%;
56 - text-align: center;
57 - line-height: 60px;
58 - font-size: 22px;
59 - color: #664AFF;
60 - cursor: pointer;
61 - z-index: 1;
62 - transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
63 -}
64 -.search-box .search-icon.active{
65 - right: 5px;
66 - height: 50px;
67 - line-height: 50px;
68 - width: 50px;
69 - font-size: 20px;
70 - background: #664AFF;
71 - color: #fff;
72 - transform: translateY(-50%) rotate(360deg);
73 -}
74 -.search-box .cancel-icon{
75 - position: absolute;
76 - right: 20px;
77 - top: 50%;
78 - transform: translateY(-50%);
79 - font-size: 25px;
80 - color: #fff;
81 - cursor: pointer;
82 - transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
83 -}
84 -.search-box .cancel-icon.active{
85 - right: -40px;
86 - transform: translateY(-50%) rotate(360deg);
87 -}
88 -.search-box .search-data{
89 - text-align: center;
90 - padding-top: 7px;
91 - color: #fff;
92 - font-size: 18px;
93 - word-wrap: break-word;
94 -}
95 -.search-box .search-data.active{
96 - display: none;
97 -}
...@@ -6,7 +6,7 @@ var ejs = require('ejs'); ...@@ -6,7 +6,7 @@ var ejs = require('ejs');
6 6
7 7
8 var mapPage = fs.readFileSync('routes/mapPage.ejs', 'utf8'); 8 var mapPage = fs.readFileSync('routes/mapPage.ejs', 'utf8');
9 -var findPage = fs.readFileSync('routes/findPage.ejs','utf-8'); 9 +var findPage = fs.readFileSync('routes/findPage.ejs', 'utf-8');
10 var dataNum = 0; 10 var dataNum = 0;
11 11
12 router.get('/mappage', (req, res) => { 12 router.get('/mappage', (req, res) => {
...@@ -24,7 +24,7 @@ router.get('/mappage', (req, res) => { ...@@ -24,7 +24,7 @@ router.get('/mappage', (req, res) => {
24 } else { 24 } else {
25 var show_list = []; 25 var show_list = [];
26 for (var i = 0; i < dataNum; i++) { 26 for (var i = 0; i < dataNum; i++) {
27 - show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude,results[i].start_day,results[i].where]); 27 + show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude, results[i].start_day, results[i].where]);
28 var page = ejs.render(mapPage, { 28 var page = ejs.render(mapPage, {
29 title: "show data", 29 title: "show data",
30 data: show_list, 30 data: show_list,
...@@ -53,7 +53,7 @@ router.get('/findpage', (req, res) => { ...@@ -53,7 +53,7 @@ router.get('/findpage', (req, res) => {
53 } else { 53 } else {
54 var show_list = []; 54 var show_list = [];
55 for (var i = 0; i < dataNum; i++) { 55 for (var i = 0; i < dataNum; i++) {
56 - show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude,results[i].start_day,results[i].where]); 56 + show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude, results[i].start_day, results[i].where]);
57 var page = ejs.render(findPage, { 57 var page = ejs.render(findPage, {
58 title: "show data", 58 title: "show data",
59 data: show_list, 59 data: show_list,
...@@ -79,10 +79,6 @@ router.get('/login', function (req, res, next) { ...@@ -79,10 +79,6 @@ router.get('/login', function (req, res, next) {
79 res.render('login.html', { title: 'Login' }); 79 res.render('login.html', { title: 'Login' });
80 console.log('로그인 페이지 접속 성공'); 80 console.log('로그인 페이지 접속 성공');
81 }); 81 });
82 -// router.get('/search', function (req, res, next) {
83 -// res.render('search.html', { title: '검색 결과' });
84 -// console.log('검색 결과 페이지 접속 성공');
85 -// })
86 router.get('/send', function (req, res, next) { 82 router.get('/send', function (req, res, next) {
87 res.render('send.html', { title: 'Send message' }); 83 res.render('send.html', { title: 'Send message' });
88 console.log('카카오톡 공유 메시지 접속 성공'); 84 console.log('카카오톡 공유 메시지 접속 성공');
......