From b2469bc3f8b78c72aea4b0cdb470d6d084a4f97f Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Wed, 9 Dec 2020 20:13:48 +0900
Subject: [PATCH 01/32] =?UTF-8?q?readmd=20=EA=B5=AC=ED=98=84=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EB=AA=A9=EB=A1=9D=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 49 ++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e97a1d649..351ce0de0 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,54 @@
 # 🚇 지하철 노선도 미션
 
+## 👩🏻‍💻 기능 목록
+
+- 4개 관리 페이지 연결을 위한 버튼 생성
+  - 역 관리 : #station-manager-button
+  - 노선 관리 : #line-manager-button
+  - 구간 관리 : #section-manager-button
+  - 노선도 출력 : #map-print-manager-button
+- 4개 관리페이지 컴포넌트 생성
+- 각 버튼에 이벤트 리스너 등록하여 컴포넌트 연결
+
+- 역 관리 페이지 UI 구현
+  - 역 이름 입력 input
+  - 역 이름 입력 button
+  - 역 목록 table
+- 노선 관리 페이지 UI 구현
+  - 노선 이름 입력 input
+  - 종점 select option
+  - 노선 추가 button
+  - 노선 목록 table
+- 구간 관리 페이지 UI 구현
+  - 노선 선택 button
+  - 호선별 컴포넌트 생성
+    - 구간 등록 select option
+    - 순서 입력 input
+    - 순서 입력 button
+    - 순서 table
+- 노선도 출력 페이지 UI 구현
+  - 호선별 역 리스트 ul
+
 ## 🚀 기능 요구사항
 
 ### 지하철 역 관련 기능
+
 - 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
 - 중복된 지하철 역 이름이 등록될 수 없다.
 - 지하철 역은 2글자 이상이어야 한다.
 - 지하철 역의 목록을 조회할 수 있다.
 
 ### 지하철 노선 관련 기능
+
 - 지하철 노선을 등록하고 삭제할 수 있다.
 - 중복된 지하철 노선 이름이 등록될 수 없다.
 - 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
 - 지하철 노선의 목록을 조회할 수 있다.
 
 ### 지하철 구간 추가 기능
+
 - 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.
 - 하나의 역은 여러개의 노선에 추가될 수 있다.
 - 역과 역 사이에 새로운 역이 추가 될 수 있다.
 - 노선에서 갈래길은 생길 수 없다.
@@ -24,6 +56,7 @@
 <img width="500" src="/images/section1.png">
 
 ### 지하철 구간 삭제 기능
+
 - 노선에 등록된 역을 제거할 수 있다.
 - 종점을 제거할 경우 다음 역이 종점이 된다.
 - 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
@@ -31,6 +64,7 @@
 <img width="500" src="/images/section2.png">
 
 ### 지하철 노선에 등록된 역 조회 기능
+
 - 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
 
 <br/>
@@ -38,32 +72,38 @@
 ## 💻 프로그램 실행 결과
 
 ### 역관리
+
 <img width="100%" src="/images/station_manager.gif">
 
 ### 노선관리
+
 <img width="100%" src="/images/line_manager.gif">
 
 ### 구간관리
+
 <img width="100%" src="/images/section_manager.gif">
 
 ### 노선도 출력
-<img width="100%" src="/images/map_print_manager.gif">
 
+<img width="100%" src="/images/map_print_manager.gif">
 
 ## ✅ 프로그래밍 요구사항
 
 ### 메뉴 버튼
+
 - 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
 - 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
 - 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
 - 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
 
 ### 지하철 역 관련 기능
+
 - 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
 - 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
 - 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
 
 ### 지하철 노선 관련 기능
+
 - 지하철 노선의 이름을 입력하는 input 태그는 `#line-name-input` id값을 가진다.
 - 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
 - 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
@@ -71,6 +111,7 @@
 - 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
 
 ### 지하철 구간 추가 기능
+
 - 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
 - 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
 - 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
@@ -78,6 +119,7 @@
 - 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
 
 ### 지하철 노선도 출력 기능
+
 - 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
 
 ### 기존 요구사항
@@ -101,7 +143,8 @@
   - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)
 
 ### 추가된 요구사항
-- [data](https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)속성을 활용하여 html 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다. 
+
+- [data](https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)속성을 활용하여 html 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다.
 - [localStorage](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.
 
 <br/>

From c2faa83d2491ad246c00605d8af62925f569de75 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Wed, 9 Dec 2020 20:47:00 +0900
Subject: [PATCH 02/32] =?UTF-8?q?=EA=B0=81=20=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=97=B0=EA=B2=B0=EC=9A=A9=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=204=EA=B0=9C=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app.js                       |  0
 src/components/views/lineManagerPage.js     |  0
 src/components/views/mapPrintManagerPage.js |  0
 src/components/views/sectionManagerPage.js  |  0
 src/components/views/stationManagerPage.js  |  0
 src/index.js                                |  7 +++++++
 src/uiManager.js                            | 10 ++++++++++
 7 files changed, 17 insertions(+)
 create mode 100644 src/components/app.js
 create mode 100644 src/components/views/lineManagerPage.js
 create mode 100644 src/components/views/mapPrintManagerPage.js
 create mode 100644 src/components/views/sectionManagerPage.js
 create mode 100644 src/components/views/stationManagerPage.js
 create mode 100644 src/uiManager.js

diff --git a/src/components/app.js b/src/components/app.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/views/lineManagerPage.js b/src/components/views/lineManagerPage.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/views/mapPrintManagerPage.js b/src/components/views/mapPrintManagerPage.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/views/sectionManagerPage.js b/src/components/views/sectionManagerPage.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/views/stationManagerPage.js b/src/components/views/stationManagerPage.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/index.js b/src/index.js
index e69de29bb..b568b2b6b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,7 @@
+import { initHTML } from "./uiManager.js";
+
+export default function init() {
+  initHTML();
+}
+
+init();
diff --git a/src/uiManager.js b/src/uiManager.js
new file mode 100644
index 000000000..3702881f0
--- /dev/null
+++ b/src/uiManager.js
@@ -0,0 +1,10 @@
+function initHTML() {
+  const buttonBox = document.createElement("div");
+  buttonBox.innerHTML = `<button id="station-manager-button">1. 역 관리</button>
+    <button id="line-manager-button">2. 노선 관리</button>
+    <button id="section-manager-button">3. 구간 관리</button>
+    <button id="map-print-manager-button">4. 지하철 노선도 출력</button>`;
+  document.body.append(buttonBox);
+}
+
+export { initHTML };

From e7de43e68dd125140623ac0fe501a7593acec6f9 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Wed, 9 Dec 2020 22:32:33 +0900
Subject: [PATCH 03/32] =?UTF-8?q?4=EA=B0=9C=20=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1,=20=EA=B0=81?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=EC=97=90=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=EB=84=88=20=EB=93=B1=EB=A1=9D=ED=95=98?=
 =?UTF-8?q?=EC=97=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app.js                       | 20 +++++++++++++++++
 src/components/render.js                    |  3 +++
 src/components/views/lineManagerPage.js     |  5 +++++
 src/components/views/mapPrintManagerPage.js |  5 +++++
 src/components/views/sectionManagerPage.js  |  5 +++++
 src/components/views/stationManagerPage.js  |  5 +++++
 src/index.js                                | 24 +++++++++++++++++++++
 src/uiManager.js                            | 10 ++++++---
 8 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 src/components/render.js

diff --git a/src/components/app.js b/src/components/app.js
index e69de29bb..7b833e39d 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -0,0 +1,20 @@
+import stationManagerPage from "./views/stationManagerPage.js";
+import lineManagerPage from "./views/lineManagerPage.js";
+import sectionManagerPage from "./views/sectionManagerPage.js";
+import mapPrintManagerPage from "./views/mapPrintManagerPage.js";
+
+export default function app(pageName) {
+  let app = ``;
+
+  if (pageName === "station") {
+    app = stationManagerPage();
+  } else if (pageName === "line") {
+    app = lineManagerPage();
+  } else if (pageName === "section") {
+    app = sectionManagerPage();
+  } else if (pageName === "map") {
+    app = mapPrintManagerPage();
+  }
+
+  return app;
+}
diff --git a/src/components/render.js b/src/components/render.js
new file mode 100644
index 000000000..58136fdc4
--- /dev/null
+++ b/src/components/render.js
@@ -0,0 +1,3 @@
+export default function render(app) {
+  document.getElementById("main-box").innerHTML = app;
+}
diff --git a/src/components/views/lineManagerPage.js b/src/components/views/lineManagerPage.js
index e69de29bb..e70d4cf57 100644
--- a/src/components/views/lineManagerPage.js
+++ b/src/components/views/lineManagerPage.js
@@ -0,0 +1,5 @@
+function lineManagerPage() {
+  return `lineManagerPage`;
+}
+
+export default lineManagerPage;
diff --git a/src/components/views/mapPrintManagerPage.js b/src/components/views/mapPrintManagerPage.js
index e69de29bb..adeaaca05 100644
--- a/src/components/views/mapPrintManagerPage.js
+++ b/src/components/views/mapPrintManagerPage.js
@@ -0,0 +1,5 @@
+function mapPrintManagerPage() {
+  return `mapPrintManagerPage`;
+}
+
+export default mapPrintManagerPage;
diff --git a/src/components/views/sectionManagerPage.js b/src/components/views/sectionManagerPage.js
index e69de29bb..2e0269a44 100644
--- a/src/components/views/sectionManagerPage.js
+++ b/src/components/views/sectionManagerPage.js
@@ -0,0 +1,5 @@
+function sectionManagerPage() {
+  return `sectionManagerPage`;
+}
+
+export default sectionManagerPage;
diff --git a/src/components/views/stationManagerPage.js b/src/components/views/stationManagerPage.js
index e69de29bb..5ecb64a97 100644
--- a/src/components/views/stationManagerPage.js
+++ b/src/components/views/stationManagerPage.js
@@ -0,0 +1,5 @@
+function stationManagerPage() {
+  return `stationManagerPage`;
+}
+
+export default stationManagerPage;
diff --git a/src/index.js b/src/index.js
index b568b2b6b..ae1c31319 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,31 @@
 import { initHTML } from "./uiManager.js";
+import render from "./components/render.js";
+import app from "./components/app.js";
 
 export default function init() {
   initHTML();
+  render(app());
+
+  document.getElementById("station-manager-button").addEventListener("click", onStationHandler);
+  document.getElementById("line-manager-button").addEventListener("click", onLineHandler);
+  document.getElementById("section-manager-button").addEventListener("click", onSectionHandler);
+  document.getElementById("map-print-manager-button").addEventListener("click", onMapPrintHandler);
 }
 
 init();
+
+function onStationHandler() {
+  render(app(`station`));
+}
+
+function onLineHandler() {
+  render(app(`line`));
+}
+
+function onSectionHandler() {
+  render(app(`section`));
+}
+
+function onMapPrintHandler() {
+  render(app(`map`));
+}
diff --git a/src/uiManager.js b/src/uiManager.js
index 3702881f0..3486b3700 100644
--- a/src/uiManager.js
+++ b/src/uiManager.js
@@ -1,10 +1,14 @@
 function initHTML() {
   const buttonBox = document.createElement("div");
   buttonBox.innerHTML = `<button id="station-manager-button">1. 역 관리</button>
-    <button id="line-manager-button">2. 노선 관리</button>
-    <button id="section-manager-button">3. 구간 관리</button>
-    <button id="map-print-manager-button">4. 지하철 노선도 출력</button>`;
+      <button id="line-manager-button">2. 노선 관리</button>
+      <button id="section-manager-button">3. 구간 관리</button>
+      <button id="map-print-manager-button">4. 지하철 노선도 출력</button>`;
   document.body.append(buttonBox);
+
+  const mainBox = document.createElement("div");
+  mainBox.id = "main-box";
+  document.body.append(mainBox);
 }
 
 export { initHTML };

From 41c666d110a206d61fde4f38f9337679ac042c85 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Thu, 10 Dec 2020 02:03:21 +0900
Subject: [PATCH 04/32] =?UTF-8?q?=EC=97=AD=20=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EA=B5=AC=ED=98=84,=20?=
 =?UTF-8?q?=EA=B0=81=20=EB=B2=84=ED=8A=BC=EC=97=90=20=EC=9D=B4=EB=B2=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A6=AC=EC=8A=A4=EB=84=88=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                  | 15 ++++++---
 src/components/app.js                      |  6 ++--
 src/components/views/stationManagerPage.js | 37 +++++++++++++++++++--
 src/index.js                               | 38 +++++++++++++++++++---
 4 files changed, 83 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 351ce0de0..24d38dc8e 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # 🚇 지하철 노선도 미션
 
-## 👩🏻‍💻 기능 목록
+## 👩🏻‍💻 기능 목록
 
 - 4개 관리 페이지 연결을 위한 버튼 생성
   - 역 관리 : #station-manager-button
@@ -9,11 +9,11 @@
   - 노선도 출력 : #map-print-manager-button
 - 4개 관리페이지 컴포넌트 생성
 - 각 버튼에 이벤트 리스너 등록하여 컴포넌트 연결
-
-- 역 관리 페이지 UI 구현
-  - 역 이름 입력 input
-  - 역 이름 입력 button
+- 역 관리 페이지 UI 구현, 각 버튼에 이벤트 리스너 연결
+  - 역 이름 추가 input : #station-name-input
+  - 역 이름 추가 button : #station-add-button
   - 역 목록 table
+  - 역 삭제 button : .station-delete-button
 - 노선 관리 페이지 UI 구현
   - 노선 이름 입력 input
   - 종점 select option
@@ -29,6 +29,11 @@
 - 노선도 출력 페이지 UI 구현
   - 호선별 역 리스트 ul
 
+## 👩🏻‍🤦🏻‍♀️ 고민한 지점
+
+- 버튼에 각 관리페이지를 연결할 때, 리액트에서는 컴포넌트를 쉽게 렌더링할 수 있었는데 vanilla javascript로 연결하려고하니 어려웠다.
+- 사용자 동작에 따라 새로운 엘리먼트를 추가하거나 삭제할 때, 남은 엘리먼트를 다시 render하고, 이벤트 리스너를 다시 추가하는 등 업데이트된 상태를 구현하는 부분이 까다로웠고, 이 방법이 과연 효율적인 방법이 맞는지 의구심이 들었다.
+
 ## 🚀 기능 요구사항
 
 ### 지하철 역 관련 기능
diff --git a/src/components/app.js b/src/components/app.js
index 7b833e39d..4c352975e 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -3,11 +3,13 @@ import lineManagerPage from "./views/lineManagerPage.js";
 import sectionManagerPage from "./views/sectionManagerPage.js";
 import mapPrintManagerPage from "./views/mapPrintManagerPage.js";
 
-export default function app(pageName) {
+export default function app(pageName, stationNames) {
   let app = ``;
 
+  // console.log("app", stationNames);
+
   if (pageName === "station") {
-    app = stationManagerPage();
+    app = stationManagerPage(stationNames);
   } else if (pageName === "line") {
     app = lineManagerPage();
   } else if (pageName === "section") {
diff --git a/src/components/views/stationManagerPage.js b/src/components/views/stationManagerPage.js
index 5ecb64a97..2dc5dbbab 100644
--- a/src/components/views/stationManagerPage.js
+++ b/src/components/views/stationManagerPage.js
@@ -1,5 +1,38 @@
-function stationManagerPage() {
-  return `stationManagerPage`;
+function stationManagerPage(stationNames) {
+  let table = ``;
+
+  // console.log(stationNames);
+  stationNames &&
+    stationNames.map((name) => {
+      table += `<tr>
+      <td>${name}</td>
+      <td>
+        <button class="station-delete-button">삭제</button>
+      </td>
+    </tr>`;
+    });
+
+  let stationManager = `<br />
+  <p>역 이름<p>
+  <input id = "station-add-input" value="역 이름을 입력해주세요."></input>
+  <button id = "station-add-button">역 추가</button>
+  <h3>🚉지하철 역 목록</h3>
+  
+  <table
+border = 1px solid black>
+    <thead>
+      <tr>
+        <th>역 이름</th>
+        <th>설정</th>
+      </tr>
+    </thead>
+    <tbody>
+    ${table}
+    </tbody>
+  </table>
+ 
+  `;
+  return stationManager;
 }
 
 export default stationManagerPage;
diff --git a/src/index.js b/src/index.js
index ae1c31319..bbc4ad066 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,17 +15,47 @@ export default function init() {
 init();
 
 function onStationHandler() {
-  render(app(`station`));
+  render(app("station"));
+  document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+
+  let stations = [];
+
+  function onAddStationHandler() {
+    let stationName = document.getElementById("station-add-input").value;
+    stations.push(stationName);
+    render(app("station", stations));
+    document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+
+    let deleteBtns = document.getElementsByClassName("station-delete-button");
+    for (let i = 0; i < deleteBtns.length; i++) {
+      deleteBtns[i].addEventListener("click", onDeleteStationHandler);
+    }
+  }
+
+  function onDeleteStationHandler() {
+    let tr = event.target.parentNode.parentNode;
+    let deleteIdx = stations.indexOf(tr.childNodes[1].outerText);
+    if (deleteIdx > -1) stations.splice(deleteIdx, 1);
+    tr.parentNode.removeChild(tr);
+
+    render(app("station", stations));
+    document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+
+    let deleteBtns = document.getElementsByClassName("station-delete-button");
+    for (let i = 0; i < deleteBtns.length; i++) {
+      deleteBtns[i].addEventListener("click", onDeleteStationHandler);
+    }
+  }
 }
 
 function onLineHandler() {
-  render(app(`line`));
+  render(app("line"));
 }
 
 function onSectionHandler() {
-  render(app(`section`));
+  render(app("section"));
 }
 
 function onMapPrintHandler() {
-  render(app(`map`));
+  render(app("map"));
 }

From 3ffe7f32779e005f68777e6d2de66d95a0be54b2 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Thu, 10 Dec 2020 17:44:37 +0900
Subject: [PATCH 05/32] =?UTF-8?q?local=20storage=EB=A5=BC=20=EC=9D=B4?=
 =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=97=AC=20=EC=97=AD=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EC=A0=80=EC=9E=A5=ED=95=98=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                  |  3 +-
 src/components/views/stationManagerPage.js |  1 -
 src/index.js                               | 64 ++++++++++++++--------
 3 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 24d38dc8e..e82d625fe 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,7 @@
   - 역 이름 추가 button : #station-add-button
   - 역 목록 table
   - 역 삭제 button : .station-delete-button
+- local storage를 이용하여 역 데이터 저장하기
 - 노선 관리 페이지 UI 구현
   - 노선 이름 입력 input
   - 종점 select option
@@ -29,7 +30,7 @@
 - 노선도 출력 페이지 UI 구현
   - 호선별 역 리스트 ul
 
-## 👩🏻‍🤦🏻‍♀️ 고민한 지점
+## 🤦🏻‍♀️ 고민한 지점
 
 - 버튼에 각 관리페이지를 연결할 때, 리액트에서는 컴포넌트를 쉽게 렌더링할 수 있었는데 vanilla javascript로 연결하려고하니 어려웠다.
 - 사용자 동작에 따라 새로운 엘리먼트를 추가하거나 삭제할 때, 남은 엘리먼트를 다시 render하고, 이벤트 리스너를 다시 추가하는 등 업데이트된 상태를 구현하는 부분이 까다로웠고, 이 방법이 과연 효율적인 방법이 맞는지 의구심이 들었다.
diff --git a/src/components/views/stationManagerPage.js b/src/components/views/stationManagerPage.js
index 2dc5dbbab..c2714c87b 100644
--- a/src/components/views/stationManagerPage.js
+++ b/src/components/views/stationManagerPage.js
@@ -1,7 +1,6 @@
 function stationManagerPage(stationNames) {
   let table = ``;
 
-  // console.log(stationNames);
   stationNames &&
     stationNames.map((name) => {
       table += `<tr>
diff --git a/src/index.js b/src/index.js
index bbc4ad066..5c841f2dc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,10 +2,18 @@ import { initHTML } from "./uiManager.js";
 import render from "./components/render.js";
 import app from "./components/app.js";
 
+let output = "";
+let stations = [];
+let savedStations = localStorage.getItem("stations");
+let arr = JSON.parse(savedStations);
+
 export default function init() {
   initHTML();
   render(app());
 
+  arr & mount();
+  stations = arr;
+
   document.getElementById("station-manager-button").addEventListener("click", onStationHandler);
   document.getElementById("line-manager-button").addEventListener("click", onLineHandler);
   document.getElementById("section-manager-button").addEventListener("click", onSectionHandler);
@@ -16,36 +24,48 @@ init();
 
 function onStationHandler() {
   render(app("station"));
+  arr & mount();
   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+}
+
+// let stations = [];
+function onAddStationHandler() {
+  let stationName = document.getElementById("station-add-input").value;
+  stations.push(stationName);
+
+  localStorage.setItem("stations", JSON.stringify(stations));
+  output = localStorage.getItem("stations");
+  // let arr = JSON.parse(output);
+  arr = JSON.parse(output);
 
-  let stations = [];
+  console.log("arr", localStorage);
+  mount();
+}
 
-  function onAddStationHandler() {
-    let stationName = document.getElementById("station-add-input").value;
-    stations.push(stationName);
-    render(app("station", stations));
-    document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+function mount() {
+  render(app("station", arr));
+  document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
 
-    let deleteBtns = document.getElementsByClassName("station-delete-button");
-    for (let i = 0; i < deleteBtns.length; i++) {
-      deleteBtns[i].addEventListener("click", onDeleteStationHandler);
-    }
+  let deleteBtns = document.getElementsByClassName("station-delete-button");
+  for (let i = 0; i < deleteBtns.length; i++) {
+    deleteBtns[i].addEventListener("click", onDeleteStationHandler);
   }
+}
 
-  function onDeleteStationHandler() {
-    let tr = event.target.parentNode.parentNode;
-    let deleteIdx = stations.indexOf(tr.childNodes[1].outerText);
-    if (deleteIdx > -1) stations.splice(deleteIdx, 1);
-    tr.parentNode.removeChild(tr);
+function onDeleteStationHandler() {
+  let tr = event.target.parentNode.parentNode;
 
-    render(app("station", stations));
-    document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+  output = localStorage.getItem("stations");
+  arr = JSON.parse(output);
 
-    let deleteBtns = document.getElementsByClassName("station-delete-button");
-    for (let i = 0; i < deleteBtns.length; i++) {
-      deleteBtns[i].addEventListener("click", onDeleteStationHandler);
-    }
-  }
+  let deleteIdx = arr.indexOf(tr.childNodes[1].outerText);
+  if (deleteIdx > -1) arr.splice(deleteIdx, 1);
+  stations = arr;
+  localStorage.clear();
+  localStorage.setItem("stations", JSON.stringify(arr));
+  tr.parentNode.removeChild(tr);
+
+  mount();
 }
 
 function onLineHandler() {

From fe5eab21c9b6f3f502d655a337a5ca973a24d72a Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Thu, 10 Dec 2020 21:53:43 +0900
Subject: [PATCH 06/32] =?UTF-8?q?=EB=85=B8=EC=84=A0=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/views/lineManagerPage.js    | 43 +++++++++++++++++++++-
 src/components/views/stationManagerPage.js |  9 ++---
 src/index.js                               | 28 ++++----------
 3 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/src/components/views/lineManagerPage.js b/src/components/views/lineManagerPage.js
index e70d4cf57..eb1b32f99 100644
--- a/src/components/views/lineManagerPage.js
+++ b/src/components/views/lineManagerPage.js
@@ -1,5 +1,46 @@
 function lineManagerPage() {
-  return `lineManagerPage`;
+  let stations = JSON.parse(localStorage.getItem("stations"));
+  let options = stations.map((station) => `<option value = "${station}">${station}</option>`);
+
+  let lineManager = `
+  <h4>노선 이름<h4>
+  <input id = "line-name-input"></input>
+  <br />
+  <br />
+  <label>상행 종점</label>
+    <select id="line-start-station-selector">
+    ${options}
+    </select>
+  <br />
+  <label>하행 종점</label>
+    <select id="line-end-station-selector">
+    ${options}
+    </select>
+  <br />
+  <br />
+  <button id = "line-add-button">노선 추가</button>
+  <h3>🚉지하철 노선 목록</h3>
+  <table border = 1px solid black>
+    <thead>
+      <tr>
+        <th>노선 이름</th>
+        <th>상행 종점역</th>
+        <th>하행 종점역</th>
+        <th>설정</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1호선</td>
+        <td>인천</td>
+        <td>소요산</td>
+        <td><button class="line-delete-button">삭제</button></td>
+      </tr>
+    </tbody>
+  </table>
+  `;
+
+  return lineManager;
 }
 
 export default lineManagerPage;
diff --git a/src/components/views/stationManagerPage.js b/src/components/views/stationManagerPage.js
index c2714c87b..6ecddf1a9 100644
--- a/src/components/views/stationManagerPage.js
+++ b/src/components/views/stationManagerPage.js
@@ -11,14 +11,13 @@ function stationManagerPage(stationNames) {
     </tr>`;
     });
 
-  let stationManager = `<br />
-  <p>역 이름<p>
-  <input id = "station-add-input" value="역 이름을 입력해주세요."></input>
+  let stationManager = `
+  <h4>역 이름<h4>
+  <input id = "station-add-input"></input>
   <button id = "station-add-button">역 추가</button>
   <h3>🚉지하철 역 목록</h3>
   
-  <table
-border = 1px solid black>
+  <table border = 1px solid black>
     <thead>
       <tr>
         <th>역 이름</th>
diff --git a/src/index.js b/src/index.js
index 5c841f2dc..0b8822e89 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,17 +2,13 @@ import { initHTML } from "./uiManager.js";
 import render from "./components/render.js";
 import app from "./components/app.js";
 
-let output = "";
-let stations = [];
-let savedStations = localStorage.getItem("stations");
-let arr = JSON.parse(savedStations);
+let stations = JSON.parse(localStorage.getItem("stations"));
 
 export default function init() {
   initHTML();
   render(app());
 
-  arr & mount();
-  stations = arr;
+  stations && mount();
 
   document.getElementById("station-manager-button").addEventListener("click", onStationHandler);
   document.getElementById("line-manager-button").addEventListener("click", onLineHandler);
@@ -24,26 +20,22 @@ init();
 
 function onStationHandler() {
   render(app("station"));
-  arr & mount();
+  stations && mount();
   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
 }
 
-// let stations = [];
 function onAddStationHandler() {
   let stationName = document.getElementById("station-add-input").value;
   stations.push(stationName);
 
   localStorage.setItem("stations", JSON.stringify(stations));
-  output = localStorage.getItem("stations");
-  // let arr = JSON.parse(output);
-  arr = JSON.parse(output);
 
   console.log("arr", localStorage);
-  mount();
+  stations && mount();
 }
 
 function mount() {
-  render(app("station", arr));
+  render(app("station", stations));
   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
 
   let deleteBtns = document.getElementsByClassName("station-delete-button");
@@ -55,14 +47,10 @@ function mount() {
 function onDeleteStationHandler() {
   let tr = event.target.parentNode.parentNode;
 
-  output = localStorage.getItem("stations");
-  arr = JSON.parse(output);
-
-  let deleteIdx = arr.indexOf(tr.childNodes[1].outerText);
-  if (deleteIdx > -1) arr.splice(deleteIdx, 1);
-  stations = arr;
+  let deleteIdx = stations.indexOf(tr.childNodes[1].outerText);
+  if (deleteIdx > -1) stations.splice(deleteIdx, 1);
   localStorage.clear();
-  localStorage.setItem("stations", JSON.stringify(arr));
+  localStorage.setItem("stations", JSON.stringify(stations));
   tr.parentNode.removeChild(tr);
 
   mount();

From c65b9b3482679d7a8284d88a3a71a504b5e49ab1 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Fri, 11 Dec 2020 03:39:52 +0900
Subject: [PATCH 07/32] =?UTF-8?q?=EA=B5=AC=EA=B0=84=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=95=B8=EB=93=A4=EB=9F=AC=20=ED=95=A8=EC=88=98=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

---
 index.html                                    |  2 +-
 src/components/app.js                         |  8 +-
 .../lineManagerPage.js => pages/linePage.js}  |  0
 .../mapPrintPage.js}                          |  0
 src/components/pages/sectionPage.js           | 38 +++++++++
 src/components/pages/stationPage.js           | 81 +++++++++++++++++++
 src/components/views/sectionManagerPage.js    |  5 --
 src/components/views/stationManagerPage.js    | 36 ---------
 src/index.js                                  | 66 +--------------
 src/library/handlers/lineHandlers.js          |  0
 src/library/handlers/stationHandlers.js       | 43 ++++++++++
 src/main.js                                   | 78 ++++++++++++++++++
 12 files changed, 247 insertions(+), 110 deletions(-)
 rename src/components/{views/lineManagerPage.js => pages/linePage.js} (100%)
 rename src/components/{views/mapPrintManagerPage.js => pages/mapPrintPage.js} (100%)
 create mode 100644 src/components/pages/sectionPage.js
 create mode 100644 src/components/pages/stationPage.js
 delete mode 100644 src/components/views/sectionManagerPage.js
 delete mode 100644 src/components/views/stationManagerPage.js
 create mode 100644 src/library/handlers/lineHandlers.js
 create mode 100644 src/library/handlers/stationHandlers.js
 create mode 100644 src/main.js

diff --git a/index.html b/index.html
index fc99deac2..dd25c7316 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
   </head>
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <h1>🚇 지하철 노선도 관리</h1>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/components/app.js b/src/components/app.js
index 4c352975e..490c8e0d8 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -1,7 +1,7 @@
-import stationManagerPage from "./views/stationManagerPage.js";
-import lineManagerPage from "./views/lineManagerPage.js";
-import sectionManagerPage from "./views/sectionManagerPage.js";
-import mapPrintManagerPage from "./views/mapPrintManagerPage.js";
+import { stationManagerPage } from "./pages/stationPage.js";
+import lineManagerPage from "./pages/linePage.js";
+import sectionManagerPage from "./pages/sectionPage.js";
+import mapPrintManagerPage from "./pages/mapPrintPage.js";
 
 export default function app(pageName, stationNames) {
   let app = ``;
diff --git a/src/components/views/lineManagerPage.js b/src/components/pages/linePage.js
similarity index 100%
rename from src/components/views/lineManagerPage.js
rename to src/components/pages/linePage.js
diff --git a/src/components/views/mapPrintManagerPage.js b/src/components/pages/mapPrintPage.js
similarity index 100%
rename from src/components/views/mapPrintManagerPage.js
rename to src/components/pages/mapPrintPage.js
diff --git a/src/components/pages/sectionPage.js b/src/components/pages/sectionPage.js
new file mode 100644
index 000000000..cbd5aaa4b
--- /dev/null
+++ b/src/components/pages/sectionPage.js
@@ -0,0 +1,38 @@
+function sectionManagerPage() {
+  let sectionManager = `
+  <h4>구간을 수정할 노선을 선택해주세요.<h4>
+  <button class = ".section-line-menu-button">1호선</button>
+  <button class = ".section-line-menu-button">2호선</button>
+  <button class = ".section-line-menu-button">3호선</button>
+  <h4>1호선 관리</h4>
+  <h5>구간 등록<h5>
+  <select id="section-station-selector">
+    <option value = "인천">인천</option>
+    <option value = "인천">회기</option>
+  </select>
+  <input id = "section-order-input"></input>
+  <button id = "section-add-button">등록</button>
+  <br />
+  <br />
+  <table border = 1px solid black>
+    <thead>
+      <tr>
+        <th>순서</th>
+        <th>역 이름</th>
+        <th>설정</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>0</td>
+        <td>인천</td>
+        <td><button class="section-delete-button">노선에서 제거</button></td>
+      </tr>
+    </tbody>
+  </table>
+ `;
+
+  return sectionManager;
+}
+
+export default sectionManagerPage;
diff --git a/src/components/pages/stationPage.js b/src/components/pages/stationPage.js
new file mode 100644
index 000000000..fd960b9da
--- /dev/null
+++ b/src/components/pages/stationPage.js
@@ -0,0 +1,81 @@
+// import render from "../render.js";
+// import app from "../app.js";
+
+function stationManagerPage(stationNames) {
+  let table = ``;
+
+  stationNames &&
+    stationNames.map((name) => {
+      table += `<tr>
+      <td>${name}</td>
+      <td>
+        <button class="station-delete-button">삭제</button>
+      </td>
+    </tr>`;
+    });
+
+  let stationManager = `
+  <h4>역 이름<h4>
+  <input id = "station-add-input"></input>
+  <button id = "station-add-button">역 추가</button>
+  <h3>🚉지하철 역 목록</h3>
+  
+  <table border = 1px solid black>
+    <thead>
+      <tr>
+        <th>역 이름</th>
+        <th>설정</th>
+      </tr>
+    </thead>
+    <tbody>
+    ${table}
+    </tbody>
+  </table>
+ 
+  `;
+  return stationManager;
+}
+
+// let stations = JSON.parse(localStorage.getItem("stations"));
+
+// function onStationHandler() {
+//   render(app("station", stations));
+//   stations && updateEvent();
+//   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+// }
+
+// function onAddStationHandler() {
+//   let stationName = document.getElementById("station-add-input").value;
+//   stations.push(stationName);
+
+//   localStorage.setItem("stations", JSON.stringify(stations));
+//   render(app("station", stations));
+//   console.log("arr", localStorage);
+//   stations && updateEvent();
+// }
+
+// // 렌더, 역 추가 버튼에 이벤트 리스너 추가, 삭제 버튼에 이벤트 리스너 추가
+// function updateEvent() {
+//   // render(app("station", stations));
+//   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+
+//   let deleteBtns = document.getElementsByClassName("station-delete-button");
+//   for (let i = 0; i < deleteBtns.length; i++) {
+//     deleteBtns[i].addEventListener("click", onDeleteStationHandler);
+//   }
+// }
+
+// function onDeleteStationHandler() {
+//   let tr = event.target.parentNode.parentNode;
+
+//   let deleteIdx = stations.indexOf(tr.childNodes[1].outerText);
+//   if (deleteIdx > -1) stations.splice(deleteIdx, 1);
+//   localStorage.clear();
+//   localStorage.setItem("stations", JSON.stringify(stations));
+//   tr.parentNode.removeChild(tr);
+//   render(app("station", stations));
+//   updateEvent();
+// }
+
+// export default stationManagerPage;
+export { stationManagerPage };
diff --git a/src/components/views/sectionManagerPage.js b/src/components/views/sectionManagerPage.js
deleted file mode 100644
index 2e0269a44..000000000
--- a/src/components/views/sectionManagerPage.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function sectionManagerPage() {
-  return `sectionManagerPage`;
-}
-
-export default sectionManagerPage;
diff --git a/src/components/views/stationManagerPage.js b/src/components/views/stationManagerPage.js
deleted file mode 100644
index 6ecddf1a9..000000000
--- a/src/components/views/stationManagerPage.js
+++ /dev/null
@@ -1,36 +0,0 @@
-function stationManagerPage(stationNames) {
-  let table = ``;
-
-  stationNames &&
-    stationNames.map((name) => {
-      table += `<tr>
-      <td>${name}</td>
-      <td>
-        <button class="station-delete-button">삭제</button>
-      </td>
-    </tr>`;
-    });
-
-  let stationManager = `
-  <h4>역 이름<h4>
-  <input id = "station-add-input"></input>
-  <button id = "station-add-button">역 추가</button>
-  <h3>🚉지하철 역 목록</h3>
-  
-  <table border = 1px solid black>
-    <thead>
-      <tr>
-        <th>역 이름</th>
-        <th>설정</th>
-      </tr>
-    </thead>
-    <tbody>
-    ${table}
-    </tbody>
-  </table>
- 
-  `;
-  return stationManager;
-}
-
-export default stationManagerPage;
diff --git a/src/index.js b/src/index.js
index 0b8822e89..9a4498c4b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,69 +1,7 @@
-import { initHTML } from "./uiManager.js";
-import render from "./components/render.js";
-import app from "./components/app.js";
-
-let stations = JSON.parse(localStorage.getItem("stations"));
+import main from "./main.js";
 
 export default function init() {
-  initHTML();
-  render(app());
-
-  stations && mount();
-
-  document.getElementById("station-manager-button").addEventListener("click", onStationHandler);
-  document.getElementById("line-manager-button").addEventListener("click", onLineHandler);
-  document.getElementById("section-manager-button").addEventListener("click", onSectionHandler);
-  document.getElementById("map-print-manager-button").addEventListener("click", onMapPrintHandler);
+  main();
 }
 
 init();
-
-function onStationHandler() {
-  render(app("station"));
-  stations && mount();
-  document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
-}
-
-function onAddStationHandler() {
-  let stationName = document.getElementById("station-add-input").value;
-  stations.push(stationName);
-
-  localStorage.setItem("stations", JSON.stringify(stations));
-
-  console.log("arr", localStorage);
-  stations && mount();
-}
-
-function mount() {
-  render(app("station", stations));
-  document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
-
-  let deleteBtns = document.getElementsByClassName("station-delete-button");
-  for (let i = 0; i < deleteBtns.length; i++) {
-    deleteBtns[i].addEventListener("click", onDeleteStationHandler);
-  }
-}
-
-function onDeleteStationHandler() {
-  let tr = event.target.parentNode.parentNode;
-
-  let deleteIdx = stations.indexOf(tr.childNodes[1].outerText);
-  if (deleteIdx > -1) stations.splice(deleteIdx, 1);
-  localStorage.clear();
-  localStorage.setItem("stations", JSON.stringify(stations));
-  tr.parentNode.removeChild(tr);
-
-  mount();
-}
-
-function onLineHandler() {
-  render(app("line"));
-}
-
-function onSectionHandler() {
-  render(app("section"));
-}
-
-function onMapPrintHandler() {
-  render(app("map"));
-}
diff --git a/src/library/handlers/lineHandlers.js b/src/library/handlers/lineHandlers.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/library/handlers/stationHandlers.js b/src/library/handlers/stationHandlers.js
new file mode 100644
index 000000000..38b20f4dd
--- /dev/null
+++ b/src/library/handlers/stationHandlers.js
@@ -0,0 +1,43 @@
+import render from "../../components/render.js";
+import app from "../../components/app.js";
+
+let stations = JSON.parse(localStorage.getItem("stations"));
+
+function onStationHandler() {
+  render(app("station", stations));
+  stations && updateEvent();
+  document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+}
+
+function onAddStationHandler() {
+  let stationName = document.getElementById("station-add-input").value;
+  stations.push(stationName);
+
+  localStorage.setItem("stations", JSON.stringify(stations));
+  render(app("station", stations));
+  stations && updateEvent();
+}
+
+// 렌더, 역 추가 버튼에 이벤트 리스너 추가, 삭제 버튼에 이벤트 리스너 추가
+function updateEvent() {
+  document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+
+  let deleteBtns = document.getElementsByClassName("station-delete-button");
+  for (let i = 0; i < deleteBtns.length; i++) {
+    deleteBtns[i].addEventListener("click", onDeleteStationHandler);
+  }
+}
+
+function onDeleteStationHandler() {
+  let tr = event.target.parentNode.parentNode;
+
+  let deleteIdx = stations.indexOf(tr.childNodes[1].outerText);
+  if (deleteIdx > -1) stations.splice(deleteIdx, 1);
+  localStorage.clear();
+  localStorage.setItem("stations", JSON.stringify(stations));
+  tr.parentNode.removeChild(tr);
+  render(app("station", stations));
+  updateEvent();
+}
+
+export { onStationHandler };
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 000000000..3c976bfc1
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,78 @@
+import { initHTML } from "./uiManager.js";
+import render from "./components/render.js";
+import app from "./components/app.js";
+import { onStationHandler } from "./library/handlers/stationHandlers.js";
+// import { onStationHandler } from "./components/views/stationManagerPage.js";
+
+export default function main() {
+  // const subwaymap = new SubwayMap();
+  let stations = JSON.parse(localStorage.getItem("stations"));
+
+  // stations = [{name:"왕십리", line:["중앙선","2호선"]}, {name:"회기", line:["중앙선","1호선"]}]
+  // lines = [{name:"1호선", stops:["인천","동대문","왕십리","회기"]}]
+
+  let subwayDatas = {
+    stations: stations,
+    lines: [],
+  };
+
+  initHTML();
+  render(app());
+  addEventToMainBtns(subwayDatas);
+}
+
+function addEventToMainBtns(subwayDatas) {
+  document.getElementById("station-manager-button").addEventListener("click", onStationHandler.bind(subwayDatas));
+  document.getElementById("line-manager-button").addEventListener("click", onLineHandler);
+  document.getElementById("section-manager-button").addEventListener("click", onSectionHandler);
+  document.getElementById("map-print-manager-button").addEventListener("click", onMapPrintHandler);
+}
+
+// function onStationHandler() {
+//   render(app("station", stations));
+//   stations && updateEvent();
+//   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+// }
+
+// function onAddStationHandler() {
+//   let stationName = document.getElementById("station-add-input").value;
+//   stations.push(stationName);
+
+//   localStorage.setItem("stations", JSON.stringify(stations));
+//   render(app("station", stations));
+//   stations && updateEvent();
+// }
+
+// // 렌더, 역 추가 버튼에 이벤트 리스너 추가, 삭제 버튼에 이벤트 리스너 추가
+// function updateEvent() {
+//   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+
+//   let deleteBtns = document.getElementsByClassName("station-delete-button");
+//   for (let i = 0; i < deleteBtns.length; i++) {
+//     deleteBtns[i].addEventListener("click", onDeleteStationHandler);
+//   }
+// }
+
+// function onDeleteStationHandler() {
+//   let tr = event.target.parentNode.parentNode;
+
+//   let deleteIdx = stations.indexOf(tr.childNodes[1].outerText);
+//   if (deleteIdx > -1) stations.splice(deleteIdx, 1);
+//   localStorage.clear();
+//   localStorage.setItem("stations", JSON.stringify(stations));
+//   tr.parentNode.removeChild(tr);
+//   render(app("station", stations));
+//   updateEvent();
+// }
+
+function onLineHandler() {
+  render(app("line"));
+}
+
+function onSectionHandler() {
+  render(app("section"));
+}
+
+function onMapPrintHandler() {
+  render(app("map"));
+}

From 858c0bca833790824a82b498ab653c582a59ef2c Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Sat, 12 Dec 2020 00:31:58 +0900
Subject: [PATCH 08/32] =?UTF-8?q?=EB=85=B8=EC=84=A0=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B0=81=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=EC=97=90=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=EB=84=88=20=EC=97=B0=EA=B2=B0,=20local=20storage=EC=97=90=20?=
 =?UTF-8?q?=EA=B0=9D=EC=B2=B4=EB=A5=BC=20=EC=9D=B4=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EC=97=AC=20=EB=85=B8=EC=84=A0=20=EB=8D=B0=EC=9D=B4=ED=84=B0?=
 =?UTF-8?q?=EC=99=80=20=EC=97=AD=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=ED=95=A8?=
 =?UTF-8?q?=EA=BB=98=20=EC=A0=80=EC=9E=A5=ED=95=98=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               | 17 ++-----
 src/components/app.js                   |  8 +--
 src/components/pages/linePage.js        | 30 ++++++++----
 src/components/pages/stationPage.js     |  9 ++--
 src/library/handlers/lineHandlers.js    | 65 +++++++++++++++++++++++++
 src/library/handlers/stationHandlers.js | 41 ++++++++++------
 src/main.js                             | 29 +++++------
 7 files changed, 138 insertions(+), 61 deletions(-)

diff --git a/README.md b/README.md
index e82d625fe..cdb12471c 100644
--- a/README.md
+++ b/README.md
@@ -3,23 +3,14 @@
 ## 👩🏻‍💻 기능 목록
 
 - 4개 관리 페이지 연결을 위한 버튼 생성
-  - 역 관리 : #station-manager-button
-  - 노선 관리 : #line-manager-button
-  - 구간 관리 : #section-manager-button
-  - 노선도 출력 : #map-print-manager-button
 - 4개 관리페이지 컴포넌트 생성
 - 각 버튼에 이벤트 리스너 등록하여 컴포넌트 연결
-- 역 관리 페이지 UI 구현, 각 버튼에 이벤트 리스너 연결
-  - 역 이름 추가 input : #station-name-input
-  - 역 이름 추가 button : #station-add-button
-  - 역 목록 table
-  - 역 삭제 button : .station-delete-button
+- 역 관리 페이지 UI 구현
+- 역 관리 페이지 각 버튼에 이벤트 리스너 연결
 - local storage를 이용하여 역 데이터 저장하기
 - 노선 관리 페이지 UI 구현
-  - 노선 이름 입력 input
-  - 종점 select option
-  - 노선 추가 button
-  - 노선 목록 table
+- 노선 관리 페이지 각 버튼에 이벤트 리스너 연결
+- local storage에 객체를 이용하여 노선 데이터와 역 데이터 함께 저장하기
 - 구간 관리 페이지 UI 구현
   - 노선 선택 button
   - 호선별 컴포넌트 생성
diff --git a/src/components/app.js b/src/components/app.js
index 490c8e0d8..f8dd36ae6 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -3,15 +3,15 @@ import lineManagerPage from "./pages/linePage.js";
 import sectionManagerPage from "./pages/sectionPage.js";
 import mapPrintManagerPage from "./pages/mapPrintPage.js";
 
-export default function app(pageName, stationNames) {
+export default function app(pageName, subwayDatas) {
   let app = ``;
 
-  // console.log("app", stationNames);
+  console.log(subwayDatas);
 
   if (pageName === "station") {
-    app = stationManagerPage(stationNames);
+    app = stationManagerPage(subwayDatas);
   } else if (pageName === "line") {
-    app = lineManagerPage();
+    app = lineManagerPage(subwayDatas);
   } else if (pageName === "section") {
     app = sectionManagerPage();
   } else if (pageName === "map") {
diff --git a/src/components/pages/linePage.js b/src/components/pages/linePage.js
index eb1b32f99..783e5db6e 100644
--- a/src/components/pages/linePage.js
+++ b/src/components/pages/linePage.js
@@ -1,6 +1,23 @@
-function lineManagerPage() {
-  let stations = JSON.parse(localStorage.getItem("stations"));
-  let options = stations.map((station) => `<option value = "${station}">${station}</option>`);
+// stations = [{name:"왕십리", line:["중앙선","2호선"]}, {name:"회기", line:["중앙선","1호선"]}]
+// lines = [{name:"1호선", stops:["인천","동대문","왕십리","회기"]}]
+
+function lineManagerPage(subwayDatas) {
+  // console.log(subwayDatas);
+  // let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let options = subwayDatas.subwayStations.map((station) => `<option value = "${station}">${station}</option>`);
+  // let options = `<option value = "sample">sample</option>`;
+  let table = ``;
+
+  subwayDatas.lines &&
+    subwayDatas.lines.map(
+      (line) =>
+        (table += `<tr>
+            <td>${line.name}</td>
+            <td>${line.stops[0]}</td>
+            <td>${line.stops[line.stops.length - 1]}</td>
+            <td><button class="line-delete-button">삭제</button></td>
+          </tr>`)
+    );
 
   let lineManager = `
   <h4>노선 이름<h4>
@@ -30,12 +47,7 @@ function lineManagerPage() {
       </tr>
     </thead>
     <tbody>
-      <tr>
-        <td>1호선</td>
-        <td>인천</td>
-        <td>소요산</td>
-        <td><button class="line-delete-button">삭제</button></td>
-      </tr>
+      ${table}
     </tbody>
   </table>
   `;
diff --git a/src/components/pages/stationPage.js b/src/components/pages/stationPage.js
index fd960b9da..30dd8a591 100644
--- a/src/components/pages/stationPage.js
+++ b/src/components/pages/stationPage.js
@@ -1,11 +1,14 @@
 // import render from "../render.js";
 // import app from "../app.js";
 
-function stationManagerPage(stationNames) {
+function stationManagerPage(subwayDatas) {
   let table = ``;
 
-  stationNames &&
-    stationNames.map((name) => {
+  // let stations = subwayDatas.subwayStations;
+
+  let names = subwayDatas.subwayStations;
+  names &&
+    names.map((name) => {
       table += `<tr>
       <td>${name}</td>
       <td>
diff --git a/src/library/handlers/lineHandlers.js b/src/library/handlers/lineHandlers.js
index e69de29bb..2ec56752b 100644
--- a/src/library/handlers/lineHandlers.js
+++ b/src/library/handlers/lineHandlers.js
@@ -0,0 +1,65 @@
+import render from "../../components/render.js";
+import app from "../../components/app.js";
+import lineManagerPage from "../../components/pages/linePage.js";
+
+// stations = [{name:"왕십리", line:["중앙선","2호선"]}, {name:"회기", line:["중앙선","1호선"]}]
+// lines = [{name:"1호선", stops:["인천","동대문","왕십리","회기"]}]
+
+// let lines = JSON.parse(localStorage.getItem("lines"));
+
+function onLineHandler() {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  render(app("line", subwayDatas));
+  subwayDatas && updateEvent();
+  document.getElementById("line-add-button").addEventListener("click", onAddLineHandler);
+}
+
+function onAddLineHandler() {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let lines = {
+    name: name,
+    stops: [],
+  };
+
+  lines.name = document.getElementById("line-name-input").value;
+  lines.stops.push(document.getElementById("line-start-station-selector").value);
+  lines.stops.push(document.getElementById("line-end-station-selector").value);
+
+  subwayDatas.lines.push(lines);
+  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+  // console.log(localStorage.getItem("subwayDatas"));
+  render(app("line", subwayDatas));
+  subwayDatas && updateEvent();
+}
+
+function updateEvent() {
+  document.getElementById("line-add-button").addEventListener("click", onAddLineHandler);
+
+  let deleteBtns = document.getElementsByClassName("line-delete-button");
+  for (let i = 0; i < deleteBtns.length; i++) {
+    deleteBtns[i].addEventListener("click", onDeleteLineHandler);
+  }
+}
+
+function onDeleteLineHandler() {
+  // console.log(event.target);
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let deleteTarget = event.target.parentNode.parentNode.childNodes[1].outerText;
+
+  // console.log(tr.childNodes[1].outerText); //1호선
+  // let deleteKey = subwayDatas.lines.keys(tr.childNodes[1].outerText); //1호선의 키값
+
+  // let idx = 0;
+  subwayDatas.lines.forEach((line, idx) => {
+    // console.log(line.name, tr.childNodes[1].outerText);
+    if (line.name === deleteTarget) {
+      subwayDatas.lines.splice(idx, 1);
+      // console.log(subwayDatas.lines);
+      localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+      render(app("line", subwayDatas));
+      updateEvent();
+    }
+  });
+}
+
+export { onLineHandler };
diff --git a/src/library/handlers/stationHandlers.js b/src/library/handlers/stationHandlers.js
index 38b20f4dd..3a4d7daaa 100644
--- a/src/library/handlers/stationHandlers.js
+++ b/src/library/handlers/stationHandlers.js
@@ -1,21 +1,31 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
 
-let stations = JSON.parse(localStorage.getItem("stations"));
-
 function onStationHandler() {
-  render(app("station", stations));
-  stations && updateEvent();
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  render(app("station", subwayDatas));
+  subwayDatas && updateEvent();
   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
 }
 
 function onAddStationHandler() {
-  let stationName = document.getElementById("station-add-input").value;
-  stations.push(stationName);
-
-  localStorage.setItem("stations", JSON.stringify(stations));
-  render(app("station", stations));
-  stations && updateEvent();
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  // let subwayDatas = {
+  //   subwayStations: [],
+  //   lines: [],
+  // };
+
+  let subwayStations = {
+    name: name,
+    line: [],
+  };
+
+  subwayStations.name = document.getElementById("station-add-input").value;
+  subwayDatas.subwayStations.push(subwayStations.name);
+
+  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+  render(app("station", subwayDatas));
+  subwayDatas && updateEvent();
 }
 
 // 렌더, 역 추가 버튼에 이벤트 리스너 추가, 삭제 버튼에 이벤트 리스너 추가
@@ -29,14 +39,13 @@ function updateEvent() {
 }
 
 function onDeleteStationHandler() {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let tr = event.target.parentNode.parentNode;
 
-  let deleteIdx = stations.indexOf(tr.childNodes[1].outerText);
-  if (deleteIdx > -1) stations.splice(deleteIdx, 1);
-  localStorage.clear();
-  localStorage.setItem("stations", JSON.stringify(stations));
-  tr.parentNode.removeChild(tr);
-  render(app("station", stations));
+  let deleteIdx = subwayDatas.subwayStations.indexOf(tr.childNodes[1].outerText);
+  if (deleteIdx > -1) subwayDatas.subwayStations.splice(deleteIdx, 1);
+  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+  render(app("station", subwayDatas));
   updateEvent();
 }
 
diff --git a/src/main.js b/src/main.js
index 3c976bfc1..c6677452d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,27 +2,28 @@ import { initHTML } from "./uiManager.js";
 import render from "./components/render.js";
 import app from "./components/app.js";
 import { onStationHandler } from "./library/handlers/stationHandlers.js";
-// import { onStationHandler } from "./components/views/stationManagerPage.js";
+import { onLineHandler } from "./library/handlers/lineHandlers.js";
 
 export default function main() {
-  // const subwaymap = new SubwayMap();
-  let stations = JSON.parse(localStorage.getItem("stations"));
-
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  if (!subwayDatas) {
+    let subwayDatas = {
+      subwayStations: [],
+      lines: [],
+    };
+    localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+  }
   // stations = [{name:"왕십리", line:["중앙선","2호선"]}, {name:"회기", line:["중앙선","1호선"]}]
   // lines = [{name:"1호선", stops:["인천","동대문","왕십리","회기"]}]
 
-  let subwayDatas = {
-    stations: stations,
-    lines: [],
-  };
-
+  // console.log(subwayDatas);
   initHTML();
   render(app());
-  addEventToMainBtns(subwayDatas);
+  addEventToMainBtns();
 }
 
-function addEventToMainBtns(subwayDatas) {
-  document.getElementById("station-manager-button").addEventListener("click", onStationHandler.bind(subwayDatas));
+function addEventToMainBtns() {
+  document.getElementById("station-manager-button").addEventListener("click", onStationHandler);
   document.getElementById("line-manager-button").addEventListener("click", onLineHandler);
   document.getElementById("section-manager-button").addEventListener("click", onSectionHandler);
   document.getElementById("map-print-manager-button").addEventListener("click", onMapPrintHandler);
@@ -65,10 +66,6 @@ function addEventToMainBtns(subwayDatas) {
 //   updateEvent();
 // }
 
-function onLineHandler() {
-  render(app("line"));
-}
-
 function onSectionHandler() {
   render(app("section"));
 }

From 552b6f939556e01a39ffb2909b54d0222bd5cc01 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Sat, 12 Dec 2020 03:47:20 +0900
Subject: [PATCH 09/32] =?UTF-8?q?=EC=97=AD=20=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=EC=99=80=20=EB=85=B8=EC=84=A0=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=97=B0?=
 =?UTF-8?q?=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |  1 +
 src/components/app.js                   |  2 -
 src/components/pages/linePage.js        |  8 +---
 src/components/pages/stationPage.js     | 55 ++-----------------------
 src/library/handlers/lineHandlers.js    | 43 ++++++++++---------
 src/library/handlers/stationHandlers.js | 26 ++++++------
 src/main.js                             | 40 ------------------
 7 files changed, 42 insertions(+), 133 deletions(-)

diff --git a/README.md b/README.md
index cdb12471c..a71f8514f 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@
 - 노선 관리 페이지 UI 구현
 - 노선 관리 페이지 각 버튼에 이벤트 리스너 연결
 - local storage에 객체를 이용하여 노선 데이터와 역 데이터 함께 저장하기
+- 역 관리 데이터와 노선 관리 데이터 연동
 - 구간 관리 페이지 UI 구현
   - 노선 선택 button
   - 호선별 컴포넌트 생성
diff --git a/src/components/app.js b/src/components/app.js
index f8dd36ae6..3287f121e 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -6,8 +6,6 @@ import mapPrintManagerPage from "./pages/mapPrintPage.js";
 export default function app(pageName, subwayDatas) {
   let app = ``;
 
-  console.log(subwayDatas);
-
   if (pageName === "station") {
     app = stationManagerPage(subwayDatas);
   } else if (pageName === "line") {
diff --git a/src/components/pages/linePage.js b/src/components/pages/linePage.js
index 783e5db6e..0fc838a67 100644
--- a/src/components/pages/linePage.js
+++ b/src/components/pages/linePage.js
@@ -1,11 +1,5 @@
-// stations = [{name:"왕십리", line:["중앙선","2호선"]}, {name:"회기", line:["중앙선","1호선"]}]
-// lines = [{name:"1호선", stops:["인천","동대문","왕십리","회기"]}]
-
 function lineManagerPage(subwayDatas) {
-  // console.log(subwayDatas);
-  // let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let options = subwayDatas.subwayStations.map((station) => `<option value = "${station}">${station}</option>`);
-  // let options = `<option value = "sample">sample</option>`;
+  let options = subwayDatas.subwayStations.map((station) => `<option value = "${station.name}">${station.name}</option>`);
   let table = ``;
 
   subwayDatas.lines &&
diff --git a/src/components/pages/stationPage.js b/src/components/pages/stationPage.js
index 30dd8a591..08d59a1e1 100644
--- a/src/components/pages/stationPage.js
+++ b/src/components/pages/stationPage.js
@@ -1,16 +1,11 @@
-// import render from "../render.js";
-// import app from "../app.js";
-
 function stationManagerPage(subwayDatas) {
   let table = ``;
 
-  // let stations = subwayDatas.subwayStations;
-
-  let names = subwayDatas.subwayStations;
-  names &&
-    names.map((name) => {
+  let stations = subwayDatas.subwayStations;
+  stations &&
+    stations.map((station) => {
       table += `<tr>
-      <td>${name}</td>
+      <td>${station.name}</td>
       <td>
         <button class="station-delete-button">삭제</button>
       </td>
@@ -39,46 +34,4 @@ function stationManagerPage(subwayDatas) {
   return stationManager;
 }
 
-// let stations = JSON.parse(localStorage.getItem("stations"));
-
-// function onStationHandler() {
-//   render(app("station", stations));
-//   stations && updateEvent();
-//   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
-// }
-
-// function onAddStationHandler() {
-//   let stationName = document.getElementById("station-add-input").value;
-//   stations.push(stationName);
-
-//   localStorage.setItem("stations", JSON.stringify(stations));
-//   render(app("station", stations));
-//   console.log("arr", localStorage);
-//   stations && updateEvent();
-// }
-
-// // 렌더, 역 추가 버튼에 이벤트 리스너 추가, 삭제 버튼에 이벤트 리스너 추가
-// function updateEvent() {
-//   // render(app("station", stations));
-//   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
-
-//   let deleteBtns = document.getElementsByClassName("station-delete-button");
-//   for (let i = 0; i < deleteBtns.length; i++) {
-//     deleteBtns[i].addEventListener("click", onDeleteStationHandler);
-//   }
-// }
-
-// function onDeleteStationHandler() {
-//   let tr = event.target.parentNode.parentNode;
-
-//   let deleteIdx = stations.indexOf(tr.childNodes[1].outerText);
-//   if (deleteIdx > -1) stations.splice(deleteIdx, 1);
-//   localStorage.clear();
-//   localStorage.setItem("stations", JSON.stringify(stations));
-//   tr.parentNode.removeChild(tr);
-//   render(app("station", stations));
-//   updateEvent();
-// }
-
-// export default stationManagerPage;
 export { stationManagerPage };
diff --git a/src/library/handlers/lineHandlers.js b/src/library/handlers/lineHandlers.js
index 2ec56752b..60ccd7db7 100644
--- a/src/library/handlers/lineHandlers.js
+++ b/src/library/handlers/lineHandlers.js
@@ -1,11 +1,5 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
-import lineManagerPage from "../../components/pages/linePage.js";
-
-// stations = [{name:"왕십리", line:["중앙선","2호선"]}, {name:"회기", line:["중앙선","1호선"]}]
-// lines = [{name:"1호선", stops:["인천","동대문","왕십리","회기"]}]
-
-// let lines = JSON.parse(localStorage.getItem("lines"));
 
 function onLineHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -16,18 +10,36 @@ function onLineHandler() {
 
 function onAddLineHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let lines = {
+
+  let line = {
     name: name,
     stops: [],
   };
 
-  lines.name = document.getElementById("line-name-input").value;
-  lines.stops.push(document.getElementById("line-start-station-selector").value);
-  lines.stops.push(document.getElementById("line-end-station-selector").value);
+  line.name = document.getElementById("line-name-input").value;
+  line.stops.push(document.getElementById("line-start-station-selector").value);
+  line.stops.push(document.getElementById("line-end-station-selector").value);
+
+  let startStop = line.stops[0];
+  let endStop = line.stops[line.stops.length - 1];
+
+  //상행선 역 정보에 노선 정보 추가
+  subwayDatas.subwayStations.forEach((station, idx) => {
+    if (startStop === station.name) {
+      subwayDatas.subwayStations[idx].line.push(line.name);
+    }
+  });
+
+  //하행선 역 정보에 노선 정보 추가
+  subwayDatas.subwayStations.forEach((station, idx) => {
+    if (endStop === station.name) {
+      subwayDatas.subwayStations[idx].line.push(line.name);
+    }
+  });
 
-  subwayDatas.lines.push(lines);
+  subwayDatas.lines.push(line);
   localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-  // console.log(localStorage.getItem("subwayDatas"));
+
   render(app("line", subwayDatas));
   subwayDatas && updateEvent();
 }
@@ -42,19 +54,12 @@ function updateEvent() {
 }
 
 function onDeleteLineHandler() {
-  // console.log(event.target);
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let deleteTarget = event.target.parentNode.parentNode.childNodes[1].outerText;
 
-  // console.log(tr.childNodes[1].outerText); //1호선
-  // let deleteKey = subwayDatas.lines.keys(tr.childNodes[1].outerText); //1호선의 키값
-
-  // let idx = 0;
   subwayDatas.lines.forEach((line, idx) => {
-    // console.log(line.name, tr.childNodes[1].outerText);
     if (line.name === deleteTarget) {
       subwayDatas.lines.splice(idx, 1);
-      // console.log(subwayDatas.lines);
       localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
       render(app("line", subwayDatas));
       updateEvent();
diff --git a/src/library/handlers/stationHandlers.js b/src/library/handlers/stationHandlers.js
index 3a4d7daaa..fad077053 100644
--- a/src/library/handlers/stationHandlers.js
+++ b/src/library/handlers/stationHandlers.js
@@ -10,25 +10,19 @@ function onStationHandler() {
 
 function onAddStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  // let subwayDatas = {
-  //   subwayStations: [],
-  //   lines: [],
-  // };
-
   let subwayStations = {
     name: name,
     line: [],
   };
 
   subwayStations.name = document.getElementById("station-add-input").value;
-  subwayDatas.subwayStations.push(subwayStations.name);
+  subwayDatas.subwayStations.push(subwayStations);
 
   localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
   render(app("station", subwayDatas));
   subwayDatas && updateEvent();
 }
 
-// 렌더, 역 추가 버튼에 이벤트 리스너 추가, 삭제 버튼에 이벤트 리스너 추가
 function updateEvent() {
   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
 
@@ -40,13 +34,17 @@ function updateEvent() {
 
 function onDeleteStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let tr = event.target.parentNode.parentNode;
-
-  let deleteIdx = subwayDatas.subwayStations.indexOf(tr.childNodes[1].outerText);
-  if (deleteIdx > -1) subwayDatas.subwayStations.splice(deleteIdx, 1);
-  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-  render(app("station", subwayDatas));
-  updateEvent();
+  let deleteTarget = event.target.parentNode.parentNode.childNodes[1].outerText;
+
+  subwayDatas.subwayStations.forEach((station, idx) => {
+    if (station.name === deleteTarget) {
+      subwayDatas.subwayStations.splice(idx, 1);
+      // console.log(subwayDatas.lines);
+      localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+      render(app("station", subwayDatas));
+      updateEvent();
+    }
+  });
 }
 
 export { onStationHandler };
diff --git a/src/main.js b/src/main.js
index c6677452d..9b10b9b95 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,10 +13,7 @@ export default function main() {
     };
     localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
   }
-  // stations = [{name:"왕십리", line:["중앙선","2호선"]}, {name:"회기", line:["중앙선","1호선"]}]
-  // lines = [{name:"1호선", stops:["인천","동대문","왕십리","회기"]}]
 
-  // console.log(subwayDatas);
   initHTML();
   render(app());
   addEventToMainBtns();
@@ -29,43 +26,6 @@ function addEventToMainBtns() {
   document.getElementById("map-print-manager-button").addEventListener("click", onMapPrintHandler);
 }
 
-// function onStationHandler() {
-//   render(app("station", stations));
-//   stations && updateEvent();
-//   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
-// }
-
-// function onAddStationHandler() {
-//   let stationName = document.getElementById("station-add-input").value;
-//   stations.push(stationName);
-
-//   localStorage.setItem("stations", JSON.stringify(stations));
-//   render(app("station", stations));
-//   stations && updateEvent();
-// }
-
-// // 렌더, 역 추가 버튼에 이벤트 리스너 추가, 삭제 버튼에 이벤트 리스너 추가
-// function updateEvent() {
-//   document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
-
-//   let deleteBtns = document.getElementsByClassName("station-delete-button");
-//   for (let i = 0; i < deleteBtns.length; i++) {
-//     deleteBtns[i].addEventListener("click", onDeleteStationHandler);
-//   }
-// }
-
-// function onDeleteStationHandler() {
-//   let tr = event.target.parentNode.parentNode;
-
-//   let deleteIdx = stations.indexOf(tr.childNodes[1].outerText);
-//   if (deleteIdx > -1) stations.splice(deleteIdx, 1);
-//   localStorage.clear();
-//   localStorage.setItem("stations", JSON.stringify(stations));
-//   tr.parentNode.removeChild(tr);
-//   render(app("station", stations));
-//   updateEvent();
-// }
-
 function onSectionHandler() {
   render(app("section"));
 }

From e977926198d50a1a13884f6d64a749ef2f088958 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Sun, 13 Dec 2020 23:14:03 +0900
Subject: [PATCH 10/32] =?UTF-8?q?=EA=B5=AC=EA=B0=84=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=85=B8=EC=84=A0=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EB=B2=84=ED=8A=BC=EC=97=90=20=EC=9D=B4=EB=B2=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A6=AC=EC=8A=A4=EB=84=88=20=EC=97=B0=EA=B2=B0?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20=ED=95=B4=EB=8B=B9=20=EB=85=B8=EC=84=A0=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EB=A0=8C=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |  8 +--
 src/components/app.js                   |  4 +-
 src/components/pages/sectionPage.js     | 94 ++++++++++++++++---------
 src/components/pages/stationPage.js     |  1 -
 src/library/handlers/mapPrintHandler.js |  0
 src/library/handlers/sectionHandler.js  | 32 +++++++++
 src/library/handlers/stationHandlers.js |  1 -
 src/main.js                             |  5 +-
 8 files changed, 99 insertions(+), 46 deletions(-)
 create mode 100644 src/library/handlers/mapPrintHandler.js
 create mode 100644 src/library/handlers/sectionHandler.js

diff --git a/README.md b/README.md
index a71f8514f..9d356823b 100644
--- a/README.md
+++ b/README.md
@@ -13,12 +13,8 @@
 - local storage에 객체를 이용하여 노선 데이터와 역 데이터 함께 저장하기
 - 역 관리 데이터와 노선 관리 데이터 연동
 - 구간 관리 페이지 UI 구현
-  - 노선 선택 button
-  - 호선별 컴포넌트 생성
-    - 구간 등록 select option
-    - 순서 입력 input
-    - 순서 입력 button
-    - 순서 table
+- 구간 관리 페이지 노선 선택 버튼에 이벤트 리스너 연결하여 해당 노선 정보 렌더링
+- 구간 등록, 제거 구현
 - 노선도 출력 페이지 UI 구현
   - 호선별 역 리스트 ul
 
diff --git a/src/components/app.js b/src/components/app.js
index 3287f121e..ec94588b4 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -11,9 +11,9 @@ export default function app(pageName, subwayDatas) {
   } else if (pageName === "line") {
     app = lineManagerPage(subwayDatas);
   } else if (pageName === "section") {
-    app = sectionManagerPage();
+    app = sectionManagerPage(subwayDatas);
   } else if (pageName === "map") {
-    app = mapPrintManagerPage();
+    app = mapPrintManagerPage(subwayDatas);
   }
 
   return app;
diff --git a/src/components/pages/sectionPage.js b/src/components/pages/sectionPage.js
index cbd5aaa4b..c05e205de 100644
--- a/src/components/pages/sectionPage.js
+++ b/src/components/pages/sectionPage.js
@@ -1,38 +1,68 @@
-function sectionManagerPage() {
+// import { onLineSelectHandler } from "../../library/handlers/sectionHandler.js";
+
+function sectionManagerPage(subwayDatas) {
+  let lines = ``;
+
+  console.log(subwayDatas);
+  subwayDatas.lines &&
+    subwayDatas.lines.map(
+      (line) =>
+        (lines += `<button class = ".section-line-menu-button">
+            ${line.name}
+          </button> `)
+    );
+
+  let targetLine = subwayDatas.targetLine;
+
   let sectionManager = `
-  <h4>구간을 수정할 노선을 선택해주세요.<h4>
-  <button class = ".section-line-menu-button">1호선</button>
-  <button class = ".section-line-menu-button">2호선</button>
-  <button class = ".section-line-menu-button">3호선</button>
-  <h4>1호선 관리</h4>
-  <h5>구간 등록<h5>
-  <select id="section-station-selector">
-    <option value = "인천">인천</option>
-    <option value = "인천">회기</option>
-  </select>
-  <input id = "section-order-input"></input>
-  <button id = "section-add-button">등록</button>
-  <br />
-  <br />
-  <table border = 1px solid black>
-    <thead>
-      <tr>
-        <th>순서</th>
-        <th>역 이름</th>
-        <th>설정</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>0</td>
-        <td>인천</td>
-        <td><button class="section-delete-button">노선에서 제거</button></td>
-      </tr>
-    </tbody>
-  </table>
- `;
+  <h4>구간을 수정할 노선을 선택해주세요.</h4>
+  <div>
+  ${lines}
+  </div>
+  `;
+
+  if (subwayDatas.targetLine) {
+    sectionManager += `
+    <div id = "selected-line-section-manager">
+    <h4>${targetLine} 관리</h4>
+    <h5>구간 등록<h5>
+    <select id="section-station-selector">
+      <option value = "인천">인천</option>
+      <option value = "인천">회기</option>
+    </select>
+    <input id = "section-order-input"></input>
+    <button id = "section-add-button">등록</button>
+    <br />
+    <br />
+    <table border = 1px solid black>
+      <thead>
+        <tr>
+          <th>순서</th>
+          <th>역 이름</th>
+          <th>설정</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>0</td>
+          <td>인천</td>
+          <td><button class="section-delete-button">노선에서 제거</button></td>
+        </tr>
+      </tbody>
+    </table>
+    </div>`;
+  }
 
   return sectionManager;
 }
 
+console.log(document.getElementById("selected-line-section-manager"));
+
+// function onLineSelectHandler() {
+//   let targetLine = event.target.innerText;
+//   console.log(targetLine);
+// }
+// let targetLine = onLineSelectHandler();
+// console.log(targetLine);
+
 export default sectionManagerPage;
diff --git a/src/components/pages/stationPage.js b/src/components/pages/stationPage.js
index 08d59a1e1..d8f22b482 100644
--- a/src/components/pages/stationPage.js
+++ b/src/components/pages/stationPage.js
@@ -29,7 +29,6 @@ function stationManagerPage(subwayDatas) {
     ${table}
     </tbody>
   </table>
- 
   `;
   return stationManager;
 }
diff --git a/src/library/handlers/mapPrintHandler.js b/src/library/handlers/mapPrintHandler.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/library/handlers/sectionHandler.js b/src/library/handlers/sectionHandler.js
new file mode 100644
index 000000000..519b7a155
--- /dev/null
+++ b/src/library/handlers/sectionHandler.js
@@ -0,0 +1,32 @@
+import render from "../../components/render.js";
+import app from "../../components/app.js";
+
+function onSectionHandler() {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  render(app("section", subwayDatas));
+  //   console.log(document.getElementById("selected-line-section-manager"));
+
+  //   document.getElementById("selected-line-section-manager").style.visibility = "hidden";
+
+  let lineBtns = document.getElementsByClassName(".section-line-menu-button");
+
+  for (let i = 0; i < lineBtns.length; i++) {
+    let eachBtn = lineBtns[i];
+    eachBtn.addEventListener("click", onLineSelectHandler);
+  }
+}
+
+function onLineSelectHandler() {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let targetLine = event.target.innerText;
+  //   console.log(targetLine);
+  subwayDatas.targetLine = targetLine;
+  render(app("section", subwayDatas));
+
+  //   document.getElementById("selected-line-section-manager").style.visibility = "visible";
+  //   document.getElementById("selected-line-section-manager").dataset.selectedButton = targetLine;
+
+  //   console.log(document.getElementById("selected-line-section-manager").dataset);
+}
+
+export { onSectionHandler };
diff --git a/src/library/handlers/stationHandlers.js b/src/library/handlers/stationHandlers.js
index fad077053..e91215644 100644
--- a/src/library/handlers/stationHandlers.js
+++ b/src/library/handlers/stationHandlers.js
@@ -39,7 +39,6 @@ function onDeleteStationHandler() {
   subwayDatas.subwayStations.forEach((station, idx) => {
     if (station.name === deleteTarget) {
       subwayDatas.subwayStations.splice(idx, 1);
-      // console.log(subwayDatas.lines);
       localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
       render(app("station", subwayDatas));
       updateEvent();
diff --git a/src/main.js b/src/main.js
index 9b10b9b95..901798dae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import render from "./components/render.js";
 import app from "./components/app.js";
 import { onStationHandler } from "./library/handlers/stationHandlers.js";
 import { onLineHandler } from "./library/handlers/lineHandlers.js";
+import { onSectionHandler } from "./library/handlers/sectionHandler.js";
 
 export default function main() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -26,10 +27,6 @@ function addEventToMainBtns() {
   document.getElementById("map-print-manager-button").addEventListener("click", onMapPrintHandler);
 }
 
-function onSectionHandler() {
-  render(app("section"));
-}
-
 function onMapPrintHandler() {
   render(app("map"));
 }

From 92dee2b5930ab40be96c78624662b0f797e5e642 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Mon, 14 Dec 2020 01:57:09 +0900
Subject: [PATCH 11/32] =?UTF-8?q?=EA=B5=AC=EA=B0=84=20=EB=93=B1=EB=A1=9D?=
 =?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

---
 README.md                              |  3 +-
 src/components/pages/sectionPage.js    | 42 +++++++++++----------
 src/library/handlers/sectionHandler.js | 51 ++++++++++++++++++++------
 3 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index 9d356823b..f00f08fa5 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,8 @@
 - 역 관리 데이터와 노선 관리 데이터 연동
 - 구간 관리 페이지 UI 구현
 - 구간 관리 페이지 노선 선택 버튼에 이벤트 리스너 연결하여 해당 노선 정보 렌더링
-- 구간 등록, 제거 구현
+- 구간 등록 구현
+- 구간 제거 구현
 - 노선도 출력 페이지 UI 구현
   - 호선별 역 리스트 ul
 
diff --git a/src/components/pages/sectionPage.js b/src/components/pages/sectionPage.js
index c05e205de..18a3bc7d3 100644
--- a/src/components/pages/sectionPage.js
+++ b/src/components/pages/sectionPage.js
@@ -3,7 +3,7 @@
 function sectionManagerPage(subwayDatas) {
   let lines = ``;
 
-  console.log(subwayDatas);
+  // console.log("sectionn", subwayDatas);
   subwayDatas.lines &&
     subwayDatas.lines.map(
       (line) =>
@@ -12,8 +12,6 @@ function sectionManagerPage(subwayDatas) {
           </button> `)
     );
 
-  let targetLine = subwayDatas.targetLine;
-
   let sectionManager = `
   <h4>구간을 수정할 노선을 선택해주세요.</h4>
   <div>
@@ -22,13 +20,30 @@ function sectionManagerPage(subwayDatas) {
   `;
 
   if (subwayDatas.targetLine) {
+    let targetLine = subwayDatas.targetLine;
+
+    let options = subwayDatas.subwayStations.map((station) => `<option value = "${station.name}">${station.name}</option>`);
+
+    let table = ``;
+
+    subwayDatas.lines.map((line) => {
+      if (line.name === targetLine) {
+        line.stops.map((stop, idx) => {
+          table += `<tr>
+            <td>${idx}</td>
+            <td>${stop}</td>
+            <td><button class="section-delete-button">노선에서 제거</button></td>
+          </tr>`;
+        });
+      }
+    });
+
     sectionManager += `
     <div id = "selected-line-section-manager">
-    <h4>${targetLine} 관리</h4>
+    <h4 id = "target-line">${targetLine} 관리</h4>
     <h5>구간 등록<h5>
     <select id="section-station-selector">
-      <option value = "인천">인천</option>
-      <option value = "인천">회기</option>
+    ${options}
     </select>
     <input id = "section-order-input"></input>
     <button id = "section-add-button">등록</button>
@@ -43,11 +58,7 @@ function sectionManagerPage(subwayDatas) {
         </tr>
       </thead>
       <tbody>
-        <tr>
-          <td>0</td>
-          <td>인천</td>
-          <td><button class="section-delete-button">노선에서 제거</button></td>
-        </tr>
+        ${table}
       </tbody>
     </table>
     </div>`;
@@ -56,13 +67,4 @@ function sectionManagerPage(subwayDatas) {
   return sectionManager;
 }
 
-console.log(document.getElementById("selected-line-section-manager"));
-
-// function onLineSelectHandler() {
-//   let targetLine = event.target.innerText;
-//   console.log(targetLine);
-// }
-// let targetLine = onLineSelectHandler();
-// console.log(targetLine);
-
 export default sectionManagerPage;
diff --git a/src/library/handlers/sectionHandler.js b/src/library/handlers/sectionHandler.js
index 519b7a155..e7d710acf 100644
--- a/src/library/handlers/sectionHandler.js
+++ b/src/library/handlers/sectionHandler.js
@@ -4,10 +4,25 @@ import app from "../../components/app.js";
 function onSectionHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   render(app("section", subwayDatas));
-  //   console.log(document.getElementById("selected-line-section-manager"));
 
-  //   document.getElementById("selected-line-section-manager").style.visibility = "hidden";
+  updateEventToLineBtns();
+}
+
+function onLineSelectHandler() {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let targetLine = event.target.innerText;
+  //   console.log(targetLine);
+  subwayDatas.targetLine = ``;
+  subwayDatas.targetLine = targetLine;
+  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+  //   console.log(subwayDatas);
+  render(app("section", subwayDatas));
+
+  updateEventToLineBtns();
+  updateEventToSectionAddBtns();
+}
 
+function updateEventToLineBtns() {
   let lineBtns = document.getElementsByClassName(".section-line-menu-button");
 
   for (let i = 0; i < lineBtns.length; i++) {
@@ -16,17 +31,31 @@ function onSectionHandler() {
   }
 }
 
-function onLineSelectHandler() {
+function updateEventToSectionAddBtns() {
+  document.getElementById("section-add-button").addEventListener("click", onAddSectionHandler);
+}
+
+function onAddSectionHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let targetLine = event.target.innerText;
-  //   console.log(targetLine);
-  subwayDatas.targetLine = targetLine;
+  let station = document.getElementById("section-station-selector").value;
+  let order = document.getElementById("section-order-input").value;
+  let targetLine = subwayDatas.targetLine;
+
+  subwayDatas.lines.map((line, idx) => {
+    if (line.name === targetLine) {
+      console.log(subwayDatas.lines[idx].stops);
+      subwayDatas.lines[idx].stops.splice(order, 0, station);
+      console.log(subwayDatas.lines[idx].stops);
+    }
+  });
+  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
   render(app("section", subwayDatas));
-
-  //   document.getElementById("selected-line-section-manager").style.visibility = "visible";
-  //   document.getElementById("selected-line-section-manager").dataset.selectedButton = targetLine;
-
-  //   console.log(document.getElementById("selected-line-section-manager").dataset);
+  updateEventToSectionAddBtns();
+  updateEventToLineBtns();
 }
 
+// / 구간 등록
+// array.splice(3,0,"라")
+// array.splice("추가하기를 원하는 인덱스", 0, "추가하기를 원하는 이름")
+
 export { onSectionHandler };

From 9182a23f86862447766c5c67a2b66846c22765a6 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Mon, 14 Dec 2020 03:39:29 +0900
Subject: [PATCH 12/32] =?UTF-8?q?=EA=B5=AC=EA=B0=84=20=EC=A0=9C=EA=B1=B0?=
 =?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

---
 src/components/pages/sectionPage.js    |  4 +---
 src/library/handlers/sectionHandler.js | 30 +++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/sectionPage.js b/src/components/pages/sectionPage.js
index 18a3bc7d3..66ada8000 100644
--- a/src/components/pages/sectionPage.js
+++ b/src/components/pages/sectionPage.js
@@ -21,9 +21,7 @@ function sectionManagerPage(subwayDatas) {
 
   if (subwayDatas.targetLine) {
     let targetLine = subwayDatas.targetLine;
-
     let options = subwayDatas.subwayStations.map((station) => `<option value = "${station.name}">${station.name}</option>`);
-
     let table = ``;
 
     subwayDatas.lines.map((line) => {
@@ -32,7 +30,7 @@ function sectionManagerPage(subwayDatas) {
           table += `<tr>
             <td>${idx}</td>
             <td>${stop}</td>
-            <td><button class="section-delete-button">노선에서 제거</button></td>
+            <td><button class=".section-delete-button">노선에서 제거</button></td>
           </tr>`;
         });
       }
diff --git a/src/library/handlers/sectionHandler.js b/src/library/handlers/sectionHandler.js
index e7d710acf..3135c099e 100644
--- a/src/library/handlers/sectionHandler.js
+++ b/src/library/handlers/sectionHandler.js
@@ -3,6 +3,8 @@ import app from "../../components/app.js";
 
 function onSectionHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  console.log(subwayDatas);
+  subwayDatas.targetLine = ``;
   render(app("section", subwayDatas));
 
   updateEventToLineBtns();
@@ -12,12 +14,12 @@ function onLineSelectHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let targetLine = event.target.innerText;
   //   console.log(targetLine);
-  subwayDatas.targetLine = ``;
   subwayDatas.targetLine = targetLine;
   localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
   //   console.log(subwayDatas);
   render(app("section", subwayDatas));
 
+  updateDeleteToSectionDeleteBtns();
   updateEventToLineBtns();
   updateEventToSectionAddBtns();
 }
@@ -50,8 +52,34 @@ function onAddSectionHandler() {
   });
   localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
   render(app("section", subwayDatas));
+
+  updateEventToSectionAddBtns();
+  updateEventToLineBtns();
+}
+
+function updateDeleteToSectionDeleteBtns() {
+  let deleteBtns = document.getElementsByClassName(".section-delete-button");
+
+  for (let i = 0; i < deleteBtns.length; i++) {
+    deleteBtns[i].addEventListener("click", onSectionDeleteHandler);
+  }
+}
+function onSectionDeleteHandler() {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let deleteTargetIdx = event.target.parentNode.parentNode.childNodes[1].outerText;
+  //   let deleteTargetName = event.target.parentNode.parentNode.childNodes[3].outerText;
+  //   console.log(deleteTargetName);
+
+  subwayDatas.lines.map((line) => {
+    if (line.name === subwayDatas.targetLine) {
+      line.stops.splice(deleteTargetIdx, 1);
+      localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+    }
+  });
+  render(app("section", subwayDatas));
   updateEventToSectionAddBtns();
   updateEventToLineBtns();
+  updateDeleteToSectionDeleteBtns();
 }
 
 // / 구간 등록

From ad082c9c11c2b70b4e85fc3c64cbe3b1ce0a4d0f Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Mon, 14 Dec 2020 05:12:54 +0900
Subject: [PATCH 13/32] =?UTF-8?q?=EB=85=B8=EC=84=A0=EB=8F=84=20=EC=B6=9C?=
 =?UTF-8?q?=EB=A0=A5=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |  2 +-
 src/components/pages/mapPrintPage.js    | 29 ++++++++++-
 src/library/handlers/mapPrintHandler.js |  9 ++++
 src/library/handlers/sectionHandler.js  | 68 ++++++++++++++++---------
 src/main.js                             |  5 +-
 5 files changed, 81 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index f00f08fa5..e63412e94 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@
 - 구간 등록 구현
 - 구간 제거 구현
 - 노선도 출력 페이지 UI 구현
-  - 호선별 역 리스트 ul
+- 예외 상황 체크
 
 ## 🤦🏻‍♀️ 고민한 지점
 
diff --git a/src/components/pages/mapPrintPage.js b/src/components/pages/mapPrintPage.js
index adeaaca05..7aa2d739b 100644
--- a/src/components/pages/mapPrintPage.js
+++ b/src/components/pages/mapPrintPage.js
@@ -1,5 +1,30 @@
-function mapPrintManagerPage() {
-  return `mapPrintManagerPage`;
+function mapPrintManagerPage(subwayDatas) {
+  // let ul = ``;
+
+  // subwayDatas.lines.map((line) => {
+  //   ul += `<ul>${line.name}`;
+
+  //   line.stops.map((stop) => {
+  //     ul += `<li>${stop}</li>`;
+  //   });
+
+  //   ul += "</ul>";
+  // });
+
+  // let mapPrintManager = `<div> ${ul} </div>`;
+
+  // return mapPrintManager;
+
+  let Map = ``;
+
+  subwayDatas.lines.map((line) => {
+    let insideOfUl = ``;
+    line.stops.map((stop) => {
+      insideOfUl += `<li style="padding-left: 20px">${stop}</li>`;
+    });
+    Map += `<ul style="list-style-position: inside">${line.name}${insideOfUl}</ul>`;
+  });
+  return Map;
 }
 
 export default mapPrintManagerPage;
diff --git a/src/library/handlers/mapPrintHandler.js b/src/library/handlers/mapPrintHandler.js
index e69de29bb..fb2304d5c 100644
--- a/src/library/handlers/mapPrintHandler.js
+++ b/src/library/handlers/mapPrintHandler.js
@@ -0,0 +1,9 @@
+import render from "../../components/render.js";
+import app from "../../components/app.js";
+
+function onMapPrintHandler() {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  render(app("map", subwayDatas));
+}
+
+export { onMapPrintHandler };
diff --git a/src/library/handlers/sectionHandler.js b/src/library/handlers/sectionHandler.js
index 3135c099e..df31fb12e 100644
--- a/src/library/handlers/sectionHandler.js
+++ b/src/library/handlers/sectionHandler.js
@@ -24,64 +24,82 @@ function onLineSelectHandler() {
   updateEventToSectionAddBtns();
 }
 
-function updateEventToLineBtns() {
-  let lineBtns = document.getElementsByClassName(".section-line-menu-button");
-
-  for (let i = 0; i < lineBtns.length; i++) {
-    let eachBtn = lineBtns[i];
-    eachBtn.addEventListener("click", onLineSelectHandler);
-  }
-}
-
-function updateEventToSectionAddBtns() {
-  document.getElementById("section-add-button").addEventListener("click", onAddSectionHandler);
-}
-
 function onAddSectionHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let station = document.getElementById("section-station-selector").value;
   let order = document.getElementById("section-order-input").value;
   let targetLine = subwayDatas.targetLine;
 
+  //subwayDatas.lines에 원하는 인덱스에 해당 역 넣어주기
   subwayDatas.lines.map((line, idx) => {
     if (line.name === targetLine) {
-      console.log(subwayDatas.lines[idx].stops);
       subwayDatas.lines[idx].stops.splice(order, 0, station);
-      console.log(subwayDatas.lines[idx].stops);
     }
   });
+  //subwayDatas.stations 해당 역의 line 정보에 해당 노선 넣어주기
+  subwayDatas.subwayStations.forEach((addedStation, idx) => {
+    if (station === addedStation.name) {
+      subwayDatas.subwayStations[idx].line.push(subwayDatas.targetLine);
+    }
+  });
+  console.log(subwayDatas);
+
   localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-  render(app("section", subwayDatas));
 
+  render(app("section", subwayDatas));
   updateEventToSectionAddBtns();
   updateEventToLineBtns();
 }
 
-function updateDeleteToSectionDeleteBtns() {
-  let deleteBtns = document.getElementsByClassName(".section-delete-button");
-
-  for (let i = 0; i < deleteBtns.length; i++) {
-    deleteBtns[i].addEventListener("click", onSectionDeleteHandler);
-  }
-}
 function onSectionDeleteHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let deleteTargetIdx = event.target.parentNode.parentNode.childNodes[1].outerText;
-  //   let deleteTargetName = event.target.parentNode.parentNode.childNodes[3].outerText;
+  let deleteTargetName = event.target.parentNode.parentNode.childNodes[3].outerText;
+  let targetLine = subwayDatas.targetLine;
   //   console.log(deleteTargetName);
 
+  //lines에서 삭제하고
   subwayDatas.lines.map((line) => {
     if (line.name === subwayDatas.targetLine) {
       line.stops.splice(deleteTargetIdx, 1);
-      localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+      //   localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+    }
+  });
+  //station 정보의 line에서도 삭제하기
+  subwayDatas.subwayStations.map((station) => {
+    if (station.name === deleteTargetName) {
+      station.line.splice(subwayDatas.subwayStations.indexOf(targetLine), 1);
     }
   });
+  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+
   render(app("section", subwayDatas));
   updateEventToSectionAddBtns();
   updateEventToLineBtns();
   updateDeleteToSectionDeleteBtns();
 }
 
+function updateEventToLineBtns() {
+  let lineBtns = document.getElementsByClassName(".section-line-menu-button");
+
+  for (let i = 0; i < lineBtns.length; i++) {
+    let eachBtn = lineBtns[i];
+    eachBtn.addEventListener("click", onLineSelectHandler);
+  }
+}
+
+function updateEventToSectionAddBtns() {
+  document.getElementById("section-add-button").addEventListener("click", onAddSectionHandler);
+}
+
+function updateDeleteToSectionDeleteBtns() {
+  let deleteBtns = document.getElementsByClassName(".section-delete-button");
+
+  for (let i = 0; i < deleteBtns.length; i++) {
+    deleteBtns[i].addEventListener("click", onSectionDeleteHandler);
+  }
+}
+
 // / 구간 등록
 // array.splice(3,0,"라")
 // array.splice("추가하기를 원하는 인덱스", 0, "추가하기를 원하는 이름")
diff --git a/src/main.js b/src/main.js
index 901798dae..60fd7bce9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import app from "./components/app.js";
 import { onStationHandler } from "./library/handlers/stationHandlers.js";
 import { onLineHandler } from "./library/handlers/lineHandlers.js";
 import { onSectionHandler } from "./library/handlers/sectionHandler.js";
+import { onMapPrintHandler } from "./library/handlers/mapPrintHandler.js";
 
 export default function main() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -26,7 +27,3 @@ function addEventToMainBtns() {
   document.getElementById("section-manager-button").addEventListener("click", onSectionHandler);
   document.getElementById("map-print-manager-button").addEventListener("click", onMapPrintHandler);
 }
-
-function onMapPrintHandler() {
-  render(app("map"));
-}

From 41d633b773da1e79e17fe2e8ce0bf247c9e3199f Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Mon, 14 Dec 2020 21:26:58 +0900
Subject: [PATCH 14/32] =?UTF-8?q?=EC=A4=91=EB=B3=B5=EB=90=9C=20=EC=97=AD?=
 =?UTF-8?q?=20=EC=9D=B4=EB=A6=84,=20=EA=B3=B5=EB=B0=B1=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EC=8B=9C=20alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               | 18 +++++++++++++++-
 src/library/handlers/stationHandlers.js | 25 ++++++++++++----------
 src/library/validation/alert.js         | 28 +++++++++++++++++++++++++
 src/library/validation/validation.js    | 14 +++++++++++++
 4 files changed, 73 insertions(+), 12 deletions(-)
 create mode 100644 src/library/validation/alert.js
 create mode 100644 src/library/validation/validation.js

diff --git a/README.md b/README.md
index e63412e94..ca747cfa6 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,23 @@
 - 구간 등록 구현
 - 구간 제거 구현
 - 노선도 출력 페이지 UI 구현
-- 예외 상황 체크
+- 예외 상황 검증
+  - 역 관리
+    - 중복된 역 이름 입력 시 alert
+    - 공백 입력 시 alert
+    - 2자 이하 입력 시 alert
+    - 노선에 등록된 역 삭제 시 alert
+    - 노선에 포함된 역이 2개 이하일 때 삭제 시 alert
+  - 노선 관리
+    - 중복된 노선 이름 입력 시 alert
+    - 공백 입력 시 alert
+    - 노선 삭제 시 confirm 후 삭제
+    - 상행 종점역과 하행 종점역이 중복되는 호선이 이미 존재하는 경우 alert
+    - 상행 종점역과 하행 종점역이 동일한 역인 경우 alert
+    - 갈래길 등록(같은 노선이면서 상행 종점역이나 하행 종점역이 같은 경우)시 alert
+  - 구간 관리
+    - 구간 등록 시 인덱스가 0이거나 가장 끝 인덱스인 경우 alert
+- css 검토
 
 ## 🤦🏻‍♀️ 고민한 지점
 
diff --git a/src/library/handlers/stationHandlers.js b/src/library/handlers/stationHandlers.js
index e91215644..6627c4074 100644
--- a/src/library/handlers/stationHandlers.js
+++ b/src/library/handlers/stationHandlers.js
@@ -1,5 +1,6 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
+import { validStationName } from "../validation/validation.js";
 
 function onStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -10,17 +11,19 @@ function onStationHandler() {
 
 function onAddStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let subwayStations = {
-    name: name,
-    line: [],
-  };
-
-  subwayStations.name = document.getElementById("station-add-input").value;
-  subwayDatas.subwayStations.push(subwayStations);
-
-  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-  render(app("station", subwayDatas));
-  subwayDatas && updateEvent();
+  let stationName = validStationName(document.getElementById("station-add-input").value);
+
+  if (stationName != "") {
+    let subwayStations = {
+      name: name,
+      line: [],
+    };
+    subwayStations.name = stationName;
+    subwayDatas.subwayStations.push(subwayStations);
+    localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+    render(app("station", subwayDatas));
+    subwayDatas && updateEvent();
+  }
 }
 
 function updateEvent() {
diff --git a/src/library/validation/alert.js b/src/library/validation/alert.js
new file mode 100644
index 000000000..07fbff67a
--- /dev/null
+++ b/src/library/validation/alert.js
@@ -0,0 +1,28 @@
+function stationNameAlert(inputValue) {
+  return ununiqueStationNameAlert(inputValue) || spaceAlert(inputValue);
+}
+
+//중복된 역 이름 검증
+function ununiqueStationNameAlert(inputValue) {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let alertMsg = "";
+
+  subwayDatas.subwayStations.map((station) => {
+    if (station.name === inputValue) {
+      alertMsg = "중복된 역 이름을 입력하셨습니다.";
+    }
+  });
+  return alertMsg;
+}
+
+//공백 입력 검증
+function spaceAlert(inputValue) {
+  let alertMsg = "";
+
+  if (inputValue === "") {
+    alertMsg = "공백을 입력하셨습니다.";
+  }
+  return alertMsg;
+}
+
+export { stationNameAlert };
diff --git a/src/library/validation/validation.js b/src/library/validation/validation.js
new file mode 100644
index 000000000..b614f9f76
--- /dev/null
+++ b/src/library/validation/validation.js
@@ -0,0 +1,14 @@
+import { stationNameAlert } from "./alert.js";
+
+function validStationName(inputValue) {
+  let alertMsg = stationNameAlert(inputValue);
+
+  if (alertMsg !== "") {
+    alert(alertMsg);
+    document.getElementById("station-add-input").focus();
+    return "";
+  }
+  return inputValue;
+}
+
+export { validStationName };

From 8ee2219ff84e5351fe62464fe7685aee58361e59 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Mon, 14 Dec 2020 21:35:24 +0900
Subject: [PATCH 15/32] =?UTF-8?q?=EC=97=AD=20=EC=9D=B4=EB=A6=84=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=202=EC=9E=90=20=EB=AF=B8=EB=A7=8C=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EC=8B=9C=20alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/library/validation/alert.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/library/validation/alert.js b/src/library/validation/alert.js
index 07fbff67a..864ec169d 100644
--- a/src/library/validation/alert.js
+++ b/src/library/validation/alert.js
@@ -1,5 +1,5 @@
 function stationNameAlert(inputValue) {
-  return ununiqueStationNameAlert(inputValue) || spaceAlert(inputValue);
+  return ununiqueStationNameAlert(inputValue) || spaceAlert(inputValue) || underTwoCharacterAlert(inputValue);
 }
 
 //중복된 역 이름 검증
@@ -25,4 +25,14 @@ function spaceAlert(inputValue) {
   return alertMsg;
 }
 
+//2자 미만 검증
+function underTwoCharacterAlert(inputValue) {
+  let alertMsg = "";
+
+  if (inputValue.length < 2) {
+    alertMsg = "2글자 이상으로 입력해주세요.";
+  }
+  return alertMsg;
+}
+
 export { stationNameAlert };

From 8708d1c5ea08888d8fce28d2d5e76651d1a73c02 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Mon, 14 Dec 2020 22:07:49 +0900
Subject: [PATCH 16/32] =?UTF-8?q?=EB=85=B8=EC=84=A0=EC=97=90=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=EB=90=9C=20=EC=97=AD=20=EC=82=AD=EC=A0=9C=20=EC=8B=9C?=
 =?UTF-8?q?=20alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |  2 +-
 src/library/handlers/stationHandlers.js | 27 +++++++++++++++----------
 src/library/validation/alert.js         | 20 +++++++++++++++++-
 src/library/validation/validation.js    | 14 +++++++++++--
 4 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index ca747cfa6..af6b227bf 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@
   - 역 관리
     - 중복된 역 이름 입력 시 alert
     - 공백 입력 시 alert
-    - 2자 이하 입력 시 alert
+    - 2자 미만 입력 시 alert
     - 노선에 등록된 역 삭제 시 alert
     - 노선에 포함된 역이 2개 이하일 때 삭제 시 alert
   - 노선 관리
diff --git a/src/library/handlers/stationHandlers.js b/src/library/handlers/stationHandlers.js
index 6627c4074..7bb03976b 100644
--- a/src/library/handlers/stationHandlers.js
+++ b/src/library/handlers/stationHandlers.js
@@ -1,6 +1,6 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
-import { validStationName } from "../validation/validation.js";
+import { validStationName, validStationDelete } from "../validation/validation.js";
 
 function onStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -37,16 +37,21 @@ function updateEvent() {
 
 function onDeleteStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let deleteTarget = event.target.parentNode.parentNode.childNodes[1].outerText;
-
-  subwayDatas.subwayStations.forEach((station, idx) => {
-    if (station.name === deleteTarget) {
-      subwayDatas.subwayStations.splice(idx, 1);
-      localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-      render(app("station", subwayDatas));
-      updateEvent();
-    }
-  });
+  // let deleteTarget = event.target.parentNode.parentNode.childNodes[1].outerText;
+
+  //삭제 전 검증 후 alert하거나,
+  //alert가 없으면 deleteTarget을 return하는 함수
+  let deleteTarget = validStationDelete(event.target.parentNode.parentNode.childNodes[1].outerText);
+
+  deleteTarget &&
+    subwayDatas.subwayStations.forEach((station, idx) => {
+      if (station.name === deleteTarget) {
+        subwayDatas.subwayStations.splice(idx, 1);
+        localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+        render(app("station", subwayDatas));
+        updateEvent();
+      }
+    });
 }
 
 export { onStationHandler };
diff --git a/src/library/validation/alert.js b/src/library/validation/alert.js
index 864ec169d..6ef96d037 100644
--- a/src/library/validation/alert.js
+++ b/src/library/validation/alert.js
@@ -35,4 +35,22 @@ function underTwoCharacterAlert(inputValue) {
   return alertMsg;
 }
 
-export { stationNameAlert };
+function stationDeleteAlert(deleteTarget) {
+  return inlineAlert(deleteTarget);
+  //노선에 등록된 역 삭제 시 alert
+  //노선에 포함된 역이 2개 이하일 때 삭제 시 alert
+}
+
+function inlineAlert(deleteTarget) {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let alertMsg = "";
+
+  subwayDatas.subwayStations.map((station, idx) => {
+    if (station.name === deleteTarget && subwayDatas.subwayStations[idx].line.length >= 1) {
+      alertMsg = "노선에 포함된 역은 삭제할 수 없습니다.";
+    }
+  });
+  return alertMsg;
+}
+
+export { stationNameAlert, stationDeleteAlert };
diff --git a/src/library/validation/validation.js b/src/library/validation/validation.js
index b614f9f76..9121b1866 100644
--- a/src/library/validation/validation.js
+++ b/src/library/validation/validation.js
@@ -1,4 +1,4 @@
-import { stationNameAlert } from "./alert.js";
+import { stationNameAlert, stationDeleteAlert } from "./alert.js";
 
 function validStationName(inputValue) {
   let alertMsg = stationNameAlert(inputValue);
@@ -11,4 +11,14 @@ function validStationName(inputValue) {
   return inputValue;
 }
 
-export { validStationName };
+function validStationDelete(deleteTarget) {
+  let alertMsg = stationDeleteAlert(deleteTarget);
+
+  if (alertMsg !== "") {
+    alert(alertMsg);
+    return "";
+  }
+  return deleteTarget;
+}
+
+export { validStationName, validStationDelete };

From f0b66ea83273c8a5ec53a9020ca353e46178c746 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Mon, 14 Dec 2020 23:21:37 +0900
Subject: [PATCH 17/32] =?UTF-8?q?=EC=A4=91=EB=B3=B5=EB=90=9C=20=EB=85=B8?=
 =?UTF-8?q?=EC=84=A0=20=20=EC=9D=B4=EB=A6=84,=20=EA=B3=B5=EB=B0=B1=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |  2 +-
 src/library/handlers/lineHandlers.js    | 55 ++++++++++++++-----------
 src/library/handlers/stationHandlers.js |  6 +--
 src/library/validation/alert.js         | 20 ++++++++-
 src/library/validation/validation.js    | 20 +++++++--
 5 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index af6b227bf..c3cb61609 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,6 @@
     - 공백 입력 시 alert
     - 2자 미만 입력 시 alert
     - 노선에 등록된 역 삭제 시 alert
-    - 노선에 포함된 역이 2개 이하일 때 삭제 시 alert
   - 노선 관리
     - 중복된 노선 이름 입력 시 alert
     - 공백 입력 시 alert
@@ -32,6 +31,7 @@
     - 상행 종점역과 하행 종점역이 동일한 역인 경우 alert
     - 갈래길 등록(같은 노선이면서 상행 종점역이나 하행 종점역이 같은 경우)시 alert
   - 구간 관리
+    - 노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert
     - 구간 등록 시 인덱스가 0이거나 가장 끝 인덱스인 경우 alert
 - css 검토
 
diff --git a/src/library/handlers/lineHandlers.js b/src/library/handlers/lineHandlers.js
index 60ccd7db7..9a729becd 100644
--- a/src/library/handlers/lineHandlers.js
+++ b/src/library/handlers/lineHandlers.js
@@ -1,5 +1,6 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
+import { validLineName } from "../validation/validation.js";
 
 function onLineHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -10,38 +11,42 @@ function onLineHandler() {
 
 function onAddLineHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let lineName = validLineName(document.getElementById("line-name-input").value);
 
-  let line = {
-    name: name,
-    stops: [],
-  };
+  if (lineName !== "") {
+    console.log(lineName);
+    let line = {
+      name: name,
+      stops: [],
+    };
 
-  line.name = document.getElementById("line-name-input").value;
-  line.stops.push(document.getElementById("line-start-station-selector").value);
-  line.stops.push(document.getElementById("line-end-station-selector").value);
+    line.name = lineName;
+    line.stops.push(document.getElementById("line-start-station-selector").value);
+    line.stops.push(document.getElementById("line-end-station-selector").value);
 
-  let startStop = line.stops[0];
-  let endStop = line.stops[line.stops.length - 1];
+    let startStop = line.stops[0];
+    let endStop = line.stops[line.stops.length - 1];
 
-  //상행선 역 정보에 노선 정보 추가
-  subwayDatas.subwayStations.forEach((station, idx) => {
-    if (startStop === station.name) {
-      subwayDatas.subwayStations[idx].line.push(line.name);
-    }
-  });
+    //상행선 역 정보에 노선 정보 추가
+    subwayDatas.subwayStations.forEach((station, idx) => {
+      if (startStop === station.name) {
+        subwayDatas.subwayStations[idx].line.push(line.name);
+      }
+    });
 
-  //하행선 역 정보에 노선 정보 추가
-  subwayDatas.subwayStations.forEach((station, idx) => {
-    if (endStop === station.name) {
-      subwayDatas.subwayStations[idx].line.push(line.name);
-    }
-  });
+    //하행선 역 정보에 노선 정보 추가
+    subwayDatas.subwayStations.forEach((station, idx) => {
+      if (endStop === station.name) {
+        subwayDatas.subwayStations[idx].line.push(line.name);
+      }
+    });
 
-  subwayDatas.lines.push(line);
-  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+    subwayDatas.lines.push(line);
+    localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
 
-  render(app("line", subwayDatas));
-  subwayDatas && updateEvent();
+    render(app("line", subwayDatas));
+    subwayDatas && updateEvent();
+  }
 }
 
 function updateEvent() {
diff --git a/src/library/handlers/stationHandlers.js b/src/library/handlers/stationHandlers.js
index 7bb03976b..11b8cbd4a 100644
--- a/src/library/handlers/stationHandlers.js
+++ b/src/library/handlers/stationHandlers.js
@@ -1,6 +1,6 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
-import { validStationName, validStationDelete } from "../validation/validation.js";
+import { validName, validStationDelete } from "../validation/validation.js";
 
 function onStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -11,9 +11,9 @@ function onStationHandler() {
 
 function onAddStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let stationName = validStationName(document.getElementById("station-add-input").value);
+  let stationName = validName(document.getElementById("station-add-input").value);
 
-  if (stationName != "") {
+  if (stationName !== "") {
     let subwayStations = {
       name: name,
       line: [],
diff --git a/src/library/validation/alert.js b/src/library/validation/alert.js
index 6ef96d037..3f91296f0 100644
--- a/src/library/validation/alert.js
+++ b/src/library/validation/alert.js
@@ -53,4 +53,22 @@ function inlineAlert(deleteTarget) {
   return alertMsg;
 }
 
-export { stationNameAlert, stationDeleteAlert };
+//라인 검증
+function lineNameAlert(inputValue) {
+  return ununiqueLineNameAlert(inputValue) || spaceAlert(inputValue);
+}
+
+//중복된 라인 이름 검증
+function ununiqueLineNameAlert(inputValue) {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let alertMsg = "";
+
+  subwayDatas.lines.map((line) => {
+    if (line.name === inputValue) {
+      alertMsg = "중복된 노선 이름을 입력하셨습니다.";
+    }
+  });
+  return alertMsg;
+}
+
+export { stationNameAlert, stationDeleteAlert, lineNameAlert };
diff --git a/src/library/validation/validation.js b/src/library/validation/validation.js
index 9121b1866..8d9314744 100644
--- a/src/library/validation/validation.js
+++ b/src/library/validation/validation.js
@@ -1,6 +1,8 @@
-import { stationNameAlert, stationDeleteAlert } from "./alert.js";
+import { stationNameAlert, stationDeleteAlert, lineNameAlert } from "./alert.js";
 
-function validStationName(inputValue) {
+//만약 부른 곳이 station이면 station
+//부른 곳이 line이라면 line에 맞추어 변경?
+function validName(inputValue) {
   let alertMsg = stationNameAlert(inputValue);
 
   if (alertMsg !== "") {
@@ -11,6 +13,18 @@ function validStationName(inputValue) {
   return inputValue;
 }
 
+function validLineName(inputValue) {
+  let alertMsg = lineNameAlert(inputValue);
+
+  if (alertMsg !== "") {
+    alert(alertMsg);
+    document.getElementById("line-name-input").focus();
+    return "";
+  }
+  console.log(inputValue);
+  return inputValue;
+}
+
 function validStationDelete(deleteTarget) {
   let alertMsg = stationDeleteAlert(deleteTarget);
 
@@ -21,4 +35,4 @@ function validStationDelete(deleteTarget) {
   return deleteTarget;
 }
 
-export { validStationName, validStationDelete };
+export { validName, validStationDelete, validLineName };

From 75aec33951415ead895163d7267511d6c1539229 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Mon, 14 Dec 2020 23:36:56 +0900
Subject: [PATCH 18/32] =?UTF-8?q?=EB=85=B8=EC=84=A0=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EC=8B=9C=20confirm=20=ED=9B=84=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              |  2 +-
 src/library/handlers/sectionHandler.js | 43 ++++++++++++++------------
 src/library/validation/validation.js   |  7 ++++-
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index c3cb61609..37855f376 100644
--- a/README.md
+++ b/README.md
@@ -26,11 +26,11 @@
   - 노선 관리
     - 중복된 노선 이름 입력 시 alert
     - 공백 입력 시 alert
-    - 노선 삭제 시 confirm 후 삭제
     - 상행 종점역과 하행 종점역이 중복되는 호선이 이미 존재하는 경우 alert
     - 상행 종점역과 하행 종점역이 동일한 역인 경우 alert
     - 갈래길 등록(같은 노선이면서 상행 종점역이나 하행 종점역이 같은 경우)시 alert
   - 구간 관리
+    - 구간 삭제 시 confirm 후 삭제
     - 노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert
     - 구간 등록 시 인덱스가 0이거나 가장 끝 인덱스인 경우 alert
 - css 검토
diff --git a/src/library/handlers/sectionHandler.js b/src/library/handlers/sectionHandler.js
index df31fb12e..26c8c4402 100644
--- a/src/library/handlers/sectionHandler.js
+++ b/src/library/handlers/sectionHandler.js
@@ -1,5 +1,6 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
+import { confirmSectionDelete } from "../validation/validation.js";
 
 function onSectionHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -58,25 +59,29 @@ function onSectionDeleteHandler() {
   let targetLine = subwayDatas.targetLine;
   //   console.log(deleteTargetName);
 
-  //lines에서 삭제하고
-  subwayDatas.lines.map((line) => {
-    if (line.name === subwayDatas.targetLine) {
-      line.stops.splice(deleteTargetIdx, 1);
-      //   localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-    }
-  });
-  //station 정보의 line에서도 삭제하기
-  subwayDatas.subwayStations.map((station) => {
-    if (station.name === deleteTargetName) {
-      station.line.splice(subwayDatas.subwayStations.indexOf(targetLine), 1);
-    }
-  });
-  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-
-  render(app("section", subwayDatas));
-  updateEventToSectionAddBtns();
-  updateEventToLineBtns();
-  updateDeleteToSectionDeleteBtns();
+  let deleteConfirmed = confirmSectionDelete();
+
+  if (deleteConfirmed === true) {
+    //lines에서 삭제하고
+    subwayDatas.lines.map((line) => {
+      if (line.name === subwayDatas.targetLine) {
+        line.stops.splice(deleteTargetIdx, 1);
+        //   localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+      }
+    });
+    //station 정보의 line에서도 삭제하기
+    subwayDatas.subwayStations.map((station) => {
+      if (station.name === deleteTargetName) {
+        station.line.splice(subwayDatas.subwayStations.indexOf(targetLine), 1);
+      }
+    });
+    localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+
+    render(app("section", subwayDatas));
+    updateEventToSectionAddBtns();
+    updateEventToLineBtns();
+    updateDeleteToSectionDeleteBtns();
+  }
 }
 
 function updateEventToLineBtns() {
diff --git a/src/library/validation/validation.js b/src/library/validation/validation.js
index 8d9314744..ffb749df4 100644
--- a/src/library/validation/validation.js
+++ b/src/library/validation/validation.js
@@ -35,4 +35,9 @@ function validStationDelete(deleteTarget) {
   return deleteTarget;
 }
 
-export { validName, validStationDelete, validLineName };
+function confirmSectionDelete() {
+  let answer = confirm("정말로 노선에서 제거하겠습니까?");
+  return answer;
+}
+
+export { validName, validStationDelete, validLineName, confirmSectionDelete };

From 17b0a141304a4d897ca87d6d5f6e14e2d2439c2d Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Mon, 14 Dec 2020 23:58:52 +0900
Subject: [PATCH 19/32] =?UTF-8?q?=EC=A4=91=EB=B3=B5=EB=90=98=EB=8A=94=20?=
 =?UTF-8?q?=EC=97=AD=20=EC=9D=B4=EB=A6=84,=20=EB=85=B8=EC=84=A0=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EA=B2=80=EC=A6=9D=20=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=ED=86=B5=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               | 15 +++++----
 src/library/handlers/lineHandlers.js    |  4 +--
 src/library/handlers/stationHandlers.js |  4 +--
 src/library/validation/validation.js    | 45 +++++++++++++++----------
 4 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index 37855f376..397ee26d2 100644
--- a/README.md
+++ b/README.md
@@ -19,20 +19,21 @@
 - 노선도 출력 페이지 UI 구현
 - 예외 상황 검증
   - 역 관리
-    - 중복된 역 이름 입력 시 alert
-    - 공백 입력 시 alert
-    - 2자 미만 입력 시 alert
-    - 노선에 등록된 역 삭제 시 alert
+    - 중복된 역 이름 입력 시 alert v
+    - 공백 입력 시 alert v
+    - 2자 미만 입력 시 alert v
+    - 노선에 등록된 역 삭제 시 alert v
   - 노선 관리
-    - 중복된 노선 이름 입력 시 alert
-    - 공백 입력 시 alert
+    - 중복된 노선 이름 입력 시 alert v
+    - 공백 입력 시 alert v
     - 상행 종점역과 하행 종점역이 중복되는 호선이 이미 존재하는 경우 alert
     - 상행 종점역과 하행 종점역이 동일한 역인 경우 alert
     - 갈래길 등록(같은 노선이면서 상행 종점역이나 하행 종점역이 같은 경우)시 alert
   - 구간 관리
-    - 구간 삭제 시 confirm 후 삭제
+    - 노선에서 제거 시 confirm 후 삭제 v
     - 노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert
     - 구간 등록 시 인덱스가 0이거나 가장 끝 인덱스인 경우 alert
+  - 중복되는 역 이름, 노선 이름 검증 함수 통합 v
 - css 검토
 
 ## 🤦🏻‍♀️ 고민한 지점
diff --git a/src/library/handlers/lineHandlers.js b/src/library/handlers/lineHandlers.js
index 9a729becd..cd30454ba 100644
--- a/src/library/handlers/lineHandlers.js
+++ b/src/library/handlers/lineHandlers.js
@@ -1,6 +1,6 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
-import { validLineName } from "../validation/validation.js";
+import { validateInput } from "../validation/validation.js";
 
 function onLineHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -11,7 +11,7 @@ function onLineHandler() {
 
 function onAddLineHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let lineName = validLineName(document.getElementById("line-name-input").value);
+  let lineName = validateInput(document.getElementById("line-name-input").value, "line-name-input");
 
   if (lineName !== "") {
     console.log(lineName);
diff --git a/src/library/handlers/stationHandlers.js b/src/library/handlers/stationHandlers.js
index 11b8cbd4a..186c9716e 100644
--- a/src/library/handlers/stationHandlers.js
+++ b/src/library/handlers/stationHandlers.js
@@ -1,6 +1,6 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
-import { validName, validStationDelete } from "../validation/validation.js";
+import { validateInput, validStationDelete } from "../validation/validation.js";
 
 function onStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -11,7 +11,7 @@ function onStationHandler() {
 
 function onAddStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let stationName = validName(document.getElementById("station-add-input").value);
+  let stationName = validateInput(document.getElementById("station-add-input").value, "station-add-input");
 
   if (stationName !== "") {
     let subwayStations = {
diff --git a/src/library/validation/validation.js b/src/library/validation/validation.js
index ffb749df4..e05212a6a 100644
--- a/src/library/validation/validation.js
+++ b/src/library/validation/validation.js
@@ -2,28 +2,39 @@ import { stationNameAlert, stationDeleteAlert, lineNameAlert } from "./alert.js"
 
 //만약 부른 곳이 station이면 station
 //부른 곳이 line이라면 line에 맞추어 변경?
-function validName(inputValue) {
-  let alertMsg = stationNameAlert(inputValue);
 
-  if (alertMsg !== "") {
+function validateInput(input, inputTagID) {
+  let alertMsg = "";
+  inputTagID === "station-add-input" ? (alertMsg = stationNameAlert(input)) : (alertMsg = lineNameAlert(input));
+  if (alertMsg) {
     alert(alertMsg);
-    document.getElementById("station-add-input").focus();
+    document.getElementById(inputTagID).focus();
     return "";
   }
-  return inputValue;
+  return input;
 }
 
-function validLineName(inputValue) {
-  let alertMsg = lineNameAlert(inputValue);
-
-  if (alertMsg !== "") {
-    alert(alertMsg);
-    document.getElementById("line-name-input").focus();
-    return "";
-  }
-  console.log(inputValue);
-  return inputValue;
-}
+// function validName(inputValue) {
+//   let alertMsg = stationNameAlert(inputValue);
+//   if (alertMsg !== "") {
+//     alert(alertMsg);
+//     document.getElementById("station-add-input").focus();
+//     return "";
+//   }
+//   return inputValue;
+// }
+
+// function validLineName(inputValue) {
+//   let alertMsg = lineNameAlert(inputValue);
+
+//   if (alertMsg !== "") {
+//     alert(alertMsg);
+//     document.getElementById("line-name-input").focus();
+//     return "";
+//   }
+//   console.log(inputValue);
+//   return inputValue;
+// }
 
 function validStationDelete(deleteTarget) {
   let alertMsg = stationDeleteAlert(deleteTarget);
@@ -40,4 +51,4 @@ function confirmSectionDelete() {
   return answer;
 }
 
-export { validName, validStationDelete, validLineName, confirmSectionDelete };
+export { validateInput, validStationDelete, confirmSectionDelete };

From 37f676e0a5f39fd1fe1513b0fced8047e1e94623 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 00:50:03 +0900
Subject: [PATCH 20/32] =?UTF-8?q?=EC=83=81=ED=96=89=20=EC=A2=85=EC=A0=90?=
 =?UTF-8?q?=EC=97=AD=EA=B3=BC=20=ED=95=98=ED=96=89=20=EC=A2=85=EC=A0=90?=
 =?UTF-8?q?=EC=97=AD=EC=9D=B4=20=EC=A4=91=EB=B3=B5=EB=90=98=EB=8A=94=20?=
 =?UTF-8?q?=EB=85=B8=EC=84=A0=EC=9D=B4=20=EC=9D=B4=EB=AF=B8=20=EC=A1=B4?=
 =?UTF-8?q?=EC=9E=AC=ED=95=98=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |  2 +-
 src/library/handlers/lineHandlers.js    | 51 ++++++++++++++-----------
 src/library/handlers/stationHandlers.js |  4 +-
 src/library/validation/alert.js         | 40 +++++++++++++++++--
 src/library/validation/validation.js    | 19 ++++++---
 5 files changed, 81 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index 397ee26d2..c040a4ee2 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@
   - 노선 관리
     - 중복된 노선 이름 입력 시 alert v
     - 공백 입력 시 alert v
-    - 상행 종점역과 하행 종점역이 중복되는 호선이 이미 존재하는 경우 alert
+    - 상행 종점역과 하행 종점역이 중복되는 노선이 이미 존재하는 경우 alert v
     - 상행 종점역과 하행 종점역이 동일한 역인 경우 alert
     - 갈래길 등록(같은 노선이면서 상행 종점역이나 하행 종점역이 같은 경우)시 alert
   - 구간 관리
diff --git a/src/library/handlers/lineHandlers.js b/src/library/handlers/lineHandlers.js
index cd30454ba..d1f76d11c 100644
--- a/src/library/handlers/lineHandlers.js
+++ b/src/library/handlers/lineHandlers.js
@@ -1,6 +1,6 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
-import { validateInput } from "../validation/validation.js";
+import { validateInput, validateStartAndEndStations } from "../validation/validation.js";
 
 function onLineHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -14,38 +14,45 @@ function onAddLineHandler() {
   let lineName = validateInput(document.getElementById("line-name-input").value, "line-name-input");
 
   if (lineName !== "") {
-    console.log(lineName);
+    // console.log(lineName);
     let line = {
       name: name,
       stops: [],
     };
 
     line.name = lineName;
-    line.stops.push(document.getElementById("line-start-station-selector").value);
-    line.stops.push(document.getElementById("line-end-station-selector").value);
+    let startAndEndStations = [];
+    startAndEndStations.push(document.getElementById("line-start-station-selector").value, document.getElementById("line-end-station-selector").value);
+    let validatedStartAndEndStations = validateStartAndEndStations(startAndEndStations);
 
-    let startStop = line.stops[0];
-    let endStop = line.stops[line.stops.length - 1];
+    if (validatedStartAndEndStations !== "") {
+      console.log(validatedStartAndEndStations);
+      line.stops.push(validatedStartAndEndStations[0]);
+      line.stops.push(validatedStartAndEndStations[0]);
 
-    //상행선 역 정보에 노선 정보 추가
-    subwayDatas.subwayStations.forEach((station, idx) => {
-      if (startStop === station.name) {
-        subwayDatas.subwayStations[idx].line.push(line.name);
-      }
-    });
+      let startStop = line.stops[0];
+      let endStop = line.stops[line.stops.length - 1];
 
-    //하행선 역 정보에 노선 정보 추가
-    subwayDatas.subwayStations.forEach((station, idx) => {
-      if (endStop === station.name) {
-        subwayDatas.subwayStations[idx].line.push(line.name);
-      }
-    });
+      //상행선 역 정보에 노선 정보 추가
+      subwayDatas.subwayStations.forEach((station, idx) => {
+        if (startStop === station.name) {
+          subwayDatas.subwayStations[idx].line.push(line.name);
+        }
+      });
 
-    subwayDatas.lines.push(line);
-    localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+      //하행선 역 정보에 노선 정보 추가
+      subwayDatas.subwayStations.forEach((station, idx) => {
+        if (endStop === station.name) {
+          subwayDatas.subwayStations[idx].line.push(line.name);
+        }
+      });
 
-    render(app("line", subwayDatas));
-    subwayDatas && updateEvent();
+      subwayDatas.lines.push(line);
+      localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+
+      render(app("line", subwayDatas));
+      subwayDatas && updateEvent();
+    }
   }
 }
 
diff --git a/src/library/handlers/stationHandlers.js b/src/library/handlers/stationHandlers.js
index 186c9716e..39142f940 100644
--- a/src/library/handlers/stationHandlers.js
+++ b/src/library/handlers/stationHandlers.js
@@ -1,6 +1,6 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
-import { validateInput, validStationDelete } from "../validation/validation.js";
+import { validateInput, validateStationDelete } from "../validation/validation.js";
 
 function onStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -41,7 +41,7 @@ function onDeleteStationHandler() {
 
   //삭제 전 검증 후 alert하거나,
   //alert가 없으면 deleteTarget을 return하는 함수
-  let deleteTarget = validStationDelete(event.target.parentNode.parentNode.childNodes[1].outerText);
+  let deleteTarget = validateStationDelete(event.target.parentNode.parentNode.childNodes[1].outerText);
 
   deleteTarget &&
     subwayDatas.subwayStations.forEach((station, idx) => {
diff --git a/src/library/validation/alert.js b/src/library/validation/alert.js
index 3f91296f0..919c5d1f1 100644
--- a/src/library/validation/alert.js
+++ b/src/library/validation/alert.js
@@ -1,3 +1,4 @@
+//역 검증 (중복, 공백, 2자 미만)
 function stationNameAlert(inputValue) {
   return ununiqueStationNameAlert(inputValue) || spaceAlert(inputValue) || underTwoCharacterAlert(inputValue);
 }
@@ -35,12 +36,12 @@ function underTwoCharacterAlert(inputValue) {
   return alertMsg;
 }
 
+//노선에 등록된 역 삭제 전 검증
 function stationDeleteAlert(deleteTarget) {
   return inlineAlert(deleteTarget);
-  //노선에 등록된 역 삭제 시 alert
-  //노선에 포함된 역이 2개 이하일 때 삭제 시 alert
 }
 
+//노선에 포함된 역이 2개 이하일 때 삭제 시 alert
 function inlineAlert(deleteTarget) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
@@ -53,7 +54,7 @@ function inlineAlert(deleteTarget) {
   return alertMsg;
 }
 
-//라인 검증
+//라인 검증 (중복)
 function lineNameAlert(inputValue) {
   return ununiqueLineNameAlert(inputValue) || spaceAlert(inputValue);
 }
@@ -71,4 +72,35 @@ function ununiqueLineNameAlert(inputValue) {
   return alertMsg;
 }
 
-export { stationNameAlert, stationDeleteAlert, lineNameAlert };
+//상행종점, 하행종점역 검증
+function startAndEndStationAlert(startAndEndStations) {
+  return unUniqueLineAlert(startAndEndStations);
+  // sameStartAndEndStationAlert()
+  // divergentPathAlert()
+}
+
+//상행 종점역과 하행 종점역이 중복되는 호선이 이미 존재하는 경우
+function unUniqueLineAlert(startAndEndStations) {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+
+  let alertMsg = "";
+
+  subwayDatas.lines.map((line, idx) => {
+    if (line.stops[0] === startAndEndStations[0] && line.stops[line.stops.length - 1] === startAndEndStations[1]) {
+      alertMsg = "상행, 하행 종점역이 중복되는 노선이 이미 존재합니다.";
+    }
+  });
+  return alertMsg;
+  // let alertMsg = "";
+}
+
+//상행 종점역과 하행 종점역이 동일한 역인 경우 alert
+// function sameStartAndEndStationAlert() {
+
+// }
+
+//갈래길 등록(같은 노선이면서 상행 종점역이나 하행 종점역이 같은 경우)시 alert
+// function divergentPathAlert() {
+
+// }
+export { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert };
diff --git a/src/library/validation/validation.js b/src/library/validation/validation.js
index e05212a6a..3e043b546 100644
--- a/src/library/validation/validation.js
+++ b/src/library/validation/validation.js
@@ -1,7 +1,4 @@
-import { stationNameAlert, stationDeleteAlert, lineNameAlert } from "./alert.js";
-
-//만약 부른 곳이 station이면 station
-//부른 곳이 line이라면 line에 맞추어 변경?
+import { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert } from "./alert.js";
 
 function validateInput(input, inputTagID) {
   let alertMsg = "";
@@ -36,7 +33,7 @@ function validateInput(input, inputTagID) {
 //   return inputValue;
 // }
 
-function validStationDelete(deleteTarget) {
+function validateStationDelete(deleteTarget) {
   let alertMsg = stationDeleteAlert(deleteTarget);
 
   if (alertMsg !== "") {
@@ -51,4 +48,14 @@ function confirmSectionDelete() {
   return answer;
 }
 
-export { validateInput, validStationDelete, confirmSectionDelete };
+function validateStartAndEndStations(startAndEndStations) {
+  let alertMsg = startAndEndStationAlert(startAndEndStations);
+
+  if (alertMsg !== "") {
+    alert(alertMsg);
+    return "";
+  }
+  return startAndEndStations;
+}
+
+export { validateInput, validateStationDelete, confirmSectionDelete, validateStartAndEndStations };

From 6fdfd5a6b3c4a1dd60a60ee6677629d9bdf8bb43 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 01:25:48 +0900
Subject: [PATCH 21/32] =?UTF-8?q?=EC=83=81=ED=96=89=20=EC=A2=85=EC=A0=90?=
 =?UTF-8?q?=EC=97=AD=EA=B3=BC=20=ED=95=98=ED=96=89=20=EC=A2=85=EC=A0=90?=
 =?UTF-8?q?=EC=97=AD=EC=9D=B4=20=EB=8F=99=EC=9D=BC=ED=95=9C=20=EC=97=AD?=
 =?UTF-8?q?=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                            |  3 +--
 src/library/handlers/lineHandlers.js |  1 -
 src/library/validation/alert.js      | 20 +++++++++-----------
 src/library/validation/validation.js | 22 ----------------------
 4 files changed, 10 insertions(+), 36 deletions(-)

diff --git a/README.md b/README.md
index c040a4ee2..c3f4b85f5 100644
--- a/README.md
+++ b/README.md
@@ -27,8 +27,7 @@
     - 중복된 노선 이름 입력 시 alert v
     - 공백 입력 시 alert v
     - 상행 종점역과 하행 종점역이 중복되는 노선이 이미 존재하는 경우 alert v
-    - 상행 종점역과 하행 종점역이 동일한 역인 경우 alert
-    - 갈래길 등록(같은 노선이면서 상행 종점역이나 하행 종점역이 같은 경우)시 alert
+    - 상행 종점역과 하행 종점역이 동일한 역인 경우 alert v
   - 구간 관리
     - 노선에서 제거 시 confirm 후 삭제 v
     - 노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert
diff --git a/src/library/handlers/lineHandlers.js b/src/library/handlers/lineHandlers.js
index d1f76d11c..1e006a4b7 100644
--- a/src/library/handlers/lineHandlers.js
+++ b/src/library/handlers/lineHandlers.js
@@ -14,7 +14,6 @@ function onAddLineHandler() {
   let lineName = validateInput(document.getElementById("line-name-input").value, "line-name-input");
 
   if (lineName !== "") {
-    // console.log(lineName);
     let line = {
       name: name,
       stops: [],
diff --git a/src/library/validation/alert.js b/src/library/validation/alert.js
index 919c5d1f1..4c1bd9e08 100644
--- a/src/library/validation/alert.js
+++ b/src/library/validation/alert.js
@@ -74,9 +74,7 @@ function ununiqueLineNameAlert(inputValue) {
 
 //상행종점, 하행종점역 검증
 function startAndEndStationAlert(startAndEndStations) {
-  return unUniqueLineAlert(startAndEndStations);
-  // sameStartAndEndStationAlert()
-  // divergentPathAlert()
+  return unUniqueLineAlert(startAndEndStations) || sameStartAndEndStationAlert(startAndEndStations);
 }
 
 //상행 종점역과 하행 종점역이 중복되는 호선이 이미 존재하는 경우
@@ -91,16 +89,16 @@ function unUniqueLineAlert(startAndEndStations) {
     }
   });
   return alertMsg;
-  // let alertMsg = "";
 }
 
-//상행 종점역과 하행 종점역이 동일한 역인 경우 alert
-// function sameStartAndEndStationAlert() {
-
-// }
+// 상행 종점역과 하행 종점역이 동일한 역인 경우 alert
+function sameStartAndEndStationAlert(startAndEndStations) {
+  let alertMsg = "";
 
-//갈래길 등록(같은 노선이면서 상행 종점역이나 하행 종점역이 같은 경우)시 alert
-// function divergentPathAlert() {
+  if (startAndEndStations[0] === startAndEndStations[1]) {
+    alertMsg = "상행 종점과 하행 종점으로 동일한 역을 선택하셨습니다.";
+  }
+  return alertMsg;
+}
 
-// }
 export { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert };
diff --git a/src/library/validation/validation.js b/src/library/validation/validation.js
index 3e043b546..8913d2755 100644
--- a/src/library/validation/validation.js
+++ b/src/library/validation/validation.js
@@ -11,28 +11,6 @@ function validateInput(input, inputTagID) {
   return input;
 }
 
-// function validName(inputValue) {
-//   let alertMsg = stationNameAlert(inputValue);
-//   if (alertMsg !== "") {
-//     alert(alertMsg);
-//     document.getElementById("station-add-input").focus();
-//     return "";
-//   }
-//   return inputValue;
-// }
-
-// function validLineName(inputValue) {
-//   let alertMsg = lineNameAlert(inputValue);
-
-//   if (alertMsg !== "") {
-//     alert(alertMsg);
-//     document.getElementById("line-name-input").focus();
-//     return "";
-//   }
-//   console.log(inputValue);
-//   return inputValue;
-// }
-
 function validateStationDelete(deleteTarget) {
   let alertMsg = stationDeleteAlert(deleteTarget);
 

From 8b8bc1c3f3caa24646d6d78d82a6b2c427ff40a9 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 01:51:32 +0900
Subject: [PATCH 22/32] =?UTF-8?q?=EB=85=B8=EC=84=A0=EC=97=90=20=ED=8F=AC?=
 =?UTF-8?q?=ED=95=A8=EB=90=9C=20=EC=97=AD=EC=9D=B4=202=EA=B0=9C=20?=
 =?UTF-8?q?=EC=9D=B4=ED=95=98=EC=9D=BC=20=EB=95=8C=20=EB=85=B8=EC=84=A0?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=A0=9C=EA=B1=B0=20=EC=8B=9C=20alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              |  2 +-
 src/library/handlers/sectionHandler.js |  4 ++--
 src/library/validation/alert.js        | 15 ++++++++++++++-
 src/library/validation/validation.js   | 18 ++++++++++++++----
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index c3f4b85f5..533853d5a 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@
     - 상행 종점역과 하행 종점역이 동일한 역인 경우 alert v
   - 구간 관리
     - 노선에서 제거 시 confirm 후 삭제 v
-    - 노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert
+    - 노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert v
     - 구간 등록 시 인덱스가 0이거나 가장 끝 인덱스인 경우 alert
   - 중복되는 역 이름, 노선 이름 검증 함수 통합 v
 - css 검토
diff --git a/src/library/handlers/sectionHandler.js b/src/library/handlers/sectionHandler.js
index 26c8c4402..e2fe4c397 100644
--- a/src/library/handlers/sectionHandler.js
+++ b/src/library/handlers/sectionHandler.js
@@ -1,6 +1,6 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
-import { confirmSectionDelete } from "../validation/validation.js";
+import { validateSectionDelete } from "../validation/validation.js";
 
 function onSectionHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -59,7 +59,7 @@ function onSectionDeleteHandler() {
   let targetLine = subwayDatas.targetLine;
   //   console.log(deleteTargetName);
 
-  let deleteConfirmed = confirmSectionDelete();
+  let deleteConfirmed = validateSectionDelete(targetLine);
 
   if (deleteConfirmed === true) {
     //lines에서 삭제하고
diff --git a/src/library/validation/alert.js b/src/library/validation/alert.js
index 4c1bd9e08..caa8ea003 100644
--- a/src/library/validation/alert.js
+++ b/src/library/validation/alert.js
@@ -101,4 +101,17 @@ function sameStartAndEndStationAlert(startAndEndStations) {
   return alertMsg;
 }
 
-export { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert };
+//노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert
+function sectionDeleteAlert(targetLine) {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let alertMsg = "";
+
+  subwayDatas.lines.map((line) => {
+    if (line.name === targetLine && line.stops.length <= 2) {
+      alertMsg = "노선에 포함된 역이 2개 이하일 때에는 삭제할 수 없습니다.";
+    }
+  });
+  return alertMsg;
+}
+
+export { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert, sectionDeleteAlert };
diff --git a/src/library/validation/validation.js b/src/library/validation/validation.js
index 8913d2755..da7d0c7d4 100644
--- a/src/library/validation/validation.js
+++ b/src/library/validation/validation.js
@@ -1,4 +1,4 @@
-import { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert } from "./alert.js";
+import { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert, sectionDeleteAlert } from "./alert.js";
 
 function validateInput(input, inputTagID) {
   let alertMsg = "";
@@ -21,9 +21,19 @@ function validateStationDelete(deleteTarget) {
   return deleteTarget;
 }
 
+function validateSectionDelete(targetLine) {
+  let alertMsg = sectionDeleteAlert(targetLine);
+  //노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert
+
+  if (alertMsg !== "") {
+    alert(alertMsg);
+    return "";
+  }
+  return confirmSectionDelete();
+}
+
 function confirmSectionDelete() {
-  let answer = confirm("정말로 노선에서 제거하겠습니까?");
-  return answer;
+  return confirm("정말로 노선에서 제거하겠습니까?");
 }
 
 function validateStartAndEndStations(startAndEndStations) {
@@ -36,4 +46,4 @@ function validateStartAndEndStations(startAndEndStations) {
   return startAndEndStations;
 }
 
-export { validateInput, validateStationDelete, confirmSectionDelete, validateStartAndEndStations };
+export { validateInput, validateStationDelete, validateStartAndEndStations, validateSectionDelete };

From 3777e736f570e01de40d023613c3b2938cf87c99 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 02:35:53 +0900
Subject: [PATCH 23/32] =?UTF-8?q?=EA=B5=AC=EA=B0=84=20=EB=93=B1=EB=A1=9D?=
 =?UTF-8?q?=20=EC=8B=9C=20=EC=9D=B8=EB=8D=B1=EC=8A=A4=EA=B0=80=200?=
 =?UTF-8?q?=EC=9D=B4=EA=B1=B0=EB=82=98=20=EA=B0=80=EC=9E=A5=20=EB=81=9D=20?=
 =?UTF-8?q?=EC=9D=B8=EB=8D=B1=EC=8A=A4=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20ale?=
 =?UTF-8?q?rt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              |  4 ++-
 src/library/handlers/sectionHandler.js | 44 ++++++++++++++------------
 src/library/validation/alert.js        | 17 +++++++++-
 src/library/validation/validation.js   | 14 ++++++--
 4 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 533853d5a..024a83889 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,9 @@
   - 구간 관리
     - 노선에서 제거 시 confirm 후 삭제 v
     - 노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert v
-    - 구간 등록 시 인덱스가 0이거나 가장 끝 인덱스인 경우 alert
+    - 구간 등록 시 인덱스가 0이거나 가장 끝 인덱스인 경우 alert v
+    - 순서에 숫자가 아닌 값 입력 시 alert
+    - 노선에 이미 존재하는 구간 이름 등록 시 alert
   - 중복되는 역 이름, 노선 이름 검증 함수 통합 v
 - css 검토
 
diff --git a/src/library/handlers/sectionHandler.js b/src/library/handlers/sectionHandler.js
index e2fe4c397..c7e1783cf 100644
--- a/src/library/handlers/sectionHandler.js
+++ b/src/library/handlers/sectionHandler.js
@@ -1,6 +1,6 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
-import { validateSectionDelete } from "../validation/validation.js";
+import { validateSectionDelete, validateOrder } from "../validation/validation.js";
 
 function onSectionHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -28,28 +28,32 @@ function onLineSelectHandler() {
 function onAddSectionHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let station = document.getElementById("section-station-selector").value;
-  let order = document.getElementById("section-order-input").value;
   let targetLine = subwayDatas.targetLine;
+  // 구간 등록 시 인덱스가 0이거나 가장 끝 인덱스인 경우 alert
+  let order = validateOrder(document.getElementById("section-order-input").value);
+  // let order = document.getElementById("section-order-input").value;
+
+  if (order) {
+    //subwayDatas.lines에 원하는 인덱스에 해당 역 넣어주기
+    subwayDatas.lines.map((line, idx) => {
+      if (line.name === targetLine) {
+        subwayDatas.lines[idx].stops.splice(order, 0, station);
+      }
+    });
+    //subwayDatas.stations 해당 역의 line 정보에 해당 노선 넣어주기
+    subwayDatas.subwayStations.forEach((addedStation, idx) => {
+      if (station === addedStation.name) {
+        subwayDatas.subwayStations[idx].line.push(subwayDatas.targetLine);
+      }
+    });
+    console.log(subwayDatas);
 
-  //subwayDatas.lines에 원하는 인덱스에 해당 역 넣어주기
-  subwayDatas.lines.map((line, idx) => {
-    if (line.name === targetLine) {
-      subwayDatas.lines[idx].stops.splice(order, 0, station);
-    }
-  });
-  //subwayDatas.stations 해당 역의 line 정보에 해당 노선 넣어주기
-  subwayDatas.subwayStations.forEach((addedStation, idx) => {
-    if (station === addedStation.name) {
-      subwayDatas.subwayStations[idx].line.push(subwayDatas.targetLine);
-    }
-  });
-  console.log(subwayDatas);
-
-  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+    localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
 
-  render(app("section", subwayDatas));
-  updateEventToSectionAddBtns();
-  updateEventToLineBtns();
+    render(app("section", subwayDatas));
+    updateEventToSectionAddBtns();
+    updateEventToLineBtns();
+  }
 }
 
 function onSectionDeleteHandler() {
diff --git a/src/library/validation/alert.js b/src/library/validation/alert.js
index caa8ea003..163784f6b 100644
--- a/src/library/validation/alert.js
+++ b/src/library/validation/alert.js
@@ -114,4 +114,19 @@ function sectionDeleteAlert(targetLine) {
   return alertMsg;
 }
 
-export { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert, sectionDeleteAlert };
+function orderAlert(order) {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let alertMsg = "";
+
+  subwayDatas.lines.map((line, idx) => {
+    if (line.name === subwayDatas.targetLine) {
+      console.log(order, subwayDatas.lines[idx].stops.length);
+      if (0 >= order || order >= subwayDatas.lines[idx].stops.length) {
+        alertMsg = "역과 역 사이에만 구간 등록이 가능합니다.";
+      }
+    }
+  });
+  return alertMsg;
+}
+
+export { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert, sectionDeleteAlert, orderAlert };
diff --git a/src/library/validation/validation.js b/src/library/validation/validation.js
index da7d0c7d4..298a1c7d2 100644
--- a/src/library/validation/validation.js
+++ b/src/library/validation/validation.js
@@ -1,4 +1,4 @@
-import { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert, sectionDeleteAlert } from "./alert.js";
+import { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert, sectionDeleteAlert, orderAlert } from "./alert.js";
 
 function validateInput(input, inputTagID) {
   let alertMsg = "";
@@ -46,4 +46,14 @@ function validateStartAndEndStations(startAndEndStations) {
   return startAndEndStations;
 }
 
-export { validateInput, validateStationDelete, validateStartAndEndStations, validateSectionDelete };
+function validateOrder(order) {
+  let alertMsg = orderAlert(order);
+
+  if (alertMsg !== "") {
+    alert(alertMsg);
+    return "";
+  }
+  return order;
+}
+
+export { validateInput, validateStationDelete, validateStartAndEndStations, validateSectionDelete, validateOrder };

From 21fdc01866e9c9bfdf56f99b286f48511cad31e5 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 02:48:47 +0900
Subject: [PATCH 24/32] =?UTF-8?q?=EC=88=9C=EC=84=9C=EC=97=90=20=EC=88=AB?=
 =?UTF-8?q?=EC=9E=90=EA=B0=80=20=EC=95=84=EB=8B=8C=20=EA=B0=92=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EB=B6=88=EA=B0=80=ED=95=98=EB=8F=84=EB=A1=9D=20typ?=
 =?UTF-8?q?e=3Dnumber=EB=A1=9C=20=EC=84=A4=EC=A0=95,=20=EC=9D=8C=EC=88=98?=
 =?UTF-8?q?=20=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                           | 3 ++-
 src/components/pages/sectionPage.js | 2 +-
 src/library/validation/alert.js     | 5 +++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 024a83889..a3d7d20e5 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,8 @@
     - 노선에서 제거 시 confirm 후 삭제 v
     - 노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert v
     - 구간 등록 시 인덱스가 0이거나 가장 끝 인덱스인 경우 alert v
-    - 순서에 숫자가 아닌 값 입력 시 alert
+    - 순서에 숫자가 아닌 값 입력 불가하도록 type=number로 설정 v
+    - 순서에 음수 입력 시 alert v
     - 노선에 이미 존재하는 구간 이름 등록 시 alert
   - 중복되는 역 이름, 노선 이름 검증 함수 통합 v
 - css 검토
diff --git a/src/components/pages/sectionPage.js b/src/components/pages/sectionPage.js
index 66ada8000..06f53ddd7 100644
--- a/src/components/pages/sectionPage.js
+++ b/src/components/pages/sectionPage.js
@@ -43,7 +43,7 @@ function sectionManagerPage(subwayDatas) {
     <select id="section-station-selector">
     ${options}
     </select>
-    <input id = "section-order-input"></input>
+    <input id = "section-order-input" type = "number" min=0></input>
     <button id = "section-add-button">등록</button>
     <br />
     <br />
diff --git a/src/library/validation/alert.js b/src/library/validation/alert.js
index 163784f6b..e45028c61 100644
--- a/src/library/validation/alert.js
+++ b/src/library/validation/alert.js
@@ -120,8 +120,9 @@ function orderAlert(order) {
 
   subwayDatas.lines.map((line, idx) => {
     if (line.name === subwayDatas.targetLine) {
-      console.log(order, subwayDatas.lines[idx].stops.length);
-      if (0 >= order || order >= subwayDatas.lines[idx].stops.length) {
+      if (0 > order) {
+        alertMsg = "양수만 입력 가능합니다.";
+      } else if (0 >= order || order >= subwayDatas.lines[idx].stops.length) {
         alertMsg = "역과 역 사이에만 구간 등록이 가능합니다.";
       }
     }

From 63c301bf6d49db28c7e8dc7d6eca8da4436e4b7f Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 03:01:51 +0900
Subject: [PATCH 25/32] =?UTF-8?q?=EB=85=B8=EC=84=A0=EC=97=90=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=20=EC=A1=B4=EC=9E=AC=ED=95=98=EB=8A=94=20=EA=B5=AC?=
 =?UTF-8?q?=EA=B0=84=20=EC=9D=B4=EB=A6=84=20=EB=93=B1=EB=A1=9D=20=EC=8B=9C?=
 =?UTF-8?q?=20alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              |  2 +-
 src/library/handlers/sectionHandler.js |  7 ++++---
 src/library/validation/alert.js        | 16 +++++++++++++++-
 src/library/validation/validation.js   | 14 ++++++++++++--
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index a3d7d20e5..ce404e671 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@
     - 구간 등록 시 인덱스가 0이거나 가장 끝 인덱스인 경우 alert v
     - 순서에 숫자가 아닌 값 입력 불가하도록 type=number로 설정 v
     - 순서에 음수 입력 시 alert v
-    - 노선에 이미 존재하는 구간 이름 등록 시 alert
+    - 노선에 이미 존재하는 구간 이름 등록 시 alert v
   - 중복되는 역 이름, 노선 이름 검증 함수 통합 v
 - css 검토
 
diff --git a/src/library/handlers/sectionHandler.js b/src/library/handlers/sectionHandler.js
index c7e1783cf..a77f1b59c 100644
--- a/src/library/handlers/sectionHandler.js
+++ b/src/library/handlers/sectionHandler.js
@@ -1,6 +1,6 @@
 import render from "../../components/render.js";
 import app from "../../components/app.js";
-import { validateSectionDelete, validateOrder } from "../validation/validation.js";
+import { validateSectionDelete, validateOrder, validateSection } from "../validation/validation.js";
 
 function onSectionHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -27,13 +27,14 @@ function onLineSelectHandler() {
 
 function onAddSectionHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let station = document.getElementById("section-station-selector").value;
+  let station = validateSection(document.getElementById("section-station-selector").value);
+  // let station = document.getElementById("section-station-selector").value;
   let targetLine = subwayDatas.targetLine;
   // 구간 등록 시 인덱스가 0이거나 가장 끝 인덱스인 경우 alert
   let order = validateOrder(document.getElementById("section-order-input").value);
   // let order = document.getElementById("section-order-input").value;
 
-  if (order) {
+  if (station && order) {
     //subwayDatas.lines에 원하는 인덱스에 해당 역 넣어주기
     subwayDatas.lines.map((line, idx) => {
       if (line.name === targetLine) {
diff --git a/src/library/validation/alert.js b/src/library/validation/alert.js
index e45028c61..0c32dc3ba 100644
--- a/src/library/validation/alert.js
+++ b/src/library/validation/alert.js
@@ -130,4 +130,18 @@ function orderAlert(order) {
   return alertMsg;
 }
 
-export { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert, sectionDeleteAlert, orderAlert };
+function sectionAlert(stationName) {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let alertMsg = "";
+
+  subwayDatas.lines.map((line) => {
+    if (line.name === subwayDatas.targetLine) {
+      if (line.stops.indexOf(stationName) !== -1) {
+        alertMsg = "이미 구간에 등록된 역입니다.";
+      }
+    }
+  });
+  return alertMsg;
+}
+
+export { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert, sectionDeleteAlert, orderAlert, sectionAlert };
diff --git a/src/library/validation/validation.js b/src/library/validation/validation.js
index 298a1c7d2..20181d5af 100644
--- a/src/library/validation/validation.js
+++ b/src/library/validation/validation.js
@@ -1,4 +1,4 @@
-import { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert, sectionDeleteAlert, orderAlert } from "./alert.js";
+import { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert, sectionDeleteAlert, orderAlert, sectionAlert } from "./alert.js";
 
 function validateInput(input, inputTagID) {
   let alertMsg = "";
@@ -56,4 +56,14 @@ function validateOrder(order) {
   return order;
 }
 
-export { validateInput, validateStationDelete, validateStartAndEndStations, validateSectionDelete, validateOrder };
+function validateSection(stationName) {
+  let alertMsg = sectionAlert(stationName);
+
+  if (alertMsg !== "") {
+    alert(alertMsg);
+    return "";
+  }
+  return stationName;
+}
+
+export { validateInput, validateStationDelete, validateStartAndEndStations, validateSectionDelete, validateOrder, validateSection };

From 6c7e76f649efeef9014c3a319780c6671544974a Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 03:39:04 +0900
Subject: [PATCH 26/32] =?UTF-8?q?=EC=9E=90=EB=B0=94=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A6=BD=ED=8A=B8=20=EC=BB=A8=EB=B2=A4=EC=85=98=EC=97=90=20?=
 =?UTF-8?q?=EB=A7=9E=EC=B6=94=EC=96=B4=20validation=20depth=EC=A4=84?=
 =?UTF-8?q?=EC=9D=B4=EA=B8=B0=20=EB=B0=8F=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              |  4 +-
 src/library/handlers/sectionHandler.js |  3 +-
 src/library/validation/alert.js        | 51 ++++++++++++++------------
 src/library/validation/validation.js   | 17 ++++++++-
 4 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index ce404e671..e5e123491 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,9 @@
     - 순서에 음수 입력 시 alert v
     - 노선에 이미 존재하는 구간 이름 등록 시 alert v
   - 중복되는 역 이름, 노선 이름 검증 함수 통합 v
-- css 검토
+- 리팩토링
+  - 자바스크립트 컨벤션에 맞추어 validation depth줄이기 및 리팩토링 v
+  - css 검토
 
 ## 🤦🏻‍♀️ 고민한 지점
 
diff --git a/src/library/handlers/sectionHandler.js b/src/library/handlers/sectionHandler.js
index a77f1b59c..4ba021cfa 100644
--- a/src/library/handlers/sectionHandler.js
+++ b/src/library/handlers/sectionHandler.js
@@ -62,9 +62,8 @@ function onSectionDeleteHandler() {
   let deleteTargetIdx = event.target.parentNode.parentNode.childNodes[1].outerText;
   let deleteTargetName = event.target.parentNode.parentNode.childNodes[3].outerText;
   let targetLine = subwayDatas.targetLine;
-  //   console.log(deleteTargetName);
 
-  let deleteConfirmed = validateSectionDelete(targetLine);
+  let deleteConfirmed = validateSectionDelete();
 
   if (deleteConfirmed === true) {
     //lines에서 삭제하고
diff --git a/src/library/validation/alert.js b/src/library/validation/alert.js
index 0c32dc3ba..047337053 100644
--- a/src/library/validation/alert.js
+++ b/src/library/validation/alert.js
@@ -13,6 +13,7 @@ function ununiqueStationNameAlert(inputValue) {
       alertMsg = "중복된 역 이름을 입력하셨습니다.";
     }
   });
+
   return alertMsg;
 }
 
@@ -23,6 +24,7 @@ function spaceAlert(inputValue) {
   if (inputValue === "") {
     alertMsg = "공백을 입력하셨습니다.";
   }
+
   return alertMsg;
 }
 
@@ -33,6 +35,7 @@ function underTwoCharacterAlert(inputValue) {
   if (inputValue.length < 2) {
     alertMsg = "2글자 이상으로 입력해주세요.";
   }
+
   return alertMsg;
 }
 
@@ -51,6 +54,7 @@ function inlineAlert(deleteTarget) {
       alertMsg = "노선에 포함된 역은 삭제할 수 없습니다.";
     }
   });
+
   return alertMsg;
 }
 
@@ -69,6 +73,7 @@ function ununiqueLineNameAlert(inputValue) {
       alertMsg = "중복된 노선 이름을 입력하셨습니다.";
     }
   });
+
   return alertMsg;
 }
 
@@ -80,14 +85,14 @@ function startAndEndStationAlert(startAndEndStations) {
 //상행 종점역과 하행 종점역이 중복되는 호선이 이미 존재하는 경우
 function unUniqueLineAlert(startAndEndStations) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-
   let alertMsg = "";
 
-  subwayDatas.lines.map((line, idx) => {
+  subwayDatas.lines.map((line) => {
     if (line.stops[0] === startAndEndStations[0] && line.stops[line.stops.length - 1] === startAndEndStations[1]) {
       alertMsg = "상행, 하행 종점역이 중복되는 노선이 이미 존재합니다.";
     }
   });
+
   return alertMsg;
 }
 
@@ -98,35 +103,34 @@ function sameStartAndEndStationAlert(startAndEndStations) {
   if (startAndEndStations[0] === startAndEndStations[1]) {
     alertMsg = "상행 종점과 하행 종점으로 동일한 역을 선택하셨습니다.";
   }
+
   return alertMsg;
 }
 
 //노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert
-function sectionDeleteAlert(targetLine) {
+function sectionDeleteAlert() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
+  let targetLineIdx = subwayDatas.lines.findIndex((line) => line.name === subwayDatas.targetLine);
+
+  if (subwayDatas.lines[targetLineIdx].stops.length <= 2) {
+    alertMsg = "노선에 포함된 역이 2개 이하일 때에는 삭제할 수 없습니다.";
+  }
 
-  subwayDatas.lines.map((line) => {
-    if (line.name === targetLine && line.stops.length <= 2) {
-      alertMsg = "노선에 포함된 역이 2개 이하일 때에는 삭제할 수 없습니다.";
-    }
-  });
   return alertMsg;
 }
 
 function orderAlert(order) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
+  let targetLineIdx = subwayDatas.lines.findIndex((line) => line.name === subwayDatas.targetLine);
+
+  if (0 > order) {
+    alertMsg = "양수만 입력 가능합니다.";
+  } else if (order <= 0 || subwayDatas.lines[targetLineIdx].stops.length <= order) {
+    alertMsg = "역과 역 사이에만 구간 등록이 가능합니다.";
+  }
 
-  subwayDatas.lines.map((line, idx) => {
-    if (line.name === subwayDatas.targetLine) {
-      if (0 > order) {
-        alertMsg = "양수만 입력 가능합니다.";
-      } else if (0 >= order || order >= subwayDatas.lines[idx].stops.length) {
-        alertMsg = "역과 역 사이에만 구간 등록이 가능합니다.";
-      }
-    }
-  });
   return alertMsg;
 }
 
@@ -134,13 +138,12 @@ function sectionAlert(stationName) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
 
-  subwayDatas.lines.map((line) => {
-    if (line.name === subwayDatas.targetLine) {
-      if (line.stops.indexOf(stationName) !== -1) {
-        alertMsg = "이미 구간에 등록된 역입니다.";
-      }
-    }
-  });
+  let targetLineIdx = subwayDatas.lines.findIndex((line) => line.name === subwayDatas.targetLine);
+
+  if (subwayDatas.lines[targetLineIdx].stops.indexOf(stationName) !== -1) {
+    alertMsg = "이미 구간에 등록된 역입니다.";
+  }
+
   return alertMsg;
 }
 
diff --git a/src/library/validation/validation.js b/src/library/validation/validation.js
index 20181d5af..a9a13580b 100644
--- a/src/library/validation/validation.js
+++ b/src/library/validation/validation.js
@@ -2,12 +2,16 @@ import { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStation
 
 function validateInput(input, inputTagID) {
   let alertMsg = "";
+
   inputTagID === "station-add-input" ? (alertMsg = stationNameAlert(input)) : (alertMsg = lineNameAlert(input));
+
   if (alertMsg) {
     alert(alertMsg);
     document.getElementById(inputTagID).focus();
+
     return "";
   }
+
   return input;
 }
 
@@ -16,19 +20,22 @@ function validateStationDelete(deleteTarget) {
 
   if (alertMsg !== "") {
     alert(alertMsg);
+
     return "";
   }
   return deleteTarget;
 }
 
-function validateSectionDelete(targetLine) {
-  let alertMsg = sectionDeleteAlert(targetLine);
+function validateSectionDelete() {
+  let alertMsg = sectionDeleteAlert();
   //노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert
 
   if (alertMsg !== "") {
     alert(alertMsg);
+
     return "";
   }
+
   return confirmSectionDelete();
 }
 
@@ -41,8 +48,10 @@ function validateStartAndEndStations(startAndEndStations) {
 
   if (alertMsg !== "") {
     alert(alertMsg);
+
     return "";
   }
+
   return startAndEndStations;
 }
 
@@ -51,8 +60,10 @@ function validateOrder(order) {
 
   if (alertMsg !== "") {
     alert(alertMsg);
+
     return "";
   }
+
   return order;
 }
 
@@ -61,8 +72,10 @@ function validateSection(stationName) {
 
   if (alertMsg !== "") {
     alert(alertMsg);
+
     return "";
   }
+
   return stationName;
 }
 

From 4cfd9f651f85ac5281f0ac6808ef47d2d4633260 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 15:49:53 +0900
Subject: [PATCH 27/32] =?UTF-8?q?=ED=8F=B4=EB=8D=94=20=EC=9E=AC=EA=B5=AC?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  3 ++-
 src/index.js                                  |  6 +----
 src/main.js                                   | 15 ++---------
 .../handlers/lineHandlers.js                  |  2 +-
 .../handlers/mapPrintHandler.js               |  2 +-
 .../handlers/sectionHandler.js                |  2 +-
 .../handlers/stationHandlers.js               |  5 +---
 src/manager/init.js                           | 26 +++++++++++++++++++
 src/{components => manager}/render.js         |  0
 src/{library => manager}/validation/alert.js  |  0
 .../validation/validation.js                  |  0
 src/uiManager.js                              | 14 ----------
 12 files changed, 35 insertions(+), 40 deletions(-)
 rename src/{library => manager}/handlers/lineHandlers.js (98%)
 rename src/{library => manager}/handlers/mapPrintHandler.js (81%)
 rename src/{library => manager}/handlers/sectionHandler.js (98%)
 rename src/{library => manager}/handlers/stationHandlers.js (88%)
 create mode 100644 src/manager/init.js
 rename src/{components => manager}/render.js (100%)
 rename src/{library => manager}/validation/alert.js (100%)
 rename src/{library => manager}/validation/validation.js (100%)
 delete mode 100644 src/uiManager.js

diff --git a/README.md b/README.md
index e5e123491..705ea43a1 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,8 @@
   - 중복되는 역 이름, 노선 이름 검증 함수 통합 v
 - 리팩토링
   - 자바스크립트 컨벤션에 맞추어 validation depth줄이기 및 리팩토링 v
-  - css 검토
+  - 폴더 재구성 v
+  - html tag 검토 (인풋 밸류, 글자 크기)
 
 ## 🤦🏻‍♀️ 고민한 지점
 
diff --git a/src/index.js b/src/index.js
index 9a4498c4b..88d36dfbc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,3 @@
 import main from "./main.js";
 
-export default function init() {
-  main();
-}
-
-init();
+main();
diff --git a/src/main.js b/src/main.js
index 60fd7bce9..284cdfd5c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,6 @@
-import { initHTML } from "./uiManager.js";
-import render from "./components/render.js";
+import { initHTML, addEventToMainBtns } from "./manager/uiManager.js";
+import render from "./manager/render.js";
 import app from "./components/app.js";
-import { onStationHandler } from "./library/handlers/stationHandlers.js";
-import { onLineHandler } from "./library/handlers/lineHandlers.js";
-import { onSectionHandler } from "./library/handlers/sectionHandler.js";
-import { onMapPrintHandler } from "./library/handlers/mapPrintHandler.js";
 
 export default function main() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -20,10 +16,3 @@ export default function main() {
   render(app());
   addEventToMainBtns();
 }
-
-function addEventToMainBtns() {
-  document.getElementById("station-manager-button").addEventListener("click", onStationHandler);
-  document.getElementById("line-manager-button").addEventListener("click", onLineHandler);
-  document.getElementById("section-manager-button").addEventListener("click", onSectionHandler);
-  document.getElementById("map-print-manager-button").addEventListener("click", onMapPrintHandler);
-}
diff --git a/src/library/handlers/lineHandlers.js b/src/manager/handlers/lineHandlers.js
similarity index 98%
rename from src/library/handlers/lineHandlers.js
rename to src/manager/handlers/lineHandlers.js
index 1e006a4b7..1af352d79 100644
--- a/src/library/handlers/lineHandlers.js
+++ b/src/manager/handlers/lineHandlers.js
@@ -1,4 +1,4 @@
-import render from "../../components/render.js";
+import render from "../render.js";
 import app from "../../components/app.js";
 import { validateInput, validateStartAndEndStations } from "../validation/validation.js";
 
diff --git a/src/library/handlers/mapPrintHandler.js b/src/manager/handlers/mapPrintHandler.js
similarity index 81%
rename from src/library/handlers/mapPrintHandler.js
rename to src/manager/handlers/mapPrintHandler.js
index fb2304d5c..c53c6699c 100644
--- a/src/library/handlers/mapPrintHandler.js
+++ b/src/manager/handlers/mapPrintHandler.js
@@ -1,4 +1,4 @@
-import render from "../../components/render.js";
+import render from "../render.js";
 import app from "../../components/app.js";
 
 function onMapPrintHandler() {
diff --git a/src/library/handlers/sectionHandler.js b/src/manager/handlers/sectionHandler.js
similarity index 98%
rename from src/library/handlers/sectionHandler.js
rename to src/manager/handlers/sectionHandler.js
index 4ba021cfa..726ccf7ff 100644
--- a/src/library/handlers/sectionHandler.js
+++ b/src/manager/handlers/sectionHandler.js
@@ -1,4 +1,4 @@
-import render from "../../components/render.js";
+import render from "../render.js";
 import app from "../../components/app.js";
 import { validateSectionDelete, validateOrder, validateSection } from "../validation/validation.js";
 
diff --git a/src/library/handlers/stationHandlers.js b/src/manager/handlers/stationHandlers.js
similarity index 88%
rename from src/library/handlers/stationHandlers.js
rename to src/manager/handlers/stationHandlers.js
index 39142f940..868ed1d6c 100644
--- a/src/library/handlers/stationHandlers.js
+++ b/src/manager/handlers/stationHandlers.js
@@ -1,4 +1,4 @@
-import render from "../../components/render.js";
+import render from "../render.js";
 import app from "../../components/app.js";
 import { validateInput, validateStationDelete } from "../validation/validation.js";
 
@@ -37,10 +37,7 @@ function updateEvent() {
 
 function onDeleteStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  // let deleteTarget = event.target.parentNode.parentNode.childNodes[1].outerText;
 
-  //삭제 전 검증 후 alert하거나,
-  //alert가 없으면 deleteTarget을 return하는 함수
   let deleteTarget = validateStationDelete(event.target.parentNode.parentNode.childNodes[1].outerText);
 
   deleteTarget &&
diff --git a/src/manager/init.js b/src/manager/init.js
new file mode 100644
index 000000000..67db46920
--- /dev/null
+++ b/src/manager/init.js
@@ -0,0 +1,26 @@
+import { onStationHandler } from "./handlers/stationHandlers.js";
+import { onLineHandler } from "./handlers/lineHandlers.js";
+import { onSectionHandler } from "./handlers/sectionHandler.js";
+import { onMapPrintHandler } from "./handlers/mapPrintHandler.js";
+
+function initHTML() {
+  const buttonBox = document.createElement("div");
+  buttonBox.innerHTML = `<button id="station-manager-button">1. 역 관리</button>
+      <button id="line-manager-button">2. 노선 관리</button>
+      <button id="section-manager-button">3. 구간 관리</button>
+      <button id="map-print-manager-button">4. 지하철 노선도 출력</button>`;
+  document.body.append(buttonBox);
+
+  const mainBox = document.createElement("div");
+  mainBox.id = "main-box";
+  document.body.append(mainBox);
+}
+
+function addEventToMainBtns() {
+  document.getElementById("station-manager-button").addEventListener("click", onStationHandler);
+  document.getElementById("line-manager-button").addEventListener("click", onLineHandler);
+  document.getElementById("section-manager-button").addEventListener("click", onSectionHandler);
+  document.getElementById("map-print-manager-button").addEventListener("click", onMapPrintHandler);
+}
+
+export { initHTML, addEventToMainBtns };
diff --git a/src/components/render.js b/src/manager/render.js
similarity index 100%
rename from src/components/render.js
rename to src/manager/render.js
diff --git a/src/library/validation/alert.js b/src/manager/validation/alert.js
similarity index 100%
rename from src/library/validation/alert.js
rename to src/manager/validation/alert.js
diff --git a/src/library/validation/validation.js b/src/manager/validation/validation.js
similarity index 100%
rename from src/library/validation/validation.js
rename to src/manager/validation/validation.js
diff --git a/src/uiManager.js b/src/uiManager.js
deleted file mode 100644
index 3486b3700..000000000
--- a/src/uiManager.js
+++ /dev/null
@@ -1,14 +0,0 @@
-function initHTML() {
-  const buttonBox = document.createElement("div");
-  buttonBox.innerHTML = `<button id="station-manager-button">1. 역 관리</button>
-      <button id="line-manager-button">2. 노선 관리</button>
-      <button id="section-manager-button">3. 구간 관리</button>
-      <button id="map-print-manager-button">4. 지하철 노선도 출력</button>`;
-  document.body.append(buttonBox);
-
-  const mainBox = document.createElement("div");
-  mainBox.id = "main-box";
-  document.body.append(mainBox);
-}
-
-export { initHTML };

From d7b86b2e76d4245cf8c9fda0019c0d4b764d32e1 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 19:02:12 +0900
Subject: [PATCH 28/32] =?UTF-8?q?handlers=20=EC=BB=A8=EB=B2=A4=EC=85=98?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EC=B6=94=EC=96=B4=20validation=20depth?=
 =?UTF-8?q?=EC=A4=84=EC=9D=B4=EA=B8=B0=20=EB=B0=8F=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   4 +-
 src/components/app.js                         |   2 +-
 src/components/pages/stationPage.js           |   2 +-
 src/main.js                                   |   4 +-
 src/manager/handlers/lineHandlers.js          |  81 ------------
 src/manager/handlers/sectionHandler.js        | 116 ------------------
 src/managers/handlers/lineHandlers.js         |  62 ++++++++++
 .../handlers/mapPrintHandler.js               |   0
 src/managers/handlers/sectionHandler.js       |  93 ++++++++++++++
 .../handlers/stationHandlers.js               |  34 +++--
 src/{manager => managers}/init.js             |   0
 src/{manager => managers}/render.js           |   0
 src/{manager => managers}/validation/alert.js |   0
 .../validation/validation.js                  |   4 -
 src/objects/objests.js                        |  10 ++
 15 files changed, 186 insertions(+), 226 deletions(-)
 delete mode 100644 src/manager/handlers/lineHandlers.js
 delete mode 100644 src/manager/handlers/sectionHandler.js
 create mode 100644 src/managers/handlers/lineHandlers.js
 rename src/{manager => managers}/handlers/mapPrintHandler.js (100%)
 create mode 100644 src/managers/handlers/sectionHandler.js
 rename src/{manager => managers}/handlers/stationHandlers.js (65%)
 rename src/{manager => managers}/init.js (100%)
 rename src/{manager => managers}/render.js (100%)
 rename src/{manager => managers}/validation/alert.js (100%)
 rename src/{manager => managers}/validation/validation.js (95%)
 create mode 100644 src/objects/objests.js

diff --git a/README.md b/README.md
index 705ea43a1..e77f3c10c 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,9 @@
 - 리팩토링
   - 자바스크립트 컨벤션에 맞추어 validation depth줄이기 및 리팩토링 v
   - 폴더 재구성 v
-  - html tag 검토 (인풋 밸류, 글자 크기)
+  - handlers 컨벤션에 맞추어 validation depth줄이기 및 리팩토링 v
+  - html tag 검토 (인풋 밸류)
+  - css 검토
 
 ## 🤦🏻‍♀️ 고민한 지점
 
diff --git a/src/components/app.js b/src/components/app.js
index ec94588b4..bf3d1ae95 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -1,4 +1,4 @@
-import { stationManagerPage } from "./pages/stationPage.js";
+import stationManagerPage from "./pages/stationPage.js";
 import lineManagerPage from "./pages/linePage.js";
 import sectionManagerPage from "./pages/sectionPage.js";
 import mapPrintManagerPage from "./pages/mapPrintPage.js";
diff --git a/src/components/pages/stationPage.js b/src/components/pages/stationPage.js
index d8f22b482..36f338b90 100644
--- a/src/components/pages/stationPage.js
+++ b/src/components/pages/stationPage.js
@@ -33,4 +33,4 @@ function stationManagerPage(subwayDatas) {
   return stationManager;
 }
 
-export { stationManagerPage };
+export default stationManagerPage;
diff --git a/src/main.js b/src/main.js
index 284cdfd5c..c632109fc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
-import { initHTML, addEventToMainBtns } from "./manager/uiManager.js";
-import render from "./manager/render.js";
+import { initHTML, addEventToMainBtns } from "./managers/init.js";
+import render from "./managers/render.js";
 import app from "./components/app.js";
 
 export default function main() {
diff --git a/src/manager/handlers/lineHandlers.js b/src/manager/handlers/lineHandlers.js
deleted file mode 100644
index 1af352d79..000000000
--- a/src/manager/handlers/lineHandlers.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import render from "../render.js";
-import app from "../../components/app.js";
-import { validateInput, validateStartAndEndStations } from "../validation/validation.js";
-
-function onLineHandler() {
-  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  render(app("line", subwayDatas));
-  subwayDatas && updateEvent();
-  document.getElementById("line-add-button").addEventListener("click", onAddLineHandler);
-}
-
-function onAddLineHandler() {
-  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let lineName = validateInput(document.getElementById("line-name-input").value, "line-name-input");
-
-  if (lineName !== "") {
-    let line = {
-      name: name,
-      stops: [],
-    };
-
-    line.name = lineName;
-    let startAndEndStations = [];
-    startAndEndStations.push(document.getElementById("line-start-station-selector").value, document.getElementById("line-end-station-selector").value);
-    let validatedStartAndEndStations = validateStartAndEndStations(startAndEndStations);
-
-    if (validatedStartAndEndStations !== "") {
-      console.log(validatedStartAndEndStations);
-      line.stops.push(validatedStartAndEndStations[0]);
-      line.stops.push(validatedStartAndEndStations[0]);
-
-      let startStop = line.stops[0];
-      let endStop = line.stops[line.stops.length - 1];
-
-      //상행선 역 정보에 노선 정보 추가
-      subwayDatas.subwayStations.forEach((station, idx) => {
-        if (startStop === station.name) {
-          subwayDatas.subwayStations[idx].line.push(line.name);
-        }
-      });
-
-      //하행선 역 정보에 노선 정보 추가
-      subwayDatas.subwayStations.forEach((station, idx) => {
-        if (endStop === station.name) {
-          subwayDatas.subwayStations[idx].line.push(line.name);
-        }
-      });
-
-      subwayDatas.lines.push(line);
-      localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-
-      render(app("line", subwayDatas));
-      subwayDatas && updateEvent();
-    }
-  }
-}
-
-function updateEvent() {
-  document.getElementById("line-add-button").addEventListener("click", onAddLineHandler);
-
-  let deleteBtns = document.getElementsByClassName("line-delete-button");
-  for (let i = 0; i < deleteBtns.length; i++) {
-    deleteBtns[i].addEventListener("click", onDeleteLineHandler);
-  }
-}
-
-function onDeleteLineHandler() {
-  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let deleteTarget = event.target.parentNode.parentNode.childNodes[1].outerText;
-
-  subwayDatas.lines.forEach((line, idx) => {
-    if (line.name === deleteTarget) {
-      subwayDatas.lines.splice(idx, 1);
-      localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-      render(app("line", subwayDatas));
-      updateEvent();
-    }
-  });
-}
-
-export { onLineHandler };
diff --git a/src/manager/handlers/sectionHandler.js b/src/manager/handlers/sectionHandler.js
deleted file mode 100644
index 726ccf7ff..000000000
--- a/src/manager/handlers/sectionHandler.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import render from "../render.js";
-import app from "../../components/app.js";
-import { validateSectionDelete, validateOrder, validateSection } from "../validation/validation.js";
-
-function onSectionHandler() {
-  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  console.log(subwayDatas);
-  subwayDatas.targetLine = ``;
-  render(app("section", subwayDatas));
-
-  updateEventToLineBtns();
-}
-
-function onLineSelectHandler() {
-  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let targetLine = event.target.innerText;
-  //   console.log(targetLine);
-  subwayDatas.targetLine = targetLine;
-  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-  //   console.log(subwayDatas);
-  render(app("section", subwayDatas));
-
-  updateDeleteToSectionDeleteBtns();
-  updateEventToLineBtns();
-  updateEventToSectionAddBtns();
-}
-
-function onAddSectionHandler() {
-  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let station = validateSection(document.getElementById("section-station-selector").value);
-  // let station = document.getElementById("section-station-selector").value;
-  let targetLine = subwayDatas.targetLine;
-  // 구간 등록 시 인덱스가 0이거나 가장 끝 인덱스인 경우 alert
-  let order = validateOrder(document.getElementById("section-order-input").value);
-  // let order = document.getElementById("section-order-input").value;
-
-  if (station && order) {
-    //subwayDatas.lines에 원하는 인덱스에 해당 역 넣어주기
-    subwayDatas.lines.map((line, idx) => {
-      if (line.name === targetLine) {
-        subwayDatas.lines[idx].stops.splice(order, 0, station);
-      }
-    });
-    //subwayDatas.stations 해당 역의 line 정보에 해당 노선 넣어주기
-    subwayDatas.subwayStations.forEach((addedStation, idx) => {
-      if (station === addedStation.name) {
-        subwayDatas.subwayStations[idx].line.push(subwayDatas.targetLine);
-      }
-    });
-    console.log(subwayDatas);
-
-    localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-
-    render(app("section", subwayDatas));
-    updateEventToSectionAddBtns();
-    updateEventToLineBtns();
-  }
-}
-
-function onSectionDeleteHandler() {
-  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let deleteTargetIdx = event.target.parentNode.parentNode.childNodes[1].outerText;
-  let deleteTargetName = event.target.parentNode.parentNode.childNodes[3].outerText;
-  let targetLine = subwayDatas.targetLine;
-
-  let deleteConfirmed = validateSectionDelete();
-
-  if (deleteConfirmed === true) {
-    //lines에서 삭제하고
-    subwayDatas.lines.map((line) => {
-      if (line.name === subwayDatas.targetLine) {
-        line.stops.splice(deleteTargetIdx, 1);
-        //   localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-      }
-    });
-    //station 정보의 line에서도 삭제하기
-    subwayDatas.subwayStations.map((station) => {
-      if (station.name === deleteTargetName) {
-        station.line.splice(subwayDatas.subwayStations.indexOf(targetLine), 1);
-      }
-    });
-    localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-
-    render(app("section", subwayDatas));
-    updateEventToSectionAddBtns();
-    updateEventToLineBtns();
-    updateDeleteToSectionDeleteBtns();
-  }
-}
-
-function updateEventToLineBtns() {
-  let lineBtns = document.getElementsByClassName(".section-line-menu-button");
-
-  for (let i = 0; i < lineBtns.length; i++) {
-    let eachBtn = lineBtns[i];
-    eachBtn.addEventListener("click", onLineSelectHandler);
-  }
-}
-
-function updateEventToSectionAddBtns() {
-  document.getElementById("section-add-button").addEventListener("click", onAddSectionHandler);
-}
-
-function updateDeleteToSectionDeleteBtns() {
-  let deleteBtns = document.getElementsByClassName(".section-delete-button");
-
-  for (let i = 0; i < deleteBtns.length; i++) {
-    deleteBtns[i].addEventListener("click", onSectionDeleteHandler);
-  }
-}
-
-// / 구간 등록
-// array.splice(3,0,"라")
-// array.splice("추가하기를 원하는 인덱스", 0, "추가하기를 원하는 이름")
-
-export { onSectionHandler };
diff --git a/src/managers/handlers/lineHandlers.js b/src/managers/handlers/lineHandlers.js
new file mode 100644
index 000000000..8677e18a5
--- /dev/null
+++ b/src/managers/handlers/lineHandlers.js
@@ -0,0 +1,62 @@
+import render from "../render.js";
+import app from "../../components/app.js";
+import { Line } from "../../objects/objests.js";
+import { validateInput, validateStartAndEndStations } from "../validation/validation.js";
+
+function onLineHandler() {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  render(app("line", subwayDatas));
+  subwayDatas && updateEvent();
+}
+
+function updateEvent() {
+  document.getElementById("line-add-button").addEventListener("click", onAddLineHandler);
+
+  let deleteBtns = document.getElementsByClassName("line-delete-button");
+  for (let i = 0; i < deleteBtns.length; i++) {
+    deleteBtns[i].addEventListener("click", onDeleteLineHandler);
+  }
+}
+
+function onAddLineHandler() {
+  let lineName = validateInput(document.getElementById("line-name-input").value, "line-name-input");
+
+  if (lineName !== "") {
+    let startAndEndStations = [document.getElementById("line-start-station-selector").value, document.getElementById("line-end-station-selector").value];
+    let validatedStartAndEndStations = validateStartAndEndStations(startAndEndStations);
+    addLine(lineName, validatedStartAndEndStations);
+  }
+}
+
+function addLine(lineName, validatedStartAndEndStations) {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let line = new Line(lineName, validatedStartAndEndStations);
+  let endStops = [line.stops[0], line.stops[line.stops.length - 1]];
+  let startStopIdx = subwayDatas.subwayStations.findIndex((station) => station.name === endStops[0]);
+  let endStopIdx = subwayDatas.subwayStations.findIndex((station) => station.name === endStops[1]);
+
+  subwayDatas.subwayStations[startStopIdx].line.push(lineName);
+  subwayDatas.subwayStations[endStopIdx].line.push(lineName);
+  subwayDatas.lines.push(line);
+
+  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+  render(app("line", subwayDatas));
+  subwayDatas && updateEvent();
+}
+
+function onDeleteLineHandler() {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let deleteTarget = event.target.parentNode.parentNode.childNodes[1].outerText;
+  let deleteTargetIdx = subwayDatas.lines.findIndex((line) => line.name === deleteTarget);
+
+  subwayDatas.subwayStations.map((station) => {
+    station.line.splice(station.line.indexOf(deleteTarget), 1);
+  });
+  subwayDatas.lines.splice(deleteTargetIdx, 1);
+
+  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+  render(app("line", subwayDatas));
+  updateEvent();
+}
+
+export { onLineHandler };
diff --git a/src/manager/handlers/mapPrintHandler.js b/src/managers/handlers/mapPrintHandler.js
similarity index 100%
rename from src/manager/handlers/mapPrintHandler.js
rename to src/managers/handlers/mapPrintHandler.js
diff --git a/src/managers/handlers/sectionHandler.js b/src/managers/handlers/sectionHandler.js
new file mode 100644
index 000000000..69220ee05
--- /dev/null
+++ b/src/managers/handlers/sectionHandler.js
@@ -0,0 +1,93 @@
+import render from "../render.js";
+import app from "../../components/app.js";
+import { validateSectionDelete, validateOrder, validateSection } from "../validation/validation.js";
+
+function onSectionHandler() {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+
+  subwayDatas.targetLine = ``;
+  renderAndUpdateEvent(subwayDatas);
+}
+
+function onLineSelectHandler() {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let targetLine = event.target.innerText;
+
+  subwayDatas.targetLine = targetLine;
+  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+  renderAndUpdateEvent(subwayDatas);
+}
+
+function onAddSectionHandler() {
+  let station = validateSection(document.getElementById("section-station-selector").value);
+  let order = validateOrder(document.getElementById("section-order-input").value);
+
+  if (station && order) {
+    addSection(station, order);
+  }
+}
+
+function addSection(station, order) {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+  let targetLine = subwayDatas.targetLine;
+  let targetLineIdx = subwayDatas.lines.findIndex((line) => line.name === targetLine);
+
+  subwayDatas.lines[targetLineIdx].stops.splice(order, 0, station);
+  subwayDatas.subwayStations.forEach((addedStation, idx) => {
+    if (station === addedStation.name) {
+      subwayDatas.subwayStations[idx].line.push(subwayDatas.targetLine);
+    }
+  });
+
+  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+  renderAndUpdateEvent(subwayDatas);
+}
+
+function onSectionDeleteHandler() {
+  let deleteTargetIdx = event.target.parentNode.parentNode.childNodes[1].outerText;
+  let deleteTarget = event.target.parentNode.parentNode.childNodes[3].outerText;
+  let deleteConfirmed = validateSectionDelete();
+
+  if (deleteConfirmed === true) {
+    sectionDelete(deleteTarget, deleteTargetIdx);
+  }
+}
+
+function sectionDelete(deleteTarget, deleteTargetIdx) {
+  let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+
+  let targetLineIdx = subwayDatas.lines.findIndex((line) => line.name === subwayDatas.targetLine);
+  subwayDatas.lines[targetLineIdx].stops.splice(deleteTargetIdx, 1);
+
+  subwayDatas.subwayStations.map((station) => {
+    if (station.name === deleteTarget) {
+      station.line.splice(subwayDatas.subwayStations.indexOf(subwayDatas.targetLine), 1);
+    }
+  });
+
+  localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+  renderAndUpdateEvent(subwayDatas);
+}
+
+function renderAndUpdateEvent(subwayDatas) {
+  render(app("section", subwayDatas));
+  updateEventToBtns();
+}
+
+function updateEventToBtns() {
+  let sectionBtn = document.getElementById("section-add-button");
+  sectionBtn && document.getElementById("section-add-button").addEventListener("click", onAddSectionHandler);
+
+  let lineBtns = document.getElementsByClassName(".section-line-menu-button");
+  for (let i = 0; i < lineBtns.length; i++) {
+    let eachBtn = lineBtns[i];
+    eachBtn.addEventListener("click", onLineSelectHandler);
+  }
+
+  let deleteBtns = document.getElementsByClassName(".section-delete-button");
+  for (let i = 0; i < deleteBtns.length; i++) {
+    deleteBtns[i].addEventListener("click", onSectionDeleteHandler);
+  }
+}
+
+export { onSectionHandler };
diff --git a/src/manager/handlers/stationHandlers.js b/src/managers/handlers/stationHandlers.js
similarity index 65%
rename from src/manager/handlers/stationHandlers.js
rename to src/managers/handlers/stationHandlers.js
index 868ed1d6c..c84271b8e 100644
--- a/src/manager/handlers/stationHandlers.js
+++ b/src/managers/handlers/stationHandlers.js
@@ -1,12 +1,15 @@
 import render from "../render.js";
 import app from "../../components/app.js";
 import { validateInput, validateStationDelete } from "../validation/validation.js";
+import { Station } from "../../objects/objests.js";
 
+function renderAndUpdateEvent(subwayDatas) {
+  render(app("station", subwayDatas));
+  updateEvent();
+}
 function onStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  render(app("station", subwayDatas));
-  subwayDatas && updateEvent();
-  document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+  renderAndUpdateEvent(subwayDatas);
 }
 
 function onAddStationHandler() {
@@ -14,15 +17,10 @@ function onAddStationHandler() {
   let stationName = validateInput(document.getElementById("station-add-input").value, "station-add-input");
 
   if (stationName !== "") {
-    let subwayStations = {
-      name: name,
-      line: [],
-    };
-    subwayStations.name = stationName;
+    let subwayStations = new Station(stationName);
     subwayDatas.subwayStations.push(subwayStations);
     localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-    render(app("station", subwayDatas));
-    subwayDatas && updateEvent();
+    renderAndUpdateEvent(subwayDatas);
   }
 }
 
@@ -37,18 +35,14 @@ function updateEvent() {
 
 function onDeleteStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-
   let deleteTarget = validateStationDelete(event.target.parentNode.parentNode.childNodes[1].outerText);
 
-  deleteTarget &&
-    subwayDatas.subwayStations.forEach((station, idx) => {
-      if (station.name === deleteTarget) {
-        subwayDatas.subwayStations.splice(idx, 1);
-        localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
-        render(app("station", subwayDatas));
-        updateEvent();
-      }
-    });
+  if (deleteTarget !== "") {
+    let deleteTargetIdx = subwayDatas.subwayStations.findIndex((station) => station.name === deleteTarget);
+    subwayDatas.subwayStations.splice(deleteTargetIdx, 1);
+    localStorage.setItem("subwayDatas", JSON.stringify(subwayDatas));
+    renderAndUpdateEvent(subwayDatas);
+  }
 }
 
 export { onStationHandler };
diff --git a/src/manager/init.js b/src/managers/init.js
similarity index 100%
rename from src/manager/init.js
rename to src/managers/init.js
diff --git a/src/manager/render.js b/src/managers/render.js
similarity index 100%
rename from src/manager/render.js
rename to src/managers/render.js
diff --git a/src/manager/validation/alert.js b/src/managers/validation/alert.js
similarity index 100%
rename from src/manager/validation/alert.js
rename to src/managers/validation/alert.js
diff --git a/src/manager/validation/validation.js b/src/managers/validation/validation.js
similarity index 95%
rename from src/manager/validation/validation.js
rename to src/managers/validation/validation.js
index a9a13580b..b6f4131aa 100644
--- a/src/manager/validation/validation.js
+++ b/src/managers/validation/validation.js
@@ -36,10 +36,6 @@ function validateSectionDelete() {
     return "";
   }
 
-  return confirmSectionDelete();
-}
-
-function confirmSectionDelete() {
   return confirm("정말로 노선에서 제거하겠습니까?");
 }
 
diff --git a/src/objects/objests.js b/src/objects/objests.js
new file mode 100644
index 000000000..8be2ebbbc
--- /dev/null
+++ b/src/objects/objests.js
@@ -0,0 +1,10 @@
+function Line(name, endStops) {
+  this.name = name;
+  this.stops = [endStops[0], endStops[1]];
+}
+
+function Station(name) {
+  this.name = name;
+  this.line = [];
+}
+export { Line, Station };

From fe682c34862f858b8855cb31fa5138e1182bf3e5 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 19:33:46 +0900
Subject: [PATCH 29/32] =?UTF-8?q?html=20tag=20=EA=B2=80=ED=86=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                            |  3 ++-
 src/components/pages/mapPrintPage.js | 30 +++++-----------------------
 src/managers/init.js                 | 14 +++++++++----
 src/managers/validation/alert.js     |  4 ++--
 4 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index e77f3c10c..4193a15f2 100644
--- a/README.md
+++ b/README.md
@@ -40,7 +40,8 @@
   - 자바스크립트 컨벤션에 맞추어 validation depth줄이기 및 리팩토링 v
   - 폴더 재구성 v
   - handlers 컨벤션에 맞추어 validation depth줄이기 및 리팩토링 v
-  - html tag 검토 (인풋 밸류)
+  - html tag 검토 v
+  - 상수화
   - css 검토
 
 ## 🤦🏻‍♀️ 고민한 지점
diff --git a/src/components/pages/mapPrintPage.js b/src/components/pages/mapPrintPage.js
index 7aa2d739b..a1991ea6c 100644
--- a/src/components/pages/mapPrintPage.js
+++ b/src/components/pages/mapPrintPage.js
@@ -1,30 +1,10 @@
 function mapPrintManagerPage(subwayDatas) {
-  // let ul = ``;
+  const map = subwayDatas.lines.reduce((prev, line) => {
+    const insideOfUl = line.stops.reduce((prev, stop) => prev + `<li style="padding-left: 20px">${stop}</li>`, "");
+    return prev + `<ul style="list-style-position: inside">${line.name}${insideOfUl}</ul>`;
+  }, "");
 
-  // subwayDatas.lines.map((line) => {
-  //   ul += `<ul>${line.name}`;
-
-  //   line.stops.map((stop) => {
-  //     ul += `<li>${stop}</li>`;
-  //   });
-
-  //   ul += "</ul>";
-  // });
-
-  // let mapPrintManager = `<div> ${ul} </div>`;
-
-  // return mapPrintManager;
-
-  let Map = ``;
-
-  subwayDatas.lines.map((line) => {
-    let insideOfUl = ``;
-    line.stops.map((stop) => {
-      insideOfUl += `<li style="padding-left: 20px">${stop}</li>`;
-    });
-    Map += `<ul style="list-style-position: inside">${line.name}${insideOfUl}</ul>`;
-  });
-  return Map;
+  return `<div class="map">${map}</div>`;
 }
 
 export default mapPrintManagerPage;
diff --git a/src/managers/init.js b/src/managers/init.js
index 67db46920..ad925589d 100644
--- a/src/managers/init.js
+++ b/src/managers/init.js
@@ -5,10 +5,11 @@ import { onMapPrintHandler } from "./handlers/mapPrintHandler.js";
 
 function initHTML() {
   const buttonBox = document.createElement("div");
-  buttonBox.innerHTML = `<button id="station-manager-button">1. 역 관리</button>
-      <button id="line-manager-button">2. 노선 관리</button>
-      <button id="section-manager-button">3. 구간 관리</button>
-      <button id="map-print-manager-button">4. 지하철 노선도 출력</button>`;
+  buttonBox.innerHTML = `
+   <button id="station-manager-button">1. 역 관리</button>
+    <button id="line-manager-button">2. 노선 관리</button>
+    <button id="section-manager-button">3. 구간 관리</button>
+    <button id="map-print-manager-button">4. 지하철 노선도 출력</button>`;
   document.body.append(buttonBox);
 
   const mainBox = document.createElement("div");
@@ -17,6 +18,11 @@ function initHTML() {
 }
 
 function addEventToMainBtns() {
+  // const buttons = [{ name: "station-manager-button", handler: onStationHandler }]
+
+  // buttons.forEach(({ name, handler }) => {
+  //   document.getElementById(name).addEventListener("click", handler);
+  // });
   document.getElementById("station-manager-button").addEventListener("click", onStationHandler);
   document.getElementById("line-manager-button").addEventListener("click", onLineHandler);
   document.getElementById("section-manager-button").addEventListener("click", onSectionHandler);
diff --git a/src/managers/validation/alert.js b/src/managers/validation/alert.js
index 047337053..3c7a5d397 100644
--- a/src/managers/validation/alert.js
+++ b/src/managers/validation/alert.js
@@ -1,10 +1,10 @@
 //역 검증 (중복, 공백, 2자 미만)
 function stationNameAlert(inputValue) {
-  return ununiqueStationNameAlert(inputValue) || spaceAlert(inputValue) || underTwoCharacterAlert(inputValue);
+  return uniqueStationNameAlert(inputValue) || spaceAlert(inputValue) || underTwoCharacterAlert(inputValue);
 }
 
 //중복된 역 이름 검증
-function ununiqueStationNameAlert(inputValue) {
+function uniqueStationNameAlert(inputValue) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
 

From 5e1a09e433935a92a30fe62868eb4cdcec5cab74 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 20:16:46 +0900
Subject: [PATCH 30/32] =?UTF-8?q?input=20value=20=EA=B2=80=ED=86=A0,=20?=
 =?UTF-8?q?=EA=B5=AC=EA=B0=84=20type=3Dnumber=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?=ED=9B=84=20=EC=88=AB=EC=9E=90=EB=A7=8C=20=EC=9E=85=EB=A0=A5=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EA=B2=80?=
 =?UTF-8?q?=EC=A6=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                           | 1 +
 src/components/pages/linePage.js    | 2 +-
 src/components/pages/sectionPage.js | 2 +-
 src/components/pages/stationPage.js | 2 +-
 src/managers/validation/alert.js    | 4 +++-
 5 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 4193a15f2..8cc4e23da 100644
--- a/README.md
+++ b/README.md
@@ -41,6 +41,7 @@
   - 폴더 재구성 v
   - handlers 컨벤션에 맞추어 validation depth줄이기 및 리팩토링 v
   - html tag 검토 v
+  - input value 검토, 구간 type=number 삭제 후 숫자만 입력 가능하도록 검증 추가 v
   - 상수화
   - css 검토
 
diff --git a/src/components/pages/linePage.js b/src/components/pages/linePage.js
index 0fc838a67..0d6367394 100644
--- a/src/components/pages/linePage.js
+++ b/src/components/pages/linePage.js
@@ -15,7 +15,7 @@ function lineManagerPage(subwayDatas) {
 
   let lineManager = `
   <h4>노선 이름<h4>
-  <input id = "line-name-input"></input>
+  <input id = "line-name-input" value = "노선 이름을 입력해주세요."></input>
   <br />
   <br />
   <label>상행 종점</label>
diff --git a/src/components/pages/sectionPage.js b/src/components/pages/sectionPage.js
index 06f53ddd7..c077adb91 100644
--- a/src/components/pages/sectionPage.js
+++ b/src/components/pages/sectionPage.js
@@ -43,7 +43,7 @@ function sectionManagerPage(subwayDatas) {
     <select id="section-station-selector">
     ${options}
     </select>
-    <input id = "section-order-input" type = "number" min=0></input>
+    <input id = "section-order-input" value = "순서"></input>
     <button id = "section-add-button">등록</button>
     <br />
     <br />
diff --git a/src/components/pages/stationPage.js b/src/components/pages/stationPage.js
index 36f338b90..6711dc8f7 100644
--- a/src/components/pages/stationPage.js
+++ b/src/components/pages/stationPage.js
@@ -14,7 +14,7 @@ function stationManagerPage(subwayDatas) {
 
   let stationManager = `
   <h4>역 이름<h4>
-  <input id = "station-add-input"></input>
+  <input id = "station-add-input" value = "역 이름을 입력해주세요."></input>
   <button id = "station-add-button">역 추가</button>
   <h3>🚉지하철 역 목록</h3>
   
diff --git a/src/managers/validation/alert.js b/src/managers/validation/alert.js
index 3c7a5d397..e7437f73d 100644
--- a/src/managers/validation/alert.js
+++ b/src/managers/validation/alert.js
@@ -125,7 +125,9 @@ function orderAlert(order) {
   let alertMsg = "";
   let targetLineIdx = subwayDatas.lines.findIndex((line) => line.name === subwayDatas.targetLine);
 
-  if (0 > order) {
+  if (isNaN(Number(order))) {
+    alertMsg = "숫자만 입력 가능합니다.";
+  } else if (0 > order) {
     alertMsg = "양수만 입력 가능합니다.";
   } else if (order <= 0 || subwayDatas.lines[targetLineIdx].stops.length <= order) {
     alertMsg = "역과 역 사이에만 구간 등록이 가능합니다.";

From 76a45cabb7364d5b33880ee3cf1e665602b8f931 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 20:27:31 +0900
Subject: [PATCH 31/32] =?UTF-8?q?return=EA=B0=92=EC=9D=B4=20=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20map=20=EB=A9=94=EC=86=8C=EB=93=9C=EB=A5=BC=20forEac?=
 =?UTF-8?q?h=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               | 1 +
 src/components/pages/linePage.js        | 2 +-
 src/components/pages/sectionPage.js     | 6 +++---
 src/components/pages/stationPage.js     | 2 +-
 src/managers/handlers/lineHandlers.js   | 2 +-
 src/managers/handlers/sectionHandler.js | 2 +-
 src/managers/validation/alert.js        | 6 +++---
 7 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 8cc4e23da..c703b8ffe 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,7 @@
   - handlers 컨벤션에 맞추어 validation depth줄이기 및 리팩토링 v
   - html tag 검토 v
   - input value 검토, 구간 type=number 삭제 후 숫자만 입력 가능하도록 검증 추가 v
+  - return값이 없는 map 메소드를 forEach로 수정 v
   - 상수화
   - css 검토
 
diff --git a/src/components/pages/linePage.js b/src/components/pages/linePage.js
index 0d6367394..f0d24ea5b 100644
--- a/src/components/pages/linePage.js
+++ b/src/components/pages/linePage.js
@@ -3,7 +3,7 @@ function lineManagerPage(subwayDatas) {
   let table = ``;
 
   subwayDatas.lines &&
-    subwayDatas.lines.map(
+    subwayDatas.lines.forEach(
       (line) =>
         (table += `<tr>
             <td>${line.name}</td>
diff --git a/src/components/pages/sectionPage.js b/src/components/pages/sectionPage.js
index c077adb91..ee382ef50 100644
--- a/src/components/pages/sectionPage.js
+++ b/src/components/pages/sectionPage.js
@@ -5,7 +5,7 @@ function sectionManagerPage(subwayDatas) {
 
   // console.log("sectionn", subwayDatas);
   subwayDatas.lines &&
-    subwayDatas.lines.map(
+    subwayDatas.lines.forEach(
       (line) =>
         (lines += `<button class = ".section-line-menu-button">
             ${line.name}
@@ -24,9 +24,9 @@ function sectionManagerPage(subwayDatas) {
     let options = subwayDatas.subwayStations.map((station) => `<option value = "${station.name}">${station.name}</option>`);
     let table = ``;
 
-    subwayDatas.lines.map((line) => {
+    subwayDatas.lines.forEach((line) => {
       if (line.name === targetLine) {
-        line.stops.map((stop, idx) => {
+        line.stops.forEach((stop, idx) => {
           table += `<tr>
             <td>${idx}</td>
             <td>${stop}</td>
diff --git a/src/components/pages/stationPage.js b/src/components/pages/stationPage.js
index 6711dc8f7..9c66d94a6 100644
--- a/src/components/pages/stationPage.js
+++ b/src/components/pages/stationPage.js
@@ -3,7 +3,7 @@ function stationManagerPage(subwayDatas) {
 
   let stations = subwayDatas.subwayStations;
   stations &&
-    stations.map((station) => {
+    stations.forEach((station) => {
       table += `<tr>
       <td>${station.name}</td>
       <td>
diff --git a/src/managers/handlers/lineHandlers.js b/src/managers/handlers/lineHandlers.js
index 8677e18a5..5a0a19344 100644
--- a/src/managers/handlers/lineHandlers.js
+++ b/src/managers/handlers/lineHandlers.js
@@ -49,7 +49,7 @@ function onDeleteLineHandler() {
   let deleteTarget = event.target.parentNode.parentNode.childNodes[1].outerText;
   let deleteTargetIdx = subwayDatas.lines.findIndex((line) => line.name === deleteTarget);
 
-  subwayDatas.subwayStations.map((station) => {
+  subwayDatas.subwayStations.forEach((station) => {
     station.line.splice(station.line.indexOf(deleteTarget), 1);
   });
   subwayDatas.lines.splice(deleteTargetIdx, 1);
diff --git a/src/managers/handlers/sectionHandler.js b/src/managers/handlers/sectionHandler.js
index 69220ee05..008b97fab 100644
--- a/src/managers/handlers/sectionHandler.js
+++ b/src/managers/handlers/sectionHandler.js
@@ -59,7 +59,7 @@ function sectionDelete(deleteTarget, deleteTargetIdx) {
   let targetLineIdx = subwayDatas.lines.findIndex((line) => line.name === subwayDatas.targetLine);
   subwayDatas.lines[targetLineIdx].stops.splice(deleteTargetIdx, 1);
 
-  subwayDatas.subwayStations.map((station) => {
+  subwayDatas.subwayStations.forEach((station) => {
     if (station.name === deleteTarget) {
       station.line.splice(subwayDatas.subwayStations.indexOf(subwayDatas.targetLine), 1);
     }
diff --git a/src/managers/validation/alert.js b/src/managers/validation/alert.js
index e7437f73d..3b2760ce6 100644
--- a/src/managers/validation/alert.js
+++ b/src/managers/validation/alert.js
@@ -49,7 +49,7 @@ function inlineAlert(deleteTarget) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
 
-  subwayDatas.subwayStations.map((station, idx) => {
+  subwayDatas.subwayStations.forEach((station, idx) => {
     if (station.name === deleteTarget && subwayDatas.subwayStations[idx].line.length >= 1) {
       alertMsg = "노선에 포함된 역은 삭제할 수 없습니다.";
     }
@@ -68,7 +68,7 @@ function ununiqueLineNameAlert(inputValue) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
 
-  subwayDatas.lines.map((line) => {
+  subwayDatas.lines.forEach((line) => {
     if (line.name === inputValue) {
       alertMsg = "중복된 노선 이름을 입력하셨습니다.";
     }
@@ -87,7 +87,7 @@ function unUniqueLineAlert(startAndEndStations) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
 
-  subwayDatas.lines.map((line) => {
+  subwayDatas.lines.forEach((line) => {
     if (line.stops[0] === startAndEndStations[0] && line.stops[line.stops.length - 1] === startAndEndStations[1]) {
       alertMsg = "상행, 하행 종점역이 중복되는 노선이 이미 존재합니다.";
     }

From 26fecfb79ae5ca36e892e40303cac0f3b19a3aa4 Mon Sep 17 00:00:00 2001
From: shinsehantan <shinsehantan@users.noreply.github.com>
Date: Tue, 15 Dec 2020 22:09:32 +0900
Subject: [PATCH 32/32] =?UTF-8?q?=EC=B5=9C=EC=A2=85=20=EC=BB=A4=EB=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                | 54 ++++++++++++++++++-
 src/components/pages/linePage.js         | 66 ++++++++++++------------
 src/components/pages/sectionPage.js      | 25 ++++-----
 src/components/pages/stationPage.js      |  8 +--
 src/constants/tag.js                     | 37 +++++++++++++
 src/main.js                              |  1 +
 src/managers/handlers/lineHandlers.js    | 14 ++---
 src/managers/handlers/mapPrintHandler.js |  1 +
 src/managers/handlers/sectionHandler.js  | 16 +++---
 src/managers/handlers/stationHandlers.js | 10 ++--
 src/managers/init.js                     | 24 ++++-----
 src/managers/validation/alert.js         | 13 -----
 src/managers/validation/validation.js    |  4 +-
 src/objects/{objests.js => objects.js}   |  1 +
 14 files changed, 179 insertions(+), 95 deletions(-)
 create mode 100644 src/constants/tag.js
 rename src/objects/{objests.js => objects.js} (99%)

diff --git a/README.md b/README.md
index c703b8ffe..073597e5c 100644
--- a/README.md
+++ b/README.md
@@ -43,13 +43,63 @@
   - html tag 검토 v
   - input value 검토, 구간 type=number 삭제 후 숫자만 입력 가능하도록 검증 추가 v
   - return값이 없는 map 메소드를 forEach로 수정 v
-  - 상수화
-  - css 검토
+  - 상수화 v
+  - css 검토 v
+
+## ⛓ 문서 구조
+
+```plaintext
+├── src
+│   │
+│   ├── components  // 사용자단에 보여질 페이지를 관리하는 곳
+│   │   │
+│   │   ├── pages
+│   │   │     ├── linePages.js  // 노선 관리 페이지
+│   │   │     ├── mapPrintPages.js  // 노선도 출력 페이지
+│   │   │     ├── sectionPages.js  // 구간 관리 페이지
+│   │   │     └── stationPages.js  // 역 관리 페이지
+│   │   │
+│   │   └── app.js  // 각 페이지를 렌더링할 때 라우팅을 담당하는 곳
+│   │
+│   ├── constatns
+│   │   │
+│   │   └── tag.js  // html tag 상수를 모아놓은 곳
+│   │
+│   ├── managers  // 각 관리 페이지를 관리하는 곳
+│   │   │
+│   │   ├── handlers
+│   │   │     ├── lineHanlderPages.js  // 노선 관련 이벤트 관리
+│   │   │     ├── mapPrintHandlerPages.js  // 노선도 출력 관련 이벤트 관리
+│   │   │     ├── sectionHandlerPages.js  // 구간 관련 이벤트 관리
+│   │   │     └── stationHandlerPages.js  // 역 관련 이벤트 관리
+│   │   │
+│   │   └── validation  // 유효성을 검증하는 곳
+│   │   │     ├── alert.js  // 유효성 검증을 위한 alert message를 생성하는 곳
+│   │   │     └── validation.js  // 유효성을 검증을 하고 필요한 데이터를 반환하는 곳
+│   │   │
+│   │   └── init.js  // 초기화를 담당하는 곳
+│   │   │
+│   │   └── render.js  // 렌더링을 담당하는 곳
+│   │
+│   ├── objects
+│   │   │
+│   │   └── objects.js  // 생성한 객체를 모아둔 곳
+│   │
+│   ├── index.js  // 시작점
+│   │
+│   └── main.js  // 초기 작업들을 담당하는 곳
+│
+└── index.html
+```
 
 ## 🤦🏻‍♀️ 고민한 지점
 
 - 버튼에 각 관리페이지를 연결할 때, 리액트에서는 컴포넌트를 쉽게 렌더링할 수 있었는데 vanilla javascript로 연결하려고하니 어려웠다.
 - 사용자 동작에 따라 새로운 엘리먼트를 추가하거나 삭제할 때, 남은 엘리먼트를 다시 render하고, 이벤트 리스너를 다시 추가하는 등 업데이트된 상태를 구현하는 부분이 까다로웠고, 이 방법이 과연 효율적인 방법이 맞는지 의구심이 들었다.
+- station, line 등의 이름이 여러 함수, 변수명에 포함되어 의미 전달이 명확하면서도 가독성이 좋은 함수명, 변수명을 짓는 것이 어려웠다.
+- 예외상황을 어디까지 체크해야하는지 판단하는 것이 어려웠다.
+
+---
 
 ## 🚀 기능 요구사항
 
diff --git a/src/components/pages/linePage.js b/src/components/pages/linePage.js
index f0d24ea5b..b9814c3ea 100644
--- a/src/components/pages/linePage.js
+++ b/src/components/pages/linePage.js
@@ -1,3 +1,5 @@
+import { LINE_NAME_INPUT, LINE_START_STATION_SELECTOR, LINE_END_STATION_SELECTOR, LINE_ADD_BUTTON, LINE_DELETE_BUTTON } from "../../constants/tag.js";
+
 function lineManagerPage(subwayDatas) {
   let options = subwayDatas.subwayStations.map((station) => `<option value = "${station.name}">${station.name}</option>`);
   let table = ``;
@@ -9,42 +11,42 @@ function lineManagerPage(subwayDatas) {
             <td>${line.name}</td>
             <td>${line.stops[0]}</td>
             <td>${line.stops[line.stops.length - 1]}</td>
-            <td><button class="line-delete-button">삭제</button></td>
+            <td><button class=${LINE_DELETE_BUTTON}>삭제</button></td>
           </tr>`)
     );
 
   let lineManager = `
-  <h4>노선 이름<h4>
-  <input id = "line-name-input" value = "노선 이름을 입력해주세요."></input>
-  <br />
-  <br />
-  <label>상행 종점</label>
-    <select id="line-start-station-selector">
-    ${options}
-    </select>
-  <br />
-  <label>하행 종점</label>
-    <select id="line-end-station-selector">
-    ${options}
-    </select>
-  <br />
-  <br />
-  <button id = "line-add-button">노선 추가</button>
-  <h3>🚉지하철 노선 목록</h3>
-  <table border = 1px solid black>
-    <thead>
-      <tr>
-        <th>노선 이름</th>
-        <th>상행 종점역</th>
-        <th>하행 종점역</th>
-        <th>설정</th>
-      </tr>
-    </thead>
-    <tbody>
-      ${table}
-    </tbody>
-  </table>
-  `;
+            <h4>노선 이름<h4>
+            <input id = ${LINE_NAME_INPUT} value = "노선 이름을 입력해주세요."></input>
+            <br />
+            <br />
+            <label>상행 종점</label>
+            <select id=${LINE_START_STATION_SELECTOR}>
+            ${options}
+            </select> 
+            <br />
+            <label>하행 종점</label>
+            <select id=${LINE_END_STATION_SELECTOR}>
+            ${options}
+            </select>
+            <br />
+            <br />
+            <button id = ${LINE_ADD_BUTTON}>노선 추가</button>
+            <h3>🚉지하철 노선 목록</h3>
+            <table border = 1px solid black>
+              <thead>
+                <tr>
+                  <th>노선 이름</th>
+                  <th>상행 종점역</th>
+                  <th>하행 종점역</th>
+                  <th>설정</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${table}
+              </tbody>
+            </table>
+            `;
 
   return lineManager;
 }
diff --git a/src/components/pages/sectionPage.js b/src/components/pages/sectionPage.js
index ee382ef50..d05d93eb7 100644
--- a/src/components/pages/sectionPage.js
+++ b/src/components/pages/sectionPage.js
@@ -1,21 +1,21 @@
-// import { onLineSelectHandler } from "../../library/handlers/sectionHandler.js";
+import { SECTION_LINE_MENU_BUTTON, SECTION_STATION_SELECTOR, SECTION_ORDER_INPUT, SECTION_ADD_BUTTON, SECTION_DELETE_BUTTON } from "../../constants/tag.js";
 
 function sectionManagerPage(subwayDatas) {
   let lines = ``;
 
-  // console.log("sectionn", subwayDatas);
   subwayDatas.lines &&
     subwayDatas.lines.forEach(
       (line) =>
-        (lines += `<button class = ".section-line-menu-button">
-            ${line.name}
-          </button> `)
+        (lines += `
+        <button class = ${SECTION_LINE_MENU_BUTTON}>
+          ${line.name}
+        </button> `)
     );
 
   let sectionManager = `
   <h4>구간을 수정할 노선을 선택해주세요.</h4>
   <div>
-  ${lines}
+    ${lines}
   </div>
   `;
 
@@ -27,10 +27,11 @@ function sectionManagerPage(subwayDatas) {
     subwayDatas.lines.forEach((line) => {
       if (line.name === targetLine) {
         line.stops.forEach((stop, idx) => {
-          table += `<tr>
+          table += `
+          <tr>
             <td>${idx}</td>
             <td>${stop}</td>
-            <td><button class=".section-delete-button">노선에서 제거</button></td>
+            <td><button class=${SECTION_DELETE_BUTTON}>노선에서 제거</button></td>
           </tr>`;
         });
       }
@@ -40,11 +41,11 @@ function sectionManagerPage(subwayDatas) {
     <div id = "selected-line-section-manager">
     <h4 id = "target-line">${targetLine} 관리</h4>
     <h5>구간 등록<h5>
-    <select id="section-station-selector">
-    ${options}
+    <select id=${SECTION_STATION_SELECTOR}>
+      ${options}
     </select>
-    <input id = "section-order-input" value = "순서"></input>
-    <button id = "section-add-button">등록</button>
+    <input id = ${SECTION_ORDER_INPUT} value = "순서"></input>
+    <button id = ${SECTION_ADD_BUTTON}>등록</button>
     <br />
     <br />
     <table border = 1px solid black>
diff --git a/src/components/pages/stationPage.js b/src/components/pages/stationPage.js
index 9c66d94a6..73cd92317 100644
--- a/src/components/pages/stationPage.js
+++ b/src/components/pages/stationPage.js
@@ -1,3 +1,5 @@
+import { STATION_NAME_INPUT, STATION_ADD_BUTTON, STATION_DELETE_BUTTON } from "../../constants/tag.js";
+
 function stationManagerPage(subwayDatas) {
   let table = ``;
 
@@ -7,15 +9,15 @@ function stationManagerPage(subwayDatas) {
       table += `<tr>
       <td>${station.name}</td>
       <td>
-        <button class="station-delete-button">삭제</button>
+        <button class=${STATION_DELETE_BUTTON}>삭제</button>
       </td>
     </tr>`;
     });
 
   let stationManager = `
   <h4>역 이름<h4>
-  <input id = "station-add-input" value = "역 이름을 입력해주세요."></input>
-  <button id = "station-add-button">역 추가</button>
+  <input id = ${STATION_NAME_INPUT} value = "역 이름을 입력해주세요."></input>
+  <button id = ${STATION_ADD_BUTTON}>역 추가</button>
   <h3>🚉지하철 역 목록</h3>
   
   <table border = 1px solid black>
diff --git a/src/constants/tag.js b/src/constants/tag.js
new file mode 100644
index 000000000..8cc7958c5
--- /dev/null
+++ b/src/constants/tag.js
@@ -0,0 +1,37 @@
+const STATION_MANAGER_BUTTON = "station-manager-button";
+const LINE_MANAGER_BUTTON = "line-manager-button";
+const SECTION_MANAGER_BUTTON = "section-manager-button";
+const MAP_PRINT_MANAGER_BUTTON = "map-print-manager-button";
+const STATION_NAME_INPUT = "station-name-input";
+const STATION_ADD_BUTTON = "station-add-button";
+const STATION_DELETE_BUTTON = "station-delete-button";
+const LINE_NAME_INPUT = "line-name-input";
+const LINE_START_STATION_SELECTOR = "line-start-station-selector";
+const LINE_END_STATION_SELECTOR = "line-end-station-selector";
+const LINE_ADD_BUTTON = "line-add-button";
+const LINE_DELETE_BUTTON = "line-delete-button";
+const SECTION_LINE_MENU_BUTTON = "section-line-menu-button";
+const SECTION_STATION_SELECTOR = "section-station-selector";
+const SECTION_ORDER_INPUT = "section-order-input";
+const SECTION_ADD_BUTTON = "section-add-button";
+const SECTION_DELETE_BUTTON = "section-delete-button";
+
+export {
+  STATION_MANAGER_BUTTON,
+  LINE_MANAGER_BUTTON,
+  SECTION_MANAGER_BUTTON,
+  MAP_PRINT_MANAGER_BUTTON,
+  STATION_NAME_INPUT,
+  STATION_ADD_BUTTON,
+  STATION_DELETE_BUTTON,
+  LINE_NAME_INPUT,
+  LINE_START_STATION_SELECTOR,
+  LINE_END_STATION_SELECTOR,
+  LINE_ADD_BUTTON,
+  LINE_DELETE_BUTTON,
+  SECTION_LINE_MENU_BUTTON,
+  SECTION_STATION_SELECTOR,
+  SECTION_ORDER_INPUT,
+  SECTION_ADD_BUTTON,
+  SECTION_DELETE_BUTTON,
+};
diff --git a/src/main.js b/src/main.js
index c632109fc..88fd7ef11 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import app from "./components/app.js";
 
 export default function main() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+
   if (!subwayDatas) {
     let subwayDatas = {
       subwayStations: [],
diff --git a/src/managers/handlers/lineHandlers.js b/src/managers/handlers/lineHandlers.js
index 5a0a19344..187e90783 100644
--- a/src/managers/handlers/lineHandlers.js
+++ b/src/managers/handlers/lineHandlers.js
@@ -1,30 +1,32 @@
 import render from "../render.js";
 import app from "../../components/app.js";
-import { Line } from "../../objects/objests.js";
+import { Line } from "../../objects/objects.js";
 import { validateInput, validateStartAndEndStations } from "../validation/validation.js";
+import { LINE_NAME_INPUT, LINE_ADD_BUTTON, LINE_DELETE_BUTTON, LINE_START_STATION_SELECTOR, LINE_END_STATION_SELECTOR } from "../../constants/tag.js";
 
 function onLineHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+
   render(app("line", subwayDatas));
   subwayDatas && updateEvent();
 }
 
 function updateEvent() {
-  document.getElementById("line-add-button").addEventListener("click", onAddLineHandler);
+  document.getElementById(LINE_ADD_BUTTON).addEventListener("click", onAddLineHandler);
 
-  let deleteBtns = document.getElementsByClassName("line-delete-button");
+  let deleteBtns = document.getElementsByClassName(LINE_DELETE_BUTTON);
   for (let i = 0; i < deleteBtns.length; i++) {
     deleteBtns[i].addEventListener("click", onDeleteLineHandler);
   }
 }
 
 function onAddLineHandler() {
-  let lineName = validateInput(document.getElementById("line-name-input").value, "line-name-input");
+  let lineName = validateInput(document.getElementById(LINE_NAME_INPUT).value, LINE_NAME_INPUT);
 
   if (lineName !== "") {
-    let startAndEndStations = [document.getElementById("line-start-station-selector").value, document.getElementById("line-end-station-selector").value];
+    let startAndEndStations = [document.getElementById(LINE_START_STATION_SELECTOR).value, document.getElementById(LINE_END_STATION_SELECTOR).value];
     let validatedStartAndEndStations = validateStartAndEndStations(startAndEndStations);
-    addLine(lineName, validatedStartAndEndStations);
+    validatedStartAndEndStations && addLine(lineName, validatedStartAndEndStations);
   }
 }
 
diff --git a/src/managers/handlers/mapPrintHandler.js b/src/managers/handlers/mapPrintHandler.js
index c53c6699c..ce9780678 100644
--- a/src/managers/handlers/mapPrintHandler.js
+++ b/src/managers/handlers/mapPrintHandler.js
@@ -3,6 +3,7 @@ import app from "../../components/app.js";
 
 function onMapPrintHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+
   render(app("map", subwayDatas));
 }
 
diff --git a/src/managers/handlers/sectionHandler.js b/src/managers/handlers/sectionHandler.js
index 008b97fab..081b2d9dd 100644
--- a/src/managers/handlers/sectionHandler.js
+++ b/src/managers/handlers/sectionHandler.js
@@ -1,6 +1,7 @@
 import render from "../render.js";
 import app from "../../components/app.js";
 import { validateSectionDelete, validateOrder, validateSection } from "../validation/validation.js";
+import { SECTION_LINE_MENU_BUTTON, SECTION_STATION_SELECTOR, SECTION_ORDER_INPUT, SECTION_ADD_BUTTON, SECTION_DELETE_BUTTON } from "../../constants/tag.js";
 
 function onSectionHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
@@ -19,8 +20,8 @@ function onLineSelectHandler() {
 }
 
 function onAddSectionHandler() {
-  let station = validateSection(document.getElementById("section-station-selector").value);
-  let order = validateOrder(document.getElementById("section-order-input").value);
+  let station = validateSection(document.getElementById(SECTION_STATION_SELECTOR).value);
+  let order = validateOrder(document.getElementById(SECTION_ORDER_INPUT).value);
 
   if (station && order) {
     addSection(station, order);
@@ -55,10 +56,9 @@ function onSectionDeleteHandler() {
 
 function sectionDelete(deleteTarget, deleteTargetIdx) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-
   let targetLineIdx = subwayDatas.lines.findIndex((line) => line.name === subwayDatas.targetLine);
-  subwayDatas.lines[targetLineIdx].stops.splice(deleteTargetIdx, 1);
 
+  subwayDatas.lines[targetLineIdx].stops.splice(deleteTargetIdx, 1);
   subwayDatas.subwayStations.forEach((station) => {
     if (station.name === deleteTarget) {
       station.line.splice(subwayDatas.subwayStations.indexOf(subwayDatas.targetLine), 1);
@@ -75,16 +75,16 @@ function renderAndUpdateEvent(subwayDatas) {
 }
 
 function updateEventToBtns() {
-  let sectionBtn = document.getElementById("section-add-button");
-  sectionBtn && document.getElementById("section-add-button").addEventListener("click", onAddSectionHandler);
+  let sectionBtn = document.getElementById(SECTION_ADD_BUTTON);
+  sectionBtn && document.getElementById(SECTION_ADD_BUTTON).addEventListener("click", onAddSectionHandler);
 
-  let lineBtns = document.getElementsByClassName(".section-line-menu-button");
+  let lineBtns = document.getElementsByClassName(SECTION_LINE_MENU_BUTTON);
   for (let i = 0; i < lineBtns.length; i++) {
     let eachBtn = lineBtns[i];
     eachBtn.addEventListener("click", onLineSelectHandler);
   }
 
-  let deleteBtns = document.getElementsByClassName(".section-delete-button");
+  let deleteBtns = document.getElementsByClassName(SECTION_DELETE_BUTTON);
   for (let i = 0; i < deleteBtns.length; i++) {
     deleteBtns[i].addEventListener("click", onSectionDeleteHandler);
   }
diff --git a/src/managers/handlers/stationHandlers.js b/src/managers/handlers/stationHandlers.js
index c84271b8e..44914fb06 100644
--- a/src/managers/handlers/stationHandlers.js
+++ b/src/managers/handlers/stationHandlers.js
@@ -1,7 +1,8 @@
 import render from "../render.js";
 import app from "../../components/app.js";
 import { validateInput, validateStationDelete } from "../validation/validation.js";
-import { Station } from "../../objects/objests.js";
+import { Station } from "../../objects/objects.js";
+import { STATION_NAME_INPUT, STATION_ADD_BUTTON, STATION_DELETE_BUTTON } from "../../constants/tag.js";
 
 function renderAndUpdateEvent(subwayDatas) {
   render(app("station", subwayDatas));
@@ -9,12 +10,13 @@ function renderAndUpdateEvent(subwayDatas) {
 }
 function onStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
+
   renderAndUpdateEvent(subwayDatas);
 }
 
 function onAddStationHandler() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
-  let stationName = validateInput(document.getElementById("station-add-input").value, "station-add-input");
+  let stationName = validateInput(document.getElementById(STATION_NAME_INPUT).value, STATION_NAME_INPUT);
 
   if (stationName !== "") {
     let subwayStations = new Station(stationName);
@@ -25,9 +27,9 @@ function onAddStationHandler() {
 }
 
 function updateEvent() {
-  document.getElementById("station-add-button").addEventListener("click", onAddStationHandler);
+  document.getElementById(STATION_ADD_BUTTON).addEventListener("click", onAddStationHandler);
 
-  let deleteBtns = document.getElementsByClassName("station-delete-button");
+  let deleteBtns = document.getElementsByClassName(STATION_DELETE_BUTTON);
   for (let i = 0; i < deleteBtns.length; i++) {
     deleteBtns[i].addEventListener("click", onDeleteStationHandler);
   }
diff --git a/src/managers/init.js b/src/managers/init.js
index ad925589d..04eb6b8a4 100644
--- a/src/managers/init.js
+++ b/src/managers/init.js
@@ -2,31 +2,29 @@ import { onStationHandler } from "./handlers/stationHandlers.js";
 import { onLineHandler } from "./handlers/lineHandlers.js";
 import { onSectionHandler } from "./handlers/sectionHandler.js";
 import { onMapPrintHandler } from "./handlers/mapPrintHandler.js";
+import { STATION_MANAGER_BUTTON, LINE_MANAGER_BUTTON, SECTION_MANAGER_BUTTON, MAP_PRINT_MANAGER_BUTTON } from "../constants/tag.js";
 
 function initHTML() {
   const buttonBox = document.createElement("div");
+
   buttonBox.innerHTML = `
-   <button id="station-manager-button">1. 역 관리</button>
-    <button id="line-manager-button">2. 노선 관리</button>
-    <button id="section-manager-button">3. 구간 관리</button>
-    <button id="map-print-manager-button">4. 지하철 노선도 출력</button>`;
+   <button id=${STATION_MANAGER_BUTTON}>1. 역 관리</button>
+    <button id=${LINE_MANAGER_BUTTON}>2. 노선 관리</button>
+    <button id=${SECTION_MANAGER_BUTTON}>3. 구간 관리</button>
+    <button id=${MAP_PRINT_MANAGER_BUTTON}>4. 지하철 노선도 출력</button>`;
   document.body.append(buttonBox);
 
   const mainBox = document.createElement("div");
+
   mainBox.id = "main-box";
   document.body.append(mainBox);
 }
 
 function addEventToMainBtns() {
-  // const buttons = [{ name: "station-manager-button", handler: onStationHandler }]
-
-  // buttons.forEach(({ name, handler }) => {
-  //   document.getElementById(name).addEventListener("click", handler);
-  // });
-  document.getElementById("station-manager-button").addEventListener("click", onStationHandler);
-  document.getElementById("line-manager-button").addEventListener("click", onLineHandler);
-  document.getElementById("section-manager-button").addEventListener("click", onSectionHandler);
-  document.getElementById("map-print-manager-button").addEventListener("click", onMapPrintHandler);
+  document.getElementById(STATION_MANAGER_BUTTON).addEventListener("click", onStationHandler);
+  document.getElementById(LINE_MANAGER_BUTTON).addEventListener("click", onLineHandler);
+  document.getElementById(SECTION_MANAGER_BUTTON).addEventListener("click", onSectionHandler);
+  document.getElementById(MAP_PRINT_MANAGER_BUTTON).addEventListener("click", onMapPrintHandler);
 }
 
 export { initHTML, addEventToMainBtns };
diff --git a/src/managers/validation/alert.js b/src/managers/validation/alert.js
index 3b2760ce6..00c6f5463 100644
--- a/src/managers/validation/alert.js
+++ b/src/managers/validation/alert.js
@@ -1,9 +1,7 @@
-//역 검증 (중복, 공백, 2자 미만)
 function stationNameAlert(inputValue) {
   return uniqueStationNameAlert(inputValue) || spaceAlert(inputValue) || underTwoCharacterAlert(inputValue);
 }
 
-//중복된 역 이름 검증
 function uniqueStationNameAlert(inputValue) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
@@ -17,7 +15,6 @@ function uniqueStationNameAlert(inputValue) {
   return alertMsg;
 }
 
-//공백 입력 검증
 function spaceAlert(inputValue) {
   let alertMsg = "";
 
@@ -28,7 +25,6 @@ function spaceAlert(inputValue) {
   return alertMsg;
 }
 
-//2자 미만 검증
 function underTwoCharacterAlert(inputValue) {
   let alertMsg = "";
 
@@ -39,12 +35,10 @@ function underTwoCharacterAlert(inputValue) {
   return alertMsg;
 }
 
-//노선에 등록된 역 삭제 전 검증
 function stationDeleteAlert(deleteTarget) {
   return inlineAlert(deleteTarget);
 }
 
-//노선에 포함된 역이 2개 이하일 때 삭제 시 alert
 function inlineAlert(deleteTarget) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
@@ -58,12 +52,10 @@ function inlineAlert(deleteTarget) {
   return alertMsg;
 }
 
-//라인 검증 (중복)
 function lineNameAlert(inputValue) {
   return ununiqueLineNameAlert(inputValue) || spaceAlert(inputValue);
 }
 
-//중복된 라인 이름 검증
 function ununiqueLineNameAlert(inputValue) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
@@ -77,12 +69,10 @@ function ununiqueLineNameAlert(inputValue) {
   return alertMsg;
 }
 
-//상행종점, 하행종점역 검증
 function startAndEndStationAlert(startAndEndStations) {
   return unUniqueLineAlert(startAndEndStations) || sameStartAndEndStationAlert(startAndEndStations);
 }
 
-//상행 종점역과 하행 종점역이 중복되는 호선이 이미 존재하는 경우
 function unUniqueLineAlert(startAndEndStations) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
@@ -96,7 +86,6 @@ function unUniqueLineAlert(startAndEndStations) {
   return alertMsg;
 }
 
-// 상행 종점역과 하행 종점역이 동일한 역인 경우 alert
 function sameStartAndEndStationAlert(startAndEndStations) {
   let alertMsg = "";
 
@@ -107,7 +96,6 @@ function sameStartAndEndStationAlert(startAndEndStations) {
   return alertMsg;
 }
 
-//노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert
 function sectionDeleteAlert() {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
@@ -139,7 +127,6 @@ function orderAlert(order) {
 function sectionAlert(stationName) {
   let subwayDatas = JSON.parse(localStorage.getItem("subwayDatas"));
   let alertMsg = "";
-
   let targetLineIdx = subwayDatas.lines.findIndex((line) => line.name === subwayDatas.targetLine);
 
   if (subwayDatas.lines[targetLineIdx].stops.indexOf(stationName) !== -1) {
diff --git a/src/managers/validation/validation.js b/src/managers/validation/validation.js
index b6f4131aa..c277bd9bd 100644
--- a/src/managers/validation/validation.js
+++ b/src/managers/validation/validation.js
@@ -1,9 +1,10 @@
 import { stationNameAlert, stationDeleteAlert, lineNameAlert, startAndEndStationAlert, sectionDeleteAlert, orderAlert, sectionAlert } from "./alert.js";
+import { STATION_NAME_INPUT } from "../../constants/tag.js";
 
 function validateInput(input, inputTagID) {
   let alertMsg = "";
 
-  inputTagID === "station-add-input" ? (alertMsg = stationNameAlert(input)) : (alertMsg = lineNameAlert(input));
+  inputTagID === STATION_NAME_INPUT ? (alertMsg = stationNameAlert(input)) : (alertMsg = lineNameAlert(input));
 
   if (alertMsg) {
     alert(alertMsg);
@@ -28,7 +29,6 @@ function validateStationDelete(deleteTarget) {
 
 function validateSectionDelete() {
   let alertMsg = sectionDeleteAlert();
-  //노선에 포함된 역이 2개 이하일 때 노선에서 제거 시 alert
 
   if (alertMsg !== "") {
     alert(alertMsg);
diff --git a/src/objects/objests.js b/src/objects/objects.js
similarity index 99%
rename from src/objects/objests.js
rename to src/objects/objects.js
index 8be2ebbbc..4116878da 100644
--- a/src/objects/objests.js
+++ b/src/objects/objects.js
@@ -7,4 +7,5 @@ function Station(name) {
   this.name = name;
   this.line = [];
 }
+
 export { Line, Station };