From 9243c4f9121b69189ffb63930fe0113507ab5629 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 12:23:36 +0900
Subject: [PATCH 01/48] =?UTF-8?q?docs=20:=20=EC=A7=80=ED=95=98=EC=B2=A0=20?=
 =?UTF-8?q?=EB=85=B8=EC=84=A0=EB=8F=84=20=EB=AF=B8=EC=85=98=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EB=AA=A9=EB=A1=9D=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 127 +++++++++++-------------------------------------------
 1 file changed, 25 insertions(+), 102 deletions(-)

diff --git a/README.md b/README.md
index e97a1d649..a68c94b37 100644
--- a/README.md
+++ b/README.md
@@ -1,114 +1,37 @@
 # 🚇 지하철 노선도 미션
+지하철 역을 추가 및 삭제하고, 생성된 노선에 역을 추가하고 삭제할 수 있는 프로그램이다.
 
-## 🚀 기능 요구사항
+## 🚀 기능 구현 목록
+1. 사용자는 버튼 4개(역 관리, 노선 관리, 구간 관리, 지하철 노선도 출력)를 선택할 수 있다.
 
 ### 지하철 역 관련 기능
-- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
-- 중복된 지하철 역 이름이 등록될 수 없다.
-- 지하철 역은 2글자 이상이어야 한다.
-- 지하철 역의 목록을 조회할 수 있다.
+2. 사용자는 역을 등록할 수 있다.
+    - [예외처리] 2글자 이상의 이름인지 검증해야 한다.
+    - [예외처리] 중복된 이름이 있는지 검증해야 한다.
+3. 사용자는 역을 삭제할 수 있다.
+    - [예외처리] 노선에 있는지 검증하고, 노선에 있다면 삭제할 수 없다.
+4. 사용자 지하철 역의 목록을 조회할 수 있다.
 
 ### 지하철 노선 관련 기능
-- 지하철 노선을 등록하고 삭제할 수 있다.
-- 중복된 지하철 노선 이름이 등록될 수 없다.
-- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
-- 지하철 노선의 목록을 조회할 수 있다.
+5. 사용자는 지하철 노선을 등록할 수 있다.
+    - [조건] 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
+    - [예외처리] 중복된 노선 이름이 있는지 검증해야 한다.
+    - [예외처리] ~선 형태의 이름인지 검증해야 한다.
+    - [예외처리] 시작점과 끝점이 같은 노선이 있는지 검증해야 한다.
+6. 사용자는 지하철 노선을 삭제할 수 있다.
+7. 사용자는 지하철 노선의 목록을 조회할 수 있다.
 
 ### 지하철 구간 추가 기능
-- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
-- 하나의 역은 여러개의 노선에 추가될 수 있다.
-- 역과 역 사이에 새로운 역이 추가 될 수 있다.
-- 노선에서 갈래길은 생길 수 없다.
-
-<img width="500" src="/images/section1.png">
+8. 사용자는 노선에 역을 추가할 수 있다.
+    - [예외처리] 중복된 노선이 있는지 검증해야 한다.
+    - [조건] 하나의 역은 여러개의 노선에 추가될 수 있다.
+    - [조건] 역과 역 사이에 새로운 역이 추가 될 수 있다.
+    - [조건] 노선에서 갈래길은 생길 수 없다.
 
 ### 지하철 구간 삭제 기능
-- 노선에 등록된 역을 제거할 수 있다.
-- 종점을 제거할 경우 다음 역이 종점이 된다.
-- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
-
-<img width="500" src="/images/section2.png">
+9. 사용자는 노선의 역을 삭제할 수 있다.
+    - [예외처리] 노선에 역이 2개 이하인지 검증하고, 2개 이하면 삭제할 수 없다.
+    - [조건] 종점을 제거할 경우 다음 역이 종점이 된다.
 
 ### 지하철 노선에 등록된 역 조회 기능
-- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
-
-<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) 문서 절차를 따라 미션을 제출한다.
+10. 사용자 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 전체 노선과 역 목록을 조회할 수 있다.

From 5043ffe5403cf626a2e03d645c8eb268c546f5c2 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 12:23:52 +0900
Subject: [PATCH 02/48] =?UTF-8?q?chore=20:=20gitignore=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..ae7194bd3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.ieda
+.DS_Store

From 7821a1cb7c69ceeddb1bc45d71ee8a4aacba43e6 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 12:24:11 +0900
Subject: [PATCH 03/48] =?UTF-8?q?chore=20:=20eslint=20=EC=84=A4=EC=A0=95?=
 =?UTF-8?q?=20=ED=8C=8C=EC=9D=BC=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 .eslintrc.json

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 000000000..ee22f13cf
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,26 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "airbnb-base",
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2015,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-console": "off",
+    "no-plusplus": "off",
+    "class-methods-use-this": "off",
+    "radix": "off",
+    "no-restricted-properties": "off",
+    "max-depth" : ["error", 2],
+    "no-return-assign" : "off",
+    "no-continue" : "off"
+  }
+}

From 91181d61e0c3848155af9d2974eed848d42b1067 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 12:24:26 +0900
Subject: [PATCH 04/48] =?UTF-8?q?chore=20:=20prettier=20=EC=84=A4=EC=A0=95?=
 =?UTF-8?q?=20=ED=8C=8C=EC=9D=BC=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierrc | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..13a6d0595
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "arrowParens": "always"
+}

From 3e8a068b73f01b8dbbbcfd1817742881351fa4db Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 13:07:44 +0900
Subject: [PATCH 05/48] =?UTF-8?q?feat=20:=20'=EC=97=AD=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC',=20'=EB=85=B8=EC=84=A0=20=EA=B4=80=EB=A6=AC',=20'?=
 =?UTF-8?q?=EA=B5=AC=EA=B0=84=20=EA=B4=80=EB=A6=AC',=20'=EC=A7=80=ED=95=98?=
 =?UTF-8?q?=EC=B2=A0=20=EB=85=B8=EC=84=A0=EB=8F=84=20=EC=B6=9C=EB=A0=A5'?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html          | 20 ++++++++++++++++++++
 src/index.js        |  4 ++++
 src/subwayMapApp.js | 24 ++++++++++++++++++++++++
 3 files changed, 48 insertions(+)
 create mode 100644 src/subwayMapApp.js

diff --git a/index.html b/index.html
index fc99deac2..d87b907e5 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,30 @@
   <head>
     <meta charset="UTF-8" />
     <title>지하철 노선도 관리</title>
+    <style>
+      a {
+        text-decoration: none;
+        color: black;
+      }
+    </style>
   </head>
   <body>
     <div id="app">
       <h1>🚇 지하철 노선도 관리 </h1>
+      <nav class="menu-buttons">
+        <button id="station-manager-button">
+          <a href="#station-manager">역 관리</a>
+        </button>
+        <button id="line-manager-button">
+          <a href="#line-manager">노선 관리</a>
+        </button>
+        <button id="section-manager-button">
+          <a href="#section-manage">구간 관리</a>
+        </button>
+        <button id="map-print-manager-button">
+          <a href="#map-print">지하철 노선도 출력</a>
+        </button>
+      </nav>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/index.js b/src/index.js
index e69de29bb..646aeb386 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,4 @@
+import subwayMapApp from './subwayMapApp.js';
+
+const $app = document.querySelector('#app');
+subwayMapApp($app);
diff --git a/src/subwayMapApp.js b/src/subwayMapApp.js
new file mode 100644
index 000000000..40af7055c
--- /dev/null
+++ b/src/subwayMapApp.js
@@ -0,0 +1,24 @@
+export default function subwayMapApp($element) {
+  const $stationManagerBtn = $element.querySelector('#station-manager-button');
+  const $lineManagerBtn = $element.querySelector('#line-manager-button');
+  const $sectionManagerBtn = $element.querySelector('#section-manager-button');
+  const $mapPrintManagerBtn = $element.querySelector('#map-print-manager-button');
+
+  const onStationManageHandler = () => {
+    console.log('역관리 입니다.');
+  };
+  const onLineManageHandler = () => {
+    console.log('라인관리 입니다.');
+  };
+  const onSectionManageHandler = () => {
+    console.log('노선관리 입니다.');
+  };
+  const onMapPrintManageHandler = () => {
+    console.log('전체 노선도 출력 입니다.');
+  };
+
+  $stationManagerBtn.addEventListener('click', onStationManageHandler);
+  $lineManagerBtn.addEventListener('click', onLineManageHandler);
+  $sectionManagerBtn.addEventListener('click', onSectionManageHandler);
+  $mapPrintManagerBtn.addEventListener('click', onMapPrintManageHandler);
+}

From 572997538cc46f3d650c2de1446d6c499542bbc7 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 17:23:35 +0900
Subject: [PATCH 06/48] =?UTF-8?q?feat=20:=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=EB=8A=94=20=EC=97=AD=EC=9D=84=20=EB=93=B1=EB=A1=9D=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 역관리 templete 구현
- content를 표시할 section 태그 생성
- Station 객체 생성
- 사용자가 station을 입력하면 등록하는 기능 구현
- localStorage에 등록한 station 저장하는 기능 구현
- 중복된 이름 및 글자 수 예외처리
---
 index.html                           |  6 ++++
 src/components/stationManagerPage.js | 44 ++++++++++++++++++++++++++++
 src/subwayMapApp.js                  | 10 +++++--
 src/utils/Station.js                 | 13 ++++++++
 src/utils/constant.js                |  3 ++
 src/utils/stationStorage.js          | 20 +++++++++++++
 src/utils/templete.js                | 26 ++++++++++++++++
 7 files changed, 119 insertions(+), 3 deletions(-)
 create mode 100644 src/components/stationManagerPage.js
 create mode 100644 src/utils/Station.js
 create mode 100644 src/utils/constant.js
 create mode 100644 src/utils/stationStorage.js
 create mode 100644 src/utils/templete.js

diff --git a/index.html b/index.html
index d87b907e5..c71f72567 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,11 @@
     <meta charset="UTF-8" />
     <title>지하철 노선도 관리</title>
     <style>
+      p {
+        font-size: 1.2rem;
+        margin-bottom: 0;
+      }
+
       a {
         text-decoration: none;
         color: black;
@@ -27,6 +32,7 @@ <h1>🚇 지하철 노선도 관리 </h1>
           <a href="#map-print">지하철 노선도 출력</a>
         </button>
       </nav>
+      <section class="content-container"></section>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/components/stationManagerPage.js b/src/components/stationManagerPage.js
new file mode 100644
index 000000000..e7c737dab
--- /dev/null
+++ b/src/components/stationManagerPage.js
@@ -0,0 +1,44 @@
+import { STATION_MANAGER_PAGE_TEMPLATE } from '../utils/templete.js';
+import stationStorage from '../utils/stationStorage.js';
+import Station from '../utils/Station.js';
+
+export default function stationManagerPage($element) {
+  $element.innerHTML = STATION_MANAGER_PAGE_TEMPLATE;
+  const $userStationInput = $element.querySelector('#station-name-input');
+  const $userStationSubmit = $element.querySelector('#station-add-button');
+
+  const stations = stationStorage().getStation();
+
+  const stationNameValidator = (stationName) => {
+    if (stationName.length < 2) {
+      return alert('이름은 두글자 이상입니다');
+    }
+    if (stations && stations.map((value) => value.name).includes(stationName)) {
+      return alert('중복된 이름입니다.');
+    }
+
+    return true;
+  };
+
+  const getNewId = () => {
+    if (!stations || stations.length === 0) {
+      return 0;
+    }
+    return stations[stations.length - 1].id + 1;
+  };
+
+  const createStation = (newStationName) => {
+    stations.push(new Station(getNewId(), newStationName));
+    stationStorage().setStation(stations);
+  };
+
+  const onStationSubmitHandler = () => {
+    const newStationName = $userStationInput.value;
+    if (stationNameValidator(newStationName)) {
+      createStation(newStationName);
+    }
+    $userStationInput.value = '';
+  };
+
+  $userStationSubmit.addEventListener('click', onStationSubmitHandler);
+}
diff --git a/src/subwayMapApp.js b/src/subwayMapApp.js
index 40af7055c..33e4025c0 100644
--- a/src/subwayMapApp.js
+++ b/src/subwayMapApp.js
@@ -1,17 +1,21 @@
+import stationManagerPage from './components/stationManagerPage.js';
+import lineManagerPage from './components/lineManagerPage.js';
+
 export default function subwayMapApp($element) {
   const $stationManagerBtn = $element.querySelector('#station-manager-button');
   const $lineManagerBtn = $element.querySelector('#line-manager-button');
   const $sectionManagerBtn = $element.querySelector('#section-manager-button');
   const $mapPrintManagerBtn = $element.querySelector('#map-print-manager-button');
+  const $contentSection = $element.querySelector('.content-container');
 
   const onStationManageHandler = () => {
-    console.log('역관리 입니다.');
+    stationManagerPage($contentSection);
   };
   const onLineManageHandler = () => {
-    console.log('라인관리 입니다.');
+    console.log('노선관리 입니다.');
   };
   const onSectionManageHandler = () => {
-    console.log('노선관리 입니다.');
+    console.log('구간관리 입니다.');
   };
   const onMapPrintManageHandler = () => {
     console.log('전체 노선도 출력 입니다.');
diff --git a/src/utils/Station.js b/src/utils/Station.js
new file mode 100644
index 000000000..38981c886
--- /dev/null
+++ b/src/utils/Station.js
@@ -0,0 +1,13 @@
+export default function Station(id, name) {
+  this.id = id;
+  this.name = name;
+  this.line = [];
+
+  this.setLine = (lineName) => {
+    if (this.line.includes(lineName)) {
+      alert(`${lineName}에 이미 ${name}역이 포함되어 있습니다.`);
+    } else {
+      this.line.push(lineName);
+    }
+  };
+}
diff --git a/src/utils/constant.js b/src/utils/constant.js
new file mode 100644
index 000000000..fa723f549
--- /dev/null
+++ b/src/utils/constant.js
@@ -0,0 +1,3 @@
+const STATION_STORAGE_NAME = 'STATIONS';
+
+export { STATION_STORAGE_NAME };
diff --git a/src/utils/stationStorage.js b/src/utils/stationStorage.js
new file mode 100644
index 000000000..dd818caed
--- /dev/null
+++ b/src/utils/stationStorage.js
@@ -0,0 +1,20 @@
+import { STATION_STORAGE_NAME } from './constant.js';
+
+export default function stationStorage() {
+  const getStation = () => {
+    if (!localStorage.getItem(STATION_STORAGE_NAME)) {
+      return [];
+    }
+    const storedItems = localStorage.getItem(STATION_STORAGE_NAME);
+    return JSON.parse(storedItems);
+  };
+
+  const setStation = (station) => {
+    localStorage.setItem(STATION_STORAGE_NAME, JSON.stringify(station));
+  };
+
+  return {
+    getStation,
+    setStation,
+  };
+}
diff --git a/src/utils/templete.js b/src/utils/templete.js
new file mode 100644
index 000000000..6117ad1e8
--- /dev/null
+++ b/src/utils/templete.js
@@ -0,0 +1,26 @@
+const STATION_MANAGER_PAGE_TEMPLATE =
+  '<p><strong>역 이름</strong></p>' +
+  '<input type="text" id="station-name-input">' +
+  '<button id="station-add-button">역 추가</button>' +
+  '<div class="all-station-table">' +
+  '<table border="1">' +
+  '<h2>🚉 지하철 역 목록</h2>' +
+  '<thead>' +
+  '<tr>' +
+  '<th>역 이름</th>' +
+  '<th>설정</th>' +
+  '</tr>' +
+  '</thead>' +
+  '<tbody class="station_manager_tbody">' +
+  '</tbody>' +
+  '</table>' +
+  '</div>';
+
+const STATION_TABLE_TEMPLATE = (stationName) => {
+  return `<tr>
+      <td>${stationName}</td>
+      <td><button class=".station-delete-button">삭제</button></td>
+      </tr>`;
+};
+
+export { STATION_MANAGER_PAGE_TEMPLATE, STATION_TABLE_TEMPLATE };

From 041b8511873adaaf487ce0665807b2710039d1e2 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 17:35:51 +0900
Subject: [PATCH 07/48] =?UTF-8?q?feat=20:=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=EC=97=90=EA=B2=8C=20=EC=A7=80=ED=95=98=EC=B2=A0=20=EC=97=AD?=
 =?UTF-8?q?=EC=9D=98=20=EB=AA=A9=EB=A1=9D=EC=9D=84=20=EB=B3=B4=EC=97=AC?=
 =?UTF-8?q?=EC=A3=BC=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/stationManagerPage.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/stationManagerPage.js b/src/components/stationManagerPage.js
index e7c737dab..5b77af53c 100644
--- a/src/components/stationManagerPage.js
+++ b/src/components/stationManagerPage.js
@@ -1,4 +1,4 @@
-import { STATION_MANAGER_PAGE_TEMPLATE } from '../utils/templete.js';
+import { STATION_MANAGER_PAGE_TEMPLATE, STATION_TABLE_TEMPLATE } from '../utils/templete.js';
 import stationStorage from '../utils/stationStorage.js';
 import Station from '../utils/Station.js';
 
@@ -6,6 +6,7 @@ export default function stationManagerPage($element) {
   $element.innerHTML = STATION_MANAGER_PAGE_TEMPLATE;
   const $userStationInput = $element.querySelector('#station-name-input');
   const $userStationSubmit = $element.querySelector('#station-add-button');
+  const $stationTablebody = $element.querySelector('.station_manager_tbody');
 
   const stations = stationStorage().getStation();
 
@@ -20,6 +21,11 @@ export default function stationManagerPage($element) {
     return true;
   };
 
+  const showStations = () => {
+    const stationNames = stations.map((station) => station.name);
+    $stationTablebody.innerHTML = stationNames.map(STATION_TABLE_TEMPLATE).join('');
+  };
+
   const getNewId = () => {
     if (!stations || stations.length === 0) {
       return 0;
@@ -30,6 +36,7 @@ export default function stationManagerPage($element) {
   const createStation = (newStationName) => {
     stations.push(new Station(getNewId(), newStationName));
     stationStorage().setStation(stations);
+    showStations();
   };
 
   const onStationSubmitHandler = () => {
@@ -41,4 +48,5 @@ export default function stationManagerPage($element) {
   };
 
   $userStationSubmit.addEventListener('click', onStationSubmitHandler);
+  showStations();
 }

From da1e6f6de76d702ff025ed5dac34a1264d8922ea Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 18:44:27 +0900
Subject: [PATCH 08/48] =?UTF-8?q?refactor=20:=20=EC=97=AD=20=ED=85=8C?=
 =?UTF-8?q?=EC=9D=B4=EB=B8=94=20html=20template=20=EC=86=8D=EC=84=B1=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 삭제버튼 class명 수정
- data 속성을 이용하여 역의 상태 표현
---
 src/utils/templete.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/utils/templete.js b/src/utils/templete.js
index 6117ad1e8..e0f9f68e8 100644
--- a/src/utils/templete.js
+++ b/src/utils/templete.js
@@ -16,10 +16,10 @@ const STATION_MANAGER_PAGE_TEMPLATE =
   '</table>' +
   '</div>';
 
-const STATION_TABLE_TEMPLATE = (stationName) => {
-  return `<tr>
-      <td>${stationName}</td>
-      <td><button class=".station-delete-button">삭제</button></td>
+const STATION_TABLE_TEMPLATE = (station) => {
+  return `<tr id=${station.id} data-lines=${station.line}>
+      <td data-name=${station.name}>${station.name}</td>
+      <td><button class="station-delete-button">삭제</button></td>
       </tr>`;
 };
 

From 5923277062f68c4a936f51e791acd389929eccb0 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 18:50:23 +0900
Subject: [PATCH 09/48] =?UTF-8?q?feat=20:=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=EA=B0=80=20=EC=A7=80=ED=95=98=EC=B2=A0=20=EC=97=AD=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/stationManagerPage.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/stationManagerPage.js b/src/components/stationManagerPage.js
index 5b77af53c..fe4c85382 100644
--- a/src/components/stationManagerPage.js
+++ b/src/components/stationManagerPage.js
@@ -8,7 +8,7 @@ export default function stationManagerPage($element) {
   const $userStationSubmit = $element.querySelector('#station-add-button');
   const $stationTablebody = $element.querySelector('.station_manager_tbody');
 
-  const stations = stationStorage().getStation();
+  let stations = stationStorage().getStation();
 
   const stationNameValidator = (stationName) => {
     if (stationName.length < 2) {
@@ -22,8 +22,23 @@ export default function stationManagerPage($element) {
   };
 
   const showStations = () => {
-    const stationNames = stations.map((station) => station.name);
-    $stationTablebody.innerHTML = stationNames.map(STATION_TABLE_TEMPLATE).join('');
+    $stationTablebody.innerHTML = stations.map(STATION_TABLE_TEMPLATE).join('');
+  };
+
+  const deleteStation = (stationTag) => {
+    if (stationTag.dataset.lines.length !== 0) {
+      return alert('노선에 포함되어 있는 라인은 삭제할 수 없습니다');
+    }
+    stations = stations.filter((station) => station.id !== parseInt(stationTag.id));
+    stationStorage().setStation(stations);
+    showStations();
+  };
+
+  const onStationDeleteHandler = (e) => {
+    if (!e.target.classList.contains('station-delete-button')) {
+      return false;
+    }
+    deleteStation(e.target.closest('tr'));
   };
 
   const getNewId = () => {
@@ -48,5 +63,6 @@ export default function stationManagerPage($element) {
   };
 
   $userStationSubmit.addEventListener('click', onStationSubmitHandler);
+  $stationTablebody.addEventListener('click', onStationDeleteHandler);
   showStations();
 }

From 7479cec4cf2f71fd5521a3425ea3c0335a4d4921 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 18:53:39 +0900
Subject: [PATCH 10/48] =?UTF-8?q?refactor=20:=20=EC=83=88=EB=A1=9C?=
 =?UTF-8?q?=EC=9A=B4=20=EC=97=AD=20=EC=83=9D=EC=84=B1=ED=95=98=EB=8A=94=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=EC=97=90=EC=84=9C=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EC=97=AD=ED=95=A0=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/stationManagerPage.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/stationManagerPage.js b/src/components/stationManagerPage.js
index fe4c85382..93ab89553 100644
--- a/src/components/stationManagerPage.js
+++ b/src/components/stationManagerPage.js
@@ -48,12 +48,16 @@ export default function stationManagerPage($element) {
     return stations[stations.length - 1].id + 1;
   };
 
-  const createStation = (newStationName) => {
-    stations.push(new Station(getNewId(), newStationName));
+  const addStations = (newStations) => {
+    stations.push(newStations);
     stationStorage().setStation(stations);
     showStations();
   };
 
+  const createStation = (newStationName) => {
+    addStations(new Station(getNewId(), newStationName));
+  };
+
   const onStationSubmitHandler = () => {
     const newStationName = $userStationInput.value;
     if (stationNameValidator(newStationName)) {

From e8fa46aef84786d2a649e0fe35b31995787a4e82 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 19:53:01 +0900
Subject: [PATCH 11/48] =?UTF-8?q?refactor=20:=20=EC=97=AD=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20=EC=9D=B4=EB=A6=84?=
 =?UTF-8?q?=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20=EB=B6=80?=
 =?UTF-8?q?=EB=B6=84=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/stationManagerPage.js | 18 ++++-------------
 src/utils/stationValidator.js        | 30 ++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 14 deletions(-)
 create mode 100644 src/utils/stationValidator.js

diff --git a/src/components/stationManagerPage.js b/src/components/stationManagerPage.js
index 93ab89553..928e180d4 100644
--- a/src/components/stationManagerPage.js
+++ b/src/components/stationManagerPage.js
@@ -1,4 +1,5 @@
 import { STATION_MANAGER_PAGE_TEMPLATE, STATION_TABLE_TEMPLATE } from '../utils/templete.js';
+import { stationNameValidator, stationDeleteValidation } from '../utils/stationValidator.js';
 import stationStorage from '../utils/stationStorage.js';
 import Station from '../utils/Station.js';
 
@@ -10,24 +11,13 @@ export default function stationManagerPage($element) {
 
   let stations = stationStorage().getStation();
 
-  const stationNameValidator = (stationName) => {
-    if (stationName.length < 2) {
-      return alert('이름은 두글자 이상입니다');
-    }
-    if (stations && stations.map((value) => value.name).includes(stationName)) {
-      return alert('중복된 이름입니다.');
-    }
-
-    return true;
-  };
-
   const showStations = () => {
     $stationTablebody.innerHTML = stations.map(STATION_TABLE_TEMPLATE).join('');
   };
 
   const deleteStation = (stationTag) => {
-    if (stationTag.dataset.lines.length !== 0) {
-      return alert('노선에 포함되어 있는 라인은 삭제할 수 없습니다');
+    if (!stationDeleteValidation(stationTag)) {
+      return;
     }
     stations = stations.filter((station) => station.id !== parseInt(stationTag.id));
     stationStorage().setStation(stations);
@@ -60,7 +50,7 @@ export default function stationManagerPage($element) {
 
   const onStationSubmitHandler = () => {
     const newStationName = $userStationInput.value;
-    if (stationNameValidator(newStationName)) {
+    if (stationNameValidator(stations, newStationName)) {
       createStation(newStationName);
     }
     $userStationInput.value = '';
diff --git a/src/utils/stationValidator.js b/src/utils/stationValidator.js
new file mode 100644
index 000000000..7d382d49d
--- /dev/null
+++ b/src/utils/stationValidator.js
@@ -0,0 +1,30 @@
+const isNameLengthLongerThanTwo = (stationName) => {
+  if (stationName.length < 2) {
+    return alert('이름은 두글자 이상입니다');
+  }
+  return true;
+};
+
+const isEqualName = (stations, stationName) => {
+  if (stations && stations.map((value) => value.name).includes(stationName)) {
+    return alert('중복된 이름입니다.');
+  }
+  return true;
+};
+
+const isIncludedLine = (stationTag) => {
+  if (stationTag.dataset.lines.length !== 0) {
+    return alert('노선에 포함되어 있는 라인은 삭제할 수 없습니다');
+  }
+  return true;
+};
+
+function stationNameValidator(stations, stationName) {
+  return isNameLengthLongerThanTwo(stationName) && isEqualName(stations, stationName);
+}
+
+function stationDeleteValidation(stationTag) {
+  return isIncludedLine(stationTag);
+}
+
+export { stationNameValidator, stationDeleteValidation };

From c8a627b2b74442ab9844ed63b0a98bba85938dac Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 20:02:23 +0900
Subject: [PATCH 12/48] =?UTF-8?q?style=20:=20=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EC=88=9C=EC=84=9C=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/stationManagerPage.js | 32 ++++++++++++++--------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/stationManagerPage.js b/src/components/stationManagerPage.js
index 928e180d4..5731144ed 100644
--- a/src/components/stationManagerPage.js
+++ b/src/components/stationManagerPage.js
@@ -15,22 +15,6 @@ export default function stationManagerPage($element) {
     $stationTablebody.innerHTML = stations.map(STATION_TABLE_TEMPLATE).join('');
   };
 
-  const deleteStation = (stationTag) => {
-    if (!stationDeleteValidation(stationTag)) {
-      return;
-    }
-    stations = stations.filter((station) => station.id !== parseInt(stationTag.id));
-    stationStorage().setStation(stations);
-    showStations();
-  };
-
-  const onStationDeleteHandler = (e) => {
-    if (!e.target.classList.contains('station-delete-button')) {
-      return false;
-    }
-    deleteStation(e.target.closest('tr'));
-  };
-
   const getNewId = () => {
     if (!stations || stations.length === 0) {
       return 0;
@@ -48,6 +32,22 @@ export default function stationManagerPage($element) {
     addStations(new Station(getNewId(), newStationName));
   };
 
+  const deleteStation = (stationTag) => {
+    if (!stationDeleteValidation(stationTag)) {
+      return;
+    }
+    stations = stations.filter((station) => station.id !== parseInt(stationTag.id));
+    stationStorage().setStation(stations);
+    showStations();
+  };
+
+  const onStationDeleteHandler = (e) => {
+    if (!e.target.classList.contains('station-delete-button')) {
+      return false;
+    }
+    deleteStation(e.target.closest('tr'));
+  };
+
   const onStationSubmitHandler = () => {
     const newStationName = $userStationInput.value;
     if (stationNameValidator(stations, newStationName)) {

From 05ab37ffd70f60775b30039a5285876dbb389f55 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 20:05:24 +0900
Subject: [PATCH 13/48] =?UTF-8?q?style=20:=20code=20formatting=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- template literal 사용
- 코드 공백 수정
---
 src/utils/templete.js | 39 +++++++++++++++++++--------------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/utils/templete.js b/src/utils/templete.js
index e0f9f68e8..0af7aaf6d 100644
--- a/src/utils/templete.js
+++ b/src/utils/templete.js
@@ -1,26 +1,25 @@
-const STATION_MANAGER_PAGE_TEMPLATE =
-  '<p><strong>역 이름</strong></p>' +
-  '<input type="text" id="station-name-input">' +
-  '<button id="station-add-button">역 추가</button>' +
-  '<div class="all-station-table">' +
-  '<table border="1">' +
-  '<h2>🚉 지하철 역 목록</h2>' +
-  '<thead>' +
-  '<tr>' +
-  '<th>역 이름</th>' +
-  '<th>설정</th>' +
-  '</tr>' +
-  '</thead>' +
-  '<tbody class="station_manager_tbody">' +
-  '</tbody>' +
-  '</table>' +
-  '</div>';
+const STATION_MANAGER_PAGE_TEMPLATE = `<p><strong>역 이름</strong></p>
+  <input type="text" id="station-name-input">
+  <button id="station-add-button">역 추가</button>
+  <div class="all-station-table">
+  <table border="1">
+  <h2>🚉 지하철 역 목록</h2>
+  <thead>
+  <tr>
+  <th>역 이름</th>
+  <th>설정</th>
+  </tr>
+  </thead>
+  <tbody class="station_manager_tbody">
+  </tbody>
+  </table>
+  </div>`;
 
 const STATION_TABLE_TEMPLATE = (station) => {
   return `<tr id=${station.id} data-lines=${station.line}>
-      <td data-name=${station.name}>${station.name}</td>
-      <td><button class="station-delete-button">삭제</button></td>
-      </tr>`;
+    <td data-name=${station.name}>${station.name}</td>
+    <td><button class="station-delete-button">삭제</button></td>
+    </tr>`;
 };
 
 export { STATION_MANAGER_PAGE_TEMPLATE, STATION_TABLE_TEMPLATE };

From 9c0f6aacb119300658f43da9a41cacb2d469807b Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Mon, 14 Dec 2020 23:43:24 +0900
Subject: [PATCH 14/48] =?UTF-8?q?refactor=20:=20Sementic=ED=95=98=EA=B2=8C?=
 =?UTF-8?q?=20tag=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- section -> main
---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index c71f72567..a8a0aeeb5 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@ <h1>🚇 지하철 노선도 관리 </h1>
           <a href="#map-print">지하철 노선도 출력</a>
         </button>
       </nav>
-      <section class="content-container"></section>
+      <main class="content-container"></main>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>

From a733eee2a435c02aa3bb109121df5ea8bafa2dd0 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 02:49:42 +0900
Subject: [PATCH 15/48] =?UTF-8?q?feat=20:=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=EA=B0=80=20=EB=85=B8=EC=84=A0=20=EB=93=B1=EB=A1=9D=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EB=B0=8F=20=EB=AA=A9=EB=A1=9D?=
 =?UTF-8?q?=20=EC=A1=B0=ED=9A=8C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 노선 등록 화면 template 구현
- Line 객체 생성
- 사용자가 노선을 입력하면 등록하는 기능 구현
- 등록한 노선을 사용자가 조회할 수 있도록 테이블 구현
- localStorage에 등록한 노선을 저장하는 기능 구현
- 중복된 노선 이름 유효성 검사 기능 구현
- 노선 이름에 아무것도 입력하지 않았을 때 유효성 검사 기능 구현
- 상행종점과 하행종점이 같을 때 유효성 검사 기능 구현
- 다른 노선과 상행종점과 하행종점이 같을 때 유효성 검사 기능 구현
- 노선의 이름이 '선'으로 끝날 수 있도록 유효성 검사 기능 구현
---
 src/components/lineManagerPage.js    | 72 ++++++++++++++++++++++++++++
 src/subwayMapApp.js                  |  2 +-
 src/utils/Line.js                    | 13 +++++
 src/utils/constant.js                |  3 +-
 src/utils/lineStorage.js             | 20 ++++++++
 src/utils/templete.js                | 59 ++++++++++++++++++++++-
 src/utils/validator/lineValidator.js | 53 ++++++++++++++++++++
 7 files changed, 218 insertions(+), 4 deletions(-)
 create mode 100644 src/components/lineManagerPage.js
 create mode 100644 src/utils/Line.js
 create mode 100644 src/utils/lineStorage.js
 create mode 100644 src/utils/validator/lineValidator.js

diff --git a/src/components/lineManagerPage.js b/src/components/lineManagerPage.js
new file mode 100644
index 000000000..9680f281b
--- /dev/null
+++ b/src/components/lineManagerPage.js
@@ -0,0 +1,72 @@
+import {
+  LINE_MANAGER_PAGE_TEMPLATE,
+  ALL_STATION_OPTION_LIST,
+  LINE_TABLE_TEMPLATE,
+} from '../utils/templete.js';
+import { lineNameValidator, lineStationsValidator } from '../utils/validator/lineValidator.js';
+import stationStorage from '../utils/stationStorage.js';
+import lineStorage from '../utils/lineStorage.js';
+import Line from '../utils/Line.js';
+
+export default function stationManagerPage($element) {
+  $element.innerHTML = LINE_MANAGER_PAGE_TEMPLATE;
+  const $userInputLine = $element.querySelector('#line-name-input');
+  const $startStation = $element.querySelector('#line-start-station-selector');
+  const $endStation = $element.querySelector('#line-end-station-selector');
+  const $userLineSubmitBtn = $element.querySelector('#line-add-button');
+  const $lineTableBody = $element.querySelector('.line-table-tbody');
+
+  const stations = stationStorage().getStation();
+  const lines = lineStorage().getLine();
+
+  $startStation.innerHTML = ALL_STATION_OPTION_LIST(stations);
+  $endStation.innerHTML = ALL_STATION_OPTION_LIST(stations);
+
+  const renderLines = () => {
+    $lineTableBody.innerHTML = lines.map(LINE_TABLE_TEMPLATE).join('');
+  };
+
+  const getNewId = () => {
+    if (!lines || lines.length === 0) {
+      return 0;
+    }
+    return lines[lines.length - 1].id + 1;
+  };
+
+  const addLine = (newLine) => {
+    lines.push(newLine);
+    lineStorage().setLine(lines);
+    renderLines();
+  };
+
+  const getStation = (stationName) => {
+    return stations.filter((station) => station.name === stationName);
+  };
+
+  const createLine = (newLineName, startStationName, endStationName) => {
+    const startStation = getStation(startStationName)[0];
+    const endStation = getStation(endStationName)[0];
+
+    const newLine = new Line(getNewId(), newLineName);
+    newLine.setLine(startStation, 0);
+    newLine.setLine(endStation, 1);
+    addLine(newLine);
+  };
+
+  const onLineSubmitHandler = () => {
+    const newLineName = $userInputLine.value;
+    const startStationName = $startStation.value;
+    const endStationName = $endStation.value;
+
+    if (
+      lineNameValidator(lines, newLineName) &&
+      lineStationsValidator(lines, startStationName, endStationName)
+    ) {
+      createLine(newLineName, startStationName, endStationName);
+    }
+    $userInputLine.value = '';
+  };
+
+  $userLineSubmitBtn.addEventListener('click', onLineSubmitHandler);
+  renderLines();
+}
diff --git a/src/subwayMapApp.js b/src/subwayMapApp.js
index 33e4025c0..ca45e56c7 100644
--- a/src/subwayMapApp.js
+++ b/src/subwayMapApp.js
@@ -12,7 +12,7 @@ export default function subwayMapApp($element) {
     stationManagerPage($contentSection);
   };
   const onLineManageHandler = () => {
-    console.log('노선관리 입니다.');
+    lineManagerPage($contentSection);
   };
   const onSectionManageHandler = () => {
     console.log('구간관리 입니다.');
diff --git a/src/utils/Line.js b/src/utils/Line.js
new file mode 100644
index 000000000..a2a3b703a
--- /dev/null
+++ b/src/utils/Line.js
@@ -0,0 +1,13 @@
+export default function Line(id, name) {
+  this.id = id;
+  this.name = name;
+  this.stations = [];
+
+  this.setLine = (Station, index) => {
+    const stationNames = this.stations.map((station) => station.name);
+    if (stationNames.includes(Station)) {
+      alert('이미 등록되어 있습니다');
+    }
+    this.stations.splice(index, 0, Station);
+  };
+}
diff --git a/src/utils/constant.js b/src/utils/constant.js
index fa723f549..38363dfcb 100644
--- a/src/utils/constant.js
+++ b/src/utils/constant.js
@@ -1,3 +1,4 @@
 const STATION_STORAGE_NAME = 'STATIONS';
+const LINE_STORAGE_NAME = 'LINES';
 
-export { STATION_STORAGE_NAME };
+export { STATION_STORAGE_NAME, LINE_STORAGE_NAME };
diff --git a/src/utils/lineStorage.js b/src/utils/lineStorage.js
new file mode 100644
index 000000000..d2f2454fd
--- /dev/null
+++ b/src/utils/lineStorage.js
@@ -0,0 +1,20 @@
+import { LINE_STORAGE_NAME } from './constant.js';
+
+export default function lineStorage() {
+  const getLine = () => {
+    if (!localStorage.getItem(LINE_STORAGE_NAME)) {
+      return [];
+    }
+    const storedItems = localStorage.getItem(LINE_STORAGE_NAME);
+    return JSON.parse(storedItems);
+  };
+
+  const setLine = (line) => {
+    localStorage.setItem(LINE_STORAGE_NAME, JSON.stringify(line));
+  };
+
+  return {
+    getLine,
+    setLine,
+  };
+}
diff --git a/src/utils/templete.js b/src/utils/templete.js
index 0af7aaf6d..b7cf0be2a 100644
--- a/src/utils/templete.js
+++ b/src/utils/templete.js
@@ -1,5 +1,5 @@
 const STATION_MANAGER_PAGE_TEMPLATE = `<p><strong>역 이름</strong></p>
-  <input type="text" id="station-name-input">
+  <input type="text" id="station-name-input" placeholder="역 이름을 입력해주세요.">
   <button id="station-add-button">역 추가</button>
   <div class="all-station-table">
   <table border="1">
@@ -22,4 +22,59 @@ const STATION_TABLE_TEMPLATE = (station) => {
     </tr>`;
 };
 
-export { STATION_MANAGER_PAGE_TEMPLATE, STATION_TABLE_TEMPLATE };
+const LINE_MANAGER_PAGE_TEMPLATE = `<section class="line-registration">
+    <p><strong>노선 이름</strong></p>
+    <input type="text" id="line-name-input" placeholder="노선 이름을 입력해주세요">
+    <div class="select-line-points">
+      <label for="line-start-station-selector">상행 종점</label>
+      <select name="start-station" id="line-start-station-selector">
+      </select>
+      <br />
+      <label for="line-end-station-selector">하행 종점</label>
+      <select name="end-station" id="line-end-station-selector">
+      </select>
+    </div>
+    <button id="line-add-button">노선 추가</button>
+  </section>
+  <section class="line-table">
+    <table border="1">
+      <h2>🚉 지하철 노선 목록</h2>
+      <thead>
+        <tr>
+          <th>노선 이름</th>
+          <th>상행 종점역</th>
+          <th>하행 종점역</th>
+          <th>설정</th>
+        </tr>
+      </thead>
+      <tbody class="line-table-tbody"></tbody>
+    </table>
+  </section>`;
+
+const ALL_STATION_OPTION_LIST = (stations) => {
+  return stations
+    .map(
+      (station) =>
+        `<option id=${station.id} value=${station.name} data-station=${station}>${station.name}</option>`
+    )
+    .join('');
+};
+
+const LINE_TABLE_TEMPLATE = (lines) => {
+  const lineLength = lines.stations.length;
+
+  return `<tr id=${lines.id}>
+    <td data-name=${lines.name}>${lines.name}</td>
+    <td data-name=${lines.stations[0].name}>${lines.stations[0].name}</td>
+    <td data-name=${lines.stations[lineLength - 1].name}>${lines.stations[lineLength - 1].name}</td>
+    <td><button class="line-delete-button">삭제</button></td>
+    </tr>`;
+};
+
+export {
+  STATION_MANAGER_PAGE_TEMPLATE,
+  STATION_TABLE_TEMPLATE,
+  LINE_MANAGER_PAGE_TEMPLATE,
+  ALL_STATION_OPTION_LIST,
+  LINE_TABLE_TEMPLATE,
+};
diff --git a/src/utils/validator/lineValidator.js b/src/utils/validator/lineValidator.js
new file mode 100644
index 000000000..29f87ef54
--- /dev/null
+++ b/src/utils/validator/lineValidator.js
@@ -0,0 +1,53 @@
+const isEqualName = (lines, lineName) => {
+  if (lines.some((line) => line.name === lineName)) {
+    return alert('중복된 노선 이름입니다.');
+  }
+  return true;
+};
+
+const isNameNotNull = (lineName) => {
+  if (!lineName) {
+    return alert('노선 이름을 입력해주세요');
+  }
+  return true;
+};
+
+const isCorrectName = (lineName) => {
+  if (lineName.split('')[lineName.length - 1] !== '선') {
+    return alert("노선의 이름은 '선'으로 끝나야 합니다");
+  }
+  return true;
+};
+
+const isEqualPoints = (startStationName, endStationName) => {
+  if (startStationName === endStationName) {
+    return alert('상행 종점과 하행 종점은 서로 달라야 합니다');
+  }
+  return true;
+};
+
+const isEqualLine = (lines, startStationName, endStationName) => {
+  const linesStations = lines.map((line) => line.stations);
+  const linesPoints = linesStations.filter(
+    (currentLineStations, index) => index === 0 || index === currentLineStations.length - 1
+  );
+
+  const equalLine = linesPoints.filter(
+    (currentLinePoint) =>
+      currentLinePoint[0].name === startStationName && currentLinePoint[1].name === endStationName
+  );
+  return equalLine.length !== 0 ? alert('동일한 종점을 가진 노선이 있습니다') : true;
+};
+
+function lineNameValidator(lines, lineName) {
+  return isEqualName(lines, lineName) && isNameNotNull(lineName) && isCorrectName(lineName);
+}
+
+function lineStationsValidator(lines, startStationName, endStationName) {
+  return (
+    isEqualPoints(startStationName, endStationName) &&
+    isEqualLine(lines, startStationName, endStationName)
+  );
+}
+
+export { lineNameValidator, lineStationsValidator };

From e41836028fd52be43f155befd7da107122f7d5db Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 02:51:12 +0900
Subject: [PATCH 16/48] =?UTF-8?q?refactor=20:=20validator=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/stationManagerPage.js          | 5 ++++-
 src/utils/{ => validator}/stationValidator.js | 0
 2 files changed, 4 insertions(+), 1 deletion(-)
 rename src/utils/{ => validator}/stationValidator.js (100%)

diff --git a/src/components/stationManagerPage.js b/src/components/stationManagerPage.js
index 5731144ed..74ec373af 100644
--- a/src/components/stationManagerPage.js
+++ b/src/components/stationManagerPage.js
@@ -1,5 +1,8 @@
 import { STATION_MANAGER_PAGE_TEMPLATE, STATION_TABLE_TEMPLATE } from '../utils/templete.js';
-import { stationNameValidator, stationDeleteValidation } from '../utils/stationValidator.js';
+import {
+  stationNameValidator,
+  stationDeleteValidation,
+} from '../utils/validator/stationValidator.js';
 import stationStorage from '../utils/stationStorage.js';
 import Station from '../utils/Station.js';
 
diff --git a/src/utils/stationValidator.js b/src/utils/validator/stationValidator.js
similarity index 100%
rename from src/utils/stationValidator.js
rename to src/utils/validator/stationValidator.js

From fcb66967ca52850dc7e1d06076c3dcb7236c9bb9 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 02:51:47 +0900
Subject: [PATCH 17/48] =?UTF-8?q?style=20:=20css=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 노선에서 종점 선택하는 영역 스타일 추가
---
 index.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/index.html b/index.html
index a8a0aeeb5..ed6d4b063 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,10 @@
         text-decoration: none;
         color: black;
       }
+
+      .select-line-points {
+        margin: 1rem 0;
+      }
     </style>
   </head>
   <body>

From 58d1f66cb4ab11eaa93f644dffdc7ee2acbd8e8b Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 02:54:19 +0900
Subject: [PATCH 18/48] =?UTF-8?q?docs=20:=20=EB=85=B8=EC=84=A0=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EA=B8=B0=EB=8A=A5=20=EC=98=88=EC=99=B8=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/README.md b/README.md
index a68c94b37..112f2b8bd 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,9 @@
     - [조건] 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
     - [예외처리] 중복된 노선 이름이 있는지 검증해야 한다.
     - [예외처리] ~선 형태의 이름인지 검증해야 한다.
-    - [예외처리] 시작점과 끝점이 같은 노선이 있는지 검증해야 한다.
+    - [예외처리] 시작 종점과 하행 종점이 같은 노선은 등록할 수 없다.
+    - [예외처리] 상행 종점과 하행 종점이 동일한 기존의 노선이 있는지 검증해야 한다.
+    - [예외처리] 노선 이름은 무조건 입력해야 한다.
 6. 사용자는 지하철 노선을 삭제할 수 있다.
 7. 사용자는 지하철 노선의 목록을 조회할 수 있다.
 

From c5b1472fd15888c0ef1fce2ca2af0d5d37d8a95c Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 03:37:44 +0900
Subject: [PATCH 19/48] =?UTF-8?q?fix=20:=20=EB=8B=A4=EB=A5=B8=20=EB=85=B8?=
 =?UTF-8?q?=EC=84=A0=EA=B3=BC=20=EB=8F=99=EC=9D=BC=ED=95=9C=20=EC=A2=85?=
 =?UTF-8?q?=EC=A0=90=EC=9D=84=20=EA=B0=80=EC=A7=80=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=ED=95=98=EB=8A=94=20=EC=98=88=EC=99=B8?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- lineStorage에서 종점 station만 가져올 수 있도록 메소드 추가
- 거꾸로 했을 때 종점이 같아도 예외처리 할 수 있도록 메소드 추가 구현
---
 src/components/lineManagerPage.js    |  2 +-
 src/utils/lineStorage.js             | 18 ++++++++++++++
 src/utils/validator/lineValidator.js | 36 +++++++++++++++++++---------
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/components/lineManagerPage.js b/src/components/lineManagerPage.js
index 9680f281b..c5e0b4e03 100644
--- a/src/components/lineManagerPage.js
+++ b/src/components/lineManagerPage.js
@@ -60,7 +60,7 @@ export default function stationManagerPage($element) {
 
     if (
       lineNameValidator(lines, newLineName) &&
-      lineStationsValidator(lines, startStationName, endStationName)
+      lineStationsValidator(startStationName, endStationName)
     ) {
       createLine(newLineName, startStationName, endStationName);
     }
diff --git a/src/utils/lineStorage.js b/src/utils/lineStorage.js
index d2f2454fd..4992056b4 100644
--- a/src/utils/lineStorage.js
+++ b/src/utils/lineStorage.js
@@ -13,8 +13,26 @@ export default function lineStorage() {
     localStorage.setItem(LINE_STORAGE_NAME, JSON.stringify(line));
   };
 
+  const getStartPoints = () => {
+    if (!localStorage.getItem(LINE_STORAGE_NAME)) {
+      return [];
+    }
+    const startPoints = localStorage.getItem(LINE_STORAGE_NAME);
+    return JSON.parse(startPoints).map((line) => line.stations[0]);
+  };
+
+  const getEndPoints = () => {
+    if (!localStorage.getItem(LINE_STORAGE_NAME)) {
+      return [];
+    }
+    const startPoints = localStorage.getItem(LINE_STORAGE_NAME);
+    return JSON.parse(startPoints).map((line) => line.stations[line.stations.length - 1]);
+  };
+
   return {
     getLine,
     setLine,
+    getStartPoints,
+    getEndPoints,
   };
 }
diff --git a/src/utils/validator/lineValidator.js b/src/utils/validator/lineValidator.js
index 29f87ef54..e4591c45b 100644
--- a/src/utils/validator/lineValidator.js
+++ b/src/utils/validator/lineValidator.js
@@ -1,3 +1,5 @@
+import lineStorage from '../lineStorage.js';
+
 const isEqualName = (lines, lineName) => {
   if (lines.some((line) => line.name === lineName)) {
     return alert('중복된 노선 이름입니다.');
@@ -26,16 +28,27 @@ const isEqualPoints = (startStationName, endStationName) => {
   return true;
 };
 
-const isEqualLine = (lines, startStationName, endStationName) => {
-  const linesStations = lines.map((line) => line.stations);
-  const linesPoints = linesStations.filter(
-    (currentLineStations, index) => index === 0 || index === currentLineStations.length - 1
-  );
+const isEqualLine = (startStationName, endStationName) => {
+  const startStations = lineStorage()
+    .getStartPoints()
+    .map((station) => station.name === startStationName);
+  const endStations = lineStorage()
+    .getEndPoints()
+    .map((station) => station.name === endStationName);
 
-  const equalLine = linesPoints.filter(
-    (currentLinePoint) =>
-      currentLinePoint[0].name === startStationName && currentLinePoint[1].name === endStationName
-  );
+  const equalLine = startStations.filter((station, index) => station && endStations[index]);
+  return equalLine.length !== 0 ? alert('동일한 종점을 가진 노선이 있습니다') : true;
+};
+
+const isEqualReverseLine = (startStationName, endStationName) => {
+  const endStations = lineStorage()
+    .getStartPoints()
+    .map((station) => station.name === endStationName);
+  const StartStations = lineStorage()
+    .getEndPoints()
+    .map((station) => station.name === startStationName);
+
+  const equalLine = StartStations.filter((station, index) => station && endStations[index]);
   return equalLine.length !== 0 ? alert('동일한 종점을 가진 노선이 있습니다') : true;
 };
 
@@ -43,10 +56,11 @@ function lineNameValidator(lines, lineName) {
   return isEqualName(lines, lineName) && isNameNotNull(lineName) && isCorrectName(lineName);
 }
 
-function lineStationsValidator(lines, startStationName, endStationName) {
+function lineStationsValidator(startStationName, endStationName) {
   return (
     isEqualPoints(startStationName, endStationName) &&
-    isEqualLine(lines, startStationName, endStationName)
+    isEqualLine(startStationName, endStationName) &&
+    isEqualReverseLine(startStationName, endStationName)
   );
 }
 

From 7eced0bd0c6069c2462a6bac79b8f46a755ffe4b Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 03:41:22 +0900
Subject: [PATCH 20/48] =?UTF-8?q?refactor=20:=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EA=B0=84=EA=B2=B0=ED=95=98=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/validator/lineValidator.js | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/utils/validator/lineValidator.js b/src/utils/validator/lineValidator.js
index e4591c45b..707dc97c9 100644
--- a/src/utils/validator/lineValidator.js
+++ b/src/utils/validator/lineValidator.js
@@ -1,31 +1,23 @@
 import lineStorage from '../lineStorage.js';
 
 const isEqualName = (lines, lineName) => {
-  if (lines.some((line) => line.name === lineName)) {
-    return alert('중복된 노선 이름입니다.');
-  }
-  return true;
+  return lines.some((line) => line.name === lineName) ? alert('중복된 노선 이름입니다.') : true;
 };
 
 const isNameNotNull = (lineName) => {
-  if (!lineName) {
-    return alert('노선 이름을 입력해주세요');
-  }
-  return true;
+  return !lineName ? alert('노선 이름을 입력해주세요') : true;
 };
 
 const isCorrectName = (lineName) => {
-  if (lineName.split('')[lineName.length - 1] !== '선') {
-    return alert("노선의 이름은 '선'으로 끝나야 합니다");
-  }
-  return true;
+  return lineName.split('')[lineName.length - 1] !== '선'
+    ? alert("노선의 이름은 '선'으로 끝나야 합니다")
+    : true;
 };
 
 const isEqualPoints = (startStationName, endStationName) => {
-  if (startStationName === endStationName) {
-    return alert('상행 종점과 하행 종점은 서로 달라야 합니다');
-  }
-  return true;
+  return startStationName === endStationName
+    ? alert('상행 종점과 하행 종점은 서로 달라야 합니다')
+    : true;
 };
 
 const isEqualLine = (startStationName, endStationName) => {

From efbfbd4842c0ab9d4b5f845e8c20b5139e304593 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 03:58:34 +0900
Subject: [PATCH 21/48] =?UTF-8?q?feat=20:=20=EB=85=B8=EC=84=A0=EC=9D=84=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/lineManagerPage.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/lineManagerPage.js b/src/components/lineManagerPage.js
index c5e0b4e03..0d98abcd4 100644
--- a/src/components/lineManagerPage.js
+++ b/src/components/lineManagerPage.js
@@ -17,7 +17,7 @@ export default function stationManagerPage($element) {
   const $lineTableBody = $element.querySelector('.line-table-tbody');
 
   const stations = stationStorage().getStation();
-  const lines = lineStorage().getLine();
+  let lines = lineStorage().getLine();
 
   $startStation.innerHTML = ALL_STATION_OPTION_LIST(stations);
   $endStation.innerHTML = ALL_STATION_OPTION_LIST(stations);
@@ -53,6 +53,22 @@ export default function stationManagerPage($element) {
     addLine(newLine);
   };
 
+  const deleteLine = (stationTag) => {
+    console.log(stationTag);
+    lines = lines.filter((line) => line.id !== parseInt(stationTag.id));
+    lineStorage().setLine(lines);
+    renderLines();
+  };
+
+  const onLineDeleteHandler = (e) => {
+    if (!e.target.classList.contains('line-delete-button')) {
+      return;
+    }
+    if (confirm('정말로 삭제하시겠습니까?')) {
+      deleteLine(e.target.closest('tr'));
+    }
+  };
+
   const onLineSubmitHandler = () => {
     const newLineName = $userInputLine.value;
     const startStationName = $startStation.value;
@@ -68,5 +84,6 @@ export default function stationManagerPage($element) {
   };
 
   $userLineSubmitBtn.addEventListener('click', onLineSubmitHandler);
+  $lineTableBody.addEventListener('click', onLineDeleteHandler);
   renderLines();
 }

From 3859a789566079cd278cfd9970287373d7a526c9 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 04:05:26 +0900
Subject: [PATCH 22/48] =?UTF-8?q?refactor=20:=20template=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/lineManagerPage.js             |  2 +-
 src/components/stationManagerPage.js          |  5 ++-
 .../template/lineManagerTemplate.js}          | 32 +------------------
 .../template/stationManagerTemplate.js        | 25 +++++++++++++++
 4 files changed, 31 insertions(+), 33 deletions(-)
 rename src/{utils/templete.js => components/template/lineManagerTemplate.js} (65%)
 create mode 100644 src/components/template/stationManagerTemplate.js

diff --git a/src/components/lineManagerPage.js b/src/components/lineManagerPage.js
index 0d98abcd4..727cd0bdb 100644
--- a/src/components/lineManagerPage.js
+++ b/src/components/lineManagerPage.js
@@ -2,7 +2,7 @@ import {
   LINE_MANAGER_PAGE_TEMPLATE,
   ALL_STATION_OPTION_LIST,
   LINE_TABLE_TEMPLATE,
-} from '../utils/templete.js';
+} from './template/lineManagerTemplate.js';
 import { lineNameValidator, lineStationsValidator } from '../utils/validator/lineValidator.js';
 import stationStorage from '../utils/stationStorage.js';
 import lineStorage from '../utils/lineStorage.js';
diff --git a/src/components/stationManagerPage.js b/src/components/stationManagerPage.js
index 74ec373af..e57222bf6 100644
--- a/src/components/stationManagerPage.js
+++ b/src/components/stationManagerPage.js
@@ -1,4 +1,7 @@
-import { STATION_MANAGER_PAGE_TEMPLATE, STATION_TABLE_TEMPLATE } from '../utils/templete.js';
+import {
+  STATION_MANAGER_PAGE_TEMPLATE,
+  STATION_TABLE_TEMPLATE,
+} from './template/stationManagerTemplate.js';
 import {
   stationNameValidator,
   stationDeleteValidation,
diff --git a/src/utils/templete.js b/src/components/template/lineManagerTemplate.js
similarity index 65%
rename from src/utils/templete.js
rename to src/components/template/lineManagerTemplate.js
index b7cf0be2a..f973e67ce 100644
--- a/src/utils/templete.js
+++ b/src/components/template/lineManagerTemplate.js
@@ -1,27 +1,3 @@
-const STATION_MANAGER_PAGE_TEMPLATE = `<p><strong>역 이름</strong></p>
-  <input type="text" id="station-name-input" placeholder="역 이름을 입력해주세요.">
-  <button id="station-add-button">역 추가</button>
-  <div class="all-station-table">
-  <table border="1">
-  <h2>🚉 지하철 역 목록</h2>
-  <thead>
-  <tr>
-  <th>역 이름</th>
-  <th>설정</th>
-  </tr>
-  </thead>
-  <tbody class="station_manager_tbody">
-  </tbody>
-  </table>
-  </div>`;
-
-const STATION_TABLE_TEMPLATE = (station) => {
-  return `<tr id=${station.id} data-lines=${station.line}>
-    <td data-name=${station.name}>${station.name}</td>
-    <td><button class="station-delete-button">삭제</button></td>
-    </tr>`;
-};
-
 const LINE_MANAGER_PAGE_TEMPLATE = `<section class="line-registration">
     <p><strong>노선 이름</strong></p>
     <input type="text" id="line-name-input" placeholder="노선 이름을 입력해주세요">
@@ -71,10 +47,4 @@ const LINE_TABLE_TEMPLATE = (lines) => {
     </tr>`;
 };
 
-export {
-  STATION_MANAGER_PAGE_TEMPLATE,
-  STATION_TABLE_TEMPLATE,
-  LINE_MANAGER_PAGE_TEMPLATE,
-  ALL_STATION_OPTION_LIST,
-  LINE_TABLE_TEMPLATE,
-};
+export { LINE_MANAGER_PAGE_TEMPLATE, ALL_STATION_OPTION_LIST, LINE_TABLE_TEMPLATE };
diff --git a/src/components/template/stationManagerTemplate.js b/src/components/template/stationManagerTemplate.js
new file mode 100644
index 000000000..b6fdc37f9
--- /dev/null
+++ b/src/components/template/stationManagerTemplate.js
@@ -0,0 +1,25 @@
+const STATION_MANAGER_PAGE_TEMPLATE = `<p><strong>역 이름</strong></p>
+  <input type="text" id="station-name-input" placeholder="역 이름을 입력해주세요.">
+  <button id="station-add-button">역 추가</button>
+  <div class="all-station-table">
+  <table border="1">
+  <h2>🚉 지하철 역 목록</h2>
+  <thead>
+  <tr>
+  <th>역 이름</th>
+  <th>설정</th>
+  </tr>
+  </thead>
+  <tbody class="station_manager_tbody">
+  </tbody>
+  </table>
+  </div>`;
+
+const STATION_TABLE_TEMPLATE = (station) => {
+  return `<tr id=${station.id} data-lines=${station.line}>
+    <td data-name=${station.name}>${station.name}</td>
+    <td><button class="station-delete-button">삭제</button></td>
+    </tr>`;
+};
+
+export { STATION_MANAGER_PAGE_TEMPLATE, STATION_TABLE_TEMPLATE };

From 5f9b81e1574649c0486d861dd6c0d59a84d4a5fa Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 04:05:50 +0900
Subject: [PATCH 23/48] =?UTF-8?q?docs=20:=20README=20=EC=98=A4=ED=83=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/README.md b/README.md
index 112f2b8bd..f402a1dad 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@
 
 ### 지하철 구간 추가 기능
 8. 사용자는 노선에 역을 추가할 수 있다.
-    - [예외처리] 중복된 노선이 있는지 검증해야 한다.
+    - [예외처리] 중복된 역이 있는지 검증해야 한다.
     - [조건] 하나의 역은 여러개의 노선에 추가될 수 있다.
     - [조건] 역과 역 사이에 새로운 역이 추가 될 수 있다.
     - [조건] 노선에서 갈래길은 생길 수 없다.

From 603b9a4d7505579a875953263ff6914fc8040b9b Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 04:50:15 +0900
Subject: [PATCH 24/48] =?UTF-8?q?refactor=20:=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EA=B0=84=EB=9E=B5=ED=95=98=EA=B2=8C=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/lineStorage.js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/utils/lineStorage.js b/src/utils/lineStorage.js
index 4992056b4..69dd888a1 100644
--- a/src/utils/lineStorage.js
+++ b/src/utils/lineStorage.js
@@ -14,19 +14,11 @@ export default function lineStorage() {
   };
 
   const getStartPoints = () => {
-    if (!localStorage.getItem(LINE_STORAGE_NAME)) {
-      return [];
-    }
-    const startPoints = localStorage.getItem(LINE_STORAGE_NAME);
-    return JSON.parse(startPoints).map((line) => line.stations[0]);
+    return getLine().map((line) => line.stations[0]);
   };
 
   const getEndPoints = () => {
-    if (!localStorage.getItem(LINE_STORAGE_NAME)) {
-      return [];
-    }
-    const startPoints = localStorage.getItem(LINE_STORAGE_NAME);
-    return JSON.parse(startPoints).map((line) => line.stations[line.stations.length - 1]);
+    return getLine().map((line) => line.stations[line.stations.length - 1]);
   };
 
   return {

From b2663733edebdde3386fdb71fb048767808e765f Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 05:37:23 +0900
Subject: [PATCH 25/48] =?UTF-8?q?docs=20:=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20=EB=AA=A9=EB=A1=9D=20=EC=97=85=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/README.md b/README.md
index f402a1dad..a7a818659 100644
--- a/README.md
+++ b/README.md
@@ -23,17 +23,16 @@
 6. 사용자는 지하철 노선을 삭제할 수 있다.
 7. 사용자는 지하철 노선의 목록을 조회할 수 있다.
 
-### 지하철 구간 추가 기능
+### 지하철 구간 관련 기능
 8. 사용자는 노선에 역을 추가할 수 있다.
     - [예외처리] 중복된 역이 있는지 검증해야 한다.
     - [조건] 하나의 역은 여러개의 노선에 추가될 수 있다.
     - [조건] 역과 역 사이에 새로운 역이 추가 될 수 있다.
     - [조건] 노선에서 갈래길은 생길 수 없다.
-
-### 지하철 구간 삭제 기능
 9. 사용자는 노선의 역을 삭제할 수 있다.
     - [예외처리] 노선에 역이 2개 이하인지 검증하고, 2개 이하면 삭제할 수 없다.
     - [조건] 종점을 제거할 경우 다음 역이 종점이 된다.
+10. 사용자는 노선 별로 역의 목록을 볼 수 있다.
 
 ### 지하철 노선에 등록된 역 조회 기능
-10. 사용자 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 전체 노선과 역 목록을 조회할 수 있다.
+11. 사용자 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 전체 노선과 역 목록을 조회할 수 있다.

From dfcddd016fe77eabaa3aef5d121694a4371f7818 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 05:40:09 +0900
Subject: [PATCH 26/48] =?UTF-8?q?feat=20:=20=EB=85=B8=EC=84=A0=20=EB=B3=84?=
 =?UTF-8?q?=EB=A1=9C=20=EC=97=AD=EC=9D=98=20=EB=AA=A9=EB=A1=9D=EC=9D=84=20?=
 =?UTF-8?q?=EB=B3=BC=20=EC=88=98=20=EC=9E=88=EB=8A=94=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 구간 등록 화면 template 구현
- 사용자가 노선을 선택하면 노선의 구간 목록 테이블을 볼 수 있도록 구현
- localStorage에 한개의 노선만 가져오는 기능 구현
---
 src/components/sectionManagerPage.js          | 42 ++++++++++++++++
 .../template/sectionManagerTemplate.js        | 48 +++++++++++++++++++
 src/subwayMapApp.js                           |  3 +-
 src/utils/lineStorage.js                      |  5 ++
 4 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 src/components/sectionManagerPage.js
 create mode 100644 src/components/template/sectionManagerTemplate.js

diff --git a/src/components/sectionManagerPage.js b/src/components/sectionManagerPage.js
new file mode 100644
index 000000000..ab6f925d7
--- /dev/null
+++ b/src/components/sectionManagerPage.js
@@ -0,0 +1,42 @@
+import {
+  SECTION_MANAGER_PAGE_MENU_TEMPLATE,
+  SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE,
+  SECTION_MANAGER_PAGE_TABLE_TEMPLATE,
+  SECTION_LINE_MENU_BTN,
+  SECTION_TABLE_TEMPLATE,
+} from './template/sectionManagerTemplate.js';
+import lineStorage from '../utils/lineStorage.js';
+import stationStorage from '../utils/stationStorage.js';
+import { ALL_STATION_OPTION_LIST } from './template/lineManagerTemplate.js';
+
+export default function sectionManagerPage($element) {
+  const lines = lineStorage().getLine();
+  const stations = stationStorage().getStation();
+
+  $element.innerHTML = SECTION_MANAGER_PAGE_MENU_TEMPLATE;
+  const $listMenuBtn = $element.querySelector('.line-buttons');
+  $listMenuBtn.innerHTML = lines.map(SECTION_LINE_MENU_BTN).join('');
+  const $sectionSelectorContainer = $element.querySelector('#section-selector-container');
+  const $lineTitle = $element.querySelector('#line-title');
+
+  const renderSectionManager = (currentLine) => {
+    $lineTitle.innerText = `${currentLine.name} 관리`;
+    $sectionSelectorContainer.innerHTML = SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE;
+    const $sectionSelector = $element.querySelector('#section-station-selector');
+    const $sectionTable = $element.querySelector('#section-table');
+    $sectionSelector.innerHTML = ALL_STATION_OPTION_LIST(stations);
+    $sectionTable.innerHTML = SECTION_MANAGER_PAGE_TABLE_TEMPLATE;
+    const $sectionTableBody = $element.querySelector('.section-table-tbody');
+    $sectionTableBody.innerHTML = SECTION_TABLE_TEMPLATE(currentLine);
+  };
+
+  const onMenuFilterHandler = (e) => {
+    if (!e.target.classList.contains('section-line-menu-button')) {
+      return;
+    }
+    const currentLine = lineStorage().getOneLine(e.target.dataset.lineid);
+    renderSectionManager(currentLine);
+  };
+
+  $listMenuBtn.addEventListener('click', onMenuFilterHandler);
+}
diff --git a/src/components/template/sectionManagerTemplate.js b/src/components/template/sectionManagerTemplate.js
new file mode 100644
index 000000000..decf94dc9
--- /dev/null
+++ b/src/components/template/sectionManagerTemplate.js
@@ -0,0 +1,48 @@
+const SECTION_MANAGER_PAGE_MENU_TEMPLATE = `<section class="section-buttons-container">
+    <h3>구간을 수정할 노선을 선택해주세요</h3>
+    <nav class="line-buttons"></nav>
+    <h3 id="line-title"></h3>
+  </section>
+  <section id="section-selector-container"></section>
+  <section id="section-table"></section>`;
+
+const SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE = `<h4>구간 등록</h4>
+    <select name="start-station" id="section-station-selector"></select>
+    <input type="text" id="section-order-input" placeholder="순서">
+    <button id="section-add-button">등록</button>`;
+
+const SECTION_MANAGER_PAGE_TABLE_TEMPLATE = `<table border="1">
+      <thead>
+        <tr>
+          <th>순서</th>
+          <th>이름</th>
+          <th>설정</th>
+        </tr>
+      </thead>
+    <tbody class="section-table-tbody"></tbody>
+  </table>`;
+
+const SECTION_TABLE_TEMPLATE = ({ id, stations }) => {
+  return stations
+    .map(
+      (station, index) =>
+        `<tr id=${id}>
+           <td data-currentIndex=${index}>${index}</td>
+           <td data-name=${station.name}>${station.name}</td>
+           <td><button class="section-delete-button">노선에서 제거</button></td>
+       </tr>`
+    )
+    .join('');
+};
+
+const SECTION_LINE_MENU_BTN = (line) => {
+  return `<button class="section-line-menu-button" data-lineId=${line.id}>${line.name}</button>`;
+};
+
+export {
+  SECTION_MANAGER_PAGE_MENU_TEMPLATE,
+  SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE,
+  SECTION_MANAGER_PAGE_TABLE_TEMPLATE,
+  SECTION_LINE_MENU_BTN,
+  SECTION_TABLE_TEMPLATE,
+};
diff --git a/src/subwayMapApp.js b/src/subwayMapApp.js
index ca45e56c7..e5d096bae 100644
--- a/src/subwayMapApp.js
+++ b/src/subwayMapApp.js
@@ -1,5 +1,6 @@
 import stationManagerPage from './components/stationManagerPage.js';
 import lineManagerPage from './components/lineManagerPage.js';
+import sectionManagerPage from './components/sectionManagerPage.js';
 
 export default function subwayMapApp($element) {
   const $stationManagerBtn = $element.querySelector('#station-manager-button');
@@ -15,7 +16,7 @@ export default function subwayMapApp($element) {
     lineManagerPage($contentSection);
   };
   const onSectionManageHandler = () => {
-    console.log('구간관리 입니다.');
+    sectionManagerPage($contentSection);
   };
   const onMapPrintManageHandler = () => {
     console.log('전체 노선도 출력 입니다.');
diff --git a/src/utils/lineStorage.js b/src/utils/lineStorage.js
index 69dd888a1..9c96fa272 100644
--- a/src/utils/lineStorage.js
+++ b/src/utils/lineStorage.js
@@ -21,10 +21,15 @@ export default function lineStorage() {
     return getLine().map((line) => line.stations[line.stations.length - 1]);
   };
 
+  const getOneLine = (lineId) => {
+    return getLine().filter((line) => line.id === parseInt(lineId))[0];
+  };
+
   return {
     getLine,
     setLine,
     getStartPoints,
     getEndPoints,
+    getOneLine,
   };
 }

From 1cd523974988070f291b4cdc14f83027653cfba8 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 05:40:21 +0900
Subject: [PATCH 27/48] =?UTF-8?q?style=20:=20=20html=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/index.html b/index.html
index ed6d4b063..3012bea43 100644
--- a/index.html
+++ b/index.html
@@ -14,9 +14,17 @@
         color: black;
       }
 
+      button {
+        margin-left : 0.2rem;
+      }
+
       .select-line-points {
         margin: 1rem 0;
       }
+
+      #section-selector-container{
+        margin-bottom: 2rem;
+      }
     </style>
   </head>
   <body>

From abf48efb8add1f96e031670dfa02efc2833f35f1 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 16:28:31 +0900
Subject: [PATCH 28/48] =?UTF-8?q?refactor=20:=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=A9=94=EC=86=8C?=
 =?UTF-8?q?=EB=93=9C=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/Station.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/utils/Station.js b/src/utils/Station.js
index 38981c886..07c1baf13 100644
--- a/src/utils/Station.js
+++ b/src/utils/Station.js
@@ -2,12 +2,4 @@ export default function Station(id, name) {
   this.id = id;
   this.name = name;
   this.line = [];
-
-  this.setLine = (lineName) => {
-    if (this.line.includes(lineName)) {
-      alert(`${lineName}에 이미 ${name}역이 포함되어 있습니다.`);
-    } else {
-      this.line.push(lineName);
-    }
-  };
 }

From 10706542412be4152c48a56be2afae4a8d8bc03a Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 16:29:33 +0900
Subject: [PATCH 29/48] =?UTF-8?q?feat=20:=20station=20localstorag=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20id=EC=99=80=20=EC=9D=B4=EB=A6=84=EC=9C=BC=EB=A1=9C?=
 =?UTF-8?q?=20station,=20id=20=EA=B0=80=EC=A7=80=EA=B3=A0=20=EC=98=A4?=
 =?UTF-8?q?=EB=8A=94=20=EB=A9=94=EC=86=8C=EB=93=9C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/stationStorage.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/utils/stationStorage.js b/src/utils/stationStorage.js
index dd818caed..5ea458c16 100644
--- a/src/utils/stationStorage.js
+++ b/src/utils/stationStorage.js
@@ -1,7 +1,7 @@
 import { STATION_STORAGE_NAME } from './constant.js';
 
 export default function stationStorage() {
-  const getStation = () => {
+  const getStations = () => {
     if (!localStorage.getItem(STATION_STORAGE_NAME)) {
       return [];
     }
@@ -13,8 +13,18 @@ export default function stationStorage() {
     localStorage.setItem(STATION_STORAGE_NAME, JSON.stringify(station));
   };
 
+  const getStationIdByName = (stationName) => {
+    return getStations().filter((station) => station.name === stationName)[0].id;
+  };
+
+  const getStationIdById = (stationId) => {
+    return getStations().filter((station) => station.id === stationId)[0];
+  };
+
   return {
-    getStation,
+    getStations,
     setStation,
+    getStationIdByName,
+    getStationIdById,
   };
 }

From faa4e32ec448be17c71fa4d2d050de648ef6eaea Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 16:29:52 +0900
Subject: [PATCH 30/48] =?UTF-8?q?refactor=20:=20=EB=A9=94=EC=86=8C?=
 =?UTF-8?q?=EB=93=9C=20=EB=AA=85=20=EC=88=98=EC=A0=95=ED=95=9C=EA=B1=B0=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/stationManagerPage.js b/src/components/stationManagerPage.js
index e57222bf6..c43e32225 100644
--- a/src/components/stationManagerPage.js
+++ b/src/components/stationManagerPage.js
@@ -15,7 +15,7 @@ export default function stationManagerPage($element) {
   const $userStationSubmit = $element.querySelector('#station-add-button');
   const $stationTablebody = $element.querySelector('.station_manager_tbody');
 
-  let stations = stationStorage().getStation();
+  let stations = stationStorage().getStations();
 
   const showStations = () => {
     $stationTablebody.innerHTML = stations.map(STATION_TABLE_TEMPLATE).join('');

From 24da4655273396e09ef05c5907b03d3f81044ec5 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 16:32:45 +0900
Subject: [PATCH 31/48] =?UTF-8?q?refactor=20:=20line=20storage=20=EC=86=8D?=
 =?UTF-8?q?=EC=84=B1=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EB=85=B8=EC=84=A0?=
 =?UTF-8?q?=20=EC=82=AD=EC=A0=9C,=EB=93=B1=EB=A1=9D=20=EB=A1=9C=EC=A7=81?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- line storage에서 station 모두를 가지고 있는 것에서 id만 가지고 있게 수정
- 노선을 등록하고 삭제할 때, station storage에 적용안되던 것 적용되게 수정
---
 src/components/lineManagerPage.js             | 45 ++++++++++++++-----
 .../template/lineManagerTemplate.js           | 19 +++++---
 src/utils/Line.js                             |  9 ++--
 src/utils/lineStorage.js                      | 12 ++---
 src/utils/validator/lineValidator.js          | 39 +++++++++-------
 5 files changed, 80 insertions(+), 44 deletions(-)

diff --git a/src/components/lineManagerPage.js b/src/components/lineManagerPage.js
index 727cd0bdb..db33ab3f7 100644
--- a/src/components/lineManagerPage.js
+++ b/src/components/lineManagerPage.js
@@ -16,7 +16,7 @@ export default function stationManagerPage($element) {
   const $userLineSubmitBtn = $element.querySelector('#line-add-button');
   const $lineTableBody = $element.querySelector('.line-table-tbody');
 
-  const stations = stationStorage().getStation();
+  const stations = stationStorage().getStations();
   let lines = lineStorage().getLine();
 
   $startStation.innerHTML = ALL_STATION_OPTION_LIST(stations);
@@ -40,22 +40,45 @@ export default function stationManagerPage($element) {
   };
 
   const getStation = (stationName) => {
-    return stations.filter((station) => station.name === stationName);
+    return stations.filter((station) => station.name === stationName)[0];
   };
 
-  const createLine = (newLineName, startStationName, endStationName) => {
-    const startStation = getStation(startStationName)[0];
-    const endStation = getStation(endStationName)[0];
+  const getStationById = (stationIds) => {
+    return stations.filter((station) => station.id === stationIds)[0];
+  };
 
+  const addLineInStation = (lineId, stationName) => {
+    getStation(stationName).line.push(lineId);
+    stationStorage().setStation(stations);
+  };
+
+  const createLine = (newLineName, startStationName, endStationName) => {
+    const startStationId = stationStorage().getStationIdByName(startStationName);
+    const endStationId = stationStorage().getStationIdByName(endStationName);
     const newLine = new Line(getNewId(), newLineName);
-    newLine.setLine(startStation, 0);
-    newLine.setLine(endStation, 1);
+    newLine.setLine(startStationId, 0);
+    newLine.setLine(endStationId, 1);
+
+    addLineInStation(newLine.id, startStationName);
+    addLineInStation(newLine.id, endStationName);
     addLine(newLine);
   };
 
-  const deleteLine = (stationTag) => {
-    console.log(stationTag);
-    lines = lines.filter((line) => line.id !== parseInt(stationTag.id));
+  const removeLineInStation = (currentLineId) => {
+    const stationIdsInLine = lines.filter((line) => line.id === parseInt(currentLineId))[0]
+      .stationIds;
+
+    const stationsInLine = stationIdsInLine.map(getStationById);
+    for (let i = 0; i < stationsInLine.length; i++) {
+      const deleteIndex = stationsInLine[i].line.indexOf(parseInt(currentLineId));
+      stationsInLine[i].line.splice(deleteIndex, 1);
+    }
+    stationStorage().setStation(stations);
+  };
+
+  const removeLine = (currentLineId) => {
+    removeLineInStation(currentLineId);
+    lines = lines.filter((line) => line.id !== parseInt(currentLineId));
     lineStorage().setLine(lines);
     renderLines();
   };
@@ -65,7 +88,7 @@ export default function stationManagerPage($element) {
       return;
     }
     if (confirm('정말로 삭제하시겠습니까?')) {
-      deleteLine(e.target.closest('tr'));
+      removeLine(e.target.closest('tr').id);
     }
   };
 
diff --git a/src/components/template/lineManagerTemplate.js b/src/components/template/lineManagerTemplate.js
index f973e67ce..a50ce5a1c 100644
--- a/src/components/template/lineManagerTemplate.js
+++ b/src/components/template/lineManagerTemplate.js
@@ -1,3 +1,5 @@
+import stationStorage from '../../utils/stationStorage.js';
+
 const LINE_MANAGER_PAGE_TEMPLATE = `<section class="line-registration">
     <p><strong>노선 이름</strong></p>
     <input type="text" id="line-name-input" placeholder="노선 이름을 입력해주세요">
@@ -36,13 +38,18 @@ const ALL_STATION_OPTION_LIST = (stations) => {
     .join('');
 };
 
-const LINE_TABLE_TEMPLATE = (lines) => {
-  const lineLength = lines.stations.length;
+const LINE_TABLE_TEMPLATE = (line) => {
+  const lastStationId = line.stationIds[line.stationIds.length - 1];
+  const firstStationId = line.stationIds[0];
 
-  return `<tr id=${lines.id}>
-    <td data-name=${lines.name}>${lines.name}</td>
-    <td data-name=${lines.stations[0].name}>${lines.stations[0].name}</td>
-    <td data-name=${lines.stations[lineLength - 1].name}>${lines.stations[lineLength - 1].name}</td>
+  return `<tr id=${line.id}>
+    <td data-name=${line.name}>${line.name}</td>
+    <td data-name=${stationStorage().getStationIdById(firstStationId).name}>${
+    stationStorage().getStationIdById(firstStationId).name
+  }</td>
+    <td data-name=${stationStorage().getStationIdById(lastStationId).name}>${
+    stationStorage().getStationIdById(lastStationId).name
+  }</td>
     <td><button class="line-delete-button">삭제</button></td>
     </tr>`;
 };
diff --git a/src/utils/Line.js b/src/utils/Line.js
index a2a3b703a..c82eb4369 100644
--- a/src/utils/Line.js
+++ b/src/utils/Line.js
@@ -1,13 +1,12 @@
 export default function Line(id, name) {
   this.id = id;
   this.name = name;
-  this.stations = [];
+  this.stationIds = [];
 
-  this.setLine = (Station, index) => {
-    const stationNames = this.stations.map((station) => station.name);
-    if (stationNames.includes(Station)) {
+  this.setLine = (stationId, index) => {
+    if (this.stationIds.includes(stationId)) {
       alert('이미 등록되어 있습니다');
     }
-    this.stations.splice(index, 0, Station);
+    this.stationIds.splice(index, 0, stationId);
   };
 }
diff --git a/src/utils/lineStorage.js b/src/utils/lineStorage.js
index 9c96fa272..9b33232d5 100644
--- a/src/utils/lineStorage.js
+++ b/src/utils/lineStorage.js
@@ -13,12 +13,12 @@ export default function lineStorage() {
     localStorage.setItem(LINE_STORAGE_NAME, JSON.stringify(line));
   };
 
-  const getStartPoints = () => {
-    return getLine().map((line) => line.stations[0]);
+  const getStartPointsId = () => {
+    return getLine().map((line) => line.stationIds[0]);
   };
 
-  const getEndPoints = () => {
-    return getLine().map((line) => line.stations[line.stations.length - 1]);
+  const getEndPointsId = () => {
+    return getLine().map((line) => line.stationIds[line.stationIds.length - 1]);
   };
 
   const getOneLine = (lineId) => {
@@ -28,8 +28,8 @@ export default function lineStorage() {
   return {
     getLine,
     setLine,
-    getStartPoints,
-    getEndPoints,
+    getStartPointsId,
+    getEndPointsId,
     getOneLine,
   };
 }
diff --git a/src/utils/validator/lineValidator.js b/src/utils/validator/lineValidator.js
index 707dc97c9..d93acb6fc 100644
--- a/src/utils/validator/lineValidator.js
+++ b/src/utils/validator/lineValidator.js
@@ -1,4 +1,5 @@
 import lineStorage from '../lineStorage.js';
+import stationStorage from '../stationStorage.js';
 
 const isEqualName = (lines, lineName) => {
   return lines.some((line) => line.name === lineName) ? alert('중복된 노선 이름입니다.') : true;
@@ -21,26 +22,32 @@ const isEqualPoints = (startStationName, endStationName) => {
 };
 
 const isEqualLine = (startStationName, endStationName) => {
-  const startStations = lineStorage()
-    .getStartPoints()
-    .map((station) => station.name === startStationName);
-  const endStations = lineStorage()
-    .getEndPoints()
-    .map((station) => station.name === endStationName);
-
-  const equalLine = startStations.filter((station, index) => station && endStations[index]);
+  const startStationId = stationStorage().getStationIdByName(startStationName);
+  const endStationId = stationStorage().getStationIdByName(endStationName);
+
+  const startStationIds = lineStorage()
+    .getStartPointsId()
+    .map((stationId) => stationId === parseInt(startStationId));
+  const endStationIds = lineStorage()
+    .getEndPointsId()
+    .map((stationId) => stationId === parseInt(endStationId));
+
+  const equalLine = startStationIds.filter((station, index) => station && endStationIds[index]);
   return equalLine.length !== 0 ? alert('동일한 종점을 가진 노선이 있습니다') : true;
 };
 
 const isEqualReverseLine = (startStationName, endStationName) => {
-  const endStations = lineStorage()
-    .getStartPoints()
-    .map((station) => station.name === endStationName);
-  const StartStations = lineStorage()
-    .getEndPoints()
-    .map((station) => station.name === startStationName);
-
-  const equalLine = StartStations.filter((station, index) => station && endStations[index]);
+  const startStationId = stationStorage().getStationIdByName(startStationName);
+  const endStationId = stationStorage().getStationIdByName(endStationName);
+
+  const endStationsIds = lineStorage()
+    .getStartPointsId()
+    .map((stationId) => stationId === parseInt(startStationId));
+  const StartStationsIds = lineStorage()
+    .getEndPointsId()
+    .map((stationId) => stationId === parseInt(endStationId));
+
+  const equalLine = StartStationsIds.filter((station, index) => station && endStationsIds[index]);
   return equalLine.length !== 0 ? alert('동일한 종점을 가진 노선이 있습니다') : true;
 };
 

From 0553dcd1d8348737e477e39927def9b24f5d08cb Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 16:41:19 +0900
Subject: [PATCH 32/48] =?UTF-8?q?refatcor=20:=20=EB=B3=80=EC=88=98?=
 =?UTF-8?q?=EB=AA=85=20=EC=9E=98=EB=AA=BB=EB=90=9C=20=EA=B2=83=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/template/lineManagerTemplate.js | 8 ++++----
 src/utils/stationStorage.js                    | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/template/lineManagerTemplate.js b/src/components/template/lineManagerTemplate.js
index a50ce5a1c..1255fc9c0 100644
--- a/src/components/template/lineManagerTemplate.js
+++ b/src/components/template/lineManagerTemplate.js
@@ -44,11 +44,11 @@ const LINE_TABLE_TEMPLATE = (line) => {
 
   return `<tr id=${line.id}>
     <td data-name=${line.name}>${line.name}</td>
-    <td data-name=${stationStorage().getStationIdById(firstStationId).name}>${
-    stationStorage().getStationIdById(firstStationId).name
+    <td data-name=${stationStorage().getStationById(firstStationId).name}>${
+    stationStorage().getStationById(firstStationId).name
   }</td>
-    <td data-name=${stationStorage().getStationIdById(lastStationId).name}>${
-    stationStorage().getStationIdById(lastStationId).name
+    <td data-name=${stationStorage().getStationById(lastStationId).name}>${
+    stationStorage().getStationById(lastStationId).name
   }</td>
     <td><button class="line-delete-button">삭제</button></td>
     </tr>`;
diff --git a/src/utils/stationStorage.js b/src/utils/stationStorage.js
index 5ea458c16..4289c4018 100644
--- a/src/utils/stationStorage.js
+++ b/src/utils/stationStorage.js
@@ -17,7 +17,7 @@ export default function stationStorage() {
     return getStations().filter((station) => station.name === stationName)[0].id;
   };
 
-  const getStationIdById = (stationId) => {
+  const getStationById = (stationId) => {
     return getStations().filter((station) => station.id === stationId)[0];
   };
 
@@ -25,6 +25,6 @@ export default function stationStorage() {
     getStations,
     setStation,
     getStationIdByName,
-    getStationIdById,
+    getStationById,
   };
 }

From 1649fa568b642dbeb0c8d57acd728884bdd7c1d2 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 17:11:41 +0900
Subject: [PATCH 33/48] =?UTF-8?q?feat=20:=20=EB=85=B8=EC=84=A0=EC=97=90=20?=
 =?UTF-8?q?=EC=97=AD=20=EC=B6=94=EA=B0=80=ED=95=98=EB=8A=94=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 중복된 역이 없는지 유효성 검사 구현
- 입력하는 index의 유효성 검사 구현
---
 src/components/oneSectionManager.js           | 77 +++++++++++++++++++
 src/components/sectionManagerPage.js          | 22 +-----
 .../template/sectionManagerTemplate.js        | 16 ++--
 src/utils/validator/sectionValidator.js       | 30 ++++++++
 4 files changed, 120 insertions(+), 25 deletions(-)
 create mode 100644 src/components/oneSectionManager.js
 create mode 100644 src/utils/validator/sectionValidator.js

diff --git a/src/components/oneSectionManager.js b/src/components/oneSectionManager.js
new file mode 100644
index 000000000..ccf0a7be7
--- /dev/null
+++ b/src/components/oneSectionManager.js
@@ -0,0 +1,77 @@
+import {
+  sectionIndexValidator,
+  sectionStationNameValidator,
+} from '../utils/validator/sectionValidator.js';
+import {
+  SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE,
+  SECTION_MANAGER_PAGE_TABLE_TEMPLATE,
+  SECTION_TABLE_TEMPLATE,
+} from './template/sectionManagerTemplate.js';
+import { ALL_STATION_OPTION_LIST } from './template/lineManagerTemplate.js';
+import stationStorage from '../utils/stationStorage.js';
+import lineStorage from '../utils/lineStorage.js';
+
+export default function oneSectionManager($container, $table, line) {
+  const stations = stationStorage().getStations();
+  const lines = lineStorage().getLine();
+
+  $container.innerHTML = SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE;
+  const $lineTitle = $container.querySelector('#line-title');
+  $lineTitle.innerText = `${line.name} 관리`;
+
+  const $sectionSelector = $container.querySelector('#section-station-selector');
+  $sectionSelector.innerHTML = ALL_STATION_OPTION_LIST(stations);
+
+  $table.innerHTML = SECTION_MANAGER_PAGE_TABLE_TEMPLATE;
+  const $sectionTableBody = $table.querySelector('.section-table-tbody');
+  $sectionTableBody.innerHTML = SECTION_TABLE_TEMPLATE(line);
+
+  const $userSectionIndexInput = $container.querySelector('#section-order-input');
+  const $userSelectStationBtn = $container.querySelector('#section-station-selector');
+  const $userSectionSubmitBtn = $container.querySelector('#section-add-button');
+
+  const renderSection = (newLine) => {
+    $sectionTableBody.innerHTML = SECTION_TABLE_TEMPLATE(newLine);
+  };
+
+  const getStationById = (stationIds) => {
+    return stations.filter((station) => station.id === stationIds)[0];
+  };
+
+  const updateLineState = (stationId, stationIndex) => {
+    line.stationIds.splice(stationIndex, 0, stationId);
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].id === line.id) {
+        lines[i] = line;
+      }
+    }
+    lineStorage().setLine(lines);
+    return line;
+  };
+
+  const updateStationState = (stationId) => {
+    getStationById(stationId).line.push(line.id);
+    stationStorage().setStation(stations);
+  };
+
+  const updateSection = (stationName, stationIndex) => {
+    const stationId = stationStorage().getStationIdByName(stationName);
+    updateStationState(stationIndex);
+    renderSection(updateLineState(stationId, stationIndex));
+  };
+
+  const onSectionSubmitHandler = () => {
+    const userSelectStationName = $userSelectStationBtn.value;
+    const userSectionIndex = parseInt($userSectionIndexInput.value);
+
+    if (
+      sectionStationNameValidator(line, stations, userSelectStationName) &&
+      sectionIndexValidator(line.stationIds.length, userSectionIndex)
+    ) {
+      updateSection(userSelectStationName, userSectionIndex);
+    }
+    $userSectionIndexInput.value = '';
+  };
+
+  $userSectionSubmitBtn.addEventListener('click', onSectionSubmitHandler);
+}
diff --git a/src/components/sectionManagerPage.js b/src/components/sectionManagerPage.js
index ab6f925d7..9f86347bc 100644
--- a/src/components/sectionManagerPage.js
+++ b/src/components/sectionManagerPage.js
@@ -1,41 +1,25 @@
 import {
   SECTION_MANAGER_PAGE_MENU_TEMPLATE,
-  SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE,
-  SECTION_MANAGER_PAGE_TABLE_TEMPLATE,
   SECTION_LINE_MENU_BTN,
-  SECTION_TABLE_TEMPLATE,
 } from './template/sectionManagerTemplate.js';
 import lineStorage from '../utils/lineStorage.js';
-import stationStorage from '../utils/stationStorage.js';
-import { ALL_STATION_OPTION_LIST } from './template/lineManagerTemplate.js';
+import oneSectionManager from './oneSectionManager.js';
 
 export default function sectionManagerPage($element) {
   const lines = lineStorage().getLine();
-  const stations = stationStorage().getStation();
 
   $element.innerHTML = SECTION_MANAGER_PAGE_MENU_TEMPLATE;
   const $listMenuBtn = $element.querySelector('.line-buttons');
   $listMenuBtn.innerHTML = lines.map(SECTION_LINE_MENU_BTN).join('');
   const $sectionSelectorContainer = $element.querySelector('#section-selector-container');
-  const $lineTitle = $element.querySelector('#line-title');
-
-  const renderSectionManager = (currentLine) => {
-    $lineTitle.innerText = `${currentLine.name} 관리`;
-    $sectionSelectorContainer.innerHTML = SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE;
-    const $sectionSelector = $element.querySelector('#section-station-selector');
-    const $sectionTable = $element.querySelector('#section-table');
-    $sectionSelector.innerHTML = ALL_STATION_OPTION_LIST(stations);
-    $sectionTable.innerHTML = SECTION_MANAGER_PAGE_TABLE_TEMPLATE;
-    const $sectionTableBody = $element.querySelector('.section-table-tbody');
-    $sectionTableBody.innerHTML = SECTION_TABLE_TEMPLATE(currentLine);
-  };
+  const $sectionTable = $element.querySelector('#section-table');
 
   const onMenuFilterHandler = (e) => {
     if (!e.target.classList.contains('section-line-menu-button')) {
       return;
     }
     const currentLine = lineStorage().getOneLine(e.target.dataset.lineid);
-    renderSectionManager(currentLine);
+    oneSectionManager($sectionSelectorContainer, $sectionTable, currentLine);
   };
 
   $listMenuBtn.addEventListener('click', onMenuFilterHandler);
diff --git a/src/components/template/sectionManagerTemplate.js b/src/components/template/sectionManagerTemplate.js
index decf94dc9..e89c7fa39 100644
--- a/src/components/template/sectionManagerTemplate.js
+++ b/src/components/template/sectionManagerTemplate.js
@@ -1,15 +1,17 @@
+import stationStorage from '../../utils/stationStorage.js';
+
 const SECTION_MANAGER_PAGE_MENU_TEMPLATE = `<section class="section-buttons-container">
     <h3>구간을 수정할 노선을 선택해주세요</h3>
     <nav class="line-buttons"></nav>
-    <h3 id="line-title"></h3>
   </section>
   <section id="section-selector-container"></section>
   <section id="section-table"></section>`;
 
-const SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE = `<h4>구간 등록</h4>
-    <select name="start-station" id="section-station-selector"></select>
-    <input type="text" id="section-order-input" placeholder="순서">
-    <button id="section-add-button">등록</button>`;
+const SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE = `<h3 id="line-title"></h3>
+  <h4>구간 등록</h4>
+  <select name="start-station" id="section-station-selector"></select>
+  <input type="number" id="section-order-input" placeholder="순서">
+  <button id="section-add-button">등록</button>`;
 
 const SECTION_MANAGER_PAGE_TABLE_TEMPLATE = `<table border="1">
       <thead>
@@ -22,7 +24,9 @@ const SECTION_MANAGER_PAGE_TABLE_TEMPLATE = `<table border="1">
     <tbody class="section-table-tbody"></tbody>
   </table>`;
 
-const SECTION_TABLE_TEMPLATE = ({ id, stations }) => {
+const SECTION_TABLE_TEMPLATE = ({ id, stationIds }) => {
+  const stations = stationIds.map(stationStorage().getStationById);
+
   return stations
     .map(
       (station, index) =>
diff --git a/src/utils/validator/sectionValidator.js b/src/utils/validator/sectionValidator.js
new file mode 100644
index 000000000..6560c4c33
--- /dev/null
+++ b/src/utils/validator/sectionValidator.js
@@ -0,0 +1,30 @@
+const isNotRegistered = (id, stations, stationName) => {
+  const stationLines = stations.filter((station) => station.name === stationName)[0].line;
+  return stationLines.includes(id) ? alert('이미 등록된 역입니다') : true;
+};
+
+const isNumber = (sectionIndex) => {
+  return Number.isNaN(sectionIndex) ? alert('정확한 숫자를 입력해주세요') : true;
+};
+
+const isPositiveNumber = (sectionIndex) => {
+  return sectionIndex >= 0 ? true : alert('음수가 아닌 0 이상의 숫자를 입력해주세요');
+};
+
+const isCorrectIndex = (sectionLength, sectionIndex) => {
+  return sectionIndex <= sectionLength ? true : alert('입력한 순서를 확인해주세요');
+};
+
+function sectionStationNameValidator({ id }, stations, stationName) {
+  return isNotRegistered(id, stations, stationName);
+}
+
+function sectionIndexValidator(sectionLength, sectionIndex) {
+  return (
+    isNumber(sectionIndex) &&
+    isPositiveNumber(sectionIndex) &&
+    isCorrectIndex(sectionLength, sectionIndex)
+  );
+}
+
+export { sectionStationNameValidator, sectionIndexValidator };

From ac69f86949fec4054d7dc5580e81c01e18f896b4 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 18:16:52 +0900
Subject: [PATCH 34/48] =?UTF-8?q?feat=20:=20=EB=85=B8=EC=84=A0=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EC=97=AD=EC=9D=84=20=EC=82=AD=EC=A0=9C=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/oneSectionManager.js           | 39 +++++++++++++++++++
 .../template/sectionManagerTemplate.js        |  2 +-
 src/utils/validator/sectionValidator.js       | 16 +++++++-
 3 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/components/oneSectionManager.js b/src/components/oneSectionManager.js
index ccf0a7be7..68e44cc84 100644
--- a/src/components/oneSectionManager.js
+++ b/src/components/oneSectionManager.js
@@ -1,6 +1,7 @@
 import {
   sectionIndexValidator,
   sectionStationNameValidator,
+  sectionDeleteValidator,
 } from '../utils/validator/sectionValidator.js';
 import {
   SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE,
@@ -60,6 +61,43 @@ export default function oneSectionManager($container, $table, line) {
     renderSection(updateLineState(stationId, stationIndex));
   };
 
+  const removeStationInLine = (stationId) => {
+    const deleteIndex = line.stationIds.findIndex((id) => id === stationId);
+    line.stationIds.splice(deleteIndex, 1);
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].id === line.id) {
+        lines[i] = line;
+      }
+    }
+    lineStorage().setLine(lines);
+    return line;
+  };
+
+  const removeLineInStation = (stationId, lineId) => {
+    const station = getStationById(stationId);
+    const deleteIndex = station.line.findIndex((lineNum) => lineNum === lineId);
+    station.line.splice(deleteIndex, 1);
+    stationStorage().setStation(stations);
+  };
+
+  const removeStationInSection = (stationId, lineId) => {
+    removeLineInStation(stationId, lineId);
+    console.log(lines);
+    renderSection(removeStationInLine(stationId));
+  };
+
+  const onRemoveSubmitHandler = (e) => {
+    const stationId = parseInt(e.target.dataset.stationid);
+    const lineId = parseInt(e.target.closest('tr').id); // line.id
+    if (Number.isNaN(stationId)) {
+      return;
+    }
+
+    if (sectionDeleteValidator(lineId) && confirm('정말로 노선에서 삭제하시겠습니까?')) {
+      removeStationInSection(stationId, lineId);
+    }
+  };
+
   const onSectionSubmitHandler = () => {
     const userSelectStationName = $userSelectStationBtn.value;
     const userSectionIndex = parseInt($userSectionIndexInput.value);
@@ -74,4 +112,5 @@ export default function oneSectionManager($container, $table, line) {
   };
 
   $userSectionSubmitBtn.addEventListener('click', onSectionSubmitHandler);
+  $sectionTableBody.addEventListener('click', onRemoveSubmitHandler);
 }
diff --git a/src/components/template/sectionManagerTemplate.js b/src/components/template/sectionManagerTemplate.js
index e89c7fa39..cf0a3304b 100644
--- a/src/components/template/sectionManagerTemplate.js
+++ b/src/components/template/sectionManagerTemplate.js
@@ -33,7 +33,7 @@ const SECTION_TABLE_TEMPLATE = ({ id, stationIds }) => {
         `<tr id=${id}>
            <td data-currentIndex=${index}>${index}</td>
            <td data-name=${station.name}>${station.name}</td>
-           <td><button class="section-delete-button">노선에서 제거</button></td>
+           <td><button class="section-delete-button" data-stationId=${station.id}>노선에서 제거</button></td>
        </tr>`
     )
     .join('');
diff --git a/src/utils/validator/sectionValidator.js b/src/utils/validator/sectionValidator.js
index 6560c4c33..49e5993c6 100644
--- a/src/utils/validator/sectionValidator.js
+++ b/src/utils/validator/sectionValidator.js
@@ -1,3 +1,5 @@
+import lineStorage from '../lineStorage.js';
+
 const isNotRegistered = (id, stations, stationName) => {
   const stationLines = stations.filter((station) => station.name === stationName)[0].line;
   return stationLines.includes(id) ? alert('이미 등록된 역입니다') : true;
@@ -15,6 +17,14 @@ const isCorrectIndex = (sectionLength, sectionIndex) => {
   return sectionIndex <= sectionLength ? true : alert('입력한 순서를 확인해주세요');
 };
 
+const isLengthLongerThanTwo = (lineId) => {
+  const stationLength = lineStorage().getOneLine(lineId).stationIds.length;
+  if (stationLength < 3) {
+    return alert('노선은 최소 2개의 역으로 이루어져 있습니다.');
+  }
+  return true;
+};
+
 function sectionStationNameValidator({ id }, stations, stationName) {
   return isNotRegistered(id, stations, stationName);
 }
@@ -27,4 +37,8 @@ function sectionIndexValidator(sectionLength, sectionIndex) {
   );
 }
 
-export { sectionStationNameValidator, sectionIndexValidator };
+function sectionDeleteValidator(lineId) {
+  return isLengthLongerThanTwo(lineId);
+}
+
+export { sectionStationNameValidator, sectionIndexValidator, sectionDeleteValidator };

From 263b8c1c8aefa488e134d447b6124f7d60b610b4 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 18:28:56 +0900
Subject: [PATCH 35/48] =?UTF-8?q?fix=20:=20=EB=85=B8=EC=84=A0=EC=97=90=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=ED=95=A0=20=EB=95=8C=20station=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 선택하지 않은 station에 노선 번호가 들어가는 오류 수정
---
 src/components/oneSectionManager.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/oneSectionManager.js b/src/components/oneSectionManager.js
index 68e44cc84..e0625fa23 100644
--- a/src/components/oneSectionManager.js
+++ b/src/components/oneSectionManager.js
@@ -57,7 +57,7 @@ export default function oneSectionManager($container, $table, line) {
 
   const updateSection = (stationName, stationIndex) => {
     const stationId = stationStorage().getStationIdByName(stationName);
-    updateStationState(stationIndex);
+    updateStationState(stationId);
     renderSection(updateLineState(stationId, stationIndex));
   };
 

From 7ea4917e9f95f247594cb30405414f5a6e8bdc56 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 19:04:29 +0900
Subject: [PATCH 36/48] =?UTF-8?q?feat=20:=20=EC=A0=84=EC=B2=B4=20=EC=A7=80?=
 =?UTF-8?q?=ED=95=98=EC=B2=A0=20=EB=85=B8=EC=84=A0=EB=8F=84=20=EB=B3=B4?=
 =?UTF-8?q?=EC=97=AC=EC=A3=BC=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mapPrintManagerPage.js         |  5 ++++
 .../template/mapPrintManagerTemplate.js       | 24 +++++++++++++++++++
 src/subwayMapApp.js                           |  3 ++-
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 src/components/mapPrintManagerPage.js
 create mode 100644 src/components/template/mapPrintManagerTemplate.js

diff --git a/src/components/mapPrintManagerPage.js b/src/components/mapPrintManagerPage.js
new file mode 100644
index 000000000..d8ef19f85
--- /dev/null
+++ b/src/components/mapPrintManagerPage.js
@@ -0,0 +1,5 @@
+import MAP_MANAGER_PAGE_TEMPLATE from './template/mapPrintManagerTemplate.js';
+
+export default function mapPrintManagerPage($element) {
+  $element.innerHTML = MAP_MANAGER_PAGE_TEMPLATE();
+}
diff --git a/src/components/template/mapPrintManagerTemplate.js b/src/components/template/mapPrintManagerTemplate.js
new file mode 100644
index 000000000..fed0719d9
--- /dev/null
+++ b/src/components/template/mapPrintManagerTemplate.js
@@ -0,0 +1,24 @@
+import stationStorage from '../../utils/stationStorage.js';
+import lineStorage from '../../utils/lineStorage.js';
+
+const STATION_LIST_TEMPLATE = (stationId) => {
+  const station = stationStorage().getStationById(stationId);
+  return `<li data-stationId=${station.id}>${station.name}</li>`;
+};
+
+const MAP_MANAGER_PAGE_TEMPLATE = () => {
+  const lines = lineStorage().getLine();
+  return `<div class="map">
+  ${lines
+    .map(
+      (line) =>
+        `<article><h3>${line.name}</h3>
+           <ui data-lineId=${line.id}>${line.stationIds
+          .map(STATION_LIST_TEMPLATE)
+          .join('')}</ui></article>`
+    )
+    .join('')}
+  </div>`;
+};
+
+export default MAP_MANAGER_PAGE_TEMPLATE;
diff --git a/src/subwayMapApp.js b/src/subwayMapApp.js
index e5d096bae..4205f9eec 100644
--- a/src/subwayMapApp.js
+++ b/src/subwayMapApp.js
@@ -1,6 +1,7 @@
 import stationManagerPage from './components/stationManagerPage.js';
 import lineManagerPage from './components/lineManagerPage.js';
 import sectionManagerPage from './components/sectionManagerPage.js';
+import mapPrintManagerPage from './components/mapPrintManagerPage.js';
 
 export default function subwayMapApp($element) {
   const $stationManagerBtn = $element.querySelector('#station-manager-button');
@@ -19,7 +20,7 @@ export default function subwayMapApp($element) {
     sectionManagerPage($contentSection);
   };
   const onMapPrintManageHandler = () => {
-    console.log('전체 노선도 출력 입니다.');
+    mapPrintManagerPage($contentSection);
   };
 
   $stationManagerBtn.addEventListener('click', onStationManageHandler);

From 7434a800c75a51335d63eaaf65baf28615279ef0 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 19:04:45 +0900
Subject: [PATCH 37/48] =?UTF-8?q?style=20:=20css=20style=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/index.html b/index.html
index 3012bea43..b0d5daab9 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,10 @@
         margin-left : 0.2rem;
       }
 
+      li {
+        margin-left : 1rem;
+      }
+
       .select-line-points {
         margin: 1rem 0;
       }

From 7db007572f6dfd00f534cc5f2f6207be845dc35e Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 21:56:23 +0900
Subject: [PATCH 38/48] =?UTF-8?q?refactor=20:=20init=20=ED=95=A8=EC=88=98?=
 =?UTF-8?q?=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EA=B5=AC=EC=84=B1=EC=9A=94=EC=86=8C=20views=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 전역변수로 있던 변수들을 init 함수에 넣기
---
 src/subwayMapApp.js | 39 +++++++++++++++------------------------
 1 file changed, 15 insertions(+), 24 deletions(-)

diff --git a/src/subwayMapApp.js b/src/subwayMapApp.js
index 4205f9eec..31c00ff79 100644
--- a/src/subwayMapApp.js
+++ b/src/subwayMapApp.js
@@ -1,30 +1,21 @@
-import stationManagerPage from './components/stationManagerPage.js';
-import lineManagerPage from './components/lineManagerPage.js';
-import sectionManagerPage from './components/sectionManagerPage.js';
-import mapPrintManagerPage from './components/mapPrintManagerPage.js';
+import stationManagerPage from './components/views/stationManagerPage.js';
+import lineManagerPage from './components/views/lineManagerPage.js';
+import sectionManagerPage from './components/views/SectionManagerPages/sectionManagerPage.js';
+import mapPrintManagerPage from './components/views/mapPrintManagerPage.js';
 
 export default function subwayMapApp($element) {
-  const $stationManagerBtn = $element.querySelector('#station-manager-button');
-  const $lineManagerBtn = $element.querySelector('#line-manager-button');
-  const $sectionManagerBtn = $element.querySelector('#section-manager-button');
-  const $mapPrintManagerBtn = $element.querySelector('#map-print-manager-button');
-  const $contentSection = $element.querySelector('.content-container');
+  const init = () => {
+    const $stationManagerBtn = $element.querySelector('#station-manager-button');
+    const $lineManagerBtn = $element.querySelector('#line-manager-button');
+    const $sectionManagerBtn = $element.querySelector('#section-manager-button');
+    const $mapPrintManagerBtn = $element.querySelector('#map-print-manager-button');
+    const $contentSection = $element.querySelector('.content-container');
 
-  const onStationManageHandler = () => {
-    stationManagerPage($contentSection);
-  };
-  const onLineManageHandler = () => {
-    lineManagerPage($contentSection);
-  };
-  const onSectionManageHandler = () => {
-    sectionManagerPage($contentSection);
-  };
-  const onMapPrintManageHandler = () => {
-    mapPrintManagerPage($contentSection);
+    $stationManagerBtn.addEventListener('click', () => stationManagerPage($contentSection));
+    $lineManagerBtn.addEventListener('click', () => lineManagerPage($contentSection));
+    $sectionManagerBtn.addEventListener('click', () => sectionManagerPage($contentSection));
+    $mapPrintManagerBtn.addEventListener('click', () => mapPrintManagerPage($contentSection));
   };
 
-  $stationManagerBtn.addEventListener('click', onStationManageHandler);
-  $lineManagerBtn.addEventListener('click', onLineManageHandler);
-  $sectionManagerBtn.addEventListener('click', onSectionManageHandler);
-  $mapPrintManagerBtn.addEventListener('click', onMapPrintManageHandler);
+  init();
 }

From 52b6f711858c5cdda399bba308c5be20bbcb10c1 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 22:02:54 +0900
Subject: [PATCH 39/48] =?UTF-8?q?refactor=20:=20storage=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EA=B4=80=EB=A0=A8?=
 =?UTF-8?q?=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/{utils => storage}/lineStorage.js    | 2 +-
 src/{utils => storage}/stationStorage.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename src/{utils => storage}/lineStorage.js (93%)
 rename src/{utils => storage}/stationStorage.js (92%)

diff --git a/src/utils/lineStorage.js b/src/storage/lineStorage.js
similarity index 93%
rename from src/utils/lineStorage.js
rename to src/storage/lineStorage.js
index 9b33232d5..fcc797a31 100644
--- a/src/utils/lineStorage.js
+++ b/src/storage/lineStorage.js
@@ -1,4 +1,4 @@
-import { LINE_STORAGE_NAME } from './constant.js';
+import { LINE_STORAGE_NAME } from '../utils/constant.js';
 
 export default function lineStorage() {
   const getLine = () => {
diff --git a/src/utils/stationStorage.js b/src/storage/stationStorage.js
similarity index 92%
rename from src/utils/stationStorage.js
rename to src/storage/stationStorage.js
index 4289c4018..e6b1b9891 100644
--- a/src/utils/stationStorage.js
+++ b/src/storage/stationStorage.js
@@ -1,4 +1,4 @@
-import { STATION_STORAGE_NAME } from './constant.js';
+import { STATION_STORAGE_NAME } from '../utils/constant.js';
 
 export default function stationStorage() {
   const getStations = () => {

From f02d06e387089077b04378f915f1402508842156 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 22:03:25 +0900
Subject: [PATCH 40/48] =?UTF-8?q?refactor=20:=20=EC=97=AD=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EA=B8=B0=EB=8A=A5=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- temeplate 코드 정렬
- 역관리 화면 파일(stationManagerPage) views 폴더 생성하여 이동
- stationManagerPage 속 변수명 수정
- 최소 글자수 상수로 저장
- 역 이름 및 삭제할 때 유효성 검사 코드 리팩토링
---
 .../template/stationManagerTemplate.js        | 21 ++++---
 .../{ => views}/stationManagerPage.js         | 58 ++++++++++---------
 src/utils/constant.js                         |  3 +-
 src/utils/validator/stationValidator.js       | 21 +++----
 4 files changed, 51 insertions(+), 52 deletions(-)
 rename src/components/{ => views}/stationManagerPage.js (71%)

diff --git a/src/components/template/stationManagerTemplate.js b/src/components/template/stationManagerTemplate.js
index b6fdc37f9..209f21d6b 100644
--- a/src/components/template/stationManagerTemplate.js
+++ b/src/components/template/stationManagerTemplate.js
@@ -2,17 +2,16 @@ const STATION_MANAGER_PAGE_TEMPLATE = `<p><strong>역 이름</strong></p>
   <input type="text" id="station-name-input" placeholder="역 이름을 입력해주세요.">
   <button id="station-add-button">역 추가</button>
   <div class="all-station-table">
-  <table border="1">
-  <h2>🚉 지하철 역 목록</h2>
-  <thead>
-  <tr>
-  <th>역 이름</th>
-  <th>설정</th>
-  </tr>
-  </thead>
-  <tbody class="station_manager_tbody">
-  </tbody>
-  </table>
+    <table border="1">
+    <h2>🚉 지하철 역 목록</h2>
+    <thead>
+      <tr>
+        <th>역 이름</th>
+        <th>설정</th>
+      </tr>
+    </thead>
+    <tbody class="station_manager_tbody"></tbody>
+    </table>
   </div>`;
 
 const STATION_TABLE_TEMPLATE = (station) => {
diff --git a/src/components/stationManagerPage.js b/src/components/views/stationManagerPage.js
similarity index 71%
rename from src/components/stationManagerPage.js
rename to src/components/views/stationManagerPage.js
index c43e32225..17762faac 100644
--- a/src/components/stationManagerPage.js
+++ b/src/components/views/stationManagerPage.js
@@ -1,41 +1,24 @@
 import {
   STATION_MANAGER_PAGE_TEMPLATE,
   STATION_TABLE_TEMPLATE,
-} from './template/stationManagerTemplate.js';
+} from '../template/stationManagerTemplate.js';
 import {
   stationNameValidator,
   stationDeleteValidation,
-} from '../utils/validator/stationValidator.js';
-import stationStorage from '../utils/stationStorage.js';
-import Station from '../utils/Station.js';
+} from '../../utils/validator/stationValidator.js';
+import stationStorage from '../../storage/stationStorage.js';
+import Station from '../../utils/Station.js';
 
 export default function stationManagerPage($element) {
   $element.innerHTML = STATION_MANAGER_PAGE_TEMPLATE;
   const $userStationInput = $element.querySelector('#station-name-input');
   const $userStationSubmit = $element.querySelector('#station-add-button');
-  const $stationTablebody = $element.querySelector('.station_manager_tbody');
+  const $stationTableBody = $element.querySelector('.station_manager_tbody');
 
   let stations = stationStorage().getStations();
 
-  const showStations = () => {
-    $stationTablebody.innerHTML = stations.map(STATION_TABLE_TEMPLATE).join('');
-  };
-
-  const getNewId = () => {
-    if (!stations || stations.length === 0) {
-      return 0;
-    }
-    return stations[stations.length - 1].id + 1;
-  };
-
-  const addStations = (newStations) => {
-    stations.push(newStations);
-    stationStorage().setStation(stations);
-    showStations();
-  };
-
-  const createStation = (newStationName) => {
-    addStations(new Station(getNewId(), newStationName));
+  const renderStationTable = () => {
+    $stationTableBody.innerHTML = stations.map(STATION_TABLE_TEMPLATE).join('');
   };
 
   const deleteStation = (stationTag) => {
@@ -44,14 +27,33 @@ export default function stationManagerPage($element) {
     }
     stations = stations.filter((station) => station.id !== parseInt(stationTag.id));
     stationStorage().setStation(stations);
-    showStations();
+    renderStationTable();
   };
 
   const onStationDeleteHandler = (e) => {
     if (!e.target.classList.contains('station-delete-button')) {
       return false;
     }
-    deleteStation(e.target.closest('tr'));
+    if (confirm('정말로 삭제하시겠습니까?')) {
+      deleteStation(e.target.closest('tr'));
+    }
+  };
+
+  const addStations = (newStations) => {
+    stations.push(newStations);
+    stationStorage().setStation(stations);
+    renderStationTable();
+  };
+
+  const getNewId = () => {
+    if (!stations || stations.length === 0) {
+      return 0;
+    }
+    return stations[stations.length - 1].id + 1;
+  };
+
+  const createStation = (newStationName) => {
+    addStations(new Station(getNewId(), newStationName));
   };
 
   const onStationSubmitHandler = () => {
@@ -63,6 +65,6 @@ export default function stationManagerPage($element) {
   };
 
   $userStationSubmit.addEventListener('click', onStationSubmitHandler);
-  $stationTablebody.addEventListener('click', onStationDeleteHandler);
-  showStations();
+  $stationTableBody.addEventListener('click', onStationDeleteHandler);
+  renderStationTable();
 }
diff --git a/src/utils/constant.js b/src/utils/constant.js
index 38363dfcb..2dd21c072 100644
--- a/src/utils/constant.js
+++ b/src/utils/constant.js
@@ -1,4 +1,5 @@
 const STATION_STORAGE_NAME = 'STATIONS';
 const LINE_STORAGE_NAME = 'LINES';
+const NAME_MINT_LENGTH = 2;
 
-export { STATION_STORAGE_NAME, LINE_STORAGE_NAME };
+export { STATION_STORAGE_NAME, LINE_STORAGE_NAME, NAME_MINT_LENGTH };
diff --git a/src/utils/validator/stationValidator.js b/src/utils/validator/stationValidator.js
index 7d382d49d..cd50c3771 100644
--- a/src/utils/validator/stationValidator.js
+++ b/src/utils/validator/stationValidator.js
@@ -1,22 +1,19 @@
+import { NAME_MINT_LENGTH } from '../constant.js';
+
 const isNameLengthLongerThanTwo = (stationName) => {
-  if (stationName.length < 2) {
-    return alert('이름은 두글자 이상입니다');
-  }
-  return true;
+  return stationName.length < NAME_MINT_LENGTH ? alert('이름은 두글자 이상입니다') : true;
 };
 
 const isEqualName = (stations, stationName) => {
-  if (stations && stations.map((value) => value.name).includes(stationName)) {
-    return alert('중복된 이름입니다.');
-  }
-  return true;
+  return stations && stations.map((value) => value.name).includes(stationName)
+    ? alert('중복된 이름입니다.')
+    : true;
 };
 
 const isIncludedLine = (stationTag) => {
-  if (stationTag.dataset.lines.length !== 0) {
-    return alert('노선에 포함되어 있는 라인은 삭제할 수 없습니다');
-  }
-  return true;
+  return stationTag.dataset.lines.length !== 0
+    ? alert('노선에 포함되어 있는 라인은 삭제할 수 없습니다')
+    : true;
 };
 
 function stationNameValidator(stations, stationName) {

From 07227100081511088a3c82f6e4d9f10657bcdb00 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 22:32:18 +0900
Subject: [PATCH 41/48] =?UTF-8?q?refactor=20:=20=EB=B3=80=EC=88=98?=
 =?UTF-8?q?=EB=AA=85=20=EB=B3=B5=EC=88=98=ED=98=95=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/storage/lineStorage.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/storage/lineStorage.js b/src/storage/lineStorage.js
index fcc797a31..4d9fcdbec 100644
--- a/src/storage/lineStorage.js
+++ b/src/storage/lineStorage.js
@@ -1,7 +1,7 @@
 import { LINE_STORAGE_NAME } from '../utils/constant.js';
 
 export default function lineStorage() {
-  const getLine = () => {
+  const getLines = () => {
     if (!localStorage.getItem(LINE_STORAGE_NAME)) {
       return [];
     }
@@ -14,19 +14,19 @@ export default function lineStorage() {
   };
 
   const getStartPointsId = () => {
-    return getLine().map((line) => line.stationIds[0]);
+    return getLines().map((line) => line.stationIds[0]);
   };
 
   const getEndPointsId = () => {
-    return getLine().map((line) => line.stationIds[line.stationIds.length - 1]);
+    return getLines().map((line) => line.stationIds[line.stationIds.length - 1]);
   };
 
   const getOneLine = (lineId) => {
-    return getLine().filter((line) => line.id === parseInt(lineId))[0];
+    return getLines().filter((line) => line.id === parseInt(lineId))[0];
   };
 
   return {
-    getLine,
+    getLines,
     setLine,
     getStartPointsId,
     getEndPointsId,

From a555f28319296107d0a8b4197324011d7a5bd2dc Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 22:34:17 +0900
Subject: [PATCH 42/48] =?UTF-8?q?refactor=20:=20=EB=85=B8=EC=84=A0=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EA=B8=B0=EB=8A=A5=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- views 폴더로 lineManagerPage 파일 이동
- 메소드 순서 수정
---
 .../template/lineManagerTemplate.js           |  2 +-
 src/components/{ => views}/lineManagerPage.js | 77 +++++++++----------
 2 files changed, 38 insertions(+), 41 deletions(-)
 rename src/components/{ => views}/lineManagerPage.js (74%)

diff --git a/src/components/template/lineManagerTemplate.js b/src/components/template/lineManagerTemplate.js
index 1255fc9c0..815ac02d3 100644
--- a/src/components/template/lineManagerTemplate.js
+++ b/src/components/template/lineManagerTemplate.js
@@ -1,4 +1,4 @@
-import stationStorage from '../../utils/stationStorage.js';
+import stationStorage from '../../storage/stationStorage.js';
 
 const LINE_MANAGER_PAGE_TEMPLATE = `<section class="line-registration">
     <p><strong>노선 이름</strong></p>
diff --git a/src/components/lineManagerPage.js b/src/components/views/lineManagerPage.js
similarity index 74%
rename from src/components/lineManagerPage.js
rename to src/components/views/lineManagerPage.js
index db33ab3f7..6eea2a0fb 100644
--- a/src/components/lineManagerPage.js
+++ b/src/components/views/lineManagerPage.js
@@ -2,11 +2,11 @@ import {
   LINE_MANAGER_PAGE_TEMPLATE,
   ALL_STATION_OPTION_LIST,
   LINE_TABLE_TEMPLATE,
-} from './template/lineManagerTemplate.js';
-import { lineNameValidator, lineStationsValidator } from '../utils/validator/lineValidator.js';
-import stationStorage from '../utils/stationStorage.js';
-import lineStorage from '../utils/lineStorage.js';
-import Line from '../utils/Line.js';
+} from '../template/lineManagerTemplate.js';
+import { lineNameValidator, lineStationsValidator } from '../../utils/validator/lineValidator.js';
+import stationStorage from '../../storage/stationStorage.js';
+import lineStorage from '../../storage/lineStorage.js';
+import Line from '../../utils/Line.js';
 
 export default function stationManagerPage($element) {
   $element.innerHTML = LINE_MANAGER_PAGE_TEMPLATE;
@@ -17,7 +17,7 @@ export default function stationManagerPage($element) {
   const $lineTableBody = $element.querySelector('.line-table-tbody');
 
   const stations = stationStorage().getStations();
-  let lines = lineStorage().getLine();
+  let lines = lineStorage().getLines();
 
   $startStation.innerHTML = ALL_STATION_OPTION_LIST(stations);
   $endStation.innerHTML = ALL_STATION_OPTION_LIST(stations);
@@ -33,42 +33,15 @@ export default function stationManagerPage($element) {
     return lines[lines.length - 1].id + 1;
   };
 
-  const addLine = (newLine) => {
-    lines.push(newLine);
-    lineStorage().setLine(lines);
-    renderLines();
-  };
-
-  const getStation = (stationName) => {
-    return stations.filter((station) => station.name === stationName)[0];
-  };
-
   const getStationById = (stationIds) => {
     return stations.filter((station) => station.id === stationIds)[0];
   };
 
-  const addLineInStation = (lineId, stationName) => {
-    getStation(stationName).line.push(lineId);
-    stationStorage().setStation(stations);
-  };
-
-  const createLine = (newLineName, startStationName, endStationName) => {
-    const startStationId = stationStorage().getStationIdByName(startStationName);
-    const endStationId = stationStorage().getStationIdByName(endStationName);
-    const newLine = new Line(getNewId(), newLineName);
-    newLine.setLine(startStationId, 0);
-    newLine.setLine(endStationId, 1);
-
-    addLineInStation(newLine.id, startStationName);
-    addLineInStation(newLine.id, endStationName);
-    addLine(newLine);
-  };
-
   const removeLineInStation = (currentLineId) => {
-    const stationIdsInLine = lines.filter((line) => line.id === parseInt(currentLineId))[0]
-      .stationIds;
+    const stationsInLine = lines
+      .filter((line) => line.id === parseInt(currentLineId))[0]
+      .stationIds.map(getStationById);
 
-    const stationsInLine = stationIdsInLine.map(getStationById);
     for (let i = 0; i < stationsInLine.length; i++) {
       const deleteIndex = stationsInLine[i].line.indexOf(parseInt(currentLineId));
       stationsInLine[i].line.splice(deleteIndex, 1);
@@ -92,17 +65,41 @@ export default function stationManagerPage($element) {
     }
   };
 
+  const addLine = (newLine) => {
+    lines.push(newLine);
+    lineStorage().setLine(lines);
+    renderLines();
+  };
+
+  const getStation = (stationName) => {
+    return stations.filter((station) => station.name === stationName)[0];
+  };
+
+  const addLineInStation = (lineId, stationName) => {
+    getStation(stationName).line.push(lineId);
+    stationStorage().setStation(stations);
+  };
+
+  const createLine = (newLineName, startStationName, endStationName) => {
+    const newLine = new Line(getNewId(), newLineName);
+    newLine.setLine(stationStorage().getStationIdByName(startStationName), 0);
+    newLine.setLine(stationStorage().getStationIdByName(endStationName), 1);
+
+    addLineInStation(newLine.id, startStationName);
+    addLineInStation(newLine.id, endStationName);
+    addLine(newLine);
+  };
+
   const onLineSubmitHandler = () => {
     const newLineName = $userInputLine.value;
-    const startStationName = $startStation.value;
-    const endStationName = $endStation.value;
 
     if (
       lineNameValidator(lines, newLineName) &&
-      lineStationsValidator(startStationName, endStationName)
+      lineStationsValidator($startStation.value, $endStation.value)
     ) {
-      createLine(newLineName, startStationName, endStationName);
+      createLine(newLineName, $startStation.value, $endStation.value);
     }
+
     $userInputLine.value = '';
   };
 

From 0b0cb07aab4c4c14b5702724b7017d99f5025881 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 22:35:13 +0900
Subject: [PATCH 43/48] =?UTF-8?q?refactor=20:=20=EB=85=B8=EC=84=A0=20?=
 =?UTF-8?q?=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 함수 역할 분리
- 불필요한 변수 삭제
---
 src/utils/validator/lineValidator.js | 36 +++++++++++++---------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/utils/validator/lineValidator.js b/src/utils/validator/lineValidator.js
index d93acb6fc..a4cec836e 100644
--- a/src/utils/validator/lineValidator.js
+++ b/src/utils/validator/lineValidator.js
@@ -1,5 +1,5 @@
-import lineStorage from '../lineStorage.js';
-import stationStorage from '../stationStorage.js';
+import lineStorage from '../../storage/lineStorage.js';
+import stationStorage from '../../storage/stationStorage.js';
 
 const isEqualName = (lines, lineName) => {
   return lines.some((line) => line.name === lineName) ? alert('중복된 노선 이름입니다.') : true;
@@ -21,31 +21,29 @@ const isEqualPoints = (startStationName, endStationName) => {
     : true;
 };
 
-const isEqualLine = (startStationName, endStationName) => {
-  const startStationId = stationStorage().getStationIdByName(startStationName);
-  const endStationId = stationStorage().getStationIdByName(endStationName);
-
-  const startStationIds = lineStorage()
+const getStartStationIds = (stationName) => {
+  return lineStorage()
     .getStartPointsId()
-    .map((stationId) => stationId === parseInt(startStationId));
-  const endStationIds = lineStorage()
+    .map((stationId) => stationId === parseInt(stationStorage().getStationIdByName(stationName)));
+};
+
+const getEndStationIds = (stationName) => {
+  return lineStorage()
     .getEndPointsId()
-    .map((stationId) => stationId === parseInt(endStationId));
+    .map((stationId) => stationId === parseInt(stationStorage().getStationIdByName(stationName)));
+};
+
+const isEqualLine = (startStationName, endStationName) => {
+  const startStationIds = getStartStationIds(startStationName);
+  const endStationIds = getEndStationIds(endStationName);
 
   const equalLine = startStationIds.filter((station, index) => station && endStationIds[index]);
   return equalLine.length !== 0 ? alert('동일한 종점을 가진 노선이 있습니다') : true;
 };
 
 const isEqualReverseLine = (startStationName, endStationName) => {
-  const startStationId = stationStorage().getStationIdByName(startStationName);
-  const endStationId = stationStorage().getStationIdByName(endStationName);
-
-  const endStationsIds = lineStorage()
-    .getStartPointsId()
-    .map((stationId) => stationId === parseInt(startStationId));
-  const StartStationsIds = lineStorage()
-    .getEndPointsId()
-    .map((stationId) => stationId === parseInt(endStationId));
+  const endStationsIds = getStartStationIds(startStationName);
+  const StartStationsIds = getEndStationIds(endStationName);
 
   const equalLine = StartStationsIds.filter((station, index) => station && endStationsIds[index]);
   return equalLine.length !== 0 ? alert('동일한 종점을 가진 노선이 있습니다') : true;

From ff349819d7ee0c71837fc8789183b7761d805c3d Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 22:53:03 +0900
Subject: [PATCH 44/48] =?UTF-8?q?refactor=20:=20=EC=98=A4=ED=83=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=20section=20=EC=B5=9C?=
 =?UTF-8?q?=EC=86=8C=20=EA=B0=9C=EC=88=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/constant.js                   | 5 +++--
 src/utils/validator/stationValidator.js | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/utils/constant.js b/src/utils/constant.js
index 2dd21c072..98c0788fe 100644
--- a/src/utils/constant.js
+++ b/src/utils/constant.js
@@ -1,5 +1,6 @@
 const STATION_STORAGE_NAME = 'STATIONS';
 const LINE_STORAGE_NAME = 'LINES';
-const NAME_MINT_LENGTH = 2;
+const NAME_MIN_LENGTH = 2;
+const SECTION_MIN_LENGTH = 2;
 
-export { STATION_STORAGE_NAME, LINE_STORAGE_NAME, NAME_MINT_LENGTH };
+export { STATION_STORAGE_NAME, LINE_STORAGE_NAME, NAME_MIN_LENGTH, SECTION_MIN_LENGTH };
diff --git a/src/utils/validator/stationValidator.js b/src/utils/validator/stationValidator.js
index cd50c3771..12f8763b8 100644
--- a/src/utils/validator/stationValidator.js
+++ b/src/utils/validator/stationValidator.js
@@ -1,7 +1,7 @@
-import { NAME_MINT_LENGTH } from '../constant.js';
+import { NAME_MIN_LENGTH } from '../constant.js';
 
 const isNameLengthLongerThanTwo = (stationName) => {
-  return stationName.length < NAME_MINT_LENGTH ? alert('이름은 두글자 이상입니다') : true;
+  return stationName.length < NAME_MIN_LENGTH ? alert('이름은 두글자 이상입니다') : true;
 };
 
 const isEqualName = (stations, stationName) => {

From 20456c213e68d1f5893fcbb5bdb5ede213a30bd0 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 22:56:01 +0900
Subject: [PATCH 45/48] =?UTF-8?q?refactor=20:=20=EB=85=B8=EC=84=A0=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=EA=B8=B0=EB=8A=A5=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- views 폴더로 SectionManager 파일 이동
- 불필요한 변수 삭제 및 빠른 return
- 메소드 순서 변경
---
 .../template/sectionManagerTemplate.js        | 10 ++--
 .../sectionManagerPage.js                     | 10 ++--
 .../singleSectionManager.js}                  | 59 +++++++++----------
 src/utils/validator/sectionValidator.js       | 21 +++----
 4 files changed, 50 insertions(+), 50 deletions(-)
 rename src/components/{ => views/SectionManagerPages}/sectionManagerPage.js (71%)
 rename src/components/{oneSectionManager.js => views/SectionManagerPages/singleSectionManager.js} (89%)

diff --git a/src/components/template/sectionManagerTemplate.js b/src/components/template/sectionManagerTemplate.js
index cf0a3304b..7a5123daf 100644
--- a/src/components/template/sectionManagerTemplate.js
+++ b/src/components/template/sectionManagerTemplate.js
@@ -1,4 +1,4 @@
-import stationStorage from '../../utils/stationStorage.js';
+import stationStorage from '../../storage/stationStorage.js';
 
 const SECTION_MANAGER_PAGE_MENU_TEMPLATE = `<section class="section-buttons-container">
     <h3>구간을 수정할 노선을 선택해주세요</h3>
@@ -7,6 +7,10 @@ const SECTION_MANAGER_PAGE_MENU_TEMPLATE = `<section class="section-buttons-cont
   <section id="section-selector-container"></section>
   <section id="section-table"></section>`;
 
+const SECTION_LINE_MENU_BTN = (line) => {
+  return `<button class="section-line-menu-button" data-lineId=${line.id}>${line.name}</button>`;
+};
+
 const SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE = `<h3 id="line-title"></h3>
   <h4>구간 등록</h4>
   <select name="start-station" id="section-station-selector"></select>
@@ -39,10 +43,6 @@ const SECTION_TABLE_TEMPLATE = ({ id, stationIds }) => {
     .join('');
 };
 
-const SECTION_LINE_MENU_BTN = (line) => {
-  return `<button class="section-line-menu-button" data-lineId=${line.id}>${line.name}</button>`;
-};
-
 export {
   SECTION_MANAGER_PAGE_MENU_TEMPLATE,
   SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE,
diff --git a/src/components/sectionManagerPage.js b/src/components/views/SectionManagerPages/sectionManagerPage.js
similarity index 71%
rename from src/components/sectionManagerPage.js
rename to src/components/views/SectionManagerPages/sectionManagerPage.js
index 9f86347bc..d5f0cb7a1 100644
--- a/src/components/sectionManagerPage.js
+++ b/src/components/views/SectionManagerPages/sectionManagerPage.js
@@ -1,12 +1,12 @@
 import {
   SECTION_MANAGER_PAGE_MENU_TEMPLATE,
   SECTION_LINE_MENU_BTN,
-} from './template/sectionManagerTemplate.js';
-import lineStorage from '../utils/lineStorage.js';
-import oneSectionManager from './oneSectionManager.js';
+} from '../../template/sectionManagerTemplate.js';
+import lineStorage from '../../../storage/lineStorage.js';
+import singleSectionManager from './singleSectionManager.js';
 
 export default function sectionManagerPage($element) {
-  const lines = lineStorage().getLine();
+  const lines = lineStorage().getLines();
 
   $element.innerHTML = SECTION_MANAGER_PAGE_MENU_TEMPLATE;
   const $listMenuBtn = $element.querySelector('.line-buttons');
@@ -19,7 +19,7 @@ export default function sectionManagerPage($element) {
       return;
     }
     const currentLine = lineStorage().getOneLine(e.target.dataset.lineid);
-    oneSectionManager($sectionSelectorContainer, $sectionTable, currentLine);
+    singleSectionManager($sectionSelectorContainer, $sectionTable, currentLine);
   };
 
   $listMenuBtn.addEventListener('click', onMenuFilterHandler);
diff --git a/src/components/oneSectionManager.js b/src/components/views/SectionManagerPages/singleSectionManager.js
similarity index 89%
rename from src/components/oneSectionManager.js
rename to src/components/views/SectionManagerPages/singleSectionManager.js
index e0625fa23..c6af11abe 100644
--- a/src/components/oneSectionManager.js
+++ b/src/components/views/SectionManagerPages/singleSectionManager.js
@@ -2,19 +2,19 @@ import {
   sectionIndexValidator,
   sectionStationNameValidator,
   sectionDeleteValidator,
-} from '../utils/validator/sectionValidator.js';
+} from '../../../utils/validator/sectionValidator.js';
 import {
   SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE,
   SECTION_MANAGER_PAGE_TABLE_TEMPLATE,
   SECTION_TABLE_TEMPLATE,
-} from './template/sectionManagerTemplate.js';
-import { ALL_STATION_OPTION_LIST } from './template/lineManagerTemplate.js';
-import stationStorage from '../utils/stationStorage.js';
-import lineStorage from '../utils/lineStorage.js';
+} from '../../template/sectionManagerTemplate.js';
+import { ALL_STATION_OPTION_LIST } from '../../template/lineManagerTemplate.js';
+import stationStorage from '../../../storage/stationStorage.js';
+import lineStorage from '../../../storage/lineStorage.js';
 
-export default function oneSectionManager($container, $table, line) {
+export default function singleSectionManager($container, $table, line) {
   const stations = stationStorage().getStations();
-  const lines = lineStorage().getLine();
+  const lines = lineStorage().getLines();
 
   $container.innerHTML = SECTION_MANAGER_PAGE_SELECTOR_TEMPLATE;
   const $lineTitle = $container.querySelector('#line-title');
@@ -39,28 +39,6 @@ export default function oneSectionManager($container, $table, line) {
     return stations.filter((station) => station.id === stationIds)[0];
   };
 
-  const updateLineState = (stationId, stationIndex) => {
-    line.stationIds.splice(stationIndex, 0, stationId);
-    for (let i = 0; i < lines.length; i++) {
-      if (lines[i].id === line.id) {
-        lines[i] = line;
-      }
-    }
-    lineStorage().setLine(lines);
-    return line;
-  };
-
-  const updateStationState = (stationId) => {
-    getStationById(stationId).line.push(line.id);
-    stationStorage().setStation(stations);
-  };
-
-  const updateSection = (stationName, stationIndex) => {
-    const stationId = stationStorage().getStationIdByName(stationName);
-    updateStationState(stationId);
-    renderSection(updateLineState(stationId, stationIndex));
-  };
-
   const removeStationInLine = (stationId) => {
     const deleteIndex = line.stationIds.findIndex((id) => id === stationId);
     line.stationIds.splice(deleteIndex, 1);
@@ -82,7 +60,6 @@ export default function oneSectionManager($container, $table, line) {
 
   const removeStationInSection = (stationId, lineId) => {
     removeLineInStation(stationId, lineId);
-    console.log(lines);
     renderSection(removeStationInLine(stationId));
   };
 
@@ -98,6 +75,28 @@ export default function oneSectionManager($container, $table, line) {
     }
   };
 
+  const updateLineState = (stationId, stationIndex) => {
+    line.stationIds.splice(stationIndex, 0, stationId);
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].id === line.id) {
+        lines[i] = line;
+      }
+    }
+    lineStorage().setLine(lines);
+    return line;
+  };
+
+  const updateStationState = (stationId) => {
+    getStationById(stationId).line.push(line.id);
+    stationStorage().setStation(stations);
+  };
+
+  const updateSection = (stationName, stationIndex) => {
+    const stationId = stationStorage().getStationIdByName(stationName);
+    updateStationState(stationId);
+    renderSection(updateLineState(stationId, stationIndex));
+  };
+
   const onSectionSubmitHandler = () => {
     const userSelectStationName = $userSelectStationBtn.value;
     const userSectionIndex = parseInt($userSectionIndexInput.value);
diff --git a/src/utils/validator/sectionValidator.js b/src/utils/validator/sectionValidator.js
index 49e5993c6..d5438036d 100644
--- a/src/utils/validator/sectionValidator.js
+++ b/src/utils/validator/sectionValidator.js
@@ -1,9 +1,5 @@
-import lineStorage from '../lineStorage.js';
-
-const isNotRegistered = (id, stations, stationName) => {
-  const stationLines = stations.filter((station) => station.name === stationName)[0].line;
-  return stationLines.includes(id) ? alert('이미 등록된 역입니다') : true;
-};
+import lineStorage from '../../storage/lineStorage.js';
+import { SECTION_MIN_LENGTH } from '../constant.js';
 
 const isNumber = (sectionIndex) => {
   return Number.isNaN(sectionIndex) ? alert('정확한 숫자를 입력해주세요') : true;
@@ -19,10 +15,15 @@ const isCorrectIndex = (sectionLength, sectionIndex) => {
 
 const isLengthLongerThanTwo = (lineId) => {
   const stationLength = lineStorage().getOneLine(lineId).stationIds.length;
-  if (stationLength < 3) {
-    return alert('노선은 최소 2개의 역으로 이루어져 있습니다.');
-  }
-  return true;
+  return stationLength <= SECTION_MIN_LENGTH
+    ? alert('노선은 최소 2개의 역으로 이루어져 있습니다.')
+    : true;
+};
+
+const isNotRegistered = (id, stations, stationName) => {
+  return stations.filter((station) => station.name === stationName)[0].line.includes(id)
+    ? alert('이미 등록된 역입니다')
+    : true;
 };
 
 function sectionStationNameValidator({ id }, stations, stationName) {

From 21182c75a3e1aaf7339fe79fbdb953738be13df9 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 22:58:01 +0900
Subject: [PATCH 46/48] =?UTF-8?q?refactor=20:=20=EC=A0=84=EC=B2=B4=20?=
 =?UTF-8?q?=EC=A7=80=ED=95=98=EC=B2=A0=20=EB=85=B8=EC=84=A0=20=EB=B3=B4?=
 =?UTF-8?q?=EC=97=AC=EC=A3=BC=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- views 폴더 생성 및 파일 이동
---
 src/components/template/mapPrintManagerTemplate.js | 6 +++---
 src/components/{ => views}/mapPrintManagerPage.js  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/components/{ => views}/mapPrintManagerPage.js (58%)

diff --git a/src/components/template/mapPrintManagerTemplate.js b/src/components/template/mapPrintManagerTemplate.js
index fed0719d9..b96ac3494 100644
--- a/src/components/template/mapPrintManagerTemplate.js
+++ b/src/components/template/mapPrintManagerTemplate.js
@@ -1,5 +1,5 @@
-import stationStorage from '../../utils/stationStorage.js';
-import lineStorage from '../../utils/lineStorage.js';
+import stationStorage from '../../storage/stationStorage.js';
+import lineStorage from '../../storage/lineStorage.js';
 
 const STATION_LIST_TEMPLATE = (stationId) => {
   const station = stationStorage().getStationById(stationId);
@@ -7,7 +7,7 @@ const STATION_LIST_TEMPLATE = (stationId) => {
 };
 
 const MAP_MANAGER_PAGE_TEMPLATE = () => {
-  const lines = lineStorage().getLine();
+  const lines = lineStorage().getLines();
   return `<div class="map">
   ${lines
     .map(
diff --git a/src/components/mapPrintManagerPage.js b/src/components/views/mapPrintManagerPage.js
similarity index 58%
rename from src/components/mapPrintManagerPage.js
rename to src/components/views/mapPrintManagerPage.js
index d8ef19f85..71938c49e 100644
--- a/src/components/mapPrintManagerPage.js
+++ b/src/components/views/mapPrintManagerPage.js
@@ -1,4 +1,4 @@
-import MAP_MANAGER_PAGE_TEMPLATE from './template/mapPrintManagerTemplate.js';
+import MAP_MANAGER_PAGE_TEMPLATE from '../template/mapPrintManagerTemplate.js';
 
 export default function mapPrintManagerPage($element) {
   $element.innerHTML = MAP_MANAGER_PAGE_TEMPLATE();

From d85b549c203ff35c68f7598a4c86fc9b2fee3397 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 22:58:32 +0900
Subject: [PATCH 47/48] =?UTF-8?q?chore=20:=20eslint=20rules=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index ee22f13cf..3a2021c21 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -21,6 +21,8 @@
     "no-restricted-properties": "off",
     "max-depth" : ["error", 2],
     "no-return-assign" : "off",
-    "no-continue" : "off"
+    "no-continue" : "off",
+    "no-param-reassign" : "off",
+    "import/extensions" : "off"
   }
 }

From 29813913ae5db7af0167d4adb6037a16bc4f86d1 Mon Sep 17 00:00:00 2001
From: devhyun637 <59258239+devhyun637@users.noreply.github.com>
Date: Tue, 15 Dec 2020 23:03:06 +0900
Subject: [PATCH 48/48] =?UTF-8?q?fix=20:=20=EB=8F=99=EC=9D=BC=ED=95=9C=20?=
 =?UTF-8?q?=EC=A2=85=EC=A0=90=EC=9D=84=20=EA=B0=80=EC=A7=84=20=EC=97=AD=20?=
 =?UTF-8?q?=EA=B2=80=EC=A6=9D=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/validator/lineValidator.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/utils/validator/lineValidator.js b/src/utils/validator/lineValidator.js
index a4cec836e..bc338d0bd 100644
--- a/src/utils/validator/lineValidator.js
+++ b/src/utils/validator/lineValidator.js
@@ -42,10 +42,10 @@ const isEqualLine = (startStationName, endStationName) => {
 };
 
 const isEqualReverseLine = (startStationName, endStationName) => {
-  const endStationsIds = getStartStationIds(startStationName);
-  const StartStationsIds = getEndStationIds(endStationName);
+  const startStationIds = getStartStationIds(endStationName);
+  const endStationIds = getEndStationIds(startStationName);
 
-  const equalLine = StartStationsIds.filter((station, index) => station && endStationsIds[index]);
+  const equalLine = startStationIds.filter((station, index) => station && endStationIds[index]);
   return equalLine.length !== 0 ? alert('동일한 종점을 가진 노선이 있습니다') : true;
 };