From 648cefe4c3ab977819300dc07352ec5b46d5fe43 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 21:44:36 +0900
Subject: [PATCH 01/62] docs: add project description and feature list

---
 README.md | 168 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 86 insertions(+), 82 deletions(-)

diff --git a/README.md b/README.md
index e97a1d649..abc71c1cb 100644
--- a/README.md
+++ b/README.md
@@ -1,114 +1,118 @@
 # 🚇 지하철 노선도 미션
 
+## 소개
+나만의 역을 만들고, 만들어진 역들을 바탕으로 나만의 지하철 노선과 지하철 노선도를 제작할 수 있는 프로그램입니다. 실제 지하철 노선도와 유사한 노선도를 제작할 수 있도록 여러 기능과 제약사항이 제공됩니다.
+
+<br/><br/>
+
 ## 🚀 기능 요구사항
 
+<br/>
+
 ### 지하철 역 관련 기능
-- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
-- 중복된 지하철 역 이름이 등록될 수 없다.
-- 지하철 역은 2글자 이상이어야 한다.
-- 지하철 역의 목록을 조회할 수 있다.
+- 지하철 역을 추가 (add subway station)
+  - :exclamation: 예외#1 - 추가하려는 역이 다른 역과 중복된 이름을 가질 경우
+  - :exclamation: 예외#2 - 역의 이름이 2글자 미만일 경우(한글, 영어 모두)
+- 지하철 역을 삭제 (delete subway station)
+  - :exclamation: 예외#3 - 삭제하려는 역이 노선에 추가되어 있는 경우
+- 지하철 역 추가 가능 여부 검사 (check if the subway station can be added)
+  - :wrench: 해결(예외 #1,#2) - 추가하려는 역의 이름이 다른 역과 중복되는지, 2글자 미만인지를 검사
+- 지하철 역 삭제 가능 여부 검사 (check if the subway station can be deleted)
+  - :wrench: 해결(예외 #3) - 삭제할 수 없는 역을 삭제하려는 것인지를 검사
+- 전체 지하철 역의 목록을 조회 (get all subway stations)
+
+<br/>
 
 ### 지하철 노선 관련 기능
-- 지하철 노선을 등록하고 삭제할 수 있다.
-- 중복된 지하철 노선 이름이 등록될 수 없다.
-- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
-- 지하철 노선의 목록을 조회할 수 있다.
+- 지하철 노선을 추가 (add subway line)
+  - :exclamation: 예외#4 - 추가하려는 노선이 다른 노선과 중복된 이름을 가질 경우
+  - :exclamation: 예외#5 - 추가할 때 설정하는 상행, 하행 종점역이 같을 경우
+- 지하철 노선을 삭제 (delete subway line)
+- 지하철 노선 추가 가능 여부 검사 (check if the subway line can be added)
+  - :wrench: 해결(예외 #4,#5) - 추가하려는 노선이 다른 노선과 중복된 이름을 가지는지, 해당 노선의 상행, 하행 종점역이 같은지를 검사 
+- 지하철 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회 (get all subway stations in subway line)
+- 전체 지하철 노선의 목록을 조회 (get all subway lines)
+
+<br/>
 
 ### 지하철 구간 추가 기능
-- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
-- 하나의 역은 여러개의 노선에 추가될 수 있다.
-- 역과 역 사이에 새로운 역이 추가 될 수 있다.
-- 노선에서 갈래길은 생길 수 없다.
+- 지하철 노선에 구간을 추가, 즉 지하철 노선 안의 두 역 사이에 새로운 역 끼워넣기(insert subway station in subway line)
+  - :exclamation: 예외#6 - 하나의 노선 안에서 그 노선에 속한 역들 중 3개 이상의 역들과 연결된 역이 있는 경우 즉, 갈래길이 있는 경우
+  - :exclamation: 예외#7 - 끼워 넣으려는 역이 이미 노선 안에 있는 경우
+- 지하철 노선 구간 추가 가능성 여부 검사 (check if the subway station can be inserted)
+  - :wrench: 해결(예외 #6,#7) - 구간을 추가시 역이 추가된 노선 안에 갈래길이 생기는지, 끼워 넣으려는 역이 이미 노선 안에 있는지 검사
+
+<br/>
 
 <img width="500" src="/images/section1.png">
 
+<br/>
+
 ### 지하철 구간 삭제 기능
-- 노선에 등록된 역을 제거할 수 있다.
-- 종점을 제거할 경우 다음 역이 종점이 된다.
-- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
+- 지하철 노선에 구간을 삭제, 즉 지하철 노선 안에서 특정 역을 빼기 (pull out subway station in subway line)
+  - :exclamation: 예외#8 - 삭제한 역이 노선의 종점일 경우
+  - :exclamation: 예외#9 - 노선에 포함된 역을 삭제하려는 시점에 그 노선에 포함된 역이 두개 이하일 경우
+- 지하철 노선 구간 삭제 가능성 여부 검사 (check if the subway station can be pulled out)
+  - :wrench: 해결(예외 #8, 9) - 삭제하려는 노선이 종점인지, 삭제 후 그 노선에 포함된 역이 두개 이하인지를 검사
 
-<img width="500" src="/images/section2.png">
+<br/>
 
-### 지하철 노선에 등록된 역 조회 기능
-- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
+### 로컬 스토리지 기능
+- 전체 지하철 역, 노선 목록을 포함한 지하철 노선도 정보를 로컬 스토리지에 저장 (save subway map info to local storage)
+- 전체 지하철 역, 노선 목록을 포함한 지하철 노선도 정보를 로컬 스토리지에서 불러오기 (load subway map info from local storage)
 
 <br/>
 
-## 💻 프로그램 실행 결과
+### 역관리 인터페이스 기능
+- 역 추가 기능 호출 or 안내메세지 출력 (trigger 'add subway station' | alert with message)
+  - 잘못된 입력이 들어왔을 때, 역을 추가할 수 없는 이유를 알려주어 재입력을 유도
+- 역 삭제 기능 호출 or 안내메세지 출력 (trigger 'delete subway station' | alert with message)
+  - 삭제할 수 없는 역을 삭제하려 할 때, 역을 삭제할 수 없는 이유를 알려주어 재입력을 유도
 
-### 역관리
-<img width="100%" src="/images/station_manager.gif">
+<br/>
 
-### 노선관리
-<img width="100%" src="/images/line_manager.gif">
+### 노선관리 인터페이스 기능
+- 노선 추가 기능 호출 or 안내메세지 출력 (trigger 'add subway line' | alert with message)
+  - 잘못된 입력이 들어왔을 때, 노선을 추가할 수 없는 이유를 알려주어 재입력을 유도
+- 노선 삭제 기능 호출 (trigger 'delete subway line')
 
-### 구간관리
-<img width="100%" src="/images/section_manager.gif">
+<br/>
 
-### 노선도 출력
-<img width="100%" src="/images/map_print_manager.gif">
+### 구간관리 인터페이스 기능
+- 구간 추가 기능 호출 or 안내메세지 출력 (trigger 'insert subway station in subway line' | alert with message)
+  - 구간을 추가할 수 없는 이유를 알려주어 재입력을 유도
+- 구간 삭제 기능 호출 or 안내메세지 출력 (trigger 'pull out subway station from subway line' | alert with message)
+  - 역을 삭제할 수 없는 이유를 알려주면서 노선 자체를 제거할 방법을 안내
 
+<br/>
 
-## ✅ 프로그래밍 요구사항
+### 노선도 출력 인터페이스 기능
+- 노선도 정보 조회 기능 호출 & 조회한 노선도 보여주기 (trigger 'get all subway lines' & show subway map)
 
-### 메뉴 버튼
-- 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
-- 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
-- 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
-- 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
+<br/>
 
-### 지하철 역 관련 기능
-- 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
-- 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
-- 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
+<img width="500" src="/images/section2.png">
 
-### 지하철 노선 관련 기능
-- 지하철 노선의 이름을 입력하는 input 태그는 `#line-name-input` id값을 가진다.
-- 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
-- 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
-- 지하철 노선을 추가하는 button 태그는 `#line-add-button` id값을 가진다.
-- 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
+<br/><br/>
 
-### 지하철 구간 추가 기능
-- 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
-- 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
-- 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
-- 지하철 구간을 등록하는 button 태그는 `#section-add-button` id값을 가진다.
-- 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
-
-### 지하철 노선도 출력 기능
-- 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
-
-### 기존 요구사항
-
-- 사용자가 잘못된 입력 값을 작성한 경우 `alert`을 이용해 메시지를 보여주고, 재입력할 수 있게 한다.
-- 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않고, 순수 Vanilla JS로만 구현한다.
-- **자바스크립트 코드 컨벤션을 지키면서 프로그래밍** 한다
-  - [https://google.github.io/styleguide/jsguide.html](https://google.github.io/styleguide/jsguide.html)
-  - [https://ui.toast.com/fe-guide/ko_CODING-CONVENSION/](https://ui.toast.com/fe-guide/ko_CODING-CONVENTION)
-- **indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용**한다.
-  - 예를 들어 while문 안에 if문이 있으면 들여쓰기는 2이다.
-  - 힌트: indent(인덴트, 들여쓰기) depth를 줄이는 좋은 방법은 함수(또는 메소드)를 분리하면 된다.
-- **함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.**
-  - 함수(또는 메소드)가 한 가지 일만 잘 하도록 구현한다.
-- 변수 선언시 `var` 를 사용하지 않는다. `const` 와 `let` 을 사용한다.
-  - [const](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const)
-  - [let](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let)
-- `import` 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.
-  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import)
-- `template literal`을 이용해 데이터와 html string을 가독성 좋게 표현한다.
-  - [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 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다. 
-- [localStorage](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.
+## 💻 프로그램 실행 결과
+
+<br/>
+
+### 역관리
+<img width="100%" src="/images/station_manager.gif">
+
+<br/>
+
+### 노선관리
+<img width="100%" src="/images/line_manager.gif">
 
 <br/>
 
-## 📝 미션 저장소 및 진행 요구사항
+### 구간관리
+<img width="100%" src="/images/section_manager.gif">
+
+<br/>
 
-- 미션은 [https://github.com/woowacourse/javascript-subway-map-precours](https://github.com/woowacourse/javascript-subway-map-precourse) 저장소를 fork/clone해 시작한다.
-- **기능을 구현하기 전에 javascript-subway-precourse/docs/README.md 파일에 구현할 기능 목록**을 정리해 추가한다.
-- **git의 commit 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가**한다.
-- [프리코스 과제 제출](https://github.com/woowacourse/woowacourse-docs/tree/master/precourse) 문서 절차를 따라 미션을 제출한다.
+### 노선도 출력
+<img width="100%" src="/images/map_print_manager.gif">

From bb5a68a259b362dcabd015c381df7dcf899dc929 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 21:45:47 +0900
Subject: [PATCH 02/62] feat: initialize project setup

---
 .babelrc        |  3 +++
 .eslintrc.json  | 17 +++++++++++++++++
 .gitignore      |  4 ++++
 README.md       | 16 +++++++++++++++-
 babel.config.js |  6 ++++++
 5 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 .babelrc
 create mode 100644 .eslintrc.json
 create mode 100644 .gitignore
 create mode 100644 babel.config.js

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..8aa924d7c
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 000000000..9a19b822b
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,17 @@
+{
+    "extends": ["airbnb", "prettier"],
+    "env": {
+        "browser": true, 
+        "jest/globals": true,
+        "es2020": true
+    },
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": ["prettier", "jest", "@babel"],
+    "rules": {
+        "import/extensions": ["off"]
+    }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..448cd77c1
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+.vscode/
+node_modules/
+package.json
+package-lock.json
diff --git a/README.md b/README.md
index abc71c1cb..fb4149461 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,7 @@
 # 🚇 지하철 노선도 미션
 
 ## 소개
+
 나만의 역을 만들고, 만들어진 역들을 바탕으로 나만의 지하철 노선과 지하철 노선도를 제작할 수 있는 프로그램입니다. 실제 지하철 노선도와 유사한 노선도를 제작할 수 있도록 여러 기능과 제약사항이 제공됩니다.
 
 <br/><br/>
@@ -10,6 +11,7 @@
 <br/>
 
 ### 지하철 역 관련 기능
+
 - 지하철 역을 추가 (add subway station)
   - :exclamation: 예외#1 - 추가하려는 역이 다른 역과 중복된 이름을 가질 경우
   - :exclamation: 예외#2 - 역의 이름이 2글자 미만일 경우(한글, 영어 모두)
@@ -24,18 +26,20 @@
 <br/>
 
 ### 지하철 노선 관련 기능
+
 - 지하철 노선을 추가 (add subway line)
   - :exclamation: 예외#4 - 추가하려는 노선이 다른 노선과 중복된 이름을 가질 경우
   - :exclamation: 예외#5 - 추가할 때 설정하는 상행, 하행 종점역이 같을 경우
 - 지하철 노선을 삭제 (delete subway line)
 - 지하철 노선 추가 가능 여부 검사 (check if the subway line can be added)
-  - :wrench: 해결(예외 #4,#5) - 추가하려는 노선이 다른 노선과 중복된 이름을 가지는지, 해당 노선의 상행, 하행 종점역이 같은지를 검사 
+  - :wrench: 해결(예외 #4,#5) - 추가하려는 노선이 다른 노선과 중복된 이름을 가지는지, 해당 노선의 상행, 하행 종점역이 같은지를 검사
 - 지하철 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회 (get all subway stations in subway line)
 - 전체 지하철 노선의 목록을 조회 (get all subway lines)
 
 <br/>
 
 ### 지하철 구간 추가 기능
+
 - 지하철 노선에 구간을 추가, 즉 지하철 노선 안의 두 역 사이에 새로운 역 끼워넣기(insert subway station in subway line)
   - :exclamation: 예외#6 - 하나의 노선 안에서 그 노선에 속한 역들 중 3개 이상의 역들과 연결된 역이 있는 경우 즉, 갈래길이 있는 경우
   - :exclamation: 예외#7 - 끼워 넣으려는 역이 이미 노선 안에 있는 경우
@@ -49,6 +53,7 @@
 <br/>
 
 ### 지하철 구간 삭제 기능
+
 - 지하철 노선에 구간을 삭제, 즉 지하철 노선 안에서 특정 역을 빼기 (pull out subway station in subway line)
   - :exclamation: 예외#8 - 삭제한 역이 노선의 종점일 경우
   - :exclamation: 예외#9 - 노선에 포함된 역을 삭제하려는 시점에 그 노선에 포함된 역이 두개 이하일 경우
@@ -58,12 +63,14 @@
 <br/>
 
 ### 로컬 스토리지 기능
+
 - 전체 지하철 역, 노선 목록을 포함한 지하철 노선도 정보를 로컬 스토리지에 저장 (save subway map info to local storage)
 - 전체 지하철 역, 노선 목록을 포함한 지하철 노선도 정보를 로컬 스토리지에서 불러오기 (load subway map info from local storage)
 
 <br/>
 
 ### 역관리 인터페이스 기능
+
 - 역 추가 기능 호출 or 안내메세지 출력 (trigger 'add subway station' | alert with message)
   - 잘못된 입력이 들어왔을 때, 역을 추가할 수 없는 이유를 알려주어 재입력을 유도
 - 역 삭제 기능 호출 or 안내메세지 출력 (trigger 'delete subway station' | alert with message)
@@ -72,6 +79,7 @@
 <br/>
 
 ### 노선관리 인터페이스 기능
+
 - 노선 추가 기능 호출 or 안내메세지 출력 (trigger 'add subway line' | alert with message)
   - 잘못된 입력이 들어왔을 때, 노선을 추가할 수 없는 이유를 알려주어 재입력을 유도
 - 노선 삭제 기능 호출 (trigger 'delete subway line')
@@ -79,6 +87,7 @@
 <br/>
 
 ### 구간관리 인터페이스 기능
+
 - 구간 추가 기능 호출 or 안내메세지 출력 (trigger 'insert subway station in subway line' | alert with message)
   - 구간을 추가할 수 없는 이유를 알려주어 재입력을 유도
 - 구간 삭제 기능 호출 or 안내메세지 출력 (trigger 'pull out subway station from subway line' | alert with message)
@@ -87,6 +96,7 @@
 <br/>
 
 ### 노선도 출력 인터페이스 기능
+
 - 노선도 정보 조회 기능 호출 & 조회한 노선도 보여주기 (trigger 'get all subway lines' & show subway map)
 
 <br/>
@@ -100,19 +110,23 @@
 <br/>
 
 ### 역관리
+
 <img width="100%" src="/images/station_manager.gif">
 
 <br/>
 
 ### 노선관리
+
 <img width="100%" src="/images/line_manager.gif">
 
 <br/>
 
 ### 구간관리
+
 <img width="100%" src="/images/section_manager.gif">
 
 <br/>
 
 ### 노선도 출력
+
 <img width="100%" src="/images/map_print_manager.gif">
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 000000000..14906bb61
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    '@babel/plugin-proposal-private-methods',
+    '@babel/plugin-proposal-class-properties',
+  ],
+};

From 7a56253a4ac94616f61f46b2d41d09ab8b296f06 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 21:53:13 +0900
Subject: [PATCH 03/62] feat: add subway station

---
 .eslintrc.json               | 3 ++-
 src/classes/subwayMap.js     | 7 +++++++
 src/classes/subwayStation.js | 8 ++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 src/classes/subwayMap.js
 create mode 100644 src/classes/subwayStation.js

diff --git a/.eslintrc.json b/.eslintrc.json
index 9a19b822b..54b9a9b16 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -12,6 +12,7 @@
     },
     "plugins": ["prettier", "jest", "@babel"],
     "rules": {
-        "import/extensions": ["off"]
+        "import/extensions": ["off"],
+        "lines-between-class-members": ["off"]
     }
 }
diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
new file mode 100644
index 000000000..2e5cdf902
--- /dev/null
+++ b/src/classes/subwayMap.js
@@ -0,0 +1,7 @@
+export default class SubwayMap {
+  #allStations = [];
+
+  addStation(station) {
+    this.#allStations.push(station);
+  }
+}
diff --git a/src/classes/subwayStation.js b/src/classes/subwayStation.js
new file mode 100644
index 000000000..3a88e01b3
--- /dev/null
+++ b/src/classes/subwayStation.js
@@ -0,0 +1,8 @@
+export default class SubwayStation {
+  constructor(name) {
+    this.name = name;
+    this.nextStations = [];
+    this.prevStations = [];
+    this.belongingLines = [];
+  }
+}

From 89f5f3b62161fecf1a88fd2e2ce06238afe882a6 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 21:57:36 +0900
Subject: [PATCH 04/62] feat: delete subway station

---
 src/classes/subwayMap.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index 2e5cdf902..5ecd114e5 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -4,4 +4,13 @@ export default class SubwayMap {
   addStation(station) {
     this.#allStations.push(station);
   }
+
+  deleteStation(stationName) {
+    const deletingStationIndex = this.#allStations.findIndex(
+      (registeredStation) => registeredStation.name === stationName
+    );
+    if(deletingStationIndex !== -1) {
+      this.#allStations.splice(deletingStationIndex, 1);
+    }
+  }
 }

From 5bab423fbb2262b3a1e47f776ade9657b629f547 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 22:02:43 +0900
Subject: [PATCH 05/62] feat: check if the subway station can be added

---
 src/classes/subwayMap.js     | 10 +++++++++-
 src/classes/subwayStation.js |  4 ++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index 5ecd114e5..7bd8f293a 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -5,11 +5,19 @@ export default class SubwayMap {
     this.#allStations.push(station);
   }
 
+  checkIsDuplicatedStationName(station) {
+    const isDuplicatedStationName = this.#allStations.some(
+      (registerdStation) => registerdStation.name === station.name
+    );
+
+    return isDuplicatedStationName;
+  }
+
   deleteStation(stationName) {
     const deletingStationIndex = this.#allStations.findIndex(
       (registeredStation) => registeredStation.name === stationName
     );
-    if(deletingStationIndex !== -1) {
+    if (deletingStationIndex !== -1) {
       this.#allStations.splice(deletingStationIndex, 1);
     }
   }
diff --git a/src/classes/subwayStation.js b/src/classes/subwayStation.js
index 3a88e01b3..4f725c417 100644
--- a/src/classes/subwayStation.js
+++ b/src/classes/subwayStation.js
@@ -1,4 +1,8 @@
 export default class SubwayStation {
+  static checkIsLineNameShort(line) {
+    return line.name.length < 2;
+  }
+
   constructor(name) {
     this.name = name;
     this.nextStations = [];

From 4f8ed0d54e9542df193fa872ee0fc444d4aba832 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 22:03:31 +0900
Subject: [PATCH 06/62] feat: check if the subway station can be deleted

---
 src/classes/subwayStation.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/classes/subwayStation.js b/src/classes/subwayStation.js
index 4f725c417..5ffc7329e 100644
--- a/src/classes/subwayStation.js
+++ b/src/classes/subwayStation.js
@@ -3,6 +3,10 @@ export default class SubwayStation {
     return line.name.length < 2;
   }
 
+  static checkIsStationBelongToLine(station) {
+    return station.belongingLines.length > 0;
+  }
+
   constructor(name) {
     this.name = name;
     this.nextStations = [];

From 13043c71dfff1c27b9eb2f7b4a47bbe1674da7cb Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 22:06:30 +0900
Subject: [PATCH 07/62] feat: add subway line

---
 src/classes/subwayLine.js | 7 +++++++
 src/classes/subwayMap.js  | 5 +++++
 2 files changed, 12 insertions(+)
 create mode 100644 src/classes/subwayLine.js

diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
new file mode 100644
index 000000000..80bb96091
--- /dev/null
+++ b/src/classes/subwayLine.js
@@ -0,0 +1,7 @@
+export default class SubwayLine {
+  constructor(name) {
+    this.name = name;
+    this.upTerminatingStation = null;
+    this.downTerminatingStation = null;
+  }
+}
diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index 7bd8f293a..f1297a8d0 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -1,5 +1,6 @@
 export default class SubwayMap {
   #allStations = [];
+  #allLines = [];
 
   addStation(station) {
     this.#allStations.push(station);
@@ -13,6 +14,10 @@ export default class SubwayMap {
     return isDuplicatedStationName;
   }
 
+  addLine(line) {
+    this.#allLines.push(line);
+  }
+
   deleteStation(stationName) {
     const deletingStationIndex = this.#allStations.findIndex(
       (registeredStation) => registeredStation.name === stationName

From 97cd77198235d95460bc7482b19b8035f1b0584b Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 22:09:23 +0900
Subject: [PATCH 08/62] feat: delete subway line

---
 src/classes/subwayMap.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index f1297a8d0..0301b7cad 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -14,10 +14,6 @@ export default class SubwayMap {
     return isDuplicatedStationName;
   }
 
-  addLine(line) {
-    this.#allLines.push(line);
-  }
-
   deleteStation(stationName) {
     const deletingStationIndex = this.#allStations.findIndex(
       (registeredStation) => registeredStation.name === stationName
@@ -26,4 +22,17 @@ export default class SubwayMap {
       this.#allStations.splice(deletingStationIndex, 1);
     }
   }
+
+  addLine(line) {
+    this.#allLines.push(line);
+  }
+
+  deleteLine(lineName) {
+    const deletingLineIndex = this.#allLines.findIndex(
+      (registerdLine) => registerdLine.name === lineName
+    );
+    if (deletingLineIndex !== -1) {
+      this.#allLines.splice(deletingLineIndex, 1);
+    }
+  }
 }

From 0568111a6f488c3a8fa16edcfe97a5862690afea Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 22:13:18 +0900
Subject: [PATCH 09/62] refactor: modify checking duplicated station name
 function to use station name

this is for more clarification and consistency with other functions' way
of doing work
---
 src/classes/subwayMap.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index 0301b7cad..d85e3aa0e 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -6,9 +6,9 @@ export default class SubwayMap {
     this.#allStations.push(station);
   }
 
-  checkIsDuplicatedStationName(station) {
+  checkIsDuplicatedStationName(stationName) {
     const isDuplicatedStationName = this.#allStations.some(
-      (registerdStation) => registerdStation.name === station.name
+      (registerdStation) => registerdStation.name === stationName
     );
 
     return isDuplicatedStationName;

From 54736bbdf871bbd2b219abba67f00a81847e081d Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 23:36:36 +0900
Subject: [PATCH 10/62] refactor: modify SubwayLine class constructor to set
 terminatingStations

---
 src/classes/subwayLine.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index 80bb96091..650a89517 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -1,7 +1,7 @@
 export default class SubwayLine {
-  constructor(name) {
+  constructor(name, upTerminatingStation, downTerminatingStation) {
     this.name = name;
-    this.upTerminatingStation = null;
-    this.downTerminatingStation = null;
+    this.upTerminatingStation = upTerminatingStation;
+    this.downTerminatingStation = downTerminatingStation;
   }
 }

From ed2dd75b31fec41f79149af4302220a32752bef9 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 23:46:35 +0900
Subject: [PATCH 11/62] feat: check if the subway line can be added

---
 src/classes/subwayLine.js | 7 +++++++
 src/classes/subwayMap.js  | 8 ++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index 650a89517..4adaddd8c 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -1,4 +1,11 @@
 export default class SubwayLine {
+  static checkIsTerminatingStationsSame(
+    upTerminatingStationName,
+    downTerminatingStationName
+  ) {
+    return downTerminatingStationName === upTerminatingStationName;
+  }
+
   constructor(name, upTerminatingStation, downTerminatingStation) {
     this.name = name;
     this.upTerminatingStation = upTerminatingStation;
diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index d85e3aa0e..461373bcd 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -27,6 +27,14 @@ export default class SubwayMap {
     this.#allLines.push(line);
   }
 
+  checkIsDuplicatedLineName(lineName) {
+    const isDuplicatedLineName = this.#allStations.some(
+      (registerdLine) => registerdLine.name === lineName
+    );
+
+    return isDuplicatedLineName;
+  }
+
   deleteLine(lineName) {
     const deletingLineIndex = this.#allLines.findIndex(
       (registerdLine) => registerdLine.name === lineName

From 77fe8be2993c2d693d9e712f77fd95e3d72cd546 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 23:49:45 +0900
Subject: [PATCH 12/62] refactor: adjust subway station name length limitation
 contant

---
 src/classes/subwayStation.js   | 4 +++-
 src/constants/configuration.js | 5 +++++
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 src/constants/configuration.js

diff --git a/src/classes/subwayStation.js b/src/classes/subwayStation.js
index 5ffc7329e..f69d06711 100644
--- a/src/classes/subwayStation.js
+++ b/src/classes/subwayStation.js
@@ -1,6 +1,8 @@
+import { SUBWAY_STATION_NAME_LENGTH_LIMIT } from '../constants/configuration.js';
+
 export default class SubwayStation {
   static checkIsLineNameShort(line) {
-    return line.name.length < 2;
+    return line.name.length < SUBWAY_STATION_NAME_LENGTH_LIMIT;
   }
 
   static checkIsStationBelongToLine(station) {
diff --git a/src/constants/configuration.js b/src/constants/configuration.js
new file mode 100644
index 000000000..722f61c7c
--- /dev/null
+++ b/src/constants/configuration.js
@@ -0,0 +1,5 @@
+export const SUBWAY_STATION_NAME_LENGTH_LIMIT = 2;
+
+export default {
+  SUBWAY_STATION_NAME_LENGTH_LIMIT,
+};

From a0eb285787e5188bc073f732ed3cae7ebeb58072 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Sun, 13 Dec 2020 23:51:27 +0900
Subject: [PATCH 13/62] fix: fix checking station Name function parameter typo

---
 src/classes/subwayStation.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/classes/subwayStation.js b/src/classes/subwayStation.js
index f69d06711..d5085deee 100644
--- a/src/classes/subwayStation.js
+++ b/src/classes/subwayStation.js
@@ -1,8 +1,8 @@
 import { SUBWAY_STATION_NAME_LENGTH_LIMIT } from '../constants/configuration.js';
 
 export default class SubwayStation {
-  static checkIsLineNameShort(line) {
-    return line.name.length < SUBWAY_STATION_NAME_LENGTH_LIMIT;
+  static checkIsStationNameShort(stationName) {
+    return stationName.length < SUBWAY_STATION_NAME_LENGTH_LIMIT;
   }
 
   static checkIsStationBelongToLine(station) {

From 29acb4fa06da19b30f7a57d373621fc7f24a05b9 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 00:11:07 +0900
Subject: [PATCH 14/62] refactor: modify SubwayStation class to have belonging
 line names instead of beloinging lines

---
 src/classes/subwayStation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/classes/subwayStation.js b/src/classes/subwayStation.js
index d5085deee..2d18300c6 100644
--- a/src/classes/subwayStation.js
+++ b/src/classes/subwayStation.js
@@ -13,6 +13,6 @@ export default class SubwayStation {
     this.name = name;
     this.nextStations = [];
     this.prevStations = [];
-    this.belongingLines = [];
+    this.belongingLineNames = [];
   }
 }

From 108f1fb00d9b9c8c9587d50671e9bed0e4e3e324 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 00:19:17 +0900
Subject: [PATCH 15/62] feat: get all subway stations in subway line

---
 src/classes/subwayLine.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index 4adaddd8c..4dc2616b6 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -11,4 +11,23 @@ export default class SubwayLine {
     this.upTerminatingStation = upTerminatingStation;
     this.downTerminatingStation = downTerminatingStation;
   }
+
+  #getNextStationInLine(station) {
+    const nextStationInLine = station.nextStations.find((nextStation) =>
+      nextStation.belongingLineNames.some((lineName) => lineName === this.name)
+    );
+
+    return nextStationInLine;
+  }
+
+  get allStations() {
+    const allStations = [];
+    let nextStation = this.#getNextStationInLine(this.upTerminatingStation);
+    while (nextStation) {
+      allStations.push(allStations);
+      nextStation = this.#getNextStationInLine(nextStation);
+    }
+
+    return allStations;
+  }
 }

From 81513f3ef5835f87c1ff5a4e069d2c50026d7462 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 00:26:39 +0900
Subject: [PATCH 16/62] docs: modify feature list for more clarification

---
 README.md | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index fb4149461..4dbb71fe1 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,6 @@
   - :wrench: 해결(예외 #1,#2) - 추가하려는 역의 이름이 다른 역과 중복되는지, 2글자 미만인지를 검사
 - 지하철 역 삭제 가능 여부 검사 (check if the subway station can be deleted)
   - :wrench: 해결(예외 #3) - 삭제할 수 없는 역을 삭제하려는 것인지를 검사
-- 전체 지하철 역의 목록을 조회 (get all subway stations)
 
 <br/>
 
@@ -34,7 +33,13 @@
 - 지하철 노선 추가 가능 여부 검사 (check if the subway line can be added)
   - :wrench: 해결(예외 #4,#5) - 추가하려는 노선이 다른 노선과 중복된 이름을 가지는지, 해당 노선의 상행, 하행 종점역이 같은지를 검사
 - 지하철 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회 (get all subway stations in subway line)
-- 전체 지하철 노선의 목록을 조회 (get all subway lines)
+
+<br/>
+
+### 지하철 전체 정보 조회 기능
+
+- 전체 지하철 역의 목록 조회 (get all subway stations)
+- 전체 지하철 노선의 목록 조회 (get all subway lines)
 
 <br/>
 
@@ -97,7 +102,7 @@
 
 ### 노선도 출력 인터페이스 기능
 
-- 노선도 정보 조회 기능 호출 & 조회한 노선도 보여주기 (trigger 'get all subway lines' & show subway map)
+- 전체 지하철 노선의 목록 조회 기능 호출 & 조회한 노선도 보여주기 (trigger 'get all subway lines' & show subway map)
 
 <br/>
 

From 42be5be662ec70a2d9ba00067b593603fdebd413 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 11:49:02 +0900
Subject: [PATCH 17/62] fix: connect terminating stations when subway line is
 made

---
 src/classes/subwayLine.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index 4dc2616b6..04ba85000 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -10,6 +10,8 @@ export default class SubwayLine {
     this.name = name;
     this.upTerminatingStation = upTerminatingStation;
     this.downTerminatingStation = downTerminatingStation;
+    this.upTerminatingStation.nextStation = this.downTerminatingStation;
+    this.downTerminatingStation.prevStation = this.upTerminatingStation;
   }
 
   #getNextStationInLine(station) {

From c654b4ed0721636538f03c14568f8a6dd02fb84a Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 11:58:07 +0900
Subject: [PATCH 18/62] feat: get all subway stations

---
 src/classes/subwayMap.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index 461373bcd..d9edf4c0c 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -2,6 +2,10 @@ export default class SubwayMap {
   #allStations = [];
   #allLines = [];
 
+  get allStations() {
+    return this.#allStations;
+  }
+
   addStation(station) {
     this.#allStations.push(station);
   }

From 092fd852e0aea72604fa88172d8a56aafc971258 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 11:58:27 +0900
Subject: [PATCH 19/62] feat: get all subway lines

---
 src/classes/subwayMap.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index d9edf4c0c..89ba77828 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -6,6 +6,10 @@ export default class SubwayMap {
     return this.#allStations;
   }
 
+  get allLines() {
+    return this.#allLines;
+  }
+
   addStation(station) {
     this.#allStations.push(station);
   }

From cefa80ace763977bf46426cd81532eb10f7f7bbf Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 12:09:55 +0900
Subject: [PATCH 20/62] refactor: attach 'ByName' to delete station & delete
 line function for more clarity

---
 src/classes/subwayMap.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index 89ba77828..d694291d3 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -22,7 +22,7 @@ export default class SubwayMap {
     return isDuplicatedStationName;
   }
 
-  deleteStation(stationName) {
+  deleteStationByName(stationName) {
     const deletingStationIndex = this.#allStations.findIndex(
       (registeredStation) => registeredStation.name === stationName
     );
@@ -43,7 +43,7 @@ export default class SubwayMap {
     return isDuplicatedLineName;
   }
 
-  deleteLine(lineName) {
+  deleteLineByName(lineName) {
     const deletingLineIndex = this.#allLines.findIndex(
       (registerdLine) => registerdLine.name === lineName
     );

From 607d13933d1193ed4ed700a8f8379531db358e8d Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 15:41:34 +0900
Subject: [PATCH 21/62] fix: modify all class methods to use station name and
 line name

I made this change because I knew localStorage cannot store object reference
value which has circular relationship with other object. now, arrays
which contained all stations and lines now converted as object using
their names as its key
---
 src/classes/subwayLine.js    | 28 +++---------------------
 src/classes/subwayMap.js     | 42 ++++++++++++++----------------------
 src/classes/subwayStation.js |  9 ++++----
 3 files changed, 23 insertions(+), 56 deletions(-)

diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index 04ba85000..16037636c 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -6,30 +6,8 @@ export default class SubwayLine {
     return downTerminatingStationName === upTerminatingStationName;
   }
 
-  constructor(name, upTerminatingStation, downTerminatingStation) {
-    this.name = name;
-    this.upTerminatingStation = upTerminatingStation;
-    this.downTerminatingStation = downTerminatingStation;
-    this.upTerminatingStation.nextStation = this.downTerminatingStation;
-    this.downTerminatingStation.prevStation = this.upTerminatingStation;
-  }
-
-  #getNextStationInLine(station) {
-    const nextStationInLine = station.nextStations.find((nextStation) =>
-      nextStation.belongingLineNames.some((lineName) => lineName === this.name)
-    );
-
-    return nextStationInLine;
-  }
-
-  get allStations() {
-    const allStations = [];
-    let nextStation = this.#getNextStationInLine(this.upTerminatingStation);
-    while (nextStation) {
-      allStations.push(allStations);
-      nextStation = this.#getNextStationInLine(nextStation);
-    }
-
-    return allStations;
+  constructor(upTerminatingStationName, downTerminatingStationName) {
+    this.upTerminatingStationName = upTerminatingStationName;
+    this.downTerminatingStationName = downTerminatingStationName;
   }
 }
diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index d694291d3..5c55cdd5c 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -1,6 +1,6 @@
 export default class SubwayMap {
-  #allStations = [];
-  #allLines = [];
+  #allStations = {};
+  #allLines = {};
 
   get allStations() {
     return this.#allStations;
@@ -10,45 +10,35 @@ export default class SubwayMap {
     return this.#allLines;
   }
 
-  addStation(station) {
-    this.#allStations.push(station);
+  addStation(station, stationName) {
+    if (stationName in this.#allStations === false) {
+      this.#allStations[stationName] = station;
+    }
   }
 
   checkIsDuplicatedStationName(stationName) {
-    const isDuplicatedStationName = this.#allStations.some(
-      (registerdStation) => registerdStation.name === stationName
-    );
-
-    return isDuplicatedStationName;
+    return stationName in this.#allStations;
   }
 
   deleteStationByName(stationName) {
-    const deletingStationIndex = this.#allStations.findIndex(
-      (registeredStation) => registeredStation.name === stationName
-    );
-    if (deletingStationIndex !== -1) {
-      this.#allStations.splice(deletingStationIndex, 1);
+    if (stationName in this.#allStations) {
+      delete this.#allStations[stationName];
     }
   }
 
-  addLine(line) {
-    this.#allLines.push(line);
+  addLine(line, lineName) {
+    if (lineName in this.#allLines === false) {
+      this.#allLines[lineName] = line;
+    }
   }
 
   checkIsDuplicatedLineName(lineName) {
-    const isDuplicatedLineName = this.#allStations.some(
-      (registerdLine) => registerdLine.name === lineName
-    );
-
-    return isDuplicatedLineName;
+    return lineName in this.#allLines;
   }
 
   deleteLineByName(lineName) {
-    const deletingLineIndex = this.#allLines.findIndex(
-      (registerdLine) => registerdLine.name === lineName
-    );
-    if (deletingLineIndex !== -1) {
-      this.#allLines.splice(deletingLineIndex, 1);
+    if (lineName in this.#allLines) {
+      delete this.#allLines[lineName];
     }
   }
 }
diff --git a/src/classes/subwayStation.js b/src/classes/subwayStation.js
index 2d18300c6..a7ca34a85 100644
--- a/src/classes/subwayStation.js
+++ b/src/classes/subwayStation.js
@@ -6,13 +6,12 @@ export default class SubwayStation {
   }
 
   static checkIsStationBelongToLine(station) {
-    return station.belongingLines.length > 0;
+    return station.belongingLineNames.length > 0;
   }
 
-  constructor(name) {
-    this.name = name;
-    this.nextStations = [];
-    this.prevStations = [];
+  constructor() {
+    this.nextStationNames = [];
+    this.prevStationNames = [];
     this.belongingLineNames = [];
   }
 }

From a2e137aca43b7477240aabc9679378866ef6c683 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 16:10:50 +0900
Subject: [PATCH 22/62] test: add class methods test code

---
 src/classes/classes.test.js | 57 +++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/classes/classes.test.js

diff --git a/src/classes/classes.test.js b/src/classes/classes.test.js
new file mode 100644
index 000000000..e63955531
--- /dev/null
+++ b/src/classes/classes.test.js
@@ -0,0 +1,57 @@
+import SubWayStation from './subwayStation.js';
+import SubwayLine from './subwayLine.js';
+import SubwayMap from './subwayMap.js';
+
+describe('SubWayStation', () => {
+  const station1Name = 'station1';
+  const station2Name = 'station2';
+  const station3Name = 'station3';
+  const station1 = new SubWayStation();
+  const station2 = new SubWayStation();
+  const station3 = new SubWayStation();
+  const subwayMap = new SubwayMap();
+  subwayMap.addStation(station1, station1Name);
+  subwayMap.addStation(station2, station2Name);
+  subwayMap.addStation(station3, station3Name);
+  it('add subway station', () => {
+    expect(subwayMap.allStations).toHaveProperty(station1Name);
+    expect(subwayMap.allStations).toHaveProperty(station2Name);
+    expect(subwayMap.allStations).toHaveProperty(station3Name);
+  });
+  it('delete subway station', () => {
+    subwayMap.deleteStationByName(station3Name);
+    expect(subwayMap.allStations).toHaveProperty(station1Name);
+    expect(subwayMap.allStations).toHaveProperty(station2Name);
+    expect(subwayMap.allStations).not.toHaveProperty(station3Name);
+  });
+});
+
+describe('SubwayLine', () => {
+  const station1Name = 'station1';
+  const station2Name = 'station2';
+  const station3Name = 'station3';
+  const station1 = new SubWayStation();
+  const station2 = new SubWayStation();
+  const station3 = new SubWayStation();
+  const subwayMap = new SubwayMap();
+  subwayMap.addStation(station1, station1Name);
+  subwayMap.addStation(station2, station2Name);
+  subwayMap.addStation(station3, station3Name);
+  const line1 = new SubwayLine(station1Name, station2Name);
+  const line2 = new SubwayLine(station2Name, station3Name);
+  const line1Name = 'line1';
+  const line2Name = 'line2';
+  subwayMap.addLine(line1, line1Name);
+  subwayMap.addLine(line2, line2Name);
+  it('add subway line', () => {
+    expect(subwayMap.allLines).toHaveProperty(line1Name);
+    expect(subwayMap.allLines).toHaveProperty(line2Name);
+  });
+  it('delete subway line', () => {
+    subwayMap.deleteLineByName(line2Name);
+    expect(subwayMap.allLines).toHaveProperty(line1Name);
+    expect(subwayMap.allLines).not.toHaveProperty(line2Name);
+  });
+});
+
+// describe('SubwayMap', () => {});

From 1e601a7361f4dbc6815dd17b2fed8da2fa7ea5f2 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 21:23:29 +0900
Subject: [PATCH 23/62] fix: modify subwayLine to have its station name list

if I use terminating stations or terminiating station names for getting
all station names in the line, the methods get pretty complicated and
inefficient. so I changed subway line class to have its own station name
list. we can use the station name for referencing subway station object
---
 src/classes/classes.test.js  |  6 ++++--
 src/classes/subwayLine.js    | 12 ++++++++++++
 src/classes/subwayStation.js |  2 --
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/classes/classes.test.js b/src/classes/classes.test.js
index e63955531..ef1fe4820 100644
--- a/src/classes/classes.test.js
+++ b/src/classes/classes.test.js
@@ -52,6 +52,8 @@ describe('SubwayLine', () => {
     expect(subwayMap.allLines).toHaveProperty(line1Name);
     expect(subwayMap.allLines).not.toHaveProperty(line2Name);
   });
+  it('add station to line', () => {
+    line1.addStationToLineByName(station3Name);
+    expect(line1.allStationsInLine).toContain(station3Name);
+  });
 });
-
-// describe('SubwayMap', () => {});
diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index 16037636c..0b77c308b 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -1,4 +1,6 @@
 export default class SubwayLine {
+  #allStationsInLine = [];
+
   static checkIsTerminatingStationsSame(
     upTerminatingStationName,
     downTerminatingStationName
@@ -10,4 +12,14 @@ export default class SubwayLine {
     this.upTerminatingStationName = upTerminatingStationName;
     this.downTerminatingStationName = downTerminatingStationName;
   }
+
+  get allStationsInLine() {
+    return this.#allStationsInLine;
+  }
+
+  addStationToLineByName(stationName) {
+    if (stationName in this.#allStationsInLine === false) {
+      this.#allStationsInLine.push(stationName);
+    }
+  }
 }
diff --git a/src/classes/subwayStation.js b/src/classes/subwayStation.js
index a7ca34a85..c65b084f7 100644
--- a/src/classes/subwayStation.js
+++ b/src/classes/subwayStation.js
@@ -10,8 +10,6 @@ export default class SubwayStation {
   }
 
   constructor() {
-    this.nextStationNames = [];
-    this.prevStationNames = [];
     this.belongingLineNames = [];
   }
 }

From 7bf68b9b0e630b7e5d3c86bce4f515c42ab26864 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 21:33:28 +0900
Subject: [PATCH 24/62] feat: insert subway station in subway line

---
 src/classes/subwayLine.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index 0b77c308b..ab0a3ece1 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -22,4 +22,8 @@ export default class SubwayLine {
       this.#allStationsInLine.push(stationName);
     }
   }
+
+  insertStationToLineByName(stationName, positionIndex) {
+    this.#allStationsInLine.splice(positionIndex, 0, stationName);
+  }
 }

From ded723193ac3f0002fb894709f75e796634e4e53 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 21:34:31 +0900
Subject: [PATCH 25/62] feat: check if the subway station can be inserted

- remove exception#7 since it is no longer an exception
---
 README.md                 | 11 +++++------
 src/classes/subwayLine.js |  4 +++-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 4dbb71fe1..699447ba1 100644
--- a/README.md
+++ b/README.md
@@ -46,10 +46,9 @@
 ### 지하철 구간 추가 기능
 
 - 지하철 노선에 구간을 추가, 즉 지하철 노선 안의 두 역 사이에 새로운 역 끼워넣기(insert subway station in subway line)
-  - :exclamation: 예외#6 - 하나의 노선 안에서 그 노선에 속한 역들 중 3개 이상의 역들과 연결된 역이 있는 경우 즉, 갈래길이 있는 경우
-  - :exclamation: 예외#7 - 끼워 넣으려는 역이 이미 노선 안에 있는 경우
+  - :exclamation: 예외#6 - 끼워 넣으려는 역이 이미 노선 안에 있는 경우
 - 지하철 노선 구간 추가 가능성 여부 검사 (check if the subway station can be inserted)
-  - :wrench: 해결(예외 #6,#7) - 구간을 추가시 역이 추가된 노선 안에 갈래길이 생기는지, 끼워 넣으려는 역이 이미 노선 안에 있는지 검사
+  - :wrench: 해결(예외 #6) - 끼워 넣으려는 역이 이미 노선 안에 있는지 검사
 
 <br/>
 
@@ -60,10 +59,10 @@
 ### 지하철 구간 삭제 기능
 
 - 지하철 노선에 구간을 삭제, 즉 지하철 노선 안에서 특정 역을 빼기 (pull out subway station in subway line)
-  - :exclamation: 예외#8 - 삭제한 역이 노선의 종점일 경우
-  - :exclamation: 예외#9 - 노선에 포함된 역을 삭제하려는 시점에 그 노선에 포함된 역이 두개 이하일 경우
+  - :exclamation: 예외#7 - 삭제한 역이 노선의 종점일 경우
+  - :exclamation: 예외#8 - 노선에 포함된 역을 삭제하려는 시점에 그 노선에 포함된 역이 두개 이하일 경우
 - 지하철 노선 구간 삭제 가능성 여부 검사 (check if the subway station can be pulled out)
-  - :wrench: 해결(예외 #8, 9) - 삭제하려는 노선이 종점인지, 삭제 후 그 노선에 포함된 역이 두개 이하인지를 검사
+  - :wrench: 해결(예외 #7, 8) - 삭제하려는 노선이 종점인지, 삭제 후 그 노선에 포함된 역이 두개 이하인지를 검사
 
 <br/>
 
diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index ab0a3ece1..422888e0d 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -24,6 +24,8 @@ export default class SubwayLine {
   }
 
   insertStationToLineByName(stationName, positionIndex) {
-    this.#allStationsInLine.splice(positionIndex, 0, stationName);
+    if (stationName in this.#allStationsInLine === false) {
+      this.#allStationsInLine.splice(positionIndex, 0, stationName);
+    }
   }
 }

From 8447780fe588d0d765b67b822c4e60899d356ee5 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 21:38:53 +0900
Subject: [PATCH 26/62] refactor: modify inserting station to line function to
 specify that is needs index parameter too

---
 src/classes/subwayLine.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index 422888e0d..d5a8579ef 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -23,9 +23,10 @@ export default class SubwayLine {
     }
   }
 
-  insertStationToLineByName(stationName, positionIndex) {
+  insertStationToLineByNameAndIndex(stationName, positionIndex) {
     if (stationName in this.#allStationsInLine === false) {
       this.#allStationsInLine.splice(positionIndex, 0, stationName);
     }
   }
+
 }

From 49e3087cafbf61504c1cf3ea6eac1fd85dba9070 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 21:44:49 +0900
Subject: [PATCH 27/62] feat: pull out subway station in subway line

---
 src/classes/subwayLine.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index d5a8579ef..e7effb390 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -29,4 +29,11 @@ export default class SubwayLine {
     }
   }
 
+  pullOutStationFromLineByName(stationName) {
+    this.#allStationsInLine.forEach((registeredStationName, index) => {
+      if (registeredStationName === stationName) {
+        this.#allStationsInLine.splice(index, 1);
+      }
+    });
+  }
 }

From a020e05263f52baa02c415016762c1b56c43dcd8 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 21:52:45 +0900
Subject: [PATCH 28/62] refactor: make terminating station member to private in
 subway line class for more security

---
 src/classes/subwayLine.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index e7effb390..eb5c6fc32 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -1,5 +1,7 @@
 export default class SubwayLine {
   #allStationsInLine = [];
+  #upTerminatingStationName;
+  #downTerminatingStationName;
 
   static checkIsTerminatingStationsSame(
     upTerminatingStationName,
@@ -9,8 +11,8 @@ export default class SubwayLine {
   }
 
   constructor(upTerminatingStationName, downTerminatingStationName) {
-    this.upTerminatingStationName = upTerminatingStationName;
-    this.downTerminatingStationName = downTerminatingStationName;
+    this.#upTerminatingStationName = upTerminatingStationName;
+    this.#downTerminatingStationName = downTerminatingStationName;
   }
 
   get allStationsInLine() {

From fd2b9dd4140f1d9ccb118be78929be63b40ccd9f Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 22:02:21 +0900
Subject: [PATCH 29/62] docs: remove exception#7 since we don't have to care
 about it anymore

---
 README.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 699447ba1..ba7ef3ea4 100644
--- a/README.md
+++ b/README.md
@@ -59,10 +59,9 @@
 ### 지하철 구간 삭제 기능
 
 - 지하철 노선에 구간을 삭제, 즉 지하철 노선 안에서 특정 역을 빼기 (pull out subway station in subway line)
-  - :exclamation: 예외#7 - 삭제한 역이 노선의 종점일 경우
-  - :exclamation: 예외#8 - 노선에 포함된 역을 삭제하려는 시점에 그 노선에 포함된 역이 두개 이하일 경우
+  - :exclamation: 예외#7 - 노선에 포함된 역을 삭제하려는 시점에 그 노선에 포함된 역이 두개 이하일 경우
 - 지하철 노선 구간 삭제 가능성 여부 검사 (check if the subway station can be pulled out)
-  - :wrench: 해결(예외 #7, 8) - 삭제하려는 노선이 종점인지, 삭제 후 그 노선에 포함된 역이 두개 이하인지를 검사
+  - :wrench: 해결(예외 #7) - 삭제 후 그 노선에 포함된 역이 두개 미만인지를 검사
 
 <br/>
 

From 3b1ebddd57abb9d8bbffd9e2c6f0804c63c43bd4 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 22:10:40 +0900
Subject: [PATCH 30/62] check if the subway station can be pulled out

---
 src/classes/subwayLine.js      | 15 ++++++++++++---
 src/constants/configuration.js |  2 ++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index eb5c6fc32..f9133c01a 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -1,3 +1,5 @@
+import { SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT } from '../constants/configuration.js';
+
 export default class SubwayLine {
   #allStationsInLine = [];
   #upTerminatingStationName;
@@ -10,9 +12,9 @@ export default class SubwayLine {
     return downTerminatingStationName === upTerminatingStationName;
   }
 
-  constructor(upTerminatingStationName, downTerminatingStationName) {
-    this.#upTerminatingStationName = upTerminatingStationName;
-    this.#downTerminatingStationName = downTerminatingStationName;
+  constructor({ upTerminatingStationName, downTerminatingStationName }) {
+    this.#allStationsInLine.push(upTerminatingStationName);
+    this.#allStationsInLine.push(downTerminatingStationName);
   }
 
   get allStationsInLine() {
@@ -38,4 +40,11 @@ export default class SubwayLine {
       }
     });
   }
+
+  isAllStationsInLineLessThanLimit() {
+    return (
+      this.#allStationsInLine.length <
+      SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT
+    );
+  }
 }
diff --git a/src/constants/configuration.js b/src/constants/configuration.js
index 722f61c7c..6b78d1ec5 100644
--- a/src/constants/configuration.js
+++ b/src/constants/configuration.js
@@ -1,5 +1,7 @@
 export const SUBWAY_STATION_NAME_LENGTH_LIMIT = 2;
+export const SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT = 2;
 
 export default {
   SUBWAY_STATION_NAME_LENGTH_LIMIT,
+  SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT,
 };

From dca06932c99a7f122311ad54932cbcfe7212619b Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 22:19:45 +0900
Subject: [PATCH 31/62] feat: save subway map info to local storage

---
 src/classes/subwayMap.js       | 11 +++++++++++
 src/constants/configuration.js |  2 ++
 src/utils/localStorage.js      |  8 ++++++++
 3 files changed, 21 insertions(+)
 create mode 100644 src/utils/localStorage.js

diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index 5c55cdd5c..fc901c64a 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -1,3 +1,6 @@
+import { SUBWAY_MAP_ITEM_NAME } from '../constants/configuration.js';
+import { setItemWithKey } from '../utils/localStorage.js';
+
 export default class SubwayMap {
   #allStations = {};
   #allLines = {};
@@ -41,4 +44,12 @@ export default class SubwayMap {
       delete this.#allLines[lineName];
     }
   }
+
+  saveMapToLocalStorage() {
+    const subwayMapItem = {
+      stations: this.#allStations,
+      lines: this.#allLines,
+    };
+    setItemWithKey(subwayMapItem, SUBWAY_MAP_ITEM_NAME);
+  }
 }
diff --git a/src/constants/configuration.js b/src/constants/configuration.js
index 6b78d1ec5..e620d5fd7 100644
--- a/src/constants/configuration.js
+++ b/src/constants/configuration.js
@@ -1,7 +1,9 @@
 export const SUBWAY_STATION_NAME_LENGTH_LIMIT = 2;
 export const SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT = 2;
+export const SUBWAY_MAP_ITEM_NAME = 'Subway-Map';
 
 export default {
   SUBWAY_STATION_NAME_LENGTH_LIMIT,
   SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT,
+  SUBWAY_MAP_ITEM_NAME
 };
diff --git a/src/utils/localStorage.js b/src/utils/localStorage.js
new file mode 100644
index 000000000..e044e9409
--- /dev/null
+++ b/src/utils/localStorage.js
@@ -0,0 +1,8 @@
+export const setItemWithKey = (item, key) => {
+  const stringifiedItem = JSON.stringify(item);
+  localStorage.set(key, stringifiedItem);
+};
+
+export default {
+  setItemWithKey,
+};

From c13cba061d1ee5cd847f2663cb31d51fbb7eba96 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 22:23:01 +0900
Subject: [PATCH 32/62] feat: load subway map info from local storage

---
 src/classes/subwayMap.js  | 6 +++++-
 src/utils/localStorage.js | 6 ++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index fc901c64a..791e8ef08 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -1,10 +1,14 @@
 import { SUBWAY_MAP_ITEM_NAME } from '../constants/configuration.js';
-import { setItemWithKey } from '../utils/localStorage.js';
+import { setItemWithKey, getItemByKey } from '../utils/localStorage.js';
 
 export default class SubwayMap {
   #allStations = {};
   #allLines = {};
 
+  static loadMapFromLocalStorage() {
+    return getItemByKey(SUBWAY_MAP_ITEM_NAME);
+  }
+
   get allStations() {
     return this.#allStations;
   }
diff --git a/src/utils/localStorage.js b/src/utils/localStorage.js
index e044e9409..7a61eb892 100644
--- a/src/utils/localStorage.js
+++ b/src/utils/localStorage.js
@@ -3,6 +3,12 @@ export const setItemWithKey = (item, key) => {
   localStorage.set(key, stringifiedItem);
 };
 
+export const getItemByKey = (key) => {
+  const stringifiedItem = localStorage.get(key);
+  return JSON.parse(stringifiedItem);
+};
+
 export default {
   setItemWithKey,
+  getItemByKey,
 };

From adf006aa23c5f32c01177443137910fb9c7203c4 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 23:32:58 +0900
Subject: [PATCH 33/62] test: add more test code for class methods

---
 src/classes/classes.test.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/classes/classes.test.js b/src/classes/classes.test.js
index ef1fe4820..eed3f5944 100644
--- a/src/classes/classes.test.js
+++ b/src/classes/classes.test.js
@@ -57,3 +57,25 @@ describe('SubwayLine', () => {
     expect(line1.allStationsInLine).toContain(station3Name);
   });
 });
+
+describe('SubwaySection', () => {
+  const station1Name = 'station1';
+  const station2Name = 'station2';
+  const station3Name = 'station3';
+  const station1 = new SubWayStation();
+  const station2 = new SubWayStation();
+  const station3 = new SubWayStation();
+  const subwayMap = new SubwayMap();
+  subwayMap.addStation(station1, station1Name);
+  subwayMap.addStation(station2, station2Name);
+  subwayMap.addStation(station3, station3Name);
+  const line1 = new SubwayLine(station1Name, station2Name);
+  it('insert subway station in subway line', () => {
+    line1.insertStationToLineByNameAndIndex(station3Name, 1);
+    expect(line1.allStationsInLine).toContain(station3Name);
+  });
+  it('pull out subway station in subway line', () => {
+    line1.pullOutStationFromLineByName(station3Name);
+    expect(line1.allStationsInLine).not.toContain(station3Name);
+  });
+});

From 71bec59fb4e3d83460a795b6bd84835425f2faa4 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Mon, 14 Dec 2020 23:53:02 +0900
Subject: [PATCH 34/62] docs: add interface feature in feature list

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index ba7ef3ea4..a064f0c27 100644
--- a/README.md
+++ b/README.md
@@ -72,6 +72,10 @@
 
 <br/>
 
+### 인터페이스 전환 기능
+
+- 버튼 클릭으로 인터페이스 전환 (convert interface with button click)
+
 ### 역관리 인터페이스 기능
 
 - 역 추가 기능 호출 or 안내메세지 출력 (trigger 'add subway station' | alert with message)

From e1da1ee8f00cbadb7801e58cf4b680ea702c0110 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 01:17:45 +0900
Subject: [PATCH 35/62] convert interface with button click

---
 index.css                       |  0
 index.html                      | 98 ++++++++++++++++++++++++++++++++-
 src/elements/elements.js        |  5 ++
 src/index.js                    |  4 ++
 src/routes/routes.js            | 26 +++++++++
 src/templates/stationManager.js |  7 +++
 6 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 index.css
 create mode 100644 src/elements/elements.js
 create mode 100644 src/routes/routes.js
 create mode 100644 src/templates/stationManager.js

diff --git a/index.css b/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/index.html b/index.html
index fc99deac2..328e306da 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,103 @@
   </head>
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <h1>🚇 지하철 노선도 관리</h1>
+    </div>
+    <div>
+      <a class="link" href="#station-manager"><button id="#station-manager-button">1.역 관리</button></a>
+      <a class="link" href="#line-manager"><button id="#line-manager-button">2.노선 관리</button></a>
+      <a class="link" href="#section-manager"><button id="#section-manager-button">3.구간 관리</button></a>
+      <a class="link" href="#map-print"><button id="#map-print-manager-button">4.지하철 노선도 출력</button></a>
+    </div>
+    <div id="#station-manager" class="content">
+      <div class="station-name">
+        <h3>역 이름</h3>
+        <input type="text" placeholder="역 이름을 입력해주세요." />
+        <button>역 추가</button>
+      </div>
+      <div class="station-list">
+        <h2><span>&#128649</span>지하철 역 목록</h2>
+        <table class="station-item-table">
+          <thead>
+            <th>역 이름</th>
+            <th>설정</th>
+          </thead>
+          <tbody>
+            <tr>
+              <td>인천</td>
+              <td><button>삭제</button></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div id="#line-manager" class="content">
+      <div class="line-name">
+        <h3>노선 이름</h3>
+        <input type="text" placeholder="노선 이름을 입력해주세요" />
+      </div>
+      <div class="terminating-lines">
+        <span>상행 종점</span>
+        <select name="" id=""></select>
+        <span>하행 종점</span>
+        <select name="" id=""></select>
+      </div>
+      <button>노선 추가</button>
+      <div class="lines-list">
+        <h2><span>&#128649</span>지하철 노선 목록</h2>
+        <table class="line-item-table">
+          <thead>
+            <th>노선 이름</th>
+            <th>상행 종점역</th>
+            <th>하행 종점역</th>
+            <th>설정</th>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1호선</td>
+              <td>인천</td>
+              <td>소요산</td>
+              <td><button>삭제</button></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div id="#section-manager" class="content">
+      <h2>구간을 수정할 노선을 선택해주세요</h2>
+      <div class="section-select-button-list">
+        <button class="section-select-button">1호선</button>
+        <button class="section-select-button">2호선</button>
+        <button class="section-select-button">3호선</button>
+      </div>
+      <div class="station-register">
+        <h2>1호선 관리</h2>
+        <h3>구간 등록</h3>
+        <select name="" id=""></select>
+        <input type="text" placeholder="등록" />
+        <button>등록</button>
+      </div>
+      <table class="registerd-station-item-table">
+        <thead>
+          <th>순서</th>
+          <th>이름</th>
+          <th>설정</th>
+        </thead>
+        <tbody>
+          <tr>
+            <td>0</td>
+            <td>인천</td>
+            <td><button>노선에서 제거</button></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div id="#map-print" class="content">
+      <h2>1호선</h2>
+      <ul>
+        <li>인천</li>
+        <li>소요산</li>
+      </ul>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/elements/elements.js b/src/elements/elements.js
new file mode 100644
index 000000000..c7f394331
--- /dev/null
+++ b/src/elements/elements.js
@@ -0,0 +1,5 @@
+export const contentElements = document.querySelectorAll('.content');
+
+export default {
+  contentElements,
+};
diff --git a/src/index.js b/src/index.js
index e69de29bb..6358f052f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,4 @@
+import { setRouterWithElements } from './routes/routes.js';
+import { contentElements } from './elements/elements.js';
+
+setRouterWithElements(contentElements, contentElements[0]);
diff --git a/src/routes/routes.js b/src/routes/routes.js
new file mode 100644
index 000000000..544e0027a
--- /dev/null
+++ b/src/routes/routes.js
@@ -0,0 +1,26 @@
+const convertContent = (contentElements, contentName) => {
+  contentElements.forEach((element) => {
+    if (element.id === contentName) {
+      element.setAttribute('style', 'display: block;');
+    } else {
+      element.setAttribute('style', 'display: none;');
+    }
+  });
+};
+
+export const setRouterWithElements = (
+  contentElements,
+  defaultContentElement
+) => {
+  window.onhashchange = () => {
+    const contentName = window.location.hash;
+    convertContent(contentElements, contentName);
+  };
+  window.onload = () => {
+    convertContent(contentElements, defaultContentElement.id);
+  };
+};
+
+export default {
+  setRouterWithElements,
+};
diff --git a/src/templates/stationManager.js b/src/templates/stationManager.js
new file mode 100644
index 000000000..fef3e7e05
--- /dev/null
+++ b/src/templates/stationManager.js
@@ -0,0 +1,7 @@
+export const stationListTemplate = () => {
+  return ``;
+};
+
+export default {
+  stationListTemplate,
+};

From 1325d895f357080ff26d07617d617098747eec5f Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 02:17:10 +0900
Subject: [PATCH 36/62] docs: add interface data sync feature to feature list

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index a064f0c27..b8a51e539 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,12 @@
 
 - 버튼 클릭으로 인터페이스 전환 (convert interface with button click)
 
+### 인터페이스 데이터 동기화 기능
+
+- 인터페이스에 입력된 정보 저장하기 (save interface data)
+- 입력 정보를 불러오기 (load interface data)
+- 입력 정보를 인터페이스와 동기화 시키기(sync interface data to interface)
+
 ### 역관리 인터페이스 기능
 
 - 역 추가 기능 호출 or 안내메세지 출력 (trigger 'add subway station' | alert with message)

From 5c4f352f5c948b95dc52f22b6a128da8304118d4 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 02:19:55 +0900
Subject: [PATCH 37/62] fix: modify router to show content with hash when it
 was reloaded

---
 index.html           | 44 +++++++++++++++++++++++---------------------
 src/routes/routes.js |  7 ++++++-
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 328e306da..668d41902 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,8 @@ <h1>🚇 지하철 노선도 관리</h1>
     <div id="#station-manager" class="content">
       <div class="station-name">
         <h3>역 이름</h3>
-        <input type="text" placeholder="역 이름을 입력해주세요." />
-        <button>역 추가</button>
+        <input id="#station-name-input" type="text" placeholder="역 이름을 입력해주세요." />
+        <button id="#station-add-button">역 추가</button>
       </div>
       <div class="station-list">
         <h2><span>&#128649</span>지하철 역 목록</h2>
@@ -30,7 +30,7 @@ <h2><span>&#128649</span>지하철 역 목록</h2>
           <tbody>
             <tr>
               <td>인천</td>
-              <td><button>삭제</button></td>
+              <td><button class=".station-delete-button">삭제</button></td>
             </tr>
           </tbody>
         </table>
@@ -39,15 +39,15 @@ <h2><span>&#128649</span>지하철 역 목록</h2>
     <div id="#line-manager" class="content">
       <div class="line-name">
         <h3>노선 이름</h3>
-        <input type="text" placeholder="노선 이름을 입력해주세요" />
+        <input id="#line-name-input" type="text" placeholder="노선 이름을 입력해주세요" />
       </div>
       <div class="terminating-lines">
         <span>상행 종점</span>
-        <select name="" id=""></select>
+        <select id="#line-start-station-selector"></select>
         <span>하행 종점</span>
-        <select name="" id=""></select>
+        <select id="#line-end-station-selector"></select>
       </div>
-      <button>노선 추가</button>
+      <button id="#line-add-button">노선 추가</button>
       <div class="lines-list">
         <h2><span>&#128649</span>지하철 노선 목록</h2>
         <table class="line-item-table">
@@ -62,7 +62,7 @@ <h2><span>&#128649</span>지하철 노선 목록</h2>
               <td>1호선</td>
               <td>인천</td>
               <td>소요산</td>
-              <td><button>삭제</button></td>
+              <td><button class=".line-delete-button">삭제</button></td>
             </tr>
           </tbody>
         </table>
@@ -70,17 +70,17 @@ <h2><span>&#128649</span>지하철 노선 목록</h2>
     </div>
     <div id="#section-manager" class="content">
       <h2>구간을 수정할 노선을 선택해주세요</h2>
-      <div class="section-select-button-list">
-        <button class="section-select-button">1호선</button>
-        <button class="section-select-button">2호선</button>
-        <button class="section-select-button">3호선</button>
+      <div class=".section-line-menu-button-list">
+        <button class=".section-line-menu-button">1호선</button>
+        <button class=".section-line-menu-button">2호선</button>
+        <button class=".section-line-menu-button">3호선</button>
       </div>
       <div class="station-register">
         <h2>1호선 관리</h2>
         <h3>구간 등록</h3>
-        <select name="" id=""></select>
-        <input type="text" placeholder="등록" />
-        <button>등록</button>
+        <select id="#section-station-selector"></select>
+        <input id="#section-order-input" type="text" placeholder="등록" />
+        <button id="#section-add-button">등록</button>
       </div>
       <table class="registerd-station-item-table">
         <thead>
@@ -92,17 +92,19 @@ <h3>구간 등록</h3>
           <tr>
             <td>0</td>
             <td>인천</td>
-            <td><button>노선에서 제거</button></td>
+            <td><button class=".section-delete-button">노선에서 제거</button></td>
           </tr>
         </tbody>
       </table>
     </div>
     <div id="#map-print" class="content">
-      <h2>1호선</h2>
-      <ul>
-        <li>인천</li>
-        <li>소요산</li>
-      </ul>
+      <div class="map">
+        <h2>1호선</h2>
+        <ul>
+          <li>인천</li>
+          <li>소요산</li>
+        </ul>
+      </div>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/routes/routes.js b/src/routes/routes.js
index 544e0027a..9abd81ffc 100644
--- a/src/routes/routes.js
+++ b/src/routes/routes.js
@@ -17,7 +17,12 @@ export const setRouterWithElements = (
     convertContent(contentElements, contentName);
   };
   window.onload = () => {
-    convertContent(contentElements, defaultContentElement.id);
+    const contentName = window.location.hash;
+    if (contentName) {
+      convertContent(contentElements, contentName);
+    } else {
+      convertContent(contentElements, defaultContentElement.id);
+    }
   };
 };
 

From b82c3e9205f044d0b3c7ef342fdcdf6edfca6961 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 10:15:10 +0900
Subject: [PATCH 38/62] feat: save interface data

---
 index.css                                 |  3 +++
 index.html                                | 19 +++++++--------
 src/constants/configuration.js            |  3 ++-
 src/data/data.js                          | 28 +++++++++++++++++++++++
 src/elements/{elements.js => contents.js} |  0
 src/elements/lineManager.js               | 19 +++++++++++++++
 src/elements/printMap.js                  |  0
 src/elements/sectionManager.js            | 27 ++++++++++++++++++++++
 src/elements/stationManager.js            | 15 ++++++++++++
 src/index.js                              |  2 +-
 10 files changed, 105 insertions(+), 11 deletions(-)
 create mode 100644 src/data/data.js
 rename src/elements/{elements.js => contents.js} (100%)
 create mode 100644 src/elements/lineManager.js
 create mode 100644 src/elements/printMap.js
 create mode 100644 src/elements/sectionManager.js
 create mode 100644 src/elements/stationManager.js

diff --git a/index.css b/index.css
index e69de29bb..1ebbe3266 100644
--- a/index.css
+++ b/index.css
@@ -0,0 +1,3 @@
+.content {
+  display: none;
+}
diff --git a/index.html b/index.html
index 668d41902..776967a95 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>지하철 노선도 관리</title>
+    <link rel="stylesheet" href="./index.css">
   </head>
   <body>
     <div id="app">
@@ -70,17 +71,17 @@ <h2><span>&#128649</span>지하철 노선 목록</h2>
     </div>
     <div id="#section-manager" class="content">
       <h2>구간을 수정할 노선을 선택해주세요</h2>
-      <div class=".section-line-menu-button-list">
-        <button class=".section-line-menu-button">1호선</button>
-        <button class=".section-line-menu-button">2호선</button>
-        <button class=".section-line-menu-button">3호선</button>
+      <div class="section-line-menu-button-list">
+        <button class="section-line-menu-button">1호선</button>
+        <button class="section-line-menu-button">2호선</button>
+        <button class="section-line-menu-button">3호선</button>
       </div>
       <div class="station-register">
-        <h2>1호선 관리</h2>
+        <h2><span id="section-line-name">1호선</span> 관리</h2>
         <h3>구간 등록</h3>
-        <select id="#section-station-selector"></select>
-        <input id="#section-order-input" type="text" placeholder="등록" />
-        <button id="#section-add-button">등록</button>
+        <select id="section-station-selector"></select>
+        <input id="section-order-input" type="text" placeholder="등록" />
+        <button id="section-add-button">등록</button>
       </div>
       <table class="registerd-station-item-table">
         <thead>
@@ -92,7 +93,7 @@ <h3>구간 등록</h3>
           <tr>
             <td>0</td>
             <td>인천</td>
-            <td><button class=".section-delete-button">노선에서 제거</button></td>
+            <td><button class="section-delete-button">노선에서 제거</button></td>
           </tr>
         </tbody>
       </table>
diff --git a/src/constants/configuration.js b/src/constants/configuration.js
index e620d5fd7..bd13e4dfc 100644
--- a/src/constants/configuration.js
+++ b/src/constants/configuration.js
@@ -1,9 +1,10 @@
 export const SUBWAY_STATION_NAME_LENGTH_LIMIT = 2;
 export const SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT = 2;
 export const SUBWAY_MAP_ITEM_NAME = 'Subway-Map';
+export const INTERFACE_DATA_ITEM_NAME = 'Data';
 
 export default {
   SUBWAY_STATION_NAME_LENGTH_LIMIT,
   SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT,
-  SUBWAY_MAP_ITEM_NAME
+  SUBWAY_MAP_ITEM_NAME,
 };
diff --git a/src/data/data.js b/src/data/data.js
new file mode 100644
index 000000000..277175697
--- /dev/null
+++ b/src/data/data.js
@@ -0,0 +1,28 @@
+import { setItemWithKey, getItemByKey } from '../utils/localStorage.js';
+import { stationNameInputElement } from '../elements/stationManager.js';
+import {
+  lineEndStationSelectorElement,
+  lineStartStationSelectorElement,
+  lineNameInputElement,
+} from '../elements/lineManager.js';
+import {
+  sectionOrderInputElement,
+  sectionStationSelectorElement,
+  sectionLineNameElement,
+} from '../elements/sectionManager.js';
+
+export const data = {
+  stationNameInputValue: '',
+  lineNameInputValue: '',
+  lineStartStationSelectorValue: '',
+  lineEndStationSelectorValue: '',
+  sectionLineNameValue: '',
+  sectionStationSelectorValue: '',
+  sectionOrderInputNumberValue: '',
+};
+
+export const saveDataToLocalStorage = () => {
+  setItemWithKey(data, 'data');
+};
+
+export default {};
diff --git a/src/elements/elements.js b/src/elements/contents.js
similarity index 100%
rename from src/elements/elements.js
rename to src/elements/contents.js
diff --git a/src/elements/lineManager.js b/src/elements/lineManager.js
new file mode 100644
index 000000000..23b8f841e
--- /dev/null
+++ b/src/elements/lineManager.js
@@ -0,0 +1,19 @@
+export const lineNameInputElement = document.getElementById('#line-name-input');
+export const lineStartStationSelectorElement = document.getElementById(
+  '#line-start-station-selector'
+);
+export const lineEndStationSelectorElement = document.getElementById(
+  '#line-end-station-selector'
+);
+export const lineAddButtonElement = document.getElementById('#line-add-button');
+export const lineDeleteButtons = document.querySelectorAll(
+  '..line-delete-button'
+);
+
+export default {
+  lineNameInputElement,
+  lineStartStationSelectorElement,
+  lineEndStationSelectorElement,
+  lineAddButtonElement,
+  lineDeleteButtons,
+};
diff --git a/src/elements/printMap.js b/src/elements/printMap.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/elements/sectionManager.js b/src/elements/sectionManager.js
new file mode 100644
index 000000000..ea67e6314
--- /dev/null
+++ b/src/elements/sectionManager.js
@@ -0,0 +1,27 @@
+export const sectionLineMenuButtonElements = document.querySelectorAll(
+  '.section-line-menu-button'
+);
+export const sectionLineNameElement = document.getElementById(
+  'section-line-name'
+);
+export const sectionStationSelectorElement = document.getElementById(
+  'section-station-selector'
+);
+export const sectionOrderInputElement = document.getElementById(
+  'section-order-input'
+);
+export const sectionAddButtonElement = document.getElementById(
+  'section-add-button'
+);
+export const sectionDeleteButtonElements = document.querySelectorAll(
+  '.section-delete-button'
+);
+
+export default {
+  sectionLineMenuButtonElements,
+  sectionLineNameElement,
+  sectionStationSelectorElement,
+  sectionOrderInputElement,
+  sectionAddButtonElement,
+  sectionDeleteButtonElements,
+};
diff --git a/src/elements/stationManager.js b/src/elements/stationManager.js
new file mode 100644
index 000000000..53f0b3a98
--- /dev/null
+++ b/src/elements/stationManager.js
@@ -0,0 +1,15 @@
+export const stationNameInputElement = document.getElementById(
+  '#station-name-input'
+);
+export const stationAddButtonElement = document.getElementById(
+  '#station-add-button'
+);
+export const stationDeleteButtons = document.querySelectorAll(
+  '..station-delete-button'
+);
+
+export default {
+  stationNameInputElement,
+  stationAddButtonElement,
+  stationDeleteButtons,
+};
diff --git a/src/index.js b/src/index.js
index 6358f052f..d493eab4e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
 import { setRouterWithElements } from './routes/routes.js';
-import { contentElements } from './elements/elements.js';
+import { contentElements } from './elements/contents.js';
 
 setRouterWithElements(contentElements, contentElements[0]);

From 30cf3a2ad4a92f38389f9f354d6bf9510d853668 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 10:15:32 +0900
Subject: [PATCH 39/62] load interface data

---
 src/data/data.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/data/data.js b/src/data/data.js
index 277175697..66bd50ebe 100644
--- a/src/data/data.js
+++ b/src/data/data.js
@@ -25,4 +25,16 @@ export const saveDataToLocalStorage = () => {
   setItemWithKey(data, 'data');
 };
 
+export const loadDataToLocalStorage = () => {
+  const loadedData = getItemByKey('data');
+  data.stationNameInputValue = loadedData.stationNameInputValue;
+  data.lineNameInputValue = loadedData.lineNameInputValue;
+  data.upTerminatingStationNameValue = loadedData.upTerminatingStationNameValue;
+  data.downTerminatingStationNameValue =
+    loadedData.downTerminatingStationNameValue;
+  data.sectionLineValue = loadedData.sectionLineValue;
+  data.sectionStationSelectorValue = loadedData.sectionStationSelectorValue;
+  data.sectionOrderInputNumberValue = loadedData.sectionOrderInputNumberValue;
+};
+
 export default {};

From fee78c34731fee99ea268455aca23d6a0da29237 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 10:15:51 +0900
Subject: [PATCH 40/62] sync interface data to interface

---
 src/data/data.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/data/data.js b/src/data/data.js
index 66bd50ebe..65c8c4fe6 100644
--- a/src/data/data.js
+++ b/src/data/data.js
@@ -37,4 +37,14 @@ export const loadDataToLocalStorage = () => {
   data.sectionOrderInputNumberValue = loadedData.sectionOrderInputNumberValue;
 };
 
+export const syncDataToAllElements = () => {
+  stationNameInputElement.value = data.stationNameInputValue;
+  lineNameInputElement.value = data.lineNameInputValue;
+  lineStartStationSelectorElement.value = data.lineStartStationSelectorValue;
+  lineEndStationSelectorElement.value = data.lineEndStationSelectorValue;
+  sectionOrderInputElement.value = data.sectionOrderInputNumberValue;
+  sectionLineNameElement.value = data.sectionLineNameValue;
+  sectionStationSelectorElement.value = data.sectionStationSelectorValue;
+};
+
 export default {};

From fc8127d852ef2597f5c6d72bd996fb1424af68f0 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 10:24:36 +0900
Subject: [PATCH 41/62] refactor: remove uneccessary character in html id and
 character

---
 index.html                     | 32 ++++++++++++++++----------------
 src/elements/lineManager.js    |  6 +++---
 src/elements/stationManager.js |  6 +++---
 src/index.js                   |  2 ++
 src/routes/routes.js           |  4 ++--
 5 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index 776967a95..9c8492f6d 100644
--- a/index.html
+++ b/index.html
@@ -10,16 +10,16 @@
       <h1>🚇 지하철 노선도 관리</h1>
     </div>
     <div>
-      <a class="link" href="#station-manager"><button id="#station-manager-button">1.역 관리</button></a>
-      <a class="link" href="#line-manager"><button id="#line-manager-button">2.노선 관리</button></a>
-      <a class="link" href="#section-manager"><button id="#section-manager-button">3.구간 관리</button></a>
-      <a class="link" href="#map-print"><button id="#map-print-manager-button">4.지하철 노선도 출력</button></a>
+      <a class="link" href="#station-manager"><button id="station-manager-button">1.역 관리</button></a>
+      <a class="link" href="#line-manager"><button id="line-manager-button">2.노선 관리</button></a>
+      <a class="link" href="#section-manager"><button id="section-manager-button">3.구간 관리</button></a>
+      <a class="link" href="#map-print"><button id="map-print-manager-button">4.지하철 노선도 출력</button></a>
     </div>
-    <div id="#station-manager" class="content">
+    <div id="station-manager" class="content">
       <div class="station-name">
         <h3>역 이름</h3>
-        <input id="#station-name-input" type="text" placeholder="역 이름을 입력해주세요." />
-        <button id="#station-add-button">역 추가</button>
+        <input id="station-name-input" type="text" placeholder="역 이름을 입력해주세요." />
+        <button id="station-add-button">역 추가</button>
       </div>
       <div class="station-list">
         <h2><span>&#128649</span>지하철 역 목록</h2>
@@ -31,24 +31,24 @@ <h2><span>&#128649</span>지하철 역 목록</h2>
           <tbody>
             <tr>
               <td>인천</td>
-              <td><button class=".station-delete-button">삭제</button></td>
+              <td><button class="station-delete-button">삭제</button></td>
             </tr>
           </tbody>
         </table>
       </div>
     </div>
-    <div id="#line-manager" class="content">
+    <div id="line-manager" class="content">
       <div class="line-name">
         <h3>노선 이름</h3>
-        <input id="#line-name-input" type="text" placeholder="노선 이름을 입력해주세요" />
+        <input id="line-name-input" type="text" placeholder="노선 이름을 입력해주세요" />
       </div>
       <div class="terminating-lines">
         <span>상행 종점</span>
-        <select id="#line-start-station-selector"></select>
+        <select id="line-start-station-selector"></select>
         <span>하행 종점</span>
-        <select id="#line-end-station-selector"></select>
+        <select id="line-end-station-selector"></select>
       </div>
-      <button id="#line-add-button">노선 추가</button>
+      <button id="line-add-button">노선 추가</button>
       <div class="lines-list">
         <h2><span>&#128649</span>지하철 노선 목록</h2>
         <table class="line-item-table">
@@ -63,13 +63,13 @@ <h2><span>&#128649</span>지하철 노선 목록</h2>
               <td>1호선</td>
               <td>인천</td>
               <td>소요산</td>
-              <td><button class=".line-delete-button">삭제</button></td>
+              <td><button class="line-delete-button">삭제</button></td>
             </tr>
           </tbody>
         </table>
       </div>
     </div>
-    <div id="#section-manager" class="content">
+    <div id="section-manager" class="content">
       <h2>구간을 수정할 노선을 선택해주세요</h2>
       <div class="section-line-menu-button-list">
         <button class="section-line-menu-button">1호선</button>
@@ -98,7 +98,7 @@ <h3>구간 등록</h3>
         </tbody>
       </table>
     </div>
-    <div id="#map-print" class="content">
+    <div id="map-print" class="content">
       <div class="map">
         <h2>1호선</h2>
         <ul>
diff --git a/src/elements/lineManager.js b/src/elements/lineManager.js
index 23b8f841e..cedc3a7bb 100644
--- a/src/elements/lineManager.js
+++ b/src/elements/lineManager.js
@@ -1,13 +1,13 @@
 export const lineNameInputElement = document.getElementById('#line-name-input');
 export const lineStartStationSelectorElement = document.getElementById(
-  '#line-start-station-selector'
+  'line-start-station-selector'
 );
 export const lineEndStationSelectorElement = document.getElementById(
-  '#line-end-station-selector'
+  'line-end-station-selector'
 );
 export const lineAddButtonElement = document.getElementById('#line-add-button');
 export const lineDeleteButtons = document.querySelectorAll(
-  '..line-delete-button'
+  '.line-delete-button'
 );
 
 export default {
diff --git a/src/elements/stationManager.js b/src/elements/stationManager.js
index 53f0b3a98..b3d5ffb43 100644
--- a/src/elements/stationManager.js
+++ b/src/elements/stationManager.js
@@ -1,11 +1,11 @@
 export const stationNameInputElement = document.getElementById(
-  '#station-name-input'
+  'station-name-input'
 );
 export const stationAddButtonElement = document.getElementById(
-  '#station-add-button'
+  'station-add-button'
 );
 export const stationDeleteButtons = document.querySelectorAll(
-  '..station-delete-button'
+  '.station-delete-button'
 );
 
 export default {
diff --git a/src/index.js b/src/index.js
index d493eab4e..ff45166dd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,6 @@
 import { setRouterWithElements } from './routes/routes.js';
 import { contentElements } from './elements/contents.js';
+import { loadDataToLocalStorage } from './data/data.js';
 
 setRouterWithElements(contentElements, contentElements[0]);
+loadDataToLocalStorage();
diff --git a/src/routes/routes.js b/src/routes/routes.js
index 9abd81ffc..749947c02 100644
--- a/src/routes/routes.js
+++ b/src/routes/routes.js
@@ -13,11 +13,11 @@ export const setRouterWithElements = (
   defaultContentElement
 ) => {
   window.onhashchange = () => {
-    const contentName = window.location.hash;
+    const contentName = window.location.hash.substr(1);
     convertContent(contentElements, contentName);
   };
   window.onload = () => {
-    const contentName = window.location.hash;
+    const contentName = window.location.hash.substr(1);
     if (contentName) {
       convertContent(contentElements, contentName);
     } else {

From 8d6d593fa94744b2a359f1432b9db0c5def73fd0 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 10:28:25 +0900
Subject: [PATCH 42/62] fix: made loading data from local storage to work only
 if there is something stored

---
 src/data/data.js          | 19 +++++++++++--------
 src/index.js              |  3 ++-
 src/utils/localStorage.js |  4 ++--
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/data/data.js b/src/data/data.js
index 65c8c4fe6..1ce2b517c 100644
--- a/src/data/data.js
+++ b/src/data/data.js
@@ -27,14 +27,17 @@ export const saveDataToLocalStorage = () => {
 
 export const loadDataToLocalStorage = () => {
   const loadedData = getItemByKey('data');
-  data.stationNameInputValue = loadedData.stationNameInputValue;
-  data.lineNameInputValue = loadedData.lineNameInputValue;
-  data.upTerminatingStationNameValue = loadedData.upTerminatingStationNameValue;
-  data.downTerminatingStationNameValue =
-    loadedData.downTerminatingStationNameValue;
-  data.sectionLineValue = loadedData.sectionLineValue;
-  data.sectionStationSelectorValue = loadedData.sectionStationSelectorValue;
-  data.sectionOrderInputNumberValue = loadedData.sectionOrderInputNumberValue;
+  if (loadedData) {
+    data.stationNameInputValue = loadedData.stationNameInputValue;
+    data.lineNameInputValue = loadedData.lineNameInputValue;
+    data.upTerminatingStationNameValue =
+      loadedData.upTerminatingStationNameValue;
+    data.downTerminatingStationNameValue =
+      loadedData.downTerminatingStationNameValue;
+    data.sectionLineValue = loadedData.sectionLineValue;
+    data.sectionStationSelectorValue = loadedData.sectionStationSelectorValue;
+    data.sectionOrderInputNumberValue = loadedData.sectionOrderInputNumberValue;
+  }
 };
 
 export const syncDataToAllElements = () => {
diff --git a/src/index.js b/src/index.js
index ff45166dd..c1d2f5c85 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import { setRouterWithElements } from './routes/routes.js';
 import { contentElements } from './elements/contents.js';
-import { loadDataToLocalStorage } from './data/data.js';
+import { loadDataToLocalStorage, syncDataToAllElements } from './data/data.js';
 
 setRouterWithElements(contentElements, contentElements[0]);
 loadDataToLocalStorage();
+syncDataToAllElements();
diff --git a/src/utils/localStorage.js b/src/utils/localStorage.js
index 7a61eb892..0987a7fe1 100644
--- a/src/utils/localStorage.js
+++ b/src/utils/localStorage.js
@@ -1,10 +1,10 @@
 export const setItemWithKey = (item, key) => {
   const stringifiedItem = JSON.stringify(item);
-  localStorage.set(key, stringifiedItem);
+  localStorage.setItem(key, stringifiedItem);
 };
 
 export const getItemByKey = (key) => {
-  const stringifiedItem = localStorage.get(key);
+  const stringifiedItem = localStorage.getItem(key);
   return JSON.parse(stringifiedItem);
 };
 

From 30d6781df8dfbf6e791bd88526fc670642d55445 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 10:36:31 +0900
Subject: [PATCH 43/62] refactor: adjust interface data item name constant for
 more stability

---
 src/data/data.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/data/data.js b/src/data/data.js
index 1ce2b517c..131400cfd 100644
--- a/src/data/data.js
+++ b/src/data/data.js
@@ -10,6 +10,7 @@ import {
   sectionStationSelectorElement,
   sectionLineNameElement,
 } from '../elements/sectionManager.js';
+import { INTERFACE_DATA_ITEM_NAME } from '../constants/configuration.js';
 
 export const data = {
   stationNameInputValue: '',
@@ -22,11 +23,11 @@ export const data = {
 };
 
 export const saveDataToLocalStorage = () => {
-  setItemWithKey(data, 'data');
+  setItemWithKey(data, INTERFACE_DATA_ITEM_NAME);
 };
 
 export const loadDataToLocalStorage = () => {
-  const loadedData = getItemByKey('data');
+  const loadedData = getItemByKey(INTERFACE_DATA_ITEM_NAME);
   if (loadedData) {
     data.stationNameInputValue = loadedData.stationNameInputValue;
     data.lineNameInputValue = loadedData.lineNameInputValue;

From ed0dcc1a32e246d492841e124b0efc18cf917afe Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 11:51:22 +0900
Subject: [PATCH 44/62] docs: add more interface feature

---
 README.md | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index b8a51e539..0c404d4c9 100644
--- a/README.md
+++ b/README.md
@@ -84,27 +84,32 @@
 
 ### 역관리 인터페이스 기능
 
-- 역 추가 기능 호출 or 안내메세지 출력 (trigger 'add subway station' | alert with message)
+- 역 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'add subway station' with alert message)
   - 잘못된 입력이 들어왔을 때, 역을 추가할 수 없는 이유를 알려주어 재입력을 유도
-- 역 삭제 기능 호출 or 안내메세지 출력 (trigger 'delete subway station' | alert with message)
+- 역 추가 결과 보여주기(show 'add subway station' result)
+- 역 삭제 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'delete subway station' with alert message)
   - 삭제할 수 없는 역을 삭제하려 할 때, 역을 삭제할 수 없는 이유를 알려주어 재입력을 유도
+- 역 삭제 결과 보여주기 (show 'delete subway station' result)
 
 <br/>
 
 ### 노선관리 인터페이스 기능
 
-- 노선 추가 기능 호출 or 안내메세지 출력 (trigger 'add subway line' | alert with message)
+- 노선 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'add subway line' with alert message)
   - 잘못된 입력이 들어왔을 때, 노선을 추가할 수 없는 이유를 알려주어 재입력을 유도
-- 노선 삭제 기능 호출 (trigger 'delete subway line')
+- 노선 추가 결과 보여주기 (show 'add subway line' result)
+- 노선 삭제 결과 보여주기 (show 'delete subway line' result)
 
 <br/>
 
 ### 구간관리 인터페이스 기능
 
-- 구간 추가 기능 호출 or 안내메세지 출력 (trigger 'insert subway station in subway line' | alert with message)
+- 구간 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'insert subway station in subway line' with alert message)
   - 구간을 추가할 수 없는 이유를 알려주어 재입력을 유도
-- 구간 삭제 기능 호출 or 안내메세지 출력 (trigger 'pull out subway station from subway line' | alert with message)
+- 구간 추가 결과 보여주기 (show 'insert subway station in subway line' result)
+- 구간 삭제 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'pull out subway station from subway line' with alert message)
   - 역을 삭제할 수 없는 이유를 알려주면서 노선 자체를 제거할 방법을 안내
+- 구간 삭제 결과 보여주기 (show 'pull out subway station from subway line' result)
 
 <br/>
 

From 3ea6ab6b3f723269b70f6aeb13e73d24ff3479fb Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 11:55:44 +0900
Subject: [PATCH 45/62] validation check before 'add subway station' with alert
 message

---
 src/constants/configuration.js |  4 ++++
 src/elements/lineManager.js    |  2 +-
 src/handlers/lineManager.js    |  0
 src/handlers/printMap.js       |  0
 src/handlers/sectionManager.js |  0
 src/handlers/stationManager.js | 34 ++++++++++++++++++++++++++++++++++
 src/index.js                   |  3 +++
 src/listeners/listeners.js     |  8 ++++++++
 src/store/store.js             |  7 +++++++
 9 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 src/handlers/lineManager.js
 create mode 100644 src/handlers/printMap.js
 create mode 100644 src/handlers/sectionManager.js
 create mode 100644 src/handlers/stationManager.js
 create mode 100644 src/listeners/listeners.js
 create mode 100644 src/store/store.js

diff --git a/src/constants/configuration.js b/src/constants/configuration.js
index bd13e4dfc..f92a92a43 100644
--- a/src/constants/configuration.js
+++ b/src/constants/configuration.js
@@ -2,6 +2,10 @@ export const SUBWAY_STATION_NAME_LENGTH_LIMIT = 2;
 export const SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT = 2;
 export const SUBWAY_MAP_ITEM_NAME = 'Subway-Map';
 export const INTERFACE_DATA_ITEM_NAME = 'Data';
+export const SHORT_STATION_NAME_ALERT_MESSAGE =
+  '역의 이름이 너무 짧습니다. 2글자 이상의 이름을 입력해주세요';
+export const SAME_STATION_NAME_EXIST_MESSAGE =
+  '이미 동일한 이름의 역이 등록되어 있습니다. 다른 이름을 입력해주세요';
 
 export default {
   SUBWAY_STATION_NAME_LENGTH_LIMIT,
diff --git a/src/elements/lineManager.js b/src/elements/lineManager.js
index cedc3a7bb..1cfd8f6fa 100644
--- a/src/elements/lineManager.js
+++ b/src/elements/lineManager.js
@@ -1,4 +1,4 @@
-export const lineNameInputElement = document.getElementById('#line-name-input');
+export const lineNameInputElement = document.getElementById('line-name-input');
 export const lineStartStationSelectorElement = document.getElementById(
   'line-start-station-selector'
 );
diff --git a/src/handlers/lineManager.js b/src/handlers/lineManager.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/handlers/printMap.js b/src/handlers/printMap.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/handlers/sectionManager.js b/src/handlers/sectionManager.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/handlers/stationManager.js b/src/handlers/stationManager.js
new file mode 100644
index 000000000..fea60707a
--- /dev/null
+++ b/src/handlers/stationManager.js
@@ -0,0 +1,34 @@
+import { stationNameInputElement } from '../elements/stationManager.js';
+import SubwayStation from '../classes/subwayStation.js';
+import { stationMap } from '../store/store.js';
+import {
+  SAME_STATION_NAME_EXIST_MESSAGE,
+  SHORT_STATION_NAME_ALERT_MESSAGE,
+} from '../constants/configuration.js';
+
+const getAlertMessage = (stationName) => {
+  let alertMessage = '';
+  if (stationMap.checkIsDuplicatedStationName(stationName)) {
+    alertMessage += `${SAME_STATION_NAME_EXIST_MESSAGE}\n`;
+  }
+  if (SubwayStation.checkIsStationNameShort(stationName)) {
+    alertMessage += SHORT_STATION_NAME_ALERT_MESSAGE;
+  }
+
+  return alertMessage;
+};
+
+export const onAddStation = () => {
+  const stationName = stationNameInputElement.value;
+  const alertMessage = getAlertMessage(stationName);
+  if (alertMessage === '') {
+    const station = new SubwayStation();
+    stationMap.addStation(station, stationName);
+  } else {
+    alert(alertMessage);
+  }
+};
+
+export default {
+  onAddStation,
+};
diff --git a/src/index.js b/src/index.js
index c1d2f5c85..ee47a3024 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,10 @@
 import { setRouterWithElements } from './routes/routes.js';
 import { contentElements } from './elements/contents.js';
 import { loadDataToLocalStorage, syncDataToAllElements } from './data/data.js';
+import eventListener from './listeners/listeners.js';
 
 setRouterWithElements(contentElements, contentElements[0]);
 loadDataToLocalStorage();
 syncDataToAllElements();
+
+eventListener.addAllEventListeners();
diff --git a/src/listeners/listeners.js b/src/listeners/listeners.js
new file mode 100644
index 000000000..c7fd2a3b1
--- /dev/null
+++ b/src/listeners/listeners.js
@@ -0,0 +1,8 @@
+import { stationAddButtonElement } from '../elements/stationManager.js';
+import { onAddStation } from '../handlers/stationManager.js';
+
+const addAllEventListeners = () => {
+  stationAddButtonElement.addEventListener('click', onAddStation);
+};
+
+export default { addAllEventListeners };
\ No newline at end of file
diff --git a/src/store/store.js b/src/store/store.js
new file mode 100644
index 000000000..17f1fb8a4
--- /dev/null
+++ b/src/store/store.js
@@ -0,0 +1,7 @@
+import StationMap from '../classes/subwayMap.js';
+
+export const stationMap = new StationMap();
+
+export default {
+  stationMap,
+};

From f2a19aadef32216b8a15e7aea4e21e7c5158a121 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 12:21:13 +0900
Subject: [PATCH 46/62] feat: show result of add & delete subway station

---
 index.html                      |  2 +-
 src/elements/stationManager.js  |  5 +++--
 src/handlers/stationManager.js  | 12 +++++++++++-
 src/templates/stationManager.js | 20 +++++++++++++++++---
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 9c8492f6d..bd7063670 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@ <h2><span>&#128649</span>지하철 역 목록</h2>
             <th>역 이름</th>
             <th>설정</th>
           </thead>
-          <tbody>
+          <tbody id="result-station-items">
             <tr>
               <td>인천</td>
               <td><button class="station-delete-button">삭제</button></td>
diff --git a/src/elements/stationManager.js b/src/elements/stationManager.js
index b3d5ffb43..4e504dcd8 100644
--- a/src/elements/stationManager.js
+++ b/src/elements/stationManager.js
@@ -4,12 +4,13 @@ export const stationNameInputElement = document.getElementById(
 export const stationAddButtonElement = document.getElementById(
   'station-add-button'
 );
-export const stationDeleteButtons = document.querySelectorAll(
+export const stationDeleteButtonsElement = document.querySelectorAll(
   '.station-delete-button'
 );
+export const resultStationItemsElement = document.getElementById('result-station-items');
 
 export default {
   stationNameInputElement,
   stationAddButtonElement,
-  stationDeleteButtons,
+  stationDeleteButtonsElement,
 };
diff --git a/src/handlers/stationManager.js b/src/handlers/stationManager.js
index fea60707a..b72636b2d 100644
--- a/src/handlers/stationManager.js
+++ b/src/handlers/stationManager.js
@@ -1,10 +1,14 @@
-import { stationNameInputElement } from '../elements/stationManager.js';
+import {
+  stationNameInputElement,
+  resultStationItemsElement,
+} from '../elements/stationManager.js';
 import SubwayStation from '../classes/subwayStation.js';
 import { stationMap } from '../store/store.js';
 import {
   SAME_STATION_NAME_EXIST_MESSAGE,
   SHORT_STATION_NAME_ALERT_MESSAGE,
 } from '../constants/configuration.js';
+import { getStationItemsTemplate } from '../templates/stationManager.js';
 
 const getAlertMessage = (stationName) => {
   let alertMessage = '';
@@ -18,12 +22,18 @@ const getAlertMessage = (stationName) => {
   return alertMessage;
 };
 
+const showResult = (stationNames) => {
+  resultStationItemsElement.innerHTML = getStationItemsTemplate(stationNames);
+};
+
 export const onAddStation = () => {
   const stationName = stationNameInputElement.value;
   const alertMessage = getAlertMessage(stationName);
   if (alertMessage === '') {
     const station = new SubwayStation();
     stationMap.addStation(station, stationName);
+    const registerdStationNames = Object.keys(stationMap.allStations);
+    showResult(registerdStationNames);
   } else {
     alert(alertMessage);
   }
diff --git a/src/templates/stationManager.js b/src/templates/stationManager.js
index fef3e7e05..d3b8df407 100644
--- a/src/templates/stationManager.js
+++ b/src/templates/stationManager.js
@@ -1,7 +1,21 @@
-export const stationListTemplate = () => {
-  return ``;
+const getStationItemTemplate = (stationName) => {
+  return `
+    <tr>
+      <td>${stationName}</td>
+      <td><button class="station-delete-button" data-delete-target="${stationName}">삭제</button></td>
+    </tr>
+  `;
+};
+
+export const getStationItemsTemplate = (stationNames) => {
+  let stationItems = '';
+  stationNames.forEach((stationName) => {
+    stationItems += getStationItemTemplate(stationName);
+  });
+
+  return stationItems;
 };
 
 export default {
-  stationListTemplate,
+  getStationItemsTemplate,
 };

From ffc9ab75a9a97def89909083ac688884b074d3e6 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 13:23:24 +0900
Subject: [PATCH 47/62] feat: validation check before 'delete subway station'
 with alert message

---
 index.html                     |  4 ---
 src/classes/subwayMap.js       |  4 +--
 src/constants/configuration.js |  2 ++
 src/handlers/stationManager.js | 46 +++++++++++++++++++++++++++-------
 src/listeners/listeners.js     | 10 +++++---
 src/store/store.js             |  4 +--
 6 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index bd7063670..b47ed2e71 100644
--- a/index.html
+++ b/index.html
@@ -29,10 +29,6 @@ <h2><span>&#128649</span>지하철 역 목록</h2>
             <th>설정</th>
           </thead>
           <tbody id="result-station-items">
-            <tr>
-              <td>인천</td>
-              <td><button class="station-delete-button">삭제</button></td>
-            </tr>
           </tbody>
         </table>
       </div>
diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index 791e8ef08..417e9960d 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -23,7 +23,7 @@ export default class SubwayMap {
     }
   }
 
-  checkIsDuplicatedStationName(stationName) {
+  checkIsStationNameExist(stationName) {
     return stationName in this.#allStations;
   }
 
@@ -39,7 +39,7 @@ export default class SubwayMap {
     }
   }
 
-  checkIsDuplicatedLineName(lineName) {
+  checkIsLineNameExist(lineName) {
     return lineName in this.#allLines;
   }
 
diff --git a/src/constants/configuration.js b/src/constants/configuration.js
index f92a92a43..8c1002b28 100644
--- a/src/constants/configuration.js
+++ b/src/constants/configuration.js
@@ -6,6 +6,8 @@ export const SHORT_STATION_NAME_ALERT_MESSAGE =
   '역의 이름이 너무 짧습니다. 2글자 이상의 이름을 입력해주세요';
 export const SAME_STATION_NAME_EXIST_MESSAGE =
   '이미 동일한 이름의 역이 등록되어 있습니다. 다른 이름을 입력해주세요';
+export const STATION_REGISTERED_IN_LINE_MESSAGE =
+  '이 역은 노선의 구간으로 등록되어 있습니다. 삭제를 원하신다면 해당 노선 구간에서 역을 빼주세요.';
 
 export default {
   SUBWAY_STATION_NAME_LENGTH_LIMIT,
diff --git a/src/handlers/stationManager.js b/src/handlers/stationManager.js
index b72636b2d..20f323212 100644
--- a/src/handlers/stationManager.js
+++ b/src/handlers/stationManager.js
@@ -3,16 +3,17 @@ import {
   resultStationItemsElement,
 } from '../elements/stationManager.js';
 import SubwayStation from '../classes/subwayStation.js';
-import { stationMap } from '../store/store.js';
+import { subwayMap } from '../store/store.js';
 import {
   SAME_STATION_NAME_EXIST_MESSAGE,
   SHORT_STATION_NAME_ALERT_MESSAGE,
+  STATION_REGISTERED_IN_LINE_MESSAGE,
 } from '../constants/configuration.js';
 import { getStationItemsTemplate } from '../templates/stationManager.js';
 
-const getAlertMessage = (stationName) => {
+const getAddStationAlertMessage = (stationName) => {
   let alertMessage = '';
-  if (stationMap.checkIsDuplicatedStationName(stationName)) {
+  if (subwayMap.checkIsStationNameExist(stationName)) {
     alertMessage += `${SAME_STATION_NAME_EXIST_MESSAGE}\n`;
   }
   if (SubwayStation.checkIsStationNameShort(stationName)) {
@@ -22,18 +23,45 @@ const getAlertMessage = (stationName) => {
   return alertMessage;
 };
 
-const showResult = (stationNames) => {
-  resultStationItemsElement.innerHTML = getStationItemsTemplate(stationNames);
+const getDeleteStationAlertMessage = (stationName) => {
+  let alertMessage = '';
+  const station = subwayMap.allStations[stationName];
+  if (SubwayStation.checkIsStationBelongToLine(station)) {
+    alertMessage += STATION_REGISTERED_IN_LINE_MESSAGE;
+  }
+
+  return alertMessage;
+};
+
+const showResult = () => {
+  const registerdStationNames = Object.keys(subwayMap.allStations);
+  resultStationItemsElement.innerHTML = getStationItemsTemplate(
+    registerdStationNames
+  );
 };
 
 export const onAddStation = () => {
   const stationName = stationNameInputElement.value;
-  const alertMessage = getAlertMessage(stationName);
+  const alertMessage = getAddStationAlertMessage(stationName);
   if (alertMessage === '') {
     const station = new SubwayStation();
-    stationMap.addStation(station, stationName);
-    const registerdStationNames = Object.keys(stationMap.allStations);
-    showResult(registerdStationNames);
+    subwayMap.addStation(station, stationName);
+    showResult();
+  } else {
+    alert(alertMessage);
+  }
+};
+
+export const onDeleteStation = (event) => {
+  const targetElement = event.target;
+  if (targetElement.className !== 'station-delete-button') {
+    return;
+  }
+  const deleteTargetName = targetElement.dataset.deleteTarget;
+  const alertMessage = getDeleteStationAlertMessage(deleteTargetName);
+  if (alertMessage === '') {
+    subwayMap.deleteStationByName(deleteTargetName);
+    showResult();
   } else {
     alert(alertMessage);
   }
diff --git a/src/listeners/listeners.js b/src/listeners/listeners.js
index c7fd2a3b1..3d25d780b 100644
--- a/src/listeners/listeners.js
+++ b/src/listeners/listeners.js
@@ -1,8 +1,12 @@
-import { stationAddButtonElement } from '../elements/stationManager.js';
-import { onAddStation } from '../handlers/stationManager.js';
+import {
+  stationAddButtonElement,
+  resultStationItemsElement,
+} from '../elements/stationManager.js';
+import { onAddStation, onDeleteStation } from '../handlers/stationManager.js';
 
 const addAllEventListeners = () => {
   stationAddButtonElement.addEventListener('click', onAddStation);
+  resultStationItemsElement.addEventListener('click', onDeleteStation);
 };
 
-export default { addAllEventListeners };
\ No newline at end of file
+export default { addAllEventListeners };
diff --git a/src/store/store.js b/src/store/store.js
index 17f1fb8a4..1f40430b5 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,7 +1,7 @@
 import StationMap from '../classes/subwayMap.js';
 
-export const stationMap = new StationMap();
+export const subwayMap = new StationMap();
 
 export default {
-  stationMap,
+  subwayMap,
 };

From 427ad5bb4d65033d56e4edec9b0f1b3b1c066a8d Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 13:32:00 +0900
Subject: [PATCH 48/62] docs: remove unnecessary feature

---
 README.md | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 0c404d4c9..7a78a00c0 100644
--- a/README.md
+++ b/README.md
@@ -86,10 +86,9 @@
 
 - 역 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'add subway station' with alert message)
   - 잘못된 입력이 들어왔을 때, 역을 추가할 수 없는 이유를 알려주어 재입력을 유도
-- 역 추가 결과 보여주기(show 'add subway station' result)
 - 역 삭제 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'delete subway station' with alert message)
   - 삭제할 수 없는 역을 삭제하려 할 때, 역을 삭제할 수 없는 이유를 알려주어 재입력을 유도
-- 역 삭제 결과 보여주기 (show 'delete subway station' result)
+- 역 추가 & 삭제 결과 보여주기(show result of add & delete subway station)
 
 <br/>
 
@@ -97,8 +96,7 @@
 
 - 노선 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'add subway line' with alert message)
   - 잘못된 입력이 들어왔을 때, 노선을 추가할 수 없는 이유를 알려주어 재입력을 유도
-- 노선 추가 결과 보여주기 (show 'add subway line' result)
-- 노선 삭제 결과 보여주기 (show 'delete subway line' result)
+- 노선 추가 & 삭제 결과 보여주기 (show result of add & delete subway line)
 
 <br/>
 
@@ -106,10 +104,9 @@
 
 - 구간 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'insert subway station in subway line' with alert message)
   - 구간을 추가할 수 없는 이유를 알려주어 재입력을 유도
-- 구간 추가 결과 보여주기 (show 'insert subway station in subway line' result)
 - 구간 삭제 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'pull out subway station from subway line' with alert message)
   - 역을 삭제할 수 없는 이유를 알려주면서 노선 자체를 제거할 방법을 안내
-- 구간 삭제 결과 보여주기 (show 'pull out subway station from subway line' result)
+- 구간 추가 & 삭제 결과 보여주기 (show result of insert & pull out subway station)
 
 <br/>
 

From d4d77a4e277975fa00b4064a0e469c89139be98a Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 13:35:23 +0900
Subject: [PATCH 49/62] fix: make station namp input value empty after adding
 station

---
 src/handlers/stationManager.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/handlers/stationManager.js b/src/handlers/stationManager.js
index 20f323212..302641c2c 100644
--- a/src/handlers/stationManager.js
+++ b/src/handlers/stationManager.js
@@ -47,6 +47,7 @@ export const onAddStation = () => {
     const station = new SubwayStation();
     subwayMap.addStation(station, stationName);
     showResult();
+    stationNameInputElement.value = '';
   } else {
     alert(alertMessage);
   }

From 744cdb3fed6bbecfb25b2d7782e65cfd13840522 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 14:01:57 +0900
Subject: [PATCH 50/62] fix: add sync data from element funtion

---
 src/data/data.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/data/data.js b/src/data/data.js
index 131400cfd..668b91e28 100644
--- a/src/data/data.js
+++ b/src/data/data.js
@@ -41,6 +41,16 @@ export const loadDataToLocalStorage = () => {
   }
 };
 
+export const syncDataFromAllElements = () => {
+  data.stationNameInputValue = stationNameInputElement.value;
+  data.lineNameInputValue = lineNameInputElement.value;
+  data.lineStartStationSelectorValue = lineStartStationSelectorElement.value;
+  data.lineEndStationSelectorValue = lineEndStationSelectorElement.value;
+  data.sectionOrderInputNumberValue = sectionOrderInputElement.value;
+  data.sectionLineNameValue = sectionLineNameElement.value;
+  data.sectionStationSelectorValue = sectionStationSelectorElement.value;
+};
+
 export const syncDataToAllElements = () => {
   stationNameInputElement.value = data.stationNameInputValue;
   lineNameInputElement.value = data.lineNameInputValue;

From a91f7e10f35dc1c6bb70668ff49ed8423a2ecb6b Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 15:07:59 +0900
Subject: [PATCH 51/62] feat: validation check before 'add subway line' with
 alert message

---
 src/classes/subwayLine.js      | 17 +++++-------
 src/constants/configuration.js |  6 +++++
 src/elements/lineManager.js    |  2 +-
 src/handlers/lineManager.js    | 48 ++++++++++++++++++++++++++++++++++
 src/listeners/listeners.js     |  3 +++
 5 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index f9133c01a..db0c58781 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -2,19 +2,14 @@ import { SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT } from '../constants/configu
 
 export default class SubwayLine {
   #allStationsInLine = [];
-  #upTerminatingStationName;
-  #downTerminatingStationName;
-
-  static checkIsTerminatingStationsSame(
-    upTerminatingStationName,
-    downTerminatingStationName
-  ) {
-    return downTerminatingStationName === upTerminatingStationName;
+
+  static checkIsStartAndEndStationNamesSame(startStationName, endStationName) {
+    return startStationName === endStationName;
   }
 
-  constructor({ upTerminatingStationName, downTerminatingStationName }) {
-    this.#allStationsInLine.push(upTerminatingStationName);
-    this.#allStationsInLine.push(downTerminatingStationName);
+  constructor({ startStationName, endStationName }) {
+    this.#allStationsInLine.push(startStationName);
+    this.#allStationsInLine.push(endStationName);
   }
 
   get allStationsInLine() {
diff --git a/src/constants/configuration.js b/src/constants/configuration.js
index 8c1002b28..a138a3d1c 100644
--- a/src/constants/configuration.js
+++ b/src/constants/configuration.js
@@ -8,9 +8,15 @@ export const SAME_STATION_NAME_EXIST_MESSAGE =
   '이미 동일한 이름의 역이 등록되어 있습니다. 다른 이름을 입력해주세요';
 export const STATION_REGISTERED_IN_LINE_MESSAGE =
   '이 역은 노선의 구간으로 등록되어 있습니다. 삭제를 원하신다면 해당 노선 구간에서 역을 빼주세요.';
+export const SAME_LINE_NAME_EXIST_MESSAGE =
+  '이미 동일한 이름의 노선이 등록되어 있습니다. 다른 이름을 입력해주세요';
+export const END_AND_START_STATION_NAME_SAME_MESSAGE =
+  '상행 종점역과 하행 종점역이 같습니다. 서로 다른 종점역들을 선택해주세요.';
 
 export default {
   SUBWAY_STATION_NAME_LENGTH_LIMIT,
   SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT,
   SUBWAY_MAP_ITEM_NAME,
+  SAME_LINE_NAME_EXIST_MESSAGE,
+  END_AND_START_STATION_NAME_SAME_MESSAGE,
 };
diff --git a/src/elements/lineManager.js b/src/elements/lineManager.js
index 1cfd8f6fa..6d5125ca4 100644
--- a/src/elements/lineManager.js
+++ b/src/elements/lineManager.js
@@ -5,7 +5,7 @@ export const lineStartStationSelectorElement = document.getElementById(
 export const lineEndStationSelectorElement = document.getElementById(
   'line-end-station-selector'
 );
-export const lineAddButtonElement = document.getElementById('#line-add-button');
+export const lineAddButtonElement = document.getElementById('line-add-button');
 export const lineDeleteButtons = document.querySelectorAll(
   '.line-delete-button'
 );
diff --git a/src/handlers/lineManager.js b/src/handlers/lineManager.js
index e69de29bb..f510712ae 100644
--- a/src/handlers/lineManager.js
+++ b/src/handlers/lineManager.js
@@ -0,0 +1,48 @@
+import {
+  lineNameInputElement,
+  lineStartStationSelectorElement,
+  lineEndStationSelectorElement,
+} from '../elements/lineManager.js';
+import { subwayMap } from '../store/store.js';
+import SubwayLine from '../classes/subwayLine.js';
+import {
+  SAME_LINE_NAME_EXIST_MESSAGE,
+  END_AND_START_STATION_NAME_SAME_MESSAGE,
+} from '../constants/configuration.js';
+
+const getAddLineAlertMessage = ({
+  lineName,
+  startStationName,
+  endStationName,
+}) => {
+  let alertMessage = '';
+  if (subwayMap.checkIsLineNameExist(lineName)) {
+    alertMessage += `${SAME_LINE_NAME_EXIST_MESSAGE}\n`;
+  }
+  if (startStationName === endStationName) {
+    alertMessage += END_AND_START_STATION_NAME_SAME_MESSAGE;
+  }
+
+  return alertMessage;
+};
+
+export const onAddLine = () => {
+  const lineName = lineNameInputElement.value;
+  const startStationName = lineStartStationSelectorElement.value;
+  const endStationName = lineEndStationSelectorElement.value;
+  const line = new SubwayLine({ startStationName, endStationName });
+  const alertMessage = getAddLineAlertMessage({
+    lineName,
+    startStationName,
+    endStationName,
+  });
+  if (alertMessage === '') {
+    subwayMap.addLine(line, lineName);
+  } else {
+    alert(alertMessage);
+  }
+};
+
+export default {
+  onAddLine,
+};
diff --git a/src/listeners/listeners.js b/src/listeners/listeners.js
index 3d25d780b..9e629e28c 100644
--- a/src/listeners/listeners.js
+++ b/src/listeners/listeners.js
@@ -2,11 +2,14 @@ import {
   stationAddButtonElement,
   resultStationItemsElement,
 } from '../elements/stationManager.js';
+import { lineAddButtonElement } from '../elements/lineManager.js';
 import { onAddStation, onDeleteStation } from '../handlers/stationManager.js';
+import { onAddLine } from '../handlers/lineManager.js';
 
 const addAllEventListeners = () => {
   stationAddButtonElement.addEventListener('click', onAddStation);
   resultStationItemsElement.addEventListener('click', onDeleteStation);
+  lineAddButtonElement.addEventListener('click', onAddLine);
 };
 
 export default { addAllEventListeners };

From d0c3793a377caf6912e118fcd37b25aaabcf8e16 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 17:13:39 +0900
Subject: [PATCH 52/62] feat: show result of add & delete subway line

---
 index.html                            | 10 +++---
 src/classes/subwayLine.js             |  2 +-
 src/elements/contentConvertButtons.js |  7 +++++
 src/elements/lineManager.js           |  8 +++--
 src/handlers/lineManager.js           | 44 ++++++++++++++++++++++++++-
 src/handlers/stationManager.js        | 15 +++++----
 src/listeners/listeners.js            | 14 +++++++--
 src/templates/selector.js             | 16 ++++++++++
 src/templates/stationManager.js       | 21 -------------
 src/templates/table.js                | 33 ++++++++++++++++++++
 10 files changed, 132 insertions(+), 38 deletions(-)
 create mode 100644 src/elements/contentConvertButtons.js
 create mode 100644 src/templates/selector.js
 delete mode 100644 src/templates/stationManager.js
 create mode 100644 src/templates/table.js

diff --git a/index.html b/index.html
index b47ed2e71..a939286dc 100644
--- a/index.html
+++ b/index.html
@@ -10,10 +10,10 @@
       <h1>🚇 지하철 노선도 관리</h1>
     </div>
     <div>
-      <a class="link" href="#station-manager"><button id="station-manager-button">1.역 관리</button></a>
-      <a class="link" href="#line-manager"><button id="line-manager-button">2.노선 관리</button></a>
-      <a class="link" href="#section-manager"><button id="section-manager-button">3.구간 관리</button></a>
-      <a class="link" href="#map-print"><button id="map-print-manager-button">4.지하철 노선도 출력</button></a>
+      <a href="#station-manager"><button id="station-manager-button">1.역 관리</button></a>
+      <a href="#line-manager"><button id="line-manager-button">2.노선 관리</button></a>
+      <a href="#section-manager"><button id="section-manager-button">3.구간 관리</button></a>
+      <a href="#map-print"><button id="map-print-manager-button">4.지하철 노선도 출력</button></a>
     </div>
     <div id="station-manager" class="content">
       <div class="station-name">
@@ -54,7 +54,7 @@ <h2><span>&#128649</span>지하철 노선 목록</h2>
             <th>하행 종점역</th>
             <th>설정</th>
           </thead>
-          <tbody>
+          <tbody id="result-line-items">
             <tr>
               <td>1호선</td>
               <td>인천</td>
diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index db0c58781..99a4c5abb 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -3,7 +3,7 @@ import { SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT } from '../constants/configu
 export default class SubwayLine {
   #allStationsInLine = [];
 
-  static checkIsStartAndEndStationNamesSame(startStationName, endStationName) {
+  static checkIsStationsSame(startStationName, endStationName) {
     return startStationName === endStationName;
   }
 
diff --git a/src/elements/contentConvertButtons.js b/src/elements/contentConvertButtons.js
new file mode 100644
index 000000000..459d19cc8
--- /dev/null
+++ b/src/elements/contentConvertButtons.js
@@ -0,0 +1,7 @@
+export const lineManagerButtonElement = document.getElementById(
+  'line-manager-button'
+);
+
+export default {
+  lineManagerButtonElement,
+};
diff --git a/src/elements/lineManager.js b/src/elements/lineManager.js
index 6d5125ca4..d2d1a7311 100644
--- a/src/elements/lineManager.js
+++ b/src/elements/lineManager.js
@@ -6,14 +6,18 @@ export const lineEndStationSelectorElement = document.getElementById(
   'line-end-station-selector'
 );
 export const lineAddButtonElement = document.getElementById('line-add-button');
-export const lineDeleteButtons = document.querySelectorAll(
+export const lineDeleteButtonElements = document.querySelectorAll(
   '.line-delete-button'
 );
+export const resultLineItemsElement = document.getElementById(
+  'result-line-items'
+);
 
 export default {
   lineNameInputElement,
   lineStartStationSelectorElement,
   lineEndStationSelectorElement,
   lineAddButtonElement,
-  lineDeleteButtons,
+  lineDeleteButtonElements,
+  resultLineItemsElement,
 };
diff --git a/src/handlers/lineManager.js b/src/handlers/lineManager.js
index f510712ae..4da022b38 100644
--- a/src/handlers/lineManager.js
+++ b/src/handlers/lineManager.js
@@ -2,6 +2,7 @@ import {
   lineNameInputElement,
   lineStartStationSelectorElement,
   lineEndStationSelectorElement,
+  resultLineItemsElement,
 } from '../elements/lineManager.js';
 import { subwayMap } from '../store/store.js';
 import SubwayLine from '../classes/subwayLine.js';
@@ -9,6 +10,8 @@ import {
   SAME_LINE_NAME_EXIST_MESSAGE,
   END_AND_START_STATION_NAME_SAME_MESSAGE,
 } from '../constants/configuration.js';
+import { getTableRowsTemplate } from '../templates/table.js';
+import { getSelectorOptionsTemplate } from '../templates/selector.js';
 
 const getAddLineAlertMessage = ({
   lineName,
@@ -19,13 +22,38 @@ const getAddLineAlertMessage = ({
   if (subwayMap.checkIsLineNameExist(lineName)) {
     alertMessage += `${SAME_LINE_NAME_EXIST_MESSAGE}\n`;
   }
-  if (startStationName === endStationName) {
+  if (SubwayLine.checkIsStationsSame(startStationName, endStationName)) {
     alertMessage += END_AND_START_STATION_NAME_SAME_MESSAGE;
   }
 
   return alertMessage;
 };
 
+const showResultTable = () => {
+  const lineTableRows = [];
+  const allLineNames = Object.keys(subwayMap.allLines);
+  allLineNames.forEach((lineName) => {
+    const line = subwayMap.allLines[lineName];
+    const lineStartStation = line.allStationsInLine[0];
+    const lineEndStationIndex = line.allStationsInLine.length - 1;
+    const lineEndStation = line.allStationsInLine[lineEndStationIndex];
+    const lineTableRow = [lineName, lineStartStation, lineEndStation];
+    lineTableRows.push(lineTableRow);
+  });
+
+  resultLineItemsElement.innerHTML = getTableRowsTemplate(lineTableRows, 0, 'line-delete-button');
+};
+
+export const onConverToLineContent = () => {
+  const allStationNames = Object.keys(subwayMap.allStations);
+  lineStartStationSelectorElement.innerHTML = getSelectorOptionsTemplate(
+    allStationNames
+  );
+  lineEndStationSelectorElement.innerHTML = getSelectorOptionsTemplate(
+    allStationNames
+  );
+};
+
 export const onAddLine = () => {
   const lineName = lineNameInputElement.value;
   const startStationName = lineStartStationSelectorElement.value;
@@ -38,11 +66,25 @@ export const onAddLine = () => {
   });
   if (alertMessage === '') {
     subwayMap.addLine(line, lineName);
+    showResultTable();
   } else {
     alert(alertMessage);
   }
 };
 
+export const onDeleteLine = (event) => {
+  const targetElement = event.target;
+  console.log(targetElement);
+  if (targetElement.className !== 'line-delete-button') {
+    return;
+  }
+  const deleteTargetName = targetElement.dataset.deleteTarget;
+  subwayMap.deleteLineByName(deleteTargetName);
+  showResultTable();
+};
+
 export default {
   onAddLine,
+  onConverToLineContent,
+  onDeleteLine,
 };
diff --git a/src/handlers/stationManager.js b/src/handlers/stationManager.js
index 302641c2c..4d7f615a3 100644
--- a/src/handlers/stationManager.js
+++ b/src/handlers/stationManager.js
@@ -9,7 +9,7 @@ import {
   SHORT_STATION_NAME_ALERT_MESSAGE,
   STATION_REGISTERED_IN_LINE_MESSAGE,
 } from '../constants/configuration.js';
-import { getStationItemsTemplate } from '../templates/stationManager.js';
+import { getTableRowsTemplate } from '../templates/table.js';
 
 const getAddStationAlertMessage = (stationName) => {
   let alertMessage = '';
@@ -33,10 +33,13 @@ const getDeleteStationAlertMessage = (stationName) => {
   return alertMessage;
 };
 
-const showResult = () => {
+const showResultTable = () => {
   const registerdStationNames = Object.keys(subwayMap.allStations);
-  resultStationItemsElement.innerHTML = getStationItemsTemplate(
-    registerdStationNames
+  const resultRows = registerdStationNames.map((stationName) => [stationName]);
+  resultStationItemsElement.innerHTML = getTableRowsTemplate(
+    resultRows,
+    0,
+    'station-delete-button'
   );
 };
 
@@ -46,7 +49,7 @@ export const onAddStation = () => {
   if (alertMessage === '') {
     const station = new SubwayStation();
     subwayMap.addStation(station, stationName);
-    showResult();
+    showResultTable();
     stationNameInputElement.value = '';
   } else {
     alert(alertMessage);
@@ -62,7 +65,7 @@ export const onDeleteStation = (event) => {
   const alertMessage = getDeleteStationAlertMessage(deleteTargetName);
   if (alertMessage === '') {
     subwayMap.deleteStationByName(deleteTargetName);
-    showResult();
+    showResultTable();
   } else {
     alert(alertMessage);
   }
diff --git a/src/listeners/listeners.js b/src/listeners/listeners.js
index 9e629e28c..a24f51f7f 100644
--- a/src/listeners/listeners.js
+++ b/src/listeners/listeners.js
@@ -2,14 +2,24 @@ import {
   stationAddButtonElement,
   resultStationItemsElement,
 } from '../elements/stationManager.js';
-import { lineAddButtonElement } from '../elements/lineManager.js';
+import {
+  lineAddButtonElement,
+  resultLineItemsElement,
+} from '../elements/lineManager.js';
 import { onAddStation, onDeleteStation } from '../handlers/stationManager.js';
-import { onAddLine } from '../handlers/lineManager.js';
+import {
+  onAddLine,
+  onConverToLineContent,
+  onDeleteLine,
+} from '../handlers/lineManager.js';
+import { lineManagerButtonElement } from '../elements/contentConvertButtons.js';
 
 const addAllEventListeners = () => {
   stationAddButtonElement.addEventListener('click', onAddStation);
   resultStationItemsElement.addEventListener('click', onDeleteStation);
   lineAddButtonElement.addEventListener('click', onAddLine);
+  lineManagerButtonElement.addEventListener('click', onConverToLineContent);
+  resultLineItemsElement.addEventListener('click', onDeleteLine);
 };
 
 export default { addAllEventListeners };
diff --git a/src/templates/selector.js b/src/templates/selector.js
new file mode 100644
index 000000000..1d776517e
--- /dev/null
+++ b/src/templates/selector.js
@@ -0,0 +1,16 @@
+const getSelectorOptionTemplate = (option) => {
+  return `<option value=${option}>${option}</option>`;
+};
+
+export const getSelectorOptionsTemplate = (options) => {
+  let selectorOptionsTemplate = '';
+  options.forEach((option) => {
+    selectorOptionsTemplate += getSelectorOptionTemplate(option);
+  });
+
+  return selectorOptionsTemplate;
+};
+
+export default {
+  getSelectorOptionsTemplate,
+};
diff --git a/src/templates/stationManager.js b/src/templates/stationManager.js
deleted file mode 100644
index d3b8df407..000000000
--- a/src/templates/stationManager.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const getStationItemTemplate = (stationName) => {
-  return `
-    <tr>
-      <td>${stationName}</td>
-      <td><button class="station-delete-button" data-delete-target="${stationName}">삭제</button></td>
-    </tr>
-  `;
-};
-
-export const getStationItemsTemplate = (stationNames) => {
-  let stationItems = '';
-  stationNames.forEach((stationName) => {
-    stationItems += getStationItemTemplate(stationName);
-  });
-
-  return stationItems;
-};
-
-export default {
-  getStationItemsTemplate,
-};
diff --git a/src/templates/table.js b/src/templates/table.js
new file mode 100644
index 000000000..a0a84ac51
--- /dev/null
+++ b/src/templates/table.js
@@ -0,0 +1,33 @@
+const getTableRowTemplate = (row, deleteTarget, deleteButtonClass) => {
+  let tableCellsTemplate = '';
+  row.forEach((cell) => {
+    tableCellsTemplate += `<td>${cell}</td>`;
+  });
+  return `
+    <tr>
+      ${tableCellsTemplate}
+      <td><button class="${deleteButtonClass}" data-delete-target="${deleteTarget}">삭제</button></td>
+    </tr>
+  `;
+};
+
+export const getTableRowsTemplate = (
+  rows,
+  deleteTargetCellIndex,
+  deleteButtonClass
+) => {
+  let rowItemsTemplate = '';
+  rows.forEach((row) => {
+    rowItemsTemplate += getTableRowTemplate(
+      row,
+      row[deleteTargetCellIndex],
+      deleteButtonClass
+    );
+  });
+
+  return rowItemsTemplate;
+};
+
+export default {
+  getTableRowsTemplate,
+};

From e40e2e01f1298faaa56bd35302af1054d6791661 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 17:32:34 +0900
Subject: [PATCH 53/62] fix: modify table template to set delete button text

---
 src/elements/contentConvertButtons.js |  5 +++++
 src/handlers/lineManager.js           |  9 ++++++--
 src/handlers/stationManager.js        | 12 ++++++-----
 src/templates/table.js                | 30 +++++++++++++++++++--------
 4 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/elements/contentConvertButtons.js b/src/elements/contentConvertButtons.js
index 459d19cc8..6b35772ef 100644
--- a/src/elements/contentConvertButtons.js
+++ b/src/elements/contentConvertButtons.js
@@ -2,6 +2,11 @@ export const lineManagerButtonElement = document.getElementById(
   'line-manager-button'
 );
 
+export const sectionManagerButtonElement = document.getElementById(
+  'section-manager-button'
+);
+
 export default {
   lineManagerButtonElement,
+  sectionManagerButtonElement,
 };
diff --git a/src/handlers/lineManager.js b/src/handlers/lineManager.js
index 4da022b38..d934a1090 100644
--- a/src/handlers/lineManager.js
+++ b/src/handlers/lineManager.js
@@ -40,8 +40,13 @@ const showResultTable = () => {
     const lineTableRow = [lineName, lineStartStation, lineEndStation];
     lineTableRows.push(lineTableRow);
   });
-
-  resultLineItemsElement.innerHTML = getTableRowsTemplate(lineTableRows, 0, 'line-delete-button');
+  const deleteTargetCellIndex = 0;
+  const deleteButtonClass = 'line-delete-button';
+  resultLineItemsElement.innerHTML = getTableRowsTemplate({
+    rows: lineTableRows,
+    deleteTargetCellIndex,
+    deleteButtonClass,
+  });
 };
 
 export const onConverToLineContent = () => {
diff --git a/src/handlers/stationManager.js b/src/handlers/stationManager.js
index 4d7f615a3..eadb7d603 100644
--- a/src/handlers/stationManager.js
+++ b/src/handlers/stationManager.js
@@ -36,11 +36,13 @@ const getDeleteStationAlertMessage = (stationName) => {
 const showResultTable = () => {
   const registerdStationNames = Object.keys(subwayMap.allStations);
   const resultRows = registerdStationNames.map((stationName) => [stationName]);
-  resultStationItemsElement.innerHTML = getTableRowsTemplate(
-    resultRows,
-    0,
-    'station-delete-button'
-  );
+  const deleteTargetCellIndex = 0;
+  const deleteButtonClass = 'station-delete-button';
+  resultStationItemsElement.innerHTML = getTableRowsTemplate({
+    rows: resultRows,
+    deleteTargetCellIndex,
+    deleteButtonClass,
+  });
 };
 
 export const onAddStation = () => {
diff --git a/src/templates/table.js b/src/templates/table.js
index a0a84ac51..c7bfb36a8 100644
--- a/src/templates/table.js
+++ b/src/templates/table.js
@@ -1,4 +1,9 @@
-const getTableRowTemplate = (row, deleteTarget, deleteButtonClass) => {
+const getTableRowTemplate = ({
+  row,
+  deleteTarget,
+  deleteButtonClass,
+  deletebuttonText,
+}) => {
   let tableCellsTemplate = '';
   row.forEach((cell) => {
     tableCellsTemplate += `<td>${cell}</td>`;
@@ -6,23 +11,30 @@ const getTableRowTemplate = (row, deleteTarget, deleteButtonClass) => {
   return `
     <tr>
       ${tableCellsTemplate}
-      <td><button class="${deleteButtonClass}" data-delete-target="${deleteTarget}">삭제</button></td>
+      <td><button class="${deleteButtonClass}" data-delete-target="${deleteTarget}">${deletebuttonText}</button></td>
     </tr>
   `;
 };
 
-export const getTableRowsTemplate = (
+export const getTableRowsTemplate = ({
   rows,
   deleteTargetCellIndex,
-  deleteButtonClass
-) => {
+  deleteButtonClass,
+  deleteButtonText,
+}) => {
   let rowItemsTemplate = '';
+  let defaultDeleteButtonText = '삭제';
+  if (deleteButtonText) {
+    defaultDeleteButtonText = deleteButtonText;
+  }
   rows.forEach((row) => {
-    rowItemsTemplate += getTableRowTemplate(
+    const deleteTarget = row[deleteTargetCellIndex];
+    rowItemsTemplate += getTableRowTemplate({
       row,
-      row[deleteTargetCellIndex],
-      deleteButtonClass
-    );
+      deleteTarget,
+      deleteButtonClass,
+      deletebuttonText: defaultDeleteButtonText,
+    });
   });
 
   return rowItemsTemplate;

From b8aded2283e865ebd046957f89e9869577f2da86 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 20:17:30 +0900
Subject: [PATCH 54/62] docs: add exception and solution about inserting subway
 station index type

---
 README.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 7a78a00c0..4c644f952 100644
--- a/README.md
+++ b/README.md
@@ -47,8 +47,10 @@
 
 - 지하철 노선에 구간을 추가, 즉 지하철 노선 안의 두 역 사이에 새로운 역 끼워넣기(insert subway station in subway line)
   - :exclamation: 예외#6 - 끼워 넣으려는 역이 이미 노선 안에 있는 경우
+  - :exclamation: 예외#7 - 끼워넣으려는 역의 순서가 숫자로 표현되어 있지 않을 경우
 - 지하철 노선 구간 추가 가능성 여부 검사 (check if the subway station can be inserted)
   - :wrench: 해결(예외 #6) - 끼워 넣으려는 역이 이미 노선 안에 있는지 검사
+  - :wrench: 해결(예외 #7) - 끼워 넣으려는 역의 순서값이 숫자인지 검사
 
 <br/>
 
@@ -59,9 +61,9 @@
 ### 지하철 구간 삭제 기능
 
 - 지하철 노선에 구간을 삭제, 즉 지하철 노선 안에서 특정 역을 빼기 (pull out subway station in subway line)
-  - :exclamation: 예외#7 - 노선에 포함된 역을 삭제하려는 시점에 그 노선에 포함된 역이 두개 이하일 경우
+  - :exclamation: 예외#8 - 노선에 포함된 역을 삭제하려는 시점에 그 노선에 포함된 역이 두개 이하일 경우
 - 지하철 노선 구간 삭제 가능성 여부 검사 (check if the subway station can be pulled out)
-  - :wrench: 해결(예외 #7) - 삭제 후 그 노선에 포함된 역이 두개 미만인지를 검사
+  - :wrench: 해결(예외 #8) - 삭제 후 그 노선에 포함된 역이 두개 미만인지를 검사
 
 <br/>
 

From 08160362fb3cdba4cf88b3f587c3c3a2fe9c5820 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 20:29:31 +0900
Subject: [PATCH 55/62] feat: validation check before 'insert & pull out subway
 station in subway line' with alert message

---
 index.css                      |  8 +++
 index.html                     | 13 ++---
 src/classes/subwayLine.js      | 25 +++++----
 src/constants/configuration.js |  7 +++
 src/elements/sectionManager.js | 18 +++++--
 src/handlers/lineManager.js    |  1 -
 src/handlers/sectionManager.js | 98 ++++++++++++++++++++++++++++++++++
 src/listeners/listeners.js     | 27 +++++++++-
 src/templates/button.js        | 18 +++++++
 9 files changed, 192 insertions(+), 23 deletions(-)
 create mode 100644 src/templates/button.js

diff --git a/index.css b/index.css
index 1ebbe3266..432019fe9 100644
--- a/index.css
+++ b/index.css
@@ -1,3 +1,11 @@
 .content {
   display: none;
 }
+
+#station-register {
+  display: none;
+}
+
+#registered-station-item-table {
+  display: none;
+}
diff --git a/index.html b/index.html
index a939286dc..0fbff7b84 100644
--- a/index.html
+++ b/index.html
@@ -67,25 +67,22 @@ <h2><span>&#128649</span>지하철 노선 목록</h2>
     </div>
     <div id="section-manager" class="content">
       <h2>구간을 수정할 노선을 선택해주세요</h2>
-      <div class="section-line-menu-button-list">
-        <button class="section-line-menu-button">1호선</button>
-        <button class="section-line-menu-button">2호선</button>
-        <button class="section-line-menu-button">3호선</button>
+      <div id="section-line-menu-button-list">
       </div>
-      <div class="station-register">
+      <div id="station-register">
         <h2><span id="section-line-name">1호선</span> 관리</h2>
         <h3>구간 등록</h3>
         <select id="section-station-selector"></select>
-        <input id="section-order-input" type="text" placeholder="등록" />
+        <input id="section-order-input" type="text" placeholder="순서" />
         <button id="section-add-button">등록</button>
       </div>
-      <table class="registerd-station-item-table">
+      <table id="registered-station-item-table">
         <thead>
           <th>순서</th>
           <th>이름</th>
           <th>설정</th>
         </thead>
-        <tbody>
+        <tbody id="registered-station-items">
           <tr>
             <td>0</td>
             <td>인천</td>
diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index 99a4c5abb..4322dec8f 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -7,6 +7,11 @@ export default class SubwayLine {
     return startStationName === endStationName;
   }
 
+  static checkIsIndexNumberCorrect(index) {
+    console.log(typeof index, Number.isNaN(index));
+    return typeof index === 'number' && Number.isNaN(index) === false;
+  }
+
   constructor({ startStationName, endStationName }) {
     this.#allStationsInLine.push(startStationName);
     this.#allStationsInLine.push(endStationName);
@@ -22,23 +27,23 @@ export default class SubwayLine {
     }
   }
 
-  insertStationToLineByNameAndIndex(stationName, positionIndex) {
+  insertStationToLineByNameAndIndex({ stationName, index }) {
     if (stationName in this.#allStationsInLine === false) {
-      this.#allStationsInLine.splice(positionIndex, 0, stationName);
+      this.#allStationsInLine.splice(index, 0, stationName);
     }
   }
 
-  pullOutStationFromLineByName(stationName) {
-    this.#allStationsInLine.forEach((registeredStationName, index) => {
-      if (registeredStationName === stationName) {
-        this.#allStationsInLine.splice(index, 1);
-      }
-    });
+  pullOutStationFromLineByIndex(stationIndex) {
+    this.#allStationsInLine.splice(stationIndex, 1);
+  }
+
+  checkIsStationNameExistInLine(stationName) {
+    return this.#allStationsInLine.includes(stationName);
   }
 
-  isAllStationsInLineLessThanLimit() {
+  checkIsAllStationsInLineLengthSameAsLimit() {
     return (
-      this.#allStationsInLine.length <
+      this.#allStationsInLine.length <=
       SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT
     );
   }
diff --git a/src/constants/configuration.js b/src/constants/configuration.js
index a138a3d1c..966ae8585 100644
--- a/src/constants/configuration.js
+++ b/src/constants/configuration.js
@@ -12,6 +12,10 @@ export const SAME_LINE_NAME_EXIST_MESSAGE =
   '이미 동일한 이름의 노선이 등록되어 있습니다. 다른 이름을 입력해주세요';
 export const END_AND_START_STATION_NAME_SAME_MESSAGE =
   '상행 종점역과 하행 종점역이 같습니다. 서로 다른 종점역들을 선택해주세요.';
+export const SAME_STATION_REGISTER_TRY_MESSAGE =
+  '이 역은 이미 노선의 이 노선에 등록되어 있습니다. 다른 역을 선택해주세요';
+export const LESS_THAN_DELETE_LENGTH_LIMIT_MESSAGE = `이 역을 빼면 노선의 개수가 ${SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT}개 이하가 되므로 뺄 수 없습니다`;
+export const INDEX_IS_NOT_NUMBER_MESSAGE = '순서로 넣은 값이 숫자로 보이지 않습니다. 다시 입력해주세요'
 
 export default {
   SUBWAY_STATION_NAME_LENGTH_LIMIT,
@@ -19,4 +23,7 @@ export default {
   SUBWAY_MAP_ITEM_NAME,
   SAME_LINE_NAME_EXIST_MESSAGE,
   END_AND_START_STATION_NAME_SAME_MESSAGE,
+  SAME_STATION_REGISTER_TRY_MESSAGE,
+  LESS_THAN_DELETE_LENGTH_LIMIT_MESSAGE,
+  INDEX_IS_NOT_NUMBER_MESSAGE
 };
diff --git a/src/elements/sectionManager.js b/src/elements/sectionManager.js
index ea67e6314..2c78d13cd 100644
--- a/src/elements/sectionManager.js
+++ b/src/elements/sectionManager.js
@@ -1,9 +1,18 @@
-export const sectionLineMenuButtonElements = document.querySelectorAll(
-  '.section-line-menu-button'
+export const sectionLineMenuButtonListElement = document.getElementById(
+  'section-line-menu-button-list'
 );
 export const sectionLineNameElement = document.getElementById(
   'section-line-name'
 );
+export const stationRegisterWrapperElement = document.getElementById(
+  'station-register'
+);
+export const registeredStationItemTableElement = document.getElementById(
+  'registered-station-item-table'
+);
+export const registeredStationItemsElement = document.getElementById(
+  'registered-station-items'
+);
 export const sectionStationSelectorElement = document.getElementById(
   'section-station-selector'
 );
@@ -18,10 +27,13 @@ export const sectionDeleteButtonElements = document.querySelectorAll(
 );
 
 export default {
-  sectionLineMenuButtonElements,
+  sectionLineMenuButtonListElement,
   sectionLineNameElement,
   sectionStationSelectorElement,
+  registeredStationItemTableElement,
+  registeredStationItemsElement,
   sectionOrderInputElement,
   sectionAddButtonElement,
   sectionDeleteButtonElements,
+  stationRegisterWrapperElement,
 };
diff --git a/src/handlers/lineManager.js b/src/handlers/lineManager.js
index d934a1090..26e540510 100644
--- a/src/handlers/lineManager.js
+++ b/src/handlers/lineManager.js
@@ -79,7 +79,6 @@ export const onAddLine = () => {
 
 export const onDeleteLine = (event) => {
   const targetElement = event.target;
-  console.log(targetElement);
   if (targetElement.className !== 'line-delete-button') {
     return;
   }
diff --git a/src/handlers/sectionManager.js b/src/handlers/sectionManager.js
index e69de29bb..ec59f609e 100644
--- a/src/handlers/sectionManager.js
+++ b/src/handlers/sectionManager.js
@@ -0,0 +1,98 @@
+import {
+  sectionLineMenuButtonListElement,
+  sectionStationSelectorElement,
+  sectionLineNameElement,
+  stationRegisterWrapperElement,
+  registeredStationItemTableElement,
+  sectionOrderInputElement,
+} from '../elements/sectionManager.js';
+import { subwayMap } from '../store/store.js';
+import {
+  SAME_STATION_REGISTER_TRY_MESSAGE,
+  LESS_THAN_DELETE_LENGTH_LIMIT_MESSAGE,
+  INDEX_IS_NOT_NUMBER_MESSAGE,
+} from '../constants/configuration.js';
+import { getSelectorOptionsTemplate } from '../templates/selector.js';
+import { getSectionLineMenuButtonsTemplate } from '../templates/button.js';
+import SubwayLine from '../classes/subwayLine.js';
+
+const getInsertStationAlertMessage = ({ line, stationName, index }) => {
+  let alertMessage = '';
+  if (line.checkIsStationNameExistInLine(stationName)) {
+    alertMessage += `${SAME_STATION_REGISTER_TRY_MESSAGE}\n`;
+  }
+  if (SubwayLine.checkIsIndexNumberCorrect(index) === false) {
+    alertMessage += INDEX_IS_NOT_NUMBER_MESSAGE;
+  }
+
+  return alertMessage;
+};
+
+const getPullOutStationAlertMessage = (line) => {
+  let alertMessage = '';
+  if (line.checkIsAllStationsInLineLengthSameAsLimit()) {
+    alertMessage += LESS_THAN_DELETE_LENGTH_LIMIT_MESSAGE;
+  }
+
+  return alertMessage;
+};
+
+export const onClickSectionLineButton = (event) => {
+  const targetElement = event.target;
+  if (targetElement.className === 'section-line-menu-button') {
+    const lineName = targetElement.innerText;
+    sectionLineNameElement.innerText = lineName;
+    stationRegisterWrapperElement.setAttribute('style', 'display: block;');
+    registeredStationItemTableElement.setAttribute('style', 'display: block;');
+  }
+};
+
+export const onConverToSectionContent = () => {
+  const allLineNames = Object.keys(subwayMap.allLines);
+  const allStationNames = Object.keys(subwayMap.allStations);
+  sectionLineMenuButtonListElement.innerHTML = getSectionLineMenuButtonsTemplate(
+    allLineNames
+  );
+  sectionStationSelectorElement.innerHTML = getSelectorOptionsTemplate(
+    allStationNames
+  );
+};
+
+export const onInsertStation = () => {
+  const lineName = sectionLineNameElement.innerText;
+  const stationName = sectionStationSelectorElement.value;
+  const index = Number(sectionOrderInputElement.value);
+  const line = subwayMap.allLines[lineName];
+  const alertMessage = getInsertStationAlertMessage({
+    line,
+    stationName,
+    index,
+  });
+  if (alertMessage === '') {
+    line.insertStationToLineByNameAndIndex({ stationName, index });
+  } else {
+    alert(alertMessage);
+  }
+};
+
+export const onPullOutStation = (event) => {
+  const targetElement = event.target;
+  if (targetElement.className !== 'section-delete-button') {
+    return;
+  }
+  const lineName = sectionLineNameElement.innerText;
+  const targetIndex = targetElement.dataset.deleteTarget;
+  const line = subwayMap.allLines[lineName];
+  const alertMessage = getPullOutStationAlertMessage(line);
+  if (alertMessage === '') {
+    line.pullOutStationFromLineByIndex(targetIndex);
+  } else {
+    alert(alertMessage);
+  }
+};
+
+export default {
+  onInsertStation,
+  onConverToSectionContent,
+  onClickSectionLineButton,
+};
diff --git a/src/listeners/listeners.js b/src/listeners/listeners.js
index a24f51f7f..33f020e8d 100644
--- a/src/listeners/listeners.js
+++ b/src/listeners/listeners.js
@@ -6,13 +6,28 @@ import {
   lineAddButtonElement,
   resultLineItemsElement,
 } from '../elements/lineManager.js';
+import {
+  sectionLineMenuButtonListElement,
+  sectionAddButtonElement,
+  registeredStationItemsElement,
+} from '../elements/sectionManager.js';
+import {
+  lineManagerButtonElement,
+  sectionManagerButtonElement,
+} from '../elements/contentConvertButtons.js';
+
 import { onAddStation, onDeleteStation } from '../handlers/stationManager.js';
 import {
   onAddLine,
   onConverToLineContent,
   onDeleteLine,
 } from '../handlers/lineManager.js';
-import { lineManagerButtonElement } from '../elements/contentConvertButtons.js';
+import {
+  onConverToSectionContent,
+  onClickSectionLineButton,
+  onInsertStation,
+  onPullOutStation,
+} from '../handlers/sectionManager.js';
 
 const addAllEventListeners = () => {
   stationAddButtonElement.addEventListener('click', onAddStation);
@@ -20,6 +35,16 @@ const addAllEventListeners = () => {
   lineAddButtonElement.addEventListener('click', onAddLine);
   lineManagerButtonElement.addEventListener('click', onConverToLineContent);
   resultLineItemsElement.addEventListener('click', onDeleteLine);
+  sectionManagerButtonElement.addEventListener(
+    'click',
+    onConverToSectionContent
+  );
+  sectionLineMenuButtonListElement.addEventListener(
+    'click',
+    onClickSectionLineButton
+  );
+  sectionAddButtonElement.addEventListener('click', onInsertStation);
+  registeredStationItemsElement.addEventListener('click', onPullOutStation);
 };
 
 export default { addAllEventListeners };
diff --git a/src/templates/button.js b/src/templates/button.js
new file mode 100644
index 000000000..deeeacb9d
--- /dev/null
+++ b/src/templates/button.js
@@ -0,0 +1,18 @@
+const getSectionLineMenuButtonTemplate = (lineName) => {
+  return `<button class="section-line-menu-button" data-target-line="${lineName}">${lineName}</button>`;
+};
+
+export const getSectionLineMenuButtonsTemplate = (lineNames) => {
+  let targetLineSetterButtonsTemplate = '';
+  lineNames.forEach((lineName) => {
+    targetLineSetterButtonsTemplate += getSectionLineMenuButtonTemplate(
+      lineName
+    );
+  });
+
+  return targetLineSetterButtonsTemplate;
+};
+
+export default {
+  getSectionLineMenuButtonsTemplate,
+};

From c544b891a977e807093d13a26f3491632afd2c49 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 20:30:38 +0900
Subject: [PATCH 56/62] feat: show result of insert & pull out subway station

---
 README.md                      |  3 +--
 src/handlers/sectionManager.js | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 4c644f952..b5038a16f 100644
--- a/README.md
+++ b/README.md
@@ -104,9 +104,8 @@
 
 ### 구간관리 인터페이스 기능
 
-- 구간 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'insert subway station in subway line' with alert message)
+- 구간 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'insert & pull out subway station in subway line' with alert message)
   - 구간을 추가할 수 없는 이유를 알려주어 재입력을 유도
-- 구간 삭제 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'pull out subway station from subway line' with alert message)
   - 역을 삭제할 수 없는 이유를 알려주면서 노선 자체를 제거할 방법을 안내
 - 구간 추가 & 삭제 결과 보여주기 (show result of insert & pull out subway station)
 
diff --git a/src/handlers/sectionManager.js b/src/handlers/sectionManager.js
index ec59f609e..b619a70f8 100644
--- a/src/handlers/sectionManager.js
+++ b/src/handlers/sectionManager.js
@@ -4,6 +4,7 @@ import {
   sectionLineNameElement,
   stationRegisterWrapperElement,
   registeredStationItemTableElement,
+  registeredStationItemsElement,
   sectionOrderInputElement,
 } from '../elements/sectionManager.js';
 import { subwayMap } from '../store/store.js';
@@ -12,6 +13,7 @@ import {
   LESS_THAN_DELETE_LENGTH_LIMIT_MESSAGE,
   INDEX_IS_NOT_NUMBER_MESSAGE,
 } from '../constants/configuration.js';
+import { getTableRowsTemplate } from '../templates/table.js';
 import { getSelectorOptionsTemplate } from '../templates/selector.js';
 import { getSectionLineMenuButtonsTemplate } from '../templates/button.js';
 import SubwayLine from '../classes/subwayLine.js';
@@ -37,13 +39,28 @@ const getPullOutStationAlertMessage = (line) => {
   return alertMessage;
 };
 
+const showResultTable = (allStationsInLine) => {
+  const stationInLineRows = [];
+  allStationsInLine.forEach((stationName, index) => {
+    stationInLineRows.push([index, stationName]);
+  });
+  registeredStationItemsElement.innerHTML = getTableRowsTemplate({
+    rows: stationInLineRows,
+    deleteTargetCellIndex: 0,
+    deleteButtonClass: 'section-delete-button',
+    deleteButtonText: '노선에서 제거',
+  });
+};
+
 export const onClickSectionLineButton = (event) => {
   const targetElement = event.target;
   if (targetElement.className === 'section-line-menu-button') {
     const lineName = targetElement.innerText;
+    const line = subwayMap.allLines[lineName];
     sectionLineNameElement.innerText = lineName;
     stationRegisterWrapperElement.setAttribute('style', 'display: block;');
     registeredStationItemTableElement.setAttribute('style', 'display: block;');
+    showResultTable(line.allStationsInLine);
   }
 };
 
@@ -70,6 +87,7 @@ export const onInsertStation = () => {
   });
   if (alertMessage === '') {
     line.insertStationToLineByNameAndIndex({ stationName, index });
+    showResultTable(line.allStationsInLine);
   } else {
     alert(alertMessage);
   }
@@ -86,6 +104,7 @@ export const onPullOutStation = (event) => {
   const alertMessage = getPullOutStationAlertMessage(line);
   if (alertMessage === '') {
     line.pullOutStationFromLineByIndex(targetIndex);
+    showResultTable(line.allStationsInLine);
   } else {
     alert(alertMessage);
   }

From 819d45338cedabac546622b8c308ffc3eeb8bf85 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 21:22:44 +0900
Subject: [PATCH 57/62] trigger 'get all subway lines' & show subway map

---
 src/elements/contentConvertButtons.js |  5 +++++
 src/elements/mapPrint.js              |  5 +++++
 src/elements/printMap.js              |  0
 src/handlers/mapPrint.js              | 11 +++++++++
 src/handlers/printMap.js              |  0
 src/listeners/listeners.js            |  3 +++
 src/templates/list.js                 | 32 +++++++++++++++++++++++++++
 7 files changed, 56 insertions(+)
 create mode 100644 src/elements/mapPrint.js
 delete mode 100644 src/elements/printMap.js
 create mode 100644 src/handlers/mapPrint.js
 delete mode 100644 src/handlers/printMap.js
 create mode 100644 src/templates/list.js

diff --git a/src/elements/contentConvertButtons.js b/src/elements/contentConvertButtons.js
index 6b35772ef..972fa947f 100644
--- a/src/elements/contentConvertButtons.js
+++ b/src/elements/contentConvertButtons.js
@@ -6,7 +6,12 @@ export const sectionManagerButtonElement = document.getElementById(
   'section-manager-button'
 );
 
+export const mapPrintManagerButtonElement = document.getElementById(
+  'map-print-manager-button'
+);
+
 export default {
   lineManagerButtonElement,
   sectionManagerButtonElement,
+  mapPrintManagerButtonElement,
 };
diff --git a/src/elements/mapPrint.js b/src/elements/mapPrint.js
new file mode 100644
index 000000000..4931c5570
--- /dev/null
+++ b/src/elements/mapPrint.js
@@ -0,0 +1,5 @@
+export const mapPrintWrapperElement = document.getElementById('map-print');
+
+export default {
+  mapPrintWrapperElement
+}
\ No newline at end of file
diff --git a/src/elements/printMap.js b/src/elements/printMap.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/handlers/mapPrint.js b/src/handlers/mapPrint.js
new file mode 100644
index 000000000..1a13a6c8f
--- /dev/null
+++ b/src/handlers/mapPrint.js
@@ -0,0 +1,11 @@
+import { mapPrintWrapperElement } from '../elements/mapPrint.js';
+import { getSubwayMapTemplate } from '../templates/list.js';
+import { subwayMap } from '../store/store.js';
+
+export const onPrintMap = () => {
+  mapPrintWrapperElement.innerHTML = getSubwayMapTemplate(subwayMap.allLines);
+};
+
+export default {
+  onPrintMap,
+};
diff --git a/src/handlers/printMap.js b/src/handlers/printMap.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/listeners/listeners.js b/src/listeners/listeners.js
index 33f020e8d..10b1b5ca6 100644
--- a/src/listeners/listeners.js
+++ b/src/listeners/listeners.js
@@ -14,6 +14,7 @@ import {
 import {
   lineManagerButtonElement,
   sectionManagerButtonElement,
+  mapPrintManagerButtonElement,
 } from '../elements/contentConvertButtons.js';
 
 import { onAddStation, onDeleteStation } from '../handlers/stationManager.js';
@@ -28,6 +29,7 @@ import {
   onInsertStation,
   onPullOutStation,
 } from '../handlers/sectionManager.js';
+import { onPrintMap } from '../handlers/mapPrint.js';
 
 const addAllEventListeners = () => {
   stationAddButtonElement.addEventListener('click', onAddStation);
@@ -45,6 +47,7 @@ const addAllEventListeners = () => {
   );
   sectionAddButtonElement.addEventListener('click', onInsertStation);
   registeredStationItemsElement.addEventListener('click', onPullOutStation);
+  mapPrintManagerButtonElement.addEventListener('click', onPrintMap);
 };
 
 export default { addAllEventListeners };
diff --git a/src/templates/list.js b/src/templates/list.js
new file mode 100644
index 000000000..a18db0157
--- /dev/null
+++ b/src/templates/list.js
@@ -0,0 +1,32 @@
+const getSubwayLineTemplate = (lineName, stationNamesInLine) => {
+  let stationItemsTemplate = '';
+  stationNamesInLine.forEach((stationName) => {
+    stationItemsTemplate += `<li>${stationName}</li>`;
+  });
+
+  return `
+    <h2>${lineName}</h2>
+    <ul>
+      ${stationItemsTemplate}
+    </ul>
+  `;
+};
+
+export const getSubwayMapTemplate = (allLines) => {
+  const allLineNames = Object.keys(allLines);
+  let subwayMapTemplate = '';
+  allLineNames.forEach((lineName) => {
+    const { allStationsInLine } = allLines[lineName];
+    subwayMapTemplate += getSubwayLineTemplate(lineName, allStationsInLine);
+  });
+
+  return `
+    <div class="map">
+      ${subwayMapTemplate}
+    </div>
+  `;
+};
+
+export default {
+  getSubwayMapTemplate,
+};

From 055d23d21899e3383c378af5befd81081afdad3a Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 21:27:20 +0900
Subject: [PATCH 58/62] docs: local storage feature added

---
 README.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/README.md b/README.md
index b5038a16f..6cd835035 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,13 @@
 
 <br/>
 
+### 로컬스토리지 동기화
+
+- 닫기, 새로고침 전 로컬스토리지에 인터페이스 정보, 노선도 정보 저장하기 (save interface & subway Map data to local storage before exit or reload)
+- 접속 시 인터페이스 정보, 노선도 정보를 로컬스토리지로부터 받아 동기화 시키기 (synchronize interface & subway Map data from local storage when user access)
+
+<br/>
+
 <img width="500" src="/images/section2.png">
 
 <br/><br/>

From 624772447faac1c832be25e99a14415d5fa8ca9c Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 21:33:50 +0900
Subject: [PATCH 59/62] refactor: divide event listeners for more clarity

---
 src/index.js               | 12 ++++++++++--
 src/listeners/listeners.js | 18 ++++++++++++++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/index.js b/src/index.js
index ee47a3024..5e351f070 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,18 @@
 import { setRouterWithElements } from './routes/routes.js';
 import { contentElements } from './elements/contents.js';
 import { loadDataToLocalStorage, syncDataToAllElements } from './data/data.js';
-import eventListener from './listeners/listeners.js';
+import {
+  addLineMangerEventListeners,
+  addMapPrintEventListeners,
+  addSectionManagerEventListeners,
+  addStationManagerEventListeners,
+} from './listeners/listeners.js';
 
 setRouterWithElements(contentElements, contentElements[0]);
 loadDataToLocalStorage();
 syncDataToAllElements();
 
-eventListener.addAllEventListeners();
+addLineMangerEventListeners();
+addMapPrintEventListeners();
+addSectionManagerEventListeners();
+addStationManagerEventListeners();
diff --git a/src/listeners/listeners.js b/src/listeners/listeners.js
index 10b1b5ca6..255a51687 100644
--- a/src/listeners/listeners.js
+++ b/src/listeners/listeners.js
@@ -31,12 +31,18 @@ import {
 } from '../handlers/sectionManager.js';
 import { onPrintMap } from '../handlers/mapPrint.js';
 
-const addAllEventListeners = () => {
+export const addStationManagerEventListeners = () => {
   stationAddButtonElement.addEventListener('click', onAddStation);
   resultStationItemsElement.addEventListener('click', onDeleteStation);
+};
+
+export const addLineMangerEventListeners = () => {
   lineAddButtonElement.addEventListener('click', onAddLine);
   lineManagerButtonElement.addEventListener('click', onConverToLineContent);
   resultLineItemsElement.addEventListener('click', onDeleteLine);
+};
+
+export const addSectionManagerEventListeners = () => {
   sectionManagerButtonElement.addEventListener(
     'click',
     onConverToSectionContent
@@ -47,7 +53,15 @@ const addAllEventListeners = () => {
   );
   sectionAddButtonElement.addEventListener('click', onInsertStation);
   registeredStationItemsElement.addEventListener('click', onPullOutStation);
+};
+
+export const addMapPrintEventListeners = () => {
   mapPrintManagerButtonElement.addEventListener('click', onPrintMap);
 };
 
-export default { addAllEventListeners };
+export default {
+  addStationManagerEventListeners,
+  addLineMangerEventListeners,
+  addSectionManagerEventListeners,
+  addMapPrintEventListeners,
+};

From 059d5084b7907acb38480be1712d5170fbd9a2f6 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 21:44:22 +0900
Subject: [PATCH 60/62] refactor: move hash routing onload function location

---
 src/handlers/localStorage.js |  1 +
 src/index.js                 |  6 +++++-
 src/listeners/listeners.js   | 17 +++++++++++++++++
 src/routes/routes.js         | 12 ++----------
 4 files changed, 25 insertions(+), 11 deletions(-)
 create mode 100644 src/handlers/localStorage.js

diff --git a/src/handlers/localStorage.js b/src/handlers/localStorage.js
new file mode 100644
index 000000000..b986814d9
--- /dev/null
+++ b/src/handlers/localStorage.js
@@ -0,0 +1 @@
+export const 
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 5e351f070..e4a91c804 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,9 +6,11 @@ import {
   addMapPrintEventListeners,
   addSectionManagerEventListeners,
   addStationManagerEventListeners,
+  addSyncDataBeforeOnloadEventListener,
+  addSyncDataBeforeUnloadEventListener,
 } from './listeners/listeners.js';
 
-setRouterWithElements(contentElements, contentElements[0]);
+setRouterWithElements(contentElements);
 loadDataToLocalStorage();
 syncDataToAllElements();
 
@@ -16,3 +18,5 @@ addLineMangerEventListeners();
 addMapPrintEventListeners();
 addSectionManagerEventListeners();
 addStationManagerEventListeners();
+addSyncDataBeforeOnloadEventListener(contentElements, contentElements[0]);
+addSyncDataBeforeUnloadEventListener();
diff --git a/src/listeners/listeners.js b/src/listeners/listeners.js
index 255a51687..5540ea172 100644
--- a/src/listeners/listeners.js
+++ b/src/listeners/listeners.js
@@ -30,6 +30,7 @@ import {
   onPullOutStation,
 } from '../handlers/sectionManager.js';
 import { onPrintMap } from '../handlers/mapPrint.js';
+import { convertContent } from '../routes/routes.js';
 
 export const addStationManagerEventListeners = () => {
   stationAddButtonElement.addEventListener('click', onAddStation);
@@ -59,6 +60,22 @@ export const addMapPrintEventListeners = () => {
   mapPrintManagerButtonElement.addEventListener('click', onPrintMap);
 };
 
+export const addSyncDataBeforeUnloadEventListener = () => {};
+
+export const addSyncDataBeforeOnloadEventListener = (
+  contentElements,
+  defaultContentElement
+) => {
+  window.onload = () => {
+    const contentName = window.location.hash.substr(1);
+    if (contentName) {
+      convertContent(contentElements, contentName);
+    } else {
+      convertContent(contentElements, defaultContentElement.id);
+    }
+  };
+};
+
 export default {
   addStationManagerEventListeners,
   addLineMangerEventListeners,
diff --git a/src/routes/routes.js b/src/routes/routes.js
index 749947c02..342c31867 100644
--- a/src/routes/routes.js
+++ b/src/routes/routes.js
@@ -1,4 +1,4 @@
-const convertContent = (contentElements, contentName) => {
+export const convertContent = (contentElements, contentName) => {
   contentElements.forEach((element) => {
     if (element.id === contentName) {
       element.setAttribute('style', 'display: block;');
@@ -10,22 +10,14 @@ const convertContent = (contentElements, contentName) => {
 
 export const setRouterWithElements = (
   contentElements,
-  defaultContentElement
 ) => {
   window.onhashchange = () => {
     const contentName = window.location.hash.substr(1);
     convertContent(contentElements, contentName);
   };
-  window.onload = () => {
-    const contentName = window.location.hash.substr(1);
-    if (contentName) {
-      convertContent(contentElements, contentName);
-    } else {
-      convertContent(contentElements, defaultContentElement.id);
-    }
-  };
 };
 
 export default {
   setRouterWithElements,
+  convertContent
 };

From d65674bf879db102f03312213905a82c3d96f3a2 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 21:54:50 +0900
Subject: [PATCH 61/62] refactor: move save & load subway map info function

---
 src/classes/subwayMap.js     | 15 ---------------
 src/handlers/localStorage.js |  1 -
 src/index.js                 |  3 ---
 src/listeners/listeners.js   |  8 +++++++-
 src/store/store.js           | 16 ++++++++++++++++
 5 files changed, 23 insertions(+), 20 deletions(-)
 delete mode 100644 src/handlers/localStorage.js

diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
index 417e9960d..d0e8d2911 100644
--- a/src/classes/subwayMap.js
+++ b/src/classes/subwayMap.js
@@ -1,14 +1,7 @@
-import { SUBWAY_MAP_ITEM_NAME } from '../constants/configuration.js';
-import { setItemWithKey, getItemByKey } from '../utils/localStorage.js';
-
 export default class SubwayMap {
   #allStations = {};
   #allLines = {};
 
-  static loadMapFromLocalStorage() {
-    return getItemByKey(SUBWAY_MAP_ITEM_NAME);
-  }
-
   get allStations() {
     return this.#allStations;
   }
@@ -48,12 +41,4 @@ export default class SubwayMap {
       delete this.#allLines[lineName];
     }
   }
-
-  saveMapToLocalStorage() {
-    const subwayMapItem = {
-      stations: this.#allStations,
-      lines: this.#allLines,
-    };
-    setItemWithKey(subwayMapItem, SUBWAY_MAP_ITEM_NAME);
-  }
 }
diff --git a/src/handlers/localStorage.js b/src/handlers/localStorage.js
deleted file mode 100644
index b986814d9..000000000
--- a/src/handlers/localStorage.js
+++ /dev/null
@@ -1 +0,0 @@
-export const 
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e4a91c804..5e62e7185 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 import { setRouterWithElements } from './routes/routes.js';
 import { contentElements } from './elements/contents.js';
-import { loadDataToLocalStorage, syncDataToAllElements } from './data/data.js';
 import {
   addLineMangerEventListeners,
   addMapPrintEventListeners,
@@ -11,8 +10,6 @@ import {
 } from './listeners/listeners.js';
 
 setRouterWithElements(contentElements);
-loadDataToLocalStorage();
-syncDataToAllElements();
 
 addLineMangerEventListeners();
 addMapPrintEventListeners();
diff --git a/src/listeners/listeners.js b/src/listeners/listeners.js
index 5540ea172..13bfcb912 100644
--- a/src/listeners/listeners.js
+++ b/src/listeners/listeners.js
@@ -31,6 +31,7 @@ import {
 } from '../handlers/sectionManager.js';
 import { onPrintMap } from '../handlers/mapPrint.js';
 import { convertContent } from '../routes/routes.js';
+import { loadDataToLocalStorage, syncDataToAllElements } from '../data/data.js';
 
 export const addStationManagerEventListeners = () => {
   stationAddButtonElement.addEventListener('click', onAddStation);
@@ -60,7 +61,10 @@ export const addMapPrintEventListeners = () => {
   mapPrintManagerButtonElement.addEventListener('click', onPrintMap);
 };
 
-export const addSyncDataBeforeUnloadEventListener = () => {};
+export const addSyncDataBeforeUnloadEventListener = () => {
+  syncDataToAllElements();
+
+};
 
 export const addSyncDataBeforeOnloadEventListener = (
   contentElements,
@@ -74,6 +78,8 @@ export const addSyncDataBeforeOnloadEventListener = (
       convertContent(contentElements, defaultContentElement.id);
     }
   };
+  loadDataToLocalStorage();
+  syncDataToAllElements();
 };
 
 export default {
diff --git a/src/store/store.js b/src/store/store.js
index 1f40430b5..4b21b7e14 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,7 +1,23 @@
 import StationMap from '../classes/subwayMap.js';
+import { getItemByKey, setItemWithKey } from '../utils/localStorage.js';
+import { SUBWAY_MAP_ITEM_NAME } from '../constants/configuration.js';
 
 export const subwayMap = new StationMap();
 
+export const syncSubwayMapToLocalStorage = () => {
+  const subwayMapItem = {
+    stations: subwayMap.allStations,
+    lines: subwayMap.allLines,
+  };
+  setItemWithKey(subwayMapItem, SUBWAY_MAP_ITEM_NAME);
+};
+
+export const syncSubwayMapFromLocalStorage = () => {
+  const subwayMapItem = getItemByKey(SUBWAY_MAP_ITEM_NAME);
+};
+
 export default {
   subwayMap,
+  syncSubwayMapToLocalStorage,
+  syncSubwayMapFromLocalStorage,
 };

From 1a08d30440162782a081d94252c20ca17acafee1 Mon Sep 17 00:00:00 2001
From: swon3210 <swon3210@gmail.com>
Date: Tue, 15 Dec 2020 23:47:44 +0900
Subject: [PATCH 62/62] save & sync interface and subway Map data with local
 storage data

---
 index.html                     | 21 +++--------------
 src/classes/subwayLine.js      | 27 +++++++++-------------
 src/classes/subwayStation.js   |  9 ++++++++
 src/data/data.js               | 11 ++++++---
 src/handlers/lineManager.js    | 17 ++++++++++----
 src/handlers/mapPrint.js       |  4 ++--
 src/handlers/sectionManager.js | 42 +++++++++++++++++++++-------------
 src/handlers/stationManager.js |  7 +++---
 src/listeners/listeners.js     | 38 +++++++++++++++++++++++-------
 src/store/store.js             | 39 +++++++++++++++++++++++++++++--
 10 files changed, 143 insertions(+), 72 deletions(-)

diff --git a/index.html b/index.html
index 0fbff7b84..24eb6c15b 100644
--- a/index.html
+++ b/index.html
@@ -55,12 +55,7 @@ <h2><span>&#128649</span>지하철 노선 목록</h2>
             <th>설정</th>
           </thead>
           <tbody id="result-line-items">
-            <tr>
-              <td>1호선</td>
-              <td>인천</td>
-              <td>소요산</td>
-              <td><button class="line-delete-button">삭제</button></td>
-            </tr>
+
           </tbody>
         </table>
       </div>
@@ -83,22 +78,12 @@ <h3>구간 등록</h3>
           <th>설정</th>
         </thead>
         <tbody id="registered-station-items">
-          <tr>
-            <td>0</td>
-            <td>인천</td>
-            <td><button class="section-delete-button">노선에서 제거</button></td>
-          </tr>
+          
         </tbody>
       </table>
     </div>
     <div id="map-print" class="content">
-      <div class="map">
-        <h2>1호선</h2>
-        <ul>
-          <li>인천</li>
-          <li>소요산</li>
-        </ul>
-      </div>
+      
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
index 4322dec8f..ba031aedb 100644
--- a/src/classes/subwayLine.js
+++ b/src/classes/subwayLine.js
@@ -1,49 +1,44 @@
 import { SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT } from '../constants/configuration.js';
 
 export default class SubwayLine {
-  #allStationsInLine = [];
+  allStationsInLine = [];
 
   static checkIsStationsSame(startStationName, endStationName) {
     return startStationName === endStationName;
   }
 
   static checkIsIndexNumberCorrect(index) {
-    console.log(typeof index, Number.isNaN(index));
     return typeof index === 'number' && Number.isNaN(index) === false;
   }
 
-  constructor({ startStationName, endStationName }) {
-    this.#allStationsInLine.push(startStationName);
-    this.#allStationsInLine.push(endStationName);
-  }
-
-  get allStationsInLine() {
-    return this.#allStationsInLine;
+  constructor(startStationName, endStationName) {
+    this.allStationsInLine.push(startStationName);
+    this.allStationsInLine.push(endStationName);
   }
 
   addStationToLineByName(stationName) {
-    if (stationName in this.#allStationsInLine === false) {
-      this.#allStationsInLine.push(stationName);
+    if (stationName in this.allStationsInLine === false) {
+      this.allStationsInLine.push(stationName);
     }
   }
 
   insertStationToLineByNameAndIndex({ stationName, index }) {
-    if (stationName in this.#allStationsInLine === false) {
-      this.#allStationsInLine.splice(index, 0, stationName);
+    if (stationName in this.allStationsInLine === false) {
+      this.allStationsInLine.splice(index, 0, stationName);
     }
   }
 
   pullOutStationFromLineByIndex(stationIndex) {
-    this.#allStationsInLine.splice(stationIndex, 1);
+    return this.allStationsInLine.splice(stationIndex, 1);
   }
 
   checkIsStationNameExistInLine(stationName) {
-    return this.#allStationsInLine.includes(stationName);
+    return this.allStationsInLine.includes(stationName);
   }
 
   checkIsAllStationsInLineLengthSameAsLimit() {
     return (
-      this.#allStationsInLine.length <=
+      this.allStationsInLine.length <=
       SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT
     );
   }
diff --git a/src/classes/subwayStation.js b/src/classes/subwayStation.js
index c65b084f7..43399e306 100644
--- a/src/classes/subwayStation.js
+++ b/src/classes/subwayStation.js
@@ -12,4 +12,13 @@ export default class SubwayStation {
   constructor() {
     this.belongingLineNames = [];
   }
+
+  addBeloningLineByLineName(lineName) {
+    this.belongingLineNames.push(lineName);
+  }
+
+  deleteBeloningLineByLineName(lineName) {
+    const deleteLineIndex = this.belongingLineNames.indexOf(lineName);
+    this.belongingLineNames.splice(deleteLineIndex, 1);
+  }
 }
diff --git a/src/data/data.js b/src/data/data.js
index 668b91e28..dfaef22d0 100644
--- a/src/data/data.js
+++ b/src/data/data.js
@@ -12,7 +12,7 @@ import {
 } from '../elements/sectionManager.js';
 import { INTERFACE_DATA_ITEM_NAME } from '../constants/configuration.js';
 
-export const data = {
+const data = {
   stationNameInputValue: '',
   lineNameInputValue: '',
   lineStartStationSelectorValue: '',
@@ -22,7 +22,7 @@ export const data = {
   sectionOrderInputNumberValue: '',
 };
 
-export const saveDataToLocalStorage = () => {
+export const syncDataToLocalStorage = () => {
   setItemWithKey(data, INTERFACE_DATA_ITEM_NAME);
 };
 
@@ -61,4 +61,9 @@ export const syncDataToAllElements = () => {
   sectionStationSelectorElement.value = data.sectionStationSelectorValue;
 };
 
-export default {};
+export default {
+  syncDataToLocalStorage,
+  loadDataToLocalStorage,
+  syncDataFromAllElements,
+  syncDataToAllElements,
+};
diff --git a/src/handlers/lineManager.js b/src/handlers/lineManager.js
index 26e540510..ca76a9466 100644
--- a/src/handlers/lineManager.js
+++ b/src/handlers/lineManager.js
@@ -29,7 +29,7 @@ const getAddLineAlertMessage = ({
   return alertMessage;
 };
 
-const showResultTable = () => {
+export const showLineManagerResultTable = () => {
   const lineTableRows = [];
   const allLineNames = Object.keys(subwayMap.allLines);
   allLineNames.forEach((lineName) => {
@@ -37,6 +37,7 @@ const showResultTable = () => {
     const lineStartStation = line.allStationsInLine[0];
     const lineEndStationIndex = line.allStationsInLine.length - 1;
     const lineEndStation = line.allStationsInLine[lineEndStationIndex];
+    console.log(lineStartStation, lineEndStation);
     const lineTableRow = [lineName, lineStartStation, lineEndStation];
     lineTableRows.push(lineTableRow);
   });
@@ -63,7 +64,9 @@ export const onAddLine = () => {
   const lineName = lineNameInputElement.value;
   const startStationName = lineStartStationSelectorElement.value;
   const endStationName = lineEndStationSelectorElement.value;
-  const line = new SubwayLine({ startStationName, endStationName });
+  subwayMap.allStations[startStationName].addBeloningLineByLineName(lineName);
+  subwayMap.allStations[endStationName].addBeloningLineByLineName(lineName);
+  const line = new SubwayLine(startStationName, endStationName);
   const alertMessage = getAddLineAlertMessage({
     lineName,
     startStationName,
@@ -71,7 +74,7 @@ export const onAddLine = () => {
   });
   if (alertMessage === '') {
     subwayMap.addLine(line, lineName);
-    showResultTable();
+    showLineManagerResultTable();
   } else {
     alert(alertMessage);
   }
@@ -83,12 +86,18 @@ export const onDeleteLine = (event) => {
     return;
   }
   const deleteTargetName = targetElement.dataset.deleteTarget;
+  const targetLine = subwayMap.allLines[deleteTargetName];
+  targetLine.allStationsInLine.forEach((stationName) => {
+    const station = subwayMap.allStations[stationName];
+    station.deleteBeloningLineByLineName(deleteTargetName);
+  });
   subwayMap.deleteLineByName(deleteTargetName);
-  showResultTable();
+  showLineManagerResultTable();
 };
 
 export default {
   onAddLine,
   onConverToLineContent,
   onDeleteLine,
+  showLineManagerResultTable,
 };
diff --git a/src/handlers/mapPrint.js b/src/handlers/mapPrint.js
index 1a13a6c8f..6a9583516 100644
--- a/src/handlers/mapPrint.js
+++ b/src/handlers/mapPrint.js
@@ -2,10 +2,10 @@ import { mapPrintWrapperElement } from '../elements/mapPrint.js';
 import { getSubwayMapTemplate } from '../templates/list.js';
 import { subwayMap } from '../store/store.js';
 
-export const onPrintMap = () => {
+export const printMap = () => {
   mapPrintWrapperElement.innerHTML = getSubwayMapTemplate(subwayMap.allLines);
 };
 
 export default {
-  onPrintMap,
+  printMap,
 };
diff --git a/src/handlers/sectionManager.js b/src/handlers/sectionManager.js
index b619a70f8..2fae8fce9 100644
--- a/src/handlers/sectionManager.js
+++ b/src/handlers/sectionManager.js
@@ -39,28 +39,31 @@ const getPullOutStationAlertMessage = (line) => {
   return alertMessage;
 };
 
-const showResultTable = (allStationsInLine) => {
-  const stationInLineRows = [];
-  allStationsInLine.forEach((stationName, index) => {
-    stationInLineRows.push([index, stationName]);
-  });
-  registeredStationItemsElement.innerHTML = getTableRowsTemplate({
-    rows: stationInLineRows,
-    deleteTargetCellIndex: 0,
-    deleteButtonClass: 'section-delete-button',
-    deleteButtonText: '노선에서 제거',
-  });
+export const showSectionManagerResultTable = () => {
+  const lineName = sectionLineNameElement.innerText;
+  const line = subwayMap.allLines[lineName];
+  if (line) {
+    const stationInLineRows = [];
+    line.allStationsInLine.forEach((stationName, index) => {
+      stationInLineRows.push([index, stationName]);
+    });
+    registeredStationItemsElement.innerHTML = getTableRowsTemplate({
+      rows: stationInLineRows,
+      deleteTargetCellIndex: 0,
+      deleteButtonClass: 'section-delete-button',
+      deleteButtonText: '노선에서 제거',
+    });
+  }
 };
 
 export const onClickSectionLineButton = (event) => {
   const targetElement = event.target;
   if (targetElement.className === 'section-line-menu-button') {
     const lineName = targetElement.innerText;
-    const line = subwayMap.allLines[lineName];
     sectionLineNameElement.innerText = lineName;
     stationRegisterWrapperElement.setAttribute('style', 'display: block;');
     registeredStationItemTableElement.setAttribute('style', 'display: block;');
-    showResultTable(line.allStationsInLine);
+    showSectionManagerResultTable();
   }
 };
 
@@ -86,8 +89,10 @@ export const onInsertStation = () => {
     index,
   });
   if (alertMessage === '') {
+    const insertingStation = subwayMap.allStations[stationName];
+    insertingStation.addBeloningLineByLineName(lineName);
     line.insertStationToLineByNameAndIndex({ stationName, index });
-    showResultTable(line.allStationsInLine);
+    showSectionManagerResultTable(line.allStationsInLine);
   } else {
     alert(alertMessage);
   }
@@ -103,8 +108,12 @@ export const onPullOutStation = (event) => {
   const line = subwayMap.allLines[lineName];
   const alertMessage = getPullOutStationAlertMessage(line);
   if (alertMessage === '') {
-    line.pullOutStationFromLineByIndex(targetIndex);
-    showResultTable(line.allStationsInLine);
+    const pulledOutStationName = line.pullOutStationFromLineByIndex(
+      targetIndex
+    );
+    const pulledOutStation = subwayMap.allStations[pulledOutStationName];
+    pulledOutStation.deleteBeloningLineByLineName(lineName);
+    showSectionManagerResultTable(line.allStationsInLine);
   } else {
     alert(alertMessage);
   }
@@ -114,4 +123,5 @@ export default {
   onInsertStation,
   onConverToSectionContent,
   onClickSectionLineButton,
+  showSectionManagerResultTable,
 };
diff --git a/src/handlers/stationManager.js b/src/handlers/stationManager.js
index eadb7d603..5878475e7 100644
--- a/src/handlers/stationManager.js
+++ b/src/handlers/stationManager.js
@@ -33,7 +33,7 @@ const getDeleteStationAlertMessage = (stationName) => {
   return alertMessage;
 };
 
-const showResultTable = () => {
+export const showStationManagerResultTable = () => {
   const registerdStationNames = Object.keys(subwayMap.allStations);
   const resultRows = registerdStationNames.map((stationName) => [stationName]);
   const deleteTargetCellIndex = 0;
@@ -51,7 +51,7 @@ export const onAddStation = () => {
   if (alertMessage === '') {
     const station = new SubwayStation();
     subwayMap.addStation(station, stationName);
-    showResultTable();
+    showStationManagerResultTable();
     stationNameInputElement.value = '';
   } else {
     alert(alertMessage);
@@ -67,7 +67,7 @@ export const onDeleteStation = (event) => {
   const alertMessage = getDeleteStationAlertMessage(deleteTargetName);
   if (alertMessage === '') {
     subwayMap.deleteStationByName(deleteTargetName);
-    showResultTable();
+    showStationManagerResultTable();
   } else {
     alert(alertMessage);
   }
@@ -75,4 +75,5 @@ export const onDeleteStation = (event) => {
 
 export default {
   onAddStation,
+  showStationManagerResultTable
 };
diff --git a/src/listeners/listeners.js b/src/listeners/listeners.js
index 13bfcb912..c1e3f2d51 100644
--- a/src/listeners/listeners.js
+++ b/src/listeners/listeners.js
@@ -17,21 +17,36 @@ import {
   mapPrintManagerButtonElement,
 } from '../elements/contentConvertButtons.js';
 
-import { onAddStation, onDeleteStation } from '../handlers/stationManager.js';
+import {
+  onAddStation,
+  onDeleteStation,
+  showStationManagerResultTable,
+} from '../handlers/stationManager.js';
 import {
   onAddLine,
   onConverToLineContent,
   onDeleteLine,
+  showLineManagerResultTable,
 } from '../handlers/lineManager.js';
 import {
   onConverToSectionContent,
   onClickSectionLineButton,
   onInsertStation,
   onPullOutStation,
+  showSectionManagerResultTable,
 } from '../handlers/sectionManager.js';
-import { onPrintMap } from '../handlers/mapPrint.js';
+import { printMap } from '../handlers/mapPrint.js';
 import { convertContent } from '../routes/routes.js';
-import { loadDataToLocalStorage, syncDataToAllElements } from '../data/data.js';
+import {
+  loadDataToLocalStorage,
+  syncDataToAllElements,
+  syncDataToLocalStorage,
+  syncDataFromAllElements,
+} from '../data/data.js';
+import {
+  syncSubwayMapFromLocalStorage,
+  syncSubwayMapToLocalStorage,
+} from '../store/store.js';
 
 export const addStationManagerEventListeners = () => {
   stationAddButtonElement.addEventListener('click', onAddStation);
@@ -58,12 +73,15 @@ export const addSectionManagerEventListeners = () => {
 };
 
 export const addMapPrintEventListeners = () => {
-  mapPrintManagerButtonElement.addEventListener('click', onPrintMap);
+  mapPrintManagerButtonElement.addEventListener('click', printMap);
 };
 
 export const addSyncDataBeforeUnloadEventListener = () => {
-  syncDataToAllElements();
-
+  window.onbeforeunload = () => {
+    syncDataFromAllElements();
+    syncDataToLocalStorage();
+    syncSubwayMapToLocalStorage();
+  };
 };
 
 export const addSyncDataBeforeOnloadEventListener = (
@@ -77,9 +95,13 @@ export const addSyncDataBeforeOnloadEventListener = (
     } else {
       convertContent(contentElements, defaultContentElement.id);
     }
+    loadDataToLocalStorage();
+    syncDataToAllElements();
+    syncSubwayMapFromLocalStorage();
+    showStationManagerResultTable();
+    showLineManagerResultTable();
+    showSectionManagerResultTable();
   };
-  loadDataToLocalStorage();
-  syncDataToAllElements();
 };
 
 export default {
diff --git a/src/store/store.js b/src/store/store.js
index 4b21b7e14..37271c88e 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,19 +1,54 @@
 import StationMap from '../classes/subwayMap.js';
 import { getItemByKey, setItemWithKey } from '../utils/localStorage.js';
 import { SUBWAY_MAP_ITEM_NAME } from '../constants/configuration.js';
+import SubwayStation from '../classes/subwayStation.js';
+import SubwayLine from '../classes/subwayLine.js';
 
 export const subwayMap = new StationMap();
 
 export const syncSubwayMapToLocalStorage = () => {
   const subwayMapItem = {
-    stations: subwayMap.allStations,
-    lines: subwayMap.allLines,
+    allStations: subwayMap.allStations,
+    allLines: subwayMap.allLines,
   };
   setItemWithKey(subwayMapItem, SUBWAY_MAP_ITEM_NAME);
 };
 
+const copyAllStations = (allStations) => {
+  Object.keys(allStations).forEach((stationName) => {
+    const loadedStation = allStations[stationName];
+    const station = new SubwayStation();
+    loadedStation.belongingLineNames.forEach((belongingLineName) => {
+      station.addBeloningLineByLineName(belongingLineName);
+    });
+    subwayMap.addStation(station, stationName);
+  });
+};
+
+const copyAllLines = (allLines) => {
+  Object.keys(allLines).forEach((lineName) => {
+    const loadedLine = allLines[lineName];
+    const loadedLineEndIndex = loadedLine.allStationsInLine.length - 1;
+    const line = new SubwayLine(
+      loadedLine.allStationsInLine[0],
+      loadedLine.allStationsInLine[loadedLineEndIndex]
+    );
+    for (let i = loadedLine.length - 2; i > 0; i -= 1) {
+      line.insertStationToLineByNameAndIndex(
+        loadedLine.allStationsInLine[i],
+        1
+      );
+    }
+    subwayMap.addLine(line, lineName);
+  });
+};
+
 export const syncSubwayMapFromLocalStorage = () => {
   const subwayMapItem = getItemByKey(SUBWAY_MAP_ITEM_NAME);
+  const { allStations, allLines } = subwayMapItem;
+  copyAllStations(allStations);
+  copyAllLines(allLines);
+  console.log(subwayMap);
 };
 
 export default {