박정민 / TFT

Go to a project
Toggle navigation Toggle navigation pinning
서준혁
09b232a8 2 parents 9ea10deb 44c6af6d

Merge Frontend and Backend

Expand all
Inline Side-by-side
Showing 42 changed files with 1267 additions and 243 deletions
# 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
This is free and unencumbered software released into the public domain.
Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.
In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit
of the public at large and to the detriment of our heirs and
successors. We intend this dedication to be an overt act of
relinquishment in perpetuity of all present and future rights to this
software under copyright law.
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 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.
For more information, please refer to <https://unlicense.org>
......@@ -103,4 +103,4 @@ Built With
2018102190 박정민 jungmin59@khu.ac.kr
프로젝트 주소 : [http://khuhub.khu.ac.kr/2018102190/TFT.git](http://khuhub.khu.ac.kr/2018102190/TFT.git)
프로젝트 주소 : [http://khuhub.khu.ac.kr/2018102190/TFT.git](http://khuhub.khu.ac.kr/2018102190/TFT.git)
\ No newline at end of file
......
......@@ -16,6 +16,8 @@ app.use(express.urlencoded({ extended: true }))
// 터미널창 연결방법 mongo 'mongodb+srv://hellowhales:qogudtjr`12@cluster0.7gz7l.mongodb.net/myFirstDatabase?retryWrites=true&w=majority';
// db.festivals.find({"title":"가무악극으로 만나는 토요 상설공연"}) 검색방법
//https://www.mongodb.com/try/download/database-tools?tck=docs_databasetools 여기서 mongoexport 실행을 위한 tool 다운받아서 Program files/mongodb/bin 폴더 안에 넣어줘야 함
MongoClient.connect(url, (error, client) => { // 서버열때 url 사용 mongoDB와 연결시키기
if (error) return console.log(error);
db = client.db('myFirstDatabase'); // 클러스터의 데이터베이스를 db변수에 저장
......@@ -27,14 +29,21 @@ MongoClient.connect(url, (error, client) => { // 서버열때 url 사용 mongoDB
app.get('/festivalList', (req, res) => { // localhost:3000/festivalList 입력하면 list.ejs에 저장한 형식대로 정보 불러와짐
//디비에 저장된 festivals 라는 collection안의 데이터(제목 또는 내용 등)를 꺼내기
db.collection('festivals').find().toArray((err, rslt) => { //DB에서 데이터를 찾음 festivals라는 collection안의 데이터를 꺼내게 됨
if (err) throw err;
console.log(rslt);
res.render('list.ejs', { posts: rslt }); // 찾은 데이터를 ejs 파일에 넣음
});
});
// 서버 연결하고 mongoexport 설치 후 mongoexport -d myFirstDatabase -c festivals -o festivalList.json /pretty 'mongodb+srv://hellowhales:qogudtjr`12@cluster0.7gz7l.mongodb.net/myFirstDatabase?retryWrites=true&w=majority' 명령
// 이용해서 myFirstDatabase라는 Db 안에서 festivals라는 collection 안의 데이터를 festivalList.json 파일로 export 해옴.
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
const { mongo } = require('mongoose');
......@@ -72,17 +81,6 @@ app.use(function (err, req, res, next) {
/*
app.get('*', function (req, res) {
//DB에서 json형태의 데이터를 유저가 접속하자마자 바로 불러와서 frontend에 뿌려주기
// 렌더링할 때 frontend로 변수 뿌려주기
res.render("asd.html");
});
*/
module.exports = app;
......
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var app = express();
const mongodb = require('mongodb');
const MongoClient = mongodb.MongoClient;
const url = 'mongodb+srv://hellowhales:qogudtjr`12@cluster0.7gz7l.mongodb.net/myFirstDatabase?retryWrites=true&w=majority';
let db;
app.use(express.urlencoded({ extended: true }))
// 터미널창 연결방법 mongo 'mongodb+srv://hellowhales:qogudtjr`12@cluster0.7gz7l.mongodb.net/myFirstDatabase?retryWrites=true&w=majority';
// db.festivals.find({"title":"가무악극으로 만나는 토요 상설공연"}) 검색방법
//https://www.mongodb.com/try/download/database-tools?tck=docs_databasetools 여기서 mongoexport 실행을 위한 tool 다운받아서 Program files/mongodb/bin 폴더 안에 넣어줘야 함
MongoClient.connect(url, (error, client) => { // 서버열때 url 사용 mongoDB와 연결시키기
if (error) return console.log(error);
db = client.db('myFirstDatabase'); // 클러스터의 데이터베이스를 db변수에 저장
app.listen(3001, () => {
console.log('3001 port on');
});
});
app.get('/festivalList', (req, res) => { // localhost:3000/festivalList 입력하면 list.ejs에 저장한 형식대로 정보 불러와짐
//디비에 저장된 festivals 라는 collection안의 데이터(제목 또는 내용 등)를 꺼내기
db.collection('festivals').find().toArray((err, rslt) => { //DB에서 데이터를 찾음 festivals라는 collection안의 데이터를 꺼내게 됨
if (err) throw err;
console.log(rslt);
res.render('list.ejs', { posts: rslt }); // 찾은 데이터를 ejs 파일에 넣음
});
});
// 서버 연결하고 mongoexport 설치 후 mongoexport -d myFirstDatabase -c festivals -o festivalList.json /pretty 'mongodb+srv://hellowhales:qogudtjr`12@cluster0.7gz7l.mongodb.net/myFirstDatabase?retryWrites=true&w=majority' 명령
// 이용해서 myFirstDatabase라는 Db 안에서 festivals라는 collection 안의 데이터를 festivalList.json 파일로 export 해옴.
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
const { mongo } = require('mongoose');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs'); // express에서 view엔진을 ejs로 설정하는과정
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);
// 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.render('error');
});
module.exports = app;
//유저 로그인할때 모든 여행지에 대한 정보를 DB에서 싹다 불러옴 페이지 렌더링할때 data 뿌려줌
\ No newline at end of file
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('tft:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
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);
}
.DS_Store
thumbs.db
*.log
node_modules/
\ No newline at end of file
This diff could not be displayed because it is too large.
{
"name": "tft",
"version": "0.0.0",
"private": true,
"name": "svelte-base",
"version": "1.0.0",
"description": "Basic svelte and express template I use for my application",
"main": "server.js",
"scripts": {
"start": "node ./bin/www"
"build": "webpack",
"release": "cross-env NODE_ENV=production webpack",
"server": "node server.js",
"start": "npm run build & npm run server",
"dev": "nodemon --watch ./src -e svelte,js,json --exec npm start"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Bigaston/svelte-base.git"
},
"author": "Bigaston",
"license": "UNLICENSED",
"bugs": {
"url": "https://github.com/Bigaston/svelte-base/issues"
},
"homepage": "https://github.com/Bigaston/svelte-base#readme",
"dependencies": {
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"ejs": "~2.6.1",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"morgan": "~1.9.1"
"express": "^4.17.1",
"jquery": "^3.6.0",
"nodemon": "^2.0.15",
"socket.io": "^4.3.2",
"socket.io-client": "^4.3.2"
},
"devDependencies": {
"cross-env": "^7.0.2",
"css-loader": "^3.5.2",
"style-loader": "^1.1.3",
"svelte": "^3.20.1",
"svelte-loader": "^2.13.6",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
}
}
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
html, body {
position: relative;
width: 100%;
height: 100%;
}
body {
color: #333;
margin: 0;
padding: 8px;
box-sizing: border-box;
font-family: '맑은 고딕 Semilight', "AppleSDGothicNeo-Regular", 'Malgun Gothic', '맑은 고딕', "dotum", '돋움', sans-serif;
}
a {
color: rgb(0,100,200);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: rgb(0,80,160);
}
label {
display: block;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
-webkit-padding: 0.4em 0;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
}
input:disabled {
color: #ccc;
}
button {
color: #333;
background-color: #f4f4f4;
outline: none;
}
button:disabled {
color: #999;
}
button:not(:disabled):active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link rel='icon' type='image/png' href='/public/favicon.png'>
<link rel='stylesheet' href='/public/global.css'>
</head>
<body>
<noscript>
<p>This website need JavaScript to work</p>
</noscript>
<main></main>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=046d27f1430524731d3ec6870f0c8923"></script>
<script src='./public/build/bundle.js'></script>
</body>
</html>
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
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;
const express = require('express')
const path = require("path")
var app = express()
const PORT = 1697;
app.use("/public", express.static('./public'));
app.get("/*", (req, res) => {
res.sendFile(path.join(__dirname, "./public/index.html"))
})
var serv = app.listen(PORT, () => console.log(`Serveur lauched on port ${PORT}`))
<script>
import Menu from './Menu.svelte';
import Backtotop from './SideItems/Backtotop.svelte';
import Map from './Map.svelte';
import Article from './Articles.svelte';
import { AllFestas } from './Stores/AllFestas';
import jQuery from 'jquery';
import { DisplayedFestas } from './Stores/DisplayedFestas';
function LoadFestas() {
let url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json";
jQuery.getJSON(url, (json) => {
AllFestas.set(json.response.body.items.item);
});
}
</script>
<style>
div {
text-align: left;
box-sizing: border-box;
display: block;
}
:global(body) {
padding: 0;
margin: 0;
align-items: center;
align-content: center;
text-align: center;
justify-content: center;
}
:global(html) {
scroll-behavior: smooth;
}
</style>
<svelte:window on:load|once={LoadFestas}></svelte:window>
<div>
<Menu/>
<Map/>
<Backtotop/>
<Article/>
</div>
\ No newline at end of file
<style>
.article{
font-family: 맑은고딕, Malgun Gothic, dotum, gulim, sans-serif;
font-size: 24pt;
padding:10vw;
text-align: center;
display: flex;
}
.wbg{
background-color: #ffffff;
}
.gbg{
background-color: #edeff2;
}
.article img {
display: inline-block;
max-width: 500px;
width: 20vw;
margin-left: 4vw;
margin-right: 4vw;
}
.article .text {
display: inline-block;
width: 50vw;
}
.contents{
display: flex;
align-items: center;
}
</style>
<script>
</script>
<div class="article wbg" id="article1">
<div class="contents">
<img src="./public/TFTlogo.png" alt=":)">
<div class="text">
<h3>TFT에 오신 걸 환영합니다!</h3>
Travel & Festival with Temperature<br>
각종 행사 정보와 날씨 정보를 한눈에 알 수 있는 서비스입니다.
</div>
</div>
</div>
<div class="article gbg" id="article2">
<div class="contents">
<div class="text">
<h3>손쉬운 행사 탐색</h3>
TFT를 통해 전국에서 개최중인 행사와 축제를<br>
한 눈에 확인할 수 있습니다.
</div>
<img src="./public/exploremap.png" alt=";(">
</div>
</div>
<div class="article wbg" id="article3">
<div class="contents">
<img src="./public/infofesta.png" alt=":)">
<div class="text">
<h3>행사 정보 확인</h3>
지도에 표시된 마커를 클릭하여<br>
행사 정보를 확인할 수 있습니다.
</div>
</div>
</div>
<div class="article gbg" id="article4">
<div class="contents">
<div class="text">
사용된 기술 스택은 다음과 같습니다.<br><br>
WEB : NodeJS / Express / Svelte<br>
Database : MongoDB<br>
API Handler : NodeJS / RequestJS<br>
Docker
</div>
<img src="./public/stacks.png" alt=";(">
</div>
</div>
\ No newline at end of file
This diff is collapsed. Click to expand it.
export let DISTRICTS = {
"name": "korea-administrative-district",
"version": "20160125",
"url": "https://github.com/cosmosfarm/korea-administrative-district",
"data":[
{"미선택":[
"미선택"
]},
{"서울특별시":[
"미선택", "종로구", "중구", "용산구", "성동구", "광진구", "동대문구", "중랑구", "성북구", "강북구", "도봉구", "노원구", "은평구", "서대문구", "마포구", "양천구", "강서구", "구로구", "금천구", "영등포구", "동작구", "관악구", "서초구", "강남구", "송파구", "강동구"
]},
{"부산광역시":[
"미선택", "중구", "서구", "동구", "영도구", "부산진구", "동래구", "남구", "북구", "강서구", "해운대구", "사하구", "금정구", "연제구", "수영구", "사상구", "기장군"
]},
{"인천광역시":[
"미선택", "중구", "동구", "남구", "연수구", "남동구", "부평구", "계양구", "서구", "강화군", "옹진군"
]},
{"대구광역시":[
"미선택", "중구", "동구", "서구", "남구", "북구", "수성구", "달서구", "달성군"
]},
{"광주광역시":[
"미선택", "동구", "서구", "남구", "북구", "광산구"
]},
{"대전광역시":[
"미선택", "동구", "중구", "서구", "유성구", "대덕구"
]},
{"울산광역시":[
"미선택", "중구", "남구", "동구", "북구", "울주군"
]},
{"세종특별자치시":[
"미선택", "세종특별자치시"
]},
{"경기도":[
"미선택", "가평군", "고양시", "과천시", "광명시", "광주시", "구리시", "군포시", "김포시", "남양주시", "동두천시", "부천시", "성남시", "수원시", "시흥시", "안산시", "안성시", "안양시", "양주시", "양평군", "여주시", "연천군", "오산시", "용인시", "의왕시", "의정부시", "이천시", "파주시", "평택시", "포천시", "하남시", "화성시"
]},
{"강원도":[
"미선택", "원주시", "춘천시", "강릉시", "동해시", "속초시", "삼척시", "홍천군", "태백시", "철원군", "횡성군", "평창군", "영월군", "정선군", "인제군", "고성군", "양양군", "화천군", "양구군"
]},
{"충청북도":[
"미선택", "청주시", "충주시", "제천시", "보은군", "옥천군", "영동군", "증평군", "진천군", "괴산군", "음성군", "단양군"
]},
{"충청남도":[
"미선택", "천안시", "공주시", "보령시", "아산시", "서산시", "논산시", "계룡시", "당진시", "금산군", "부여군", "서천군", "청양군", "홍성군", "예산군", "태안군"
]},
{"경상북도":[
"미선택", "포항시", "경주시", "김천시", "안동시", "구미시", "영주시", "영천시", "상주시", "문경시", "경산시", "군위군", "의성군", "청송군", "영양군", "영덕군", "청도군", "고령군", "성주군", "칠곡군", "예천군", "봉화군", "울진군", "울릉군"
]},
{"경상남도":[
"미선택", "창원시", "김해시", "진주시", "양산시", "거제시", "통영시", "사천시", "밀양시", "함안군", "거창군", "창녕군", "고성군", "하동군", "합천군", "남해군", "함양군", "산청군", "의령군"
]},
{"전라북도":[
"미선택", "전주시", "익산시", "군산시", "정읍시", "완주군", "김제시", "남원시", "고창군", "부안군", "임실군", "순창군", "진안군", "장수군", "무주군"
]},
{"전라남도":[
"미선택", "여수시", "순천시", "목포시", "광양시", "나주시", "무안군", "해남군", "고흥군", "화순군", "영암군", "영광군", "완도군", "담양군", "장성군", "보성군", "신안군", "장흥군", "강진군", "함평군", "진도군", "곡성군", "구례군"
]},
{"제주특별자치도":[
"미선택", "제주시", "서귀포시"
]}
]
}
\ No newline at end of file
<style>
#map_bg {
box-sizing: border-box;
justify-content: center;
display: flex;
height: 100vh;
background-color:#edeff2;
}
#map {
margin-top: 50px;
box-sizing: border-box;
display: flex;
height: 80vh;
width: 60vw;
background-color:#edeff2;
border-radius: 10px;
border: 1px solid black;
box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
}
</style>
<script>
import Info from './SideItems/Info.svelte';
import Festalist from './SideItems/Festalist.svelte';
import Arealist from './SideItems/Arealist.svelte';
import { COORDINATES } from "./Data/coordinates";
import { DisplayedFestas } from "./Stores/DisplayedFestas";
var {kakao} = window;
var ShowArea = false;
var ShowFesta = false;
var ShowInfo = false;
var Festa = {};
var markers = [];
var infowindows = [];
var map;
function createMap() {
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(36.46682, 127.37865), // 지도의 중심좌표
level: 12, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
markers= [];
map = new kakao.maps.Map(mapContainer, mapOption); // 카카오 지도
}
$: drawMarkers($DisplayedFestas);
function drawMarkers (data) {
let len = data.length >= 9 ? 9 : data.length;
markers.forEach( mk => {
mk.setMap(null);
});
infowindows.forEach( iw => {
iw.close();
});
markers, infowindows = [], [];
for(var i = 0; i < len; i++){
// 지도에 마커를 생성하고 표시한다
let marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(data[i].mapy, data[i].mapx), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
let infowindow = new kakao.maps.InfoWindow({
content : '<div style="padding:5px;white-space:nowrap;">' + data[i].title + '</div>' // 인포윈도우에 표시할 내용
});
infowindow.open(map, marker);
// 마커 클릭 시 이벤트
let showInfo = function(festa) {
return function() {
Festa = festa;
ShowInfo = true;
console.log(Festa);
}
};
kakao.maps.event.addListener(marker, 'click', showInfo(data[i]));
infowindows.push(infowindow);
markers.push(marker);
};
}
function moveTo(district, city) {
let [x, y, level] = COORDINATES[district][city];
var moveLatLon = new kakao.maps.LatLng(y, x);
map.setLevel(level);
map.panTo(moveLatLon);
}
function closeBars() {
ShowArea = false;
ShowFesta = false;
ShowInfo = false;
}
</script>
<svelte:window on:load={createMap}></svelte:window>
<Festalist bind:sidebar_show={ShowFesta}/>
<Arealist bind:sidebar_show={ShowArea} {moveTo}/>
<Info bind:sidebar_show={ShowInfo} bind:festa={Festa}/>
<div id="map_bg">
<div id="map"></div>
</div>
<script>
import Menuitems from './Menuitems.svelte'
// 메뉴 바 항목들
const navItems = [
{ label: "TFT 소개", href: "#article1" },
{ label: "행사 탐색", href: "#article2" },
{ label: "행사 정보", href: "#article3" },
{ label: "기술 스택", href: "#article4" }
];
</script>
<style>
nav {
background-color: #edeff2;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
height: 70px;
/* width: 50vw; */
top: 0;
}
.inner {
max-width: 700px;
padding-left: 10px;
padding-right: 10px;
margin: auto;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.logo img{
display: flex;
width: 120px;
left: 20px;
top: 15px;
margin-right: 400px;
}
.navbar-list {
display: flex;
padding: 0;
width: 100%;
justify-content: space-between;
margin: 0;
}
</style>
<nav id="nav">
<div class="inner">
<div class="logo"><img alt="Logo" src="./public/TFTlogo.png"></div>
<ul class='navbar-list'>
{#each navItems as item}
<Menuitems {item}/>
{/each}
</ul>
</div>
</nav>
\ No newline at end of file
<style>
li {
display: flex;
list-style-type: none;
position: relative;
margin-left: 50px;
height: 45px;
white-space: nowrap;
align-items: center;
}
li:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
}
a {
color: #000000;
text-decoration: none;
display: inline-flex;
padding: 0 10px;
font-size: 20px;
}
@media only screen and (max-width: 767px) {
a {
display: none;
}
}
.onmouse {
text-decoration: underline;
}
</style>
<script>
export let item;
let onmouse;
function enter() {
onmouse = true;
}
function leave() {
onmouse = false;
}
</script>
<li on:mouseenter={enter} on:mouseleave={leave} >
<a href={item.href} class:onmouse>{item.label}</a>
</li>
\ No newline at end of file
<script>
import { fly } from 'svelte/transition'
import SideBar from './SideBar.svelte';
var icon_show = true;
var sidebar_show = false;
function showBar() {
sidebar_show = true;
}
function hide() {
if (window.scrollY < 400) {
icon_show = true;
} else {
icon_show = false;
sidebar_show = false;
}
}
import { DISTRICTS } from '../Data/district'
import { District, City, Changed } from '../Stores/DistrictStore'
export var moveTo;
let curDisrict = {"미선택" : ["미선택"]};
let curCity = "미선택";
$: if(Object.keys(curDisrict)[0] != "미선택") {
District.set(Object.keys(curDisrict)[0]);
} else {
District.set("");
};
$: if(curCity != "미선택") {
City.set(curCity);
} else {
City.set("");
}
function setDistrict(district) {
curDisrict = district;
if(Object.keys(curDisrict)[0] == "세종특별자치시")
curCity = "세종특별자치시";
else
curCity = "미선택";
moveTo(Object.keys(curDisrict)[0], curCity);
Changed.set(true);
}
function setCity(city) {
curCity = city;
moveTo(Object.keys(curDisrict)[0], curCity);
Changed.set(true);
}
</script>
<style>
.sidebtn {
border-radius: 5px;
border: 0px;
width: 70px;
height: 70px;
position: fixed;
left: -20px;
top: 120px;
padding-right: 10px;
text-align: right;
background-color: #b71c1c;
color: #ffffff;
box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
}
.sidebtn:focus {
background-color: #ef5350;
}
.sidebtn:hover {
background-color: #d32f2f;
}
.areas {
display: flex;
border-bottom: #999999 solid 1px;
width: 100%;
flex-wrap: wrap;
justify-content: space-evenly;
}
.areatitle {
display: inline-block;
text-align:center;
width: 200px;
}
.district {
display: inline-block;
text-align:center;
width: 125px;
margin: 5px;
border: 1px solid black;
border-radius: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
.district:hover {
background-color: #ffebee;
}
.district:focus {
background-color: #ffcdd2;
}
.district.selected{
background-color: #ffcdd2;
}
.city {
display: inline-block;
text-align:center;
width: 125px;
margin: 5px;
border: 1px solid black;
border-radius: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
.city:hover {
background-color: #ffebee;
}
.city:focus {
background-color: #ffcdd2;
}
.city.selected{
background-color: #ffcdd2;
}
</style>
<svelte:window on:scroll={hide}></svelte:window>
{#if (icon_show)}
<button class="sidebtn"
transition:fly="{{ x : -50, duration : 400}}"
on:click={showBar}>
지역<br>선택
</button>
{/if}
<SideBar bind:show={sidebar_show}>
<div class="areas">
<div class="areatitle">광역시/도</div>
{#each DISTRICTS.data as d}
<div class="{Object.keys(curDisrict)[0] == Object.keys(d)[0] ? 'district selected' : 'district'}"
on:click={() => {setDistrict(d)}}>
{Object.keys(d)[0]}
</div><br>
{/each}
</div><br>
<div class="areas">
<div class="areatitle">시/군/구</div>
{#each curDisrict[Object.keys(curDisrict)[0]] as c}
<div class="{curCity == c ? 'city selected' : 'city'}"
on:click={() => {setCity(c)}}>
{c}
</div><br>
{/each}
</div>
</SideBar>
\ No newline at end of file
<script>
import { fly } from 'svelte/transition'
let show = false;
function scrollUp() {
document.body.scrollIntoView({behavior: "smooth"})
}
function hide() {
if (window.scrollY > 60) {
show = true
} else {
show = false
}
}
</script>
<style>
#backtotop {
border-radius: 100%;
width: 50px;
height: 50px;
position: fixed;
right: 4%;
bottom: 10%;
}
</style>
<svelte:window on:scroll={hide}></svelte:window>
{#if (show)}
<button id="backtotop"
transition:fly="{{ y : 200, duration:400}}"
on:click={scrollUp}>
▲
</button>
{/if}
\ No newline at end of file
<script>
import { fly } from 'svelte/transition'
import SideBar from './SideBar.svelte';
let icon_show = true;
let sidebar_show = false;
function showBar() {
sidebar_show = true;
}
function hide() {
if (window.scrollY < 400) {
icon_show = true;
} else {
icon_show = false;
sidebar_show = false;
}
}
import { District, City, Changed } from '../Stores/DistrictStore';
import { AllFestas } from "../Stores/AllFestas";
import { DisplayedFestas } from "../Stores/DisplayedFestas";
let festaChecked = [];
$: festaList = $AllFestas.filter( v => {
if(v.addr1) {
let district = v.addr1.split(" ")[0];
let city = v.addr1.split(" ")[1];
return ($District === "" || district === $District) &&
($City === "" || city === $City);
} else {
return false;
}
});
$: festaParsed = festaList.map( (v, i) => {
return { "id" : i, "title" : v.title, "addr1" : v.addr1, "contentid" : v.contentid, "checked" : false }
});
$: if ($Changed) {
let len = festaList.length >= 9 ? 9 : festaList.length;
festaChecked = [];
for(let i = 0; i < len; i++)
check(i);
}
$: DisplayedFestas.set(festaChecked);
function check(idx) {
if (!festaParsed[idx].checked) {
if(festaChecked.length <= 8) {
festaParsed[idx].checked = true;
festaChecked = festaChecked.concat(festaList[idx]);
} else {
alert("9개 이상 선택하실 수 없습니다.");
}
} else {
festaParsed[idx].checked = false;
festaChecked = festaChecked.filter( v => {
return v.contentid !== festaParsed[idx].contentid;
});
}
}
</script>
<style>
.sidebtn {
border-radius: 5px;
border: 0px;
width: 70px;
height: 70px;
position: fixed;
left: -20px;
top: 200px;
padding-right: 10px;
text-align: right;
background-color: #e65100;
color: #ffffff;
box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
}
.sidebtn:focus {
background-color: #f57c00;
}
.sidebtn:hover {
background-color: #ef6c00;
}
.festa {
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 2px;
margin-bottom: 5px;
}
.festa:hover {
background-color: #fff3e0;
}
.festa:focus {
background-color: #ffe0b2;
}
.selected {
background-color: #ffe0b2;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 2px;
margin-bottom: 5px;
}
.title {
font-weight: bold;
border-bottom: 2px solid #ff3e00;
}
.addr {
display: flex;
align-items: center;
}
.addr img {
width: 20px;
height: 20px;
}
</style>
<svelte:window on:scroll={hide}></svelte:window>
{#if (icon_show)}
<button class="sidebtn"
transition:fly="{{ x : -50, duration : 400}}"
on:click={showBar}>
행사<br>목록
</button>
{/if}
<SideBar bind:show={sidebar_show}>
{#if festaParsed.length > 0}
{#each festaParsed as festa}
<div class="{festa.checked ? "selected" : "festa"}"
on:click={() => {check(festa.id)}}>
<div class="title">{festa.title}</div>
<div class="addr"><img alt="pin" src="/public/map-pin.png"><div>{festa.addr1}</div></div>
</div>
{/each}
{:else}
개최되는 축제가 없습니다.
{/if}
</SideBar>
\ No newline at end of file
<script>
import SideBar from "./SideBar.svelte"
export let festa;
export let sidebar_show = false;
let side = "right";
function hide() {
if (window.scrollY > 400) {
sidebar_show = false;
}
}
</script>
<style>
.title {
font-size: 18pt;
font-weight: bold;
text-align: center;
}
.content {
padding: 0.5rem 0.5rem 0.5rem;
text-align: center;
}
.info img {
max-height: 20rem;
}
</style>
<svelte:window on:scroll={hide}></svelte:window>
<SideBar bind:show={sidebar_show} {side}>
<div class="info">
<div class="title">{festa.title}</div>
<img alt="festaImg" src={festa.firstimage}><br>
<div class="content">
개최지 : {festa.addr1}<br>
전화번호 : {festa.tel}<br>
<!-- 행사 시작일 : {festa.startdate}<br>
행사 시작일 : {festa.enddate}<br>
날씨 : {festa.weather 어쩌구} -->
</div>
</div>
</SideBar>
<script>
import { fly } from 'svelte/transition';
export let show = true;
export let side = "left";
</script>
<style>
.nav {
overflow-y: auto;
overflow-x: hidden;
}
.left {
position: fixed;
top: 0;
left: 0;
height: 100%;
border-right: 1px solid #aaa;
background: #fff;
overflow-y: auto;
width: 330px;
z-index: 900;
white-space: pre-line;
}
.right {
position: fixed;
top: 0;
right: 0;
height: 100%;
border-left: 1px solid #aaa;
background: #fff;
overflow-y: auto;
width: 560px;
z-index: 900;
}
.navtop {
display: flex;
width: 100%;
height: 60px;
background-color: white;
font-size: 30pt;
color: #AAAAAA;
justify-content: right;
padding: 5px 5px 5px;
border-bottom: #999999 solid 1px;
}
.bg {
position: fixed;
display: block;
width: 100vw;
height: 100vw;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 10%);
z-index: 800;
}
.navitems {
display: flex;
flex-direction: column
}
.left .navitems {
padding: 2rem 1rem 0.6rem;
}
</style>
{#if show}
{#if side == "right"}
<div class="bg" on:click={() => {show = false;}}></div>
{/if}
<nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 600), opacity: 1, duration: 800}}>
{#if side == "left"}
<div class="navtop" on:click={() => {show = false;}}
style="justify-content:{side == "left" ? "right" : "left"}; cursor:pointer;">
{ side == "left" ? "＜" : "＞" }
</div>
{/if}
<div class="navitems">
<slot>
</slot>
</div>
</nav>
{/if}
\ No newline at end of file
import { writable } from 'svelte/store';
function create() {
const { subscribe, set } = writable([]);
return {
subscribe,
set: (e) => set(e),
}
}
export const AllFestas = create();
\ No newline at end of file
import { writable } from 'svelte/store';
function create() {
const { subscribe, set} = writable([]);
return {
subscribe,
set: (e) => set(e),
}
}
export const DisplayedFestas = create();
\ No newline at end of file
import { writable } from 'svelte/store';
export const District = writable("미선택");
export const City = writable("미선택");
export const Changed = writable("true");
\ No newline at end of file
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
// name: 'world'
}
});
export default app;
\ No newline at end of file
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
const path = require('path');
const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';
module.exports = {
entry: {
bundle: ['./src/main.js']
},
resolve: {
alias: {
svelte: path.resolve('node_modules', 'svelte')
},
extensions: ['.mjs', '.js', '.svelte'],
mainFields: ['svelte', 'browser', 'module', 'main']
},
output: {
path: __dirname + '/public/build',
filename: '[name].js',
chunkFilename: '[name].[id].js'
},
module: {
rules: [
{
test: /\.svelte$/,
use: {
loader: 'svelte-loader',
options: {
emitCss: true,
hotReload: true
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
mode,
plugins: [],
devtool: prod ? false: 'source-map'
};