From 894acc7e8ebb60038eb1a8cd7d7a3891d0e2ca23 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Fri, 11 Dec 2020 00:13:51 +0900
Subject: [PATCH 01/41] Start mission

---
 MISSION.md | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 README.md  | 112 +---------------------------------------------------
 2 files changed, 116 insertions(+), 110 deletions(-)
 create mode 100644 MISSION.md

diff --git a/MISSION.md b/MISSION.md
new file mode 100644
index 000000000..e97a1d649
--- /dev/null
+++ b/MISSION.md
@@ -0,0 +1,114 @@
+# 🚇 지하철 노선도 미션
+
+## 🚀 기능 요구사항
+
+### 지하철 역 관련 기능
+- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
+- 중복된 지하철 역 이름이 등록될 수 없다.
+- 지하철 역은 2글자 이상이어야 한다.
+- 지하철 역의 목록을 조회할 수 있다.
+
+### 지하철 노선 관련 기능
+- 지하철 노선을 등록하고 삭제할 수 있다.
+- 중복된 지하철 노선 이름이 등록될 수 없다.
+- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
+- 지하철 노선의 목록을 조회할 수 있다.
+
+### 지하철 구간 추가 기능
+- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
+- 하나의 역은 여러개의 노선에 추가될 수 있다.
+- 역과 역 사이에 새로운 역이 추가 될 수 있다.
+- 노선에서 갈래길은 생길 수 없다.
+
+<img width="500" src="/images/section1.png">
+
+### 지하철 구간 삭제 기능
+- 노선에 등록된 역을 제거할 수 있다.
+- 종점을 제거할 경우 다음 역이 종점이 된다.
+- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
+
+<img width="500" src="/images/section2.png">
+
+### 지하철 노선에 등록된 역 조회 기능
+- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
+
+<br/>
+
+## 💻 프로그램 실행 결과
+
+### 역관리
+<img width="100%" src="/images/station_manager.gif">
+
+### 노선관리
+<img width="100%" src="/images/line_manager.gif">
+
+### 구간관리
+<img width="100%" src="/images/section_manager.gif">
+
+### 노선도 출력
+<img width="100%" src="/images/map_print_manager.gif">
+
+
+## ✅ 프로그래밍 요구사항
+
+### 메뉴 버튼
+- 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
+- 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
+- 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
+- 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
+
+### 지하철 역 관련 기능
+- 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
+- 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
+- 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
+
+### 지하철 노선 관련 기능
+- 지하철 노선의 이름을 입력하는 input 태그는 `#line-name-input` id값을 가진다.
+- 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
+- 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
+- 지하철 노선을 추가하는 button 태그는 `#line-add-button` id값을 가진다.
+- 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
+
+### 지하철 구간 추가 기능
+- 지하철 노선을 선택하는 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/>
+
+## 📝 미션 저장소 및 진행 요구사항
+
+- 미션은 [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) 문서 절차를 따라 미션을 제출한다.
diff --git a/README.md b/README.md
index e97a1d649..20371375d 100644
--- a/README.md
+++ b/README.md
@@ -1,114 +1,6 @@
 # 🚇 지하철 노선도 미션
 
-## 🚀 기능 요구사항
+[우아한 테크 코스 - 3기] 프리코스 3주차 미션을 진행한 저장소입니다. 
 
-### 지하철 역 관련 기능
-- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
-- 중복된 지하철 역 이름이 등록될 수 없다.
-- 지하철 역은 2글자 이상이어야 한다.
-- 지하철 역의 목록을 조회할 수 있다.
+[미션내용 확인하기](./MISSION.md)
 
-### 지하철 노선 관련 기능
-- 지하철 노선을 등록하고 삭제할 수 있다.
-- 중복된 지하철 노선 이름이 등록될 수 없다.
-- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
-- 지하철 노선의 목록을 조회할 수 있다.
-
-### 지하철 구간 추가 기능
-- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
-- 하나의 역은 여러개의 노선에 추가될 수 있다.
-- 역과 역 사이에 새로운 역이 추가 될 수 있다.
-- 노선에서 갈래길은 생길 수 없다.
-
-<img width="500" src="/images/section1.png">
-
-### 지하철 구간 삭제 기능
-- 노선에 등록된 역을 제거할 수 있다.
-- 종점을 제거할 경우 다음 역이 종점이 된다.
-- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
-
-<img width="500" src="/images/section2.png">
-
-### 지하철 노선에 등록된 역 조회 기능
-- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
-
-<br/>
-
-## 💻 프로그램 실행 결과
-
-### 역관리
-<img width="100%" src="/images/station_manager.gif">
-
-### 노선관리
-<img width="100%" src="/images/line_manager.gif">
-
-### 구간관리
-<img width="100%" src="/images/section_manager.gif">
-
-### 노선도 출력
-<img width="100%" src="/images/map_print_manager.gif">
-
-
-## ✅ 프로그래밍 요구사항
-
-### 메뉴 버튼
-- 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
-- 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
-- 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
-- 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
-
-### 지하철 역 관련 기능
-- 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
-- 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
-- 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
-
-### 지하철 노선 관련 기능
-- 지하철 노선의 이름을 입력하는 input 태그는 `#line-name-input` id값을 가진다.
-- 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
-- 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
-- 지하철 노선을 추가하는 button 태그는 `#line-add-button` id값을 가진다.
-- 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
-
-### 지하철 구간 추가 기능
-- 지하철 노선을 선택하는 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/>
-
-## 📝 미션 저장소 및 진행 요구사항
-
-- 미션은 [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) 문서 절차를 따라 미션을 제출한다.

From c55231c7a0c0a1ac3a56bbb3956bb684aadb7151 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 01:20:56 +0900
Subject: [PATCH 02/41] Docs: add feature list to README.md

---
 README.md | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 20371375d..c367a2e61 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,39 @@
 # 🚇 지하철 노선도 미션
 
-[우아한 테크 코스 - 3기] 프리코스 3주차 미션을 진행한 저장소입니다. 
+[우아한 테크 코스 - 3기] 프리코스 3주차 미션을 진행한 저장소입니다.
 
 [미션내용 확인하기](./MISSION.md)
 
+## 🚀 구현 기능
+
+1. 역 관리
+
+- 저장된 모든 지하철 역 이름을 조회한다.
+- 입력받은 역 이름이 2글자 이상인지 검사한다.
+- 입력받은 역 이름이 기존에 존재하지 않는지 검사한다.
+- 입력받은 역 이름으로 새로운 지하철 역을 등록한다.
+- 선택된 지하철 역이 노선에 등록되어있는지 검사한다.
+- 지하철 역을 삭제한다.
+
+2. 노선 관리
+
+- 저장된 모든 지하철 노선을 조회한다.
+- 입력받은 노선 이름이 1글자 이상인지 검사한다.
+- 입력받은 노선 이름이 기존에 존재하지 않는지 검사한다.
+- 입력받은 상행 종점역과 하행 종점역이 동일하지 않은지 검사한다.
+- 새로운 지하철 노선을 등록한다.
+- 사용자 확인 후 지하철 노선을 삭제한다.
+
+3. 구간 관리
+
+- 선택된 노선에 등록된 지하철 역을 조회한다.
+- 입력받은 구간 순서가 숫자인지 검사한다.
+- 입력받은 구간 순서가 자연수인지 검사한다.
+- 입력받은 구간 순서 숫자가 기존에 등록된 지하철 수를 초과하지 않는지 검사한다.
+- 노선에 새로운 구간을 등록한다.
+- 노선에 등록된 역이 2개 이하인지 검사한다.
+- 선택된 지하철 역을 노선에서 삭제한다.
+
+4. 지하철 노선도 출력
+
+- 저장되어있는 지하철 노선도를 호선별로 화면에 출력한다

From 52a290860406d2be3de542f3d75f4bab6d26a618 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 01:24:14 +0900
Subject: [PATCH 03/41] Docs: update README.md

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

diff --git a/README.md b/README.md
index c367a2e61..afaf5e4a6 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 
 ## 🚀 구현 기능
 
-1. 역 관리
+### 역 관리
 
 - 저장된 모든 지하철 역 이름을 조회한다.
 - 입력받은 역 이름이 2글자 이상인지 검사한다.
@@ -15,7 +15,7 @@
 - 선택된 지하철 역이 노선에 등록되어있는지 검사한다.
 - 지하철 역을 삭제한다.
 
-2. 노선 관리
+### 노선 관리
 
 - 저장된 모든 지하철 노선을 조회한다.
 - 입력받은 노선 이름이 1글자 이상인지 검사한다.
@@ -24,7 +24,7 @@
 - 새로운 지하철 노선을 등록한다.
 - 사용자 확인 후 지하철 노선을 삭제한다.
 
-3. 구간 관리
+### 구간 관리
 
 - 선택된 노선에 등록된 지하철 역을 조회한다.
 - 입력받은 구간 순서가 숫자인지 검사한다.
@@ -34,6 +34,6 @@
 - 노선에 등록된 역이 2개 이하인지 검사한다.
 - 선택된 지하철 역을 노선에서 삭제한다.
 
-4. 지하철 노선도 출력
+### 지하철 노선도 출력
 
 - 저장되어있는 지하철 노선도를 호선별로 화면에 출력한다

From b739a24bfe9a6d51620247e49f98d9ebb27f1b34 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 09:10:48 +0900
Subject: [PATCH 04/41] Add: App component

---
 index.html            | 1 +
 src/components/App.js | 5 +++++
 src/index.js          | 3 +++
 3 files changed, 9 insertions(+)
 create mode 100644 src/components/App.js

diff --git a/index.html b/index.html
index fc99deac2..9aa05c41d 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
     <div id="app">
       <h1>🚇 지하철 노선도 관리 </h1>
     </div>
+    
     <script type="module" src="src/index.js"></script>
   </body>
 </html>
diff --git a/src/components/App.js b/src/components/App.js
new file mode 100644
index 000000000..792e3da10
--- /dev/null
+++ b/src/components/App.js
@@ -0,0 +1,5 @@
+const App = ($app) => {
+  this.$app = $app;
+};
+
+export default App;
diff --git a/src/index.js b/src/index.js
index e69de29bb..a8a730c71 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,3 @@
+import App from "./components/App.js";
+
+new App(document.querySelector("#app"));

From 3429e7025fdd40123332fad420f7c9fd173c2831 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 09:18:09 +0900
Subject: [PATCH 05/41] Add: Header component

---
 index.html               |  6 ++----
 src/components/App.js    |  8 +++++---
 src/components/Header.js | 15 +++++++++++++++
 3 files changed, 22 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Header.js

diff --git a/index.html b/index.html
index 9aa05c41d..a68ccf6f9 100644
--- a/index.html
+++ b/index.html
@@ -5,10 +5,8 @@
     <title>지하철 노선도 관리</title>
   </head>
   <body>
-    <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
-    </div>
-    
+    <div id="app"></div>
+
     <script type="module" src="src/index.js"></script>
   </body>
 </html>
diff --git a/src/components/App.js b/src/components/App.js
index 792e3da10..1cbf72338 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,5 +1,7 @@
-const App = ($app) => {
+import Header from "./Header.js";
+
+export default function App($app) {
   this.$app = $app;
-};
 
-export default App;
+  this.Header = new Header({ $target: $app });
+}
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 000000000..bcb12f86f
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,15 @@
+export default function Header({ $target }) {
+  this.$target = $target;
+
+  this.render = () => {
+    const HTMLString = `
+      <header>
+        <h1>🚇 지하철 노선도 관리 </h1>
+      </header>
+    `;
+
+    this.$target.insertAdjacentHTML("afterbegin", HTMLString);
+  };
+
+  this.render();
+}

From aca737eeec087bccc37e94ec8878dcd8c1a8878c Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 09:34:58 +0900
Subject: [PATCH 06/41] Add: Navigator component

---
 index.html                  |  1 +
 src/components/App.js       |  4 +++-
 src/components/Navigator.js | 20 ++++++++++++++++++++
 src/util/constants.js       |  1 +
 style.css                   | 10 ++++++++++
 5 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Navigator.js
 create mode 100644 src/util/constants.js
 create mode 100644 style.css

diff --git a/index.html b/index.html
index a68ccf6f9..6f3862daa 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>지하철 노선도 관리</title>
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/components/App.js b/src/components/App.js
index 1cbf72338..6323acf6c 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,7 +1,9 @@
 import Header from "./Header.js";
+import Navigator from "./Navigator.js";
 
 export default function App($app) {
   this.$app = $app;
 
-  this.Header = new Header({ $target: $app });
+  this.header = new Header({ $target: $app });
+  this.navigator = new Navigator({ $target: $app });
 }
diff --git a/src/components/Navigator.js b/src/components/Navigator.js
new file mode 100644
index 000000000..2166728bf
--- /dev/null
+++ b/src/components/Navigator.js
@@ -0,0 +1,20 @@
+import { NAV_TEXTS } from "../util/constants.js";
+
+export default function Navigator({ $target }) {
+  this.$target = $target;
+  this.NAV_TEXTS = NAV_TEXTS;
+
+  this.render = () => {
+    const HTMLString = `
+      <nav>
+        <ol>
+          ${NAV_TEXTS.map((text, index) => `<li><button>${index + 1}. ${text}</button></li>`).join("")}
+        </ol>
+      </nav>
+    `;
+
+    this.$target.insertAdjacentHTML("beforeend", HTMLString);
+  };
+
+  this.render();
+}
diff --git a/src/util/constants.js b/src/util/constants.js
new file mode 100644
index 000000000..728256bb7
--- /dev/null
+++ b/src/util/constants.js
@@ -0,0 +1 @@
+export const NAV_TEXTS = ["역 관리", "노선 관리", "구간 관리", "지하철 노선도 출력"];
diff --git a/style.css b/style.css
new file mode 100644
index 000000000..f0ce57cf4
--- /dev/null
+++ b/style.css
@@ -0,0 +1,10 @@
+ul,
+ol {
+  padding: 0;
+}
+
+nav li {
+  list-style: none;
+  display: inline;
+  margin-right: 10px;
+}

From 293620682e5f996cecbf561445acb6dd6de9cacf Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 09:39:08 +0900
Subject: [PATCH 07/41] Docs: add reference site

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

diff --git a/README.md b/README.md
index afaf5e4a6..30d162023 100644
--- a/README.md
+++ b/README.md
@@ -37,3 +37,7 @@
 ### 지하철 노선도 출력
 
 - 저장되어있는 지하철 노선도를 호선별로 화면에 출력한다
+
+## 📝 참고 사이트
+
+- [[HTML 바로 알기] Semantic Web을 위한 Semantic Elements - bono](https://blueshw.github.io/2020/05/09/know-html-semantic-elements/)

From a2f9950ff35aa71afb51113fcbffe09c852497c0 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 10:32:32 +0900
Subject: [PATCH 08/41] Add: StationManagement and StationNameInput component

---
 src/components/App.js               | 13 +++++++++++--
 src/components/StationManagement.js | 11 +++++++++++
 src/components/StationNameInput.js  | 20 ++++++++++++++++++++
 src/util/constants.js               | 11 +++++++++++
 style.css                           |  8 ++++++++
 5 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 src/components/StationManagement.js
 create mode 100644 src/components/StationNameInput.js

diff --git a/src/components/App.js b/src/components/App.js
index 6323acf6c..81783fe8d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,9 +1,18 @@
 import Header from "./Header.js";
 import Navigator from "./Navigator.js";
+import StationManagement from "./StationManagement.js";
 
 export default function App($app) {
   this.$app = $app;
 
-  this.header = new Header({ $target: $app });
-  this.navigator = new Navigator({ $target: $app });
+  this.header = new Header({ $target: this.$app });
+  this.navigator = new Navigator({ $target: this.$app });
+
+  this.$main = document.createElement("main");
+  this.$app.append(this.$main);
+
+  this.stationManagement = new StationManagement({
+    $target: this.$main,
+    isShow: true,
+  });
 }
diff --git a/src/components/StationManagement.js b/src/components/StationManagement.js
new file mode 100644
index 000000000..e6beed5ac
--- /dev/null
+++ b/src/components/StationManagement.js
@@ -0,0 +1,11 @@
+import StationNameInput from "./StationNameInput.js";
+
+export default function StationManagement({ $target, isShow }) {
+  this.$container = document.createElement("div");
+  this.$container.className = "station-management";
+  $target.append(this.$container);
+
+  this.isShow = isShow;
+
+  this.stationNameInput = new StationNameInput({ $target: this.$container });
+}
diff --git a/src/components/StationNameInput.js b/src/components/StationNameInput.js
new file mode 100644
index 000000000..c83f07b12
--- /dev/null
+++ b/src/components/StationNameInput.js
@@ -0,0 +1,20 @@
+import { ELEMENT_INFO } from "../util/constants.js";
+
+export default function StationNameInput({ $target }) {
+  this.$container = document.createElement("form");
+  $target.append(this.$container);
+
+  const { stationNameInput, stationNameSubmit } = ELEMENT_INFO;
+
+  this.render = () => {
+    this.$container.innerHTML = `
+      <label>
+        ${stationNameInput.text}<br />
+        <input id="${stationNameInput.id}" type="text" name="역 이름" placeholder="역 이름을 입력해주세요." />
+      </label>
+      <button id="${stationNameSubmit.id}" type="submit">${stationNameSubmit.text}</button>
+    `;
+  };
+
+  this.render();
+}
diff --git a/src/util/constants.js b/src/util/constants.js
index 728256bb7..51b291bea 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -1 +1,12 @@
 export const NAV_TEXTS = ["역 관리", "노선 관리", "구간 관리", "지하철 노선도 출력"];
+
+export const ELEMENT_INFO = {
+  stationNameInput: {
+    text: "역 이름",
+    id: "station-name-input",
+  },
+  stationNameSubmit: {
+    text: "역 추가",
+    id: "station-add-button",
+  },
+};
diff --git a/style.css b/style.css
index f0ce57cf4..bf5f9d85c 100644
--- a/style.css
+++ b/style.css
@@ -8,3 +8,11 @@ nav li {
   display: inline;
   margin-right: 10px;
 }
+
+.sr-only {
+  position: fixed;
+  top: -100px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}

From af54086bffe445798ffb224685c32ce60789ac76 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 10:43:43 +0900
Subject: [PATCH 09/41] Chore: add id of navigator buttons

---
 src/components/Navigator.js |  7 ++++---
 src/util/constants.js       | 20 ++++++++++++++++++--
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/Navigator.js b/src/components/Navigator.js
index 2166728bf..7538b23a3 100644
--- a/src/components/Navigator.js
+++ b/src/components/Navigator.js
@@ -1,14 +1,15 @@
-import { NAV_TEXTS } from "../util/constants.js";
+import { ELEMENT_INFO } from "../util/constants.js";
 
 export default function Navigator({ $target }) {
   this.$target = $target;
-  this.NAV_TEXTS = NAV_TEXTS;
+
+  const { navigator: navInfo } = ELEMENT_INFO;
 
   this.render = () => {
     const HTMLString = `
       <nav>
         <ol>
-          ${NAV_TEXTS.map((text, index) => `<li><button>${index + 1}. ${text}</button></li>`).join("")}
+          ${navInfo.map((nav, index) => `<li><button id="${nav.id}">${index + 1}. ${nav.text}</button></li>`).join("")}
         </ol>
       </nav>
     `;
diff --git a/src/util/constants.js b/src/util/constants.js
index 51b291bea..1b2aea922 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -1,6 +1,22 @@
-export const NAV_TEXTS = ["역 관리", "노선 관리", "구간 관리", "지하철 노선도 출력"];
-
 export const ELEMENT_INFO = {
+  navigator: [
+    {
+      text: "역 관리",
+      id: "station-manager-button",
+    },
+    {
+      text: "노선 관리",
+      id: "line-manager-button",
+    },
+    {
+      text: "구간 관리",
+      id: "section-manager-button",
+    },
+    {
+      text: "지하철 노선도 출력",
+      id: "map-print-manager-button",
+    },
+  ],
   stationNameInput: {
     text: "역 이름",
     id: "station-name-input",

From 82a3684627086acc6a4a6ed368e3f0053b10e3f2 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 12:02:05 +0900
Subject: [PATCH 10/41] Docs: update reference site

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

diff --git a/README.md b/README.md
index 30d162023..a5ae72a9d 100644
--- a/README.md
+++ b/README.md
@@ -41,3 +41,4 @@
 ## 📝 참고 사이트
 
 - [[HTML 바로 알기] Semantic Web을 위한 Semantic Elements - bono](https://blueshw.github.io/2020/05/09/know-html-semantic-elements/)
+- [비구조화 할당(구조분해) 문법 - velopert](https://learnjs.vlpt.us/useful/06-destructuring.html)

From aec813892b933c408bfa799a1ffd73e55560491b Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 12:05:42 +0900
Subject: [PATCH 11/41] Chore: rename StationManagement to StationManager

---
 src/components/App.js                                      | 4 ++--
 src/components/{StationManagement.js => StationManager.js} | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/{StationManagement.js => StationManager.js} (82%)

diff --git a/src/components/App.js b/src/components/App.js
index 81783fe8d..f3b9f2cff 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,6 +1,6 @@
 import Header from "./Header.js";
 import Navigator from "./Navigator.js";
-import StationManagement from "./StationManagement.js";
+import StationManager from "./StationManager.js";
 
 export default function App($app) {
   this.$app = $app;
@@ -11,7 +11,7 @@ export default function App($app) {
   this.$main = document.createElement("main");
   this.$app.append(this.$main);
 
-  this.stationManagement = new StationManagement({
+  this.stationManager = new StationManager({
     $target: this.$main,
     isShow: true,
   });
diff --git a/src/components/StationManagement.js b/src/components/StationManager.js
similarity index 82%
rename from src/components/StationManagement.js
rename to src/components/StationManager.js
index e6beed5ac..de41a6591 100644
--- a/src/components/StationManagement.js
+++ b/src/components/StationManager.js
@@ -1,6 +1,6 @@
 import StationNameInput from "./StationNameInput.js";
 
-export default function StationManagement({ $target, isShow }) {
+export default function StationManager({ $target, isShow }) {
   this.$container = document.createElement("div");
   this.$container.className = "station-management";
   $target.append(this.$container);

From a2c303e233cf8989318a9da1f8156a240d3020c4 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 12:25:34 +0900
Subject: [PATCH 12/41] Add: StationList component

---
 src/components/StationList.js    | 30 ++++++++++++++++++++++++++++++
 src/components/StationManager.js |  2 ++
 src/util/constants.js            |  4 ++++
 style.css                        | 19 +++++++++++++++++++
 4 files changed, 55 insertions(+)
 create mode 100644 src/components/StationList.js

diff --git a/src/components/StationList.js b/src/components/StationList.js
new file mode 100644
index 000000000..eb23bd5bf
--- /dev/null
+++ b/src/components/StationList.js
@@ -0,0 +1,30 @@
+import { ELEMENT_INFO } from "../util/constants.js";
+
+export default function StationList({ $target }) {
+  this.$container = document.createElement("section");
+  $target.append(this.$container);
+
+  const { stationDeleteButton } = ELEMENT_INFO;
+
+  this.render = () => {
+    this.$container.innerHTML = `
+      <h2>🚉 지하철 역 목록</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>역 이름</th>
+            <th>설정</th>
+          </tr>
+        </thead>
+        </tbody>
+          <tr>
+            <td>test</td>
+            <td><button class="${stationDeleteButton.className}">${stationDeleteButton.text}</button></td>
+          </tr>
+        </tbody>
+      </table>
+    `;
+  };
+
+  this.render();
+}
diff --git a/src/components/StationManager.js b/src/components/StationManager.js
index de41a6591..11fcb60e5 100644
--- a/src/components/StationManager.js
+++ b/src/components/StationManager.js
@@ -1,4 +1,5 @@
 import StationNameInput from "./StationNameInput.js";
+import StationList from "./StationList.js";
 
 export default function StationManager({ $target, isShow }) {
   this.$container = document.createElement("div");
@@ -8,4 +9,5 @@ export default function StationManager({ $target, isShow }) {
   this.isShow = isShow;
 
   this.stationNameInput = new StationNameInput({ $target: this.$container });
+  this.stationList = new StationList({ $target: this.$container });
 }
diff --git a/src/util/constants.js b/src/util/constants.js
index 1b2aea922..dc44cec9c 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -25,4 +25,8 @@ export const ELEMENT_INFO = {
     text: "역 추가",
     id: "station-add-button",
   },
+  stationDeleteButton: {
+    text: "삭제",
+    className: "station-delete-button",
+  },
 };
diff --git a/style.css b/style.css
index bf5f9d85c..b72232202 100644
--- a/style.css
+++ b/style.css
@@ -9,6 +9,25 @@ nav li {
   margin-right: 10px;
 }
 
+table {
+  border-spacing: 0;
+  border: 2px solid black;
+}
+
+th {
+  padding: 6px;
+  border-bottom: 2px solid black;
+}
+
+td {
+  padding: 6px;
+  border-bottom: 1px solid black;
+}
+
+tr:last-child > td {
+  border-bottom: none;
+}
+
 .sr-only {
   position: fixed;
   top: -100px;

From e1b83f25deaa4bdb94b6d938dde4335833d0336c Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 12:31:05 +0900
Subject: [PATCH 13/41] Feat: toggle if StationManager show

---
 src/components/StationManager.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/StationManager.js b/src/components/StationManager.js
index 11fcb60e5..48c76d4d4 100644
--- a/src/components/StationManager.js
+++ b/src/components/StationManager.js
@@ -10,4 +10,10 @@ export default function StationManager({ $target, isShow }) {
 
   this.stationNameInput = new StationNameInput({ $target: this.$container });
   this.stationList = new StationList({ $target: this.$container });
+
+  this.render = () => {
+    this.$container.style.display = this.isShow ? "block" : "none";
+  };
+
+  this.render();
 }

From 219214b78ddbc6ccc10b07a8470beafb3fb5bf82 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 12:37:30 +0900
Subject: [PATCH 14/41] Docs: update features of README.md

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

diff --git a/README.md b/README.md
index a5ae72a9d..b33245cee 100644
--- a/README.md
+++ b/README.md
@@ -6,8 +6,11 @@
 
 ## 🚀 구현 기능
 
+각 기능으로 이동하는 navigator 화면을 구성한다.
+
 ### 역 관리
 
+- 역 관리 화면을 구성한다.
 - 저장된 모든 지하철 역 이름을 조회한다.
 - 입력받은 역 이름이 2글자 이상인지 검사한다.
 - 입력받은 역 이름이 기존에 존재하지 않는지 검사한다.
@@ -17,6 +20,7 @@
 
 ### 노선 관리
 
+- 노선 관리 화면을 구성한다.
 - 저장된 모든 지하철 노선을 조회한다.
 - 입력받은 노선 이름이 1글자 이상인지 검사한다.
 - 입력받은 노선 이름이 기존에 존재하지 않는지 검사한다.
@@ -26,6 +30,7 @@
 
 ### 구간 관리
 
+- 구간 관리 화면을 구성한다.
 - 선택된 노선에 등록된 지하철 역을 조회한다.
 - 입력받은 구간 순서가 숫자인지 검사한다.
 - 입력받은 구간 순서가 자연수인지 검사한다.
@@ -36,6 +41,7 @@
 
 ### 지하철 노선도 출력
 
+- 지하철 노선도 출력 화면을 구성한다.
 - 저장되어있는 지하철 노선도를 호선별로 화면에 출력한다
 
 ## 📝 참고 사이트

From 9dbf48495ff4160669266b729c38c0710bc10016 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 13:04:13 +0900
Subject: [PATCH 15/41] Feat: inquire stored station names

---
 src/components/StationList.js    | 18 +++++++++++++-----
 src/components/StationManager.js | 11 ++++++++++-
 src/util/constants.js            | 10 ++++++++++
 src/util/localStorage.js         | 25 +++++++++++++++++++++++++
 4 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 src/util/localStorage.js

diff --git a/src/components/StationList.js b/src/components/StationList.js
index eb23bd5bf..e07ed6077 100644
--- a/src/components/StationList.js
+++ b/src/components/StationList.js
@@ -1,11 +1,22 @@
 import { ELEMENT_INFO } from "../util/constants.js";
 
-export default function StationList({ $target }) {
+export default function StationList({ $target, stations }) {
   this.$container = document.createElement("section");
   $target.append(this.$container);
 
+  this.stations = stations;
+
   const { stationDeleteButton } = ELEMENT_INFO;
 
+  this.createTableRowHTMLString = (stationName) => {
+    return `
+      <tr>
+        <td>${stationName}</td>
+        <td><button class="${stationDeleteButton.className}">${stationDeleteButton.text}</button></td>
+      </tr>
+    `;
+  };
+
   this.render = () => {
     this.$container.innerHTML = `
       <h2>🚉 지하철 역 목록</h2>
@@ -17,10 +28,7 @@ export default function StationList({ $target }) {
           </tr>
         </thead>
         </tbody>
-          <tr>
-            <td>test</td>
-            <td><button class="${stationDeleteButton.className}">${stationDeleteButton.text}</button></td>
-          </tr>
+          ${this.stations.map((station) => this.createTableRowHTMLString(station)).join("")}
         </tbody>
       </table>
     `;
diff --git a/src/components/StationManager.js b/src/components/StationManager.js
index 48c76d4d4..a8be5f9cf 100644
--- a/src/components/StationManager.js
+++ b/src/components/StationManager.js
@@ -1,5 +1,7 @@
 import StationNameInput from "./StationNameInput.js";
 import StationList from "./StationList.js";
+import localStorageManager from "../util/localStorage.js";
+import { STORAGE_KEY } from "../util/constants.js";
 
 export default function StationManager({ $target, isShow }) {
   this.$container = document.createElement("div");
@@ -7,9 +9,16 @@ export default function StationManager({ $target, isShow }) {
   $target.append(this.$container);
 
   this.isShow = isShow;
+  this.stations = localStorageManager.getItem({
+    key: STORAGE_KEY.station,
+    defaultValue: [],
+  });
 
   this.stationNameInput = new StationNameInput({ $target: this.$container });
-  this.stationList = new StationList({ $target: this.$container });
+  this.stationList = new StationList({
+    $target: this.$container,
+    stations: this.stations,
+  });
 
   this.render = () => {
     this.$container.style.display = this.isShow ? "block" : "none";
diff --git a/src/util/constants.js b/src/util/constants.js
index dc44cec9c..5cd36c9ea 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -30,3 +30,13 @@ export const ELEMENT_INFO = {
     className: "station-delete-button",
   },
 };
+
+export const ERROR_MESSAGE = {
+  getItem: "⚠ 데이터를 가져올 수 없습니다.",
+  setItem: "⚠ 데이터를 저장하지 못했습니다.",
+};
+
+export const STORAGE_KEY = {
+  station: "station",
+  line: "line",
+};
diff --git a/src/util/localStorage.js b/src/util/localStorage.js
new file mode 100644
index 000000000..6db253a1c
--- /dev/null
+++ b/src/util/localStorage.js
@@ -0,0 +1,25 @@
+import { ERROR_MESSAGE } from "./constants.js";
+
+const localStorageManager = {
+  getItem({ key, defaultValue }) {
+    try {
+      const storedData = localStorage.getItem(key);
+
+      return storedData ? JSON.parse(storedData) : defaultValue;
+    } catch (e) {
+      alert(ERROR_MESSAGE.getItem);
+      console.error(e);
+      return defaultValue;
+    }
+  },
+  setItem({ key, item }) {
+    try {
+      localStorage.setItem(key, JSON.stringify(item));
+    } catch (e) {
+      alert(ERROR_MESSAGE.setItem);
+      console.error(e);
+    }
+  },
+};
+
+export default localStorageManager;

From 157f651026ec5477479e77ca2dd951221b8b78f8 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 13:57:02 +0900
Subject: [PATCH 16/41] Feat: check length of station name

---
 src/components/StationNameInput.js | 28 +++++++++++++++++++++++++++-
 src/util/constants.js              |  3 +++
 src/util/validation.js             |  3 +++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/util/validation.js

diff --git a/src/components/StationNameInput.js b/src/components/StationNameInput.js
index c83f07b12..0c24439ba 100644
--- a/src/components/StationNameInput.js
+++ b/src/components/StationNameInput.js
@@ -1,4 +1,5 @@
-import { ELEMENT_INFO } from "../util/constants.js";
+import { isTextOverMinLength } from "../util/validation.js";
+import { ELEMENT_INFO, STATION_NAME_MIN_LENGTH, ERROR_MESSAGE } from "../util/constants.js";
 
 export default function StationNameInput({ $target }) {
   this.$container = document.createElement("form");
@@ -6,6 +7,30 @@ export default function StationNameInput({ $target }) {
 
   const { stationNameInput, stationNameSubmit } = ELEMENT_INFO;
 
+  this.bindOnSubmit = () => {
+    this.$container.addEventListener("submit", (e) => {
+      const $stationNameInput = document.querySelector(`#${stationNameInput.id}`);
+
+      if (this.isValidStationName($stationNameInput.value)) {
+        // TODO: 지하철 역 등록
+      }
+
+      $stationNameInput.value = "";
+
+      e.preventDefault();
+    });
+  };
+
+  this.isValidStationName = (stationName) => {
+    if (!isTextOverMinLength(stationName, STATION_NAME_MIN_LENGTH)) {
+      alert(ERROR_MESSAGE.shortStationName);
+
+      return false;
+    }
+
+    return true;
+  };
+
   this.render = () => {
     this.$container.innerHTML = `
       <label>
@@ -17,4 +42,5 @@ export default function StationNameInput({ $target }) {
   };
 
   this.render();
+  this.bindOnSubmit();
 }
diff --git a/src/util/constants.js b/src/util/constants.js
index 5cd36c9ea..24fdc5bc2 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -30,10 +30,13 @@ export const ELEMENT_INFO = {
     className: "station-delete-button",
   },
 };
+export const STATION_NAME_MIN_LENGTH = 2;
 
 export const ERROR_MESSAGE = {
   getItem: "⚠ 데이터를 가져올 수 없습니다.",
   setItem: "⚠ 데이터를 저장하지 못했습니다.",
+  shortStationName: `⚠ ${STATION_NAME_MIN_LENGTH}자 이상의 역 이름을 입력해주세요.`,
+  duplicatedStationName: "⚠ 이미 존재하는 역 이름입니다.",
 };
 
 export const STORAGE_KEY = {
diff --git a/src/util/validation.js b/src/util/validation.js
new file mode 100644
index 000000000..1a4b7f8d9
--- /dev/null
+++ b/src/util/validation.js
@@ -0,0 +1,3 @@
+export const isTextOverMinLength = (text, minLength) => {
+  return text.trim().length >= minLength ? true : false;
+};

From 9fa4f18bb890a5d0e097c8f3621521594409e2e5 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 14:24:07 +0900
Subject: [PATCH 17/41] Feat: check entered station name already exist

---
 src/components/StationManager.js   | 19 ++++++++++++++-----
 src/components/StationNameInput.js | 10 +++++++++-
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/StationManager.js b/src/components/StationManager.js
index a8be5f9cf..6ea98d320 100644
--- a/src/components/StationManager.js
+++ b/src/components/StationManager.js
@@ -14,11 +14,20 @@ export default function StationManager({ $target, isShow }) {
     defaultValue: [],
   });
 
-  this.stationNameInput = new StationNameInput({ $target: this.$container });
-  this.stationList = new StationList({
-    $target: this.$container,
-    stations: this.stations,
-  });
+  this.isExistStationName = (stationName) => {
+    return this.stations.includes(stationName);
+  };
+
+  this.components = [
+    new StationNameInput({
+      $target: this.$container,
+      isExistStationName: this.isExistStationName,
+    }),
+    new StationList({
+      $target: this.$container,
+      stations: this.stations,
+    }),
+  ];
 
   this.render = () => {
     this.$container.style.display = this.isShow ? "block" : "none";
diff --git a/src/components/StationNameInput.js b/src/components/StationNameInput.js
index 0c24439ba..44a6bbbda 100644
--- a/src/components/StationNameInput.js
+++ b/src/components/StationNameInput.js
@@ -1,10 +1,12 @@
 import { isTextOverMinLength } from "../util/validation.js";
 import { ELEMENT_INFO, STATION_NAME_MIN_LENGTH, ERROR_MESSAGE } from "../util/constants.js";
 
-export default function StationNameInput({ $target }) {
+export default function StationNameInput({ $target, isExistStationName }) {
   this.$container = document.createElement("form");
   $target.append(this.$container);
 
+  this.isExistStationName = isExistStationName;
+
   const { stationNameInput, stationNameSubmit } = ELEMENT_INFO;
 
   this.bindOnSubmit = () => {
@@ -28,6 +30,12 @@ export default function StationNameInput({ $target }) {
       return false;
     }
 
+    if (this.isExistStationName(stationName)) {
+      alert(ERROR_MESSAGE.duplicatedStationName);
+
+      return false;
+    }
+
     return true;
   };
 

From f4b3b7e421da2ccaf7a5d501092dbe068794c1ee Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 15:00:32 +0900
Subject: [PATCH 18/41] Feat: add new station

---
 src/components/StationList.js      |  5 ++++
 src/components/StationManager.js   | 41 ++++++++++++++++++++++--------
 src/components/StationNameInput.js |  5 ++--
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/components/StationList.js b/src/components/StationList.js
index e07ed6077..16adf1203 100644
--- a/src/components/StationList.js
+++ b/src/components/StationList.js
@@ -8,6 +8,11 @@ export default function StationList({ $target, stations }) {
 
   const { stationDeleteButton } = ELEMENT_INFO;
 
+  this.setState = ({ nextStations }) => {
+    this.stations = nextStations;
+    this.render();
+  };
+
   this.createTableRowHTMLString = (stationName) => {
     return `
       <tr>
diff --git a/src/components/StationManager.js b/src/components/StationManager.js
index 6ea98d320..157cf534a 100644
--- a/src/components/StationManager.js
+++ b/src/components/StationManager.js
@@ -18,16 +18,37 @@ export default function StationManager({ $target, isShow }) {
     return this.stations.includes(stationName);
   };
 
-  this.components = [
-    new StationNameInput({
-      $target: this.$container,
-      isExistStationName: this.isExistStationName,
-    }),
-    new StationList({
-      $target: this.$container,
-      stations: this.stations,
-    }),
-  ];
+  this.onAddStation = (stationName) => {
+    const nextStations = [...this.stations, stationName];
+    this.setState({ nextStations });
+  };
+
+  this.stationNameInput = new StationNameInput({
+    $target: this.$container,
+    isExistStationName: this.isExistStationName,
+    onAddStation: this.onAddStation,
+  });
+  this.stationList = new StationList({
+    $target: this.$container,
+    stations: this.stations,
+  });
+
+  this.setState = ({ nextIsShow, nextStations }) => {
+    if (nextStations) {
+      this.stations = nextStations;
+      localStorageManager.setItem({
+        key: STORAGE_KEY.station,
+        item: nextStations,
+      });
+
+      this.stationList.setState({ nextStation: this.stations });
+    }
+
+    if (nextIsShow !== undefined) {
+      this.isShow = nextIsShow;
+      this.render();
+    }
+  };
 
   this.render = () => {
     this.$container.style.display = this.isShow ? "block" : "none";
diff --git a/src/components/StationNameInput.js b/src/components/StationNameInput.js
index 44a6bbbda..228a87ee3 100644
--- a/src/components/StationNameInput.js
+++ b/src/components/StationNameInput.js
@@ -1,11 +1,12 @@
 import { isTextOverMinLength } from "../util/validation.js";
 import { ELEMENT_INFO, STATION_NAME_MIN_LENGTH, ERROR_MESSAGE } from "../util/constants.js";
 
-export default function StationNameInput({ $target, isExistStationName }) {
+export default function StationNameInput({ $target, isExistStationName, onAddStation }) {
   this.$container = document.createElement("form");
   $target.append(this.$container);
 
   this.isExistStationName = isExistStationName;
+  this.onAddStation = onAddStation;
 
   const { stationNameInput, stationNameSubmit } = ELEMENT_INFO;
 
@@ -14,7 +15,7 @@ export default function StationNameInput({ $target, isExistStationName }) {
       const $stationNameInput = document.querySelector(`#${stationNameInput.id}`);
 
       if (this.isValidStationName($stationNameInput.value)) {
-        // TODO: 지하철 역 등록
+        this.onAddStation($stationNameInput.value);
       }
 
       $stationNameInput.value = "";

From 3f04560c1d687f638ba1b655b9ff1cc0a581e079 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 15:14:47 +0900
Subject: [PATCH 19/41] Feat: delete station

---
 src/components/StationList.js    | 18 ++++++++++++++----
 src/components/StationManager.js | 10 +++++++++-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/StationList.js b/src/components/StationList.js
index 16adf1203..c6b11a960 100644
--- a/src/components/StationList.js
+++ b/src/components/StationList.js
@@ -1,23 +1,32 @@
 import { ELEMENT_INFO } from "../util/constants.js";
 
-export default function StationList({ $target, stations }) {
+export default function StationList({ $target, stations, onDeleteStation }) {
   this.$container = document.createElement("section");
   $target.append(this.$container);
 
   this.stations = stations;
+  this.onDeleteStation = onDeleteStation;
 
   const { stationDeleteButton } = ELEMENT_INFO;
 
+  this.bindOnDelete = () => {
+    this.$container.addEventListener("click", (e) => {
+      if (e.target.className === stationDeleteButton.className) {
+        this.onDeleteStation(e.target.dataset.stationIndex);
+      }
+    });
+  };
+
   this.setState = ({ nextStations }) => {
     this.stations = nextStations;
     this.render();
   };
 
-  this.createTableRowHTMLString = (stationName) => {
+  this.createTableRowHTMLString = (stationName, index) => {
     return `
       <tr>
         <td>${stationName}</td>
-        <td><button class="${stationDeleteButton.className}">${stationDeleteButton.text}</button></td>
+        <td><button class="${stationDeleteButton.className}" data-station-index="${index}">${stationDeleteButton.text}</button></td>
       </tr>
     `;
   };
@@ -33,11 +42,12 @@ export default function StationList({ $target, stations }) {
           </tr>
         </thead>
         </tbody>
-          ${this.stations.map((station) => this.createTableRowHTMLString(station)).join("")}
+          ${this.stations.map((station, index) => this.createTableRowHTMLString(station, index)).join("")}
         </tbody>
       </table>
     `;
   };
 
   this.render();
+  this.bindOnDelete();
 }
diff --git a/src/components/StationManager.js b/src/components/StationManager.js
index 157cf534a..10faef5d6 100644
--- a/src/components/StationManager.js
+++ b/src/components/StationManager.js
@@ -23,6 +23,13 @@ export default function StationManager({ $target, isShow }) {
     this.setState({ nextStations });
   };
 
+  this.onDeleteStation = (stationIndex) => {
+    const nextStations = [...this.stations];
+    nextStations.splice(stationIndex, 1);
+
+    this.setState({ nextStations });
+  };
+
   this.stationNameInput = new StationNameInput({
     $target: this.$container,
     isExistStationName: this.isExistStationName,
@@ -31,6 +38,7 @@ export default function StationManager({ $target, isShow }) {
   this.stationList = new StationList({
     $target: this.$container,
     stations: this.stations,
+    onDeleteStation: this.onDeleteStation,
   });
 
   this.setState = ({ nextIsShow, nextStations }) => {
@@ -41,7 +49,7 @@ export default function StationManager({ $target, isShow }) {
         item: nextStations,
       });
 
-      this.stationList.setState({ nextStation: this.stations });
+      this.stationList.setState({ nextStations: this.stations });
     }
 
     if (nextIsShow !== undefined) {

From 743a6fbe1d76cb0c4ecb4357ca5bd11b68f15dbb Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 15:23:26 +0900
Subject: [PATCH 20/41] Refactor: change to manage stations state by App

---
 src/components/App.js            | 36 +++++++++++++++++++++++++++++++-
 src/components/StationManager.js | 31 +++++----------------------
 2 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index f3b9f2cff..0753f0c91 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,18 +1,52 @@
 import Header from "./Header.js";
 import Navigator from "./Navigator.js";
 import StationManager from "./StationManager.js";
+import localStorageManager from "../util/localStorage.js";
+import { STORAGE_KEY } from "../util/constants.js";
 
 export default function App($app) {
   this.$app = $app;
-
   this.header = new Header({ $target: this.$app });
   this.navigator = new Navigator({ $target: this.$app });
 
   this.$main = document.createElement("main");
   this.$app.append(this.$main);
 
+  this.stations = localStorageManager.getItem({
+    key: STORAGE_KEY.station,
+    defaultValue: [],
+  });
+
+  this.onAddStation = (stationName) => {
+    const nextStations = [...this.stations, stationName];
+    this.setState({ nextStations });
+  };
+
+  this.onDeleteStation = (stationIndex) => {
+    const nextStations = [...this.stations];
+    nextStations.splice(stationIndex, 1);
+
+    this.setState({ nextStations });
+  };
+
   this.stationManager = new StationManager({
     $target: this.$main,
+    stations: this.stations,
     isShow: true,
+    onAddStation: this.onAddStation,
+    onDeleteStation: this.onDeleteStation,
   });
+
+  this.setState = ({ nextStations }) => {
+    if (nextStations) {
+      this.stations = nextStations;
+
+      localStorageManager.setItem({
+        key: STORAGE_KEY.station,
+        item: nextStations,
+      });
+
+      this.stationManager.setState({ nextStations: this.stations });
+    }
+  };
 }
diff --git a/src/components/StationManager.js b/src/components/StationManager.js
index 10faef5d6..05746f44a 100644
--- a/src/components/StationManager.js
+++ b/src/components/StationManager.js
@@ -1,54 +1,33 @@
 import StationNameInput from "./StationNameInput.js";
 import StationList from "./StationList.js";
-import localStorageManager from "../util/localStorage.js";
-import { STORAGE_KEY } from "../util/constants.js";
 
-export default function StationManager({ $target, isShow }) {
+export default function StationManager({ $target, stations, isShow, onAddStation, onDeleteStation }) {
   this.$container = document.createElement("div");
   this.$container.className = "station-management";
   $target.append(this.$container);
 
   this.isShow = isShow;
-  this.stations = localStorageManager.getItem({
-    key: STORAGE_KEY.station,
-    defaultValue: [],
-  });
+  this.stations = stations;
 
   this.isExistStationName = (stationName) => {
     return this.stations.includes(stationName);
   };
 
-  this.onAddStation = (stationName) => {
-    const nextStations = [...this.stations, stationName];
-    this.setState({ nextStations });
-  };
-
-  this.onDeleteStation = (stationIndex) => {
-    const nextStations = [...this.stations];
-    nextStations.splice(stationIndex, 1);
-
-    this.setState({ nextStations });
-  };
-
   this.stationNameInput = new StationNameInput({
     $target: this.$container,
     isExistStationName: this.isExistStationName,
-    onAddStation: this.onAddStation,
+    onAddStation: onAddStation,
   });
+
   this.stationList = new StationList({
     $target: this.$container,
     stations: this.stations,
-    onDeleteStation: this.onDeleteStation,
+    onDeleteStation: onDeleteStation,
   });
 
   this.setState = ({ nextIsShow, nextStations }) => {
     if (nextStations) {
       this.stations = nextStations;
-      localStorageManager.setItem({
-        key: STORAGE_KEY.station,
-        item: nextStations,
-      });
-
       this.stationList.setState({ nextStations: this.stations });
     }
 

From 990e02bdbbb3f23c4886a9322f0dbc5937cc88ba Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 15:28:22 +0900
Subject: [PATCH 21/41] Chore: change class name of StationManager container

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

diff --git a/src/components/StationManager.js b/src/components/StationManager.js
index 05746f44a..696885141 100644
--- a/src/components/StationManager.js
+++ b/src/components/StationManager.js
@@ -3,7 +3,7 @@ import StationList from "./StationList.js";
 
 export default function StationManager({ $target, stations, isShow, onAddStation, onDeleteStation }) {
   this.$container = document.createElement("div");
-  this.$container.className = "station-management";
+  this.$container.className = "station-manager";
   $target.append(this.$container);
 
   this.isShow = isShow;

From 0eb4619cbc792dfdd5a7520e7cc89c3d1f09272c Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 16:40:24 +0900
Subject: [PATCH 22/41] Add: LineManager, LineInput and LineList

---
 src/components/App.js         | 14 ++++++++++-
 src/components/LineInput.js   | 34 +++++++++++++++++++++++++++
 src/components/LineList.js    | 44 +++++++++++++++++++++++++++++++++++
 src/components/LineManager.js | 35 ++++++++++++++++++++++++++++
 src/util/constants.js         | 21 +++++++++++++++++
 style.css                     | 12 ++++++++++
 6 files changed, 159 insertions(+), 1 deletion(-)
 create mode 100644 src/components/LineInput.js
 create mode 100644 src/components/LineList.js
 create mode 100644 src/components/LineManager.js

diff --git a/src/components/App.js b/src/components/App.js
index 0753f0c91..6fe6b343d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -3,6 +3,7 @@ import Navigator from "./Navigator.js";
 import StationManager from "./StationManager.js";
 import localStorageManager from "../util/localStorage.js";
 import { STORAGE_KEY } from "../util/constants.js";
+import LineManager from "./LineManager.js";
 
 export default function App($app) {
   this.$app = $app;
@@ -16,6 +17,10 @@ export default function App($app) {
     key: STORAGE_KEY.station,
     defaultValue: [],
   });
+  this.lines = localStorageManager.getItem({
+    key: STORAGE_KEY.line,
+    defaultValue: [],
+  });
 
   this.onAddStation = (stationName) => {
     const nextStations = [...this.stations, stationName];
@@ -32,11 +37,18 @@ export default function App($app) {
   this.stationManager = new StationManager({
     $target: this.$main,
     stations: this.stations,
-    isShow: true,
+    isShow: false,
     onAddStation: this.onAddStation,
     onDeleteStation: this.onDeleteStation,
   });
 
+  this.lineManager = new LineManager({
+    $target: this.$main,
+    isShow: true,
+    stations: this.stations,
+    lines: this.lines,
+  });
+
   this.setState = ({ nextStations }) => {
     if (nextStations) {
       this.stations = nextStations;
diff --git a/src/components/LineInput.js b/src/components/LineInput.js
new file mode 100644
index 000000000..7575a80d7
--- /dev/null
+++ b/src/components/LineInput.js
@@ -0,0 +1,34 @@
+import { ELEMENT_INFO } from "../util/constants.js";
+
+export default function LineInput({ $target, stations }) {
+  this.$container = document.createElement("form");
+  $target.append(this.$container);
+
+  this.stations = stations;
+
+  const { lineNameInput, lineStartStationSelector, lineEndStationSelector, lineAddButton } = ELEMENT_INFO;
+
+  this.createSelectOptionHTMLString = () => {
+    return this.stations
+      .map((station, index) => `<option data-index="${index}" value="${station}">${station}</option>`)
+      .join("");
+  };
+
+  this.render = () => {
+    this.$container.innerHTML = `
+      <label for="${lineNameInput.id}">${lineNameInput.text}</label>
+      <input id="${lineNameInput.id}" type="text" palceholder="노선 이름을 입력해주세요" />
+      <label>
+        ${lineStartStationSelector.text}
+        <select id="${lineStartStationSelector.id}">${this.createSelectOptionHTMLString()}</select>
+      </label>
+      <label>
+        ${lineEndStationSelector.text}
+        <select id="${lineEndStationSelector.id}">${this.createSelectOptionHTMLString()}</select>
+      </label>
+      <button id="${lineAddButton.id}" type="submit">${lineAddButton.text}</button>
+    `;
+  };
+
+  this.render();
+}
diff --git a/src/components/LineList.js b/src/components/LineList.js
new file mode 100644
index 000000000..5f625cb48
--- /dev/null
+++ b/src/components/LineList.js
@@ -0,0 +1,44 @@
+import { ELEMENT_INFO } from "../util/constants.js";
+
+export default function LineList({ $target, lines }) {
+  this.$container = document.createElement("section");
+  $target.append(this.$container);
+
+  this.lines = lines;
+
+  const { lineDeleteButton } = ELEMENT_INFO;
+
+  this.createTableRowHTMLString = (line) => {
+    return `
+      <tr>
+        <td>${line.name}</td>
+        <td>${line.stations[0]}</td>
+        <td>${line.stations[line.stations.length - 1]}</td>
+        <td>
+          <button data-line-name="${line.name}" class="${lineDeleteButton.className}">${lineDeleteButton.text}</button>
+        </td>
+      </tr>
+    `;
+  };
+
+  this.render = () => {
+    this.$container.innerHTML = `
+      <h2>🚉 지하철 노선 목록</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>노선 이름</th>
+            <th>상행 종점역</th>
+            <th>하행 종점역</th>
+            <th>설정</th>
+          </tr>
+        </thead>
+        </tbody>
+          ${this.lines.map((line) => this.createTableRowHTMLString(line)).join("")}
+        </tbody>
+      </table>
+    `;
+  };
+
+  this.render();
+}
diff --git a/src/components/LineManager.js b/src/components/LineManager.js
new file mode 100644
index 000000000..5c85bc745
--- /dev/null
+++ b/src/components/LineManager.js
@@ -0,0 +1,35 @@
+import LineInput from "./LineInput.js";
+import LineList from "./LineList.js";
+
+export default function LineManager({ $target, isShow, stations, lines }) {
+  this.$container = document.createElement("div");
+  this.$container.className = "line-manager";
+  $target.append(this.$container);
+
+  this.isShow = isShow;
+  this.stations = stations;
+  this.lines = lines;
+
+  this.lineInput = new LineInput({
+    $target: this.$container,
+    stations: this.stations,
+  });
+
+  this.lineList = new LineList({
+    $target: this.$container,
+    lines: this.lines,
+  });
+
+  this.setState = ({ nextIsShow }) => {
+    if (nextIsShow !== undefined) {
+      this.isShow = nextIsShow;
+      this.render();
+    }
+  };
+
+  this.render = () => {
+    this.$container.style.display = this.isShow ? "block" : "none";
+  };
+
+  this.render();
+}
diff --git a/src/util/constants.js b/src/util/constants.js
index 24fdc5bc2..d6c5de32b 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -29,7 +29,28 @@ export const ELEMENT_INFO = {
     text: "삭제",
     className: "station-delete-button",
   },
+  lineNameInput: {
+    text: "노선 이름",
+    id: "line-name-input",
+  },
+  lineStartStationSelector: {
+    text: "상행 종점",
+    id: "line-start-station-selector",
+  },
+  lineEndStationSelector: {
+    text: "하행 종점",
+    id: "line-end-station-selector",
+  },
+  lineAddButton: {
+    text: "노선 추가",
+    id: "line-add-button",
+  },
+  lineDeleteButton: {
+    text: "삭제",
+    className: "line-delete-button",
+  },
 };
+
 export const STATION_NAME_MIN_LENGTH = 2;
 
 export const ERROR_MESSAGE = {
diff --git a/style.css b/style.css
index b72232202..16faef592 100644
--- a/style.css
+++ b/style.css
@@ -9,6 +9,18 @@ nav li {
   margin-right: 10px;
 }
 
+label {
+  display: block;
+}
+
+input {
+  margin-bottom: 10px;
+}
+
+button[type="submit"] {
+  margin-top: 15px;
+}
+
 table {
   border-spacing: 0;
   border: 2px solid black;

From a1734cc7c8d2435bf91b0980cecb093fbdb91ef2 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 17:06:20 +0900
Subject: [PATCH 23/41] Feat: check length of line name

---
 src/components/LineInput.js | 36 +++++++++++++++++++++++++++++++++++-
 src/util/constants.js       |  2 ++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/components/LineInput.js b/src/components/LineInput.js
index 7575a80d7..d453c1ac1 100644
--- a/src/components/LineInput.js
+++ b/src/components/LineInput.js
@@ -1,4 +1,5 @@
-import { ELEMENT_INFO } from "../util/constants.js";
+import { isTextOverMinLength } from "../util/validation.js";
+import { ELEMENT_INFO, LINE_NAME_MIN_LENGTH, ERROR_MESSAGE } from "../util/constants.js";
 
 export default function LineInput({ $target, stations }) {
   this.$container = document.createElement("form");
@@ -8,6 +9,38 @@ export default function LineInput({ $target, stations }) {
 
   const { lineNameInput, lineStartStationSelector, lineEndStationSelector, lineAddButton } = ELEMENT_INFO;
 
+  this.bindOnSubmit = () => {
+    this.$container.addEventListener("submit", (e) => {
+      const $lineNameInput = document.querySelector(`#${lineNameInput.id}`);
+
+      console.log(this.isValidLineName($lineNameInput));
+
+      e.preventDefault();
+    });
+  };
+
+  this.isValidLineName = ($lineNameInput) => {
+    let result = true;
+
+    result = this.isLineNameOverMinLength($lineNameInput.value);
+
+    if (!result) {
+      $lineNameInput.value = "";
+    }
+
+    return result;
+  };
+
+  this.isLineNameOverMinLength = (lineName) => {
+    const result = isTextOverMinLength(lineName, LINE_NAME_MIN_LENGTH);
+
+    if (!result) {
+      alert(ERROR_MESSAGE.shortLineName);
+    }
+
+    return result;
+  };
+
   this.createSelectOptionHTMLString = () => {
     return this.stations
       .map((station, index) => `<option data-index="${index}" value="${station}">${station}</option>`)
@@ -31,4 +64,5 @@ export default function LineInput({ $target, stations }) {
   };
 
   this.render();
+  this.bindOnSubmit();
 }
diff --git a/src/util/constants.js b/src/util/constants.js
index d6c5de32b..918782570 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -52,12 +52,14 @@ export const ELEMENT_INFO = {
 };
 
 export const STATION_NAME_MIN_LENGTH = 2;
+export const LINE_NAME_MIN_LENGTH = 1;
 
 export const ERROR_MESSAGE = {
   getItem: "⚠ 데이터를 가져올 수 없습니다.",
   setItem: "⚠ 데이터를 저장하지 못했습니다.",
   shortStationName: `⚠ ${STATION_NAME_MIN_LENGTH}자 이상의 역 이름을 입력해주세요.`,
   duplicatedStationName: "⚠ 이미 존재하는 역 이름입니다.",
+  shortLineName: `⚠ ${LINE_NAME_MIN_LENGTH}자 이상의 노선 이름을 입력해주세요.`,
 };
 
 export const STORAGE_KEY = {

From 447195b38e4911f227eaa447da574f16cb2a0cef Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 17:13:45 +0900
Subject: [PATCH 24/41] Feat: check entered line name already exist

---
 src/components/App.js         |  5 ++++-
 src/components/LineInput.js   | 13 ++++++++++++-
 src/components/LineManager.js |  9 +++++++++
 src/util/constants.js         |  1 +
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 6fe6b343d..84613c54d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -19,7 +19,10 @@ export default function App($app) {
   });
   this.lines = localStorageManager.getItem({
     key: STORAGE_KEY.line,
-    defaultValue: [],
+    defaultValue: [
+      { name: "8호선", stations: ["몽촌토성", "잠실"] },
+      { name: "9호선", stations: ["종합운동장", "봉은사"] },
+    ],
   });
 
   this.onAddStation = (stationName) => {
diff --git a/src/components/LineInput.js b/src/components/LineInput.js
index d453c1ac1..3aa692009 100644
--- a/src/components/LineInput.js
+++ b/src/components/LineInput.js
@@ -1,7 +1,7 @@
 import { isTextOverMinLength } from "../util/validation.js";
 import { ELEMENT_INFO, LINE_NAME_MIN_LENGTH, ERROR_MESSAGE } from "../util/constants.js";
 
-export default function LineInput({ $target, stations }) {
+export default function LineInput({ $target, stations, isExistLineName }) {
   this.$container = document.createElement("form");
   $target.append(this.$container);
 
@@ -23,6 +23,7 @@ export default function LineInput({ $target, stations }) {
     let result = true;
 
     result = this.isLineNameOverMinLength($lineNameInput.value);
+    result = this.isExistLineName($lineNameInput.value);
 
     if (!result) {
       $lineNameInput.value = "";
@@ -41,6 +42,16 @@ export default function LineInput({ $target, stations }) {
     return result;
   };
 
+  this.isExistLineName = (lineName) => {
+    const result = isExistLineName(lineName);
+
+    if (!result) {
+      alert(ERROR_MESSAGE.duplicatedLineName);
+    }
+
+    return result;
+  };
+
   this.createSelectOptionHTMLString = () => {
     return this.stations
       .map((station, index) => `<option data-index="${index}" value="${station}">${station}</option>`)
diff --git a/src/components/LineManager.js b/src/components/LineManager.js
index 5c85bc745..c9afb92ae 100644
--- a/src/components/LineManager.js
+++ b/src/components/LineManager.js
@@ -10,9 +10,18 @@ export default function LineManager({ $target, isShow, stations, lines }) {
   this.stations = stations;
   this.lines = lines;
 
+  this.isExistLineName = (lineName) => {
+    if (this.lines.find((line) => line.name === lineName)) {
+      return true;
+    }
+
+    return false;
+  };
+
   this.lineInput = new LineInput({
     $target: this.$container,
     stations: this.stations,
+    isExistLineName: this.isExistLineName,
   });
 
   this.lineList = new LineList({
diff --git a/src/util/constants.js b/src/util/constants.js
index 918782570..cd7c4d008 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -60,6 +60,7 @@ export const ERROR_MESSAGE = {
   shortStationName: `⚠ ${STATION_NAME_MIN_LENGTH}자 이상의 역 이름을 입력해주세요.`,
   duplicatedStationName: "⚠ 이미 존재하는 역 이름입니다.",
   shortLineName: `⚠ ${LINE_NAME_MIN_LENGTH}자 이상의 노선 이름을 입력해주세요.`,
+  duplicatedLineName: "⚠ 이미 존재하는 노선 이름입니다.",
 };
 
 export const STORAGE_KEY = {

From fb8d4ad8deab9f5c273a9f6e27c11af9652457f8 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 17:44:27 +0900
Subject: [PATCH 25/41] Feat: check start and end station is same

---
 src/components/LineInput.js | 42 ++++++++++++++++++++++---------------
 src/util/constants.js       |  1 +
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/components/LineInput.js b/src/components/LineInput.js
index 3aa692009..26493a0fa 100644
--- a/src/components/LineInput.js
+++ b/src/components/LineInput.js
@@ -12,50 +12,58 @@ export default function LineInput({ $target, stations, isExistLineName }) {
   this.bindOnSubmit = () => {
     this.$container.addEventListener("submit", (e) => {
       const $lineNameInput = document.querySelector(`#${lineNameInput.id}`);
+      const startStationName = document.querySelector(`#${lineStartStationSelector.id}`).value;
+      const endStationName = document.querySelector(`#${lineEndStationSelector.id}`).value;
 
-      console.log(this.isValidLineName($lineNameInput));
+      if (this.isValidInput({ $lineNameInput, startStationName, endStationName })) {
+      }
 
       e.preventDefault();
     });
   };
 
-  this.isValidLineName = ($lineNameInput) => {
-    let result = true;
+  this.isValidInput = ({ $lineNameInput, startStationName, endStationName }) => {
+    return (
+      this.isLineNameOverMinLength($lineNameInput) &&
+      !this.isExistLineName($lineNameInput) &&
+      !this.isSameStation(startStationName, endStationName)
+    );
+  };
 
-    result = this.isLineNameOverMinLength($lineNameInput.value);
-    result = this.isExistLineName($lineNameInput.value);
+  this.isLineNameOverMinLength = ($lineNameInput) => {
+    const result = isTextOverMinLength($lineNameInput.value, LINE_NAME_MIN_LENGTH);
 
     if (!result) {
+      alert(ERROR_MESSAGE.shortLineName);
       $lineNameInput.value = "";
     }
 
     return result;
   };
 
-  this.isLineNameOverMinLength = (lineName) => {
-    const result = isTextOverMinLength(lineName, LINE_NAME_MIN_LENGTH);
+  this.isExistLineName = ($lineNameInput) => {
+    const result = isExistLineName($lineNameInput.value);
 
-    if (!result) {
-      alert(ERROR_MESSAGE.shortLineName);
+    if (result) {
+      alert(ERROR_MESSAGE.duplicatedLineName);
+      $lineNameInput.value = "";
     }
 
     return result;
   };
 
-  this.isExistLineName = (lineName) => {
-    const result = isExistLineName(lineName);
+  this.isSameStation = (startStationName, endStationName) => {
+    if (startStationName === endStationName) {
+      alert(ERROR_MESSAGE.sameStartAndEndStation);
 
-    if (!result) {
-      alert(ERROR_MESSAGE.duplicatedLineName);
+      return true;
     }
 
-    return result;
+    return false;
   };
 
   this.createSelectOptionHTMLString = () => {
-    return this.stations
-      .map((station, index) => `<option data-index="${index}" value="${station}">${station}</option>`)
-      .join("");
+    return this.stations.map((station) => `<option value="${station}">${station}</option>`).join("");
   };
 
   this.render = () => {
diff --git a/src/util/constants.js b/src/util/constants.js
index cd7c4d008..168f2304a 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -61,6 +61,7 @@ export const ERROR_MESSAGE = {
   duplicatedStationName: "⚠ 이미 존재하는 역 이름입니다.",
   shortLineName: `⚠ ${LINE_NAME_MIN_LENGTH}자 이상의 노선 이름을 입력해주세요.`,
   duplicatedLineName: "⚠ 이미 존재하는 노선 이름입니다.",
+  sameStartAndEndStation: "⚠ 상행 종점역과 하행 종점역은 같을 수 없습니다.",
 };
 
 export const STORAGE_KEY = {

From 2687d77228a2fc9d3f4afc64ec6576d312c54bc9 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 17:57:26 +0900
Subject: [PATCH 26/41] Feat: add line

---
 src/components/App.js         | 42 ++++++++++++++++++++++++++---------
 src/components/LineInput.js   | 28 +++++++++++++----------
 src/components/LineList.js    |  5 +++++
 src/components/LineManager.js | 10 +++++++--
 4 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 84613c54d..b1682b48d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -19,10 +19,7 @@ export default function App($app) {
   });
   this.lines = localStorageManager.getItem({
     key: STORAGE_KEY.line,
-    defaultValue: [
-      { name: "8호선", stations: ["몽촌토성", "잠실"] },
-      { name: "9호선", stations: ["종합운동장", "봉은사"] },
-    ],
+    defaultValue: [],
   });
 
   this.onAddStation = (stationName) => {
@@ -45,23 +42,46 @@ export default function App($app) {
     onDeleteStation: this.onDeleteStation,
   });
 
+  this.onAddLine = (line) => {
+    const nextLines = [...this.lines, line];
+    this.setState({ nextLines });
+  };
+
   this.lineManager = new LineManager({
     $target: this.$main,
     isShow: true,
     stations: this.stations,
     lines: this.lines,
+    onAddLine: this.onAddLine,
   });
 
-  this.setState = ({ nextStations }) => {
-    if (nextStations) {
-      this.stations = nextStations;
+  this.setNextStations = (nextStations) => {
+    this.stations = nextStations;
+
+    localStorageManager.setItem({
+      key: STORAGE_KEY.station,
+      item: nextStations,
+    });
+  };
 
-      localStorageManager.setItem({
-        key: STORAGE_KEY.station,
-        item: nextStations,
-      });
+  this.setNextLines = (nextLines) => {
+    this.lines = nextLines;
 
+    localStorageManager.setItem({
+      key: STORAGE_KEY.line,
+      item: nextLines,
+    });
+  };
+
+  this.setState = ({ nextStations, nextLines }) => {
+    if (nextStations) {
+      this.setNextStations(nextStations);
       this.stationManager.setState({ nextStations: this.stations });
     }
+
+    if (nextLines) {
+      this.setNextLines(nextLines);
+      this.lineManager.setState({ nextLines: this.lines });
+    }
   };
 }
diff --git a/src/components/LineInput.js b/src/components/LineInput.js
index 26493a0fa..b132e8c7b 100644
--- a/src/components/LineInput.js
+++ b/src/components/LineInput.js
@@ -1,26 +1,31 @@
 import { isTextOverMinLength } from "../util/validation.js";
 import { ELEMENT_INFO, LINE_NAME_MIN_LENGTH, ERROR_MESSAGE } from "../util/constants.js";
 
-export default function LineInput({ $target, stations, isExistLineName }) {
+export default function LineInput({ $target, stations, isExistLineName, onAddLine }) {
   this.$container = document.createElement("form");
   $target.append(this.$container);
 
   this.stations = stations;
+  this.onAddLine = onAddLine;
 
   const { lineNameInput, lineStartStationSelector, lineEndStationSelector, lineAddButton } = ELEMENT_INFO;
 
-  this.bindOnSubmit = () => {
-    this.$container.addEventListener("submit", (e) => {
-      const $lineNameInput = document.querySelector(`#${lineNameInput.id}`);
-      const startStationName = document.querySelector(`#${lineStartStationSelector.id}`).value;
-      const endStationName = document.querySelector(`#${lineEndStationSelector.id}`).value;
+  this.$container.addEventListener("submit", (e) => {
+    const $lineNameInput = document.querySelector(`#${lineNameInput.id}`);
+    const startStationName = document.querySelector(`#${lineStartStationSelector.id}`).value;
+    const endStationName = document.querySelector(`#${lineEndStationSelector.id}`).value;
 
-      if (this.isValidInput({ $lineNameInput, startStationName, endStationName })) {
-      }
+    if (this.isValidInput({ $lineNameInput, startStationName, endStationName })) {
+      this.onAddLine({
+        name: $lineNameInput.value,
+        stations: [startStationName, endStationName],
+      });
 
-      e.preventDefault();
-    });
-  };
+      e.target.reset();
+    }
+
+    e.preventDefault();
+  });
 
   this.isValidInput = ({ $lineNameInput, startStationName, endStationName }) => {
     return (
@@ -83,5 +88,4 @@ export default function LineInput({ $target, stations, isExistLineName }) {
   };
 
   this.render();
-  this.bindOnSubmit();
 }
diff --git a/src/components/LineList.js b/src/components/LineList.js
index 5f625cb48..f3391248c 100644
--- a/src/components/LineList.js
+++ b/src/components/LineList.js
@@ -8,6 +8,11 @@ export default function LineList({ $target, lines }) {
 
   const { lineDeleteButton } = ELEMENT_INFO;
 
+  this.setState = ({ nextLines }) => {
+    this.lines = nextLines;
+    this.render();
+  };
+
   this.createTableRowHTMLString = (line) => {
     return `
       <tr>
diff --git a/src/components/LineManager.js b/src/components/LineManager.js
index c9afb92ae..906b5999f 100644
--- a/src/components/LineManager.js
+++ b/src/components/LineManager.js
@@ -1,7 +1,7 @@
 import LineInput from "./LineInput.js";
 import LineList from "./LineList.js";
 
-export default function LineManager({ $target, isShow, stations, lines }) {
+export default function LineManager({ $target, isShow, stations, lines, onAddLine }) {
   this.$container = document.createElement("div");
   this.$container.className = "line-manager";
   $target.append(this.$container);
@@ -22,6 +22,7 @@ export default function LineManager({ $target, isShow, stations, lines }) {
     $target: this.$container,
     stations: this.stations,
     isExistLineName: this.isExistLineName,
+    onAddLine,
   });
 
   this.lineList = new LineList({
@@ -29,11 +30,16 @@ export default function LineManager({ $target, isShow, stations, lines }) {
     lines: this.lines,
   });
 
-  this.setState = ({ nextIsShow }) => {
+  this.setState = ({ nextIsShow, nextLines }) => {
     if (nextIsShow !== undefined) {
       this.isShow = nextIsShow;
       this.render();
     }
+
+    if (nextLines) {
+      this.lines = nextLines;
+      this.lineList.setState({ nextLines: this.lines });
+    }
   };
 
   this.render = () => {

From a3b7ba355304e755a0162f56145de22b7dd4856b Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 18:06:36 +0900
Subject: [PATCH 27/41] Feat: delete line

---
 src/components/App.js         |  8 ++++++++
 src/components/LineList.js    | 18 ++++++++++++++----
 src/components/LineManager.js |  3 ++-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index b1682b48d..4e783614b 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -47,12 +47,20 @@ export default function App($app) {
     this.setState({ nextLines });
   };
 
+  this.onDeleteLine = (lineIndex) => {
+    const nextLines = [...this.lines];
+    nextLines.splice(lineIndex, 1);
+
+    this.setState({ nextLines });
+  };
+
   this.lineManager = new LineManager({
     $target: this.$main,
     isShow: true,
     stations: this.stations,
     lines: this.lines,
     onAddLine: this.onAddLine,
+    onDeleteLine: this.onDeleteLine,
   });
 
   this.setNextStations = (nextStations) => {
diff --git a/src/components/LineList.js b/src/components/LineList.js
index f3391248c..65f470cf5 100644
--- a/src/components/LineList.js
+++ b/src/components/LineList.js
@@ -1,26 +1,35 @@
 import { ELEMENT_INFO } from "../util/constants.js";
 
-export default function LineList({ $target, lines }) {
+export default function LineList({ $target, lines, onDeleteLine }) {
   this.$container = document.createElement("section");
   $target.append(this.$container);
 
   this.lines = lines;
+  this.onDeleteLine = onDeleteLine;
 
   const { lineDeleteButton } = ELEMENT_INFO;
 
+  this.bindOnDelete = () => {
+    this.$container.addEventListener("click", (e) => {
+      if (e.target.className === lineDeleteButton.className) {
+        this.onDeleteLine(e.target.dataset.lineIndex);
+      }
+    });
+  };
+
   this.setState = ({ nextLines }) => {
     this.lines = nextLines;
     this.render();
   };
 
-  this.createTableRowHTMLString = (line) => {
+  this.createTableRowHTMLString = (line, index) => {
     return `
       <tr>
         <td>${line.name}</td>
         <td>${line.stations[0]}</td>
         <td>${line.stations[line.stations.length - 1]}</td>
         <td>
-          <button data-line-name="${line.name}" class="${lineDeleteButton.className}">${lineDeleteButton.text}</button>
+          <button data-line-index="${index}" class="${lineDeleteButton.className}">${lineDeleteButton.text}</button>
         </td>
       </tr>
     `;
@@ -39,11 +48,12 @@ export default function LineList({ $target, lines }) {
           </tr>
         </thead>
         </tbody>
-          ${this.lines.map((line) => this.createTableRowHTMLString(line)).join("")}
+          ${this.lines.map((line, index) => this.createTableRowHTMLString(line, index)).join("")}
         </tbody>
       </table>
     `;
   };
 
   this.render();
+  this.bindOnDelete();
 }
diff --git a/src/components/LineManager.js b/src/components/LineManager.js
index 906b5999f..4f8b34f8c 100644
--- a/src/components/LineManager.js
+++ b/src/components/LineManager.js
@@ -1,7 +1,7 @@
 import LineInput from "./LineInput.js";
 import LineList from "./LineList.js";
 
-export default function LineManager({ $target, isShow, stations, lines, onAddLine }) {
+export default function LineManager({ $target, isShow, stations, lines, onAddLine, onDeleteLine }) {
   this.$container = document.createElement("div");
   this.$container.className = "line-manager";
   $target.append(this.$container);
@@ -28,6 +28,7 @@ export default function LineManager({ $target, isShow, stations, lines, onAddLin
   this.lineList = new LineList({
     $target: this.$container,
     lines: this.lines,
+    onDeleteLine,
   });
 
   this.setState = ({ nextIsShow, nextLines }) => {

From 99a8e63515301cd1a196c5481b5901e0a2500ea7 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 19:28:51 +0900
Subject: [PATCH 28/41] Add: SectionManager, LineSelector, SectionInpu and
 SectionList

---
 src/components/App.js            | 12 +++++--
 src/components/LineSelector.js   | 36 +++++++++++++++++++
 src/components/SectionInput.js   | 39 +++++++++++++++++++++
 src/components/SectionList.js    | 48 +++++++++++++++++++++++++
 src/components/SectionManager.js | 60 ++++++++++++++++++++++++++++++++
 src/util/constants.js            | 18 ++++++++++
 style.css                        | 14 ++++++++
 7 files changed, 225 insertions(+), 2 deletions(-)
 create mode 100644 src/components/LineSelector.js
 create mode 100644 src/components/SectionInput.js
 create mode 100644 src/components/SectionList.js
 create mode 100644 src/components/SectionManager.js

diff --git a/src/components/App.js b/src/components/App.js
index 4e783614b..abe27e12e 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,9 +1,10 @@
 import Header from "./Header.js";
 import Navigator from "./Navigator.js";
 import StationManager from "./StationManager.js";
+import LineManager from "./LineManager.js";
+import SectionManager from "./SectionManager.js";
 import localStorageManager from "../util/localStorage.js";
 import { STORAGE_KEY } from "../util/constants.js";
-import LineManager from "./LineManager.js";
 
 export default function App($app) {
   this.$app = $app;
@@ -56,13 +57,20 @@ export default function App($app) {
 
   this.lineManager = new LineManager({
     $target: this.$main,
-    isShow: true,
+    isShow: false,
     stations: this.stations,
     lines: this.lines,
     onAddLine: this.onAddLine,
     onDeleteLine: this.onDeleteLine,
   });
 
+  this.sectionManager = new SectionManager({
+    $target: this.$main,
+    isShow: true,
+    stations: this.stations,
+    lines: this.lines,
+  });
+
   this.setNextStations = (nextStations) => {
     this.stations = nextStations;
 
diff --git a/src/components/LineSelector.js b/src/components/LineSelector.js
new file mode 100644
index 000000000..900781342
--- /dev/null
+++ b/src/components/LineSelector.js
@@ -0,0 +1,36 @@
+import { ELEMENT_INFO } from "../util/constants.js";
+
+export default function LineSelector({ $target, lines, onChangeLine }) {
+  this.$container = document.createElement("section");
+  this.$container.className = "line-selector";
+  $target.append(this.$container);
+
+  this.lines = lines;
+  this.onChangeLine = onChangeLine;
+
+  const { sectionLineMenuButton } = ELEMENT_INFO;
+
+  this.bindOnClick = () => {
+    this.$container.addEventListener("click", (e) => {
+      if (e.target.className === sectionLineMenuButton.className) {
+        this.onChangeLine(e.target.dataset.lineIndex);
+      }
+    });
+  };
+
+  this.createLineList = (line, index) => {
+    return `<li><button data-line-index="${index}" class="${sectionLineMenuButton.className}">${line.name}</button></li>`;
+  };
+
+  this.render = () => {
+    this.$container.innerHTML = `
+      <h2>구간을 수정할 노선을 선택해주세요</h2>
+      <ul>
+        ${lines.map((line, index) => this.createLineList(line, index)).join("")}
+      </ul>
+    `;
+  };
+
+  this.render();
+  this.bindOnClick();
+}
diff --git a/src/components/SectionInput.js b/src/components/SectionInput.js
new file mode 100644
index 000000000..7b049a1f5
--- /dev/null
+++ b/src/components/SectionInput.js
@@ -0,0 +1,39 @@
+import { ELEMENT_INFO } from "../util/constants.js";
+
+export default function SectionInput({ $target, stations, selectedLineName }) {
+  this.$container = document.createElement("section");
+  this.$container.className = "section-input";
+  $target.append(this.$container);
+
+  this.stations = stations;
+  this.selectedLineName = selectedLineName;
+
+  const { sectionStationSelector, sectionOrderInput, sectionAddButton } = ELEMENT_INFO;
+
+  this.setState = (nextSelectedLineName) => {
+    this.selectedLineName = nextSelectedLineName;
+
+    this.render();
+  };
+
+  this.createSelectOptionHTMLString = () => {
+    return this.stations.map((station) => `<option value="${station}">${station}</option>`).join("");
+  };
+
+  this.render = () => {
+    this.$container.innerHTML =
+      this.selectedLineName !== ""
+        ? `
+            <h2>${selectedLineName} 관리</h2>
+            <form>
+              <h3>구간 등록</h3>
+              <select id="${sectionStationSelector.id}">${this.createSelectOptionHTMLString()}</select>
+              <input type="number" name="${sectionOrderInput.text}" placeholder="${sectionOrderInput.text}" />
+              <button id="${sectionAddButton.id}" type="submit">${sectionAddButton.text}</button>
+            </form>
+          `
+        : "";
+  };
+
+  this.render();
+}
diff --git a/src/components/SectionList.js b/src/components/SectionList.js
new file mode 100644
index 000000000..4c6075e37
--- /dev/null
+++ b/src/components/SectionList.js
@@ -0,0 +1,48 @@
+import { ELEMENT_INFO } from "../util/constants.js";
+
+export default function SectionList({ $target, stationsInSelectedLine }) {
+  this.$container = document.createElement("section");
+  $target.append(this.$container);
+
+  this.stationsInSelectedLine = stationsInSelectedLine;
+
+  const { sectionDeleteButton } = ELEMENT_INFO;
+
+  this.setState = (nextStationsInSelectedLine) => {
+    this.stationsInSelectedLine = nextStationsInSelectedLine;
+
+    this.render();
+  };
+
+  this.createTableRowHTMLString = (stationName, index) => {
+    return `
+      <tr>
+        <td>${index}</td>
+        <td>${stationName}</td>
+        <td><button class="${sectionDeleteButton.className}" data-station-index="${index}">${sectionDeleteButton.text}</button></td>
+      </tr>
+    `;
+  };
+
+  this.render = () => {
+    this.$container.innerHTML =
+      this.stationsInSelectedLine.length > 0
+        ? `<table>
+            <thead>
+              <tr>
+                <th>순서</th>
+                <th>이름</th>
+                <th>설정</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${this.stationsInSelectedLine
+                .map((stationName, index) => this.createTableRowHTMLString(stationName, index))
+                .join("")}
+            </tbody>
+          </table>`
+        : "";
+  };
+
+  this.render();
+}
diff --git a/src/components/SectionManager.js b/src/components/SectionManager.js
new file mode 100644
index 000000000..697aecf80
--- /dev/null
+++ b/src/components/SectionManager.js
@@ -0,0 +1,60 @@
+import LineSelector from "./LineSelector.js";
+import SectionInput from "./SectionInput.js";
+import SectionList from "./SectionList.js";
+
+export default function SectionManager({ $target, isShow, stations, lines }) {
+  this.$container = document.createElement("div");
+  this.$container.className = "section-manager";
+  $target.append(this.$container);
+
+  this.isShow = isShow;
+  this.stations = stations;
+  this.lines = lines;
+  this.selectedLineIndex = -1;
+
+  this.onChangeLine = (nextSelectedLineIndex) => {
+    this.setState({ nextSelectedLineIndex });
+  };
+
+  this.lineSelector = new LineSelector({
+    $target: this.$container,
+    lines: this.lines,
+    onChangeLine: this.onChangeLine,
+  });
+  this.sectionInput = new SectionInput({
+    $target: this.$container,
+    stations: this.stations,
+    selectedLineName: "",
+  });
+  this.sectionList = new SectionList({
+    $target: this.$container,
+    stationsInSelectedLine: [],
+  });
+
+  this.getSelectedLineName = () => {
+    return this.lines[this.selectedLineIndex].name;
+  };
+
+  this.getStationsInSelectedLine = () => {
+    return this.lines[this.selectedLineIndex].stations;
+  };
+
+  this.setState = ({ nextIsShow, nextSelectedLineIndex }) => {
+    if (nextIsShow !== undefined) {
+      this.isShow = nextIsShow;
+      this.render();
+    }
+
+    if (nextSelectedLineIndex) {
+      this.selectedLineIndex = nextSelectedLineIndex;
+      this.sectionInput.setState(this.getSelectedLineName());
+      this.sectionList.setState(this.getStationsInSelectedLine());
+    }
+  };
+
+  this.render = () => {
+    this.$container.style.display = this.isShow ? "block" : "none";
+  };
+
+  this.render();
+}
diff --git a/src/util/constants.js b/src/util/constants.js
index 168f2304a..78d5669fd 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -49,6 +49,24 @@ export const ELEMENT_INFO = {
     text: "삭제",
     className: "line-delete-button",
   },
+  sectionLineMenuButton: {
+    className: "section-line-menu-button",
+  },
+  sectionStationSelector: {
+    id: "section-station-selector",
+  },
+  sectionOrderInput: {
+    text: "순서",
+    id: "section-order-input",
+  },
+  sectionAddButton: {
+    text: "등록",
+    id: "section-add-button",
+  },
+  sectionDeleteButton: {
+    text: "노선에서 제거",
+    className: "section-delete-button",
+  },
 };
 
 export const STATION_NAME_MIN_LENGTH = 2;
diff --git a/style.css b/style.css
index 16faef592..703b63efc 100644
--- a/style.css
+++ b/style.css
@@ -9,6 +9,10 @@ nav li {
   margin-right: 10px;
 }
 
+section {
+  margin-bottom: 20px;
+}
+
 label {
   display: block;
 }
@@ -47,3 +51,13 @@ tr:last-child > td {
   height: 1px;
   overflow: hidden;
 }
+
+.line-selector li {
+  display: inline;
+  margin-right: 10px;
+}
+
+.section-input form > * {
+  margin-top: 0;
+  margin-bottom: 10px;
+}

From 4518bb06394b8dd70ea8306e0cce0d1d5603456f Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 19:31:56 +0900
Subject: [PATCH 29/41] Docs: update features of README.md

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index b33245cee..c71bde78c 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,6 @@
 
 - 구간 관리 화면을 구성한다.
 - 선택된 노선에 등록된 지하철 역을 조회한다.
-- 입력받은 구간 순서가 숫자인지 검사한다.
 - 입력받은 구간 순서가 자연수인지 검사한다.
 - 입력받은 구간 순서 숫자가 기존에 등록된 지하철 수를 초과하지 않는지 검사한다.
 - 노선에 새로운 구간을 등록한다.

From 426a516433c615242e6239bb064c3deebeea7767 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 20:07:54 +0900
Subject: [PATCH 30/41] Feat: check section order is natural number

---
 src/components/SectionInput.js | 39 ++++++++++++++++++++++++++++++----
 src/util/constants.js          |  1 +
 src/util/validation.js         |  4 ++++
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/components/SectionInput.js b/src/components/SectionInput.js
index 7b049a1f5..bfd820800 100644
--- a/src/components/SectionInput.js
+++ b/src/components/SectionInput.js
@@ -1,4 +1,5 @@
-import { ELEMENT_INFO } from "../util/constants.js";
+import { isNatureNumber } from "../util/validation.js";
+import { ELEMENT_INFO, ERROR_MESSAGE } from "../util/constants.js";
 
 export default function SectionInput({ $target, stations, selectedLineName }) {
   this.$container = document.createElement("section");
@@ -10,6 +11,33 @@ export default function SectionInput({ $target, stations, selectedLineName }) {
 
   const { sectionStationSelector, sectionOrderInput, sectionAddButton } = ELEMENT_INFO;
 
+  this.bindOnSubmit = () => {
+    this.$container.addEventListener("click", (e) => {
+      if (e.target.id === sectionAddButton.id) {
+        const sectionOrder = document.querySelector(`#${sectionOrderInput.id}`).value - 0;
+        const selectedStation = document.querySelector(`#${sectionStationSelector.id}`).value;
+
+        if (this.isValideInput(sectionOrder, selectedStation)) {
+          // TODO: 구간 추가하기
+        }
+      }
+    });
+  };
+
+  this.isValideInput = (sectionOrder, selectedStation) => {
+    return this.isNatureNumber(sectionOrder);
+  };
+
+  this.isNatureNumber = (sectionOrder) => {
+    const result = isNatureNumber(sectionOrder);
+
+    if (!result) {
+      alert(ERROR_MESSAGE.notNatureNumberSectionOrder);
+    }
+
+    return result;
+  };
+
   this.setState = (nextSelectedLineName) => {
     this.selectedLineName = nextSelectedLineName;
 
@@ -24,16 +52,19 @@ export default function SectionInput({ $target, stations, selectedLineName }) {
     this.$container.innerHTML =
       this.selectedLineName !== ""
         ? `
-            <h2>${selectedLineName} 관리</h2>
+            <h2>${this.selectedLineName} 관리</h2>
             <form>
               <h3>구간 등록</h3>
               <select id="${sectionStationSelector.id}">${this.createSelectOptionHTMLString()}</select>
-              <input type="number" name="${sectionOrderInput.text}" placeholder="${sectionOrderInput.text}" />
-              <button id="${sectionAddButton.id}" type="submit">${sectionAddButton.text}</button>
+              <input id="${sectionOrderInput.id}" type="number" name="${sectionOrderInput.text}" placeholder="${
+            sectionOrderInput.text
+          }" />
+              <button id="${sectionAddButton.id}" type="button">${sectionAddButton.text}</button>
             </form>
           `
         : "";
   };
 
   this.render();
+  this.bindOnSubmit();
 }
diff --git a/src/util/constants.js b/src/util/constants.js
index 78d5669fd..e12a6189d 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -80,6 +80,7 @@ export const ERROR_MESSAGE = {
   shortLineName: `⚠ ${LINE_NAME_MIN_LENGTH}자 이상의 노선 이름을 입력해주세요.`,
   duplicatedLineName: "⚠ 이미 존재하는 노선 이름입니다.",
   sameStartAndEndStation: "⚠ 상행 종점역과 하행 종점역은 같을 수 없습니다.",
+  notNatureNumberSectionOrder: "⚠ 구간 순서는 소수나 음수가 될 수 없습니다. 자연수를 입력해주세요.",
 };
 
 export const STORAGE_KEY = {
diff --git a/src/util/validation.js b/src/util/validation.js
index 1a4b7f8d9..77d6614b2 100644
--- a/src/util/validation.js
+++ b/src/util/validation.js
@@ -1,3 +1,7 @@
 export const isTextOverMinLength = (text, minLength) => {
   return text.trim().length >= minLength ? true : false;
 };
+
+export const isNatureNumber = (num) => {
+  return Number.isInteger(num) && num > 0 ? true : false;
+};

From d2dccfc9003957e30830539206675d69c69da1d7 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 20:19:18 +0900
Subject: [PATCH 31/41] Feat: check section order is over stations length

---
 src/components/SectionInput.js   | 19 ++++++++++++++++---
 src/components/SectionManager.js |  3 ++-
 src/util/constants.js            |  1 +
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/SectionInput.js b/src/components/SectionInput.js
index bfd820800..39b5fd458 100644
--- a/src/components/SectionInput.js
+++ b/src/components/SectionInput.js
@@ -1,23 +1,25 @@
 import { isNatureNumber } from "../util/validation.js";
 import { ELEMENT_INFO, ERROR_MESSAGE } from "../util/constants.js";
 
-export default function SectionInput({ $target, stations, selectedLineName }) {
+export default function SectionInput({ $target, stations, selectedLineName, stationsInSelectedLine }) {
   this.$container = document.createElement("section");
   this.$container.className = "section-input";
   $target.append(this.$container);
 
   this.stations = stations;
   this.selectedLineName = selectedLineName;
+  this.stationsInSelectedLine = stationsInSelectedLine;
 
   const { sectionStationSelector, sectionOrderInput, sectionAddButton } = ELEMENT_INFO;
 
   this.bindOnSubmit = () => {
     this.$container.addEventListener("click", (e) => {
       if (e.target.id === sectionAddButton.id) {
-        const sectionOrder = document.querySelector(`#${sectionOrderInput.id}`).value - 0;
         const selectedStation = document.querySelector(`#${sectionStationSelector.id}`).value;
+        let sectionOrder = document.querySelector(`#${sectionOrderInput.id}`).value - 0;
 
         if (this.isValideInput(sectionOrder, selectedStation)) {
+          sectionOrder = this.checkOverStationsLength(sectionOrder);
           // TODO: 구간 추가하기
         }
       }
@@ -38,8 +40,19 @@ export default function SectionInput({ $target, stations, selectedLineName }) {
     return result;
   };
 
-  this.setState = (nextSelectedLineName) => {
+  this.checkOverStationsLength = (sectionOrder) => {
+    if (sectionOrder > this.stationsInSelectedLine.length) {
+      alert(ERROR_MESSAGE.overStationsLength);
+
+      return this.stationsInSelectedLine.length;
+    }
+
+    return sectionOrder;
+  };
+
+  this.setState = (nextSelectedLineName, nextStationsInSelectedLine) => {
     this.selectedLineName = nextSelectedLineName;
+    this.stationsInSelectedLine = nextStationsInSelectedLine;
 
     this.render();
   };
diff --git a/src/components/SectionManager.js b/src/components/SectionManager.js
index 697aecf80..23f13c13f 100644
--- a/src/components/SectionManager.js
+++ b/src/components/SectionManager.js
@@ -25,6 +25,7 @@ export default function SectionManager({ $target, isShow, stations, lines }) {
     $target: this.$container,
     stations: this.stations,
     selectedLineName: "",
+    stationsInSelectedLine: [],
   });
   this.sectionList = new SectionList({
     $target: this.$container,
@@ -47,7 +48,7 @@ export default function SectionManager({ $target, isShow, stations, lines }) {
 
     if (nextSelectedLineIndex) {
       this.selectedLineIndex = nextSelectedLineIndex;
-      this.sectionInput.setState(this.getSelectedLineName());
+      this.sectionInput.setState(this.getSelectedLineName(), this.getStationsInSelectedLine());
       this.sectionList.setState(this.getStationsInSelectedLine());
     }
   };
diff --git a/src/util/constants.js b/src/util/constants.js
index e12a6189d..76e9e9ba1 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -81,6 +81,7 @@ export const ERROR_MESSAGE = {
   duplicatedLineName: "⚠ 이미 존재하는 노선 이름입니다.",
   sameStartAndEndStation: "⚠ 상행 종점역과 하행 종점역은 같을 수 없습니다.",
   notNatureNumberSectionOrder: "⚠ 구간 순서는 소수나 음수가 될 수 없습니다. 자연수를 입력해주세요.",
+  overStationsLength: "⚠ 입력된 숫자가 기존 구간의 개수를 넘습니다. 이 노선의 마지막 순서로 구간을 등록합니다.",
 };
 
 export const STORAGE_KEY = {

From 9a4559ab53b079808b0c0d95c809774f6de07069 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 20:24:20 +0900
Subject: [PATCH 32/41] Feat: remove existing stations in line from select
 option

---
 src/components/SectionInput.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/SectionInput.js b/src/components/SectionInput.js
index 39b5fd458..e851694dd 100644
--- a/src/components/SectionInput.js
+++ b/src/components/SectionInput.js
@@ -58,7 +58,11 @@ export default function SectionInput({ $target, stations, selectedLineName, stat
   };
 
   this.createSelectOptionHTMLString = () => {
-    return this.stations.map((station) => `<option value="${station}">${station}</option>`).join("");
+    return this.stations
+      .map((station) =>
+        this.stationsInSelectedLine.includes(station) ? "" : `<option value="${station}">${station}</option>`
+      )
+      .join("");
   };
 
   this.render = () => {

From 8914c54002f0c0dfff9b1d2284baa1aef4b2f2ea Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 20:26:11 +0900
Subject: [PATCH 33/41] Refactor: remove useless function

---
 README.md                      | 1 +
 src/components/SectionInput.js | 6 +-----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index c71bde78c..6ad269574 100644
--- a/README.md
+++ b/README.md
@@ -32,6 +32,7 @@
 
 - 구간 관리 화면을 구성한다.
 - 선택된 노선에 등록된 지하철 역을 조회한다.
+- 구간 등록 시 이미 등록된 역은 옵션에 포함하지 않는다.
 - 입력받은 구간 순서가 자연수인지 검사한다.
 - 입력받은 구간 순서 숫자가 기존에 등록된 지하철 수를 초과하지 않는지 검사한다.
 - 노선에 새로운 구간을 등록한다.
diff --git a/src/components/SectionInput.js b/src/components/SectionInput.js
index e851694dd..6bc0dddda 100644
--- a/src/components/SectionInput.js
+++ b/src/components/SectionInput.js
@@ -18,7 +18,7 @@ export default function SectionInput({ $target, stations, selectedLineName, stat
         const selectedStation = document.querySelector(`#${sectionStationSelector.id}`).value;
         let sectionOrder = document.querySelector(`#${sectionOrderInput.id}`).value - 0;
 
-        if (this.isValideInput(sectionOrder, selectedStation)) {
+        if (this.isNatureNumber(sectionOrder)) {
           sectionOrder = this.checkOverStationsLength(sectionOrder);
           // TODO: 구간 추가하기
         }
@@ -26,10 +26,6 @@ export default function SectionInput({ $target, stations, selectedLineName, stat
     });
   };
 
-  this.isValideInput = (sectionOrder, selectedStation) => {
-    return this.isNatureNumber(sectionOrder);
-  };
-
   this.isNatureNumber = (sectionOrder) => {
     const result = isNatureNumber(sectionOrder);
 

From a352357ef293b197886b0b5ae5defa01674d8843 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 21:01:11 +0900
Subject: [PATCH 34/41] Feat: add section in line

---
 src/components/App.js            |  9 +++++++++
 src/components/SectionInput.js   |  4 ++--
 src/components/SectionManager.js | 33 +++++++++++++++++++++++++++-----
 3 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index abe27e12e..5aabb472e 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -64,11 +64,19 @@ export default function App($app) {
     onDeleteLine: this.onDeleteLine,
   });
 
+  this.onAddSection = (lineIndex, nextStations) => {
+    const nextLines = [...this.lines];
+    nextLines.splice(lineIndex, 1, { ...nextLines[lineIndex], stations: nextStations });
+
+    this.setState({ nextLines });
+  };
+
   this.sectionManager = new SectionManager({
     $target: this.$main,
     isShow: true,
     stations: this.stations,
     lines: this.lines,
+    onAddSection: this.onAddSection,
   });
 
   this.setNextStations = (nextStations) => {
@@ -98,6 +106,7 @@ export default function App($app) {
     if (nextLines) {
       this.setNextLines(nextLines);
       this.lineManager.setState({ nextLines: this.lines });
+      this.sectionManager.setState({ nextLines: this.lines });
     }
   };
 }
diff --git a/src/components/SectionInput.js b/src/components/SectionInput.js
index 6bc0dddda..b74d07b20 100644
--- a/src/components/SectionInput.js
+++ b/src/components/SectionInput.js
@@ -1,7 +1,7 @@
 import { isNatureNumber } from "../util/validation.js";
 import { ELEMENT_INFO, ERROR_MESSAGE } from "../util/constants.js";
 
-export default function SectionInput({ $target, stations, selectedLineName, stationsInSelectedLine }) {
+export default function SectionInput({ $target, stations, selectedLineName, stationsInSelectedLine, onAddSection }) {
   this.$container = document.createElement("section");
   this.$container.className = "section-input";
   $target.append(this.$container);
@@ -20,7 +20,7 @@ export default function SectionInput({ $target, stations, selectedLineName, stat
 
         if (this.isNatureNumber(sectionOrder)) {
           sectionOrder = this.checkOverStationsLength(sectionOrder);
-          // TODO: 구간 추가하기
+          onAddSection(selectedStation, sectionOrder);
         }
       }
     });
diff --git a/src/components/SectionManager.js b/src/components/SectionManager.js
index 23f13c13f..ce14ccc1a 100644
--- a/src/components/SectionManager.js
+++ b/src/components/SectionManager.js
@@ -2,7 +2,7 @@ import LineSelector from "./LineSelector.js";
 import SectionInput from "./SectionInput.js";
 import SectionList from "./SectionList.js";
 
-export default function SectionManager({ $target, isShow, stations, lines }) {
+export default function SectionManager({ $target, isShow, stations, lines, onAddSection }) {
   this.$container = document.createElement("div");
   this.$container.className = "section-manager";
   $target.append(this.$container);
@@ -21,11 +21,20 @@ export default function SectionManager({ $target, isShow, stations, lines }) {
     lines: this.lines,
     onChangeLine: this.onChangeLine,
   });
+
+  this.onAddSection = (selectedStation, sectionOrder) => {
+    const nextStations = [...this.lines[this.selectedLineIndex].stations];
+    nextStations.splice(sectionOrder, 0, selectedStation);
+
+    onAddSection(this.selectedLineIndex, nextStations);
+  };
+
   this.sectionInput = new SectionInput({
     $target: this.$container,
     stations: this.stations,
     selectedLineName: "",
     stationsInSelectedLine: [],
+    onAddSection: this.onAddSection,
   });
   this.sectionList = new SectionList({
     $target: this.$container,
@@ -40,16 +49,30 @@ export default function SectionManager({ $target, isShow, stations, lines }) {
     return this.lines[this.selectedLineIndex].stations;
   };
 
-  this.setState = ({ nextIsShow, nextSelectedLineIndex }) => {
+  this.setNextLines = (nextLines) => {
+    this.lines = nextLines;
+    this.sectionInput.setState(this.getSelectedLineName(), this.getStationsInSelectedLine());
+    this.sectionList.setState(this.getStationsInSelectedLine());
+  };
+
+  this.setNextSelectedLineIndex = (nextSelectedLineIndex) => {
+    this.selectedLineIndex = nextSelectedLineIndex;
+    this.sectionInput.setState(this.getSelectedLineName(), this.getStationsInSelectedLine());
+    this.sectionList.setState(this.getStationsInSelectedLine());
+  };
+
+  this.setState = ({ nextIsShow, nextLines, nextSelectedLineIndex }) => {
     if (nextIsShow !== undefined) {
       this.isShow = nextIsShow;
       this.render();
     }
 
+    if (nextLines) {
+      this.setNextLines(nextLines);
+    }
+
     if (nextSelectedLineIndex) {
-      this.selectedLineIndex = nextSelectedLineIndex;
-      this.sectionInput.setState(this.getSelectedLineName(), this.getStationsInSelectedLine());
-      this.sectionList.setState(this.getStationsInSelectedLine());
+      this.setNextSelectedLineIndex(nextSelectedLineIndex);
     }
   };
 

From 94471baaa4549014e20394adf13ba86f92063858 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 21:07:39 +0900
Subject: [PATCH 35/41] Feat: check possible to delete section

---
 src/components/SectionList.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/SectionList.js b/src/components/SectionList.js
index 4c6075e37..3d692d20f 100644
--- a/src/components/SectionList.js
+++ b/src/components/SectionList.js
@@ -8,6 +8,18 @@ export default function SectionList({ $target, stationsInSelectedLine }) {
 
   const { sectionDeleteButton } = ELEMENT_INFO;
 
+  this.bindOnDelete = () => {
+    this.$container.addEventListener("click", (e) => {
+      if (e.target.className === sectionDeleteButton.className) {
+        console.log(this.isPossibleToDelete());
+      }
+    });
+  };
+
+  this.isPossibleToDelete = () => {
+    return this.stationsInSelectedLine.length > 2 ? true : false;
+  };
+
   this.setState = (nextStationsInSelectedLine) => {
     this.stationsInSelectedLine = nextStationsInSelectedLine;
 
@@ -45,4 +57,5 @@ export default function SectionList({ $target, stationsInSelectedLine }) {
   };
 
   this.render();
+  this.bindOnDelete();
 }

From c9be8251e996a2d6632aaabe5e688fa5644df676 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 21:16:45 +0900
Subject: [PATCH 36/41] Feat: delete section

---
 src/components/App.js            |  4 ++--
 src/components/SectionList.js    | 17 ++++++++++++-----
 src/components/SectionManager.js | 13 +++++++++++--
 src/util/constants.js            |  1 +
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 5aabb472e..ec7bae589 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -64,7 +64,7 @@ export default function App($app) {
     onDeleteLine: this.onDeleteLine,
   });
 
-  this.onAddSection = (lineIndex, nextStations) => {
+  this.updateSection = (lineIndex, nextStations) => {
     const nextLines = [...this.lines];
     nextLines.splice(lineIndex, 1, { ...nextLines[lineIndex], stations: nextStations });
 
@@ -76,7 +76,7 @@ export default function App($app) {
     isShow: true,
     stations: this.stations,
     lines: this.lines,
-    onAddSection: this.onAddSection,
+    updateSection: this.updateSection,
   });
 
   this.setNextStations = (nextStations) => {
diff --git a/src/components/SectionList.js b/src/components/SectionList.js
index 3d692d20f..18d60278d 100644
--- a/src/components/SectionList.js
+++ b/src/components/SectionList.js
@@ -1,23 +1,30 @@
-import { ELEMENT_INFO } from "../util/constants.js";
+import { ELEMENT_INFO, ERROR_MESSAGE } from "../util/constants.js";
 
-export default function SectionList({ $target, stationsInSelectedLine }) {
+export default function SectionList({ $target, stationsInSelectedLine, onDeleteSection }) {
   this.$container = document.createElement("section");
   $target.append(this.$container);
 
   this.stationsInSelectedLine = stationsInSelectedLine;
+  this.onDeleteSection = onDeleteSection;
 
   const { sectionDeleteButton } = ELEMENT_INFO;
 
   this.bindOnDelete = () => {
     this.$container.addEventListener("click", (e) => {
-      if (e.target.className === sectionDeleteButton.className) {
-        console.log(this.isPossibleToDelete());
+      if (e.target.className === sectionDeleteButton.className && this.isPossibleToDelete()) {
+        this.onDeleteSection(e.target.dataset.stationIndex);
       }
     });
   };
 
   this.isPossibleToDelete = () => {
-    return this.stationsInSelectedLine.length > 2 ? true : false;
+    const result = this.stationsInSelectedLine.length > 2 ? true : false;
+
+    if (!result) {
+      alert(ERROR_MESSAGE.notPossibleToDeleteSection);
+    }
+
+    return result;
   };
 
   this.setState = (nextStationsInSelectedLine) => {
diff --git a/src/components/SectionManager.js b/src/components/SectionManager.js
index ce14ccc1a..1dc1d18fc 100644
--- a/src/components/SectionManager.js
+++ b/src/components/SectionManager.js
@@ -2,7 +2,7 @@ import LineSelector from "./LineSelector.js";
 import SectionInput from "./SectionInput.js";
 import SectionList from "./SectionList.js";
 
-export default function SectionManager({ $target, isShow, stations, lines, onAddSection }) {
+export default function SectionManager({ $target, isShow, stations, lines, updateSection }) {
   this.$container = document.createElement("div");
   this.$container.className = "section-manager";
   $target.append(this.$container);
@@ -26,7 +26,7 @@ export default function SectionManager({ $target, isShow, stations, lines, onAdd
     const nextStations = [...this.lines[this.selectedLineIndex].stations];
     nextStations.splice(sectionOrder, 0, selectedStation);
 
-    onAddSection(this.selectedLineIndex, nextStations);
+    updateSection(this.selectedLineIndex, nextStations);
   };
 
   this.sectionInput = new SectionInput({
@@ -36,9 +36,18 @@ export default function SectionManager({ $target, isShow, stations, lines, onAdd
     stationsInSelectedLine: [],
     onAddSection: this.onAddSection,
   });
+
+  this.onDeleteSection = (selectedStationIndex) => {
+    const nextStations = [...this.lines[this.selectedLineIndex].stations];
+    nextStations.splice(selectedStationIndex, 1);
+
+    updateSection(this.selectedLineIndex, nextStations);
+  };
+
   this.sectionList = new SectionList({
     $target: this.$container,
     stationsInSelectedLine: [],
+    onDeleteSection: this.onDeleteSection,
   });
 
   this.getSelectedLineName = () => {
diff --git a/src/util/constants.js b/src/util/constants.js
index 76e9e9ba1..f079e38d7 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -82,6 +82,7 @@ export const ERROR_MESSAGE = {
   sameStartAndEndStation: "⚠ 상행 종점역과 하행 종점역은 같을 수 없습니다.",
   notNatureNumberSectionOrder: "⚠ 구간 순서는 소수나 음수가 될 수 없습니다. 자연수를 입력해주세요.",
   overStationsLength: "⚠ 입력된 숫자가 기존 구간의 개수를 넘습니다. 이 노선의 마지막 순서로 구간을 등록합니다.",
+  notPossibleToDeleteSection: "⚠ 노선 내에 역의 개수가 2개 이하이면 노선에서 구간을 제거할 수 없습니다.",
 };
 
 export const STORAGE_KEY = {

From 8e51cdaa20cd9079d5dc16d16aa8a995b424760c Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 21:20:01 +0900
Subject: [PATCH 37/41] Refactor: change constants position to top of component

---
 src/components/LineInput.js        | 4 ++--
 src/components/LineList.js         | 4 ++--
 src/components/LineSelector.js     | 4 ++--
 src/components/Navigator.js        | 4 ++--
 src/components/SectionInput.js     | 4 ++--
 src/components/SectionList.js      | 4 ++--
 src/components/StationList.js      | 4 ++--
 src/components/StationNameInput.js | 4 ++--
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/LineInput.js b/src/components/LineInput.js
index b132e8c7b..18eb35ad9 100644
--- a/src/components/LineInput.js
+++ b/src/components/LineInput.js
@@ -2,14 +2,14 @@ import { isTextOverMinLength } from "../util/validation.js";
 import { ELEMENT_INFO, LINE_NAME_MIN_LENGTH, ERROR_MESSAGE } from "../util/constants.js";
 
 export default function LineInput({ $target, stations, isExistLineName, onAddLine }) {
+  const { lineNameInput, lineStartStationSelector, lineEndStationSelector, lineAddButton } = ELEMENT_INFO;
+
   this.$container = document.createElement("form");
   $target.append(this.$container);
 
   this.stations = stations;
   this.onAddLine = onAddLine;
 
-  const { lineNameInput, lineStartStationSelector, lineEndStationSelector, lineAddButton } = ELEMENT_INFO;
-
   this.$container.addEventListener("submit", (e) => {
     const $lineNameInput = document.querySelector(`#${lineNameInput.id}`);
     const startStationName = document.querySelector(`#${lineStartStationSelector.id}`).value;
diff --git a/src/components/LineList.js b/src/components/LineList.js
index 65f470cf5..3e1746458 100644
--- a/src/components/LineList.js
+++ b/src/components/LineList.js
@@ -1,14 +1,14 @@
 import { ELEMENT_INFO } from "../util/constants.js";
 
 export default function LineList({ $target, lines, onDeleteLine }) {
+  const { lineDeleteButton } = ELEMENT_INFO;
+
   this.$container = document.createElement("section");
   $target.append(this.$container);
 
   this.lines = lines;
   this.onDeleteLine = onDeleteLine;
 
-  const { lineDeleteButton } = ELEMENT_INFO;
-
   this.bindOnDelete = () => {
     this.$container.addEventListener("click", (e) => {
       if (e.target.className === lineDeleteButton.className) {
diff --git a/src/components/LineSelector.js b/src/components/LineSelector.js
index 900781342..6a7aec221 100644
--- a/src/components/LineSelector.js
+++ b/src/components/LineSelector.js
@@ -1,6 +1,8 @@
 import { ELEMENT_INFO } from "../util/constants.js";
 
 export default function LineSelector({ $target, lines, onChangeLine }) {
+  const { sectionLineMenuButton } = ELEMENT_INFO;
+
   this.$container = document.createElement("section");
   this.$container.className = "line-selector";
   $target.append(this.$container);
@@ -8,8 +10,6 @@ export default function LineSelector({ $target, lines, onChangeLine }) {
   this.lines = lines;
   this.onChangeLine = onChangeLine;
 
-  const { sectionLineMenuButton } = ELEMENT_INFO;
-
   this.bindOnClick = () => {
     this.$container.addEventListener("click", (e) => {
       if (e.target.className === sectionLineMenuButton.className) {
diff --git a/src/components/Navigator.js b/src/components/Navigator.js
index 7538b23a3..943fffd24 100644
--- a/src/components/Navigator.js
+++ b/src/components/Navigator.js
@@ -1,10 +1,10 @@
 import { ELEMENT_INFO } from "../util/constants.js";
 
 export default function Navigator({ $target }) {
-  this.$target = $target;
-
   const { navigator: navInfo } = ELEMENT_INFO;
 
+  this.$target = $target;
+
   this.render = () => {
     const HTMLString = `
       <nav>
diff --git a/src/components/SectionInput.js b/src/components/SectionInput.js
index b74d07b20..12d7f2425 100644
--- a/src/components/SectionInput.js
+++ b/src/components/SectionInput.js
@@ -2,6 +2,8 @@ import { isNatureNumber } from "../util/validation.js";
 import { ELEMENT_INFO, ERROR_MESSAGE } from "../util/constants.js";
 
 export default function SectionInput({ $target, stations, selectedLineName, stationsInSelectedLine, onAddSection }) {
+  const { sectionStationSelector, sectionOrderInput, sectionAddButton } = ELEMENT_INFO;
+
   this.$container = document.createElement("section");
   this.$container.className = "section-input";
   $target.append(this.$container);
@@ -10,8 +12,6 @@ export default function SectionInput({ $target, stations, selectedLineName, stat
   this.selectedLineName = selectedLineName;
   this.stationsInSelectedLine = stationsInSelectedLine;
 
-  const { sectionStationSelector, sectionOrderInput, sectionAddButton } = ELEMENT_INFO;
-
   this.bindOnSubmit = () => {
     this.$container.addEventListener("click", (e) => {
       if (e.target.id === sectionAddButton.id) {
diff --git a/src/components/SectionList.js b/src/components/SectionList.js
index 18d60278d..84a3334fa 100644
--- a/src/components/SectionList.js
+++ b/src/components/SectionList.js
@@ -1,14 +1,14 @@
 import { ELEMENT_INFO, ERROR_MESSAGE } from "../util/constants.js";
 
 export default function SectionList({ $target, stationsInSelectedLine, onDeleteSection }) {
+  const { sectionDeleteButton } = ELEMENT_INFO;
+
   this.$container = document.createElement("section");
   $target.append(this.$container);
 
   this.stationsInSelectedLine = stationsInSelectedLine;
   this.onDeleteSection = onDeleteSection;
 
-  const { sectionDeleteButton } = ELEMENT_INFO;
-
   this.bindOnDelete = () => {
     this.$container.addEventListener("click", (e) => {
       if (e.target.className === sectionDeleteButton.className && this.isPossibleToDelete()) {
diff --git a/src/components/StationList.js b/src/components/StationList.js
index c6b11a960..c7968f1db 100644
--- a/src/components/StationList.js
+++ b/src/components/StationList.js
@@ -1,14 +1,14 @@
 import { ELEMENT_INFO } from "../util/constants.js";
 
 export default function StationList({ $target, stations, onDeleteStation }) {
+  const { stationDeleteButton } = ELEMENT_INFO;
+
   this.$container = document.createElement("section");
   $target.append(this.$container);
 
   this.stations = stations;
   this.onDeleteStation = onDeleteStation;
 
-  const { stationDeleteButton } = ELEMENT_INFO;
-
   this.bindOnDelete = () => {
     this.$container.addEventListener("click", (e) => {
       if (e.target.className === stationDeleteButton.className) {
diff --git a/src/components/StationNameInput.js b/src/components/StationNameInput.js
index 228a87ee3..ab9b9a925 100644
--- a/src/components/StationNameInput.js
+++ b/src/components/StationNameInput.js
@@ -2,14 +2,14 @@ import { isTextOverMinLength } from "../util/validation.js";
 import { ELEMENT_INFO, STATION_NAME_MIN_LENGTH, ERROR_MESSAGE } from "../util/constants.js";
 
 export default function StationNameInput({ $target, isExistStationName, onAddStation }) {
+  const { stationNameInput, stationNameSubmit } = ELEMENT_INFO;
+
   this.$container = document.createElement("form");
   $target.append(this.$container);
 
   this.isExistStationName = isExistStationName;
   this.onAddStation = onAddStation;
 
-  const { stationNameInput, stationNameSubmit } = ELEMENT_INFO;
-
   this.bindOnSubmit = () => {
     this.$container.addEventListener("submit", (e) => {
       const $stationNameInput = document.querySelector(`#${stationNameInput.id}`);

From e2d70d017171fe34d7bc9ccb891e949f9ce4dc3a Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 21:53:43 +0900
Subject: [PATCH 38/41] Feat: change page with nav buttons

---
 src/components/App.js            | 24 +++++++++++++++++++++---
 src/components/LineInput.js      |  6 ++++++
 src/components/LineManager.js    |  8 ++++++--
 src/components/Navigator.js      | 27 +++++++++++++++++----------
 src/components/SectionInput.js   | 14 +++++++++-----
 src/components/SectionManager.js | 27 ++++++++++++++-------------
 src/components/StationManager.js |  3 ++-
 7 files changed, 75 insertions(+), 34 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index ec7bae589..d29f69f71 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -4,12 +4,27 @@ import StationManager from "./StationManager.js";
 import LineManager from "./LineManager.js";
 import SectionManager from "./SectionManager.js";
 import localStorageManager from "../util/localStorage.js";
-import { STORAGE_KEY } from "../util/constants.js";
+import { ELEMENT_INFO, STORAGE_KEY } from "../util/constants.js";
 
 export default function App($app) {
   this.$app = $app;
   this.header = new Header({ $target: this.$app });
-  this.navigator = new Navigator({ $target: this.$app });
+
+  this.positionId = "";
+
+  this.onTogglePosition = (nextPositionId) => {
+    this.stationManager.setState({ nextIsShow: nextPositionId === this.stationManager.id });
+    this.lineManager.setState({ nextIsShow: nextPositionId === this.lineManager.id, nextStations: this.stations });
+    this.sectionManager.setState({
+      nextIsShow: nextPositionId === this.sectionManager.id,
+      nextStations: this.stations,
+    });
+  };
+
+  this.navigator = new Navigator({
+    $target: this.$app,
+    onTogglePosition: this.onTogglePosition,
+  });
 
   this.$main = document.createElement("main");
   this.$app.append(this.$main);
@@ -36,6 +51,7 @@ export default function App($app) {
   };
 
   this.stationManager = new StationManager({
+    id: ELEMENT_INFO.navigator[0].id,
     $target: this.$main,
     stations: this.stations,
     isShow: false,
@@ -56,6 +72,7 @@ export default function App($app) {
   };
 
   this.lineManager = new LineManager({
+    id: ELEMENT_INFO.navigator[1].id,
     $target: this.$main,
     isShow: false,
     stations: this.stations,
@@ -72,8 +89,9 @@ export default function App($app) {
   };
 
   this.sectionManager = new SectionManager({
+    id: ELEMENT_INFO.navigator[2].id,
     $target: this.$main,
-    isShow: true,
+    isShow: false,
     stations: this.stations,
     lines: this.lines,
     updateSection: this.updateSection,
diff --git a/src/components/LineInput.js b/src/components/LineInput.js
index 18eb35ad9..24b36ebb9 100644
--- a/src/components/LineInput.js
+++ b/src/components/LineInput.js
@@ -67,6 +67,12 @@ export default function LineInput({ $target, stations, isExistLineName, onAddLin
     return false;
   };
 
+  this.setState = ({ nextStations }) => {
+    this.stations = nextStations;
+
+    this.render();
+  };
+
   this.createSelectOptionHTMLString = () => {
     return this.stations.map((station) => `<option value="${station}">${station}</option>`).join("");
   };
diff --git a/src/components/LineManager.js b/src/components/LineManager.js
index 4f8b34f8c..573bbd798 100644
--- a/src/components/LineManager.js
+++ b/src/components/LineManager.js
@@ -1,11 +1,12 @@
 import LineInput from "./LineInput.js";
 import LineList from "./LineList.js";
 
-export default function LineManager({ $target, isShow, stations, lines, onAddLine, onDeleteLine }) {
+export default function LineManager({ id, $target, isShow, stations, lines, onAddLine, onDeleteLine }) {
   this.$container = document.createElement("div");
   this.$container.className = "line-manager";
   $target.append(this.$container);
 
+  this.id = id;
   this.isShow = isShow;
   this.stations = stations;
   this.lines = lines;
@@ -31,9 +32,12 @@ export default function LineManager({ $target, isShow, stations, lines, onAddLin
     onDeleteLine,
   });
 
-  this.setState = ({ nextIsShow, nextLines }) => {
+  this.setState = ({ nextIsShow, nextStations, nextLines }) => {
     if (nextIsShow !== undefined) {
       this.isShow = nextIsShow;
+      this.stations = nextStations;
+      this.lineInput.setState({ nextStations });
+
       this.render();
     }
 
diff --git a/src/components/Navigator.js b/src/components/Navigator.js
index 943fffd24..c3e6b0766 100644
--- a/src/components/Navigator.js
+++ b/src/components/Navigator.js
@@ -1,21 +1,28 @@
 import { ELEMENT_INFO } from "../util/constants.js";
 
-export default function Navigator({ $target }) {
+export default function Navigator({ $target, onTogglePosition }) {
   const { navigator: navInfo } = ELEMENT_INFO;
 
-  this.$target = $target;
+  this.onTogglePosition = onTogglePosition;
+  this.$container = document.createElement("nav");
+  $target.append(this.$container);
+
+  this.bindOnClick = () => {
+    this.$container.addEventListener("click", (e) => {
+      if (e.target.tagName === "BUTTON") {
+        this.onTogglePosition(e.target.id);
+      }
+    });
+  };
 
   this.render = () => {
-    const HTMLString = `
-      <nav>
-        <ol>
-          ${navInfo.map((nav, index) => `<li><button id="${nav.id}">${index + 1}. ${nav.text}</button></li>`).join("")}
-        </ol>
-      </nav>
+    this.$container.innerHTML = `
+      <ol>
+        ${navInfo.map((nav, index) => `<li><button id="${nav.id}">${index + 1}. ${nav.text}</button></li>`).join("")}
+      </ol>
     `;
-
-    this.$target.insertAdjacentHTML("beforeend", HTMLString);
   };
 
   this.render();
+  this.bindOnClick();
 }
diff --git a/src/components/SectionInput.js b/src/components/SectionInput.js
index 12d7f2425..7ab538459 100644
--- a/src/components/SectionInput.js
+++ b/src/components/SectionInput.js
@@ -46,11 +46,15 @@ export default function SectionInput({ $target, stations, selectedLineName, stat
     return sectionOrder;
   };
 
-  this.setState = (nextSelectedLineName, nextStationsInSelectedLine) => {
-    this.selectedLineName = nextSelectedLineName;
-    this.stationsInSelectedLine = nextStationsInSelectedLine;
-
-    this.render();
+  this.setState = ({ nextStations, nextSelectedLineName, nextStationsInSelectedLine }) => {
+    if (nextStations) {
+      this.stations = nextStations;
+    } else {
+      this.selectedLineName = nextSelectedLineName;
+      this.stationsInSelectedLine = nextStationsInSelectedLine;
+
+      this.render();
+    }
   };
 
   this.createSelectOptionHTMLString = () => {
diff --git a/src/components/SectionManager.js b/src/components/SectionManager.js
index 1dc1d18fc..eb643f5dc 100644
--- a/src/components/SectionManager.js
+++ b/src/components/SectionManager.js
@@ -2,11 +2,12 @@ import LineSelector from "./LineSelector.js";
 import SectionInput from "./SectionInput.js";
 import SectionList from "./SectionList.js";
 
-export default function SectionManager({ $target, isShow, stations, lines, updateSection }) {
+export default function SectionManager({ id, $target, isShow, stations, lines, updateSection }) {
   this.$container = document.createElement("div");
   this.$container.className = "section-manager";
   $target.append(this.$container);
 
+  this.id = id;
   this.isShow = isShow;
   this.stations = stations;
   this.lines = lines;
@@ -58,30 +59,30 @@ export default function SectionManager({ $target, isShow, stations, lines, updat
     return this.lines[this.selectedLineIndex].stations;
   };
 
-  this.setNextLines = (nextLines) => {
-    this.lines = nextLines;
-    this.sectionInput.setState(this.getSelectedLineName(), this.getStationsInSelectedLine());
+  this.setStateComponents = () => {
+    this.sectionInput.setState({
+      nextSelectedLineName: this.getSelectedLineName(),
+      nextStationsInSelectedLine: this.getStationsInSelectedLine(),
+    });
     this.sectionList.setState(this.getStationsInSelectedLine());
   };
 
-  this.setNextSelectedLineIndex = (nextSelectedLineIndex) => {
-    this.selectedLineIndex = nextSelectedLineIndex;
-    this.sectionInput.setState(this.getSelectedLineName(), this.getStationsInSelectedLine());
-    this.sectionList.setState(this.getStationsInSelectedLine());
-  };
-
-  this.setState = ({ nextIsShow, nextLines, nextSelectedLineIndex }) => {
+  this.setState = ({ nextIsShow, nextStations, nextLines, nextSelectedLineIndex }) => {
     if (nextIsShow !== undefined) {
       this.isShow = nextIsShow;
+      this.stations = nextStations;
+      this.sectionInput.setState({ nextStations: this.stations });
       this.render();
     }
 
     if (nextLines) {
-      this.setNextLines(nextLines);
+      this.lines = nextLines;
+      this.setStateComponents();
     }
 
     if (nextSelectedLineIndex) {
-      this.setNextSelectedLineIndex(nextSelectedLineIndex);
+      this.selectedLineIndex = nextSelectedLineIndex;
+      this.setStateComponents();
     }
   };
 
diff --git a/src/components/StationManager.js b/src/components/StationManager.js
index 696885141..f2db841d9 100644
--- a/src/components/StationManager.js
+++ b/src/components/StationManager.js
@@ -1,11 +1,12 @@
 import StationNameInput from "./StationNameInput.js";
 import StationList from "./StationList.js";
 
-export default function StationManager({ $target, stations, isShow, onAddStation, onDeleteStation }) {
+export default function StationManager({ id, $target, stations, isShow, onAddStation, onDeleteStation }) {
   this.$container = document.createElement("div");
   this.$container.className = "station-manager";
   $target.append(this.$container);
 
+  this.id = id;
   this.isShow = isShow;
   this.stations = stations;
 

From 1b2b8c925a092355cd37b4b803b9bc84779b2014 Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 22:20:56 +0900
Subject: [PATCH 39/41] Add: SubwayMap component

---
 src/components/App.js       | 17 ++++++++++++++++-
 src/components/SubwayMap.js | 30 ++++++++++++++++++++++++++++++
 style.css                   | 12 ++++++++++++
 3 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 src/components/SubwayMap.js

diff --git a/src/components/App.js b/src/components/App.js
index d29f69f71..f964b76ea 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -5,6 +5,7 @@ import LineManager from "./LineManager.js";
 import SectionManager from "./SectionManager.js";
 import localStorageManager from "../util/localStorage.js";
 import { ELEMENT_INFO, STORAGE_KEY } from "../util/constants.js";
+import SubwayMap from "./SubwayMap.js";
 
 export default function App($app) {
   this.$app = $app;
@@ -14,11 +15,18 @@ export default function App($app) {
 
   this.onTogglePosition = (nextPositionId) => {
     this.stationManager.setState({ nextIsShow: nextPositionId === this.stationManager.id });
-    this.lineManager.setState({ nextIsShow: nextPositionId === this.lineManager.id, nextStations: this.stations });
+    this.lineManager.setState({
+      nextIsShow: nextPositionId === this.lineManager.id,
+      nextStations: this.stations,
+    });
     this.sectionManager.setState({
       nextIsShow: nextPositionId === this.sectionManager.id,
       nextStations: this.stations,
     });
+    this.subwayMap.setState({
+      nextIsShow: nextPositionId === this.subwayMap.id,
+      nextLines: this.lines,
+    });
   };
 
   this.navigator = new Navigator({
@@ -97,6 +105,13 @@ export default function App($app) {
     updateSection: this.updateSection,
   });
 
+  this.subwayMap = new SubwayMap({
+    id: ELEMENT_INFO.navigator[3].id,
+    $target: this.$main,
+    isShow: false,
+    lines: this.lines,
+  });
+
   this.setNextStations = (nextStations) => {
     this.stations = nextStations;
 
diff --git a/src/components/SubwayMap.js b/src/components/SubwayMap.js
new file mode 100644
index 000000000..9d84762a3
--- /dev/null
+++ b/src/components/SubwayMap.js
@@ -0,0 +1,30 @@
+export default function SubwayMap({ id, $target, isShow, lines }) {
+  this.$container = document.createElement("div");
+  this.$container.className = "map";
+  $target.append(this.$container);
+
+  this.id = id;
+  this.isShow = isShow;
+  this.lines = lines;
+
+  this.setState = ({ nextIsShow, nextLines }) => {
+    this.isShow = nextIsShow;
+    this.lines = nextLines;
+
+    this.render();
+  };
+
+  this.createStationListInLine = (stations) => {
+    return `<ol>${stations.map((station) => `<li>${station}</li>`).join("")}</ol>`;
+  };
+
+  this.render = () => {
+    this.$container.innerHTML = this.isShow
+      ? `<ul>
+          ${this.lines
+            .map((line) => `<li><h2>${line.name}</h2>${this.createStationListInLine(line.stations)}</li>`)
+            .join("")}
+        </ul>`
+      : "";
+  };
+}
diff --git a/style.css b/style.css
index 703b63efc..0e9232bfa 100644
--- a/style.css
+++ b/style.css
@@ -61,3 +61,15 @@ tr:last-child > td {
   margin-top: 0;
   margin-bottom: 10px;
 }
+
+.map ul {
+  list-style: none;
+}
+
+.map ol {
+  list-style: disc;
+}
+
+.map ol {
+  margin-left: 50px;
+}

From 45ffb38d18fbcbe03bc3e7269f4f4acefdc454da Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 22:23:09 +0900
Subject: [PATCH 40/41] Docs: fix typo

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

diff --git a/README.md b/README.md
index 6ad269574..33942b111 100644
--- a/README.md
+++ b/README.md
@@ -41,8 +41,7 @@
 
 ### 지하철 노선도 출력
 
-- 지하철 노선도 출력 화면을 구성한다.
-- 저장되어있는 지하철 노선도를 호선별로 화면에 출력한다
+- 저장되어있는 지하철 노선도를 호선별로 화면에 출력한다.
 
 ## 📝 참고 사이트
 

From a3a9d761c1dbc391de65088b6709aba81deb34fd Mon Sep 17 00:00:00 2001
From: sunyoung <sunnyk5780@gmail.com>
Date: Tue, 15 Dec 2020 22:35:22 +0900
Subject: [PATCH 41/41] Add: check possible to delete station

---
 src/components/App.js | 22 ++++++++++++++++++----
 src/util/constants.js |  1 +
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index f964b76ea..03044cf06 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -4,7 +4,7 @@ import StationManager from "./StationManager.js";
 import LineManager from "./LineManager.js";
 import SectionManager from "./SectionManager.js";
 import localStorageManager from "../util/localStorage.js";
-import { ELEMENT_INFO, STORAGE_KEY } from "../util/constants.js";
+import { ELEMENT_INFO, ERROR_MESSAGE, STORAGE_KEY } from "../util/constants.js";
 import SubwayMap from "./SubwayMap.js";
 
 export default function App($app) {
@@ -52,10 +52,24 @@ export default function App($app) {
   };
 
   this.onDeleteStation = (stationIndex) => {
-    const nextStations = [...this.stations];
-    nextStations.splice(stationIndex, 1);
+    if (!this.isContaineLines(this.stations[stationIndex])) {
+      const nextStations = [...this.stations];
+      nextStations.splice(stationIndex, 1);
+      this.setState({ nextStations });
+    }
+  };
 
-    this.setState({ nextStations });
+  this.isContaineLines = (stationName) => {
+    const result = this.lines.find((line) => {
+      return line.stations.find((station) => station === stationName) ? true : false;
+    });
+
+    if (result) {
+      alert(ERROR_MESSAGE.notPossibleToDeleteStation);
+      return true;
+    }
+
+    return false;
   };
 
   this.stationManager = new StationManager({
diff --git a/src/util/constants.js b/src/util/constants.js
index f079e38d7..a29302d45 100644
--- a/src/util/constants.js
+++ b/src/util/constants.js
@@ -77,6 +77,7 @@ export const ERROR_MESSAGE = {
   setItem: "⚠ 데이터를 저장하지 못했습니다.",
   shortStationName: `⚠ ${STATION_NAME_MIN_LENGTH}자 이상의 역 이름을 입력해주세요.`,
   duplicatedStationName: "⚠ 이미 존재하는 역 이름입니다.",
+  notPossibleToDeleteStation: "⚠ 노선에 등록된 역은 삭제할 수 없습니다.",
   shortLineName: `⚠ ${LINE_NAME_MIN_LENGTH}자 이상의 노선 이름을 입력해주세요.`,
   duplicatedLineName: "⚠ 이미 존재하는 노선 이름입니다.",
   sameStartAndEndStation: "⚠ 상행 종점역과 하행 종점역은 같을 수 없습니다.",