From 7d8dc088bc06d7be6c9be0e17aff4c81ddd88690 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Dec 2020 23:07:17 +0900 Subject: [PATCH 001/126] initial commit --- .gitignore | 5 +++++ docs/README.md | 1 + 2 files changed, 6 insertions(+) create mode 100644 .gitignore create mode 100644 docs/README.md diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..e66cbb303 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +git-commit-template.txt +node_modules +package.json +package-lock.json +.eslintrc.js \ No newline at end of file diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000..36ceee57f --- /dev/null +++ b/docs/README.md @@ -0,0 +1 @@ +## 기능 구현 목록 From 9a612fbae10905395815bc82a09a158b99640ab4 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Dec 2020 23:44:06 +0900 Subject: [PATCH 002/126] =?UTF-8?q?Update=20:=20README.md=20-=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EB=AA=A9=EB=A1=9D=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/docs/README.md b/docs/README.md index 36ceee57f..ce1f1f2e2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1 +1,52 @@ ## 기능 구현 목록 + +### 화면 출력 + +- 버튼을 누르면 버튼에 맞는 화면을 출력한다. + +### 역 관리 + +- 역을 추가할 수 있고, 화면에 추가한다. + + - 예외처리) + - 중복 불가 + - 2글자 미만 불가 + - 한글만 가능(기능 추가) + +- 역을 삭제할 수 있고, 화면에서 삭제한다. + - 예외처리) + - 노선에 등록된 역 삭제 불가 + +### 노선 관리 + +- 존재하는 역을 통해 상행과 하행 종점을 선택할 수 있고, 이름을 정해서 노선을 추가할 수 있으며, 화면에 추가한다. + + - 예외처리) + - 노선 이름 중복 불가 + - 한글만 가능(기능 추가) + - 2글자 미만 불가(기능 추가) + +- 노선을 삭제할 수 있고, 화면에서 삭제한다. + +### 구간 관리 + +- 존재하는 노선을 선택할 수 있고, 선택 시 화면에 출력한다. + +- 노선에 존재하는 역을 추가할 수 있으며, 순서를 정할 수 있다. + - 예외처리) + - 같은 노선에 중복된 역 추가 불가 + - 노선 내에서 갈래길이 존재할 수 없음 + - 가장 큰 순서보다 큰 수 입력 불가 + - 0부터 입력가능 +- 이때 순서에 맞게 화면이 랜더링된다. +- 또한, 순서 0이 입력되면, 상행 종점이 된다. + +- 노선에서 역을 삭제할 수 있으며, 화면에서 삭제한다. + + - 예외처리) + - 한 노선에서 역이 두 개 이하일 때 삭제 불가 + - 이때, 종점을 삭제하면 종점 전의 역이 종점이 되고, 화면을 랜더링한다. + + ### 노선도 출력 + +- 노선 별 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 화면에 출력한다. From f0c9888789ad55a496f3963bb080e5d4df95bd8e Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 00:24:43 +0900 Subject: [PATCH 003/126] =?UTF-8?q?Update=20:=20README.md=20-=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EB=AA=A9=EB=A1=9D=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit localStorage와 data속성을 활용하는 내용 추가 --- docs/README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index ce1f1f2e2..c195a3635 100644 --- a/docs/README.md +++ b/docs/README.md @@ -4,6 +4,14 @@ - 버튼을 누르면 버튼에 맞는 화면을 출력한다. +### localStorage + +- localStorage를 사용해 새로고침하더라도 이전에 작업한 정보를 불러온다. + +### data + +- data속성을 활용해 역, 노선, 구간의 데이터 값을 관리한다. + ### 역 관리 - 역을 추가할 수 있고, 화면에 추가한다. @@ -47,6 +55,6 @@ - 한 노선에서 역이 두 개 이하일 때 삭제 불가 - 이때, 종점을 삭제하면 종점 전의 역이 종점이 되고, 화면을 랜더링한다. - ### 노선도 출력 +### 노선도 출력 - 노선 별 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 화면에 출력한다. From e2baad2e987ec30e07a82f7ad56233629019cbd6 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 01:00:58 +0900 Subject: [PATCH 004/126] =?UTF-8?q?Update=20:=20HTML=20=ED=83=9C=EA=B7=B8?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 기본적으로 출력되는 HTML 요소들을 입력했다. display:none으로 숨겨놓고, 버튼을 클릭하면 display:block으로 화면에 표시되도록 할 것이다. --- index.html | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 64 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index fc99deac2..1bf0ad32e 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,70 @@
-

🚇 지하철 노선도 관리

+

🚇 지하철 노선도 관리

+ + + + + + +
From fd7a38e0a1b9eceea0cb8f81b1dd46b1ba7cffe8 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 01:32:12 +0900 Subject: [PATCH 005/126] =?UTF-8?q?Feat=20:=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=ED=99=94=EB=A9=B4=EC=97=90=20?= =?UTF-8?q?=EC=B6=9C=EB=A0=A5=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit display : none으로 되어 있는 section들을 버튼을 클릭하면 그에 맞는 section이 display:block으로 바뀌면서 화면에 나타난다. --- src/View/hide-screen.js | 0 src/View/input.js | 12 ++++++++++++ src/View/show-screen.js | 21 +++++++++++++++++++++ 3 files changed, 33 insertions(+) create mode 100644 src/View/hide-screen.js create mode 100644 src/View/input.js create mode 100644 src/View/show-screen.js diff --git a/src/View/hide-screen.js b/src/View/hide-screen.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/View/input.js b/src/View/input.js new file mode 100644 index 000000000..5c983fb87 --- /dev/null +++ b/src/View/input.js @@ -0,0 +1,12 @@ +import {hideScreen} from './hide-screen.js'; +import {showScreen} from './show-screen.js'; + +export const $screenButton = document.body.querySelectorAll('#app > button'); +export const $stationContainer = document.body.querySelector('#station'); +export const $lineContainer = document.body.querySelector('#line'); +export const $sectionContainer = document.body.querySelector('#subway-section'); +export const $mapContainer = document.body.querySelector('#map-section'); + +Array.from($screenButton).forEach((button) => + button.addEventListener('click', showScreen), +); diff --git a/src/View/show-screen.js b/src/View/show-screen.js new file mode 100644 index 000000000..ad5cf796b --- /dev/null +++ b/src/View/show-screen.js @@ -0,0 +1,21 @@ +import { + $stationContainer, + $lineContainer, + $sectionContainer, + $mapContainer, +} from './input.js'; + +export const showScreen = (e) => { + if (e.target.id === 'station-manager-button') { + return ($stationContainer.style.display = 'block'); + } + if (e.target.id === 'line-manager-button') { + return ($lineContainer.style.display = 'block'); + } + if (e.target.id === 'section-manager-button') { + return ($sectionContainer.style.display = 'block'); + } + if (e.target.id === 'map-print-manager-button') { + return ($mapContainer.style.display = 'block'); + } +}; From cb248f477949e62538970cf13ac1673d66312c76 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 01:38:02 +0900 Subject: [PATCH 006/126] =?UTF-8?q?Feat=20:=20=EB=AA=A8=EB=93=A0=20section?= =?UTF-8?q?=20display=20:=20none=EC=9C=BC=EB=A1=9C=20=EB=A7=8C=EB=93=9C?= =?UTF-8?q?=EB=8A=94=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 버튼을 클릭해서 맞는 화면을 출력해줄 때, 이미 띄워저 있는 화면을 숨길 필요가 있기 때문에 화면을 숨기는 함수를 따로 만들었다. --- src/View/hide-screen.js | 4 ++++ src/View/input.js | 5 ++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/View/hide-screen.js b/src/View/hide-screen.js index e69de29bb..7e6aefa6c 100644 --- a/src/View/hide-screen.js +++ b/src/View/hide-screen.js @@ -0,0 +1,4 @@ +export const hideScreen = () => { + const $allSection = document.body.querySelectorAll('section'); + $allSection.forEach((section) => (section.style.display = 'none')); +}; diff --git a/src/View/input.js b/src/View/input.js index 5c983fb87..f3ac50e3b 100644 --- a/src/View/input.js +++ b/src/View/input.js @@ -8,5 +8,8 @@ export const $sectionContainer = document.body.querySelector('#subway-section'); export const $mapContainer = document.body.querySelector('#map-section'); Array.from($screenButton).forEach((button) => - button.addEventListener('click', showScreen), + button.addEventListener('click', (e) => { + hideScreen(); + showScreen(e); + }), ); From 71fbbf1b226c57424e3b53ec009fd5976f791de1 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 01:40:04 +0900 Subject: [PATCH 007/126] =?UTF-8?q?Update=20:=20HTML=EC=97=90=20map=20sect?= =?UTF-8?q?ion=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index 1bf0ad32e..466c6519a 100644 --- a/index.html +++ b/index.html @@ -70,6 +70,8 @@

구간 등록

+
+
From ef485fd4f40f9add2d414a2fd10c8880d29561fd Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 01:56:34 +0900 Subject: [PATCH 008/126] =?UTF-8?q?Feat=20:=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20->=20=ED=99=94=EB=A9=B4=20=EC=B6=9C?= =?UTF-8?q?=EB=A0=A5=20=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 버튼을 클릭하면 controller에서 필요하지 않은 화면을 숨기고 필요한 화면을 보여주도록 함수를 호출한다. --- src/View/input.js | 10 +++------- src/index.js | 7 +++++++ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/View/input.js b/src/View/input.js index f3ac50e3b..99532f1e1 100644 --- a/src/View/input.js +++ b/src/View/input.js @@ -1,5 +1,4 @@ -import {hideScreen} from './hide-screen.js'; -import {showScreen} from './show-screen.js'; +import {onChangeScreen} from '../index.js'; export const $screenButton = document.body.querySelectorAll('#app > button'); export const $stationContainer = document.body.querySelector('#station'); @@ -7,9 +6,6 @@ export const $lineContainer = document.body.querySelector('#line'); export const $sectionContainer = document.body.querySelector('#subway-section'); export const $mapContainer = document.body.querySelector('#map-section'); -Array.from($screenButton).forEach((button) => - button.addEventListener('click', (e) => { - hideScreen(); - showScreen(e); - }), +$screenButton.forEach((button) => + button.addEventListener('click', onChangeScreen), ); diff --git a/src/index.js b/src/index.js index e69de29bb..5d0767ada 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,7 @@ +import {hideScreen} from './View/hide-screen.js'; +import {showScreen} from './View/show-screen.js'; + +export function onChangeScreen(e) { + hideScreen(); + showScreen(e); +} From 7b8cf16364df650ce5ba0a3ef470d8f5d4183b10 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 01:59:09 +0900 Subject: [PATCH 009/126] =?UTF-8?q?Update=20:=20README.md=20-=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EB=AA=A9=EB=A1=9D=20=EC=B5=9C?= =?UTF-8?q?=EC=8B=A0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index c195a3635..b8db4ffca 100644 --- a/docs/README.md +++ b/docs/README.md @@ -2,7 +2,7 @@ ### 화면 출력 -- 버튼을 누르면 버튼에 맞는 화면을 출력한다. +- ✔ 버튼을 누르면 버튼에 맞는 화면을 출력한다. ### localStorage From 8bbb6012db71988098d49009c3e337086bfe988e Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 11:10:39 +0900 Subject: [PATCH 010/126] =?UTF-8?q?Feat=20:=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=97=AD=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 버튼을 클릭하면 input의 유효성을 검사한 후 localStorage에 저장하는데, 저장할 때 배열로 저장하기 위해서 기존의 localStorage를 가져와서 저장하는 방식이 필요했다. 추가로 구현해야 할 것은 dataset을 활용하기 위해 추가된 역의 삭제 버튼에 dataset을 등록해 삭제할 때 dataset을 활용하는 것이고, input의 유효성을 검사하는 것, 화면 랜더링하는 것이 추가로 구현되어야 한다. --- src/View/input.js | 10 +++++++++- src/index.js | 23 +++++++++++++++++++++++ 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/src/View/input.js b/src/View/input.js index 99532f1e1..07e1c2dd5 100644 --- a/src/View/input.js +++ b/src/View/input.js @@ -1,11 +1,19 @@ -import {onChangeScreen} from '../index.js'; +import {onChangeScreen, onAddStation} from '../index.js'; export const $screenButton = document.body.querySelectorAll('#app > button'); export const $stationContainer = document.body.querySelector('#station'); export const $lineContainer = document.body.querySelector('#line'); export const $sectionContainer = document.body.querySelector('#subway-section'); export const $mapContainer = document.body.querySelector('#map-section'); +export const $stationAddInput = document.body.querySelector( + '#station-name-input', +); +export const $stationAddButton = document.body.querySelector( + '#station-add-button', +); $screenButton.forEach((button) => button.addEventListener('click', onChangeScreen), ); + +$stationAddButton.addEventListener('click', onAddStation); diff --git a/src/index.js b/src/index.js index 5d0767ada..b6684148b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,30 @@ import {hideScreen} from './View/hide-screen.js'; import {showScreen} from './View/show-screen.js'; +import {$stationAddInput} from './View/input.js'; export function onChangeScreen(e) { hideScreen(); showScreen(e); } + +export function onAddStation() { + setLocalStorage('station'); +} + +const setLocalStorage = (key) => { + const localStorageValue = getLocalStorage(key); + if (localStorageValue === null) { + return localStorage.setItem(key, JSON.stringify([$stationAddInput.value])); + } + + return localStorage.setItem( + key, + JSON.stringify([...localStorageValue, $stationAddInput.value]), + ); +}; + +const getLocalStorage = (key) => { + const localStorageValue = JSON.parse(localStorage.getItem(key)); + + return localStorageValue; +}; From f3d150a5bd4b27584a31fd46273e085d4a7358c1 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 11:28:48 +0900 Subject: [PATCH 011/126] =?UTF-8?q?Feat=20:=20=EC=97=AD=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EC=8B=9C=20=ED=99=94=EB=A9=B4=EC=97=90=20=EC=B6=9C?= =?UTF-8?q?=EB=A0=A5=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 화면에 출력하고, localStorage에 등록하는 것까지 완료했다. 이제 버튼에 dataset을 등록하고, eventListener을 등록하는 것을 해야한다. --- src/View/add-screen.js | 11 +++++++++++ src/index.js | 2 ++ 2 files changed, 13 insertions(+) create mode 100644 src/View/add-screen.js diff --git a/src/View/add-screen.js b/src/View/add-screen.js new file mode 100644 index 000000000..1dd89a366 --- /dev/null +++ b/src/View/add-screen.js @@ -0,0 +1,11 @@ +import {$stationContainer} from './input.js'; + +export const addStationScreen = (value) => { + const $stationTbody = $stationContainer.querySelector('table > tbody'); + const $stationTr = document.createElement('tr'); + $stationTr.innerHTML = ` + ${value} + + `; + $stationTbody.appendChild($stationTr); +}; diff --git a/src/index.js b/src/index.js index b6684148b..c740ecba9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import {hideScreen} from './View/hide-screen.js'; import {showScreen} from './View/show-screen.js'; +import {addStationScreen} from './View/add-screen.js'; import {$stationAddInput} from './View/input.js'; export function onChangeScreen(e) { @@ -9,6 +10,7 @@ export function onChangeScreen(e) { export function onAddStation() { setLocalStorage('station'); + addStationScreen($stationAddInput.value); } const setLocalStorage = (key) => { From 56526a74f4742fffc139d18eea1c382d46bf26b5 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 11:40:16 +0900 Subject: [PATCH 012/126] =?UTF-8?q?Feat=20:=20=EC=97=AD=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EC=8B=9C=20click=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B0=8F=20dataset=EB=93=B1=EB=A1=9D=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 역을 추가할 때, dataset-station에 역 이름을 추가하고, 삭제 버튼에 click 이벤트를 등록했다. --- src/View/add-screen.js | 3 ++- src/View/input.js | 7 ++++++- src/index.js | 4 ++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/View/add-screen.js b/src/View/add-screen.js index 1dd89a366..f01cbc6c8 100644 --- a/src/View/add-screen.js +++ b/src/View/add-screen.js @@ -1,4 +1,4 @@ -import {$stationContainer} from './input.js'; +import {$stationContainer, setStationButton} from './input.js'; export const addStationScreen = (value) => { const $stationTbody = $stationContainer.querySelector('table > tbody'); @@ -7,5 +7,6 @@ export const addStationScreen = (value) => { ${value} `; + setStationButton(value, $stationTr.querySelector('button')); $stationTbody.appendChild($stationTr); }; diff --git a/src/View/input.js b/src/View/input.js index 07e1c2dd5..64eb3a62f 100644 --- a/src/View/input.js +++ b/src/View/input.js @@ -1,4 +1,4 @@ -import {onChangeScreen, onAddStation} from '../index.js'; +import {onChangeScreen, onAddStation, onRemoveStation} from '../index.js'; export const $screenButton = document.body.querySelectorAll('#app > button'); export const $stationContainer = document.body.querySelector('#station'); @@ -12,6 +12,11 @@ export const $stationAddButton = document.body.querySelector( '#station-add-button', ); +export const setStationButton = (value, button) => { + button.dataset.station = value; + button.addEventListener('click', onRemoveStation); +}; + $screenButton.forEach((button) => button.addEventListener('click', onChangeScreen), ); diff --git a/src/index.js b/src/index.js index c740ecba9..259330f6b 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,10 @@ export function onAddStation() { addStationScreen($stationAddInput.value); } +export function onRemoveStation(e) { + console.log(e.target.dataset.station); +} + const setLocalStorage = (key) => { const localStorageValue = getLocalStorage(key); if (localStorageValue === null) { From f8f53091885236c22d883a253f0f05951ef895d5 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 13:01:12 +0900 Subject: [PATCH 013/126] =?UTF-8?q?Update=20:=20README.md=20-=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EB=AA=A9=EB=A1=9D=20=EC=B5=9C?= =?UTF-8?q?=EC=8B=A0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index b8db4ffca..7f985e408 100644 --- a/docs/README.md +++ b/docs/README.md @@ -14,7 +14,7 @@ ### 역 관리 -- 역을 추가할 수 있고, 화면에 추가한다. +- ✔ 역을 추가할 수 있고, 화면에 추가한다. - 예외처리) - 중복 불가 From eafe132421404e3da37931435e9ef2f22d42f98e Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 13:05:58 +0900 Subject: [PATCH 014/126] =?UTF-8?q?Feat=20:=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20storage?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit storage에 등록되어 있는 station value는 배열이기 때문에 filter로 삭제시켜주었다. --- src/index.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 259330f6b..acc527a85 100644 --- a/src/index.js +++ b/src/index.js @@ -14,7 +14,7 @@ export function onAddStation() { } export function onRemoveStation(e) { - console.log(e.target.dataset.station); + removeLocalStorage('station', e.target.dataset.station); } const setLocalStorage = (key) => { @@ -29,6 +29,15 @@ const setLocalStorage = (key) => { ); }; +const removeLocalStorage = (key, value) => { + const localStorageValue = getLocalStorage(key); + const filteredStorage = localStorageValue.filter( + (station) => station !== value, + ); + + return localStorage.setItem(key, JSON.stringify(filteredStorage)); +}; + const getLocalStorage = (key) => { const localStorageValue = JSON.parse(localStorage.getItem(key)); From fd65151a2a69651bb30fd2d6a892bf51ac558be7 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 13:22:35 +0900 Subject: [PATCH 015/126] =?UTF-8?q?Feat=20:=20=ED=99=94=EB=A9=B4=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=97=AD=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 역을 삭제하면 localStorage에서 삭제하고, 관련 테이블을 삭제한다. --- src/View/remove-screen.js | 7 +++++++ src/index.js | 2 ++ 2 files changed, 9 insertions(+) create mode 100644 src/View/remove-screen.js diff --git a/src/View/remove-screen.js b/src/View/remove-screen.js new file mode 100644 index 000000000..b22e2a887 --- /dev/null +++ b/src/View/remove-screen.js @@ -0,0 +1,7 @@ +import {$stationContainer} from './input.js'; + +export const removeStationScreen = (button) => { + const $stationTbody = $stationContainer.querySelector('table > tbody'); + const $stationTr = button.parentElement.parentElement; + $stationTbody.removeChild($stationTr); +}; diff --git a/src/index.js b/src/index.js index acc527a85..76507eb85 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import {hideScreen} from './View/hide-screen.js'; import {showScreen} from './View/show-screen.js'; import {addStationScreen} from './View/add-screen.js'; +import {removeStationScreen} from './View/remove-screen.js'; import {$stationAddInput} from './View/input.js'; export function onChangeScreen(e) { @@ -15,6 +16,7 @@ export function onAddStation() { export function onRemoveStation(e) { removeLocalStorage('station', e.target.dataset.station); + removeStationScreen(e.target); } const setLocalStorage = (key) => { From ef6a0c2780894c1f69c3dc539ffe311922ebe34d Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 13:35:11 +0900 Subject: [PATCH 016/126] =?UTF-8?q?Feat=20:=20=EC=97=AD=EC=9D=84=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=ED=95=A0=20=EB=95=8C=20input=EC=9D=98=20?= =?UTF-8?q?=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 중복 불가 2. 2글자 미만 불가 3. 한글만 가능 --- src/Controller/valid.js | 16 ++++++++++++++++ src/index.js | 14 +++++++++----- 2 files changed, 25 insertions(+), 5 deletions(-) create mode 100644 src/Controller/valid.js diff --git a/src/Controller/valid.js b/src/Controller/valid.js new file mode 100644 index 000000000..1de60dbcc --- /dev/null +++ b/src/Controller/valid.js @@ -0,0 +1,16 @@ +import {getLocalStorage} from '../index.js'; + +export const isInputValid = (value) => { + const exValue = getLocalStorage('station'); + if (value.length < 2) { + return alert('2글자 이상으로 입력해주세요.'); + } + if (value.match(/[^가-힣]/)) { + return alert('띄어쓰기 없이 한글만 입력해주세요.'); + } + if (exValue && exValue.includes(value)) { + return alert('중복된 역이 존재합니다.'); + } + + return true; +}; diff --git a/src/index.js b/src/index.js index 76507eb85..51a30eef3 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import {showScreen} from './View/show-screen.js'; import {addStationScreen} from './View/add-screen.js'; import {removeStationScreen} from './View/remove-screen.js'; import {$stationAddInput} from './View/input.js'; +import {isInputValid} from './Controller/valid.js'; export function onChangeScreen(e) { hideScreen(); @@ -10,8 +11,11 @@ export function onChangeScreen(e) { } export function onAddStation() { - setLocalStorage('station'); - addStationScreen($stationAddInput.value); + if (isInputValid($stationAddInput.value)) { + setLocalStorage('station'); + addStationScreen($stationAddInput.value); + } + $stationAddInput.value = ''; } export function onRemoveStation(e) { @@ -19,7 +23,7 @@ export function onRemoveStation(e) { removeStationScreen(e.target); } -const setLocalStorage = (key) => { +export const setLocalStorage = (key) => { const localStorageValue = getLocalStorage(key); if (localStorageValue === null) { return localStorage.setItem(key, JSON.stringify([$stationAddInput.value])); @@ -31,7 +35,7 @@ const setLocalStorage = (key) => { ); }; -const removeLocalStorage = (key, value) => { +export const removeLocalStorage = (key, value) => { const localStorageValue = getLocalStorage(key); const filteredStorage = localStorageValue.filter( (station) => station !== value, @@ -40,7 +44,7 @@ const removeLocalStorage = (key, value) => { return localStorage.setItem(key, JSON.stringify(filteredStorage)); }; -const getLocalStorage = (key) => { +export const getLocalStorage = (key) => { const localStorageValue = JSON.parse(localStorage.getItem(key)); return localStorageValue; From 82447d59768c99623b4d1a2a0f95e7e8c4358ea0 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 13:39:57 +0900 Subject: [PATCH 017/126] =?UTF-8?q?Update=20:=20README.md=20-=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EB=AA=A9=EB=A1=9D=20=EC=B5=9C?= =?UTF-8?q?=EC=8B=A0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/README.md b/docs/README.md index 7f985e408..047c174f6 100644 --- a/docs/README.md +++ b/docs/README.md @@ -17,11 +17,11 @@ - ✔ 역을 추가할 수 있고, 화면에 추가한다. - 예외처리) - - 중복 불가 - - 2글자 미만 불가 - - 한글만 가능(기능 추가) + - ✔ 중복 불가 + - ✔ 2글자 미만 불가 + - ✔ 한글만 가능(기능 추가) -- 역을 삭제할 수 있고, 화면에서 삭제한다. +- ✔ 역을 삭제할 수 있고, 화면에서 삭제한다. - 예외처리) - 노선에 등록된 역 삭제 불가 From 8dfe107e1d7586c844f32543cb7c929903018831 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 13:43:38 +0900 Subject: [PATCH 018/126] =?UTF-8?q?Refactor=20:=20local-storage=20?= =?UTF-8?q?=EB=AA=A8=EB=93=88=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 많이 쓰일 것 같아서 따로 분리했다. --- src/Controller/local-storage.js | 26 ++++++++++++++++++++++++++ src/Controller/valid.js | 2 +- src/index.js | 33 +++++---------------------------- 3 files changed, 32 insertions(+), 29 deletions(-) create mode 100644 src/Controller/local-storage.js diff --git a/src/Controller/local-storage.js b/src/Controller/local-storage.js new file mode 100644 index 000000000..ab8103a48 --- /dev/null +++ b/src/Controller/local-storage.js @@ -0,0 +1,26 @@ +export const setLocalStorage = (key, value) => { + const localStorageValue = getLocalStorage(key); + if (localStorageValue === null) { + return localStorage.setItem(key, JSON.stringify([value])); + } + + return localStorage.setItem( + key, + JSON.stringify([...localStorageValue, value]), + ); +}; + +export const getLocalStorage = (key) => { + const localStorageValue = JSON.parse(localStorage.getItem(key)); + + return localStorageValue; +}; + +export const removeLocalStorage = (key, value) => { + const localStorageValue = getLocalStorage(key); + const filteredStorage = localStorageValue.filter( + (station) => station !== value, + ); + + return localStorage.setItem(key, JSON.stringify(filteredStorage)); +}; diff --git a/src/Controller/valid.js b/src/Controller/valid.js index 1de60dbcc..5fc7a8dbd 100644 --- a/src/Controller/valid.js +++ b/src/Controller/valid.js @@ -1,4 +1,4 @@ -import {getLocalStorage} from '../index.js'; +import {getLocalStorage} from './local-storage.js'; export const isInputValid = (value) => { const exValue = getLocalStorage('station'); diff --git a/src/index.js b/src/index.js index 51a30eef3..2ecebfe4e 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,10 @@ import {addStationScreen} from './View/add-screen.js'; import {removeStationScreen} from './View/remove-screen.js'; import {$stationAddInput} from './View/input.js'; import {isInputValid} from './Controller/valid.js'; +import { + setLocalStorage, + removeLocalStorage, +} from './Controller/local-storage.js'; export function onChangeScreen(e) { hideScreen(); @@ -12,7 +16,7 @@ export function onChangeScreen(e) { export function onAddStation() { if (isInputValid($stationAddInput.value)) { - setLocalStorage('station'); + setLocalStorage('station', $stationAddInput.value); addStationScreen($stationAddInput.value); } $stationAddInput.value = ''; @@ -22,30 +26,3 @@ export function onRemoveStation(e) { removeLocalStorage('station', e.target.dataset.station); removeStationScreen(e.target); } - -export const setLocalStorage = (key) => { - const localStorageValue = getLocalStorage(key); - if (localStorageValue === null) { - return localStorage.setItem(key, JSON.stringify([$stationAddInput.value])); - } - - return localStorage.setItem( - key, - JSON.stringify([...localStorageValue, $stationAddInput.value]), - ); -}; - -export const removeLocalStorage = (key, value) => { - const localStorageValue = getLocalStorage(key); - const filteredStorage = localStorageValue.filter( - (station) => station !== value, - ); - - return localStorage.setItem(key, JSON.stringify(filteredStorage)); -}; - -export const getLocalStorage = (key) => { - const localStorageValue = JSON.parse(localStorage.getItem(key)); - - return localStorageValue; -}; From 2ec1135a60138a2fa19fa6b5e3421e20022eccf8 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 13:53:43 +0900 Subject: [PATCH 019/126] =?UTF-8?q?Feat=20:=20=EC=82=AD=EC=A0=9C=ED=95=A0?= =?UTF-8?q?=20=EB=95=8C=20=ED=99=95=EC=9D=B8=EB=B0=9B=EB=8A=94=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 2ecebfe4e..7c106f8b1 100644 --- a/src/index.js +++ b/src/index.js @@ -23,6 +23,9 @@ export function onAddStation() { } export function onRemoveStation(e) { - removeLocalStorage('station', e.target.dataset.station); - removeStationScreen(e.target); + const removeConfirm = confirm('정말로 삭제하시겠습니까?'); + if (removeConfirm) { + removeLocalStorage('station', e.target.dataset.station); + removeStationScreen(e.target); + } } From 7ae9f61b44b12968a5ece3e74e99b6246bc3e1f1 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 14:05:34 +0900 Subject: [PATCH 020/126] =?UTF-8?q?Feat=20:=20localStorage=EB=A5=BC=20?= =?UTF-8?q?=ED=86=B5=ED=95=B4=20=EB=A1=9C=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit js가 실행될 때 localStorage에 있는 값들을 화면에 추가해주고 시작한다. --- src/index.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/index.js b/src/index.js index 7c106f8b1..85eb94fbb 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ import {isInputValid} from './Controller/valid.js'; import { setLocalStorage, removeLocalStorage, + getLocalStorage, } from './Controller/local-storage.js'; export function onChangeScreen(e) { @@ -29,3 +30,12 @@ export function onRemoveStation(e) { removeStationScreen(e.target); } } + +const loadStation = () => { + const stations = getLocalStorage('station'); + if (stations) { + stations.forEach((station) => addStationScreen(station)); + } +}; + +loadStation(); From 762f9e440906fd96e5a80634cacc9f807419b3da Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 14:06:57 +0900 Subject: [PATCH 021/126] =?UTF-8?q?Update=20:=20README.md=20-=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EB=AA=A9=EB=A1=9D=20=EC=B5=9C?= =?UTF-8?q?=EC=8B=A0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index 047c174f6..c13f9821f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -6,7 +6,7 @@ ### localStorage -- localStorage를 사용해 새로고침하더라도 이전에 작업한 정보를 불러온다. +- ✔ localStorage를 사용해 새로고침하더라도 이전에 작업한 정보를 불러온다. ### data From dd57dfa29dc62242d89a7401e7569608af3d7a82 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 14:42:47 +0900 Subject: [PATCH 022/126] =?UTF-8?q?Feat=20:=20Station=20class=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit localStorage에서 모든 데이터를 관리하는 것이 위험하다고 생각되어서 초기에 데이터를 받아올 때만 local을 이용하고, 그 뒤에는 Station class를 이용하기로 했다. 기존에 있던 localStorage를 사용하던 함수를 변경하고 있다. --- src/Model/station.js | 24 ++++++++++++++++++++++++ src/index.js | 12 +++++++----- 2 files changed, 31 insertions(+), 5 deletions(-) create mode 100644 src/Model/station.js diff --git a/src/Model/station.js b/src/Model/station.js new file mode 100644 index 000000000..f1a631d03 --- /dev/null +++ b/src/Model/station.js @@ -0,0 +1,24 @@ +import {getLocalStorage} from '../Controller/local-storage.js'; + +export default class Station { + constructor() { + this.stations = []; + } + + loadStation() { + const stations = getLocalStorage('station'); + if (stations) { + return (this.stations = stations); + } + } + + addStation(value) { + return this.stations.push(value); + } + + removeStation(value) { + const removedStationIndex = this.stations.indexOf(value); + + return this.stations.splice(removedStationIndex, 1); + } +} diff --git a/src/index.js b/src/index.js index 85eb94fbb..d8ec9d9ff 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,4 @@ +import Station from './Model/station.js'; import {hideScreen} from './View/hide-screen.js'; import {showScreen} from './View/show-screen.js'; import {addStationScreen} from './View/add-screen.js'; @@ -7,9 +8,10 @@ import {isInputValid} from './Controller/valid.js'; import { setLocalStorage, removeLocalStorage, - getLocalStorage, } from './Controller/local-storage.js'; +const stationInstance = new Station(); + export function onChangeScreen(e) { hideScreen(); showScreen(e); @@ -18,6 +20,7 @@ export function onChangeScreen(e) { export function onAddStation() { if (isInputValid($stationAddInput.value)) { setLocalStorage('station', $stationAddInput.value); + stationInstance.addStation($stationAddInput.value); addStationScreen($stationAddInput.value); } $stationAddInput.value = ''; @@ -27,15 +30,14 @@ export function onRemoveStation(e) { const removeConfirm = confirm('정말로 삭제하시겠습니까?'); if (removeConfirm) { removeLocalStorage('station', e.target.dataset.station); + stationInstance.removeStation(e.target.dataset.station); removeStationScreen(e.target); } } const loadStation = () => { - const stations = getLocalStorage('station'); - if (stations) { - stations.forEach((station) => addStationScreen(station)); - } + stationInstance.loadStation(); + stationInstance.stations.forEach((station) => addStationScreen(station)); }; loadStation(); From 5de3c5fde1e92ad28966494d9da5cefb6b5c216c Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 14:45:36 +0900 Subject: [PATCH 023/126] =?UTF-8?q?Update=20:=20local=20=3D>=20class=20?= =?UTF-8?q?=EB=B3=80=ED=99=98=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 유효성을 검사하는 함수에서 기존에 local에서 값을 받아왔던 것에서 class에서 값을 받아오는 것으로 변경 --- src/Controller/valid.js | 7 ++----- src/index.js | 2 +- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/Controller/valid.js b/src/Controller/valid.js index 5fc7a8dbd..23333c5d1 100644 --- a/src/Controller/valid.js +++ b/src/Controller/valid.js @@ -1,14 +1,11 @@ -import {getLocalStorage} from './local-storage.js'; - -export const isInputValid = (value) => { - const exValue = getLocalStorage('station'); +export const isInputValid = (value, exStation) => { if (value.length < 2) { return alert('2글자 이상으로 입력해주세요.'); } if (value.match(/[^가-힣]/)) { return alert('띄어쓰기 없이 한글만 입력해주세요.'); } - if (exValue && exValue.includes(value)) { + if (exStation && exStation.includes(value)) { return alert('중복된 역이 존재합니다.'); } diff --git a/src/index.js b/src/index.js index d8ec9d9ff..6332603f9 100644 --- a/src/index.js +++ b/src/index.js @@ -18,7 +18,7 @@ export function onChangeScreen(e) { } export function onAddStation() { - if (isInputValid($stationAddInput.value)) { + if (isInputValid($stationAddInput.value, stationInstance.stations)) { setLocalStorage('station', $stationAddInput.value); stationInstance.addStation($stationAddInput.value); addStationScreen($stationAddInput.value); From 6b25f0f3a885412350360538f08f5c254bb3cab4 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 16:06:59 +0900 Subject: [PATCH 024/126] =?UTF-8?q?Feat=20:=20=ED=99=94=EB=A9=B4=EC=9D=84?= =?UTF-8?q?=20=EB=88=84=EB=A5=BC=20=EB=95=8C=EB=A7=88=EB=8B=A4=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EB=9E=9C=EB=8D=94=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 처음에 로드할 때 화면에 추가하는 것보다 원하는 화면을 클릭했을 때마다 랜더링되는 것이 좋을 것 같아서 변경했다. --- src/View/show-screen.js | 8 +++++++- src/index.js | 16 ++++++++++++---- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/View/show-screen.js b/src/View/show-screen.js index ad5cf796b..d07af1b35 100644 --- a/src/View/show-screen.js +++ b/src/View/show-screen.js @@ -4,10 +4,11 @@ import { $sectionContainer, $mapContainer, } from './input.js'; +import {loadStation} from '../index.js'; export const showScreen = (e) => { if (e.target.id === 'station-manager-button') { - return ($stationContainer.style.display = 'block'); + return showStation(); } if (e.target.id === 'line-manager-button') { return ($lineContainer.style.display = 'block'); @@ -19,3 +20,8 @@ export const showScreen = (e) => { return ($mapContainer.style.display = 'block'); } }; + +const showStation = () => { + loadStation(); + $stationContainer.style.display = 'block'; +}; diff --git a/src/index.js b/src/index.js index 6332603f9..c386f3719 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import {isInputValid} from './Controller/valid.js'; import { setLocalStorage, removeLocalStorage, + getLocalStorage, } from './Controller/local-storage.js'; const stationInstance = new Station(); @@ -35,9 +36,16 @@ export function onRemoveStation(e) { } } -const loadStation = () => { - stationInstance.loadStation(); - stationInstance.stations.forEach((station) => addStationScreen(station)); +export const loadStation = () => { + if (!isStationLoaded()) { + stationInstance.loadStation(); + stationInstance.stations.forEach((station) => addStationScreen(station)); + } }; -loadStation(); +const isStationLoaded = () => { + const localStation = JSON.stringify(getLocalStorage('station')); + const serverStation = JSON.stringify(stationInstance.stations); + + return localStation === serverStation; +}; From f8cab4ac4a37c7a510bc390a5e020eafdb078e62 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 16:15:52 +0900 Subject: [PATCH 025/126] =?UTF-8?q?Update=20:=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=9E=9C=EB=8D=94=EB=A7=81=20?= =?UTF-8?q?=EC=B7=A8=EC=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 다시 잘 생각해보니 굳이 할 필요가 없다. --- src/View/show-screen.js | 8 +------- src/index.js | 13 +++---------- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/src/View/show-screen.js b/src/View/show-screen.js index d07af1b35..ad5cf796b 100644 --- a/src/View/show-screen.js +++ b/src/View/show-screen.js @@ -4,11 +4,10 @@ import { $sectionContainer, $mapContainer, } from './input.js'; -import {loadStation} from '../index.js'; export const showScreen = (e) => { if (e.target.id === 'station-manager-button') { - return showStation(); + return ($stationContainer.style.display = 'block'); } if (e.target.id === 'line-manager-button') { return ($lineContainer.style.display = 'block'); @@ -20,8 +19,3 @@ export const showScreen = (e) => { return ($mapContainer.style.display = 'block'); } }; - -const showStation = () => { - loadStation(); - $stationContainer.style.display = 'block'; -}; diff --git a/src/index.js b/src/index.js index c386f3719..0273e5484 100644 --- a/src/index.js +++ b/src/index.js @@ -37,15 +37,8 @@ export function onRemoveStation(e) { } export const loadStation = () => { - if (!isStationLoaded()) { - stationInstance.loadStation(); - stationInstance.stations.forEach((station) => addStationScreen(station)); - } + stationInstance.loadStation(); + stationInstance.stations.forEach((station) => addStationScreen(station)); }; -const isStationLoaded = () => { - const localStation = JSON.stringify(getLocalStorage('station')); - const serverStation = JSON.stringify(stationInstance.stations); - - return localStation === serverStation; -}; +loadStation(); From 51e3de6759111910da70c546e941eb7c04461989 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 16:37:32 +0900 Subject: [PATCH 026/126] =?UTF-8?q?Feat=20:=20=EB=85=B8=EC=84=A0=20option?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 역이 추가될 때마다 노선의 종점이 추가되는 함수를 구현중이다. 현재는 페이지가 로드될 때마다 종점이 추가된다. --- src/View/add-screen.js | 11 +++++++++++ src/index.js | 8 +++++--- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/View/add-screen.js b/src/View/add-screen.js index f01cbc6c8..70ee5a547 100644 --- a/src/View/add-screen.js +++ b/src/View/add-screen.js @@ -10,3 +10,14 @@ export const addStationScreen = (value) => { setStationButton(value, $stationTr.querySelector('button')); $stationTbody.appendChild($stationTr); }; + +export const addLastStopScreen = (station) => { + const $upStream = document.body.querySelector('#line-start-station-selector'); + const $downStream = document.body.querySelector('#line-end-station-selector'); + const $optionUpStreamStation = document.createElement('option'); + const $optionDownStreamStation = document.createElement('option'); + $optionUpStreamStation.textContent = station; + $optionDownStreamStation.textContent = station; + $upStream.appendChild($optionUpStreamStation); + $downStream.appendChild($optionDownStreamStation); +}; diff --git a/src/index.js b/src/index.js index 0273e5484..429dc9732 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,13 @@ import Station from './Model/station.js'; import {hideScreen} from './View/hide-screen.js'; import {showScreen} from './View/show-screen.js'; -import {addStationScreen} from './View/add-screen.js'; +import {addStationScreen, addLastStopScreen} from './View/add-screen.js'; import {removeStationScreen} from './View/remove-screen.js'; import {$stationAddInput} from './View/input.js'; import {isInputValid} from './Controller/valid.js'; import { setLocalStorage, removeLocalStorage, - getLocalStorage, } from './Controller/local-storage.js'; const stationInstance = new Station(); @@ -38,7 +37,10 @@ export function onRemoveStation(e) { export const loadStation = () => { stationInstance.loadStation(); - stationInstance.stations.forEach((station) => addStationScreen(station)); + stationInstance.stations.forEach((station) => { + addStationScreen(station); + addLastStopScreen(station); + }); }; loadStation(); From 5fd90cc6f7281da5a0b6c383370ed6af56ca4873 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 16:39:56 +0900 Subject: [PATCH 027/126] =?UTF-8?q?Feat=20:=20=EC=97=AD=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EC=8B=9C=20=EC=A2=85=EC=A0=90=20option=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 역을 추가하면 자동으로 종점에도 역이 추가된다. --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index 429dc9732..591d4a990 100644 --- a/src/index.js +++ b/src/index.js @@ -22,6 +22,7 @@ export function onAddStation() { setLocalStorage('station', $stationAddInput.value); stationInstance.addStation($stationAddInput.value); addStationScreen($stationAddInput.value); + addLastStopScreen($stationAddInput.value); } $stationAddInput.value = ''; } From 98f41774b27f9e907ebf1e5503a1b174946d6447 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 16:56:48 +0900 Subject: [PATCH 028/126] =?UTF-8?q?Feat=20:=20=EC=97=AD=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20=EC=8B=9C=20=EC=A2=85=EC=A0=90=20=EC=A0=9C=EA=B1=B0?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 역을 제거할 때 종점도 같이 제거될 수 있도록 구현했다. --- src/View/remove-screen.js | 16 ++++++++++++++++ src/index.js | 6 +++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/View/remove-screen.js b/src/View/remove-screen.js index b22e2a887..58f8c2aac 100644 --- a/src/View/remove-screen.js +++ b/src/View/remove-screen.js @@ -1,7 +1,23 @@ import {$stationContainer} from './input.js'; +const $upStream = document.body.querySelector('#line-start-station-selector'); +const $downStream = document.body.querySelector('#line-end-station-selector'); + export const removeStationScreen = (button) => { const $stationTbody = $stationContainer.querySelector('table > tbody'); const $stationTr = button.parentElement.parentElement; $stationTbody.removeChild($stationTr); }; + +export const removeLastStopScreen = (station) => { + const $upStreamOptions = $upStream.querySelectorAll('option'); + const $downStreamOptions = $downStream.querySelectorAll('option'); + const removedUpStreamOption = Array.from($upStreamOptions).find( + (option) => option.value === station, + ); + const removedDownStreamOption = Array.from($downStreamOptions).find( + (option) => option.value === station, + ); + $upStream.removeChild(removedUpStreamOption); + $downStream.removeChild(removedDownStreamOption); +}; diff --git a/src/index.js b/src/index.js index 591d4a990..e78bc21c1 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,10 @@ import Station from './Model/station.js'; import {hideScreen} from './View/hide-screen.js'; import {showScreen} from './View/show-screen.js'; import {addStationScreen, addLastStopScreen} from './View/add-screen.js'; -import {removeStationScreen} from './View/remove-screen.js'; +import { + removeLastStopScreen, + removeStationScreen, +} from './View/remove-screen.js'; import {$stationAddInput} from './View/input.js'; import {isInputValid} from './Controller/valid.js'; import { @@ -33,6 +36,7 @@ export function onRemoveStation(e) { removeLocalStorage('station', e.target.dataset.station); stationInstance.removeStation(e.target.dataset.station); removeStationScreen(e.target); + removeLastStopScreen(e.target.dataset.station); } } From bf82da0c9028a0f14f36048c9c11772894df16aa Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 16:59:17 +0900 Subject: [PATCH 029/126] =?UTF-8?q?Style=20:=20=EC=97=AD=EC=9D=84=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=ED=95=98=EB=8A=94=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EC=97=90=20class=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/View/add-screen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/View/add-screen.js b/src/View/add-screen.js index 70ee5a547..2acddd04a 100644 --- a/src/View/add-screen.js +++ b/src/View/add-screen.js @@ -5,7 +5,7 @@ export const addStationScreen = (value) => { const $stationTr = document.createElement('tr'); $stationTr.innerHTML = ` ${value} - + `; setStationButton(value, $stationTr.querySelector('button')); $stationTbody.appendChild($stationTr); From db9292ef67d492dddb3154cf99b9e68e49b3ceee Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 17:00:15 +0900 Subject: [PATCH 030/126] =?UTF-8?q?Refactor=20:=20element=EB=93=A4?= =?UTF-8?q?=EC=9D=84=20input.js=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit element들은 input.js에서 관리한다. --- src/View/input.js | 6 ++++++ src/View/remove-screen.js | 5 +---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/View/input.js b/src/View/input.js index 64eb3a62f..c501529a4 100644 --- a/src/View/input.js +++ b/src/View/input.js @@ -11,6 +11,12 @@ export const $stationAddInput = document.body.querySelector( export const $stationAddButton = document.body.querySelector( '#station-add-button', ); +export const $upStream = document.body.querySelector( + '#line-start-station-selector', +); +export const $downStream = document.body.querySelector( + '#line-end-station-selector', +); export const setStationButton = (value, button) => { button.dataset.station = value; diff --git a/src/View/remove-screen.js b/src/View/remove-screen.js index 58f8c2aac..ac2012e53 100644 --- a/src/View/remove-screen.js +++ b/src/View/remove-screen.js @@ -1,7 +1,4 @@ -import {$stationContainer} from './input.js'; - -const $upStream = document.body.querySelector('#line-start-station-selector'); -const $downStream = document.body.querySelector('#line-end-station-selector'); +import {$stationContainer, $downStream, $upStream} from './input.js'; export const removeStationScreen = (button) => { const $stationTbody = $stationContainer.querySelector('table > tbody'); From 1d4045a31c4b7e20f5ac0255164ddf6a98a76891 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 17:14:24 +0900 Subject: [PATCH 031/126] =?UTF-8?q?Feat=20:=20=EB=85=B8=EC=84=A0=EC=9D=84?= =?UTF-8?q?=20localStorage=EC=97=90=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 노선을 localStorage에 추가하는데, 노선은 객체로 노선 이름과 상행 종점, 하행 종점을 가지고 있다. --- src/View/input.js | 11 ++++++++++- src/index.js | 19 ++++++++++++++++++- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/src/View/input.js b/src/View/input.js index c501529a4..6d078966a 100644 --- a/src/View/input.js +++ b/src/View/input.js @@ -1,4 +1,9 @@ -import {onChangeScreen, onAddStation, onRemoveStation} from '../index.js'; +import { + onChangeScreen, + onAddStation, + onRemoveStation, + onAddLine, +} from '../index.js'; export const $screenButton = document.body.querySelectorAll('#app > button'); export const $stationContainer = document.body.querySelector('#station'); @@ -17,6 +22,8 @@ export const $upStream = document.body.querySelector( export const $downStream = document.body.querySelector( '#line-end-station-selector', ); +export const $lineAddButton = document.body.querySelector('#line-add-button'); +export const $lineNameInput = document.body.querySelector('#line-name-input'); export const setStationButton = (value, button) => { button.dataset.station = value; @@ -28,3 +35,5 @@ $screenButton.forEach((button) => ); $stationAddButton.addEventListener('click', onAddStation); + +$lineAddButton.addEventListener('click', onAddLine); diff --git a/src/index.js b/src/index.js index e78bc21c1..bc2f6f4a0 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,12 @@ import { removeLastStopScreen, removeStationScreen, } from './View/remove-screen.js'; -import {$stationAddInput} from './View/input.js'; +import { + $stationAddInput, + $upStream, + $downStream, + $lineNameInput, +} from './View/input.js'; import {isInputValid} from './Controller/valid.js'; import { setLocalStorage, @@ -40,6 +45,10 @@ export function onRemoveStation(e) { } } +export function onAddLine() { + setLocalStorage('line', getLineValue()); +} + export const loadStation = () => { stationInstance.loadStation(); stationInstance.stations.forEach((station) => { @@ -48,4 +57,12 @@ export const loadStation = () => { }); }; +const getLineValue = () => { + return { + lineName: $lineNameInput.value, + upStream: $upStream.value, + downStream: $downStream.value, + }; +}; + loadStation(); From f0e93c46c81f42b5849bcb9197044a12c4f20b8d Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 18:09:55 +0900 Subject: [PATCH 032/126] =?UTF-8?q?Feat=20:=20=EB=85=B8=EC=84=A0=20class?= =?UTF-8?q?=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EB=85=B8=EC=84=A0=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=8B=9C=20=ED=94=84=EB=A1=9C=ED=8D=BC?= =?UTF-8?q?=ED=8B=B0=EC=97=90=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 노선 클래스를 만들어서 노선이 추가될 때마다 class의 프로퍼티에도 추가해주었다. --- src/Model/line.js | 13 +++++++++++++ src/index.js | 6 +++++- 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 src/Model/line.js diff --git a/src/Model/line.js b/src/Model/line.js new file mode 100644 index 000000000..7ad2cb5d1 --- /dev/null +++ b/src/Model/line.js @@ -0,0 +1,13 @@ +export default class Line { + constructor() { + this.lines = []; + } + + loadLine() {} + + addLine(line) { + return this.lines.push(line); + } + + removeLine() {} +} diff --git a/src/index.js b/src/index.js index bc2f6f4a0..20a643ee3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ import Station from './Model/station.js'; +import Line from './Model/line.js'; import {hideScreen} from './View/hide-screen.js'; import {showScreen} from './View/show-screen.js'; import {addStationScreen, addLastStopScreen} from './View/add-screen.js'; @@ -19,6 +20,7 @@ import { } from './Controller/local-storage.js'; const stationInstance = new Station(); +const lineInstance = new Line(); export function onChangeScreen(e) { hideScreen(); @@ -46,7 +48,9 @@ export function onRemoveStation(e) { } export function onAddLine() { - setLocalStorage('line', getLineValue()); + const lineValue = getLineValue(); + setLocalStorage('line', lineValue); + lineInstance.addLine(lineValue); } export const loadStation = () => { From 30f893f496b631d7d8efd6ff3f2ee1b1190d925b Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 18:24:08 +0900 Subject: [PATCH 033/126] =?UTF-8?q?Feat=20:=20=EB=85=B8=EC=84=A0=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=8B=9C=20=ED=99=94=EB=A9=B4=EC=97=90=20?= =?UTF-8?q?=EC=B6=9C=EB=A0=A5=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 노선을 추가할 시 테이블에 노선 이름과 상행, 하행과 삭제 버튼이 표시된다. --- src/View/add-screen.js | 17 +++++++++++++++-- src/View/input.js | 9 +++++++-- src/index.js | 7 ++++++- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/src/View/add-screen.js b/src/View/add-screen.js index 2acddd04a..b01c9dcdd 100644 --- a/src/View/add-screen.js +++ b/src/View/add-screen.js @@ -1,4 +1,4 @@ -import {$stationContainer, setStationButton} from './input.js'; +import {$stationContainer, $lineContainer, setButtonOption} from './input.js'; export const addStationScreen = (value) => { const $stationTbody = $stationContainer.querySelector('table > tbody'); @@ -7,7 +7,7 @@ export const addStationScreen = (value) => { ${value} `; - setStationButton(value, $stationTr.querySelector('button')); + setButtonOption(value, $stationTr.querySelector('button')); $stationTbody.appendChild($stationTr); }; @@ -21,3 +21,16 @@ export const addLastStopScreen = (station) => { $upStream.appendChild($optionUpStreamStation); $downStream.appendChild($optionDownStreamStation); }; + +export const addLineScreen = (line) => { + const $lineTbody = $lineContainer.querySelector('table > tbody'); + const $lineTr = document.createElement('tr'); + $lineTr.innerHTML = ` + ${line.lineName} + ${line.upStream} + ${line.downStream} + + `; + setButtonOption(line, $lineTr.querySelector('button')); + $lineTbody.appendChild($lineTr); +}; diff --git a/src/View/input.js b/src/View/input.js index 6d078966a..7b64ad983 100644 --- a/src/View/input.js +++ b/src/View/input.js @@ -25,9 +25,14 @@ export const $downStream = document.body.querySelector( export const $lineAddButton = document.body.querySelector('#line-add-button'); export const $lineNameInput = document.body.querySelector('#line-name-input'); -export const setStationButton = (value, button) => { +export const setButtonOption = (value, button) => { button.dataset.station = value; - button.addEventListener('click', onRemoveStation); + if (button.className === 'station-delete-button') { + return button.addEventListener('click', onRemoveStation); + } + if (button.className === 'line-delete-button') { + return button.addEventListener('click', onRemoveLine); + } }; $screenButton.forEach((button) => diff --git a/src/index.js b/src/index.js index 20a643ee3..2f516c0f0 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,11 @@ import Station from './Model/station.js'; import Line from './Model/line.js'; import {hideScreen} from './View/hide-screen.js'; import {showScreen} from './View/show-screen.js'; -import {addStationScreen, addLastStopScreen} from './View/add-screen.js'; +import { + addStationScreen, + addLastStopScreen, + addLineScreen, +} from './View/add-screen.js'; import { removeLastStopScreen, removeStationScreen, @@ -51,6 +55,7 @@ export function onAddLine() { const lineValue = getLineValue(); setLocalStorage('line', lineValue); lineInstance.addLine(lineValue); + addLineScreen(lineValue); } export const loadStation = () => { From a19e11c28ea8e363b5247d849b7e0040ffb89747 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 18:38:28 +0900 Subject: [PATCH 034/126] =?UTF-8?q?Feat=20:=20=EC=A7=80=ED=95=98=EC=B2=A0?= =?UTF-8?q?=20=EB=85=B8=EC=84=A0=20=EC=82=AD=EC=A0=9C=20=EC=8B=9C=20localS?= =?UTF-8?q?torage=EC=97=90=EC=84=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit removeLocalStorage를 재사용했으며, key로 구분해주었다. --- src/Controller/local-storage.js | 11 ++++++++--- src/View/add-screen.js | 2 +- src/View/input.js | 4 +++- src/index.js | 4 ++++ 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/Controller/local-storage.js b/src/Controller/local-storage.js index ab8103a48..540fec304 100644 --- a/src/Controller/local-storage.js +++ b/src/Controller/local-storage.js @@ -18,9 +18,14 @@ export const getLocalStorage = (key) => { export const removeLocalStorage = (key, value) => { const localStorageValue = getLocalStorage(key); - const filteredStorage = localStorageValue.filter( - (station) => station !== value, - ); + const filteredStorage = localStorageValue.filter((storage) => { + if (key === 'station') { + return storage !== value; + } + if (key === 'line') { + return storage.lineName !== value; + } + }); return localStorage.setItem(key, JSON.stringify(filteredStorage)); }; diff --git a/src/View/add-screen.js b/src/View/add-screen.js index b01c9dcdd..f77b58c60 100644 --- a/src/View/add-screen.js +++ b/src/View/add-screen.js @@ -31,6 +31,6 @@ export const addLineScreen = (line) => { ${line.downStream} `; - setButtonOption(line, $lineTr.querySelector('button')); + setButtonOption(line.lineName, $lineTr.querySelector('button')); $lineTbody.appendChild($lineTr); }; diff --git a/src/View/input.js b/src/View/input.js index 7b64ad983..76dc1afc5 100644 --- a/src/View/input.js +++ b/src/View/input.js @@ -3,6 +3,7 @@ import { onAddStation, onRemoveStation, onAddLine, + onRemoveLine, } from '../index.js'; export const $screenButton = document.body.querySelectorAll('#app > button'); @@ -26,11 +27,12 @@ export const $lineAddButton = document.body.querySelector('#line-add-button'); export const $lineNameInput = document.body.querySelector('#line-name-input'); export const setButtonOption = (value, button) => { - button.dataset.station = value; if (button.className === 'station-delete-button') { + button.dataset.station = value; return button.addEventListener('click', onRemoveStation); } if (button.className === 'line-delete-button') { + button.dataset.line = value; return button.addEventListener('click', onRemoveLine); } }; diff --git a/src/index.js b/src/index.js index 2f516c0f0..f57a3f399 100644 --- a/src/index.js +++ b/src/index.js @@ -58,6 +58,10 @@ export function onAddLine() { addLineScreen(lineValue); } +export function onRemoveLine(e) { + removeLocalStorage('line', e.target.dataset.line); +} + export const loadStation = () => { stationInstance.loadStation(); stationInstance.stations.forEach((station) => { From b6694880186acdf8669fbb32a7eb14574c0f481a Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 18:50:39 +0900 Subject: [PATCH 035/126] =?UTF-8?q?Feat=20:=20=EB=85=B8=EC=84=A0=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 노선 삭제 버튼 클릭 시 해당 노선이 localStorage와 class, 화면에서 모두 삭제된다. --- src/Model/line.js | 6 +++++- src/View/remove-screen.js | 13 ++++++++++++- src/index.js | 3 +++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/Model/line.js b/src/Model/line.js index 7ad2cb5d1..a17eedce2 100644 --- a/src/Model/line.js +++ b/src/Model/line.js @@ -9,5 +9,9 @@ export default class Line { return this.lines.push(line); } - removeLine() {} + removeLine(line) { + const removedLineIndex = this.lines.findIndex((v) => v.lineName === line); + + return this.lines.splice(removedLineIndex, 1); + } } diff --git a/src/View/remove-screen.js b/src/View/remove-screen.js index ac2012e53..4ededbc7c 100644 --- a/src/View/remove-screen.js +++ b/src/View/remove-screen.js @@ -1,4 +1,9 @@ -import {$stationContainer, $downStream, $upStream} from './input.js'; +import { + $stationContainer, + $downStream, + $upStream, + $lineContainer, +} from './input.js'; export const removeStationScreen = (button) => { const $stationTbody = $stationContainer.querySelector('table > tbody'); @@ -18,3 +23,9 @@ export const removeLastStopScreen = (station) => { $upStream.removeChild(removedUpStreamOption); $downStream.removeChild(removedDownStreamOption); }; + +export const removeLineScreen = (button) => { + const $lineTbody = $lineContainer.querySelector('table > tbody'); + const $lineTr = button.parentElement.parentElement; + $lineTbody.removeChild($lineTr); +}; diff --git a/src/index.js b/src/index.js index f57a3f399..27f29716f 100644 --- a/src/index.js +++ b/src/index.js @@ -10,6 +10,7 @@ import { import { removeLastStopScreen, removeStationScreen, + removeLineScreen, } from './View/remove-screen.js'; import { $stationAddInput, @@ -60,6 +61,8 @@ export function onAddLine() { export function onRemoveLine(e) { removeLocalStorage('line', e.target.dataset.line); + lineInstance.removeLine(e.target.dataset.line); + removeLineScreen(e.target); } export const loadStation = () => { From 96e2d7d8f5782fb0901c56ee106b6831ad3d4583 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 20:30:58 +0900 Subject: [PATCH 036/126] =?UTF-8?q?Feat=20:=20=EB=85=B8=EC=84=A0=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=8B=9C=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20?= =?UTF-8?q?=EA=B2=80=EC=82=AC=20-=20=EC=98=88=EC=99=B8=EC=B2=98=EB=A6=AC?= =?UTF-8?q?=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 2글자 미만 에러 2. 한글과 숫자만 가능 3. 노선 이름 중복 불가 4. 상행과 하행이 같은 역일 시 에러 --- src/Controller/valid.js | 17 +++++++++++++++++ src/index.js | 11 +++++++---- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/Controller/valid.js b/src/Controller/valid.js index 23333c5d1..dab9b74fd 100644 --- a/src/Controller/valid.js +++ b/src/Controller/valid.js @@ -11,3 +11,20 @@ export const isInputValid = (value, exStation) => { return true; }; + +export const isLineInputValid = (userLine, exLine) => { + if (userLine.lineName.length < 2) { + return alert('2글자 이상으로 입력해주세요.'); + } + if (userLine.lineName.match(/[^가-힣1-9]/)) { + return alert('띄어쓰기 없이 한글만 입력해주세요.'); + } + if (exLine && exLine.find((line) => line.lineName === userLine.lineName)) { + return alert('이미 동일한 노선 이름이 존재합니다.'); + } + if (userLine.upStream === userLine.downStream) { + return alert('상행과 하행이 같은 역이 될 수 없습니다.'); + } + + return true; +}; diff --git a/src/index.js b/src/index.js index 27f29716f..980dec3c0 100644 --- a/src/index.js +++ b/src/index.js @@ -18,7 +18,7 @@ import { $downStream, $lineNameInput, } from './View/input.js'; -import {isInputValid} from './Controller/valid.js'; +import {isInputValid, isLineInputValid} from './Controller/valid.js'; import { setLocalStorage, removeLocalStorage, @@ -54,9 +54,12 @@ export function onRemoveStation(e) { export function onAddLine() { const lineValue = getLineValue(); - setLocalStorage('line', lineValue); - lineInstance.addLine(lineValue); - addLineScreen(lineValue); + if (isLineInputValid(lineValue, lineInstance.lines)) { + setLocalStorage('line', lineValue); + lineInstance.addLine(lineValue); + addLineScreen(lineValue); + } + $lineNameInput.value = ''; } export function onRemoveLine(e) { From 5181593780226701812f07c39b276abbdc759ff5 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 20:32:35 +0900 Subject: [PATCH 037/126] =?UTF-8?q?Style=20:=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 띄어쓰기 없이 숫자도 입력 가능 --- src/Controller/valid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Controller/valid.js b/src/Controller/valid.js index dab9b74fd..4f3d41e86 100644 --- a/src/Controller/valid.js +++ b/src/Controller/valid.js @@ -17,7 +17,7 @@ export const isLineInputValid = (userLine, exLine) => { return alert('2글자 이상으로 입력해주세요.'); } if (userLine.lineName.match(/[^가-힣1-9]/)) { - return alert('띄어쓰기 없이 한글만 입력해주세요.'); + return alert('띄어쓰기 없이 한글과 숫자만 입력해주세요.'); } if (exLine && exLine.find((line) => line.lineName === userLine.lineName)) { return alert('이미 동일한 노선 이름이 존재합니다.'); From 826674d1ead96a24fbdd4b14c580d379b6c1d80c Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 20:33:58 +0900 Subject: [PATCH 038/126] =?UTF-8?q?Style=20:=20=EB=B3=80=EC=88=98,?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit station의 input만 관리하는 함수이기 때문에 isStationInputValid로 교체, 또한 value보다는 station이 더 잘 어울리는 것 같아서 변경 --- src/Controller/valid.js | 8 ++++---- src/index.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Controller/valid.js b/src/Controller/valid.js index 4f3d41e86..3a3981a14 100644 --- a/src/Controller/valid.js +++ b/src/Controller/valid.js @@ -1,11 +1,11 @@ -export const isInputValid = (value, exStation) => { - if (value.length < 2) { +export const isStationInputVaild = (station, exStation) => { + if (station.length < 2) { return alert('2글자 이상으로 입력해주세요.'); } - if (value.match(/[^가-힣]/)) { + if (station.match(/[^가-힣]/)) { return alert('띄어쓰기 없이 한글만 입력해주세요.'); } - if (exStation && exStation.includes(value)) { + if (exStation && exStation.includes(station)) { return alert('중복된 역이 존재합니다.'); } diff --git a/src/index.js b/src/index.js index 980dec3c0..9518616e7 100644 --- a/src/index.js +++ b/src/index.js @@ -18,7 +18,7 @@ import { $downStream, $lineNameInput, } from './View/input.js'; -import {isInputValid, isLineInputValid} from './Controller/valid.js'; +import {isStationInputVaild, isLineInputValid} from './Controller/valid.js'; import { setLocalStorage, removeLocalStorage, @@ -33,7 +33,7 @@ export function onChangeScreen(e) { } export function onAddStation() { - if (isInputValid($stationAddInput.value, stationInstance.stations)) { + if (isStationInputVaild($stationAddInput.value, stationInstance.stations)) { setLocalStorage('station', $stationAddInput.value); stationInstance.addStation($stationAddInput.value); addStationScreen($stationAddInput.value); From 9dda8035e70b7783b29dd46fc3c9b19baaac207d Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 21:18:21 +0900 Subject: [PATCH 039/126] =?UTF-8?q?Refactor=20:=20=EC=9C=A0=ED=9A=A8?= =?UTF-8?q?=EC=84=B1=20=EA=B2=80=EC=82=AC=20=ED=95=A8=EC=88=98=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 유효성을 검사하는 함수의 조건문을 각각의 함수로 분리했다. --- src/Controller/valid.js | 62 +++++++++++++++++++++++++++++++++-------- 1 file changed, 51 insertions(+), 11 deletions(-) diff --git a/src/Controller/valid.js b/src/Controller/valid.js index 3a3981a14..41c3ca7fc 100644 --- a/src/Controller/valid.js +++ b/src/Controller/valid.js @@ -1,28 +1,68 @@ export const isStationInputVaild = (station, exStation) => { - if (station.length < 2) { - return alert('2글자 이상으로 입력해주세요.'); + if (!isLengthRight(station)) { + return false; } - if (station.match(/[^가-힣]/)) { - return alert('띄어쓰기 없이 한글만 입력해주세요.'); + if (!isMatched(station)) { + return false; } - if (exStation && exStation.includes(station)) { - return alert('중복된 역이 존재합니다.'); + if (!isAllDifferentStation(station, exStation)) { + return false; } return true; }; export const isLineInputValid = (userLine, exLine) => { - if (userLine.lineName.length < 2) { + if (!isLengthRight(userLine.lineName)) { + return false; + } + if (!isMatched(userLine.lineName)) { + return false; + } + if (!isAllDifferentLine(userLine.lineName, exLine)) { + return false; + } + if (!isUpDownStreamDifferent(userLine.upStream, userLine.downStream)) { + return false; + } + + return true; +}; + +const isLengthRight = (value) => { + if (value.length < 2) { return alert('2글자 이상으로 입력해주세요.'); } - if (userLine.lineName.match(/[^가-힣1-9]/)) { + + return true; +}; + +const isMatched = (value) => { + if (value.match(/[^가-힣1-9]/)) { return alert('띄어쓰기 없이 한글과 숫자만 입력해주세요.'); } - if (exLine && exLine.find((line) => line.lineName === userLine.lineName)) { - return alert('이미 동일한 노선 이름이 존재합니다.'); + + return true; +}; + +const isAllDifferentStation = (station, allStations) => { + if (allStations && allStations.includes(station)) { + return alert('같은 이름의 역이 존재합니다.'); } - if (userLine.upStream === userLine.downStream) { + + return true; +}; + +const isAllDifferentLine = (userLine, allLines) => { + if (allLines.find((line) => line.lineName === userLine)) { + return alert('같은 이름의 노선이 존재합니다.'); + } + + return true; +}; + +const isUpDownStreamDifferent = (upStream, downStream) => { + if (upStream === downStream) { return alert('상행과 하행이 같은 역이 될 수 없습니다.'); } From 1d2635d4ad7bb8bb94bab9ab3ebb7c7a581ffd1f Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 21:23:41 +0900 Subject: [PATCH 040/126] =?UTF-8?q?Feat=20:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=EB=A1=9C=EB=93=9C=20=EC=8B=9C=20=EB=85=B8=EC=84=A0=20?= =?UTF-8?q?=EC=9E=90=EB=8F=99=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit localStorage에 저장된 노선을 js가 로드될 때 화면에 출력함으로써 새로고침 하더라도 이전에 작업한 정보를 불러온다 --- src/Model/line.js | 10 +++++++++- src/index.js | 6 ++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/Model/line.js b/src/Model/line.js index a17eedce2..e79efdf7d 100644 --- a/src/Model/line.js +++ b/src/Model/line.js @@ -1,9 +1,17 @@ +import {getLocalStorage} from '../Controller/local-storage.js'; + export default class Line { constructor() { this.lines = []; } - loadLine() {} + loadLine() { + const lines = getLocalStorage('line'); + + if (lines) { + return (this.lines = lines); + } + } addLine(line) { return this.lines.push(line); diff --git a/src/index.js b/src/index.js index 9518616e7..6fc032213 100644 --- a/src/index.js +++ b/src/index.js @@ -76,6 +76,11 @@ export const loadStation = () => { }); }; +export const loadLine = () => { + lineInstance.loadLine(); + lineInstance.lines.forEach((line) => addLineScreen(line)); +}; + const getLineValue = () => { return { lineName: $lineNameInput.value, @@ -85,3 +90,4 @@ const getLineValue = () => { }; loadStation(); +loadLine(); From cb8fd84d9dfe1ba581cf902bb4c55dd2ff1925f4 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 11 Dec 2020 21:26:35 +0900 Subject: [PATCH 041/126] =?UTF-8?q?Update=20:=20README.md=20-=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EB=AA=A9=EB=A1=9D=20=EC=B5=9C?= =?UTF-8?q?=EC=8B=A0=ED=99=94=20=EB=B0=8F=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 우선, 예외처리 사항에서 역과 노선 이름을 입력할 때 숫자도 가능하게 했다. 제11공항 같이 숫자를 입력해야 할 수도 있기 때문이다. 그리고 당연하게도 한 노선에서 중복된 역으로 저장할 수 없다. 상행과 하행은 항상 달라야 한다. --- docs/README.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/README.md b/docs/README.md index c13f9821f..a79af78ff 100644 --- a/docs/README.md +++ b/docs/README.md @@ -19,7 +19,7 @@ - 예외처리) - ✔ 중복 불가 - ✔ 2글자 미만 불가 - - ✔ 한글만 가능(기능 추가) + - ✔ 한글과 숫자만 가능(기능 추가) - ✔ 역을 삭제할 수 있고, 화면에서 삭제한다. - 예외처리) @@ -27,14 +27,15 @@ ### 노선 관리 -- 존재하는 역을 통해 상행과 하행 종점을 선택할 수 있고, 이름을 정해서 노선을 추가할 수 있으며, 화면에 추가한다. +- ✔ 존재하는 역을 통해 상행과 하행 종점을 선택할 수 있고, 이름을 정해서 노선을 추가할 수 있으며, 화면에 추가한다. - 예외처리) - - 노선 이름 중복 불가 - - 한글만 가능(기능 추가) - - 2글자 미만 불가(기능 추가) + - ✔ 노선 이름 중복 불가 + - ✔ 한글과 숫자만 가능(기능 추가) + - ✔ 2글자 미만 불가(기능 추가) + - ✔ 한 노선에서 중복된 역 입력 불가(기능 추가) -- 노선을 삭제할 수 있고, 화면에서 삭제한다. +- ✔ 노선을 삭제할 수 있고, 화면에서 삭제한다. ### 구간 관리 From e164411cc8bca7d924d987ee79d9a36fc976b2bd Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 12 Dec 2020 12:59:23 +0900 Subject: [PATCH 042/126] =?UTF-8?q?Feat=20:=20=EA=B5=AC=EA=B0=84=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 구간을 선택하는 버튼을 추가하기 위해 html에 버튼 container을 만들었고, 그 안에 버튼들을 추가했다. --- index.html | 1 + src/View/add-screen.js | 22 +++++++++++++++++++++- src/index.js | 6 +++++- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 466c6519a..92d8c93ab 100644 --- a/index.html +++ b/index.html @@ -53,6 +53,7 @@

지하철 노선 목록

-
+ From ca0ffa9492098a478285c81bf3871eb59395b8cc Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 14 Dec 2020 22:07:24 +0900 Subject: [PATCH 111/126] =?UTF-8?q?Refactor=20:=20=EB=8D=94=EC=9D=B4?= =?UTF-8?q?=EC=83=81=20=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EB=8A=94=20=ED=95=A8=EC=88=98=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/View/remove-screen.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/View/remove-screen.js b/src/View/remove-screen.js index 344b687f0..6eb6798b2 100644 --- a/src/View/remove-screen.js +++ b/src/View/remove-screen.js @@ -41,12 +41,6 @@ export const removeSectionButton = (lineName) => { $sectionEditButtonContainer.removeChild($removedSectionButton); }; -export const removeAllSelectorOption = ($selector) => { - while ($selector.firstChild) { - $selector.removeChild($selector.firstChild); - } -}; - export const removeMapPrint = (lineName) => { const $mapAllLines = $mapContainer.querySelectorAll('div'); const $removedMapLine = Array.from($mapAllLines).find( From 029ca36c2b38591eb284bd02765013a96529abe8 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 14 Dec 2020 22:10:49 +0900 Subject: [PATCH 112/126] =?UTF-8?q?Style=20:=20error=20message=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Controller/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Controller/utils.js b/src/Controller/utils.js index aafb77db1..2096bde8c 100644 --- a/src/Controller/utils.js +++ b/src/Controller/utils.js @@ -33,7 +33,7 @@ export const ERROR_MESSAGE = { SAME_LINE: '❌ 같은 이름의 노선이 존재합니다.', ALREADY_INCLUDE_STATION: '❌ 이미 역이 추가되어 있습니다.', SAME_LAST_STOP: '❌ 상행과 하행이 같은 역이 될 수 없습니다.', - NOT_NUMBER: '❌ 숫자를 입력해주세요.', + NOT_NUMBER: '❌ 0이상의 숫자를 입력해주세요.', LENGTH_LIMIT: '❌ 이하의 수를 입력해주세요.', }; From 8423ae83cc09ee3c51ef8757c6695841e60e11d4 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 13:06:25 +0900 Subject: [PATCH 113/126] =?UTF-8?q?Style=20:=20=EC=A0=9C=EB=AA=A9=EC=97=90?= =?UTF-8?q?=20=EC=9D=B4=EB=AA=A8=ED=8B=B0=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 3e26eeca3..bf34b9a8b 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

🚇 지하철 노선도 관리

역 이름
-

지하철 역 목록

+

🚉 지하철 역 목록

@@ -39,7 +39,7 @@

지하철 역 목록

-

지하철 노선 목록

+

🚉 지하철 노선 목록

From 4f90c634f4880c65239f362f3b63eabb9602ce98 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 13:17:47 +0900 Subject: [PATCH 114/126] =?UTF-8?q?Refactor=20:=20Model=EC=97=90=EC=84=9C?= =?UTF-8?q?=20Control=EC=B0=B8=EC=A1=B0=20x?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Model은 Control을 몰라야 한다. --- src/Controller/line-control.js | 9 +++++++-- src/Model/line.js | 7 +------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Controller/line-control.js b/src/Controller/line-control.js index 57758d807..606552605 100644 --- a/src/Controller/line-control.js +++ b/src/Controller/line-control.js @@ -16,7 +16,11 @@ import { removeMapPrint, } from '../View/remove-screen.js'; import {hideSectionEditContainer} from '../View/hide-screen.js'; -import {setLocalStorage, removeLocalStorage} from './local-storage.js'; +import { + setLocalStorage, + getLocalStorage, + removeLocalStorage, +} from './local-storage.js'; import {stationInstance, lineInstance} from '../index.js'; import {isLineInputValid} from './valid.js'; import {KEY, TEXT} from './utils.js'; @@ -47,7 +51,8 @@ export function onRemoveLine(e) { } export const loadLine = () => { - lineInstance.loadLine(); + const lines = getLocalStorage(KEY.LINE); + lineInstance.loadLine(lines); stationInstance.stations.forEach((station) => { addSelectorOption($upStreamSelector, station); addSelectorOption($downStreamSelector, station); diff --git a/src/Model/line.js b/src/Model/line.js index 57ec07f89..19dbb07d5 100644 --- a/src/Model/line.js +++ b/src/Model/line.js @@ -1,14 +1,9 @@ -import {getLocalStorage} from '../Controller/local-storage.js'; -import {KEY} from '../Controller/utils.js'; - export default class Line { constructor() { this.lines = []; } - loadLine() { - const lines = getLocalStorage(KEY.LINE); - + loadLine(lines) { if (lines) { return (this.lines = lines); } From db989fe4f3ec7f275e916e92bc699b45b381fb0b Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 13:35:11 +0900 Subject: [PATCH 115/126] =?UTF-8?q?Bug=20:=20=EB=85=B8=EC=84=A0=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EC=8B=9C=20=EA=B5=AC=EA=B0=84=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=82=AD=EC=A0=9C=EB=90=98=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 이전에 노선을 삭제했을 때, 구간에 그대로 남아있는 것을 보고 구간을 hide로 없어지게 만들었었는데, 삭제하는 것을 깜빡 잊고 하지 않았다. 오늘 버그를 발견해서 노선을 삭제할 때, 삭제된 노선을 구간에서도 삭제해주고, 구간 자체도 숨기는 것으로 구현했다. --- src/Controller/line-control.js | 2 ++ src/View/remove-screen.js | 12 ++++++++++++ 2 files changed, 14 insertions(+) diff --git a/src/Controller/line-control.js b/src/Controller/line-control.js index 606552605..da9f7a1f5 100644 --- a/src/Controller/line-control.js +++ b/src/Controller/line-control.js @@ -13,6 +13,7 @@ import { import { removeLineScreen, removeSectionButton, + removeSectionScreen, removeMapPrint, } from '../View/remove-screen.js'; import {hideSectionEditContainer} from '../View/hide-screen.js'; @@ -45,6 +46,7 @@ export function onRemoveLine(e) { lineInstance.removeLine(e.target.dataset.lineName); removeLineScreen(e.target); removeSectionButton(e.target.dataset.lineName); + removeSectionScreen(e.target.dataset.lineName); removeMapPrint(e.target.dataset.lineName); hideSectionEditContainer(); } diff --git a/src/View/remove-screen.js b/src/View/remove-screen.js index 6eb6798b2..2ce68533d 100644 --- a/src/View/remove-screen.js +++ b/src/View/remove-screen.js @@ -3,6 +3,7 @@ import { $lineTbody, $sectionEditButtonContainer, $mapContainer, + $sectionTbody, } from './element.js'; export const removeStationScreen = (button) => { @@ -31,6 +32,17 @@ export const removeTableScreen = ($container) => { } }; +export const removeSectionScreen = (lineName) => { + const $allSectionTr = $sectionTbody.querySelectorAll('tr'); + const $allDeletedSectionTr = Array.from($allSectionTr).filter( + (tr) => tr.dataset.lineName === lineName, + ); + + for (let i = 0; i < $allDeletedSectionTr.length; i++) { + $sectionTbody.removeChild($allDeletedSectionTr[i]); + } +}; + export const removeSectionButton = (lineName) => { const $sectionAllLineButton = $sectionEditButtonContainer.querySelectorAll( 'button', From 0d7db3e12269da38ee7328aa4ceb2aaf8623fa50 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 13:36:54 +0900 Subject: [PATCH 116/126] =?UTF-8?q?Style=20:=20line=20->=20lineName?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Model/line.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Model/line.js b/src/Model/line.js index 19dbb07d5..8eec3bacb 100644 --- a/src/Model/line.js +++ b/src/Model/line.js @@ -13,8 +13,10 @@ export default class Line { return this.lines.push(line); } - removeLine(line) { - const removedLineIndex = this.lines.findIndex((v) => v.lineName === line); + removeLine(lineName) { + const removedLineIndex = this.lines.findIndex( + (v) => v.lineName === lineName, + ); return this.lines.splice(removedLineIndex, 1); } From 1854339e6a075facc801e87565ba50d5420e2db4 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 13:40:43 +0900 Subject: [PATCH 117/126] Refactor : Station class refactoring MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 역 모델은 더이상 컨트롤러를 알 수 없고, 식별자도 가독성 있게 변경했다. value => stationName --- src/Controller/station-control.js | 9 +++++++-- src/Model/station.js | 14 +++++--------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/Controller/station-control.js b/src/Controller/station-control.js index 636fadce1..4313883fb 100644 --- a/src/Controller/station-control.js +++ b/src/Controller/station-control.js @@ -9,13 +9,18 @@ import { removeStationScreen, removeSelectorOption, } from '../View/remove-screen.js'; -import {setLocalStorage, removeLocalStorage} from './local-storage.js'; +import { + setLocalStorage, + getLocalStorage, + removeLocalStorage, +} from './local-storage.js'; import {isNotLineHaved, isStationInputVaild} from './valid.js'; import {stationInstance, lineInstance} from '../index.js'; import {KEY, TEXT} from './utils.js'; export const loadStation = () => { - stationInstance.loadStation(); + const stations = getLocalStorage(KEY.STATION); + stationInstance.loadStation(stations); stationInstance.stations.forEach((station) => addStationScreen(station)); }; diff --git a/src/Model/station.js b/src/Model/station.js index 8a9be36bc..add85cc11 100644 --- a/src/Model/station.js +++ b/src/Model/station.js @@ -1,24 +1,20 @@ -import {getLocalStorage} from '../Controller/local-storage.js'; -import {KEY} from '../Controller/utils.js'; - export default class Station { constructor() { this.stations = []; } - loadStation() { - const stations = getLocalStorage(KEY.STATION); + loadStation(stations) { if (stations) { return (this.stations = stations); } } - addStation(value) { - return this.stations.push(value); + addStation(stationName) { + return this.stations.push(stationName); } - removeStation(value) { - const removedStationIndex = this.stations.indexOf(value); + removeStation(stationName) { + const removedStationIndex = this.stations.indexOf(stationName); return this.stations.splice(removedStationIndex, 1); } From 3e179c1ec9184a3cf7ffc863f50459689ba45fb3 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 13:43:42 +0900 Subject: [PATCH 118/126] =?UTF-8?q?Style=20:=20utils=20=3D>=20constant=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 파일 명을 변경했다. --- src/Controller/{utils.js => constant.js} | 0 src/Controller/line-control.js | 2 +- src/Controller/local-storage.js | 2 +- src/Controller/section-control.js | 2 +- src/Controller/station-control.js | 2 +- src/Controller/valid.js | 2 +- src/View/add-screen.js | 2 +- src/View/show-screen.js | 2 +- 8 files changed, 7 insertions(+), 7 deletions(-) rename src/Controller/{utils.js => constant.js} (100%) diff --git a/src/Controller/utils.js b/src/Controller/constant.js similarity index 100% rename from src/Controller/utils.js rename to src/Controller/constant.js diff --git a/src/Controller/line-control.js b/src/Controller/line-control.js index da9f7a1f5..a62d90f82 100644 --- a/src/Controller/line-control.js +++ b/src/Controller/line-control.js @@ -24,7 +24,7 @@ import { } from './local-storage.js'; import {stationInstance, lineInstance} from '../index.js'; import {isLineInputValid} from './valid.js'; -import {KEY, TEXT} from './utils.js'; +import {KEY, TEXT} from './constant.js'; export function onAddLine() { const lineValue = getLineValue(); diff --git a/src/Controller/local-storage.js b/src/Controller/local-storage.js index 3bfc4b590..2d3d3cc0d 100644 --- a/src/Controller/local-storage.js +++ b/src/Controller/local-storage.js @@ -1,4 +1,4 @@ -import {KEY} from './utils.js'; +import {KEY} from './constant.js'; export const addSectionOnLocalStorage = (key, value) => { const localStorageValue = getLocalStorage(key); diff --git a/src/Controller/section-control.js b/src/Controller/section-control.js index d819d7260..e598bbbad 100644 --- a/src/Controller/section-control.js +++ b/src/Controller/section-control.js @@ -22,7 +22,7 @@ import { removeSectionOnLocalStorage, } from './local-storage.js'; import {stationInstance, lineInstance} from '../index.js'; -import {KEY, TEXT} from './utils.js'; +import {KEY, TEXT} from './constant.js'; export function onLoadSection(e) { hideSectionLine(); diff --git a/src/Controller/station-control.js b/src/Controller/station-control.js index 4313883fb..08587a4ea 100644 --- a/src/Controller/station-control.js +++ b/src/Controller/station-control.js @@ -16,7 +16,7 @@ import { } from './local-storage.js'; import {isNotLineHaved, isStationInputVaild} from './valid.js'; import {stationInstance, lineInstance} from '../index.js'; -import {KEY, TEXT} from './utils.js'; +import {KEY, TEXT} from './constant.js'; export const loadStation = () => { const stations = getLocalStorage(KEY.STATION); diff --git a/src/Controller/valid.js b/src/Controller/valid.js index b439a6c55..d00337ad8 100644 --- a/src/Controller/valid.js +++ b/src/Controller/valid.js @@ -1,4 +1,4 @@ -import {ERROR_MESSAGE, MIN_LETTER, MIN_LINE_LENGTH} from './utils.js'; +import {ERROR_MESSAGE, MIN_LETTER, MIN_LINE_LENGTH} from './constant.js'; export const isStationInputVaild = (station, exStation) => { if (!isMatched(station)) { diff --git a/src/View/add-screen.js b/src/View/add-screen.js index d74f6a24e..590e0c8ac 100644 --- a/src/View/add-screen.js +++ b/src/View/add-screen.js @@ -12,7 +12,7 @@ import { $sectionEditContainer, $mapContainer, } from './element.js'; -import {TEXT, ADD_BUTTON_CLASS} from '../Controller/utils.js'; +import {TEXT, ADD_BUTTON_CLASS} from '../Controller/constant.js'; const { STATION_DELETE, diff --git a/src/View/show-screen.js b/src/View/show-screen.js index da3c4eb7a..da197c7bb 100644 --- a/src/View/show-screen.js +++ b/src/View/show-screen.js @@ -5,7 +5,7 @@ import { $mapContainer, $sectionEditContainer, } from './element.js'; -import {BUTTON_MANAGEMENT_ID} from '../Controller/utils.js'; +import {BUTTON_MANAGEMENT_ID} from '../Controller/constant.js'; export const showScreen = (e) => { const {STATION, LINE, SECTION, MAP} = BUTTON_MANAGEMENT_ID; From 2a13db17a35995ba4f1d5f71e46e920c8de5ae64 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 14:05:06 +0900 Subject: [PATCH 119/126] =?UTF-8?q?Refactor=20:=20View=20=3D>=20index?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit View가 control을 알고 있으면 안되기 때문에 index로 옮기는 작업을 하고 있다. --- src/Controller/line-control.js | 4 ++-- src/Controller/section-control.js | 4 ++-- src/Controller/station-control.js | 4 ++-- src/View/input.js | 27 +++-------------------- src/index.js | 36 +++++++++++++++++++++++-------- 5 files changed, 36 insertions(+), 39 deletions(-) diff --git a/src/Controller/line-control.js b/src/Controller/line-control.js index a62d90f82..0c29e7a51 100644 --- a/src/Controller/line-control.js +++ b/src/Controller/line-control.js @@ -26,7 +26,7 @@ import {stationInstance, lineInstance} from '../index.js'; import {isLineInputValid} from './valid.js'; import {KEY, TEXT} from './constant.js'; -export function onAddLine() { +export const onAddLine = () => { const lineValue = getLineValue(); if (isLineInputValid(lineValue, lineInstance.lines)) { setLocalStorage(KEY.LINE, lineValue); @@ -37,7 +37,7 @@ export function onAddLine() { addMapPrint([lineValue]); } $lineNameInput.value = ''; -} +}; export function onRemoveLine(e) { const removeConfirm = confirm(TEXT.CONFIRM_DELETE); diff --git a/src/Controller/section-control.js b/src/Controller/section-control.js index e598bbbad..c8edc617f 100644 --- a/src/Controller/section-control.js +++ b/src/Controller/section-control.js @@ -31,7 +31,7 @@ export function onLoadSection(e) { $sectionAddButton.dataset.lineName = e.target.dataset.lineName; } -export function onAddSection(e) { +export const onAddSection = (e) => { const sectionValue = getSectionValue(e.target.dataset.lineName); const selectedSection = getSelectedSection(sectionValue.lineName); if (isSectionValid(sectionValue, selectedSection.station)) { @@ -41,7 +41,7 @@ export function onAddSection(e) { showSectionScreen(e.target.dataset.lineName); } $sectionOrderInput.value = ''; -} +}; export function onRemoveSection(e) { const removeConfirm = confirm(TEXT.CONFIRM_DELETE); diff --git a/src/Controller/station-control.js b/src/Controller/station-control.js index 08587a4ea..ab53afcd1 100644 --- a/src/Controller/station-control.js +++ b/src/Controller/station-control.js @@ -24,7 +24,7 @@ export const loadStation = () => { stationInstance.stations.forEach((station) => addStationScreen(station)); }; -export function onAddStation() { +export const onAddStation = () => { if (isStationInputVaild($stationNameInput.value, stationInstance.stations)) { setLocalStorage(KEY.STATION, $stationNameInput.value); stationInstance.addStation($stationNameInput.value); @@ -34,7 +34,7 @@ export function onAddStation() { addSelectorOption($sectionSelector, $stationNameInput.value); } $stationNameInput.value = ''; -} +}; export function onRemoveStation(e) { const removeConfirm = confirm(TEXT.CONFIRM_DELETE); diff --git a/src/View/input.js b/src/View/input.js index 0043e43c6..bcfd57f7a 100644 --- a/src/View/input.js +++ b/src/View/input.js @@ -1,17 +1,6 @@ -import {onChangeScreen} from '../index.js'; -import {onAddStation, onRemoveStation} from '../Controller/station-control.js'; -import {onAddLine, onRemoveLine} from '../Controller/line-control.js'; -import { - onAddSection, - onRemoveSection, - onLoadSection, -} from '../Controller/section-control.js'; -import { - $screenAllButton, - $stationAddButton, - $lineAddButton, - $sectionAddButton, -} from './element.js'; +import {onRemoveStation} from '../Controller/station-control.js'; +import {onRemoveLine} from '../Controller/line-control.js'; +import {onRemoveSection, onLoadSection} from '../Controller/section-control.js'; export const setStationDeleteButton = (station, $button) => { $button.dataset.stationName = station; @@ -32,13 +21,3 @@ export const setSectionLoadButton = (line, $button) => { $button.dataset.lineName = line; $button.addEventListener('click', onLoadSection); }; - -$screenAllButton.forEach((button) => - button.addEventListener('click', onChangeScreen), -); - -$stationAddButton.addEventListener('click', onAddStation); - -$lineAddButton.addEventListener('click', onAddLine); - -$sectionAddButton.addEventListener('click', onAddSection); diff --git a/src/index.js b/src/index.js index 9e02eff54..206db4d42 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,17 @@ import Station from './Model/station.js'; import Line from './Model/line.js'; +import { + $screenAllButton, + $stationAddButton, + $lineAddButton, + $sectionAddButton, +} from './View/element.js'; import {hideScreen} from './View/hide-screen.js'; import {showScreen} from './View/show-screen.js'; -import {loadStation} from './Controller/station-control.js'; -import {loadLine} from './Controller/line-control.js'; +import {onAddStation, loadStation} from './Controller/station-control.js'; +import {onAddLine, loadLine} from './Controller/line-control.js'; import { + onAddSection, loadSectionButton, loadSectionTable, } from './Controller/section-control.js'; @@ -13,13 +20,24 @@ import {loadMapPrint} from './Controller/map-print-control.js'; export const stationInstance = new Station(); export const lineInstance = new Line(); -export function onChangeScreen(e) { +const onChangeScreen = (e) => { hideScreen(); showScreen(e); -} +}; + +const gameStart = () => { + $screenAllButton.forEach((button) => + button.addEventListener('click', onChangeScreen), + ); + $stationAddButton.addEventListener('click', onAddStation); + $lineAddButton.addEventListener('click', onAddLine); + $sectionAddButton.addEventListener('click', onAddSection); + + loadStation(); + loadLine(); + loadSectionButton(); + loadSectionTable(); + loadMapPrint(); +}; -loadStation(); -loadLine(); -loadSectionButton(); -loadSectionTable(); -loadMapPrint(); +gameStart(); From bc561f441fbeaa51fd5304d1f9043a0fc06fcb08 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 14:46:51 +0900 Subject: [PATCH 120/126] =?UTF-8?q?Refactor=20:=20View=EC=97=90=EC=84=9C?= =?UTF-8?q?=20controller=20=EC=B0=B8=EC=A1=B0=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EA=B0=92=20=EB=B6=84=EB=A6=AC=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 현재 View의 add-screen에서 스크린에 역 삭제 버튼, 노선 삭제 버튼, 구간 삭제 버튼, 구간 로드 버튼을 만들 때 버튼에 event를 등록하는 것을 controller에서 가져와서 사용중인데, 이것을 분리해야 할 것 같아서 따로 설정중 --- src/Controller/station-control.js | 14 +++++++++++++- src/View/add-screen.js | 22 +++++++++------------- src/View/input.js | 23 ----------------------- src/index.js | 28 ++++++++++++++++++++++------ 4 files changed, 44 insertions(+), 43 deletions(-) delete mode 100644 src/View/input.js diff --git a/src/Controller/station-control.js b/src/Controller/station-control.js index ab53afcd1..2112c9d5d 100644 --- a/src/Controller/station-control.js +++ b/src/Controller/station-control.js @@ -1,4 +1,5 @@ import { + $stationTbody, $stationNameInput, $upStreamSelector, $downStreamSelector, @@ -21,7 +22,10 @@ import {KEY, TEXT} from './constant.js'; export const loadStation = () => { const stations = getLocalStorage(KEY.STATION); stationInstance.loadStation(stations); - stationInstance.stations.forEach((station) => addStationScreen(station)); + stationInstance.stations.forEach((stationName) => { + addStationScreen(stationName); + setButtonDeleteEvent(stationName); + }); }; export const onAddStation = () => { @@ -32,6 +36,7 @@ export const onAddStation = () => { addSelectorOption($upStreamSelector, $stationNameInput.value); addSelectorOption($downStreamSelector, $stationNameInput.value); addSelectorOption($sectionSelector, $stationNameInput.value); + setButtonDeleteEvent($stationNameInput.value); } $stationNameInput.value = ''; }; @@ -50,3 +55,10 @@ export function onRemoveStation(e) { removeSelectorOption($sectionSelector, e.target.dataset.stationName); } } + +const setButtonDeleteEvent = (stationName) => { + const $button = $stationTbody.querySelector( + `[data-station-name=${stationName}]`, + ); + $button.addEventListener('click', onRemoveStation); +}; diff --git a/src/View/add-screen.js b/src/View/add-screen.js index 590e0c8ac..fd18695d9 100644 --- a/src/View/add-screen.js +++ b/src/View/add-screen.js @@ -1,9 +1,3 @@ -import { - setStationDeleteButton, - setLineDeleteButton, - setSectionDeleteButton, - setSectionLoadButton, -} from './input.js'; import { $stationTbody, $lineTbody, @@ -29,7 +23,7 @@ export const addStationScreen = (stationName) => { `; - setStationDeleteButton(stationName, $stationTr.querySelector('button')); + $stationTr.querySelector('button').dataset.stationName = stationName; $stationTbody.appendChild($stationTr); }; @@ -47,7 +41,7 @@ export const addLineScreen = (line) => { `; - setLineDeleteButton(line.lineName, $lineTr.querySelector('button')); + $lineTr.querySelector('button').dataset.lineName = line.lineName; $lineTbody.appendChild($lineTr); }; @@ -64,15 +58,17 @@ export const addSectionScreen = (line) => { `; - setSectionTr($sectionTr, line.lineName); const sectionData = {lineName: line.lineName, station: line.station[i]}; - setSectionDeleteButton(sectionData, $sectionTr.querySelector('button')); + setSectionData($sectionTr, sectionData); $sectionTbody.appendChild($sectionTr); } }; -const setSectionTr = ($sectionTr, lineName) => { - $sectionTr.dataset.lineName = lineName; +const setSectionData = ($sectionTr, sectionData) => { + $sectionTr.querySelector('button').dataset.sectionLine = JSON.stringify( + sectionData, + ); + $sectionTr.dataset.lineName = sectionData.lineName; $sectionTr.style.display = 'none'; }; @@ -80,7 +76,7 @@ export const addSectionButton = (lineName) => { const $sectionButton = document.createElement('button'); $sectionButton.className = SECTION_LINE_MENU; $sectionButton.textContent = lineName; - setSectionLoadButton(lineName, $sectionButton); + $sectionButton.dataset.lineName = lineName; $sectionEditButtonContainer.appendChild($sectionButton); }; diff --git a/src/View/input.js b/src/View/input.js deleted file mode 100644 index bcfd57f7a..000000000 --- a/src/View/input.js +++ /dev/null @@ -1,23 +0,0 @@ -import {onRemoveStation} from '../Controller/station-control.js'; -import {onRemoveLine} from '../Controller/line-control.js'; -import {onRemoveSection, onLoadSection} from '../Controller/section-control.js'; - -export const setStationDeleteButton = (station, $button) => { - $button.dataset.stationName = station; - $button.addEventListener('click', onRemoveStation); -}; - -export const setLineDeleteButton = (line, $button) => { - $button.dataset.lineName = line; - $button.addEventListener('click', onRemoveLine); -}; - -export const setSectionDeleteButton = (line, $button) => { - $button.dataset.sectionLine = JSON.stringify(line); - $button.addEventListener('click', onRemoveSection); -}; - -export const setSectionLoadButton = (line, $button) => { - $button.dataset.lineName = line; - $button.addEventListener('click', onLoadSection); -}; diff --git a/src/index.js b/src/index.js index 206db4d42..99173d9f9 100644 --- a/src/index.js +++ b/src/index.js @@ -8,12 +8,18 @@ import { } from './View/element.js'; import {hideScreen} from './View/hide-screen.js'; import {showScreen} from './View/show-screen.js'; -import {onAddStation, loadStation} from './Controller/station-control.js'; -import {onAddLine, loadLine} from './Controller/line-control.js'; +import { + onAddStation, + loadStation, + onRemoveStation, +} from './Controller/station-control.js'; +import {onAddLine, loadLine, onRemoveLine} from './Controller/line-control.js'; import { onAddSection, loadSectionButton, loadSectionTable, + onLoadSection, + onRemoveSection, } from './Controller/section-control.js'; import {loadMapPrint} from './Controller/map-print-control.js'; @@ -25,7 +31,19 @@ const onChangeScreen = (e) => { showScreen(e); }; -const gameStart = () => { +export const setLineDeleteButton = ($button) => { + $button.addEventListener('click', onRemoveLine); +}; + +export const setSectionDeleteButton = ($button) => { + $button.addEventListener('click', onRemoveSection); +}; + +export const setSectionLoadButton = ($button) => { + $button.addEventListener('click', onLoadSection); +}; + +(function gameStart() { $screenAllButton.forEach((button) => button.addEventListener('click', onChangeScreen), ); @@ -38,6 +56,4 @@ const gameStart = () => { loadSectionButton(); loadSectionTable(); loadMapPrint(); -}; - -gameStart(); +})(); From 325d7660e3b5a30fb048fc91e0c774c4bfa18533 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 14:48:57 +0900 Subject: [PATCH 121/126] =?UTF-8?q?Refactor=20:=20=EB=B3=80=EC=88=98=20?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Controller/station-control.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Controller/station-control.js b/src/Controller/station-control.js index 2112c9d5d..da6054eff 100644 --- a/src/Controller/station-control.js +++ b/src/Controller/station-control.js @@ -24,7 +24,7 @@ export const loadStation = () => { stationInstance.loadStation(stations); stationInstance.stations.forEach((stationName) => { addStationScreen(stationName); - setButtonDeleteEvent(stationName); + setStationButtonDeleteEvent(stationName); }); }; @@ -36,7 +36,7 @@ export const onAddStation = () => { addSelectorOption($upStreamSelector, $stationNameInput.value); addSelectorOption($downStreamSelector, $stationNameInput.value); addSelectorOption($sectionSelector, $stationNameInput.value); - setButtonDeleteEvent($stationNameInput.value); + setStationButtonDeleteEvent($stationNameInput.value); } $stationNameInput.value = ''; }; @@ -56,7 +56,7 @@ export function onRemoveStation(e) { } } -const setButtonDeleteEvent = (stationName) => { +const setStationButtonDeleteEvent = (stationName) => { const $button = $stationTbody.querySelector( `[data-station-name=${stationName}]`, ); From 7740bd347086f8ef79540507c9ed258a6c0397b4 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 15:41:31 +0900 Subject: [PATCH 122/126] =?UTF-8?q?Refactor=20:=20View=EC=97=90=EC=84=9C?= =?UTF-8?q?=20button=20event=20=EB=B6=84=EB=A6=AC=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit View의 버튼을 분리하기 위해 controller에 set-button-event.js파일을 만들었다. --- src/Controller/line-control.js | 9 +++++++ src/Controller/section-control.js | 25 +++++++++++++------- src/Controller/set-button-event.js | 38 ++++++++++++++++++++++++++++++ src/Controller/station-control.js | 9 +------ src/index.js | 22 ++--------------- 5 files changed, 67 insertions(+), 36 deletions(-) create mode 100644 src/Controller/set-button-event.js diff --git a/src/Controller/line-control.js b/src/Controller/line-control.js index 0c29e7a51..e70b3e458 100644 --- a/src/Controller/line-control.js +++ b/src/Controller/line-control.js @@ -23,6 +23,11 @@ import { removeLocalStorage, } from './local-storage.js'; import {stationInstance, lineInstance} from '../index.js'; +import { + setLineButtonDeleteEvent, + setSectionButtonLoadEvent, + setSectionButtonDeleteEvent, +} from './set-button-event.js'; import {isLineInputValid} from './valid.js'; import {KEY, TEXT} from './constant.js'; @@ -35,6 +40,9 @@ export const onAddLine = () => { addSectionButton(lineValue.lineName); addSectionScreen(lineValue); addMapPrint([lineValue]); + setSectionButtonDeleteEvent(lineValue); + setLineButtonDeleteEvent(lineValue.lineName); + setSectionButtonLoadEvent(lineValue.lineName); } $lineNameInput.value = ''; }; @@ -61,6 +69,7 @@ export const loadLine = () => { }); lineInstance.lines.forEach((line) => { addLineScreen(line); + setLineButtonDeleteEvent(line.lineName); }); }; diff --git a/src/Controller/section-control.js b/src/Controller/section-control.js index c8edc617f..521681728 100644 --- a/src/Controller/section-control.js +++ b/src/Controller/section-control.js @@ -22,6 +22,11 @@ import { removeSectionOnLocalStorage, } from './local-storage.js'; import {stationInstance, lineInstance} from '../index.js'; +import { + setLineButtonDeleteEvent, + setSectionButtonDeleteEvent, + setSectionButtonLoadEvent, +} from './set-button-event.js'; import {KEY, TEXT} from './constant.js'; export function onLoadSection(e) { @@ -61,15 +66,17 @@ export const loadSectionTable = () => { stationInstance.stations.forEach((station) => addSelectorOption($sectionSelector, station), ); - lineInstance.lines.forEach((section) => { - addSectionScreen(section); + lineInstance.lines.forEach((line) => { + addSectionScreen(line); + setSectionButtonLoadEvent(line.lineName); + setSectionButtonDeleteEvent(line); }); }; export const loadSectionButton = () => { lineInstance.loadLine(); - lineInstance.lines.forEach((section) => { - addSectionButton(section.lineName); + lineInstance.lines.forEach((line) => { + addSectionButton(line.lineName); }); }; @@ -77,9 +84,11 @@ export const updateSectionTable = () => { removeTableScreen($sectionEditContainer); removeTableScreen($lineContainer); removeAllMapPrint(); - lineInstance.lines.forEach((section) => { - addLineScreen(section); - addSectionScreen(section); + lineInstance.lines.forEach((line) => { + addLineScreen(line); + addSectionScreen(line); + setLineButtonDeleteEvent(line.lineName); + setSectionButtonDeleteEvent(line); }); addMapPrint(lineInstance.lines); }; @@ -101,7 +110,7 @@ const getSectionValue = (lineName) => { const getSelectedSection = (lineName) => { const sectionIndex = lineInstance.lines.findIndex( - (section) => section.lineName === lineName, + (line) => line.lineName === lineName, ); return lineInstance.lines[sectionIndex]; diff --git a/src/Controller/set-button-event.js b/src/Controller/set-button-event.js new file mode 100644 index 000000000..f960ca7c5 --- /dev/null +++ b/src/Controller/set-button-event.js @@ -0,0 +1,38 @@ +import { + $stationTbody, + $lineTbody, + $sectionEditButtonContainer, + $sectionTbody, +} from '../View/element.js'; +import {onRemoveStation} from './station-control.js'; +import {onRemoveLine} from './line-control.js'; +import {onLoadSection, onRemoveSection} from './section-control.js'; + +export const setStationButtonDeleteEvent = (stationName) => { + const $button = $stationTbody.querySelector( + `[data-station-name='${stationName}']`, + ); + $button.addEventListener('click', onRemoveStation); +}; + +export const setLineButtonDeleteEvent = (lineName) => { + const $button = $lineTbody.querySelector(`[data-line-name='${lineName}']`); + $button.addEventListener('click', onRemoveLine); +}; + +export const setSectionButtonLoadEvent = (lineName) => { + const $button = $sectionEditButtonContainer.querySelector( + `[data-line-name='${lineName}']`, + ); + $button.addEventListener('click', onLoadSection); +}; + +export const setSectionButtonDeleteEvent = (line) => { + const $lineAllTr = $sectionTbody.querySelectorAll( + `[data-line-name='${line.lineName}']`, + ); + + return $lineAllTr.forEach(($tr) => { + $tr.querySelector('button').addEventListener('click', onRemoveSection); + }); +}; diff --git a/src/Controller/station-control.js b/src/Controller/station-control.js index da6054eff..753908693 100644 --- a/src/Controller/station-control.js +++ b/src/Controller/station-control.js @@ -1,5 +1,4 @@ import { - $stationTbody, $stationNameInput, $upStreamSelector, $downStreamSelector, @@ -17,6 +16,7 @@ import { } from './local-storage.js'; import {isNotLineHaved, isStationInputVaild} from './valid.js'; import {stationInstance, lineInstance} from '../index.js'; +import {setStationButtonDeleteEvent} from './set-button-event.js'; import {KEY, TEXT} from './constant.js'; export const loadStation = () => { @@ -55,10 +55,3 @@ export function onRemoveStation(e) { removeSelectorOption($sectionSelector, e.target.dataset.stationName); } } - -const setStationButtonDeleteEvent = (stationName) => { - const $button = $stationTbody.querySelector( - `[data-station-name=${stationName}]`, - ); - $button.addEventListener('click', onRemoveStation); -}; diff --git a/src/index.js b/src/index.js index 99173d9f9..033302c42 100644 --- a/src/index.js +++ b/src/index.js @@ -8,18 +8,12 @@ import { } from './View/element.js'; import {hideScreen} from './View/hide-screen.js'; import {showScreen} from './View/show-screen.js'; -import { - onAddStation, - loadStation, - onRemoveStation, -} from './Controller/station-control.js'; -import {onAddLine, loadLine, onRemoveLine} from './Controller/line-control.js'; +import {onAddStation, loadStation} from './Controller/station-control.js'; +import {onAddLine, loadLine} from './Controller/line-control.js'; import { onAddSection, loadSectionButton, loadSectionTable, - onLoadSection, - onRemoveSection, } from './Controller/section-control.js'; import {loadMapPrint} from './Controller/map-print-control.js'; @@ -31,18 +25,6 @@ const onChangeScreen = (e) => { showScreen(e); }; -export const setLineDeleteButton = ($button) => { - $button.addEventListener('click', onRemoveLine); -}; - -export const setSectionDeleteButton = ($button) => { - $button.addEventListener('click', onRemoveSection); -}; - -export const setSectionLoadButton = ($button) => { - $button.addEventListener('click', onLoadSection); -}; - (function gameStart() { $screenAllButton.forEach((button) => button.addEventListener('click', onChangeScreen), From a0349f0abeb9b9468e374a707d30e95766b55ad1 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 15:52:29 +0900 Subject: [PATCH 123/126] =?UTF-8?q?Refactor=20:=20constant=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 단순히 상수들의 모음이기 때문에 controller에 있을 필요가 없다고 생각했다. --- src/Controller/line-control.js | 2 +- src/Controller/local-storage.js | 2 +- src/Controller/section-control.js | 2 +- src/Controller/station-control.js | 2 +- src/Controller/valid.js | 2 +- src/View/add-screen.js | 2 +- src/View/show-screen.js | 2 +- src/{Controller => }/constant.js | 0 8 files changed, 7 insertions(+), 7 deletions(-) rename src/{Controller => }/constant.js (100%) diff --git a/src/Controller/line-control.js b/src/Controller/line-control.js index e70b3e458..bb01de451 100644 --- a/src/Controller/line-control.js +++ b/src/Controller/line-control.js @@ -29,7 +29,7 @@ import { setSectionButtonDeleteEvent, } from './set-button-event.js'; import {isLineInputValid} from './valid.js'; -import {KEY, TEXT} from './constant.js'; +import {KEY, TEXT} from '../constant.js'; export const onAddLine = () => { const lineValue = getLineValue(); diff --git a/src/Controller/local-storage.js b/src/Controller/local-storage.js index 2d3d3cc0d..3b0f52136 100644 --- a/src/Controller/local-storage.js +++ b/src/Controller/local-storage.js @@ -1,4 +1,4 @@ -import {KEY} from './constant.js'; +import {KEY} from '../constant.js'; export const addSectionOnLocalStorage = (key, value) => { const localStorageValue = getLocalStorage(key); diff --git a/src/Controller/section-control.js b/src/Controller/section-control.js index 521681728..75ed3bac2 100644 --- a/src/Controller/section-control.js +++ b/src/Controller/section-control.js @@ -27,7 +27,7 @@ import { setSectionButtonDeleteEvent, setSectionButtonLoadEvent, } from './set-button-event.js'; -import {KEY, TEXT} from './constant.js'; +import {KEY, TEXT} from '../constant.js'; export function onLoadSection(e) { hideSectionLine(); diff --git a/src/Controller/station-control.js b/src/Controller/station-control.js index 753908693..e4433351e 100644 --- a/src/Controller/station-control.js +++ b/src/Controller/station-control.js @@ -17,7 +17,7 @@ import { import {isNotLineHaved, isStationInputVaild} from './valid.js'; import {stationInstance, lineInstance} from '../index.js'; import {setStationButtonDeleteEvent} from './set-button-event.js'; -import {KEY, TEXT} from './constant.js'; +import {KEY, TEXT} from '../constant.js'; export const loadStation = () => { const stations = getLocalStorage(KEY.STATION); diff --git a/src/Controller/valid.js b/src/Controller/valid.js index d00337ad8..e6cfee277 100644 --- a/src/Controller/valid.js +++ b/src/Controller/valid.js @@ -1,4 +1,4 @@ -import {ERROR_MESSAGE, MIN_LETTER, MIN_LINE_LENGTH} from './constant.js'; +import {ERROR_MESSAGE, MIN_LETTER, MIN_LINE_LENGTH} from '../constant.js'; export const isStationInputVaild = (station, exStation) => { if (!isMatched(station)) { diff --git a/src/View/add-screen.js b/src/View/add-screen.js index fd18695d9..9af1ad441 100644 --- a/src/View/add-screen.js +++ b/src/View/add-screen.js @@ -6,7 +6,7 @@ import { $sectionEditContainer, $mapContainer, } from './element.js'; -import {TEXT, ADD_BUTTON_CLASS} from '../Controller/constant.js'; +import {TEXT, ADD_BUTTON_CLASS} from '../constant.js'; const { STATION_DELETE, diff --git a/src/View/show-screen.js b/src/View/show-screen.js index da197c7bb..ee07d152d 100644 --- a/src/View/show-screen.js +++ b/src/View/show-screen.js @@ -5,7 +5,7 @@ import { $mapContainer, $sectionEditContainer, } from './element.js'; -import {BUTTON_MANAGEMENT_ID} from '../Controller/constant.js'; +import {BUTTON_MANAGEMENT_ID} from '../constant.js'; export const showScreen = (e) => { const {STATION, LINE, SECTION, MAP} = BUTTON_MANAGEMENT_ID; diff --git a/src/Controller/constant.js b/src/constant.js similarity index 100% rename from src/Controller/constant.js rename to src/constant.js From 34682197c96fbaf30e699604982c8c589e076eef Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 17:31:10 +0900 Subject: [PATCH 124/126] =?UTF-8?q?Refactor=20:=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=84=A0=EC=96=B8=EC=8B=9D=20->=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=ED=91=9C=ED=98=84=EC=8B=9D(arrow)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 이전에는 event 처리를 View에서 했고, index는 가장 늦게 실행되기 때문에 함수선언식으로 사용하지 않으면 Lexical Enviornment에 들어가지 않아 사용이 불가능했다. 하지만 이제는 모든 import를 index에서 받아온 후에 실행을 하기 때문에 더이상 위와 같은 문제가 발생하지 않기 때문에 안정적인 함수 표현식으로 에로우 함수를 사용했다. --- src/Controller/section-control.js | 8 ++++---- src/Controller/station-control.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Controller/section-control.js b/src/Controller/section-control.js index 75ed3bac2..034e01118 100644 --- a/src/Controller/section-control.js +++ b/src/Controller/section-control.js @@ -29,12 +29,12 @@ import { } from './set-button-event.js'; import {KEY, TEXT} from '../constant.js'; -export function onLoadSection(e) { +export const onLoadSection = (e) => { hideSectionLine(); addLineTitle(e.target.dataset.lineName); showSectionScreen(e.target.dataset.lineName); $sectionAddButton.dataset.lineName = e.target.dataset.lineName; -} +}; export const onAddSection = (e) => { const sectionValue = getSectionValue(e.target.dataset.lineName); @@ -48,7 +48,7 @@ export const onAddSection = (e) => { $sectionOrderInput.value = ''; }; -export function onRemoveSection(e) { +export const onRemoveSection = (e) => { const removeConfirm = confirm(TEXT.CONFIRM_DELETE); const parsedData = JSON.parse(e.target.dataset.sectionLine); const removedData = getRemovedData(parsedData); @@ -59,7 +59,7 @@ export function onRemoveSection(e) { updateSectionTable(); showSectionScreen(parsedData.lineName); } -} +}; export const loadSectionTable = () => { lineInstance.loadLine(); diff --git a/src/Controller/station-control.js b/src/Controller/station-control.js index e4433351e..4b1f700bf 100644 --- a/src/Controller/station-control.js +++ b/src/Controller/station-control.js @@ -41,7 +41,7 @@ export const onAddStation = () => { $stationNameInput.value = ''; }; -export function onRemoveStation(e) { +export const onRemoveStation = (e) => { const removeConfirm = confirm(TEXT.CONFIRM_DELETE); if ( removeConfirm && @@ -54,4 +54,4 @@ export function onRemoveStation(e) { removeSelectorOption($downStreamSelector, e.target.dataset.stationName); removeSelectorOption($sectionSelector, e.target.dataset.stationName); } -} +}; From f0305bd5ff78ebe55b05bc74292667ee0fb50f73 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 17:35:46 +0900 Subject: [PATCH 125/126] =?UTF-8?q?Refactor=20:=20arrow=ED=95=A8=EC=88=98?= =?UTF-8?q?=EB=A1=9C=20=EC=A0=84=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 실수로 하나를 빼먹었다. --- src/Controller/line-control.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Controller/line-control.js b/src/Controller/line-control.js index bb01de451..e7685d7d3 100644 --- a/src/Controller/line-control.js +++ b/src/Controller/line-control.js @@ -47,7 +47,7 @@ export const onAddLine = () => { $lineNameInput.value = ''; }; -export function onRemoveLine(e) { +export const onRemoveLine = (e) => { const removeConfirm = confirm(TEXT.CONFIRM_DELETE); if (removeConfirm) { removeLocalStorage(KEY.LINE, e.target.dataset.lineName); @@ -58,7 +58,7 @@ export function onRemoveLine(e) { removeMapPrint(e.target.dataset.lineName); hideSectionEditContainer(); } -} +}; export const loadLine = () => { const lines = getLocalStorage(KEY.LINE); From a0cd5282f69fbfe11fdb541b803c2e9f5bf2d1db Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Dec 2020 21:00:15 +0900 Subject: [PATCH 126/126] =?UTF-8?q?Style=20:=20=EC=9D=B4=EB=AA=A8=ED=8B=B0?= =?UTF-8?q?=EC=BD=98=20=EC=98=A4=EB=A5=98=20=ED=99=95=EC=9D=B8=20=ED=9B=84?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 숫자 ❌ 이하의 수를 입력해주세요. 라고 출력되는 버그 수정 --- src/Controller/valid.js | 2 +- src/constant.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Controller/valid.js b/src/Controller/valid.js index e6cfee277..ba5e85660 100644 --- a/src/Controller/valid.js +++ b/src/Controller/valid.js @@ -108,7 +108,7 @@ const isNumber = (number) => { const isMoreThanMaxNumber = (userSection, section) => { if (section.length < userSection.number) { - return alert(`${section.length}${ERROR_MESSAGE.LENGTH_LIMIT}`); + return alert(`❌ ${section.length}${ERROR_MESSAGE.LENGTH_LIMIT}`); } return true; diff --git a/src/constant.js b/src/constant.js index 2096bde8c..d43f31b80 100644 --- a/src/constant.js +++ b/src/constant.js @@ -34,7 +34,7 @@ export const ERROR_MESSAGE = { ALREADY_INCLUDE_STATION: '❌ 이미 역이 추가되어 있습니다.', SAME_LAST_STOP: '❌ 상행과 하행이 같은 역이 될 수 없습니다.', NOT_NUMBER: '❌ 0이상의 숫자를 입력해주세요.', - LENGTH_LIMIT: '❌ 이하의 수를 입력해주세요.', + LENGTH_LIMIT: '이하의 수를 입력해주세요.', }; export const MIN_LETTER = 2;
${stationName} ${line.station[line.station.length - 1]} ${line.station[i]}