+
나만의 팀을 찾아보세요
+
*/
+
+.header__banner {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ gap: 1.5rem;
+
+ height: 25%;
+ min-height: 400px;
+
+ padding-top: 2rem;
+ padding-bottom: 1rem;
+
+ position: relative;
+ text-align: center;
+
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+@media (max-width: 600px) {
+ .header__banner {
+ min-height: 150px;
+ }
+}
+
+.header__banner--title {
+ font-size: 2.4rem;
+ font-weight: 700;
+
+ color: var(--color-main);
+}
+
+@media (max-width: 600px) {
+ .header__banner--title {
+ font-size: 4rem;
+ }
+}
+
+.header__banner--description {
+ display: inline-block;
+ width: 80%;
+
+ margin-top: 0.5rem;
+
+ font-size: 0.8rem;
+ line-height: 1.5rem;
+
+ color: var(--color-main);
+}
+
+@media (max-width: 600px) {
+ .header__banner--description {
+ font-size: 0.5rem;
+
+ line-height: 3rem;
+ }
+}
+
+@media (max-width: 483px) {
+ .header__banner--description {
+ display: none;
+ font-size: 0.5rem;
+
+ line-height: 3rem;
+ }
+}
diff --git a/src/css/modal.css b/src/css/modal.css
new file mode 100644
index 000000000..c28421f04
--- /dev/null
+++ b/src/css/modal.css
@@ -0,0 +1,230 @@
+.modal__container {
+ display: none;
+
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+
+ background: rgba(0, 0, 0, 0.7);
+}
+
+.modal__container.modal__active {
+ display: block;
+}
+
+.modal__wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ width: 65%;
+ height: 80%;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+
+ padding: 3rem;
+
+ overflow: scroll;
+ border-radius: 0.9rem;
+ background: var(--color-secondary);
+ box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
+
+ transform: translate(-50%, -50%);
+ animation: modal__wrapper--open 0.3s ease-in-out;
+}
+
+@media (max-width: 600px) {
+ .modal__wrapper {
+ width: 90%;
+ height: 70%;
+ }
+}
+
+@media (max-width: 400px) {
+ .modal__wrapper {
+ width: 90%;
+ height: 55%;
+ }
+}
+
+.modal__wrapper.team {
+ color: var(--color-primary);
+ background: white;
+}
+
+.modal__header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 100%;
+
+ margin: 1rem auto;
+ position: relative;
+
+ font-size: 1.9rem;
+ font-weight: 700;
+}
+
+.modal__close {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ right: 2rem;
+
+ cursor: pointer;
+}
+
+.modal__banner--form {
+ display: flex;
+ flex-direction: column;
+
+ width: 100%;
+ height: 100%;
+
+ margin: 0 auto;
+ position: relative;
+
+ gap: 1.5rem;
+}
+
+.modal__banner--top {
+ display: flex;
+ flex-direction: column;
+ width: 90%;
+
+ margin: 0 auto;
+}
+
+.modal__banner--left {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ margin: 0 auto;
+
+ width: 60%;
+}
+
+.modal__banner--image-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ width: 100%;
+ height: 100%;
+}
+
+.modal__banner--image-wrapper {
+ display: block;
+
+ width: 100%;
+ height: 80%;
+
+ margin-top: 1rem;
+
+ overflow: hidden;
+ position: relative;
+
+ border-radius: 2%;
+ border: 0.1rem solid var(--color-primary);
+}
+
+.input-file-button {
+ width: 40%;
+
+ text-align: center;
+ margin: 1rem auto;
+ padding: 0.6rem 1rem;
+
+ color: white;
+ border-radius: 0.4rem;
+ background-color: var(--color-primary);
+ cursor: pointer;
+}
+
+.input-file-button:hover {
+ color: var(--color-primary);
+
+ background-color: var(--color-secondary);
+}
+
+.modal__banner--image {
+ width: 100%;
+ height: 100%;
+
+ object-fit: cover;
+}
+
+.modal__banner--right {
+ display: flex;
+ flex-direction: column;
+
+ flex: 1;
+}
+
+.modal__banner--bottom {
+ display: flex;
+ flex-direction: column;
+
+ margin: 0 auto;
+ width: 90%;
+}
+
+.modal__banner--form-submit {
+ width: 90%;
+
+ margin: 0 auto;
+}
+
+/* Assure */
+.modal__banner--form-assure {
+ display: none;
+
+ width: 50%;
+ height: 30%;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+
+ transform: translate(-50%, -50%);
+
+ border-radius: 0.9rem;
+
+ box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
+ background-color: burlywood;
+}
+
+.modal__banner--form-assure.active {
+ display: block;
+}
+
+.add-submit__top {
+ text-align: center;
+ margin-top: 5%;
+
+ font-size: 1.5rem;
+ font-weight: 700;
+}
+
+.add-submit__bottom {
+ display: flex;
+ justify-content: center;
+
+ margin-top: 5%;
+ gap: 1rem;
+}
+
+@keyframes modal__wrapper--open {
+ 0% {
+ transform: translate(-50%, -50%) scale(0);
+ }
+ 100% {
+ transform: translate(-50%, -50%) scale(1);
+ }
+}
diff --git a/src/css/moveUp.css b/src/css/moveUp.css
new file mode 100644
index 000000000..6c8c947f9
--- /dev/null
+++ b/src/css/moveUp.css
@@ -0,0 +1,58 @@
+.move-up__container {
+ width: 4%;
+
+ position: fixed;
+ right: 1%;
+ bottom: 5%;
+
+ z-index: 1;
+
+ padding: 1rem;
+ box-sizing: border-box;
+
+ animation: floatingAnimation 2s infinite ease-in-out;
+
+ border-radius: 1rem;
+ background-color: var(--color-space);
+ opacity: 0;
+ visibility: hidden;
+
+ transition: all 1s ease-in-out;
+}
+
+.move-up__container.active {
+ opacity: 1;
+ visibility: visible;
+}
+
+@media (max-width: 880px) {
+ .move-up__container {
+ display: none;
+ }
+}
+
+@keyframes floatingAnimation {
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-1rem);
+ }
+}
+
+.move-up__wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ cursor: pointer;
+}
+
+.move-up__button--image {
+ width: 100%;
+ height: 100%;
+
+ overflow: hidden;
+}
diff --git a/src/css/notFound.css b/src/css/notFound.css
new file mode 100644
index 000000000..8b6b883c1
--- /dev/null
+++ b/src/css/notFound.css
@@ -0,0 +1,20 @@
+.not-found {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ height: 100%;
+}
+
+.not-found__container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ gap: 3rem;
+
+ font-size: 5rem;
+ font-weight: 700;
+}
diff --git a/src/css/style.css b/src/css/style.css
new file mode 100644
index 000000000..3811b1963
--- /dev/null
+++ b/src/css/style.css
@@ -0,0 +1,120 @@
+@font-face {
+ font-family: 'Pretendard-Regular';
+ src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+ font-weight: 400;
+ font-style: normal;
+}
+
+html {
+ width: 100%;
+ height: 100%;
+ font-size: 1vw;
+
+ overflow-x: hidden;
+
+ box-sizing: border-box;
+
+ --color-main: #ffffff;
+ --color-primary: #486284;
+ --color-secondary: #dee5ed;
+ --color-space: #ced7e4;
+
+ font-family: 'Pretendard-Regular', sans-serif;
+}
+
+/*
+font-family: 'Black Han Sans', sans-serif;
+font-family: 'Nanum Gothic', sans-serif;
+*/
+
+body {
+ display: flex;
+ flex-direction: column;
+
+ width: 100%;
+ height: 100%;
+}
+
+.root-div {
+ width: 100%;
+ height: 100%;
+}
+
+section {
+ width: 100%;
+ height: 100%;
+}
+
+a {
+ text-decoration: none;
+ color: black;
+}
+
+input {
+ padding: 0.5rem;
+
+ border: 0;
+ border-radius: 0.5rem;
+ outline: none;
+
+ background-color: var(--color-space);
+}
+
+input:focus {
+ background-color: white;
+ box-shadow: 0 0 0 0.25rem var(--color-primary);
+}
+
+label {
+ text-align: start;
+
+ margin-top: 1rem;
+ margin-bottom: 0.3rem;
+}
+
+.btn.btn-primary {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+
+ padding: 1rem 1.8rem;
+
+ font-size: 1rem;
+ font-family: 'Black Han Sans', sans-serif;
+
+ border: none;
+ border-radius: 5rem;
+ color: var(--color-main);
+ background-color: var(--color-primary);
+
+ cursor: pointer;
+}
+
+.btn.btn-secondary {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ padding: 1rem 1.8rem;
+
+ font-size: 1rem;
+ font-family: 'Black Han Sans', sans-serif;
+
+ border-radius: 5rem;
+ border: none;
+ color: var(--color-primary);
+ background-color: var(--color-secondary);
+
+ cursor: pointer;
+}
+
+main {
+ display: flex;
+ flex-direction: column;
+
+ width: 85%;
+ height: 100%;
+
+ margin: 0 auto;
+}
diff --git a/src/css/viewBanner.css b/src/css/viewBanner.css
new file mode 100644
index 000000000..ff3af7634
--- /dev/null
+++ b/src/css/viewBanner.css
@@ -0,0 +1,203 @@
+.view__banner--container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ width: 100%;
+ height: 100%;
+}
+
+.view__banner--top {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ width: 100%;
+
+ gap: 1.5rem;
+
+ padding: 2rem 2rem;
+ box-sizing: border-box;
+
+ border-bottom-left-radius: 0.5rem;
+ border-bottom-right-radius: 0.5rem;
+ background-color: var(--color-secondary);
+}
+
+.view__banner--description {
+ font-size: 2rem;
+ font-family: 'Black Han Sans', sans-serif;
+}
+
+.view__banner--search-container {
+ display: flex;
+ align-items: center;
+
+ width: 70%;
+ height: 50%;
+
+ margin: 0 auto;
+}
+
+.view__banner--search {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ width: 80%;
+
+ gap: 1rem;
+
+ margin-right: 1.5rem;
+ padding: 1rem 1rem;
+ box-sizing: border-box;
+
+ border-radius: 0.5rem;
+ background-color: var(--color-main);
+}
+
+.view__banner--search-btn {
+ flex: content;
+
+ white-space: nowrap;
+
+ background-color: var(--color-primary);
+ border: none;
+ border-radius: 0.5rem;
+ padding: 1rem 1.3rem;
+ color: var(--color-main);
+
+ cursor: pointer;
+}
+
+.view__banner--search-btn:hover {
+ background-color: var(--color-space);
+ color: var(--color-primary);
+}
+
+.view__banner--wrapper {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+
+ width: 100%;
+ height: 100%;
+
+ gap: 3%;
+ margin-top: 3%;
+}
+
+@media (max-width: 600px) {
+ .view__banner--wrapper {
+ display: flex;
+ flex-direction: column;
+
+ gap: 1.2%;
+ }
+}
+
+.view__banner--item-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+
+ width: 100%;
+
+ cursor: pointer;
+
+ transition: all 0.2s ease-in-out;
+}
+
+.view__banner--item-container:hover {
+ transform: scale(1.03);
+}
+
+.view__banner--item {
+ display: flex;
+
+ width: 100%;
+ height: 100%;
+
+ max-height: 300px;
+
+ gap: 1.5rem;
+
+ padding: 3rem 2rem;
+ box-sizing: border-box;
+
+ border-radius: 1rem;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+ background-color: var(--color-secondary);
+}
+
+@media (max-width: 1100px) {
+ .view__banner--item {
+ max-height: 200px;
+ }
+}
+
+.view__banner--item-left {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ width: 70%;
+
+ gap: 2rem;
+
+ font-size: 0.8rem;
+}
+
+.view__banner--image-container {
+ width: 70%;
+
+ border-radius: 0.7rem;
+
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+}
+
+strong {
+ font-size: 2rem;
+ font-weight: 700;
+ color: var(--color-primary);
+}
+
+.view__banner--name {
+ font-size: 1.6rem;
+ line-height: 2.3rem;
+ font-weight: 700;
+ color: black;
+}
+
+@media (max-width: 443px) {
+ .view__banner--name {
+ line-height: 4rem;
+ }
+}
+
+.view__banner--information {
+ display: flex;
+ flex-direction: column;
+
+ gap: 0.6rem;
+}
+
+.view__banner--address {
+ text-align: start;
+}
+
+.view__banner--address:hover {
+ font-weight: 700;
+
+ transform: scale(1.01);
+ color: var(--color-primary);
+}
+
+@media (max-width: 443px) {
+ .view__banner--information {
+ display: none;
+ }
+}
diff --git a/src/dispatch/index.js b/src/dispatch/index.js
new file mode 100644
index 000000000..48080398f
--- /dev/null
+++ b/src/dispatch/index.js
@@ -0,0 +1,98 @@
+import Store from '../store/myValley.js';
+import valleyList from '../store/valleyList.js';
+import involvedValleyList from '../store/involvedValley.js';
+import firebase from '../core/firebase.js';
+import { query, where, setDoc, doc, getDoc, getDocs, collection, updateDoc, deleteDoc } from 'firebase/firestore';
+import { ref, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage';
+
+const db = firebase.db;
+const storage = firebase.storage;
+
+const getCollection = async () => {
+ if (valleyList.state.valleyList.length !== 0) {
+ valleyList.state.valleyList = [];
+ }
+ const querySnapshot = await getDocs(collection(db, 'valley'));
+ querySnapshot.forEach((doc) => {
+ // id를 같이 전해줄 수 있도록 object로 만들어준다.
+ const dataObject = { id: doc.id, data: doc.data() };
+ valleyList.state.valleyList.push(dataObject);
+ });
+};
+
+const uploadImage = async (props) => {
+ const storageRef = ref(storage, `${props}`);
+ await uploadBytes(storageRef, Store.state.file);
+ const url = await getDownloadURL(storageRef);
+ Store.state.url = url;
+};
+
+const setData = async () => {
+ const date = new Date();
+ const dateId = 'valleyId' + date.getTime().toString();
+
+ await uploadImage(dateId);
+
+ await setDoc(doc(db, 'valley', dateId), {
+ nickname: Store.state.nickname,
+ name: Store.state.name,
+ province: Store.state.province,
+ city: Store.state.city,
+ address: Store.state.address,
+ additional: Store.state.additional,
+ url: Store.state.url,
+ });
+};
+
+const getData = async (props) => {
+ const docRef = doc(db, 'valley', props);
+ const docSnap = await getDoc(docRef);
+ if (docSnap.exists()) {
+ const data = docSnap.data();
+ Store.state.nickname = data.nickname;
+ Store.state.name = data.name;
+ Store.state.province = data.province;
+ Store.state.city = data.city;
+ Store.state.address = data.address;
+ Store.state.additional = data.additional;
+ Store.state.url = data.url;
+ } else {
+ console.log('No such document!');
+ }
+};
+
+const updateData = async (props) => {
+ const docRef = doc(db, 'valley', props);
+ await uploadImage(props);
+ await updateDoc(docRef, {
+ nickname: Store.state.nickname,
+ name: Store.state.name,
+ province: Store.state.province,
+ city: Store.state.city,
+ address: Store.state.address,
+ additional: Store.state.additional,
+ url: Store.state.url,
+ });
+};
+
+const deleteData = async (props) => {
+ const docRef = doc(db, 'valley', props);
+ await deleteDoc(docRef);
+
+ const storageRef = ref(storage, `${props}`);
+ await deleteObject(storageRef);
+};
+
+const getInvolvedData = async (_id, state, arrays) => {
+ const valleyRef = collection(db, 'valley');
+ const q = query(valleyRef, where(state, 'in', [arrays]));
+ const querySnapshot = await getDocs(q);
+ querySnapshot.forEach((doc) => {
+ if (_id !== doc.id) {
+ const dataObject = { id: doc.id, data: doc.data() };
+ involvedValleyList.state.valleyList.push(dataObject);
+ }
+ });
+};
+
+export { setData, getCollection, uploadImage, getData, updateData, deleteData, getInvolvedData };
diff --git a/src/images/logo.gif b/src/images/logo.gif
new file mode 100644
index 000000000..f87540488
Binary files /dev/null and b/src/images/logo.gif differ
diff --git a/src/images/logo.svg b/src/images/logo.svg
new file mode 100644
index 000000000..8abbaaf68
--- /dev/null
+++ b/src/images/logo.svg
@@ -0,0 +1,286 @@
+
+
+
diff --git a/src/images/placeHorderImage.png b/src/images/placeHorderImage.png
new file mode 100644
index 000000000..ad8eea940
Binary files /dev/null and b/src/images/placeHorderImage.png differ
diff --git a/src/images/up.svg b/src/images/up.svg
new file mode 100644
index 000000000..0a519f150
--- /dev/null
+++ b/src/images/up.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/images/webpack.png b/src/images/webpack.png
new file mode 100644
index 000000000..279121b00
Binary files /dev/null and b/src/images/webpack.png differ
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 000000000..773e73338
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
Document
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 000000000..1f8109639
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,32 @@
+import App from './App.js';
+import router from './routes/index.js';
+import Firstpage from './components/FirstPage.js';
+import './css/style.css';
+import './css/header.css';
+import './css/headerBanner.css';
+import './css/modal.css';
+import './css/viewBanner.css';
+import './css/detailBanner.css';
+import './css/fixModal.css';
+import './css/moveUp.css';
+import './css/firstpage.css';
+import './css/notFound.css';
+
+const root = document.getElementById('root');
+
+// 첫 번째 방문 여부 확인
+const isFirstVisit = localStorage.getItem('isFirstVisit') === null;
+
+if (isFirstVisit) {
+ // 첫 번째 방문 시에는 Firstpage를 보여주고, App은 숨기기
+ const firstpage = new Firstpage().el;
+ root.append(firstpage);
+
+ // 첫 번째 방문 기록
+ localStorage.setItem('isFirstVisit', 'false');
+} else {
+ // 이미 방문한 경우에는 App을 보여줌
+ const app = new App().el;
+ root.append(app);
+ router();
+}
diff --git a/src/routes/About.js b/src/routes/About.js
new file mode 100644
index 000000000..df96a5610
--- /dev/null
+++ b/src/routes/About.js
@@ -0,0 +1,51 @@
+import { Component } from '../core/index.js';
+
+import Store from '../store/myValley.js';
+import Involve from '../store/involvedValley.js';
+
+import DetailMyValley from '../components/DetailMyValley.js';
+import ViewMember from '../components/ViewMember.js';
+
+import { getInvolvedData } from '../dispatch/index.js';
+import { getData } from '../dispatch/index.js';
+import { uniqBy } from 'lodash';
+import Confetti from '../components/Confetti.js';
+
+export default class About extends Component {
+ render() {
+ const detailMyValleyel = new DetailMyValley().el;
+ this.el.innerHTML = /*html*/ `
+
+
✨연관 계곡들 보기✨
+
+ `;
+ this.el.classList.add('about__banner--container');
+
+ const getInvolvedDatas = async () => {
+ Involve.state.valleyList = [];
+ const _id = history.state.id;
+ await getInvolvedData(_id, 'name', Store.state.name);
+ await getInvolvedData(_id, 'nickname', Store.state.nickname);
+ await getInvolvedData(_id, 'province', Store.state.province);
+ await getInvolvedData(_id, 'city', Store.state.city);
+ };
+
+ const inputEl = this.el.querySelector('.view__banner--wrapper');
+ const historyIsValid = async () => {
+ const query = history.state.id;
+ await getData(query);
+ this.el.querySelector('.about__banner--wrapper').append(detailMyValleyel);
+ await getInvolvedDatas();
+ const newArr = [...Involve.state.valleyList];
+ Involve.state.valleyList = uniqBy(newArr, 'id');
+ inputEl.append(...Involve.state.valleyList.map((valley) => new ViewMember(valley).el));
+ this.el.append(new Confetti().el);
+ };
+
+ if (history.state.id !== undefined) {
+ historyIsValid();
+ } else {
+ alert('잘못된 접근입니다.');
+ }
+ }
+}
diff --git a/src/routes/Home.js b/src/routes/Home.js
new file mode 100644
index 000000000..04cbf5921
--- /dev/null
+++ b/src/routes/Home.js
@@ -0,0 +1,70 @@
+import { Component } from '../core/index.js';
+import submitState from '../store/modalSubmitState.js';
+import AddMember from '../components/AddMyValley.js';
+import View from '../components/View.js';
+
+import image from '../images/logo.gif';
+
+export default class Home extends Component {
+ constructor() {
+ super();
+
+ submitState.subscribe('submit', () => {
+ const modalContainer = this.el.querySelector('.modal__container');
+ try {
+ modalContainer.classList.remove('modal__active');
+ } catch {}
+ });
+ }
+ render() {
+ const AddMemberEl = new AddMember().el;
+ const ViewEl = new View().el;
+
+ this.el.innerHTML = /*html*/ `
+
+ `;
+ // 해당 컴포넌트에 클래스 추가
+ this.el.classList.add('home__container');
+
+ const backgroundImageEl = this.el.querySelector('.header__banner');
+ backgroundImageEl.style.backgroundImage = `url(${image})`;
+ backgroundImageEl.style.backgroundPositionY = `${window.scrollY * 0.2}%`;
+
+ // 사용할 element들 정의
+ const buttonEl = this.el.querySelector('.header__modal--button');
+ const modalContainer = this.el.querySelector('.header__banner');
+
+ // 현제 계곡, 산 상태에 따른 컴포넌트 택스트 변경
+ this.el.querySelector('.header__banner--title span').textContent = '계곡';
+ buttonEl.classList.add('btn-secondary');
+ buttonEl.textContent = '나만의 계곡 등록하기';
+
+ // 모달창을 여는 버튼의 이벤트 설정
+ buttonEl.addEventListener('click', () => {
+ AddMemberEl.classList.add('modal__active');
+ modalContainer.append(AddMemberEl);
+ });
+
+ this.el.append(ViewEl);
+
+ const scrollMovement = (e) => {
+ const scrollTop = window.scrollY;
+ const scrollY = `${scrollTop * 0.2}%`;
+
+ backgroundImageEl.style.backgroundPositionY = scrollY;
+ if (scrollTop * 0.2 > 95) {
+ backgroundImageEl.style.backgroundPositionY = `95%`;
+ }
+ };
+
+ window.addEventListener('scroll', scrollMovement);
+ }
+}
diff --git a/src/routes/NotFound.js b/src/routes/NotFound.js
new file mode 100644
index 000000000..ddb407322
--- /dev/null
+++ b/src/routes/NotFound.js
@@ -0,0 +1,13 @@
+import { Component } from '../core';
+
+export default class NotFound extends Component {
+ render() {
+ this.el.classList.add('not-found');
+ this.el.innerHTML = /*html*/ `
+
+
페이지를 찾을 수 없습니다.
+
404
+
+ `;
+ }
+}
diff --git a/src/routes/index.js b/src/routes/index.js
new file mode 100644
index 000000000..93e901cb9
--- /dev/null
+++ b/src/routes/index.js
@@ -0,0 +1,10 @@
+import { createRouter } from '../core/router.js';
+import Home from './Home';
+import About from './About';
+import NotFound from './NotFound';
+
+export default createRouter([
+ { path: '#/', component: Home },
+ { path: '#/about', component: About },
+ { path: '.*', component: NotFound },
+]);
diff --git a/src/store/SearchState.js b/src/store/SearchState.js
new file mode 100644
index 000000000..352333bbc
--- /dev/null
+++ b/src/store/SearchState.js
@@ -0,0 +1,8 @@
+import { Store } from '../core/store.js';
+
+//image store
+const store = new Store({
+ searched: false,
+});
+
+export default store;
diff --git a/src/store/firstVisit.js b/src/store/firstVisit.js
new file mode 100644
index 000000000..2136afd84
--- /dev/null
+++ b/src/store/firstVisit.js
@@ -0,0 +1,8 @@
+import { Store } from '../core/store.js';
+
+//image store
+const store = new Store({
+ visit: false,
+});
+
+export default store;
diff --git a/src/store/involvedValley.js b/src/store/involvedValley.js
new file mode 100644
index 000000000..812730b49
--- /dev/null
+++ b/src/store/involvedValley.js
@@ -0,0 +1,8 @@
+import { Store } from '../core/store.js';
+
+//image store
+const store = new Store({
+ valleyList: [],
+});
+
+export default store;
diff --git a/src/store/modalSubmitState.js b/src/store/modalSubmitState.js
new file mode 100644
index 000000000..876300662
--- /dev/null
+++ b/src/store/modalSubmitState.js
@@ -0,0 +1,8 @@
+import { Store } from '../core/store.js';
+
+//image store
+const store = new Store({
+ submit: true,
+});
+
+export default store;
diff --git a/src/store/myCurrentValley.js b/src/store/myCurrentValley.js
new file mode 100644
index 000000000..d111abcd0
--- /dev/null
+++ b/src/store/myCurrentValley.js
@@ -0,0 +1,8 @@
+import { Store } from '../core/store.js';
+
+//image store
+const store = new Store({
+ valleyId: '',
+});
+
+export default store;
diff --git a/src/store/myValley.js b/src/store/myValley.js
new file mode 100644
index 000000000..018bb9775
--- /dev/null
+++ b/src/store/myValley.js
@@ -0,0 +1,16 @@
+import { Store } from '../core/store.js';
+
+//image store
+const store = new Store({
+ nickname: '',
+ name: '',
+ src: '',
+ province: '',
+ city: '',
+ address: '',
+ additional: '',
+ file: null,
+ url: '',
+});
+
+export default store;
diff --git a/src/store/submitState.js b/src/store/submitState.js
new file mode 100644
index 000000000..876300662
--- /dev/null
+++ b/src/store/submitState.js
@@ -0,0 +1,8 @@
+import { Store } from '../core/store.js';
+
+//image store
+const store = new Store({
+ submit: true,
+});
+
+export default store;
diff --git a/src/store/valleyList.js b/src/store/valleyList.js
new file mode 100644
index 000000000..56dec623f
--- /dev/null
+++ b/src/store/valleyList.js
@@ -0,0 +1,9 @@
+import { Store } from '../core/store.js';
+
+//image store
+const store = new Store({
+ valleyId: [],
+ valleyList: [],
+});
+
+export default store;
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 000000000..8ab801b68
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,4 @@
+{
+ "devCommand" : "npm run dev",
+ "buildCommand" : "npm run build"
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 000000000..075fac1d5
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,66 @@
+const path = require('path');
+var _ = require('lodash');
+const Dotenv = require('dotenv-webpack');
+// const confetti = require('canvas-confetti');
+// const MyPromise = require('some-promise-library');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
+
+module.exports = {
+ mode: 'development',
+ entry: './src/main.js',
+ output: {
+ path: path.resolve('./public'),
+ filename: '[name].js',
+ },
+ devServer: {
+ port: 3030,
+ proxy: {
+ '/api/': {
+ target: 'http://localhost:8000',
+ changeOrigin: true,
+ secure: false,
+ },
+ },
+ open: true,
+ hot: true,
+ historyApiFallback: true,
+ static: {
+ directory: path.resolve('./public'),
+ },
+ },
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: ['style-loader', 'css-loader'],
+ },
+ {
+ test: [/\.png$/, /\.jpg$/, /\.gif$/, /\.svg$/],
+ use: [
+ {
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: './src/index.html',
+ }),
+ new CleanWebpackPlugin(),
+
+ // loadash
+ new LodashModuleReplacementPlugin(),
+
+ // dotenv
+ new Dotenv(),
+ ],
+};
+
+// confetti.Promise = MyPromise;