Merge Frontend and Backend

+# 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>

@@ -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';
 // 터미널창 연결방법 mongo 'mongodb+srv://hellowhales:qogudtjr`12@cluster0.7gz7l.mongodb.net/myFirstDatabase?retryWrites=true&w=majority';
 // db.festivals.find({"title":"가무악극으로 만나는 토요 상설공연"}) 검색방법
 // 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와 연결시키기
 MongoClient.connect(url, (error, client) => { // 서버열때 url 사용 mongoDB와 연결시키기
   if (error) return console.log(error);
   if (error) return console.log(error);
   db = client.db('myFirstDatabase'); // 클러스터의 데이터베이스를 db변수에 저장
   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에 저장한 형식대로 정보 불러와짐
 app.get('/festivalList', (req, res) => { // localhost:3000/festivalList 입력하면 list.ejs에 저장한 형식대로 정보 불러와짐
   //디비에 저장된 festivals 라는 collection안의 데이터(제목 또는 내용 등)를 꺼내기
   //디비에 저장된 festivals 라는 collection안의 데이터(제목 또는 내용 등)를 꺼내기
   db.collection('festivals').find().toArray((err, rslt) => {  //DB에서 데이터를 찾음 festivals라는 collection안의 데이터를 꺼내게 됨
   db.collection('festivals').find().toArray((err, rslt) => {  //DB에서 데이터를 찾음 festivals라는 collection안의 데이터를 꺼내게 됨
+    if (err) throw err;
     console.log(rslt);
     console.log(rslt);
     res.render('list.ejs', { posts: rslt }); // 찾은 데이터를 ejs 파일에 넣음
     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 indexRouter = require('./routes/index');
 var usersRouter = require('./routes/users');
 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;
 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

 {
 {
-  "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": {
   "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": {
   "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"
   }
   }
 }
 }

+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

+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'
+};