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