From c2e22c34494a8632b2c83e19d9c5e94e9f230389 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Wed, 9 Dec 2020 18:26:16 +0900
Subject: [PATCH 01/44] docs: describe features

---
 README.md | 169 ++++++++++++++++++------------------------------------
 1 file changed, 55 insertions(+), 114 deletions(-)

diff --git a/README.md b/README.md
index e97a1d649..2f34748ca 100644
--- a/README.md
+++ b/README.md
@@ -1,114 +1,55 @@
-# 🚇 지하철 노선도 미션
-
-## 🚀 기능 요구사항
-
-### 지하철 역 관련 기능
-- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
-- 중복된 지하철 역 이름이 등록될 수 없다.
-- 지하철 역은 2글자 이상이어야 한다.
-- 지하철 역의 목록을 조회할 수 있다.
-
-### 지하철 노선 관련 기능
-- 지하철 노선을 등록하고 삭제할 수 있다.
-- 중복된 지하철 노선 이름이 등록될 수 없다.
-- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
-- 지하철 노선의 목록을 조회할 수 있다.
-
-### 지하철 구간 추가 기능
-- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
-- 하나의 역은 여러개의 노선에 추가될 수 있다.
-- 역과 역 사이에 새로운 역이 추가 될 수 있다.
-- 노선에서 갈래길은 생길 수 없다.
-
-<img width="500" src="/images/section1.png">
-
-### 지하철 구간 삭제 기능
-- 노선에 등록된 역을 제거할 수 있다.
-- 종점을 제거할 경우 다음 역이 종점이 된다.
-- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
-
-<img width="500" src="/images/section2.png">
-
-### 지하철 노선에 등록된 역 조회 기능
-- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
-
-<br/>
-
-## 💻 프로그램 실행 결과
-
-### 역관리
-<img width="100%" src="/images/station_manager.gif">
-
-### 노선관리
-<img width="100%" src="/images/line_manager.gif">
-
-### 구간관리
-<img width="100%" src="/images/section_manager.gif">
-
-### 노선도 출력
-<img width="100%" src="/images/map_print_manager.gif">
-
-
-## ✅ 프로그래밍 요구사항
-
-### 메뉴 버튼
-- 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
-- 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
-- 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
-- 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
-
-### 지하철 역 관련 기능
-- 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
-- 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
-- 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
-
-### 지하철 노선 관련 기능
-- 지하철 노선의 이름을 입력하는 input 태그는 `#line-name-input` id값을 가진다.
-- 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
-- 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
-- 지하철 노선을 추가하는 button 태그는 `#line-add-button` id값을 가진다.
-- 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
-
-### 지하철 구간 추가 기능
-- 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
-- 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
-- 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
-- 지하철 구간을 등록하는 button 태그는 `#section-add-button` id값을 가진다.
-- 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
-
-### 지하철 노선도 출력 기능
-- 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
-
-### 기존 요구사항
-
-- 사용자가 잘못된 입력 값을 작성한 경우 `alert`을 이용해 메시지를 보여주고, 재입력할 수 있게 한다.
-- 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않고, 순수 Vanilla JS로만 구현한다.
-- **자바스크립트 코드 컨벤션을 지키면서 프로그래밍** 한다
-  - [https://google.github.io/styleguide/jsguide.html](https://google.github.io/styleguide/jsguide.html)
-  - [https://ui.toast.com/fe-guide/ko_CODING-CONVENSION/](https://ui.toast.com/fe-guide/ko_CODING-CONVENTION)
-- **indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용**한다.
-  - 예를 들어 while문 안에 if문이 있으면 들여쓰기는 2이다.
-  - 힌트: indent(인덴트, 들여쓰기) depth를 줄이는 좋은 방법은 함수(또는 메소드)를 분리하면 된다.
-- **함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.**
-  - 함수(또는 메소드)가 한 가지 일만 잘 하도록 구현한다.
-- 변수 선언시 `var` 를 사용하지 않는다. `const` 와 `let` 을 사용한다.
-  - [const](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const)
-  - [let](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let)
-- `import` 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.
-  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import)
-- `template literal`을 이용해 데이터와 html string을 가독성 좋게 표현한다.
-  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)
-
-### 추가된 요구사항
-- [data](https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)속성을 활용하여 html 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다. 
-- [localStorage](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.
-
-<br/>
-
-## 📝 미션 저장소 및 진행 요구사항
-
-- 미션은 [https://github.com/woowacourse/javascript-subway-map-precours](https://github.com/woowacourse/javascript-subway-map-precourse) 저장소를 fork/clone해 시작한다.
-- **기능을 구현하기 전에 javascript-subway-precourse/docs/README.md 파일에 구현할 기능 목록**을 정리해 추가한다.
-- **git의 commit 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가**한다.
-- [프리코스 과제 제출](https://github.com/woowacourse/woowacourse-docs/tree/master/precourse) 문서 절차를 따라 미션을 제출한다.
+- 1, 2, 3, 4번 버튼 누르면 관련 내용 띄우기
+
+### 1. 역 관리
+- 지하철 역 추가
+  - 역 등록 예외사항
+    - 역 이름이 한글자 이하인 경우
+    - 역 이름이 중복되는 경우
+
+- 지하철 역 삭제
+  - 삭제 버튼 누르면 확인창 띄우기
+  - 역 삭제 예외사항
+    - 노선에 등록된 역인 경우
+
+- 지하철 역 목록 조회
+  - 등록 순서대로 출력
+  - 개별 삭제 버튼
+
+<br>
+
+### 2. 노선 관리
+- 지하철 노선 등록
+  - 노선 등록 예외사항:
+    - 노선 이름이 비어있는 경우
+    - 노선 이름이 중복되는 경우
+  - 상행 종점역과 하행 종점역 선택
+    - 예외사항:
+      - 상행 종점과 하행 종점이 같은 경우
+
+- 지하철 노선 삭제
+
+- 지하철 노선 목록 조회
+  - 등록 순서대로 출력
+  - 개별 삭제 버튼
+
+<br>
+
+### 3. 구간 관리
+- 수정할 노선 선택하면 관련 내용 띄우기
+
+- 역이름 선택하고 순서 지정해서 구간 등록 
+  - 종점으로 등록하면 노선 종점역 변경
+  - 입력한 순서 이후의 순서는 밀림 (순서는 중복되지 않음)
+  - 구간 추가 예외사항:
+    - 순서가 비어있는 경우
+    - 순서가 음수인 경우
+    - 순서가 종점역 순서보다 1넘게 큰 경우 (연속적이지 않은 순서 발생시키는 경우)
+
+- 노선에서 구간 제거
+  - 제거해도 역은 존재
+  - 구간 제거 예외사항:
+    - 역이 두개 이하인 경우는 제거 불가
+  - 종점을 제거한 경우 다음 역이 종점
+
+### 4. 지하철 노선도 출력
+- 노선별로 상행 종점부터 하행 종점역까지 순서대로 출력
\ No newline at end of file

From 481b0fcdc7000ae76ce2a18d989e3061e051b176 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Thu, 10 Dec 2020 15:49:39 +0900
Subject: [PATCH 02/44] feat: create menu buttons

docs: update README
---
 README.md    |  4 ++-
 src/index.js | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2f34748ca..6594bc56e 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,6 @@
-- 1, 2, 3, 4번 버튼 누르면 관련 내용 띄우기
+- 1, 2, 3, 4번 버튼 생성
+  - 각 버튼은 관련 페이지를 로드
+- 새로고침돼도 데이터 기억하게 하기
 
 ### 1. 역 관리
 - 지하철 역 추가
diff --git a/src/index.js b/src/index.js
index e69de29bb..7077c2569 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,94 @@
+export default class SubwayMap {
+  constructor() {
+    this.createMenuButton();
+  }
+
+  createMenuButton() {
+    this._managerButton = {
+      'station-manager-button': '1. 역 관리',
+      'line-manager-button': '2. 노선 관리',
+      'section-manager-button': '3. 구간 관리',
+      'map-print-manager-button': '4. 지하철 노선도 출력',
+    }
+    
+    for (const tagName in this._managerButton) {
+      let varName = this.getVarName(tagName);
+      
+      this[`_${varName}`] = this.createButton();
+      this.setAttribute(varName, tagName);
+      this.setInnerHtml(varName, tagName);
+      this.appendToApp(varName);
+      // this.addEventListenr(tagName);
+      let articleName = this.getArticleName(tagName);
+      this[`_${articleName}`] = this.createArticle();
+      // this.addEventListenr(type);
+    }
+  }
+
+  getVarName(tagName) {
+    let tagParts = this.splitTagName(tagName);
+    let varNameParts = this.intoCamelCase(tagParts);
+
+    return varNameParts.join('');
+  }
+
+  splitTagName(tagName) {
+    return tagName.split('-');
+  }
+
+  intoCamelCase(tagParts) {
+    let varNameParts = [];
+
+    tagParts.forEach((part) => {
+      varNameParts.push(this.capitalize(part, tagParts));
+    })
+
+    return varNameParts;
+  }
+
+  capitalize(string, tagParts) {
+    if (tagParts.indexOf(string) >= 1) {
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+    
+    return string
+  }
+
+  createButton() {
+    return document.createElement('button');
+  }
+
+  setAttribute(varName, tagName) {
+    this[`_${varName}`].setAttribute('id', tagName);
+  }
+
+  setInnerHtml(varName, tagName) {
+    this[`_${varName}`].innerHTML = this._managerButton[tagName]
+  }
+
+  appendToApp(varName) {
+    document.getElementById('app').appendChild(this[`_${varName}`]);
+  }
+
+  createArticle() {
+    return document.createElement('ARTICLE');
+  }
+
+  getArticleName(tagName) {
+    const tagParts = this.splitTagName(tagName);
+
+    return `${tagParts[0]}Article`;
+  }
+
+  // addEventListenr(type) {
+  //   this[`_${type}ManagerButton`].addEventListenr('click', () => {
+  //     this.getArticle(type);
+  //   })
+  // }
+
+  // getArticle(type) {
+
+  // }
+}
+
+new SubwayMap();
\ No newline at end of file

From e142440c8e6da924ea4e4c74f121d43b2890df0f Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Fri, 11 Dec 2020 00:51:39 +0900
Subject: [PATCH 03/44] feat: create article and show when button is clicked

---
 src/dom_utils.js    |  37 ++++++++++++++++
 src/index.js        | 102 +++++++++++++++++---------------------------
 src/string_utils.js |  36 ++++++++++++++++
 3 files changed, 111 insertions(+), 64 deletions(-)
 create mode 100644 src/dom_utils.js
 create mode 100644 src/string_utils.js

diff --git a/src/dom_utils.js b/src/dom_utils.js
new file mode 100644
index 000000000..7f305b73d
--- /dev/null
+++ b/src/dom_utils.js
@@ -0,0 +1,37 @@
+export default class DomUtils {
+  constructor() {
+    this.DO_NOT_APPEND = false;
+  }
+
+  createButton(idName, managerButton) {
+    const button = document.createElement('button');
+
+    this.setAttribute(button, idName);
+    this.setInnerHtml(button, idName, managerButton);
+    this.appendTo('app', button);
+
+    return button;
+  }
+
+  setAttribute(tag, idName) {
+    tag.setAttribute('id', idName);
+  }
+
+  setInnerHtml(tag, idName, managerButton) {
+    tag.innerHTML = managerButton[idName]
+  }
+
+  appendTo(toIdName, varName) {
+    document.getElementById(toIdName).appendChild(varName);
+  }
+
+  createArticle(toIdName, idName) {
+    const article = document.createElement('ARTICLE');
+
+    this.setAttribute(article, idName);
+    if (toIdName !== this.DO_NOT_APPEND)
+      this.appendTo(toIdName, article);
+
+    return article
+  }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 7077c2569..f378656b4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,94 +1,68 @@
+import DomUtils from './dom_utils.js';
+import StringUtils from './string_utils.js';
+
 export default class SubwayMap {
   constructor() {
-    this.createMenuButton();
+    this._privateDomUtils = new DomUtils();
+    this._privateStringUtils = new StringUtils();
+    this.setIdNAme();
+    this.managerButton()
+    this.createMenu();
+  }
+
+  setIdNAme() {
+    this.APP = 'app';
+    this.ARTICLE_AREA = 'articleArea';
+    this.DO_NOT_APPEND = false;
   }
 
-  createMenuButton() {
+  managerButton() {
     this._managerButton = {
       'station-manager-button': '1. 역 관리',
       'line-manager-button': '2. 노선 관리',
       'section-manager-button': '3. 구간 관리',
       'map-print-manager-button': '4. 지하철 노선도 출력',
     }
-    
-    for (const tagName in this._managerButton) {
-      let varName = this.getVarName(tagName);
-      
-      this[`_${varName}`] = this.createButton();
-      this.setAttribute(varName, tagName);
-      this.setInnerHtml(varName, tagName);
-      this.appendToApp(varName);
-      // this.addEventListenr(tagName);
-      let articleName = this.getArticleName(tagName);
-      this[`_${articleName}`] = this.createArticle();
-      // this.addEventListenr(type);
-    }
   }
 
-  getVarName(tagName) {
-    let tagParts = this.splitTagName(tagName);
-    let varNameParts = this.intoCamelCase(tagParts);
-
-    return varNameParts.join('');
-  }
-
-  splitTagName(tagName) {
-    return tagName.split('-');
+  createMenu() {
+    for (const idName in this._managerButton) {
+      const varName = this.createMenuButton(idName);
+      const articleName = this.createMenuArticle(idName);
+      this.addEventToButton(varName, articleName);
+    }
+    this.createArticleArea();
   }
 
-  intoCamelCase(tagParts) {
-    let varNameParts = [];
+  createMenuButton(idName) {
+    const varName = this._privateStringUtils.getVarName(idName);
 
-    tagParts.forEach((part) => {
-      varNameParts.push(this.capitalize(part, tagParts));
-    })
+    this[`_${varName}`] = this._privateDomUtils.createButton(idName, this._managerButton);
 
-    return varNameParts;
+    return varName;
   }
 
-  capitalize(string, tagParts) {
-    if (tagParts.indexOf(string) >= 1) {
-      return string.charAt(0).toUpperCase() + string.slice(1);
-    }
+  createMenuArticle(idName) {
+    const articleName = this._privateStringUtils.getArticleName(idName);
     
-    return string
-  }
-
-  createButton() {
-    return document.createElement('button');
-  }
+    this[`_${articleName}`] = this._privateDomUtils.createArticle(this.DO_NOT_APPEND, articleName);
 
-  setAttribute(varName, tagName) {
-    this[`_${varName}`].setAttribute('id', tagName);
+    return articleName;
   }
 
-  setInnerHtml(varName, tagName) {
-    this[`_${varName}`].innerHTML = this._managerButton[tagName]
+  addEventToButton(varName, articleName) {
+    this[`_${varName}`].addEventListener('click', () => {
+      this.showArticle(articleName);
+    });
   }
 
-  appendToApp(varName) {
-    document.getElementById('app').appendChild(this[`_${varName}`]);
+  createArticleArea() {
+    this._articleArea = this._privateDomUtils.createArticle(this.APP, this.ARTICLE_AREA);
   }
 
-  createArticle() {
-    return document.createElement('ARTICLE');
+  showArticle(articleName) {
+    this._articleArea.innerHTML = this[`_${articleName}`].innerHTML;
   }
-
-  getArticleName(tagName) {
-    const tagParts = this.splitTagName(tagName);
-
-    return `${tagParts[0]}Article`;
-  }
-
-  // addEventListenr(type) {
-  //   this[`_${type}ManagerButton`].addEventListenr('click', () => {
-  //     this.getArticle(type);
-  //   })
-  // }
-
-  // getArticle(type) {
-
-  // }
 }
 
 new SubwayMap();
\ No newline at end of file
diff --git a/src/string_utils.js b/src/string_utils.js
new file mode 100644
index 000000000..ed45cce77
--- /dev/null
+++ b/src/string_utils.js
@@ -0,0 +1,36 @@
+export default class StringUtils {
+  getVarName(tagName) {
+    let tagParts = this.splitTagName(tagName);
+    let varNameParts = this.intoCamelCase(tagParts);
+
+    return varNameParts.join('');
+  }
+
+  splitTagName(tagName) {
+    return tagName.split('-');
+  }
+
+  intoCamelCase(tagParts) {
+    let varNameParts = [];
+
+    tagParts.forEach((part) => {
+      varNameParts.push(this.capitalizeFirstChar(part, tagParts));
+    })
+
+    return varNameParts;
+  }
+
+  capitalizeFirstChar(string, tagParts) {
+    if (tagParts.indexOf(string) >= 1) {
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+    
+    return string
+  }
+
+  getArticleName(tagName) {
+    const tagParts = this.splitTagName(tagName);
+
+    return `${tagParts[0]}Article`;
+  }
+}
\ No newline at end of file

From 5c3031fa5a7196569f11127d7b59c2274a13d3a3 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Fri, 11 Dec 2020 14:51:03 +0900
Subject: [PATCH 04/44] feat: have each manager button load relevant page

---
 src/dom_utils.js      | 44 +++++++++++++++++++++++++++++++-------
 src/index.js          | 33 ++++++++++++++++++++++-------
 src/manage_station.js | 49 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 111 insertions(+), 15 deletions(-)
 create mode 100644 src/manage_station.js

diff --git a/src/dom_utils.js b/src/dom_utils.js
index 7f305b73d..e9e0dd96b 100644
--- a/src/dom_utils.js
+++ b/src/dom_utils.js
@@ -3,35 +3,63 @@ export default class DomUtils {
     this.DO_NOT_APPEND = false;
   }
 
-  createButton(idName, managerButton) {
+  createButton(idName, managerButton, before) {
     const button = document.createElement('button');
 
     this.setAttribute(button, idName);
     this.setInnerHtml(button, idName, managerButton);
-    this.appendTo('app', button);
+    this.appendBefore('app', button, before)
 
     return button;
   }
 
-  setAttribute(tag, idName) {
-    tag.setAttribute('id', idName);
+  setAttribute(varName, idName) {
+    varName.setAttribute('id', idName);
   }
 
-  setInnerHtml(tag, idName, managerButton) {
-    tag.innerHTML = managerButton[idName]
+  setInnerHtml(varName, idName, managerButton) {
+    varName.innerHTML = managerButton[idName]
   }
 
   appendTo(toIdName, varName) {
     document.getElementById(toIdName).appendChild(varName);
   }
 
+  appendBefore(toIdName, varName, before) {
+    const toVarName = document.getElementById(toIdName);
+
+    toVarName.insertBefore(varName, before);
+  }
+
   createArticle(toIdName, idName) {
     const article = document.createElement('ARTICLE');
 
     this.setAttribute(article, idName);
-    if (toIdName !== this.DO_NOT_APPEND)
-      this.appendTo(toIdName, article);
+    this.appendTo(toIdName, article);
 
     return article
   }
+
+  displayNone(varName) {
+    varName.style.display = "none";
+  }
+
+  createInput(inputObject) {
+    const input = document.createElement('input');
+
+    this.setAttribute(input, inputObject['idName']);
+    this.setInputType(input, inputObject['type']);
+    this.setPlaceholder(input, inputObject['placeholder']);
+    this.appendTo(inputObject['toIdName'], input)
+
+    return input;
+  }
+
+  setInputType(input, type) {
+    input.setAttribute('type', type);
+  }
+
+  setPlaceholder(input, placeholder) {
+    input.placeholder = placeholder;
+  }
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index f378656b4..fdccb331c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import DomUtils from './dom_utils.js';
 import StringUtils from './string_utils.js';
+import ManageStation from './manage_station.js';
 
 export default class SubwayMap {
   constructor() {
@@ -8,6 +9,7 @@ export default class SubwayMap {
     this.setIdNAme();
     this.managerButton()
     this.createMenu();
+    this.handleManager();
   }
 
   setIdNAme() {
@@ -26,18 +28,22 @@ export default class SubwayMap {
   }
 
   createMenu() {
+    this.createArticleArea();
     for (const idName in this._managerButton) {
       const varName = this.createMenuButton(idName);
       const articleName = this.createMenuArticle(idName);
       this.addEventToButton(varName, articleName);
     }
-    this.createArticleArea();
+  }
+
+  createArticleArea() {
+    this._articleArea = this._privateDomUtils.createArticle(this.APP, this.ARTICLE_AREA);
   }
 
   createMenuButton(idName) {
     const varName = this._privateStringUtils.getVarName(idName);
 
-    this[`_${varName}`] = this._privateDomUtils.createButton(idName, this._managerButton);
+    this[`_${varName}`] = this._privateDomUtils.createButton(idName, this._managerButton, this._articleArea);
 
     return varName;
   }
@@ -45,7 +51,9 @@ export default class SubwayMap {
   createMenuArticle(idName) {
     const articleName = this._privateStringUtils.getArticleName(idName);
     
-    this[`_${articleName}`] = this._privateDomUtils.createArticle(this.DO_NOT_APPEND, articleName);
+    this[`_${articleName}`] = this._privateDomUtils.createArticle(this.ARTICLE_AREA, articleName);
+    this[`_${articleName}`].innerHTML = articleName;
+    this._privateDomUtils.displayNone(this[`_${articleName}`]);
 
     return articleName;
   }
@@ -56,12 +64,23 @@ export default class SubwayMap {
     });
   }
 
-  createArticleArea() {
-    this._articleArea = this._privateDomUtils.createArticle(this.APP, this.ARTICLE_AREA);
+  showArticle(articleName) {
+    this.hideAllArticle();
+    this.showTheOne(articleName);
   }
 
-  showArticle(articleName) {
-    this._articleArea.innerHTML = this[`_${articleName}`].innerHTML;
+  hideAllArticle() {
+    for (let i = 0; i < 4; i++) {
+      this._articleArea.children[i].style.display = 'none'
+    }
+  }
+
+  showTheOne(articleName) {
+    this[`_${articleName}`].style.display = 'block';
+  }
+
+  handleManager() {
+    new ManageStation();
   }
 }
 
diff --git a/src/manage_station.js b/src/manage_station.js
new file mode 100644
index 000000000..ea1ab81a8
--- /dev/null
+++ b/src/manage_station.js
@@ -0,0 +1,49 @@
+import DomUtils from './dom_utils.js';
+
+export default class ManageStation {
+  constructor() {
+    this.setConst();
+    this._privateDomUtils = new DomUtils();
+    this.createStation();
+  }
+
+  setConst() {
+    this.ARTICLE_NAME = 'stationArticle';
+    this.STATION_NAME = '역 이름';
+    this.SETTING = '설정';
+    this.STATION_LIST = '지하철 역 목록';
+
+    this.INPUT_ID = 'station-name-input';
+    this.ADD_BUTTON_ID = 'station-add-button';
+    this.DELETE_BUTTON_CLASS = 'station-delete-button';
+
+    this.INPUT_PLACEHOLDER = '역 이름을 입력해주세요';
+    this.INPUT_TYPE = 'String';
+    this.ADD_BUTTON_TEXT = '역 추가';
+    this.DELETE_BUTTON_TEXT = '삭제';
+    this.DELETE_ALERT_MESSAGE = '정말로 삭제하시겠습니까?';
+  }
+
+  createStation() {
+    // this.createNameInput();
+    
+  }
+
+  createNameInput() {
+    const inputObject = this.setInputObject();
+
+    this._stationInput = this._privateDomUtils.createInput(inputObject);
+  }
+
+  setInputObject() {
+    let inputObject = {
+      'toIdName': this.ARTICLE_NAME,
+      'idName': this.INPUT_ID,
+      'placeholder': this.INPUT_PLACEHOLDER,
+      'type': this.INPUT_TYPE,
+    }
+
+    return inputObject;
+  }
+
+}
\ No newline at end of file

From b02d795a9690ff713021bb7d5cdf82766af5fa3d Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Fri, 11 Dec 2020 16:14:11 +0900
Subject: [PATCH 05/44] feat: get station name input and alert error if
 erroneous

---
 src/dom_utils.js      |  9 ++---
 src/index.js          |  3 +-
 src/manage_station.js | 90 ++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 87 insertions(+), 15 deletions(-)

diff --git a/src/dom_utils.js b/src/dom_utils.js
index e9e0dd96b..910fac4a4 100644
--- a/src/dom_utils.js
+++ b/src/dom_utils.js
@@ -3,12 +3,11 @@ export default class DomUtils {
     this.DO_NOT_APPEND = false;
   }
 
-  createButton(idName, managerButton, before) {
+  createButton(idName, buttonText) {
     const button = document.createElement('button');
 
     this.setAttribute(button, idName);
-    this.setInnerHtml(button, idName, managerButton);
-    this.appendBefore('app', button, before)
+    this.setInnerHtml(button, buttonText);
 
     return button;
   }
@@ -17,8 +16,8 @@ export default class DomUtils {
     varName.setAttribute('id', idName);
   }
 
-  setInnerHtml(varName, idName, managerButton) {
-    varName.innerHTML = managerButton[idName]
+  setInnerHtml(varName, buttonText) {
+    varName.innerHTML = buttonText;
   }
 
   appendTo(toIdName, varName) {
diff --git a/src/index.js b/src/index.js
index fdccb331c..69a0b8100 100644
--- a/src/index.js
+++ b/src/index.js
@@ -43,7 +43,8 @@ export default class SubwayMap {
   createMenuButton(idName) {
     const varName = this._privateStringUtils.getVarName(idName);
 
-    this[`_${varName}`] = this._privateDomUtils.createButton(idName, this._managerButton, this._articleArea);
+    this[`_${varName}`] = this._privateDomUtils.createButton(idName, this._managerButton[idName]);
+    this._privateDomUtils.appendBefore(this.APP, this[`_${varName}`], this._articleArea);
 
     return varName;
   }
diff --git a/src/manage_station.js b/src/manage_station.js
index ea1ab81a8..14bc39882 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -5,28 +5,42 @@ export default class ManageStation {
     this.setConst();
     this._privateDomUtils = new DomUtils();
     this.createStation();
+    this._staionList = [];
   }
 
   setConst() {
+    this.MENU_TYPE = 'station',
+    this.ADD_TYPE = 'Add',
+    this.DELETE_TYPE = 'Delete',
+
     this.ARTICLE_NAME = 'stationArticle';
     this.STATION_NAME = '역 이름';
     this.SETTING = '설정';
     this.STATION_LIST = '지하철 역 목록';
 
-    this.INPUT_ID = 'station-name-input';
+    this.ADD_NPUT_ID = 'station-name-input';
     this.ADD_BUTTON_ID = 'station-add-button';
     this.DELETE_BUTTON_CLASS = 'station-delete-button';
 
-    this.INPUT_PLACEHOLDER = '역 이름을 입력해주세요';
-    this.INPUT_TYPE = 'String';
+    this.ADD_INPUT_PLACEHOLDER = '역 이름을 입력해주세요';
+    this.ADD_INPUT_TYPE = 'String';
+    this.MINLENGTH_ERROR_MESSAGE = '역 이름을 두 글자 이상 입력해주세요';
+    this.OVERLAP_ERROR_MESSAGE = '이미 존재하는 역입니다.'
+
+
     this.ADD_BUTTON_TEXT = '역 추가';
     this.DELETE_BUTTON_TEXT = '삭제';
     this.DELETE_ALERT_MESSAGE = '정말로 삭제하시겠습니까?';
+
+    this.IS_VALID = true;
+    this.IS_NOT_VALID = false;
   }
 
   createStation() {
-    // this.createNameInput();
-    
+    this.createNameInput();
+    this._stationAddButton = this._privateDomUtils.createButton(this.ADD_BUTTON_ID, this.ADD_BUTTON_TEXT);
+    this._privateDomUtils.appendTo(this.ARTICLE_NAME, this._stationAddButton);
+    this.addEventToButton(this.ADD_TYPE, this.MENU_TYPE);
   }
 
   createNameInput() {
@@ -36,14 +50,72 @@ export default class ManageStation {
   }
 
   setInputObject() {
-    let inputObject = {
+    const inputObject = {
       'toIdName': this.ARTICLE_NAME,
-      'idName': this.INPUT_ID,
-      'placeholder': this.INPUT_PLACEHOLDER,
-      'type': this.INPUT_TYPE,
+      'idName': this.ADD_INPUT_ID,
+      'placeholder': this.ADD_INPUT_PLACEHOLDER,
+      'type': this.ADD_INPUT_TYPE,
     }
 
     return inputObject;
   }
 
+  addEventToButton(buttonType, menuType) {
+    this[`_station${buttonType}Button`].addEventListener('click', () => {
+      this.addStation();
+    })
+    this[`_${menuType}Input`].addEventListener('keypress', e => {
+      if (e.keyCode === 13) {
+        this.addStation();
+      }
+    })
+  }
+
+  addStation() {
+    if (this.checkStationValidity() === this.IS_VALID) {
+      this.addToStationList(this._stationInput.value);
+      this._stationInput.value = '';
+    }
+    console.log(this._staionList); 
+  }
+
+  checkStationValidity() {
+    if (this.minLength() === this.IS_NOT_VALID) {
+      this.alertError(this.MINLENGTH_ERROR_MESSAGE);
+
+      return this.IS_NOT_VALID;
+    }
+
+    if (this.overlap() === this.IS_NOT_VALID) {
+      this.alertError(`"${this._stationInput.value}"은/는 ` + this.OVERLAP_ERROR_MESSAGE)
+
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  minLength() {
+    if (this._stationInput.value.length <= 1) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  overlap() {
+    if (this._staionList.indexOf(this._stationInput.value) !== -1) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  alertError(errorMessage) {
+    alert(errorMessage);
+  }
+
+  addToStationList(stationName) {
+    this._staionList.push(stationName);
+  }
 }
\ No newline at end of file

From 316d17b3cc2354d6975156be680d6f1b507f0225 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Sat, 12 Dec 2020 13:19:06 +0900
Subject: [PATCH 06/44] docs: update README

feat: add station to station list

feat: create sample table
---
 README.md             |  7 ++---
 src/common_utils.js   | 23 ++++++++++++++++
 src/dom_utils.js      | 18 ++++++-------
 src/index.js          |  8 +++---
 src/manage_station.js | 51 +++++++++++++++++++++++++++---------
 src/table_utils.js    | 61 +++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 139 insertions(+), 29 deletions(-)
 create mode 100644 src/common_utils.js
 create mode 100644 src/table_utils.js

diff --git a/README.md b/README.md
index 6594bc56e..ce9813a63 100644
--- a/README.md
+++ b/README.md
@@ -3,19 +3,20 @@
 - 새로고침돼도 데이터 기억하게 하기
 
 ### 1. 역 관리
-- 지하철 역 추가
+- 지하철 역을 목록에 추가
   - 역 등록 예외사항
     - 역 이름이 한글자 이하인 경우
     - 역 이름이 중복되는 경우
 
 - 지하철 역 삭제
   - 삭제 버튼 누르면 확인창 띄우기
+  - 삭제된 역은 테이블에서 제거
   - 역 삭제 예외사항
     - 노선에 등록된 역인 경우
 
 - 지하철 역 목록 조회
-  - 등록 순서대로 출력
-  - 개별 삭제 버튼
+  - 제목만 있는 테이블 출력
+  - 등록된 역은 순서대로 테이블에 추가
 
 <br>
 
diff --git a/src/common_utils.js b/src/common_utils.js
new file mode 100644
index 000000000..ac369468b
--- /dev/null
+++ b/src/common_utils.js
@@ -0,0 +1,23 @@
+import DomUtils from './dom_utils.js';
+
+export default class CommonUtils {
+  constructor() {
+    this._privateDomUtils = new DomUtils();
+  }
+
+  createTitle(titleTag, titleContent, toIdName) {
+    const title = document.createElement(titleTag);
+
+    title.innerHTML = titleContent;
+    this.insertNewline(toIdName);
+    this._privateDomUtils.appendTo(toIdName, title);
+  }
+
+  insertNewline(toIdName) {
+    const newline = document.createElement('br');
+
+    this._privateDomUtils.appendTo(toIdName, newline);
+  }
+
+
+}
\ No newline at end of file
diff --git a/src/dom_utils.js b/src/dom_utils.js
index 910fac4a4..13af8ad21 100644
--- a/src/dom_utils.js
+++ b/src/dom_utils.js
@@ -12,6 +12,15 @@ export default class DomUtils {
     return button;
   }
 
+  createArticle(toIdName, idName) {
+    const article = document.createElement('ARTICLE');
+
+    this.setAttribute(article, idName);
+    this.appendTo(toIdName, article);
+
+    return article
+  }
+
   setAttribute(varName, idName) {
     varName.setAttribute('id', idName);
   }
@@ -30,15 +39,6 @@ export default class DomUtils {
     toVarName.insertBefore(varName, before);
   }
 
-  createArticle(toIdName, idName) {
-    const article = document.createElement('ARTICLE');
-
-    this.setAttribute(article, idName);
-    this.appendTo(toIdName, article);
-
-    return article
-  }
-
   displayNone(varName) {
     varName.style.display = "none";
   }
diff --git a/src/index.js b/src/index.js
index 69a0b8100..1cca9c643 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,7 @@ import ManageStation from './manage_station.js';
 
 export default class SubwayMap {
   constructor() {
+    document.body.style.fontFamily = 'Arial';
     this._privateDomUtils = new DomUtils();
     this._privateStringUtils = new StringUtils();
     this.setIdNAme();
@@ -53,7 +54,6 @@ export default class SubwayMap {
     const articleName = this._privateStringUtils.getArticleName(idName);
     
     this[`_${articleName}`] = this._privateDomUtils.createArticle(this.ARTICLE_AREA, articleName);
-    this[`_${articleName}`].innerHTML = articleName;
     this._privateDomUtils.displayNone(this[`_${articleName}`]);
 
     return articleName;
@@ -61,13 +61,13 @@ export default class SubwayMap {
 
   addEventToButton(varName, articleName) {
     this[`_${varName}`].addEventListener('click', () => {
-      this.showArticle(articleName);
+      this.showArticle(articleName)
     });
   }
 
   showArticle(articleName) {
     this.hideAllArticle();
-    this.showTheOne(articleName);
+    this.showCorrespondingArticle(articleName);
   }
 
   hideAllArticle() {
@@ -76,7 +76,7 @@ export default class SubwayMap {
     }
   }
 
-  showTheOne(articleName) {
+  showCorrespondingArticle(articleName) {
     this[`_${articleName}`].style.display = 'block';
   }
 
diff --git a/src/manage_station.js b/src/manage_station.js
index 14bc39882..4021e6026 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -1,11 +1,20 @@
 import DomUtils from './dom_utils.js';
+import TableUtils from './table_utils.js';
+import CommonUtils from './common_utils.js';
 
 export default class ManageStation {
   constructor() {
+    this.setPrivateVariable();
     this.setConst();
+    this.stationInputSection();
+    this.stationListSection();
+  }
+
+  setPrivateVariable() {
     this._privateDomUtils = new DomUtils();
-    this.createStation();
+    this._privateCommonUtils = new CommonUtils();
     this._staionList = [];
+    this._privateTableUtils = new TableUtils();
   }
 
   setConst() {
@@ -13,17 +22,22 @@ export default class ManageStation {
     this.ADD_TYPE = 'Add',
     this.DELETE_TYPE = 'Delete',
 
+    this.STATION_INPUT_TITLE_TAG = 'div';
+    this.STATION_INPUT_TITLE_TEXT = '역 이름';
+    this.STATION_LIST_TITLE_TAG = 'h1';
+    this.STATION_LIST_TITLE_TEXT = '🚉 지하철 역 목록';
+
     this.ARTICLE_NAME = 'stationArticle';
-    this.STATION_NAME = '역 이름';
+    
     this.SETTING = '설정';
     this.STATION_LIST = '지하철 역 목록';
 
-    this.ADD_NPUT_ID = 'station-name-input';
+    this.STATION_INPUT_ID = 'station-name-input';
     this.ADD_BUTTON_ID = 'station-add-button';
     this.DELETE_BUTTON_CLASS = 'station-delete-button';
 
-    this.ADD_INPUT_PLACEHOLDER = '역 이름을 입력해주세요';
-    this.ADD_INPUT_TYPE = 'String';
+    this.STATION_INPUT_PLACEHOLDER = '역 이름을 입력해주세요';
+    this.STATION_INPUT_TYPE = 'String';
     this.MINLENGTH_ERROR_MESSAGE = '역 이름을 두 글자 이상 입력해주세요';
     this.OVERLAP_ERROR_MESSAGE = '이미 존재하는 역입니다.'
 
@@ -36,25 +50,31 @@ export default class ManageStation {
     this.IS_NOT_VALID = false;
   }
 
-  createStation() {
-    this.createNameInput();
+  stationInputSection() {
+    this._privateCommonUtils.createTitle(this.STATION_INPUT_TITLE_TAG, this.STATION_INPUT_TITLE_TEXT, this.ARTICLE_NAME);
+    this.createStationInput();
     this._stationAddButton = this._privateDomUtils.createButton(this.ADD_BUTTON_ID, this.ADD_BUTTON_TEXT);
     this._privateDomUtils.appendTo(this.ARTICLE_NAME, this._stationAddButton);
     this.addEventToButton(this.ADD_TYPE, this.MENU_TYPE);
   }
 
-  createNameInput() {
-    const inputObject = this.setInputObject();
+  stationListSection() {
+    this._privateCommonUtils.createTitle(this.STATION_LIST_TITLE_TAG, this.STATION_LIST_TITLE_TEXT, this.ARTICLE_NAME);
+    this.createStationListTable();
+  }
+
+  createStationInput() {
+    const inputObject = this.stationInputObject();
 
     this._stationInput = this._privateDomUtils.createInput(inputObject);
   }
 
-  setInputObject() {
+  stationInputObject() {
     const inputObject = {
       'toIdName': this.ARTICLE_NAME,
-      'idName': this.ADD_INPUT_ID,
-      'placeholder': this.ADD_INPUT_PLACEHOLDER,
-      'type': this.ADD_INPUT_TYPE,
+      'idName': this.STATION_INPUT_ID,
+      'placeholder': this.STATION_INPUT_PLACEHOLDER,
+      'type': this.STATION_INPUT_TYPE,
     }
 
     return inputObject;
@@ -117,5 +137,10 @@ export default class ManageStation {
 
   addToStationList(stationName) {
     this._staionList.push(stationName);
+    this._privateTableUtils.insertToTable();
+  }
+
+  createStationListTable() {
+    this._stationTable = this._privateTableUtils.createTable(this.ARTICLE_NAME);
   }
 }
\ No newline at end of file
diff --git a/src/table_utils.js b/src/table_utils.js
new file mode 100644
index 000000000..848343034
--- /dev/null
+++ b/src/table_utils.js
@@ -0,0 +1,61 @@
+import DomUtils from './dom_utils.js';
+
+export default class TableUtils {
+  constructor() {
+    this.setPrivateVariable();
+    this.setTableType();
+  }
+
+  setPrivateVariable() {
+    this._privateDomUtils = new DomUtils();
+  }
+
+  setTableType() {
+    this._tableType = {
+      stationArticle: ['역 이름', '설정'],
+      lineArticle: ['노선 이름', '상행 종점역', '하행 종점역', '설정'],
+      sectionArticle: ['순서', '이름', '설정'],
+    }
+  }
+
+  createTable(toIdName) {
+    const table = document.createElement('table');
+    table.setAttribute('id', `${toIdName}Table`);
+    // this._tableType[toIdName].forEach(col => {
+    //   console.log(col)
+    // })
+    const row1 = table.insertRow(0);
+    const row2 = table.insertRow(1);
+
+    const row1cell1 = row1.insertCell(0);
+    const row1cell2 = row1.insertCell(1);
+
+    row1cell1.innerHTML = '역 이름';
+    row1cell2.innerHTML = '설정';
+
+
+    const row2cell1 = row2.insertCell(0);
+    const row2cell2 = row2.insertCell(1);
+
+    row2cell1.innerHTML = '신촌';
+    const row2button = document.createElement('button');
+    row2button.innerHTML = '삭제';
+    row2cell2.appendChild(row2button);
+
+    table.style.border = '1px solid black';
+    row1cell2.style.textAlign = 'center';
+
+    row1cell1.style.fontWeight = 'bold';
+    row1cell2.style.fontWeight = 'bold';
+
+    row1cell1.style.border = '1px solid black';
+    row1cell2.style.border = '1px solid black';
+    row2cell1.style.border = '1px solid black';
+    row2cell2.style.border = '1px solid black';
+    this._privateDomUtils.appendTo(toIdName, table);
+  }
+
+  addRow() {
+
+  }
+}
\ No newline at end of file

From 660eb6c57deedd784e26e1a2ae3887c9deac3f97 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Sat, 12 Dec 2020 13:49:43 +0900
Subject: [PATCH 07/44] feat: split and complete initial table creating
 functions

---
 src/table_utils.js | 50 +++++++++++++++++++---------------------------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/table_utils.js b/src/table_utils.js
index 848343034..9ff69bd51 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -20,42 +20,34 @@ export default class TableUtils {
 
   createTable(toIdName) {
     const table = document.createElement('table');
-    table.setAttribute('id', `${toIdName}Table`);
-    // this._tableType[toIdName].forEach(col => {
-    //   console.log(col)
-    // })
-    const row1 = table.insertRow(0);
-    const row2 = table.insertRow(1);
 
-    const row1cell1 = row1.insertCell(0);
-    const row1cell2 = row1.insertCell(1);
-
-    row1cell1.innerHTML = '역 이름';
-    row1cell2.innerHTML = '설정';
-
-
-    const row2cell1 = row2.insertCell(0);
-    const row2cell2 = row2.insertCell(1);
-
-    row2cell1.innerHTML = '신촌';
-    const row2button = document.createElement('button');
-    row2button.innerHTML = '삭제';
-    row2cell2.appendChild(row2button);
+    this._privateDomUtils.setAttribute(table, `${toIdName}Table`);
+    this.addTableStyle(table);
+    this.createTitleRow(table, toIdName);
+    this._privateDomUtils.appendTo(toIdName, table);
+  }
 
+  addTableStyle(table) {
     table.style.border = '1px solid black';
-    row1cell2.style.textAlign = 'center';
+  }
 
-    row1cell1.style.fontWeight = 'bold';
-    row1cell2.style.fontWeight = 'bold';
+  createTitleRow(table, tableType) {
+    const titleRow = table.insertRow(0);
 
-    row1cell1.style.border = '1px solid black';
-    row1cell2.style.border = '1px solid black';
-    row2cell1.style.border = '1px solid black';
-    row2cell2.style.border = '1px solid black';
-    this._privateDomUtils.appendTo(toIdName, table);
+    this._tableType[tableType].forEach((text, i) => {
+      const cell = this.addCell(titleRow, i);
+      this.addTitleCellStyle(cell, text);
+   })
   }
 
-  addRow() {
+  addCell(titleRow, i) {
+    return titleRow.insertCell(i);
+  }
 
+  addTitleCellStyle(cell, text) {
+    cell.innerHTML = text;
+    cell.style.border = '1px solid black';
+    cell.style.fontWeight = 'bold';
+    cell.style.textAlign = 'center';
   }
 }
\ No newline at end of file

From 410cf535bc72d897147ea6466ba736151bde5d54 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Sun, 13 Dec 2020 15:11:23 +0900
Subject: [PATCH 08/44] feat: add insert station, delete button, and dataset
 feature

---
 src/common_utils.js   |  4 ++--
 src/dom_utils.js      | 23 ++++++++++++--------
 src/manage_station.js | 19 +++++++++-------
 src/table_utils.js    | 50 +++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 75 insertions(+), 21 deletions(-)

diff --git a/src/common_utils.js b/src/common_utils.js
index ac369468b..e93ac2b98 100644
--- a/src/common_utils.js
+++ b/src/common_utils.js
@@ -10,13 +10,13 @@ export default class CommonUtils {
 
     title.innerHTML = titleContent;
     this.insertNewline(toIdName);
-    this._privateDomUtils.appendTo(toIdName, title);
+    this._privateDomUtils.appendToIdName(toIdName, title);
   }
 
   insertNewline(toIdName) {
     const newline = document.createElement('br');
 
-    this._privateDomUtils.appendTo(toIdName, newline);
+    this._privateDomUtils.appendToIdName(toIdName, newline);
   }
 
 
diff --git a/src/dom_utils.js b/src/dom_utils.js
index 13af8ad21..c3e210701 100644
--- a/src/dom_utils.js
+++ b/src/dom_utils.js
@@ -1,12 +1,13 @@
 export default class DomUtils {
   constructor() {
     this.DO_NOT_APPEND = false;
+    this.ID_ATTRIBUTE = 'id';
   }
 
   createButton(idName, buttonText) {
     const button = document.createElement('button');
 
-    this.setAttribute(button, idName);
+    this.setAttribute(this.ID_ATTRIBUTE, button, idName);
     this.setInnerHtml(button, buttonText);
 
     return button;
@@ -15,24 +16,28 @@ export default class DomUtils {
   createArticle(toIdName, idName) {
     const article = document.createElement('ARTICLE');
 
-    this.setAttribute(article, idName);
-    this.appendTo(toIdName, article);
+    this.setAttribute(this.ID_ATTRIBUTE, article, idName);
+    this.appendToIdName(toIdName, article);
 
     return article
   }
 
-  setAttribute(varName, idName) {
-    varName.setAttribute('id', idName);
+  setAttribute(attribute, varName, idName) {
+    varName.setAttribute(attribute, idName);
   }
 
   setInnerHtml(varName, buttonText) {
     varName.innerHTML = buttonText;
   }
 
-  appendTo(toIdName, varName) {
+  appendToIdName(toIdName, varName) {
     document.getElementById(toIdName).appendChild(varName);
   }
 
+  appendToVarName(toVarName, varName) {
+    toVarName.appendChild(varName);
+  }
+
   appendBefore(toIdName, varName, before) {
     const toVarName = document.getElementById(toIdName);
 
@@ -46,16 +51,16 @@ export default class DomUtils {
   createInput(inputObject) {
     const input = document.createElement('input');
 
-    this.setAttribute(input, inputObject['idName']);
+    this.setAttribute(this.ID_ATTRIBUTE, input, inputObject['idName']);
     this.setInputType(input, inputObject['type']);
     this.setPlaceholder(input, inputObject['placeholder']);
-    this.appendTo(inputObject['toIdName'], input)
+    this.appendToIdName(inputObject['toIdName'], input)
 
     return input;
   }
 
   setInputType(input, type) {
-    input.setAttribute('type', type);
+    input.setAttribute(this.ID_ATTRIBUTE, 'type', type);
   }
 
   setPlaceholder(input, placeholder) {
diff --git a/src/manage_station.js b/src/manage_station.js
index 4021e6026..2f189f57a 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -54,13 +54,13 @@ export default class ManageStation {
     this._privateCommonUtils.createTitle(this.STATION_INPUT_TITLE_TAG, this.STATION_INPUT_TITLE_TEXT, this.ARTICLE_NAME);
     this.createStationInput();
     this._stationAddButton = this._privateDomUtils.createButton(this.ADD_BUTTON_ID, this.ADD_BUTTON_TEXT);
-    this._privateDomUtils.appendTo(this.ARTICLE_NAME, this._stationAddButton);
+    this._privateDomUtils.appendToIdName(this.ARTICLE_NAME, this._stationAddButton);
     this.addEventToButton(this.ADD_TYPE, this.MENU_TYPE);
   }
 
   stationListSection() {
     this._privateCommonUtils.createTitle(this.STATION_LIST_TITLE_TAG, this.STATION_LIST_TITLE_TEXT, this.ARTICLE_NAME);
-    this.createStationListTable();
+    this._stationTable = this._privateTableUtils.createTable(this.ARTICLE_NAME);
   }
 
   createStationInput() {
@@ -93,10 +93,14 @@ export default class ManageStation {
 
   addStation() {
     if (this.checkStationValidity() === this.IS_VALID) {
+      const rowArray = this.createRowArray(this._stationInput.value);
+      
       this.addToStationList(this._stationInput.value);
+      this._privateTableUtils.addRow(rowArray, this.ARTICLE_NAME);
       this._stationInput.value = '';
     }
-    console.log(this._staionList); 
+    console.log('stationlist',this._staionList);
+    
   }
 
   checkStationValidity() {
@@ -135,12 +139,11 @@ export default class ManageStation {
     alert(errorMessage);
   }
 
-  addToStationList(stationName) {
-    this._staionList.push(stationName);
-    this._privateTableUtils.insertToTable();
+  createRowArray(newStation) {
+    return [newStation, 'delete'];
   }
 
-  createStationListTable() {
-    this._stationTable = this._privateTableUtils.createTable(this.ARTICLE_NAME);
+  addToStationList(stationName) {
+    this._staionList.push(stationName);
   }
 }
\ No newline at end of file
diff --git a/src/table_utils.js b/src/table_utils.js
index 9ff69bd51..edf8fdba9 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -4,6 +4,7 @@ export default class TableUtils {
   constructor() {
     this.setPrivateVariable();
     this.setTableType();
+    this.setConst();
   }
 
   setPrivateVariable() {
@@ -18,13 +19,19 @@ export default class TableUtils {
     }
   }
 
+  setConst() {
+    this.DELETE_BUTTON_FLAG = 'delete';
+    this.DELETE_BUTTON_TEXT = '삭제';
+    this.ID_ATTRIBUTE = 'id';
+  }
+
   createTable(toIdName) {
     const table = document.createElement('table');
 
-    this._privateDomUtils.setAttribute(table, `${toIdName}Table`);
+    this._privateDomUtils.setAttribute(this.ID_ATTRIBUTE, table, `${toIdName}Table`);
     this.addTableStyle(table);
     this.createTitleRow(table, toIdName);
-    this._privateDomUtils.appendTo(toIdName, table);
+    this._privateDomUtils.appendToIdName(toIdName, table);
   }
 
   addTableStyle(table) {
@@ -50,4 +57,43 @@ export default class TableUtils {
     cell.style.fontWeight = 'bold';
     cell.style.textAlign = 'center';
   }
+
+  addRow(rowArray, tableType) {
+    const table = document.getElementById(`${tableType}Table`);
+    const row = table.insertRow();
+
+    this.addDataAttribute(row, rowArray);
+    this.addCellsAndButton(tableType, row, rowArray);
+  }
+
+  addDataAttribute(tag, trackingData) {
+    tag.setAttribute('data-tracking', trackingData);
+  }
+
+  addCellStyle(cell, text) {
+    cell.innerHTML = text;
+    cell.style.border = '1px solid black';
+  }
+
+  addCellsAndButton(tableType, row, rowArray) {
+    this._tableType[tableType].forEach((v, i) => {
+      if (rowArray[i] === this.DELETE_BUTTON_FLAG) {
+        const cell = row.insertCell();
+
+        this.addDeleteButton(cell, rowArray);
+      }
+      else {
+        const cell = this.addCell(row, i);
+        this.addCellStyle(cell, rowArray[i]);
+      }
+    })
+  }
+
+  addDeleteButton(cell, rowArray) {
+    const deleteButton = document.createElement('button');
+
+    this.addDataAttribute(deleteButton, rowArray);
+    this._privateDomUtils.setInnerHtml(deleteButton, this.DELETE_BUTTON_TEXT);
+    this._privateDomUtils.appendToVarName(cell, deleteButton);
+  }
 }
\ No newline at end of file

From f596eeb719cfb5798207612ab0723679d2337240 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Sun, 13 Dec 2020 18:48:46 +0900
Subject: [PATCH 09/44] feat: delete staion list table row when delete button
 is clicked

---
 src/common_utils.js |  3 +--
 src/event_utils.js  | 22 ++++++++++++++++++++++
 src/table_utils.js  |  3 +++
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/event_utils.js

diff --git a/src/common_utils.js b/src/common_utils.js
index e93ac2b98..facfff21d 100644
--- a/src/common_utils.js
+++ b/src/common_utils.js
@@ -18,6 +18,5 @@ export default class CommonUtils {
 
     this._privateDomUtils.appendToIdName(toIdName, newline);
   }
-
-
+  
 }
\ No newline at end of file
diff --git a/src/event_utils.js b/src/event_utils.js
new file mode 100644
index 000000000..b6c4282d5
--- /dev/null
+++ b/src/event_utils.js
@@ -0,0 +1,22 @@
+export default class EventUtils {
+  constructor() {
+    
+  }
+
+  addEventToButton(button) {
+    button.addEventListener('click', () => {
+      this.deleteRowAndData(button);
+    });
+  }
+
+  deleteRowAndData(button) {
+    const dataset = button.dataset.tracking;
+    const row = document.querySelector(`[data-tracking="${dataset}"]`);
+
+    this.deleteTableRow(row, button);
+  }
+
+  deleteTableRow(row) {
+    row.remove();
+  }
+}
\ No newline at end of file
diff --git a/src/table_utils.js b/src/table_utils.js
index edf8fdba9..d2293fc81 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -1,4 +1,5 @@
 import DomUtils from './dom_utils.js';
+import EventUtils from './event_utils.js';
 
 export default class TableUtils {
   constructor() {
@@ -9,6 +10,7 @@ export default class TableUtils {
 
   setPrivateVariable() {
     this._privateDomUtils = new DomUtils();
+    this._privateEventUtils = new EventUtils();
   }
 
   setTableType() {
@@ -95,5 +97,6 @@ export default class TableUtils {
     this.addDataAttribute(deleteButton, rowArray);
     this._privateDomUtils.setInnerHtml(deleteButton, this.DELETE_BUTTON_TEXT);
     this._privateDomUtils.appendToVarName(cell, deleteButton);
+    this._privateEventUtils.addEventToButton(deleteButton);
   }
 }
\ No newline at end of file

From 0d460a2e9624c1e9e9b653f84fec7faa00f67aff Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Sun, 13 Dec 2020 19:26:38 +0900
Subject: [PATCH 10/44] style: move menu functions to menu.js

feat: add save and get localStorage of station
---
 src/index.js          | 80 ++-----------------------------------------
 src/manage_station.js | 23 ++++++++++---
 src/menu.js           | 79 ++++++++++++++++++++++++++++++++++++++++++
 src/table_utils.js    |  3 +-
 4 files changed, 103 insertions(+), 82 deletions(-)
 create mode 100644 src/menu.js

diff --git a/src/index.js b/src/index.js
index 1cca9c643..c7cfb8874 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,86 +1,12 @@
-import DomUtils from './dom_utils.js';
-import StringUtils from './string_utils.js';
+
 import ManageStation from './manage_station.js';
+import Menu from './menu.js';
 
 export default class SubwayMap {
   constructor() {
     document.body.style.fontFamily = 'Arial';
-    this._privateDomUtils = new DomUtils();
-    this._privateStringUtils = new StringUtils();
-    this.setIdNAme();
-    this.managerButton()
-    this.createMenu();
-    this.handleManager();
-  }
-
-  setIdNAme() {
-    this.APP = 'app';
-    this.ARTICLE_AREA = 'articleArea';
-    this.DO_NOT_APPEND = false;
-  }
-
-  managerButton() {
-    this._managerButton = {
-      'station-manager-button': '1. 역 관리',
-      'line-manager-button': '2. 노선 관리',
-      'section-manager-button': '3. 구간 관리',
-      'map-print-manager-button': '4. 지하철 노선도 출력',
-    }
-  }
-
-  createMenu() {
-    this.createArticleArea();
-    for (const idName in this._managerButton) {
-      const varName = this.createMenuButton(idName);
-      const articleName = this.createMenuArticle(idName);
-      this.addEventToButton(varName, articleName);
-    }
-  }
-
-  createArticleArea() {
-    this._articleArea = this._privateDomUtils.createArticle(this.APP, this.ARTICLE_AREA);
-  }
-
-  createMenuButton(idName) {
-    const varName = this._privateStringUtils.getVarName(idName);
-
-    this[`_${varName}`] = this._privateDomUtils.createButton(idName, this._managerButton[idName]);
-    this._privateDomUtils.appendBefore(this.APP, this[`_${varName}`], this._articleArea);
-
-    return varName;
-  }
-
-  createMenuArticle(idName) {
-    const articleName = this._privateStringUtils.getArticleName(idName);
+    new Menu();
     
-    this[`_${articleName}`] = this._privateDomUtils.createArticle(this.ARTICLE_AREA, articleName);
-    this._privateDomUtils.displayNone(this[`_${articleName}`]);
-
-    return articleName;
-  }
-
-  addEventToButton(varName, articleName) {
-    this[`_${varName}`].addEventListener('click', () => {
-      this.showArticle(articleName)
-    });
-  }
-
-  showArticle(articleName) {
-    this.hideAllArticle();
-    this.showCorrespondingArticle(articleName);
-  }
-
-  hideAllArticle() {
-    for (let i = 0; i < 4; i++) {
-      this._articleArea.children[i].style.display = 'none'
-    }
-  }
-
-  showCorrespondingArticle(articleName) {
-    this[`_${articleName}`].style.display = 'block';
-  }
-
-  handleManager() {
     new ManageStation();
   }
 }
diff --git a/src/manage_station.js b/src/manage_station.js
index 2f189f57a..d49b9f6e5 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -4,16 +4,26 @@ import CommonUtils from './common_utils.js';
 
 export default class ManageStation {
   constructor() {
+    this.initStation();
+    this.getLocalStorageStation();
     this.setPrivateVariable();
     this.setConst();
     this.stationInputSection();
     this.stationListSection();
   }
 
+  initStation() {
+    this.getLocalStorageStation();
+    this._privateTableUtils.initTable(this._stationList);  
+  }
+
+  getLocalStorageStation() {
+    this._stationList = JSON.parse(localStorage.getItem('stationList'));
+  }
+
   setPrivateVariable() {
     this._privateDomUtils = new DomUtils();
     this._privateCommonUtils = new CommonUtils();
-    this._staionList = [];
     this._privateTableUtils = new TableUtils();
   }
 
@@ -96,10 +106,11 @@ export default class ManageStation {
       const rowArray = this.createRowArray(this._stationInput.value);
       
       this.addToStationList(this._stationInput.value);
+      this.saveToLocalStorage();
       this._privateTableUtils.addRow(rowArray, this.ARTICLE_NAME);
       this._stationInput.value = '';
     }
-    console.log('stationlist',this._staionList);
+    console.log('stationlist',this._stationList);
     
   }
 
@@ -128,7 +139,7 @@ export default class ManageStation {
   }
 
   overlap() {
-    if (this._staionList.indexOf(this._stationInput.value) !== -1) {
+    if (this._stationList.indexOf(this._stationInput.value) !== -1) {
       return this.IS_NOT_VALID;
     }
 
@@ -144,6 +155,10 @@ export default class ManageStation {
   }
 
   addToStationList(stationName) {
-    this._staionList.push(stationName);
+    this._stationList.push(stationName);
+  }
+
+  saveToLocalStorage() {
+    localStorage.setItem('stationList', JSON.stringify(this._stationList));
   }
 }
\ No newline at end of file
diff --git a/src/menu.js b/src/menu.js
new file mode 100644
index 000000000..da4aff388
--- /dev/null
+++ b/src/menu.js
@@ -0,0 +1,79 @@
+import DomUtils from './dom_utils.js';
+import StringUtils from './string_utils.js';
+
+export default class Menu {
+  constructor() {
+    this._privateDomUtils = new DomUtils();
+    this._privateStringUtils = new StringUtils();
+    this.setIdNAme();
+    this.managerButton()
+    this.createMenu();
+  }
+
+  setIdNAme() {
+    this.APP = 'app';
+    this.ARTICLE_AREA = 'articleArea';
+    this.DO_NOT_APPEND = false;
+  }
+
+  managerButton() {
+    this._managerButton = {
+      'station-manager-button': '1. 역 관리',
+      'line-manager-button': '2. 노선 관리',
+      'section-manager-button': '3. 구간 관리',
+      'map-print-manager-button': '4. 지하철 노선도 출력',
+    }
+  }
+
+  createMenu() {
+    this.createArticleArea();
+    for (const idName in this._managerButton) {
+      const varName = this.createMenuButton(idName);
+      const articleName = this.createMenuArticle(idName);
+      this.addEventToButton(varName, articleName);
+    }
+  }
+
+  createArticleArea() {
+    this._articleArea = this._privateDomUtils.createArticle(this.APP, this.ARTICLE_AREA);
+  }
+
+  createMenuButton(idName) {
+    const varName = this._privateStringUtils.getVarName(idName);
+
+    this[`_${varName}`] = this._privateDomUtils.createButton(idName, this._managerButton[idName]);
+    this._privateDomUtils.appendBefore(this.APP, this[`_${varName}`], this._articleArea);
+
+    return varName;
+  }
+
+  createMenuArticle(idName) {
+    const articleName = this._privateStringUtils.getArticleName(idName);
+    
+    this[`_${articleName}`] = this._privateDomUtils.createArticle(this.ARTICLE_AREA, articleName);
+    this._privateDomUtils.displayNone(this[`_${articleName}`]);
+
+    return articleName;
+  }
+
+  addEventToButton(varName, articleName) {
+    this[`_${varName}`].addEventListener('click', () => {
+      this.showArticle(articleName)
+    });
+  }
+
+  showArticle(articleName) {
+    this.hideAllArticle();
+    this.showCorrespondingArticle(articleName);
+  }
+
+  hideAllArticle() {
+    for (let i = 0; i < 4; i++) {
+      this._articleArea.children[i].style.display = 'none'
+    }
+  }
+
+  showCorrespondingArticle(articleName) {
+    this[`_${articleName}`].style.display = 'block';
+  }
+}
\ No newline at end of file
diff --git a/src/table_utils.js b/src/table_utils.js
index d2293fc81..7d2c63bd1 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -27,12 +27,13 @@ export default class TableUtils {
     this.ID_ATTRIBUTE = 'id';
   }
 
-  createTable(toIdName) {
+  initTable(toIdName) {
     const table = document.createElement('table');
 
     this._privateDomUtils.setAttribute(this.ID_ATTRIBUTE, table, `${toIdName}Table`);
     this.addTableStyle(table);
     this.createTitleRow(table, toIdName);
+    this.add
     this._privateDomUtils.appendToIdName(toIdName, table);
   }
 

From b2f0770365df3850858033e0c9546c68be04b4f8 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Sun, 13 Dec 2020 21:26:26 +0900
Subject: [PATCH 11/44] docs: update README

---
 README.md | 115 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 73 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index ce9813a63..00739aef6 100644
--- a/README.md
+++ b/README.md
@@ -1,58 +1,89 @@
-- 1, 2, 3, 4번 버튼 생성
-  - 각 버튼은 관련 페이지를 로드
-- 새로고침돼도 데이터 기억하게 하기
+### 0. 메뉴
+- 역 관리, 노선 관리, 구간 관리, 지하철 노선도 출력 버튼 생성
+- 각 버튼에 해당되는 페이지 생성해서 숨기기 (처음 로드 시 페이지는 보이면 안됨)
+- 각 버튼은 관련 페이지만 보이고 다른 페이지는 숨기기
 
 ### 1. 역 관리
-- 지하철 역을 목록에 추가
-  - 역 등록 예외사항
-    - 역 이름이 한글자 이하인 경우
-    - 역 이름이 중복되는 경우
+- 역 관리 버튼 누를 때마다 지하철 역 목록이 localStorage의 역 목록과 다른 경우 
+  - localStorage의 역 목록 불러오기 (역리스트와 노선 등록정보 업데이트)
+  - 역 목록을 바탕으로 테이블 생성해서 페이지에 append
 
-- 지하철 역 삭제
-  - 삭제 버튼 누르면 확인창 띄우기
-  - 삭제된 역은 테이블에서 제거
-  - 역 삭제 예외사항
-    - 노선에 등록된 역인 경우
+- 역 등록 예외사항
+  - 역 이름이 한글자 이하인 경우
+  - 역 이름이 중복되는 경우
+- 지하철 역 목록 끝에 추가
+- localStorage에 역 목록 새로 저장
+- 역 목록 테이블 하단에 row 추가
 
-- 지하철 역 목록 조회
-  - 제목만 있는 테이블 출력
-  - 등록된 역은 순서대로 테이블에 추가
+- 역 삭제 예외사항
+  - 노선에 등록되어있는 경우
+- 삭제 버튼 누르면 확인창 띄우고 역 목록에서 삭제
+- localStorage에 역 목록 새로 저장
+- 삭제된 역 row를 테이블에서 제거
+  - 삭제 버튼의 dataset으로 row 찾기
 
 <br>
 
 ### 2. 노선 관리
-- 지하철 노선 등록
-  - 노선 등록 예외사항:
-    - 노선 이름이 비어있는 경우
-    - 노선 이름이 중복되는 경우
-  - 상행 종점역과 하행 종점역 선택
-    - 예외사항:
-      - 상행 종점과 하행 종점이 같은 경우
+- 노선 관리 버튼 누를 때마다 역 목록이 localStorage의 역 목록과 다르면
+  - localStorage의 역 목록과 다르면 불러오기 (selector 목록 업데이트)
+  - 상행 하행 selector에 역 목록 보여주기
 
-- 지하철 노선 삭제
+- 노선 관리 버튼 누를 때마다 노선 목록이 localStorage의 노선 목록과 다르면
+  - localStorage의 노선 목록 불러오기 (상행, 하행 업데이트)
+  - 노선 목록을 바탕으로 테이블 생성해서 페이지에 append 
+
+- 노선 등록 예외사항
+  - 노선 이름이 비어있는 경우
+  - 노선 이름이 중복되는 경우
+  - 상행 종점과 하행 종점이 같은 경우
+- 상행 종점역과 하행 종점역 선택
+  - 상행과 하행 종점역 selector의 기본은 첫 역으로 보여주기
+  - 상행 종점역과 하행 종점역은 역 목록 순서대로 보여주기
+- 노선 목록 끝에 추가
+- 역 목록에 해당 역의 노선 정보 추가
+- 노선 목록과 역 목록 localStorage에 새로 저장
+- 노선 목록 테이블 하단에 row 추가
 
-- 지하철 노선 목록 조회
-  - 등록 순서대로 출력
-  - 개별 삭제 버튼
+- 지하철 노선 삭제
+- 삭제 버튼 누르면 확인창 띄우고 노선 목록에서 제거
+- 역 목록에서 해당 역의 노선 정보 제거
+- 노선 목록과 역 목록 localStorage에 새로 저장
+- 노선 목록 테이블에서 해당 row를 제거
+  - 삭제 버튼의 dataset으로 row 찾기
 
 <br>
 
 ### 3. 구간 관리
-- 수정할 노선 선택하면 관련 내용 띄우기
-
-- 역이름 선택하고 순서 지정해서 구간 등록 
-  - 종점으로 등록하면 노선 종점역 변경
-  - 입력한 순서 이후의 순서는 밀림 (순서는 중복되지 않음)
-  - 구간 추가 예외사항:
-    - 순서가 비어있는 경우
-    - 순서가 음수인 경우
-    - 순서가 종점역 순서보다 1넘게 큰 경우 (연속적이지 않은 순서 발생시키는 경우)
-
-- 노선에서 구간 제거
-  - 제거해도 역은 존재
-  - 구간 제거 예외사항:
-    - 역이 두개 이하인 경우는 제거 불가
-  - 종점을 제거한 경우 다음 역이 종점
+- 구간 관리 버튼 누를 때마다 역 목록이 localStorage의 역 목록과 다르면 
+  - localStorage의 역 목록 불러오기 (노선 리스트, selector 목록 업데이트)
+  - 각 호선별로 버튼과 페이지 생성 (아무 호선도 안 눌렀을 시 아무 페이지도 보이면 안됨)
+  - 버튼 클릭시 해당되는 페이지만 보여주기
+  - selector에 역 목록 보여주기
+
+- 호선 버튼 누를 때마다 노선 목록이 localStorage에서 노선 목록과 다르면
+  - localStorage의 노선 목록 불러오기 (노선에 등록된 역 목록 업데이트)
+  - 노선 목록을 바탕으로 테이블 생성해서 페이지에 append
+
+- 구간 추가 예외사항
+  - 순서가 비어있는 경우
+  - 순서가 음수인 경우
+  - 순서가 종점역 순서보다 1넘게 큰 경우 (연속적이지 않은 순서 발생시키는 경우)
+- 역이름 선택하고 순서 지정해서 구간 등록
+- 입력한 순서 이후의 순서는 밀림 (순서는 중복되지 않음)
+- 노선 목록에서 해당되는 호선, 해당되는 순서로 역 등록
+- 역 목록에 해당 역의 노선 정보 추가
+- 노선 목록과 역 목록 localStorage에 새로 저장
+- 호선별 역 목록 테이블에 해당되는 순서 row 추가
+
+- 구간 제거 예외사항
+  - 해당 호선의 역이 두개 이하인 경우는 노선에서 역 제거 불가
+- 노선 목록에서 해당 호선의 해당 역 제거
+- 역 목록에서 해당 역의 노선 정보 제거
+- 노선 목록과 역 목록 localStorage에 새로 저장
+- 호선별 역 목록 테이블에서 해당되는 순서 row 제거
 
 ### 4. 지하철 노선도 출력
-- 노선별로 상행 종점부터 하행 종점역까지 순서대로 출력
\ No newline at end of file
+- 지하철 노선도 출력 버튼 클릭할 때마다 노선 목록이 localStorage 노선 목록과 다르면
+  - localStorage의 노선 목록 불러오기
+  - 호선과 해당되는 역을 순서대로 화면에 출력하기
\ No newline at end of file

From d63f2183a55b06519c5113a26fbe3067af53a7e4 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Sun, 13 Dec 2020 22:45:05 +0900
Subject: [PATCH 12/44] =?UTF-8?q?feat:=20sync=20station=20table=20with=20l?=
 =?UTF-8?q?ocalStorage=20stationList=20whenever=201.=EC=97=AD=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20is=20clicked?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md             | 12 +++++-------
 src/common_utils.js   |  8 ++++++++
 src/event_utils.js    |  9 ++++++---
 src/index.js          |  2 +-
 src/manage_station.js | 36 +++++++++---------------------------
 src/menu.js           | 10 ++++++++--
 src/table_utils.js    | 28 ++++++++++++++++++++++++----
 7 files changed, 61 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index 00739aef6..4bcb63c7c 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 - 각 버튼은 관련 페이지만 보이고 다른 페이지는 숨기기
 
 ### 1. 역 관리
-- 역 관리 버튼 누를 때마다 지하철 역 목록이 localStorage의 역 목록과 다른 경우 
+- 역 관리 버튼 누를 때마다
   - localStorage의 역 목록 불러오기 (역리스트와 노선 등록정보 업데이트)
   - 역 목록을 바탕으로 테이블 생성해서 페이지에 append
 
@@ -25,11 +25,9 @@
 <br>
 
 ### 2. 노선 관리
-- 노선 관리 버튼 누를 때마다 역 목록이 localStorage의 역 목록과 다르면
+- 노선 관리 버튼 누를 때마다
   - localStorage의 역 목록과 다르면 불러오기 (selector 목록 업데이트)
   - 상행 하행 selector에 역 목록 보여주기
-
-- 노선 관리 버튼 누를 때마다 노선 목록이 localStorage의 노선 목록과 다르면
   - localStorage의 노선 목록 불러오기 (상행, 하행 업데이트)
   - 노선 목록을 바탕으로 테이블 생성해서 페이지에 append 
 
@@ -55,13 +53,13 @@
 <br>
 
 ### 3. 구간 관리
-- 구간 관리 버튼 누를 때마다 역 목록이 localStorage의 역 목록과 다르면 
+- 구간 관리 버튼 누를 때마다
   - localStorage의 역 목록 불러오기 (노선 리스트, selector 목록 업데이트)
   - 각 호선별로 버튼과 페이지 생성 (아무 호선도 안 눌렀을 시 아무 페이지도 보이면 안됨)
   - 버튼 클릭시 해당되는 페이지만 보여주기
   - selector에 역 목록 보여주기
 
-- 호선 버튼 누를 때마다 노선 목록이 localStorage에서 노선 목록과 다르면
+- 호선 버튼 누를 때마다
   - localStorage의 노선 목록 불러오기 (노선에 등록된 역 목록 업데이트)
   - 노선 목록을 바탕으로 테이블 생성해서 페이지에 append
 
@@ -84,6 +82,6 @@
 - 호선별 역 목록 테이블에서 해당되는 순서 row 제거
 
 ### 4. 지하철 노선도 출력
-- 지하철 노선도 출력 버튼 클릭할 때마다 노선 목록이 localStorage 노선 목록과 다르면
+- 지하철 노선도 출력 버튼 클릭할 때마다
   - localStorage의 노선 목록 불러오기
   - 호선과 해당되는 역을 순서대로 화면에 출력하기
\ No newline at end of file
diff --git a/src/common_utils.js b/src/common_utils.js
index facfff21d..85b0bc62f 100644
--- a/src/common_utils.js
+++ b/src/common_utils.js
@@ -19,4 +19,12 @@ export default class CommonUtils {
     this._privateDomUtils.appendToIdName(toIdName, newline);
   }
   
+  getLocalStorageStation() {
+    return JSON.parse(localStorage.getItem('stationList'));
+  }
+
+  getLocalStorageLine() {
+    return JSON.parse(localStorage.getItem('lineList'));
+  }
+
 }
\ No newline at end of file
diff --git a/src/event_utils.js b/src/event_utils.js
index b6c4282d5..0ed02184d 100644
--- a/src/event_utils.js
+++ b/src/event_utils.js
@@ -1,11 +1,13 @@
+// import ManageStation from "./manage_station";
+
 export default class EventUtils {
   constructor() {
-    
+    // this._privateManageStation = new ManageStation();
   }
 
-  addEventToButton(button) {
+  addEventToButton(button, callback) {
     button.addEventListener('click', () => {
-      this.deleteRowAndData(button);
+      callback(button);
     });
   }
 
@@ -19,4 +21,5 @@ export default class EventUtils {
   deleteTableRow(row) {
     row.remove();
   }
+
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index c7cfb8874..fbf195d8d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,7 +6,7 @@ export default class SubwayMap {
   constructor() {
     document.body.style.fontFamily = 'Arial';
     new Menu();
-    
+
     new ManageStation();
   }
 }
diff --git a/src/manage_station.js b/src/manage_station.js
index d49b9f6e5..d01dfba46 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -4,21 +4,10 @@ import CommonUtils from './common_utils.js';
 
 export default class ManageStation {
   constructor() {
-    this.initStation();
-    this.getLocalStorageStation();
     this.setPrivateVariable();
+    this._stationList = {};
     this.setConst();
-    this.stationInputSection();
-    this.stationListSection();
-  }
-
-  initStation() {
-    this.getLocalStorageStation();
-    this._privateTableUtils.initTable(this._stationList);  
-  }
-
-  getLocalStorageStation() {
-    this._stationList = JSON.parse(localStorage.getItem('stationList'));
+    this.initPage();
   }
 
   setPrivateVariable() {
@@ -60,19 +49,17 @@ export default class ManageStation {
     this.IS_NOT_VALID = false;
   }
 
-  stationInputSection() {
+  initPage() {
     this._privateCommonUtils.createTitle(this.STATION_INPUT_TITLE_TAG, this.STATION_INPUT_TITLE_TEXT, this.ARTICLE_NAME);
     this.createStationInput();
     this._stationAddButton = this._privateDomUtils.createButton(this.ADD_BUTTON_ID, this.ADD_BUTTON_TEXT);
     this._privateDomUtils.appendToIdName(this.ARTICLE_NAME, this._stationAddButton);
     this.addEventToButton(this.ADD_TYPE, this.MENU_TYPE);
-  }
-
-  stationListSection() {
     this._privateCommonUtils.createTitle(this.STATION_LIST_TITLE_TAG, this.STATION_LIST_TITLE_TEXT, this.ARTICLE_NAME);
-    this._stationTable = this._privateTableUtils.createTable(this.ARTICLE_NAME);
+    this._privateTableUtils.initTable(this.ARTICLE_NAME);
   }
 
+
   createStationInput() {
     const inputObject = this.stationInputObject();
 
@@ -103,15 +90,13 @@ export default class ManageStation {
 
   addStation() {
     if (this.checkStationValidity() === this.IS_VALID) {
-      const rowArray = this.createRowArray(this._stationInput.value);
+      const rowArray = this._privateTableUtils.createRowArray(this._stationInput.value, this.DELETE_BUTTON_TEXT);
       
       this.addToStationList(this._stationInput.value);
       this.saveToLocalStorage();
       this._privateTableUtils.addRow(rowArray, this.ARTICLE_NAME);
       this._stationInput.value = '';
     }
-    console.log('stationlist',this._stationList);
-    
   }
 
   checkStationValidity() {
@@ -139,7 +124,7 @@ export default class ManageStation {
   }
 
   overlap() {
-    if (this._stationList.indexOf(this._stationInput.value) !== -1) {
+    if (this._stationInput.value in this._stationList) {
       return this.IS_NOT_VALID;
     }
 
@@ -150,12 +135,9 @@ export default class ManageStation {
     alert(errorMessage);
   }
 
-  createRowArray(newStation) {
-    return [newStation, 'delete'];
-  }
-
   addToStationList(stationName) {
-    this._stationList.push(stationName);
+    this._stationList = this._privateCommonUtils.getLocalStorageStation();
+    this._stationList[stationName] = [];
   }
 
   saveToLocalStorage() {
diff --git a/src/menu.js b/src/menu.js
index da4aff388..0447e6fa8 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -1,12 +1,17 @@
 import DomUtils from './dom_utils.js';
 import StringUtils from './string_utils.js';
+import ManageStation from './manage_station.js';
+import TableUtils from './table_utils.js';
+import CommonUtils from './common_utils.js';
 
 export default class Menu {
   constructor() {
     this._privateDomUtils = new DomUtils();
     this._privateStringUtils = new StringUtils();
+    this._privateTableUtils = new TableUtils();
+    this._privateCommonUtils = new CommonUtils();
     this.setIdNAme();
-    this.managerButton()
+    this.managerButton();
     this.createMenu();
   }
 
@@ -58,7 +63,8 @@ export default class Menu {
 
   addEventToButton(varName, articleName) {
     this[`_${varName}`].addEventListener('click', () => {
-      this.showArticle(articleName)
+      this.showArticle(articleName);
+      this._privateTableUtils.refreshTable(articleName);
     });
   }
 
diff --git a/src/table_utils.js b/src/table_utils.js
index 7d2c63bd1..7c0ed5f9e 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -1,5 +1,6 @@
 import DomUtils from './dom_utils.js';
 import EventUtils from './event_utils.js';
+import CommonUtils from './common_utils.js';
 
 export default class TableUtils {
   constructor() {
@@ -11,6 +12,7 @@ export default class TableUtils {
   setPrivateVariable() {
     this._privateDomUtils = new DomUtils();
     this._privateEventUtils = new EventUtils();
+    this._privateCommonUtils = new CommonUtils();
   }
 
   setTableType() {
@@ -22,7 +24,6 @@ export default class TableUtils {
   }
 
   setConst() {
-    this.DELETE_BUTTON_FLAG = 'delete';
     this.DELETE_BUTTON_TEXT = '삭제';
     this.ID_ATTRIBUTE = 'id';
   }
@@ -33,10 +34,25 @@ export default class TableUtils {
     this._privateDomUtils.setAttribute(this.ID_ATTRIBUTE, table, `${toIdName}Table`);
     this.addTableStyle(table);
     this.createTitleRow(table, toIdName);
-    this.add
+    
     this._privateDomUtils.appendToIdName(toIdName, table);
   }
 
+  refreshTable(articleName) {
+    if (articleName === 'stationArticle') {
+      this.refreshStationTable(articleName);
+    }
+  }
+
+  refreshStationTable(articleName) {
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+
+    for (const station in stationList) {
+      const rowArray = this.createRowArray(station, this.DELETE_BUTTON_TEXT);
+      this.addRow(rowArray, articleName);
+    }
+  }
+
   addTableStyle(table) {
     table.style.border = '1px solid black';
   }
@@ -61,6 +77,10 @@ export default class TableUtils {
     cell.style.textAlign = 'center';
   }
 
+  createRowArray(newStation, deleteText) {
+    return [newStation, deleteText];
+  }
+
   addRow(rowArray, tableType) {
     const table = document.getElementById(`${tableType}Table`);
     const row = table.insertRow();
@@ -80,7 +100,7 @@ export default class TableUtils {
 
   addCellsAndButton(tableType, row, rowArray) {
     this._tableType[tableType].forEach((v, i) => {
-      if (rowArray[i] === this.DELETE_BUTTON_FLAG) {
+      if (rowArray[i] === this.DELETE_BUTTON_TEXT) {
         const cell = row.insertCell();
 
         this.addDeleteButton(cell, rowArray);
@@ -98,6 +118,6 @@ export default class TableUtils {
     this.addDataAttribute(deleteButton, rowArray);
     this._privateDomUtils.setInnerHtml(deleteButton, this.DELETE_BUTTON_TEXT);
     this._privateDomUtils.appendToVarName(cell, deleteButton);
-    this._privateEventUtils.addEventToButton(deleteButton);
+    this._privateEventUtils.addEventToButton(deleteButton, this._privateEventUtils.deleteRowAndData);
   }
 }
\ No newline at end of file

From 9b1db807eb56ce0cf78e4a4ec86ec9d1ba358889 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Sun, 13 Dec 2020 23:56:43 +0900
Subject: [PATCH 13/44] feat: station delete alert and delete

---
 README.md             | 12 ++++---
 src/common_utils.js   |  3 ++
 src/event_utils.js    | 21 ++----------
 src/manage_station.js |  6 ++--
 src/table_utils.js    | 74 ++++++++++++++++++++++++++++++++++++++++---
 5 files changed, 83 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index 4bcb63c7c..fa4e3d6ed 100644
--- a/README.md
+++ b/README.md
@@ -4,9 +4,7 @@
 - 각 버튼은 관련 페이지만 보이고 다른 페이지는 숨기기
 
 ### 1. 역 관리
-- 역 관리 버튼 누를 때마다
-  - localStorage의 역 목록 불러오기 (역리스트와 노선 등록정보 업데이트)
-  - 역 목록을 바탕으로 테이블 생성해서 페이지에 append
+- 처음 시작시 localStorage를 바탕으로 페이지 구성 요소 생성
 
 - 역 등록 예외사항
   - 역 이름이 한글자 이하인 경우
@@ -17,7 +15,7 @@
 
 - 역 삭제 예외사항
   - 노선에 등록되어있는 경우
-- 삭제 버튼 누르면 확인창 띄우고 역 목록에서 삭제
+- 삭제 버튼 누르면 확인창 띄우기
 - localStorage에 역 목록 새로 저장
 - 삭제된 역 row를 테이블에서 제거
   - 삭제 버튼의 dataset으로 row 찾기
@@ -25,6 +23,8 @@
 <br>
 
 ### 2. 노선 관리
+- 처음 시작시 localStorage를 바탕으로 페이지 구성 요소 생성
+
 - 노선 관리 버튼 누를 때마다
   - localStorage의 역 목록과 다르면 불러오기 (selector 목록 업데이트)
   - 상행 하행 selector에 역 목록 보여주기
@@ -44,7 +44,7 @@
 - 노선 목록 테이블 하단에 row 추가
 
 - 지하철 노선 삭제
-- 삭제 버튼 누르면 확인창 띄우고 노선 목록에서 제거
+- 삭제 버튼 누르면 확인창 띄우기
 - 역 목록에서 해당 역의 노선 정보 제거
 - 노선 목록과 역 목록 localStorage에 새로 저장
 - 노선 목록 테이블에서 해당 row를 제거
@@ -53,6 +53,8 @@
 <br>
 
 ### 3. 구간 관리
+- 처음 시작시 localStorage를 바탕으로 페이지 구성 요소 생성
+
 - 구간 관리 버튼 누를 때마다
   - localStorage의 역 목록 불러오기 (노선 리스트, selector 목록 업데이트)
   - 각 호선별로 버튼과 페이지 생성 (아무 호선도 안 눌렀을 시 아무 페이지도 보이면 안됨)
diff --git a/src/common_utils.js b/src/common_utils.js
index 85b0bc62f..796d51cae 100644
--- a/src/common_utils.js
+++ b/src/common_utils.js
@@ -27,4 +27,7 @@ export default class CommonUtils {
     return JSON.parse(localStorage.getItem('lineList'));
   }
 
+  saveToLocalStorage(datasetName, data) {
+    localStorage.setItem(datasetName, JSON.stringify(data));
+  }
 }
\ No newline at end of file
diff --git a/src/event_utils.js b/src/event_utils.js
index 0ed02184d..c6cc8e3b4 100644
--- a/src/event_utils.js
+++ b/src/event_utils.js
@@ -1,25 +1,8 @@
-// import ManageStation from "./manage_station";
-
 export default class EventUtils {
   constructor() {
-    // this._privateManageStation = new ManageStation();
-  }
-
-  addEventToButton(button, callback) {
-    button.addEventListener('click', () => {
-      callback(button);
-    });
+    
   }
 
-  deleteRowAndData(button) {
-    const dataset = button.dataset.tracking;
-    const row = document.querySelector(`[data-tracking="${dataset}"]`);
-
-    this.deleteTableRow(row, button);
-  }
-
-  deleteTableRow(row) {
-    row.remove();
-  }
+  
 
 }
\ No newline at end of file
diff --git a/src/manage_station.js b/src/manage_station.js
index d01dfba46..28b60020a 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -93,7 +93,7 @@ export default class ManageStation {
       const rowArray = this._privateTableUtils.createRowArray(this._stationInput.value, this.DELETE_BUTTON_TEXT);
       
       this.addToStationList(this._stationInput.value);
-      this.saveToLocalStorage();
+      this._privateCommonUtils.saveToLocalStorage('stationList', this._stationList);
       this._privateTableUtils.addRow(rowArray, this.ARTICLE_NAME);
       this._stationInput.value = '';
     }
@@ -140,7 +140,5 @@ export default class ManageStation {
     this._stationList[stationName] = [];
   }
 
-  saveToLocalStorage() {
-    localStorage.setItem('stationList', JSON.stringify(this._stationList));
-  }
+
 }
\ No newline at end of file
diff --git a/src/table_utils.js b/src/table_utils.js
index 7c0ed5f9e..e17afcc56 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -26,6 +26,8 @@ export default class TableUtils {
   setConst() {
     this.DELETE_BUTTON_TEXT = '삭제';
     this.ID_ATTRIBUTE = 'id';
+    this.IS_VALID = true;
+    this.IS_NOT_VALID = false;
   }
 
   initTable(toIdName) {
@@ -34,16 +36,25 @@ export default class TableUtils {
     this._privateDomUtils.setAttribute(this.ID_ATTRIBUTE, table, `${toIdName}Table`);
     this.addTableStyle(table);
     this.createTitleRow(table, toIdName);
-    
     this._privateDomUtils.appendToIdName(toIdName, table);
+    this.initTableData(toIdName);
   }
 
-  refreshTable(articleName) {
-    if (articleName === 'stationArticle') {
-      this.refreshStationTable(articleName);
+  initTableData(articleName) {
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+
+    for (const station in stationList) {
+      const rowArray = this.createRowArray(station, this.DELETE_BUTTON_TEXT);
+      this.addRow(rowArray, articleName);
     }
   }
 
+  refreshTable(articleName) {
+    // if (articleName === '') {
+    //   this.refreshStationTable(articleName);
+    // }
+  }
+
   refreshStationTable(articleName) {
     const stationList = this._privateCommonUtils.getLocalStorageStation();
 
@@ -107,6 +118,7 @@ export default class TableUtils {
       }
       else {
         const cell = this.addCell(row, i);
+
         this.addCellStyle(cell, rowArray[i]);
       }
     })
@@ -118,6 +130,58 @@ export default class TableUtils {
     this.addDataAttribute(deleteButton, rowArray);
     this._privateDomUtils.setInnerHtml(deleteButton, this.DELETE_BUTTON_TEXT);
     this._privateDomUtils.appendToVarName(cell, deleteButton);
-    this._privateEventUtils.addEventToButton(deleteButton, this._privateEventUtils.deleteRowAndData);
+    this.addEventToDeleteButton(deleteButton, rowArray);
+  }
+
+  addEventToDeleteButton(button, rowArray) {
+    button.addEventListener('click', () => {
+      if (this.ifOkay() === this.IS_VALID) {
+        this.deleteRowAndData(button);
+      }
+    });
+  }
+
+  ifOkay() {
+    if (confirm('정말로 삭제하시겠습니까?')) {
+      return this.IS_VALID;
+    }
+    else {
+      return this.IS_NOT_VALID;
+    }
+  }
+
+  deleteRowAndData(button) {
+    const dataset = button.dataset.tracking;
+    const row = document.querySelector(`[data-tracking="${dataset}"]`);
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+
+    
+    this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
+    this.deleteTableRow(row);
+  }
+
+
+  deleteRowAndData(button) {
+    const dataset = this.getDataAttribute(button);
+    const row = document.querySelector(`[data-tracking="${dataset}"]`);
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+
+    this.removeFromStationList(stationList, dataset);
+    this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
+    this.deleteTableRow(row);
+  }
+
+  getDataAttribute(button) {
+    return button.dataset.tracking;
+  }
+
+  removeFromStationList(stationList, dataset) {
+    const data = dataset.split(',');
+
+    delete stationList[data[0]];
+  }
+
+  deleteTableRow(row) {
+    row.remove();
   }
 }
\ No newline at end of file

From a0da9e751af3588016ebf8bad202099356ccbd70 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Mon, 14 Dec 2020 13:21:24 +0900
Subject: [PATCH 14/44] feat: create line manage page's input, selectors and
 button

feat: check line input validity
---
 src/common_utils.js   |   4 ++
 src/dom_utils.js      |   6 +-
 src/index.js          |   3 +-
 src/line.js           |  89 +++++++++++++++++++++++++++
 src/manage_line.js    | 140 ++++++++++++++++++++++++++++++++++++++++++
 src/manage_station.js |  19 ++----
 src/table_utils.js    |   1 +
 7 files changed, 243 insertions(+), 19 deletions(-)
 create mode 100644 src/line.js
 create mode 100644 src/manage_line.js

diff --git a/src/common_utils.js b/src/common_utils.js
index 796d51cae..72864d08a 100644
--- a/src/common_utils.js
+++ b/src/common_utils.js
@@ -5,6 +5,10 @@ export default class CommonUtils {
     this._privateDomUtils = new DomUtils();
   }
 
+  alertError(errorMessage) {
+    alert(errorMessage);
+  }
+
   createTitle(titleTag, titleContent, toIdName) {
     const title = document.createElement(titleTag);
 
diff --git a/src/dom_utils.js b/src/dom_utils.js
index c3e210701..c72b1cb28 100644
--- a/src/dom_utils.js
+++ b/src/dom_utils.js
@@ -22,8 +22,8 @@ export default class DomUtils {
     return article
   }
 
-  setAttribute(attribute, varName, idName) {
-    varName.setAttribute(attribute, idName);
+  setAttribute(attribute, varName, attributeName) {
+    varName.setAttribute(attribute, attributeName);
   }
 
   setInnerHtml(varName, buttonText) {
@@ -60,7 +60,7 @@ export default class DomUtils {
   }
 
   setInputType(input, type) {
-    input.setAttribute(this.ID_ATTRIBUTE, 'type', type);
+    input.setAttribute('type', type);
   }
 
   setPlaceholder(input, placeholder) {
diff --git a/src/index.js b/src/index.js
index fbf195d8d..dea78cb9c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
-
 import ManageStation from './manage_station.js';
 import Menu from './menu.js';
+import ManageLine from './manage_line.js';
 
 export default class SubwayMap {
   constructor() {
@@ -8,6 +8,7 @@ export default class SubwayMap {
     new Menu();
 
     new ManageStation();
+    new ManageLine();
   }
 }
 
diff --git a/src/line.js b/src/line.js
new file mode 100644
index 000000000..dfe8abcf0
--- /dev/null
+++ b/src/line.js
@@ -0,0 +1,89 @@
+import TableUtils from "./table_utils.js";
+import CommonUtils from "./common_utils.js";
+
+export default class Line {
+  constructor(lineName) {
+    this.lineName = lineName;
+    this.stations = [];
+    this.setConst();
+  }
+
+  setConst() {
+    this.DELETE_BUTTON_TEXT = '삭제';
+    this.IS_NOT_VALID = false;
+    this.IS_VALID = true;
+
+    this.EMPTY_ERROR_MESSAGE = '노선 이름을 한 글자 이상 입력해주세요';
+    this.OVERLAP_ERROR_MESSAGE = '이미 존재하는 노선 이름입니다.'
+    this.SAME_START_END_ERROR_MESSAGE = '상행 종점역과 하행 종점역이 같습니다.'
+  }
+
+  addLine(lineName) {
+    if (this.checkLineValidity(lineName) === this.IS_VALID) {
+      // const rowArray = TableUtils.createRowArray(lineName)
+
+      // this.addToLineList(this._lineInput.value);
+    }
+  }
+
+  checkLineValidity(lineName) {
+    const commonUtils = new CommonUtils();
+    if (this.isEmpty(lineName) === this.IS_NOT_VALID) {
+      commonUtils.alertError(this.EMPTY_ERROR_MESSAGE);
+
+      return this.IS_NOT_VALID;
+    }
+
+    if (this.overlap(lineName) === this.IS_NOT_VALID) {
+      commonUtils.alertError(this.OVERLAP_ERROR_MESSAGE);
+
+      return this.IS_NOT_VALID;
+    }
+
+    if (this.sameStartEnd() === this.IS_NOT_VALID) {
+      commonUtils.alertError(this.SAME_START_END_ERROR_MESSAGE);
+
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  isEmpty(lineName) {
+    if (lineName.length === 0) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  overlap(lineName) {
+    const commonUtils = new CommonUtils();
+    const lineList = commonUtils.getLocalStorageLine();
+
+    if (!lineList) {
+      return this.IS_VALID;
+    }
+    else if  (lineName in lineList) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  sameStartEnd(lineName) {
+    const commonUtils = new CommonUtils();
+    const lineList = commonUtils.getLocalStorageLine();
+    const lineListLen = lineList[lineName].length;
+
+    if (lineList[lineName][0] === lineList[lineName][lineListLen - 1]) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  createRowArray(lineName) {
+    return [lineName, this.DELETE_BUTTON_TEXT];
+  }
+}
\ No newline at end of file
diff --git a/src/manage_line.js b/src/manage_line.js
new file mode 100644
index 000000000..c7e548135
--- /dev/null
+++ b/src/manage_line.js
@@ -0,0 +1,140 @@
+import CommonUtils from "./common_utils.js";
+import DomUtils from "./dom_utils.js";
+import TableUtils from "./table_utils.js";
+import Line from './line.js';
+
+export default class ManageLine {
+  constructor() {
+    this.setConst();
+    this._privateCommonUtils = new CommonUtils();
+    this._privateDomUtils = new DomUtils();
+    this._privateTableUtils = new TableUtils();
+    this.initPage();
+  }
+  setConst() {
+    this.ARTICLE_NAME = 'lineArticle';
+
+    this.LINE_INPUT_ID = 'line-name-input';
+    this.LINE_INPUT_TITLE_TAG = 'div';
+    this.LINE_INPUT_TITLE_TEXT = '노선 이름';
+    this.LINE_INPUT_PLACEHOLDER = '노선 이름을 입력해주세요';
+    this.LINE_INPUT_TYPE = 'String';
+
+    this.START_SELECTOR_SECTION = 'startSelectorSection';
+    this.END_SELECTOR_SECTION = 'endSelectorSection';
+    this.LINE_START_SELECTOR_TEXT = '상행 종점 ';
+    this.LINE_END_SELECTOR_TEXT = '하행 종점 '
+    this.LINE_START_SELECTOR_ID = 'line-start-station-selector';
+    this.LINE_END_SELECTOR_ID = 'line-end-station-selector';
+
+    this.ADD_BUTTON_ID = 'line-add-button';
+    this.ADD_BUTTON_TEXT = '노선 추가';
+
+    this.LINE_LIST_TITLE_TAG = 'h1';
+    this.LINE_LIST_TITLE_TEXT = '🚉 지하철 역 목록';
+    
+    this.IS_VALID = true;
+    this.IS_NOT_VALID = false;
+  }
+
+  initPage() {
+    this.createInputSection();
+    this.createSelectorSection();
+    this._privateCommonUtils.insertNewline(this.ARTICLE_NAME);
+    this.createLineAddButton();
+    this.createTableSection();
+  }
+
+  createInputSection() {
+    this._privateCommonUtils.createTitle('div', this.LINE_INPUT_TITLE_TEXT, this.ARTICLE_NAME);
+    this.createLineInput();
+  }
+
+  createLineInput() {
+    const inputObject = this.lineInputObject();
+
+    this._lineInput = this._privateDomUtils.createInput(inputObject);
+  }
+
+  lineInputObject() {
+    const inputObject = {
+      'toIdName': this.ARTICLE_NAME,
+      'idName': this.LINE_INPUT_ID,
+      'placeholder': this.LINE_INPUT_PLACEHOLDER,
+      'type': this.LINE_INPUT_TYPE,
+    }
+
+    return inputObject;
+  }
+
+  createSelectorSection() {
+    const selectorSection = document.createElement('div');
+    
+    this._privateDomUtils.appendToIdName(this.ARTICLE_NAME, selectorSection);
+    this._privateDomUtils.setAttribute('id', selectorSection, this.SELECTOR_SECTION_NAME)
+
+
+    this._privateCommonUtils.createTitle('span', this.LINE_START_SELECTOR_TEXT, this.SELECTOR_SECTION_NAME);
+    this._startSelector = this.createSelector(selectorSection ,this.LINE_START_SELECTOR_ID);
+    this._privateCommonUtils.createTitle('span', this.LINE_END_SELECTOR_TEXT, this.SELECTOR_SECTION_NAME);
+    this._endSelector = this.createSelector(selectorSection, this.LINE_END_SELECTOR_ID);
+  }
+
+  createSelector(toVarName, idName) {
+    const selector = document.createElement('SELECT');
+
+    this._privateDomUtils.setAttribute('id', selector, idName);
+    this._privateDomUtils.appendToVarName(toVarName, selector);
+    this.addStationsToSelector(selector);
+
+    return selector;
+  }
+
+  addStationsToSelector(selector) {
+    this._stationList = this._privateCommonUtils.getLocalStorageStation();
+
+    if (!this._stationList) {
+      this._stationList = {};
+    }
+
+    for (const station in this._stationList) {
+      this.createSelectorOption(selector, station);
+    }
+  }
+
+  createSelectorOption(selector, station) {
+    const option = document.createElement('option');
+
+    option.innerHTML = station;
+    selector.add(option);
+  }
+
+  createLineAddButton() {
+    this._lineAddButton = this._privateDomUtils.createButton(this.ADD_BUTTON_ID, this.ADD_BUTTON_TEXT);
+    this._privateDomUtils.appendToIdName(this.ARTICLE_NAME, this._lineAddButton);
+    this.addEventToButton();
+  }
+
+  createTableSection() {
+    this._privateCommonUtils.createTitle(this.LINE_LIST_TITLE_TAG, this.LINE_LIST_TITLE_TEXT, this.ARTICLE_NAME);
+    // this._privateTableUtils.initTable(this.ARTICLE_NAME);
+  }
+
+  addEventToButton() {
+    this._lineAddButton.addEventListener('click', () => {
+      this.createNewLine();
+    })
+    this._lineInput.addEventListener('keypress', e => {
+      if (e.keyCode === 13) {
+        this.createNewLine();
+      }
+    })
+  }
+
+  createNewLine() {
+    const newLine = new Line(this._lineInput.value);
+    
+    newLine.addLine(this._lineInput.value);
+
+  }
+}
\ No newline at end of file
diff --git a/src/manage_station.js b/src/manage_station.js
index 28b60020a..4dfff038d 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -17,6 +17,8 @@ export default class ManageStation {
   }
 
   setConst() {
+    this.ARTICLE_NAME = 'stationArticle';
+
     this.MENU_TYPE = 'station',
     this.ADD_TYPE = 'Add',
     this.DELETE_TYPE = 'Delete',
@@ -26,24 +28,16 @@ export default class ManageStation {
     this.STATION_LIST_TITLE_TAG = 'h1';
     this.STATION_LIST_TITLE_TEXT = '🚉 지하철 역 목록';
 
-    this.ARTICLE_NAME = 'stationArticle';
-    
-    this.SETTING = '설정';
-    this.STATION_LIST = '지하철 역 목록';
-
     this.STATION_INPUT_ID = 'station-name-input';
     this.ADD_BUTTON_ID = 'station-add-button';
-    this.DELETE_BUTTON_CLASS = 'station-delete-button';
 
     this.STATION_INPUT_PLACEHOLDER = '역 이름을 입력해주세요';
     this.STATION_INPUT_TYPE = 'String';
     this.MINLENGTH_ERROR_MESSAGE = '역 이름을 두 글자 이상 입력해주세요';
     this.OVERLAP_ERROR_MESSAGE = '이미 존재하는 역입니다.'
 
-
     this.ADD_BUTTON_TEXT = '역 추가';
     this.DELETE_BUTTON_TEXT = '삭제';
-    this.DELETE_ALERT_MESSAGE = '정말로 삭제하시겠습니까?';
 
     this.IS_VALID = true;
     this.IS_NOT_VALID = false;
@@ -59,7 +53,6 @@ export default class ManageStation {
     this._privateTableUtils.initTable(this.ARTICLE_NAME);
   }
 
-
   createStationInput() {
     const inputObject = this.stationInputObject();
 
@@ -101,13 +94,13 @@ export default class ManageStation {
 
   checkStationValidity() {
     if (this.minLength() === this.IS_NOT_VALID) {
-      this.alertError(this.MINLENGTH_ERROR_MESSAGE);
+      this._privateCommonUtils.alertError(this.MINLENGTH_ERROR_MESSAGE);
 
       return this.IS_NOT_VALID;
     }
 
     if (this.overlap() === this.IS_NOT_VALID) {
-      this.alertError(`"${this._stationInput.value}"은/는 ` + this.OVERLAP_ERROR_MESSAGE)
+      this._privateCommonUtils.alertError(`"${this._stationInput.value}"은/는 ` + this.OVERLAP_ERROR_MESSAGE)
 
       return this.IS_NOT_VALID;
     }
@@ -131,10 +124,6 @@ export default class ManageStation {
     return this.IS_VALID;
   }
 
-  alertError(errorMessage) {
-    alert(errorMessage);
-  }
-
   addToStationList(stationName) {
     this._stationList = this._privateCommonUtils.getLocalStorageStation();
     this._stationList[stationName] = [];
diff --git a/src/table_utils.js b/src/table_utils.js
index e17afcc56..0c15bbd4d 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -128,6 +128,7 @@ export default class TableUtils {
     const deleteButton = document.createElement('button');
 
     this.addDataAttribute(deleteButton, rowArray);
+    this._privateDomUtils.setAttribute('class', deleteButton, 'station-delete-button')
     this._privateDomUtils.setInnerHtml(deleteButton, this.DELETE_BUTTON_TEXT);
     this._privateDomUtils.appendToVarName(cell, deleteButton);
     this.addEventToDeleteButton(deleteButton, rowArray);

From a3585192e7f06ecc69528a4b9021493f251345ba Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Mon, 14 Dec 2020 14:55:23 +0900
Subject: [PATCH 15/44] refactor: check line input validity

update localStorage when a new line is registered
---
 src/dom_utils.js   |   4 ++
 src/line.js        |  84 +------------------------
 src/manage_line.js | 154 +++++++++++++++++++++++++++++++++++----------
 src/table_utils.js |   7 +--
 4 files changed, 128 insertions(+), 121 deletions(-)

diff --git a/src/dom_utils.js b/src/dom_utils.js
index c72b1cb28..561f4abc7 100644
--- a/src/dom_utils.js
+++ b/src/dom_utils.js
@@ -66,4 +66,8 @@ export default class DomUtils {
   setPlaceholder(input, placeholder) {
     input.placeholder = placeholder;
   }
+
+  addDataAttribute(tag, trackingData) {
+    tag.setAttribute('data-tracking', trackingData);
+  }
 }
\ No newline at end of file
diff --git a/src/line.js b/src/line.js
index dfe8abcf0..628795fb3 100644
--- a/src/line.js
+++ b/src/line.js
@@ -2,88 +2,8 @@ import TableUtils from "./table_utils.js";
 import CommonUtils from "./common_utils.js";
 
 export default class Line {
-  constructor(lineName) {
+  constructor(lineName, stationArray) {
     this.lineName = lineName;
-    this.stations = [];
-    this.setConst();
-  }
-
-  setConst() {
-    this.DELETE_BUTTON_TEXT = '삭제';
-    this.IS_NOT_VALID = false;
-    this.IS_VALID = true;
-
-    this.EMPTY_ERROR_MESSAGE = '노선 이름을 한 글자 이상 입력해주세요';
-    this.OVERLAP_ERROR_MESSAGE = '이미 존재하는 노선 이름입니다.'
-    this.SAME_START_END_ERROR_MESSAGE = '상행 종점역과 하행 종점역이 같습니다.'
-  }
-
-  addLine(lineName) {
-    if (this.checkLineValidity(lineName) === this.IS_VALID) {
-      // const rowArray = TableUtils.createRowArray(lineName)
-
-      // this.addToLineList(this._lineInput.value);
-    }
-  }
-
-  checkLineValidity(lineName) {
-    const commonUtils = new CommonUtils();
-    if (this.isEmpty(lineName) === this.IS_NOT_VALID) {
-      commonUtils.alertError(this.EMPTY_ERROR_MESSAGE);
-
-      return this.IS_NOT_VALID;
-    }
-
-    if (this.overlap(lineName) === this.IS_NOT_VALID) {
-      commonUtils.alertError(this.OVERLAP_ERROR_MESSAGE);
-
-      return this.IS_NOT_VALID;
-    }
-
-    if (this.sameStartEnd() === this.IS_NOT_VALID) {
-      commonUtils.alertError(this.SAME_START_END_ERROR_MESSAGE);
-
-      return this.IS_NOT_VALID;
-    }
-
-    return this.IS_VALID;
-  }
-
-  isEmpty(lineName) {
-    if (lineName.length === 0) {
-      return this.IS_NOT_VALID;
-    }
-
-    return this.IS_VALID;
-  }
-
-  overlap(lineName) {
-    const commonUtils = new CommonUtils();
-    const lineList = commonUtils.getLocalStorageLine();
-
-    if (!lineList) {
-      return this.IS_VALID;
-    }
-    else if  (lineName in lineList) {
-      return this.IS_NOT_VALID;
-    }
-
-    return this.IS_VALID;
-  }
-
-  sameStartEnd(lineName) {
-    const commonUtils = new CommonUtils();
-    const lineList = commonUtils.getLocalStorageLine();
-    const lineListLen = lineList[lineName].length;
-
-    if (lineList[lineName][0] === lineList[lineName][lineListLen - 1]) {
-      return this.IS_NOT_VALID;
-    }
-
-    return this.IS_VALID;
-  }
-
-  createRowArray(lineName) {
-    return [lineName, this.DELETE_BUTTON_TEXT];
+    this.stations = stationArray;
   }
 }
\ No newline at end of file
diff --git a/src/manage_line.js b/src/manage_line.js
index c7e548135..b914e59e9 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -20,12 +20,10 @@ export default class ManageLine {
     this.LINE_INPUT_PLACEHOLDER = '노선 이름을 입력해주세요';
     this.LINE_INPUT_TYPE = 'String';
 
-    this.START_SELECTOR_SECTION = 'startSelectorSection';
-    this.END_SELECTOR_SECTION = 'endSelectorSection';
-    this.LINE_START_SELECTOR_TEXT = '상행 종점 ';
-    this.LINE_END_SELECTOR_TEXT = '하행 종점 '
-    this.LINE_START_SELECTOR_ID = 'line-start-station-selector';
-    this.LINE_END_SELECTOR_ID = 'line-end-station-selector';
+    this.LINE_START_SELECT_TEXT = '상행 종점 ';
+    this.LINE_END_SELECT_TEXT = '하행 종점 '
+    this.LINE_START_SELECT_ID = 'line-start-station-select';
+    this.LINE_END_SELECT_ID = 'line-end-station-select';
 
     this.ADD_BUTTON_ID = 'line-add-button';
     this.ADD_BUTTON_TEXT = '노선 추가';
@@ -35,16 +33,38 @@ export default class ManageLine {
     
     this.IS_VALID = true;
     this.IS_NOT_VALID = false;
+
+    this.DELETE_BUTTON_TEXT = '삭제';
+    this.IS_NOT_VALID = false;
+    this.IS_VALID = true;
+
+    this.EMPTY_ERROR_MESSAGE = '노선 이름을 한 글자 이상 입력해주세요';
+    this.OVERLAP_ERROR_MESSAGE = '이미 존재하는 노선 이름입니다.'
+    this.SAME_START_END_ERROR_MESSAGE = '상행 종점역과 하행 종점역이 같습니다.'
   }
 
   initPage() {
+    this.initLists();
     this.createInputSection();
-    this.createSelectorSection();
+    this.createSelectSection();
     this._privateCommonUtils.insertNewline(this.ARTICLE_NAME);
     this.createLineAddButton();
     this.createTableSection();
   }
 
+  initLists() {
+    this._lineList = this._privateCommonUtils.getLocalStorageLine();
+    this._stationList = this._privateCommonUtils.getLocalStorageStation();
+
+    if (!this._lineList) {
+      this._lineList = {};
+    }
+
+    if (!this._stationList) {
+      this._stationList = {};
+    }
+  }
+
   createInputSection() {
     this._privateCommonUtils.createTitle('div', this.LINE_INPUT_TITLE_TEXT, this.ARTICLE_NAME);
     this.createLineInput();
@@ -67,46 +87,49 @@ export default class ManageLine {
     return inputObject;
   }
 
-  createSelectorSection() {
-    const selectorSection = document.createElement('div');
+  createSelectSection() {
+    // const selectSection = this.createSelectDOM();
+    this._privateCommonUtils.insertNewline(this.ARTICLE_NAME);
+    this.createSelectStation('start');
+    this.createSelectStation('end');
+  }
+
+  // createSelectDiv() {
+  //   const selectSection = document.createElement('div');
     
-    this._privateDomUtils.appendToIdName(this.ARTICLE_NAME, selectorSection);
-    this._privateDomUtils.setAttribute('id', selectorSection, this.SELECTOR_SECTION_NAME)
+  //   this._privateDomUtils.appendToIdName(this.ARTICLE_NAME, selectSection);
+  //   this._privateDomUtils.setAttribute('id', selectSection, this.SELECT_SECTION_NAME)
+  // }
 
+  createSelectStation(position) {
+    const positionUpper = position.toUpperCase();
 
-    this._privateCommonUtils.createTitle('span', this.LINE_START_SELECTOR_TEXT, this.SELECTOR_SECTION_NAME);
-    this._startSelector = this.createSelector(selectorSection ,this.LINE_START_SELECTOR_ID);
-    this._privateCommonUtils.createTitle('span', this.LINE_END_SELECTOR_TEXT, this.SELECTOR_SECTION_NAME);
-    this._endSelector = this.createSelector(selectorSection, this.LINE_END_SELECTOR_ID);
+    this._privateCommonUtils.createTitle('span', this[`LINE_${positionUpper}_SELECT_TEXT`], this.ARTICLE_NAME);
+    this[`_${position}Select`] = this.createSelect(this.ARTICLE_NAME, this[`LINE_${positionUpper}_SELECT_ID`]);
   }
 
-  createSelector(toVarName, idName) {
-    const selector = document.createElement('SELECT');
+  createSelect(toIdName, idName) {
+    const select = document.createElement('SELECT');
 
-    this._privateDomUtils.setAttribute('id', selector, idName);
-    this._privateDomUtils.appendToVarName(toVarName, selector);
-    this.addStationsToSelector(selector);
+    this._privateDomUtils.setAttribute('id', select, idName);
+    this._privateDomUtils.appendToIdName(toIdName, select);
+    this.addStationsToselect(select);
 
-    return selector;
+    return select;
   }
 
-  addStationsToSelector(selector) {
-    this._stationList = this._privateCommonUtils.getLocalStorageStation();
-
-    if (!this._stationList) {
-      this._stationList = {};
-    }
-
+  addStationsToselect(select) {
     for (const station in this._stationList) {
-      this.createSelectorOption(selector, station);
+      this.createselectOption(select, station);
     }
   }
 
-  createSelectorOption(selector, station) {
+  createselectOption(select, station) {
     const option = document.createElement('option');
 
+    this._privateDomUtils.addDataAttribute(option, station)
     option.innerHTML = station;
-    selector.add(option);
+    select.add(option);
   }
 
   createLineAddButton() {
@@ -132,9 +155,72 @@ export default class ManageLine {
   }
 
   createNewLine() {
-    const newLine = new Line(this._lineInput.value);
-    
-    newLine.addLine(this._lineInput.value);
+    if (this.checkLineValidity(this._lineInput.value) === this.IS_VALID) {
+      const lineStationArray = [this._startSelect.value, this._endSelect.value];
+      const newLine = new Line(this._lineInput.value, lineStationArray);
+
+      this.updateLocalStorage();
+      
+      console.log(newLine);
+    }
+  }
+
+  checkLineValidity() {
+    if (this.isEmpty() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(this.EMPTY_ERROR_MESSAGE);
+
+      return this.IS_NOT_VALID;
+    }
+
+    if (this.overlap() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(this.OVERLAP_ERROR_MESSAGE);
+
+      return this.IS_NOT_VALID;
+    }
+
+    if (this.sameStartEnd() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(this.SAME_START_END_ERROR_MESSAGE);
+
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  isEmpty() {
+    if (this._lineInput.value.length === 0) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  overlap() {
+    if  (this._lineInput.value in this._lineList) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  sameStartEnd() {
+    if (this._startSelect.value === this._endSelect.value) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  updateLocalStorage() {
+    this._lineList[this._lineInput.value] = [this._startSelect.value, this._endSelect.value];
+    this._stationList[this._startSelect.value].push(this._lineInput.value);
+    this._stationList[this._endSelect.value].push(this._lineInput.value);
+
+    this._privateCommonUtils.saveToLocalStorage('lineList', this._lineList);
+    this._privateCommonUtils.saveToLocalStorage('stationList', this._stationList);
+  }
 
+  createRowArray(lineName) {
+    return [lineName, this.DELETE_BUTTON_TEXT];
   }
 }
\ No newline at end of file
diff --git a/src/table_utils.js b/src/table_utils.js
index 0c15bbd4d..e90625184 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -96,13 +96,10 @@ export default class TableUtils {
     const table = document.getElementById(`${tableType}Table`);
     const row = table.insertRow();
 
-    this.addDataAttribute(row, rowArray);
+    this._privateDomUtils.addDataAttribute(row, rowArray);
     this.addCellsAndButton(tableType, row, rowArray);
   }
 
-  addDataAttribute(tag, trackingData) {
-    tag.setAttribute('data-tracking', trackingData);
-  }
 
   addCellStyle(cell, text) {
     cell.innerHTML = text;
@@ -127,7 +124,7 @@ export default class TableUtils {
   addDeleteButton(cell, rowArray) {
     const deleteButton = document.createElement('button');
 
-    this.addDataAttribute(deleteButton, rowArray);
+    this._privateDomUtils.addDataAttribute(deleteButton, rowArray);
     this._privateDomUtils.setAttribute('class', deleteButton, 'station-delete-button')
     this._privateDomUtils.setInnerHtml(deleteButton, this.DELETE_BUTTON_TEXT);
     this._privateDomUtils.appendToVarName(cell, deleteButton);

From 97b76c0905f24dd75e449b3c2a94d10839c69b4e Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Mon, 14 Dec 2020 15:02:01 +0900
Subject: [PATCH 16/44] style: insert new line between select and button

---
 src/common_utils.js |  4 ++--
 src/manage_line.js  | 23 ++++++++---------------
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/common_utils.js b/src/common_utils.js
index 72864d08a..caa7bdf5d 100644
--- a/src/common_utils.js
+++ b/src/common_utils.js
@@ -13,11 +13,11 @@ export default class CommonUtils {
     const title = document.createElement(titleTag);
 
     title.innerHTML = titleContent;
-    this.insertNewline(toIdName);
+    this.insertEmptyline(toIdName);
     this._privateDomUtils.appendToIdName(toIdName, title);
   }
 
-  insertNewline(toIdName) {
+  insertEmptyline(toIdName) {
     const newline = document.createElement('br');
 
     this._privateDomUtils.appendToIdName(toIdName, newline);
diff --git a/src/manage_line.js b/src/manage_line.js
index b914e59e9..47266d21e 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -47,7 +47,8 @@ export default class ManageLine {
     this.initLists();
     this.createInputSection();
     this.createSelectSection();
-    this._privateCommonUtils.insertNewline(this.ARTICLE_NAME);
+    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
+    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
     this.createLineAddButton();
     this.createTableSection();
   }
@@ -88,19 +89,11 @@ export default class ManageLine {
   }
 
   createSelectSection() {
-    // const selectSection = this.createSelectDOM();
-    this._privateCommonUtils.insertNewline(this.ARTICLE_NAME);
+    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
     this.createSelectStation('start');
     this.createSelectStation('end');
   }
 
-  // createSelectDiv() {
-  //   const selectSection = document.createElement('div');
-    
-  //   this._privateDomUtils.appendToIdName(this.ARTICLE_NAME, selectSection);
-  //   this._privateDomUtils.setAttribute('id', selectSection, this.SELECT_SECTION_NAME)
-  // }
-
   createSelectStation(position) {
     const positionUpper = position.toUpperCase();
 
@@ -138,11 +131,6 @@ export default class ManageLine {
     this.addEventToButton();
   }
 
-  createTableSection() {
-    this._privateCommonUtils.createTitle(this.LINE_LIST_TITLE_TAG, this.LINE_LIST_TITLE_TEXT, this.ARTICLE_NAME);
-    // this._privateTableUtils.initTable(this.ARTICLE_NAME);
-  }
-
   addEventToButton() {
     this._lineAddButton.addEventListener('click', () => {
       this.createNewLine();
@@ -220,6 +208,11 @@ export default class ManageLine {
     this._privateCommonUtils.saveToLocalStorage('stationList', this._stationList);
   }
 
+  createTableSection() {
+    this._privateCommonUtils.createTitle(this.LINE_LIST_TITLE_TAG, this.LINE_LIST_TITLE_TEXT, this.ARTICLE_NAME);
+    this._privateTableUtils.initTable(this.ARTICLE_NAME);
+  }
+
   createRowArray(lineName) {
     return [lineName, this.DELETE_BUTTON_TEXT];
   }

From ce84a195c304f8f615c1fc8f4208092bd64e4135 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Mon, 14 Dec 2020 15:13:14 +0900
Subject: [PATCH 17/44] feat: init line list table

---
 src/menu.js        |  2 +-
 src/table_utils.js | 39 ++++++++++++++++++++++++---------------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/menu.js b/src/menu.js
index 0447e6fa8..5380803c4 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -64,7 +64,7 @@ export default class Menu {
   addEventToButton(varName, articleName) {
     this[`_${varName}`].addEventListener('click', () => {
       this.showArticle(articleName);
-      this._privateTableUtils.refreshTable(articleName);
+      // this._privateTableUtils.refreshTable(articleName);
     });
   }
 
diff --git a/src/table_utils.js b/src/table_utils.js
index e90625184..422f9a3d7 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -41,29 +41,42 @@ export default class TableUtils {
   }
 
   initTableData(articleName) {
+    if (articleName === 'stationArticle') {
+      this.initStationTableData(articleName);
+    }
+    else if (articleName === 'lineArticle') {
+      this.initArticleTableData(articleName);
+    }
+  }
+
+  initStationTableData(articleName) {
     const stationList = this._privateCommonUtils.getLocalStorageStation();
 
     for (const station in stationList) {
-      const rowArray = this.createRowArray(station, this.DELETE_BUTTON_TEXT);
+      const rowArray = [station, this.DELETE_BUTTON_TEXT];
       this.addRow(rowArray, articleName);
     }
   }
 
-  refreshTable(articleName) {
-    // if (articleName === '') {
-    //   this.refreshStationTable(articleName);
-    // }
-  }
-
-  refreshStationTable(articleName) {
-    const stationList = this._privateCommonUtils.getLocalStorageStation();
+  initArticleTableData(articleName) {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
 
-    for (const station in stationList) {
-      const rowArray = this.createRowArray(station, this.DELETE_BUTTON_TEXT);
+    for (const line in lineList) {
+      const lineLen = lineList[line].length;
+      const rowArray = [line, lineList[line][0], lineList[line][lineLen - 1], this.DELETE_BUTTON_TEXT];
       this.addRow(rowArray, articleName);
     }
   }
 
+  // refreshStationTable(articleName) {
+  //   const stationList = this._privateCommonUtils.getLocalStorageStation();
+
+  //   for (const station in stationList) {
+  //     const rowArray = this.createRowArray(station, this.DELETE_BUTTON_TEXT);
+  //     this.addRow(rowArray, articleName);
+  //   }
+  // }
+
   addTableStyle(table) {
     table.style.border = '1px solid black';
   }
@@ -88,10 +101,6 @@ export default class TableUtils {
     cell.style.textAlign = 'center';
   }
 
-  createRowArray(newStation, deleteText) {
-    return [newStation, deleteText];
-  }
-
   addRow(rowArray, tableType) {
     const table = document.getElementById(`${tableType}Table`);
     const row = table.insertRow();

From e17c1df40cf07032f146b12286c15bdf128ad3ab Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Mon, 14 Dec 2020 17:22:37 +0900
Subject: [PATCH 18/44] feat: line table delete feature

faet: update localStorage when deleted
---
 src/manage_line.js    |  7 ++---
 src/manage_station.js |  2 +-
 src/table_utils.js    | 60 +++++++++++++++++++++++++++++++------------
 3 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/src/manage_line.js b/src/manage_line.js
index 47266d21e..ca99ed445 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -145,11 +145,8 @@ export default class ManageLine {
   createNewLine() {
     if (this.checkLineValidity(this._lineInput.value) === this.IS_VALID) {
       const lineStationArray = [this._startSelect.value, this._endSelect.value];
-      const newLine = new Line(this._lineInput.value, lineStationArray);
 
-      this.updateLocalStorage();
-      
-      console.log(newLine);
+      this.updateAddToLocalStorage();
     }
   }
 
@@ -199,7 +196,7 @@ export default class ManageLine {
     return this.IS_VALID;
   }
 
-  updateLocalStorage() {
+  updateAddToLocalStorage() {
     this._lineList[this._lineInput.value] = [this._startSelect.value, this._endSelect.value];
     this._stationList[this._startSelect.value].push(this._lineInput.value);
     this._stationList[this._endSelect.value].push(this._lineInput.value);
diff --git a/src/manage_station.js b/src/manage_station.js
index 4dfff038d..64694e024 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -83,7 +83,7 @@ export default class ManageStation {
 
   addStation() {
     if (this.checkStationValidity() === this.IS_VALID) {
-      const rowArray = this._privateTableUtils.createRowArray(this._stationInput.value, this.DELETE_BUTTON_TEXT);
+      const rowArray = [this._stationInput.value, this.DELETE_BUTTON_TEXT];
       
       this.addToStationList(this._stationInput.value);
       this._privateCommonUtils.saveToLocalStorage('stationList', this._stationList);
diff --git a/src/table_utils.js b/src/table_utils.js
index 422f9a3d7..5eedc8f51 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -137,10 +137,10 @@ export default class TableUtils {
     this._privateDomUtils.setAttribute('class', deleteButton, 'station-delete-button')
     this._privateDomUtils.setInnerHtml(deleteButton, this.DELETE_BUTTON_TEXT);
     this._privateDomUtils.appendToVarName(cell, deleteButton);
-    this.addEventToDeleteButton(deleteButton, rowArray);
+    this.addEventToDeleteButton(deleteButton);
   }
 
-  addEventToDeleteButton(button, rowArray) {
+  addEventToDeleteButton(button) {
     button.addEventListener('click', () => {
       if (this.ifOkay() === this.IS_VALID) {
         this.deleteRowAndData(button);
@@ -158,34 +158,60 @@ export default class TableUtils {
   }
 
   deleteRowAndData(button) {
-    const dataset = button.dataset.tracking;
+    const dataset = this.getDataAttribute(button);
+    const datasetArray = dataset.split(',');
     const row = document.querySelector(`[data-tracking="${dataset}"]`);
-    const stationList = this._privateCommonUtils.getLocalStorageStation();
 
-    
-    this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
+    this.updateDeleteToLocalStorage(button, datasetArray);
     this.deleteTableRow(row);
   }
 
+  getDataAttribute(button) {
+    return button.dataset.tracking;
+  }
 
-  deleteRowAndData(button) {
-    const dataset = this.getDataAttribute(button);
-    const row = document.querySelector(`[data-tracking="${dataset}"]`);
+  updateDeleteToLocalStorage(button, datasetArray) {
     const stationList = this._privateCommonUtils.getLocalStorageStation();
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
 
-    this.removeFromStationList(stationList, dataset);
-    this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
-    this.deleteTableRow(row);
+    if (this.checkTableId(button) === 'stationArticleTable') {
+      const station = datasetArray[0];
+
+      stationList = this.removeFromObject(stationList, station);
+      this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
+    }
+    else if (this.checkTableId(button) === 'lineArticleTable') {
+      const line = datasetArray[0];
+
+      this.removeStationFromLine(line, lineList, stationList);
+      this.removeFromObject(lineList, line);
+      this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
+      this._privateCommonUtils.saveToLocalStorage('lineList', lineList);
+    }
   }
 
-  getDataAttribute(button) {
-    return button.dataset.tracking;
+  checkTableId(button) {
+    return button.parentNode.parentNode.parentNode.parentNode.id;
   }
 
-  removeFromStationList(stationList, dataset) {
-    const data = dataset.split(',');
+  removeStationFromLine(line, lineList, stationList) {
+    for (const station of lineList[line]) {
+      this.removeFromArray(stationList[station], line);
+    }
+  }
+
+  removeFromObject(object, name) {
+    delete object[name];
+
+    return object;
+  }
+
+  removeFromArray(array, name) {
+    const index = array.indexOf(name);
+
+    array.splice(index, 1);
 
-    delete stationList[data[0]];
+    return array;
   }
 
   deleteTableRow(row) {

From b15832e7b8d6fa4c6a6c422065f9f2a3de7a33df Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Mon, 14 Dec 2020 17:26:15 +0900
Subject: [PATCH 19/44] feat: update table when a new line is registered

---
 src/manage_line.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/manage_line.js b/src/manage_line.js
index ca99ed445..98280121d 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -144,9 +144,8 @@ export default class ManageLine {
 
   createNewLine() {
     if (this.checkLineValidity(this._lineInput.value) === this.IS_VALID) {
-      const lineStationArray = [this._startSelect.value, this._endSelect.value];
-
       this.updateAddToLocalStorage();
+      this.addLine();
     }
   }
 
@@ -210,7 +209,9 @@ export default class ManageLine {
     this._privateTableUtils.initTable(this.ARTICLE_NAME);
   }
 
-  createRowArray(lineName) {
-    return [lineName, this.DELETE_BUTTON_TEXT];
+  addLine() {
+    const rowArray = [this._lineInput.value, this._startSelect.value, this._endSelect.value, this.DELETE_BUTTON_TEXT];
+
+    this._privateTableUtils.addRow(rowArray, this.ARTICLE_NAME);
   }
 }
\ No newline at end of file

From ed1acda8e9047046df444bb9421c6e5035565e81 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Mon, 14 Dec 2020 20:05:54 +0900
Subject: [PATCH 20/44] feat: add alert when trying to delete station
 registered to line

---
 src/common_utils.js   |  16 ++++++-
 src/event_utils.js    |   8 ----
 src/line.js           |   9 ----
 src/manage_line.js    |   9 ----
 src/manage_station.js |   7 ++-
 src/table_utils.js    | 107 ++++++++++++++++++++++++++++++++----------
 6 files changed, 102 insertions(+), 54 deletions(-)
 delete mode 100644 src/event_utils.js
 delete mode 100644 src/line.js

diff --git a/src/common_utils.js b/src/common_utils.js
index caa7bdf5d..146e26094 100644
--- a/src/common_utils.js
+++ b/src/common_utils.js
@@ -24,11 +24,23 @@ export default class CommonUtils {
   }
   
   getLocalStorageStation() {
-    return JSON.parse(localStorage.getItem('stationList'));
+    const stationList = JSON.parse(localStorage.getItem('stationList'));
+
+    if (!stationList) {
+      return {};
+    }
+
+    return stationList;
   }
 
   getLocalStorageLine() {
-    return JSON.parse(localStorage.getItem('lineList'));
+    const lineList = JSON.parse(localStorage.getItem('lineList'));
+
+    if (!lineList) {
+      return {};
+    }
+
+    return lineList;
   }
 
   saveToLocalStorage(datasetName, data) {
diff --git a/src/event_utils.js b/src/event_utils.js
deleted file mode 100644
index c6cc8e3b4..000000000
--- a/src/event_utils.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default class EventUtils {
-  constructor() {
-    
-  }
-
-  
-
-}
\ No newline at end of file
diff --git a/src/line.js b/src/line.js
deleted file mode 100644
index 628795fb3..000000000
--- a/src/line.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import TableUtils from "./table_utils.js";
-import CommonUtils from "./common_utils.js";
-
-export default class Line {
-  constructor(lineName, stationArray) {
-    this.lineName = lineName;
-    this.stations = stationArray;
-  }
-}
\ No newline at end of file
diff --git a/src/manage_line.js b/src/manage_line.js
index 98280121d..02d55dc0a 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -1,7 +1,6 @@
 import CommonUtils from "./common_utils.js";
 import DomUtils from "./dom_utils.js";
 import TableUtils from "./table_utils.js";
-import Line from './line.js';
 
 export default class ManageLine {
   constructor() {
@@ -56,14 +55,6 @@ export default class ManageLine {
   initLists() {
     this._lineList = this._privateCommonUtils.getLocalStorageLine();
     this._stationList = this._privateCommonUtils.getLocalStorageStation();
-
-    if (!this._lineList) {
-      this._lineList = {};
-    }
-
-    if (!this._stationList) {
-      this._stationList = {};
-    }
   }
 
   createInputSection() {
diff --git a/src/manage_station.js b/src/manage_station.js
index 64694e024..0aa334dad 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -126,8 +126,11 @@ export default class ManageStation {
 
   addToStationList(stationName) {
     this._stationList = this._privateCommonUtils.getLocalStorageStation();
+    
+    if (!this._stationList) {
+      this._stationList = {};
+    }
+
     this._stationList[stationName] = [];
   }
-
-
 }
\ No newline at end of file
diff --git a/src/table_utils.js b/src/table_utils.js
index 5eedc8f51..b3e2db265 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -1,5 +1,4 @@
 import DomUtils from './dom_utils.js';
-import EventUtils from './event_utils.js';
 import CommonUtils from './common_utils.js';
 
 export default class TableUtils {
@@ -11,7 +10,6 @@ export default class TableUtils {
 
   setPrivateVariable() {
     this._privateDomUtils = new DomUtils();
-    this._privateEventUtils = new EventUtils();
     this._privateCommonUtils = new CommonUtils();
   }
 
@@ -24,10 +22,18 @@ export default class TableUtils {
   }
 
   setConst() {
-    this.DELETE_BUTTON_TEXT = '삭제';
+    this.STATION_DELETE_BUTTON_TEXT = '삭제';
+    this.LINE_DELETE_BUTTON_TEXT = '삭제';
+    this.SECTION_DELETE_BUTTON_TEXT = '노선에서 제거';
     this.ID_ATTRIBUTE = 'id';
-    this.IS_VALID = true;
-    this.IS_NOT_VALID = false;
+    this.IS_VALID = 1;
+    this.IS_NOT_VALID = 0;
+
+    this.STATION_DELETE_ERROR_MESSAGE = '노선에 등록되어 있는 역은 삭제할 수 없습니다.'
+
+    this.STATION_TABLE_NAME = 'stationArticleTable';
+    this.LINE_TABLE_NAME = 'lineArticleTable';
+    this.SECTION_TABLE_NAME = 'sectionArticleTable';
   }
 
   initTable(toIdName) {
@@ -53,7 +59,7 @@ export default class TableUtils {
     const stationList = this._privateCommonUtils.getLocalStorageStation();
 
     for (const station in stationList) {
-      const rowArray = [station, this.DELETE_BUTTON_TEXT];
+      const rowArray = [station, this.STATION_DELETE_BUTTON_TEXT];
       this.addRow(rowArray, articleName);
     }
   }
@@ -63,7 +69,7 @@ export default class TableUtils {
 
     for (const line in lineList) {
       const lineLen = lineList[line].length;
-      const rowArray = [line, lineList[line][0], lineList[line][lineLen - 1], this.DELETE_BUTTON_TEXT];
+      const rowArray = [line, lineList[line][0], lineList[line][lineLen - 1], this.LINE_DELETE_BUTTON_TEXT];
       this.addRow(rowArray, articleName);
     }
   }
@@ -109,45 +115,80 @@ export default class TableUtils {
     this.addCellsAndButton(tableType, row, rowArray);
   }
 
-
-  addCellStyle(cell, text) {
+  addCellText(cell, text) {
     cell.innerHTML = text;
+  }
+  
+  addCellBorder(cell) {
     cell.style.border = '1px solid black';
   }
 
   addCellsAndButton(tableType, row, rowArray) {
     this._tableType[tableType].forEach((v, i) => {
-      if (rowArray[i] === this.DELETE_BUTTON_TEXT) {
-        const cell = row.insertCell();
+      const typeUpper = this.getType(tableType).toUpperCase();
+      const cell = row.insertCell(i);
+
+      this.addCellBorder(cell);
 
-        this.addDeleteButton(cell, rowArray);
+      if (rowArray[i] === this[`${typeUpper}_DELETE_BUTTON_TEXT`]) {
+        this.addDeleteButton(cell, rowArray, typeUpper);
       }
       else {
-        const cell = this.addCell(row, i);
-
-        this.addCellStyle(cell, rowArray[i]);
+        this.addCellText(cell, rowArray[i]);
       }
     })
   }
 
-  addDeleteButton(cell, rowArray) {
+  addDeleteButton(cell, rowArray, typeUpper) {
     const deleteButton = document.createElement('button');
+    const type = typeUpper.toLowerCase();
 
     this._privateDomUtils.addDataAttribute(deleteButton, rowArray);
-    this._privateDomUtils.setAttribute('class', deleteButton, 'station-delete-button')
-    this._privateDomUtils.setInnerHtml(deleteButton, this.DELETE_BUTTON_TEXT);
+    this._privateDomUtils.setAttribute('class', deleteButton, `${type}-delete-button`)
+    this._privateDomUtils.setInnerHtml(deleteButton, this[`${typeUpper}_DELETE_BUTTON_TEXT`]);
     this._privateDomUtils.appendToVarName(cell, deleteButton);
-    this.addEventToDeleteButton(deleteButton);
+    this.addEventToDeleteButton(deleteButton, type);
   }
 
-  addEventToDeleteButton(button) {
+  getType(tableType) {
+    let type = '';
+
+    for (let i = 0; i < tableType.length; i++) {
+      if (tableType[i] >= 'A' && tableType[i] <= 'Z') {
+        return type
+      }
+      type += tableType[i];
+    }
+
+    return type;
+  }
+
+  addEventToDeleteButton(deleteButton, type) {
+    if (type === 'station') {
+      this.addEventToStationDeleteButton(deleteButton);
+    }
+    else if (type === 'line') {
+      this.addEventToLineDeleteButton(deleteButton);
+    }
+  }
+
+  addEventToStationDeleteButton(button) {
     button.addEventListener('click', () => {
-      if (this.ifOkay() === this.IS_VALID) {
+      if (this.ifOkay() * this.checkDeleteValidity(button) === this.IS_VALID) {
         this.deleteRowAndData(button);
       }
+      else {
+        this._privateCommonUtils.alertError(this.STATION_DELETE_ERROR_MESSAGE);
+      }
     });
   }
 
+  addEventToLineDeleteButton(button) {
+    button.addEventListener('click', () => {
+      this.deleteRowAndData(button);
+    })
+  }
+
   ifOkay() {
     if (confirm('정말로 삭제하시겠습니까?')) {
       return this.IS_VALID;
@@ -157,6 +198,24 @@ export default class TableUtils {
     }
   }
 
+  checkDeleteValidity(button) {
+    if (this.checkTableId(button) === this.STATION_TABLE_NAME) {
+      return this.checkIfRegisteredToLine(button);
+    }
+  }
+
+  checkIfRegisteredToLine(button) {
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+    const dataset = this.getDataAttribute(button);
+    const station = dataset.split(',')[0];
+
+    if (stationList[station][0]) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
   deleteRowAndData(button) {
     const dataset = this.getDataAttribute(button);
     const datasetArray = dataset.split(',');
@@ -174,13 +233,13 @@ export default class TableUtils {
     const stationList = this._privateCommonUtils.getLocalStorageStation();
     const lineList = this._privateCommonUtils.getLocalStorageLine();
 
-    if (this.checkTableId(button) === 'stationArticleTable') {
+    if (this.checkTableId(button) === this.STATION_TABLE_NAME) {
       const station = datasetArray[0];
 
-      stationList = this.removeFromObject(stationList, station);
+      this.removeFromObject(stationList, station);
       this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
     }
-    else if (this.checkTableId(button) === 'lineArticleTable') {
+    else if (this.checkTableId(button) === this.LINE_TABLE_NAME) {
       const line = datasetArray[0];
 
       this.removeStationFromLine(line, lineList, stationList);

From e932fce0089ceb4413b3a52f71f790872ada357d Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Mon, 14 Dec 2020 20:07:03 +0900
Subject: [PATCH 21/44] docs: gitignore

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

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..fd5106ff2
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_STORE

From 431031b65bcced62bcdbe0fe96a9eee7875c4982 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Mon, 14 Dec 2020 21:32:38 +0900
Subject: [PATCH 22/44] feat: update select whenever line manage page is loaded

---
 src/manage_line.js  | 62 +++++++++++---------------------------------
 src/menu.js         | 30 +++++++++++++++++++--
 src/select_utils.js | 63 +++++++++++++++++++++++++++++++++++++++++++++
 src/table_utils.js  | 32 ++++++++++++++++-------
 4 files changed, 128 insertions(+), 59 deletions(-)
 create mode 100644 src/select_utils.js

diff --git a/src/manage_line.js b/src/manage_line.js
index 02d55dc0a..f613988d9 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -1,6 +1,7 @@
 import CommonUtils from "./common_utils.js";
 import DomUtils from "./dom_utils.js";
 import TableUtils from "./table_utils.js";
+import SelectUtils from "./select_utils.js";
 
 export default class ManageLine {
   constructor() {
@@ -8,8 +9,10 @@ export default class ManageLine {
     this._privateCommonUtils = new CommonUtils();
     this._privateDomUtils = new DomUtils();
     this._privateTableUtils = new TableUtils();
+    this._privateSelectUtils = new SelectUtils();
     this.initPage();
   }
+
   setConst() {
     this.ARTICLE_NAME = 'lineArticle';
 
@@ -18,20 +21,15 @@ export default class ManageLine {
     this.LINE_INPUT_TITLE_TEXT = '노선 이름';
     this.LINE_INPUT_PLACEHOLDER = '노선 이름을 입력해주세요';
     this.LINE_INPUT_TYPE = 'String';
-
-    this.LINE_START_SELECT_TEXT = '상행 종점 ';
-    this.LINE_END_SELECT_TEXT = '하행 종점 '
-    this.LINE_START_SELECT_ID = 'line-start-station-select';
-    this.LINE_END_SELECT_ID = 'line-end-station-select';
-
+    
     this.ADD_BUTTON_ID = 'line-add-button';
     this.ADD_BUTTON_TEXT = '노선 추가';
 
     this.LINE_LIST_TITLE_TAG = 'h1';
     this.LINE_LIST_TITLE_TEXT = '🚉 지하철 역 목록';
     
-    this.IS_VALID = true;
-    this.IS_NOT_VALID = false;
+    this.IS_VALID = 1;
+    this.IS_NOT_VALID = 0;
 
     this.DELETE_BUTTON_TEXT = '삭제';
     this.IS_NOT_VALID = false;
@@ -45,7 +43,7 @@ export default class ManageLine {
   initPage() {
     this.initLists();
     this.createInputSection();
-    this.createSelectSection();
+    this._privateSelectUtils.createSelectSection(this.ARTICLE_NAME);
     this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
     this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
     this.createLineAddButton();
@@ -79,43 +77,6 @@ export default class ManageLine {
     return inputObject;
   }
 
-  createSelectSection() {
-    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
-    this.createSelectStation('start');
-    this.createSelectStation('end');
-  }
-
-  createSelectStation(position) {
-    const positionUpper = position.toUpperCase();
-
-    this._privateCommonUtils.createTitle('span', this[`LINE_${positionUpper}_SELECT_TEXT`], this.ARTICLE_NAME);
-    this[`_${position}Select`] = this.createSelect(this.ARTICLE_NAME, this[`LINE_${positionUpper}_SELECT_ID`]);
-  }
-
-  createSelect(toIdName, idName) {
-    const select = document.createElement('SELECT');
-
-    this._privateDomUtils.setAttribute('id', select, idName);
-    this._privateDomUtils.appendToIdName(toIdName, select);
-    this.addStationsToselect(select);
-
-    return select;
-  }
-
-  addStationsToselect(select) {
-    for (const station in this._stationList) {
-      this.createselectOption(select, station);
-    }
-  }
-
-  createselectOption(select, station) {
-    const option = document.createElement('option');
-
-    this._privateDomUtils.addDataAttribute(option, station)
-    option.innerHTML = station;
-    select.add(option);
-  }
-
   createLineAddButton() {
     this._lineAddButton = this._privateDomUtils.createButton(this.ADD_BUTTON_ID, this.ADD_BUTTON_TEXT);
     this._privateDomUtils.appendToIdName(this.ARTICLE_NAME, this._lineAddButton);
@@ -171,7 +132,8 @@ export default class ManageLine {
   }
 
   overlap() {
-    if  (this._lineInput.value in this._lineList) {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+    if  (this._lineInput.value in lineList) {
       return this.IS_NOT_VALID;
     }
 
@@ -179,6 +141,7 @@ export default class ManageLine {
   }
 
   sameStartEnd() {
+    this.getSelect();
     if (this._startSelect.value === this._endSelect.value) {
       return this.IS_NOT_VALID;
     }
@@ -186,6 +149,11 @@ export default class ManageLine {
     return this.IS_VALID;
   }
 
+  getSelect() {
+    this._startSelect = document.getElementById('line-start-station-selector');
+    this._endSelect = document.getElementById('line-end-station-selector');
+  }
+
   updateAddToLocalStorage() {
     this._lineList[this._lineInput.value] = [this._startSelect.value, this._endSelect.value];
     this._stationList[this._startSelect.value].push(this._lineInput.value);
diff --git a/src/menu.js b/src/menu.js
index 5380803c4..2741a3fe6 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -1,8 +1,9 @@
 import DomUtils from './dom_utils.js';
 import StringUtils from './string_utils.js';
-import ManageStation from './manage_station.js';
 import TableUtils from './table_utils.js';
 import CommonUtils from './common_utils.js';
+import ManageLine from './manage_line.js';
+import SelectUtils from './select_utils.js';
 
 export default class Menu {
   constructor() {
@@ -10,6 +11,7 @@ export default class Menu {
     this._privateStringUtils = new StringUtils();
     this._privateTableUtils = new TableUtils();
     this._privateCommonUtils = new CommonUtils();
+    this._privateSelectUtils = new SelectUtils();
     this.setIdNAme();
     this.managerButton();
     this.createMenu();
@@ -19,6 +21,10 @@ export default class Menu {
     this.APP = 'app';
     this.ARTICLE_AREA = 'articleArea';
     this.DO_NOT_APPEND = false;
+
+    this.LINE_ARTICLE = 'lineArticle';
+    this.SECTION_ARTICLE = 'sectionArticle';
+    this.MAP_PRINT_ARTICLE = 'mapPrintArticle';
   }
 
   managerButton() {
@@ -64,7 +70,7 @@ export default class Menu {
   addEventToButton(varName, articleName) {
     this[`_${varName}`].addEventListener('click', () => {
       this.showArticle(articleName);
-      // this._privateTableUtils.refreshTable(articleName);
+      this.refreshArticle(articleName);
     });
   }
 
@@ -82,4 +88,24 @@ export default class Menu {
   showCorrespondingArticle(articleName) {
     this[`_${articleName}`].style.display = 'block';
   }
+
+  refreshArticle(articleName) {
+    if (articleName === this.LINE_ARTICLE) {
+      this.refreshLineSelect();
+      // this._privateTableUtils.refreshLineTable();
+    }
+  }
+
+  refreshLineSelect() {
+    const startSelect = document.getElementById('line-start-station-selector');
+    const endSelect = document.getElementById('line-end-station-selector');
+    
+
+    startSelect.innerHTML = '';
+    endSelect.innerHTML = '';
+
+    this._privateSelectUtils.addStationsToSelect(startSelect, this._privateCommonUtils, this._privateDomUtils);
+    this._privateSelectUtils.addStationsToSelect(endSelect, this._privateCommonUtils, this._privateDomUtils);
+    
+  }
 }
\ No newline at end of file
diff --git a/src/select_utils.js b/src/select_utils.js
new file mode 100644
index 000000000..4391129bf
--- /dev/null
+++ b/src/select_utils.js
@@ -0,0 +1,63 @@
+import CommonUtils from './common_utils.js';
+import DomUtils from './dom_utils.js';
+
+export default class SelectUtils {
+  setPrivateVariables() {
+    this._privateCommonUtils = new CommonUtils();
+    this._privateDomUtils = new DomUtils();
+  }
+
+  initLists() {
+    this._lineList = this._privateCommonUtils.getLocalStorageLine();
+    this._stationList = this._privateCommonUtils.getLocalStorageStation();
+  }
+
+  setConst() {
+    this.LINE_START_SELECT_ID = 'line-start-station-selector';
+    this.LINE_END_SELECT_ID = 'line-end-station-selector';
+    this.LINE_START_SELECT_TEXT = '상행 종점 ';
+    this.LINE_END_SELECT_TEXT = '하행 종점 '
+  }
+
+  createSelectSection(articleName) {
+    this.setPrivateVariables();
+    this.setConst();
+
+    this._privateCommonUtils.insertEmptyline(articleName);
+    this.createSelectStation('start', articleName);
+    this.createSelectStation('end', articleName);
+  }
+
+  createSelectStation(position, articleName) {
+    const positionUpper = position.toUpperCase();
+
+    this._privateCommonUtils.createTitle('span', this[`LINE_${positionUpper}_SELECT_TEXT`], articleName);
+    this[`_${position}Select`] = this.createSelect(articleName, this[`LINE_${positionUpper}_SELECT_ID`]);
+  }
+
+  createSelect(toIdName, idName) {
+    const select = document.createElement('SELECT');
+
+    this._privateDomUtils.setAttribute('id', select, idName);
+    this._privateDomUtils.appendToIdName(toIdName, select);
+    this.addStationsToSelect(select, this._privateCommonUtils, this._privateDomUtils);
+
+    return select;
+  }
+
+  addStationsToSelect(select, commonUtils, domUtils) {
+    const stationList = commonUtils.getLocalStorageStation();
+
+    for (const station in stationList) {
+      this.createSelectOption(select, station, domUtils);
+    }
+  }
+
+  createSelectOption(select, station, domUtils) {
+    const option = document.createElement('option');
+
+    domUtils.addDataAttribute(option, station)
+    option.innerHTML = station;
+    select.add(option);
+  }
+}
\ No newline at end of file
diff --git a/src/table_utils.js b/src/table_utils.js
index b3e2db265..9ce30c59b 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -83,6 +83,10 @@ export default class TableUtils {
   //   }
   // }
 
+  refreshLineSelect() {
+
+  }
+
   addTableStyle(table) {
     table.style.border = '1px solid black';
   }
@@ -234,21 +238,29 @@ export default class TableUtils {
     const lineList = this._privateCommonUtils.getLocalStorageLine();
 
     if (this.checkTableId(button) === this.STATION_TABLE_NAME) {
-      const station = datasetArray[0];
-
-      this.removeFromObject(stationList, station);
-      this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
+      this.updateStationDelete(stationList, datasetArray);
     }
     else if (this.checkTableId(button) === this.LINE_TABLE_NAME) {
-      const line = datasetArray[0];
-
-      this.removeStationFromLine(line, lineList, stationList);
-      this.removeFromObject(lineList, line);
-      this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
-      this._privateCommonUtils.saveToLocalStorage('lineList', lineList);
+      this.updateLineDelete(stationList, lineList, datasetArray);
     }
   }
 
+  updateStationDelete(stationList, datasetArray) {
+    const station = datasetArray[0];
+
+    this.removeFromObject(stationList, station);
+    this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
+  }
+
+  updateLineDelete(stationList, lineList, datasetArray) {
+    const line = datasetArray[0];
+
+    this.removeStationFromLine(line, lineList, stationList);
+    this.removeFromObject(lineList, line);
+    this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
+    this._privateCommonUtils.saveToLocalStorage('lineList', lineList);
+  }
+
   checkTableId(button) {
     return button.parentNode.parentNode.parentNode.parentNode.id;
   }

From 15663f7dfb3ea66d3eece13dc91c6ce0901c11e9 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Mon, 14 Dec 2020 23:46:07 +0900
Subject: [PATCH 23/44] faet: refresh mapPrint page whenever map print manager
 button is clicked

---
 src/common_utils.js | 18 +++++++++++++++++-
 src/menu.js         | 27 ++++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/common_utils.js b/src/common_utils.js
index 146e26094..03b7d004a 100644
--- a/src/common_utils.js
+++ b/src/common_utils.js
@@ -13,10 +13,26 @@ export default class CommonUtils {
     const title = document.createElement(titleTag);
 
     title.innerHTML = titleContent;
-    this.insertEmptyline(toIdName);
     this._privateDomUtils.appendToIdName(toIdName, title);
   }
 
+  createUnorderedList(stationList, toIdName) {
+    const list = document.createElement('ul');
+
+    this._privateDomUtils.appendToIdName(toIdName, list);
+
+    for (const station of stationList) {
+      this.createListElement(list, station);
+    }
+  }
+
+  createListElement(list, station) {
+    const element = document.createElement('li')
+
+    element.innerHTML = station;
+    this._privateDomUtils.appendToVarName(list, element);
+  }
+
   insertEmptyline(toIdName) {
     const newline = document.createElement('br');
 
diff --git a/src/menu.js b/src/menu.js
index 2741a3fe6..d09ffb21b 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -24,7 +24,7 @@ export default class Menu {
 
     this.LINE_ARTICLE = 'lineArticle';
     this.SECTION_ARTICLE = 'sectionArticle';
-    this.MAP_PRINT_ARTICLE = 'mapPrintArticle';
+    this.MAP_PRINT_ARTICLE = 'mapArticle';
   }
 
   managerButton() {
@@ -94,6 +94,9 @@ export default class Menu {
       this.refreshLineSelect();
       // this._privateTableUtils.refreshLineTable();
     }
+    else if (articleName === this.MAP_PRINT_ARTICLE) {
+      this.refreshMapPrint(articleName);
+    }
   }
 
   refreshLineSelect() {
@@ -108,4 +111,26 @@ export default class Menu {
     this._privateSelectUtils.addStationsToSelect(endSelect, this._privateCommonUtils, this._privateDomUtils);
     
   }
+
+  refreshMapPrint(articleName) {
+    this.emptyArticle(articleName);
+    this.displayMapPrint(articleName);
+  }
+
+  emptyArticle(articleName) {
+    const mapArticle = document.getElementById(articleName);
+
+    mapArticle.innerHTML = '';
+  }
+
+  displayMapPrint(articleName) {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+
+    for (const line in lineList) {
+      this._privateCommonUtils.createTitle('h3', line, articleName);
+      this._privateCommonUtils.createUnorderedList(lineList[line], articleName);
+    }
+  }
+
+
 }
\ No newline at end of file

From cf0bb1b7a53851a6b613405d51e47765d0f9c8e9 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Mon, 14 Dec 2020 23:49:56 +0900
Subject: [PATCH 24/44] refactor: relocate inserting empty line function

---
 src/manage_line.js    | 4 ++--
 src/manage_station.js | 1 +
 src/select_utils.js   | 2 ++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/manage_line.js b/src/manage_line.js
index f613988d9..8e90bc9af 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -42,10 +42,9 @@ export default class ManageLine {
 
   initPage() {
     this.initLists();
+    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
     this.createInputSection();
     this._privateSelectUtils.createSelectSection(this.ARTICLE_NAME);
-    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
-    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
     this.createLineAddButton();
     this.createTableSection();
   }
@@ -58,6 +57,7 @@ export default class ManageLine {
   createInputSection() {
     this._privateCommonUtils.createTitle('div', this.LINE_INPUT_TITLE_TEXT, this.ARTICLE_NAME);
     this.createLineInput();
+    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
   }
 
   createLineInput() {
diff --git a/src/manage_station.js b/src/manage_station.js
index 0aa334dad..642c39a4a 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -44,6 +44,7 @@ export default class ManageStation {
   }
 
   initPage() {
+    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
     this._privateCommonUtils.createTitle(this.STATION_INPUT_TITLE_TAG, this.STATION_INPUT_TITLE_TEXT, this.ARTICLE_NAME);
     this.createStationInput();
     this._stationAddButton = this._privateDomUtils.createButton(this.ADD_BUTTON_ID, this.ADD_BUTTON_TEXT);
diff --git a/src/select_utils.js b/src/select_utils.js
index 4391129bf..9a064f26c 100644
--- a/src/select_utils.js
+++ b/src/select_utils.js
@@ -26,6 +26,7 @@ export default class SelectUtils {
     this._privateCommonUtils.insertEmptyline(articleName);
     this.createSelectStation('start', articleName);
     this.createSelectStation('end', articleName);
+    this._privateCommonUtils.insertEmptyline(articleName);
   }
 
   createSelectStation(position, articleName) {
@@ -41,6 +42,7 @@ export default class SelectUtils {
     this._privateDomUtils.setAttribute('id', select, idName);
     this._privateDomUtils.appendToIdName(toIdName, select);
     this.addStationsToSelect(select, this._privateCommonUtils, this._privateDomUtils);
+    this._privateCommonUtils.insertEmptyline(toIdName);
 
     return select;
   }

From 740bd592a2d567d7db9ff6d6f7e9b2becab7e8e4 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 00:09:50 +0900
Subject: [PATCH 25/44] refactor: move map print functions to a separate module

create div with class name 'map' and append map print to it
---
 src/manage_map_print.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/manage_map_print.js

diff --git a/src/manage_map_print.js b/src/manage_map_print.js
new file mode 100644
index 000000000..d69d53b90
--- /dev/null
+++ b/src/manage_map_print.js
@@ -0,0 +1,30 @@
+import DomUtils from './dom_utils.js';
+
+export default class ManageMapPrint {
+  emptyArticle(articleName) {
+    const mapArticle = document.getElementById(articleName);
+
+    mapArticle.innerHTML = '';
+  }
+  
+  displayMapPrint(articleName, commonUtils) {
+    const mapClass = this.createMapDiv(articleName);
+    const lineList = commonUtils.getLocalStorageLine(); 
+
+    for (const line in lineList) {
+      commonUtils.createTitle('h3', line, mapClass);
+      commonUtils.createUnorderedList(lineList[line], mapClass);
+    }
+  }
+
+  createMapDiv(articleName) {
+    const domUtils = new DomUtils();
+    const mapDiv = document.createElement('div');
+    
+    domUtils.setAttribute('class', mapDiv, 'map');
+    domUtils.setAttribute('id', mapDiv, 'map');
+    domUtils.appendToIdName(articleName, mapDiv);
+
+    return 'map';
+  }
+}
\ No newline at end of file

From 388abe0d1763cc647fd8b9c9967b4b655ef22c44 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 02:52:19 +0900
Subject: [PATCH 26/44] feat: init section manage page

---
 src/common_utils.js   |   7 +++
 src/dom_utils.js      |   3 +-
 src/index.js          |   2 +
 src/manage_line.js    |   4 +-
 src/manage_section.js | 133 ++++++++++++++++++++++++++++++++++++++++++
 src/manage_station.js |   3 +-
 src/menu.js           |  19 ++----
 src/select_utils.js   |  12 ++--
 8 files changed, 159 insertions(+), 24 deletions(-)
 create mode 100644 src/manage_section.js

diff --git a/src/common_utils.js b/src/common_utils.js
index 03b7d004a..7fa685aba 100644
--- a/src/common_utils.js
+++ b/src/common_utils.js
@@ -9,6 +9,13 @@ export default class CommonUtils {
     alert(errorMessage);
   }
 
+  createDiv(toIdName, idName) {
+    const div = document.createElement('div');
+
+    this._privateDomUtils.setAttribute('id', div, idName);
+    this._privateDomUtils.appendToIdName(toIdName, div);
+  }
+
   createTitle(titleTag, titleContent, toIdName) {
     const title = document.createElement(titleTag);
 
diff --git a/src/dom_utils.js b/src/dom_utils.js
index 561f4abc7..075c2332d 100644
--- a/src/dom_utils.js
+++ b/src/dom_utils.js
@@ -51,10 +51,11 @@ export default class DomUtils {
   createInput(inputObject) {
     const input = document.createElement('input');
 
-    this.setAttribute(this.ID_ATTRIBUTE, input, inputObject['idName']);
+    this.setAttribute(inputObject['attribute'], input, inputObject['idName']);
     this.setInputType(input, inputObject['type']);
     this.setPlaceholder(input, inputObject['placeholder']);
     this.appendToIdName(inputObject['toIdName'], input)
+    input.style.margin = '0 2px 0 2px';
 
     return input;
   }
diff --git a/src/index.js b/src/index.js
index dea78cb9c..88a20a455 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import ManageStation from './manage_station.js';
 import Menu from './menu.js';
 import ManageLine from './manage_line.js';
+import ManageSection from './manage_section.js';
 
 export default class SubwayMap {
   constructor() {
@@ -9,6 +10,7 @@ export default class SubwayMap {
 
     new ManageStation();
     new ManageLine();
+    new ManageSection();
   }
 }
 
diff --git a/src/manage_line.js b/src/manage_line.js
index 8e90bc9af..c1de53b6d 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -25,7 +25,7 @@ export default class ManageLine {
     this.ADD_BUTTON_ID = 'line-add-button';
     this.ADD_BUTTON_TEXT = '노선 추가';
 
-    this.LINE_LIST_TITLE_TAG = 'h1';
+    this.LINE_LIST_TITLE_TAG = 'h2';
     this.LINE_LIST_TITLE_TEXT = '🚉 지하철 역 목록';
     
     this.IS_VALID = 1;
@@ -45,6 +45,7 @@ export default class ManageLine {
     this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
     this.createInputSection();
     this._privateSelectUtils.createSelectSection(this.ARTICLE_NAME);
+    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
     this.createLineAddButton();
     this.createTableSection();
   }
@@ -68,6 +69,7 @@ export default class ManageLine {
 
   lineInputObject() {
     const inputObject = {
+      'attribute': 'id',
       'toIdName': this.ARTICLE_NAME,
       'idName': this.LINE_INPUT_ID,
       'placeholder': this.LINE_INPUT_PLACEHOLDER,
diff --git a/src/manage_section.js b/src/manage_section.js
new file mode 100644
index 000000000..40bef8f02
--- /dev/null
+++ b/src/manage_section.js
@@ -0,0 +1,133 @@
+import TableUtils from './table_utils.js';
+import DomUtils from './dom_utils.js';
+import CommonUtils from './common_utils.js';
+import SelectUtils from './select_utils.js';
+
+export default class ManageSection {
+  constructor() {
+    this.setPrivateVariables();
+    this.setConst();
+    this.getLocalStorage();
+    this.initPage();
+  }
+
+  setPrivateVariables() {
+    this._privateTableUtils = new TableUtils();
+    this._privateDomUtils = new DomUtils();
+    this._privateCommonUtils = new CommonUtils();
+    this._privateSelectUtils = new SelectUtils();
+  }
+
+  setConst() {
+    this.ARTICLE_NAME = 'sectionArticle';
+    this.SELECT_LINE_SECTION = 'selectLineSection';
+    this.MANAGE_LINE_SECTION = 'manageLineSection';
+
+    this.SELECT_LINE_TITLE_TAG = 'h3';
+    this.SELECT_LINE_TITLE = '구간을 수정할 노선을 선택해주세요';
+    this.MANAGE_LINE_TITLE_TAG = 'h3';
+    this.MANAGE_LINE_TITLE = ' 관리';
+    this.ADD_SECTION_TITLE_TAG = 'h4';
+    this.ADD_SECTION_TITLE = '구간 등록';
+    this.SECTION_ORDER_INPUT_PLACEHOLDER = '순서';
+    this.SECTION_DELETE_TEXT = '노선에서 제거';
+
+    this.SELECT_LINE_BUTTON_CLASS = 'section-line-menu-button';
+    this.DELETE_BUTTON_CLASS = 'section-delete-button';
+
+    this.SECTION_STATION_SELECTOR = 'section-station-selector';
+    this.SECTION_ORDER_INPUT = 'section-order-input';
+    this.ADD_BUTTON = 'section-add-button';
+    this.ADD_BUTTON_TEXT = '등록';
+  }
+
+  getLocalStorage() {
+    this._lineList = this._privateCommonUtils.getLocalStorageLine();
+    this._stationList = this._privateCommonUtils.getLocalStorageStation();
+  }
+
+  initPage() {
+    this.createSelectLineSection();
+    this.createManageLineSection();
+  }
+
+  createSelectLineSection() {
+    this._privateCommonUtils.createDiv(this.ARTICLE_NAME, this.SELECT_LINE_SECTION);
+    this._privateCommonUtils.createTitle(this.SELECT_LINE_TITLE_TAG, this.SELECT_LINE_TITLE, this.SELECT_LINE_SECTION);
+    this.createLineButtons();
+  }
+  
+  createLineButtons() {
+    for (const line in this._lineList) {
+      const button = this._privateDomUtils.createButton(`${line}Button`, line);
+      this._privateDomUtils.appendToIdName(this.SELECT_LINE_SECTION, button);
+      button.style.margin = "2px";
+      this.addEventToSelectButton(button, line);
+    }
+  }
+
+  addEventToSelectButton(button, line) {
+    button.addEventListener('click', () => {
+      
+    })
+  }
+
+
+
+  createManageLineSection() {
+    this._privateCommonUtils.createDiv(this.ARTICLE_NAME, this.MANAGE_LINE_SECTION);
+    this._privateCommonUtils.createTitle(this.MANAGE_LINE_TITLE_TAG, this.MANAGE_LINE_TITLE, this.MANAGE_LINE_SECTION);
+    this.createSectionAddArea();
+
+    this._manageLineSection = document.getElementById(this.MANAGE_LINE_SECTION);
+    this._manageLineSection.style.display = 'none';
+  }
+
+  createSectionAddArea() {
+    this._privateCommonUtils.createTitle(this.ADD_SECTION_TITLE_TAG, this.ADD_SECTION_TITLE, this.MANAGE_LINE_SECTION);
+    this._privateSelectUtils.createSelect(this.MANAGE_LINE_SECTION, this.SECTION_STATION_SELECTOR, this._privateCommonUtils, this._privateDomUtils);
+    this._orderInput = this.createSectionOrderInput();
+    this.createSectionAddButton();
+  }
+
+  createSectionOrderInput() {
+    const inputObject = this.createInputObject();
+    const input = this._privateDomUtils.createInput(inputObject);
+
+    return input;
+  }
+
+  createInputObject() {
+    const inputObject = {
+      'attribute': 'id',
+      'toIdName': this.MANAGE_LINE_SECTION,
+      'idName': this.SECTION_ORDER_INPUT,
+      'placeholder': this.SECTION_ORDER_INPUT_PLACEHOLDER,
+      'type': 'number',
+    }
+
+    return inputObject;
+  }
+
+  createSectionAddButton() {
+    const button = this._privateDomUtils.createButton(this.ADD_BUTTON, this.ADD_BUTTON_TEXT);
+
+    this._privateDomUtils.appendToIdName(this.MANAGE_LINE_SECTION, button);
+    this.addEventToAddButton(button);
+  }
+
+  addEventToAddButton(button) {
+    button.addEventListener('click', () => {
+      this.addSection();
+    })
+    this._orderInput.addEventListener('keypress', (e) => {
+      if (e.keyCode === 13) {
+        this.addSection();
+      }
+    })
+  }
+
+  addSection() {
+
+  }
+}
\ No newline at end of file
diff --git a/src/manage_station.js b/src/manage_station.js
index 642c39a4a..7919ba022 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -25,7 +25,7 @@ export default class ManageStation {
 
     this.STATION_INPUT_TITLE_TAG = 'div';
     this.STATION_INPUT_TITLE_TEXT = '역 이름';
-    this.STATION_LIST_TITLE_TAG = 'h1';
+    this.STATION_LIST_TITLE_TAG = 'h2';
     this.STATION_LIST_TITLE_TEXT = '🚉 지하철 역 목록';
 
     this.STATION_INPUT_ID = 'station-name-input';
@@ -62,6 +62,7 @@ export default class ManageStation {
 
   stationInputObject() {
     const inputObject = {
+      'attribute': 'id',
       'toIdName': this.ARTICLE_NAME,
       'idName': this.STATION_INPUT_ID,
       'placeholder': this.STATION_INPUT_PLACEHOLDER,
diff --git a/src/menu.js b/src/menu.js
index d09ffb21b..929d7f9b7 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -4,6 +4,7 @@ import TableUtils from './table_utils.js';
 import CommonUtils from './common_utils.js';
 import ManageLine from './manage_line.js';
 import SelectUtils from './select_utils.js';
+import ManageMapPrint from './manage_map_print.js';
 
 export default class Menu {
   constructor() {
@@ -113,24 +114,12 @@ export default class Menu {
   }
 
   refreshMapPrint(articleName) {
-    this.emptyArticle(articleName);
-    this.displayMapPrint(articleName);
-  }
-
-  emptyArticle(articleName) {
-    const mapArticle = document.getElementById(articleName);
+    const manageMapPrint = new ManageMapPrint();
 
-    mapArticle.innerHTML = '';
+    manageMapPrint.emptyArticle(articleName);
+    manageMapPrint.displayMapPrint(articleName, this._privateCommonUtils);
   }
 
-  displayMapPrint(articleName) {
-    const lineList = this._privateCommonUtils.getLocalStorageLine();
-
-    for (const line in lineList) {
-      this._privateCommonUtils.createTitle('h3', line, articleName);
-      this._privateCommonUtils.createUnorderedList(lineList[line], articleName);
-    }
-  }
 
 
 }
\ No newline at end of file
diff --git a/src/select_utils.js b/src/select_utils.js
index 9a064f26c..7b5b0c89a 100644
--- a/src/select_utils.js
+++ b/src/select_utils.js
@@ -25,6 +25,7 @@ export default class SelectUtils {
 
     this._privateCommonUtils.insertEmptyline(articleName);
     this.createSelectStation('start', articleName);
+    this._privateCommonUtils.insertEmptyline(articleName);
     this.createSelectStation('end', articleName);
     this._privateCommonUtils.insertEmptyline(articleName);
   }
@@ -33,16 +34,15 @@ export default class SelectUtils {
     const positionUpper = position.toUpperCase();
 
     this._privateCommonUtils.createTitle('span', this[`LINE_${positionUpper}_SELECT_TEXT`], articleName);
-    this[`_${position}Select`] = this.createSelect(articleName, this[`LINE_${positionUpper}_SELECT_ID`]);
+    this[`_${position}Select`] = this.createSelect(articleName, this[`LINE_${positionUpper}_SELECT_ID`], this._privateCommonUtils, this._privateDomUtils);
   }
 
-  createSelect(toIdName, idName) {
+  createSelect(toIdName, idName, commonUtils, domUtils) {
     const select = document.createElement('SELECT');
 
-    this._privateDomUtils.setAttribute('id', select, idName);
-    this._privateDomUtils.appendToIdName(toIdName, select);
-    this.addStationsToSelect(select, this._privateCommonUtils, this._privateDomUtils);
-    this._privateCommonUtils.insertEmptyline(toIdName);
+    domUtils.setAttribute('id', select, idName);
+    domUtils.appendToIdName(toIdName, select);
+    this.addStationsToSelect(select, commonUtils, domUtils);
 
     return select;
   }

From 50e08255f6764a72daa1aebb61092fd1e456757c Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 02:52:57 +0900
Subject: [PATCH 27/44] feat: show and change content when line select button
 is clicked

---
 src/manage_section.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/manage_section.js b/src/manage_section.js
index 40bef8f02..c8940ff8a 100644
--- a/src/manage_section.js
+++ b/src/manage_section.js
@@ -68,11 +68,20 @@ export default class ManageSection {
 
   addEventToSelectButton(button, line) {
     button.addEventListener('click', () => {
-      
+      this.showManageLineSection();
+      this.changeManageLineSection(line);
     })
   }
 
+  showManageLineSection() {
+    this._manageLineSection.style.display = 'block';
+  }
+
+  changeManageLineSection(line) {
+    const manageLineTitle = document.querySelector("#manageLineSection h3");
 
+    manageLineTitle.innerHTML = line + this.MANAGE_LINE_TITLE;
+  }
 
   createManageLineSection() {
     this._privateCommonUtils.createDiv(this.ARTICLE_NAME, this.MANAGE_LINE_SECTION);

From 5f88ca15bed36e67e55ac509456172a83e848c47 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 15:14:53 +0900
Subject: [PATCH 28/44] feat: add empty table feature when refresh needed

---
 src/manage_section.js | 18 ++++++++++++++++++
 src/table_utils.js    | 43 ++++++++++++++++++++++++++++++++++++-------
 2 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/manage_section.js b/src/manage_section.js
index c8940ff8a..df0384179 100644
--- a/src/manage_section.js
+++ b/src/manage_section.js
@@ -22,6 +22,7 @@ export default class ManageSection {
     this.ARTICLE_NAME = 'sectionArticle';
     this.SELECT_LINE_SECTION = 'selectLineSection';
     this.MANAGE_LINE_SECTION = 'manageLineSection';
+    this.LINE_TABLE_SECTION = 'lineTableSection';
 
     this.SELECT_LINE_TITLE_TAG = 'h3';
     this.SELECT_LINE_TITLE = '구간을 수정할 노선을 선택해주세요';
@@ -49,6 +50,7 @@ export default class ManageSection {
   initPage() {
     this.createSelectLineSection();
     this.createManageLineSection();
+    this.createManageLineSectionTable();
   }
 
   createSelectLineSection() {
@@ -78,11 +80,20 @@ export default class ManageSection {
   }
 
   changeManageLineSection(line) {
+    this.changeManageLineSectionTitle(line);
+    this.changeManageLineSectionTable(line);
+  }
+
+  changeManageLineSectionTitle(line) {
     const manageLineTitle = document.querySelector("#manageLineSection h3");
 
     manageLineTitle.innerHTML = line + this.MANAGE_LINE_TITLE;
   }
 
+  changeManageLineSectionTable(line) {
+    this._privateTableUtils.refreshTableData(this.LINE_TABLE_SECTION, line);
+  }
+
   createManageLineSection() {
     this._privateCommonUtils.createDiv(this.ARTICLE_NAME, this.MANAGE_LINE_SECTION);
     this._privateCommonUtils.createTitle(this.MANAGE_LINE_TITLE_TAG, this.MANAGE_LINE_TITLE, this.MANAGE_LINE_SECTION);
@@ -139,4 +150,11 @@ export default class ManageSection {
   addSection() {
 
   }
+
+  createManageLineSectionTable() {
+    this._privateCommonUtils.createDiv(this.MANAGE_LINE_SECTION, this.LINE_TABLE_SECTION);
+    this._privateCommonUtils.insertEmptyline(this.LINE_TABLE_SECTION);
+    this._privateCommonUtils.insertEmptyline(this.LINE_TABLE_SECTION);
+    this._privateTableUtils.initTable(this.LINE_TABLE_SECTION);
+  }
 }
\ No newline at end of file
diff --git a/src/table_utils.js b/src/table_utils.js
index 9ce30c59b..64730abab 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -17,7 +17,7 @@ export default class TableUtils {
     this._tableType = {
       stationArticle: ['역 이름', '설정'],
       lineArticle: ['노선 이름', '상행 종점역', '하행 종점역', '설정'],
-      sectionArticle: ['순서', '이름', '설정'],
+      lineTableSection: ['순서', '이름', '설정'],
     }
   }
 
@@ -33,7 +33,7 @@ export default class TableUtils {
 
     this.STATION_TABLE_NAME = 'stationArticleTable';
     this.LINE_TABLE_NAME = 'lineArticleTable';
-    this.SECTION_TABLE_NAME = 'sectionArticleTable';
+    this.SECTION_TABLE_NAME = 'lineTableSectionTable';
   }
 
   initTable(toIdName) {
@@ -46,12 +46,12 @@ export default class TableUtils {
     this.initTableData(toIdName);
   }
 
-  initTableData(articleName) {
-    if (articleName === 'stationArticle') {
-      this.initStationTableData(articleName);
+  initTableData(toIdName) {
+    if (toIdName === 'stationArticle') {
+      this.initStationTableData(toIdName);
     }
-    else if (articleName === 'lineArticle') {
-      this.initArticleTableData(articleName);
+    else if (toIdName === 'lineArticle') {
+      this.initArticleTableData(toIdName);
     }
   }
 
@@ -74,6 +74,35 @@ export default class TableUtils {
     }
   }
 
+  refreshTableData(toIdName, line) {
+    this.emptyTableData(toIdName);
+    if (toIdName === 'lineArticle') {
+      this.initStationTableData(toIdName);
+    }
+    else if (toIdName === 'lineTableSection') {
+      this.initSectionTable(line);
+    }
+  }
+
+  emptyTableData(toIdName) {
+    const tbody = document.querySelector(`#${toIdName}Table tbody`);
+    const rowCount = tbody.childElementCount;
+
+    if (rowCount > 1) {
+      this.deleteRows(tbody.parentNode, rowCount);
+    }
+  }
+
+  deleteRows(table, rowCount) {
+    for (let i = 1; i < rowCount; i++) {
+      table.deleteRow(i);
+    }
+  }
+
+  initSectionTable(line) {
+    
+  }
+
   // refreshStationTable(articleName) {
   //   const stationList = this._privateCommonUtils.getLocalStorageStation();
 

From 4e3a68e9c358060bce8935bf57bfe3bf3f507131 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 15:21:11 +0900
Subject: [PATCH 29/44] feat: renew line manage table data whenever line manage
 button is clicked

---
 src/menu.js        |  2 +-
 src/table_utils.js | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/menu.js b/src/menu.js
index 929d7f9b7..c970ab90f 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -93,7 +93,7 @@ export default class Menu {
   refreshArticle(articleName) {
     if (articleName === this.LINE_ARTICLE) {
       this.refreshLineSelect();
-      // this._privateTableUtils.refreshLineTable();
+      this._privateTableUtils.refreshTableData(articleName);
     }
     else if (articleName === this.MAP_PRINT_ARTICLE) {
       this.refreshMapPrint(articleName);
diff --git a/src/table_utils.js b/src/table_utils.js
index 64730abab..96b9ae6f7 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -51,7 +51,7 @@ export default class TableUtils {
       this.initStationTableData(toIdName);
     }
     else if (toIdName === 'lineArticle') {
-      this.initArticleTableData(toIdName);
+      this.initLineTableData(toIdName);
     }
   }
 
@@ -64,7 +64,7 @@ export default class TableUtils {
     }
   }
 
-  initArticleTableData(articleName) {
+  initLineTableData(articleName) {
     const lineList = this._privateCommonUtils.getLocalStorageLine();
 
     for (const line in lineList) {
@@ -77,7 +77,7 @@ export default class TableUtils {
   refreshTableData(toIdName, line) {
     this.emptyTableData(toIdName);
     if (toIdName === 'lineArticle') {
-      this.initStationTableData(toIdName);
+      this.initLineTableData(toIdName);
     }
     else if (toIdName === 'lineTableSection') {
       this.initSectionTable(line);
@@ -94,13 +94,13 @@ export default class TableUtils {
   }
 
   deleteRows(table, rowCount) {
-    for (let i = 1; i < rowCount; i++) {
+    for (let i = rowCount - 1; i > 1; i--) {
       table.deleteRow(i);
     }
   }
 
   initSectionTable(line) {
-    
+
   }
 
   // refreshStationTable(articleName) {

From 43382ae6998c8259fc87f94472c8519547cb5e14 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 15:53:33 +0900
Subject: [PATCH 30/44] feat: renew section manage table data whenever line is
 clicked

---
 src/manage_section.js |  2 +-
 src/table_utils.js    | 38 +++++++++++++++++++++-----------------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/manage_section.js b/src/manage_section.js
index df0384179..3d5707b7f 100644
--- a/src/manage_section.js
+++ b/src/manage_section.js
@@ -22,7 +22,7 @@ export default class ManageSection {
     this.ARTICLE_NAME = 'sectionArticle';
     this.SELECT_LINE_SECTION = 'selectLineSection';
     this.MANAGE_LINE_SECTION = 'manageLineSection';
-    this.LINE_TABLE_SECTION = 'lineTableSection';
+    this.LINE_TABLE_SECTION = 'sectionManageArea';
 
     this.SELECT_LINE_TITLE_TAG = 'h3';
     this.SELECT_LINE_TITLE = '구간을 수정할 노선을 선택해주세요';
diff --git a/src/table_utils.js b/src/table_utils.js
index 96b9ae6f7..7d16e6d6e 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -17,7 +17,7 @@ export default class TableUtils {
     this._tableType = {
       stationArticle: ['역 이름', '설정'],
       lineArticle: ['노선 이름', '상행 종점역', '하행 종점역', '설정'],
-      lineTableSection: ['순서', '이름', '설정'],
+      sectionManageArea: ['순서', '이름', '설정'],
     }
   }
 
@@ -25,6 +25,7 @@ export default class TableUtils {
     this.STATION_DELETE_BUTTON_TEXT = '삭제';
     this.LINE_DELETE_BUTTON_TEXT = '삭제';
     this.SECTION_DELETE_BUTTON_TEXT = '노선에서 제거';
+
     this.ID_ATTRIBUTE = 'id';
     this.IS_VALID = 1;
     this.IS_NOT_VALID = 0;
@@ -33,7 +34,7 @@ export default class TableUtils {
 
     this.STATION_TABLE_NAME = 'stationArticleTable';
     this.LINE_TABLE_NAME = 'lineArticleTable';
-    this.SECTION_TABLE_NAME = 'lineTableSectionTable';
+    this.SECTION_TABLE_NAME = 'sectionManageAreaTable';
   }
 
   initTable(toIdName) {
@@ -79,8 +80,8 @@ export default class TableUtils {
     if (toIdName === 'lineArticle') {
       this.initLineTableData(toIdName);
     }
-    else if (toIdName === 'lineTableSection') {
-      this.initSectionTable(line);
+    else if (toIdName === 'sectionManageArea') {
+      this.initSectionTable(toIdName, line);
     }
   }
 
@@ -94,26 +95,28 @@ export default class TableUtils {
   }
 
   deleteRows(table, rowCount) {
-    for (let i = rowCount - 1; i > 1; i--) {
+    for (let i = rowCount - 1; i > 0; i--) {
       table.deleteRow(i);
     }
   }
 
-  initSectionTable(line) {
-
-  }
-
-  // refreshStationTable(articleName) {
-  //   const stationList = this._privateCommonUtils.getLocalStorageStation();
+  initSectionTable(toIdName, line) {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
 
-  //   for (const station in stationList) {
-  //     const rowArray = this.createRowArray(station, this.DELETE_BUTTON_TEXT);
-  //     this.addRow(rowArray, articleName);
-  //   }
-  // }
+    for (const index in lineList[line]) {
+      const rowArray = [index, lineList[line][index], this.SECTION_DELETE_BUTTON_TEXT];
+      this.addRow(rowArray, toIdName);
 
-  refreshLineSelect() {
+      // const station = lineList[line][index];
+      // const lineIndex = stationList[station].indexOf(line);
+      // console.log(station,stationList[station], line);
+      // console.log(lineIndex, index);
+      // stationList[station].splice(lineIndex, 1);
+    }
 
+    // this._privateCommonUtils.saveToLocalStorage('lineList', lineList);
+    // this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
   }
 
   addTableStyle(table) {
@@ -163,6 +166,7 @@ export default class TableUtils {
 
       this.addCellBorder(cell);
 
+      console.log(tableType, typeUpper);
       if (rowArray[i] === this[`${typeUpper}_DELETE_BUTTON_TEXT`]) {
         this.addDeleteButton(cell, rowArray, typeUpper);
       }

From 72b88561442e3aa320fda02f323827d8c8501178 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 16:23:14 +0900
Subject: [PATCH 31/44] feat: add delete and check delete validity features to
 section table delete button

---
 src/table_utils.js | 78 +++++++++++++++++++++++++++++++++++-----------
 1 file changed, 59 insertions(+), 19 deletions(-)

diff --git a/src/table_utils.js b/src/table_utils.js
index 7d16e6d6e..b24a6fee9 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -30,7 +30,8 @@ export default class TableUtils {
     this.IS_VALID = 1;
     this.IS_NOT_VALID = 0;
 
-    this.STATION_DELETE_ERROR_MESSAGE = '노선에 등록되어 있는 역은 삭제할 수 없습니다.'
+    this.STATION_DELETE_ERROR_MESSAGE = '노선에 등록되어 있는 역은 삭제할 수 없습니다.';
+    this.SECTION_DELETE_ERROR_MESSAGE = '더 이상 이 노선에서 역을 제거할 수 없습니다. 노선에 등록된 역이 두개 이하일 때는 역을 제거할 수 없습니다.'
 
     this.STATION_TABLE_NAME = 'stationArticleTable';
     this.LINE_TABLE_NAME = 'lineArticleTable';
@@ -105,7 +106,7 @@ export default class TableUtils {
     const stationList = this._privateCommonUtils.getLocalStorageStation();
 
     for (const index in lineList[line]) {
-      const rowArray = [index, lineList[line][index], this.SECTION_DELETE_BUTTON_TEXT];
+      const rowArray = [index, lineList[line][index], this.SECTION_DELETE_BUTTON_TEXT, line];
       this.addRow(rowArray, toIdName);
 
       // const station = lineList[line][index];
@@ -162,20 +163,25 @@ export default class TableUtils {
   addCellsAndButton(tableType, row, rowArray) {
     this._tableType[tableType].forEach((v, i) => {
       const typeUpper = this.getType(tableType).toUpperCase();
-      const cell = row.insertCell(i);
 
-      this.addCellBorder(cell);
+      if (i !== 3) {
+        const cell = row.insertCell(i);
 
-      console.log(tableType, typeUpper);
-      if (rowArray[i] === this[`${typeUpper}_DELETE_BUTTON_TEXT`]) {
-        this.addDeleteButton(cell, rowArray, typeUpper);
-      }
-      else {
-        this.addCellText(cell, rowArray[i]);
+        this.addCellBorder(cell);
+        this.checkButtonOrText(rowArray, i, typeUpper, cell);
       }
     })
   }
 
+  checkButtonOrText(rowArray, i, typeUpper, cell) {
+    if (rowArray[i] === this[`${typeUpper}_DELETE_BUTTON_TEXT`]) {
+      this.addDeleteButton(cell, rowArray, typeUpper);
+    }
+    else {
+      this.addCellText(cell, rowArray[i]);
+    }
+  }
+
   addDeleteButton(cell, rowArray, typeUpper) {
     const deleteButton = document.createElement('button');
     const type = typeUpper.toLowerCase();
@@ -207,22 +213,32 @@ export default class TableUtils {
     else if (type === 'line') {
       this.addEventToLineDeleteButton(deleteButton);
     }
+    else if (type === 'section') {
+      this.addEventToSectionDeleteButton(deleteButton);
+    }
   }
 
   addEventToStationDeleteButton(button) {
     button.addEventListener('click', () => {
-      if (this.ifOkay() * this.checkDeleteValidity(button) === this.IS_VALID) {
-        this.deleteRowAndData(button);
-      }
-      else {
-        this._privateCommonUtils.alertError(this.STATION_DELETE_ERROR_MESSAGE);
+      if (this.ifOkay() === this.IS_VALID) {
+        this.checkStationDeleteValidity(button);
       }
     });
   }
 
   addEventToLineDeleteButton(button) {
     button.addEventListener('click', () => {
-      this.deleteRowAndData(button);
+      if (this.ifOkay() === this.IS_VALID) {
+        this.deleteRowAndData(button);
+      }
+    })
+  }
+
+  addEventToSectionDeleteButton(button) {
+    button.addEventListener('click', () => {
+      if (this.ifOkay() === this.IS_VALID) {
+        this.checkSectionDeleteValidity(button);
+      }
     })
   }
 
@@ -235,9 +251,21 @@ export default class TableUtils {
     }
   }
 
-  checkDeleteValidity(button) {
-    if (this.checkTableId(button) === this.STATION_TABLE_NAME) {
-      return this.checkIfRegisteredToLine(button);
+  checkStationDeleteValidity(button) {
+    if (this.checkIfRegisteredToLine(button) === this.IS_VALID) {
+      this.deleteRowAndData(button);
+    }
+    else {
+      this._privateCommonUtils.alertError(this.STATION_DELETE_ERROR_MESSAGE);
+    }
+  }
+
+  checkSectionDeleteValidity(button) {
+    if (this.checkIfContainsOverTwoStations(button) === this.IS_VALID) {
+      this.deleteRowAndData(button);
+    }
+    else {
+      this._privateCommonUtils.alertError(this.SECTION_DELETE_ERROR_MESSAGE);
     }
   }
 
@@ -253,6 +281,18 @@ export default class TableUtils {
     return this.IS_VALID;
   }
 
+  checkIfContainsOverTwoStations(button) {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+    const dataset = this.getDataAttribute(button);
+    const line = dataset.split(',')[3];
+
+    if (lineList[line].length <= 2) {
+      return this.IS_NOT_VALID;
+    }
+    
+    return this.IS_VALID;
+  }
+
   deleteRowAndData(button) {
     const dataset = this.getDataAttribute(button);
     const datasetArray = dataset.split(',');

From 0da38812e73d6b95199f5e589e31362e654d5c92 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 17:13:25 +0900
Subject: [PATCH 32/44] feat: check order input validity at section managing
 page

---
 src/manage_line.js    |  28 ++++++++---
 src/manage_section.js | 108 +++++++++++++++++++++++++++++++++++++++---
 2 files changed, 123 insertions(+), 13 deletions(-)

diff --git a/src/manage_line.js b/src/manage_line.js
index c1de53b6d..dace1b7aa 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -42,7 +42,6 @@ export default class ManageLine {
 
   initPage() {
     this.initLists();
-    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
     this.createInputSection();
     this._privateSelectUtils.createSelectSection(this.ARTICLE_NAME);
     this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
@@ -50,11 +49,20 @@ export default class ManageLine {
     this.createTableSection();
   }
 
+  /*
+   * this.initLists()
+   */
+
   initLists() {
     this._lineList = this._privateCommonUtils.getLocalStorageLine();
     this._stationList = this._privateCommonUtils.getLocalStorageStation();
+    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
   }
 
+  /*
+   * this.createInputSection()
+   */
+
   createInputSection() {
     this._privateCommonUtils.createTitle('div', this.LINE_INPUT_TITLE_TEXT, this.ARTICLE_NAME);
     this.createLineInput();
@@ -79,6 +87,10 @@ export default class ManageLine {
     return inputObject;
   }
 
+  /*
+   * this.createLineAddButton()
+   */
+
   createLineAddButton() {
     this._lineAddButton = this._privateDomUtils.createButton(this.ADD_BUTTON_ID, this.ADD_BUTTON_TEXT);
     this._privateDomUtils.appendToIdName(this.ARTICLE_NAME, this._lineAddButton);
@@ -165,14 +177,18 @@ export default class ManageLine {
     this._privateCommonUtils.saveToLocalStorage('stationList', this._stationList);
   }
 
-  createTableSection() {
-    this._privateCommonUtils.createTitle(this.LINE_LIST_TITLE_TAG, this.LINE_LIST_TITLE_TEXT, this.ARTICLE_NAME);
-    this._privateTableUtils.initTable(this.ARTICLE_NAME);
-  }
-
   addLine() {
     const rowArray = [this._lineInput.value, this._startSelect.value, this._endSelect.value, this.DELETE_BUTTON_TEXT];
 
     this._privateTableUtils.addRow(rowArray, this.ARTICLE_NAME);
   }
+  
+  /*
+   * this.createTableSection()
+   */
+
+  createTableSection() {
+    this._privateCommonUtils.createTitle(this.LINE_LIST_TITLE_TAG, this.LINE_LIST_TITLE_TEXT, this.ARTICLE_NAME);
+    this._privateTableUtils.initTable(this.ARTICLE_NAME);
+  }
 }
\ No newline at end of file
diff --git a/src/manage_section.js b/src/manage_section.js
index 3d5707b7f..9391e5ced 100644
--- a/src/manage_section.js
+++ b/src/manage_section.js
@@ -19,6 +19,9 @@ export default class ManageSection {
   }
 
   setConst() {
+    this.IS_VALID = 1;
+    this.IS_NOT_VALID = 0;
+
     this.ARTICLE_NAME = 'sectionArticle';
     this.SELECT_LINE_SECTION = 'selectLineSection';
     this.MANAGE_LINE_SECTION = 'manageLineSection';
@@ -40,6 +43,10 @@ export default class ManageSection {
     this.SECTION_ORDER_INPUT = 'section-order-input';
     this.ADD_BUTTON = 'section-add-button';
     this.ADD_BUTTON_TEXT = '등록';
+
+    this.IS_EMPTY_ERROR_MESSAGE = '순서 입력값이 비었습니다.';
+    this.IS_NEGATIVE_ERROR_MESSAGE = '수가 아닌 정수 순서를 입력해주세요.';
+    this.IS_NOT_CONSECUTIVE_ERROR_MESSAGE = '기존 순서들과 연속되는 순서를 입력해주세요.';
   }
 
   getLocalStorage() {
@@ -53,6 +60,10 @@ export default class ManageSection {
     this.createManageLineSectionTable();
   }
 
+  /*
+   * createSelectLineSection()
+   */
+
   createSelectLineSection() {
     this._privateCommonUtils.createDiv(this.ARTICLE_NAME, this.SELECT_LINE_SECTION);
     this._privateCommonUtils.createTitle(this.SELECT_LINE_TITLE_TAG, this.SELECT_LINE_TITLE, this.SELECT_LINE_SECTION);
@@ -94,6 +105,10 @@ export default class ManageSection {
     this._privateTableUtils.refreshTableData(this.LINE_TABLE_SECTION, line);
   }
 
+  /*
+   * createManageLineSection()
+   */
+
   createManageLineSection() {
     this._privateCommonUtils.createDiv(this.ARTICLE_NAME, this.MANAGE_LINE_SECTION);
     this._privateCommonUtils.createTitle(this.MANAGE_LINE_TITLE_TAG, this.MANAGE_LINE_TITLE, this.MANAGE_LINE_SECTION);
@@ -106,15 +121,13 @@ export default class ManageSection {
   createSectionAddArea() {
     this._privateCommonUtils.createTitle(this.ADD_SECTION_TITLE_TAG, this.ADD_SECTION_TITLE, this.MANAGE_LINE_SECTION);
     this._privateSelectUtils.createSelect(this.MANAGE_LINE_SECTION, this.SECTION_STATION_SELECTOR, this._privateCommonUtils, this._privateDomUtils);
-    this._orderInput = this.createSectionOrderInput();
+    this.createSectionOrderInput();
     this.createSectionAddButton();
   }
 
   createSectionOrderInput() {
     const inputObject = this.createInputObject();
-    const input = this._privateDomUtils.createInput(inputObject);
-
-    return input;
+    this._orderInput = this._privateDomUtils.createInput(inputObject);
   }
 
   createInputObject() {
@@ -138,20 +151,101 @@ export default class ManageSection {
 
   addEventToAddButton(button) {
     button.addEventListener('click', () => {
-      this.addSection();
+      this.createNewSection();
     })
     this._orderInput.addEventListener('keypress', (e) => {
       if (e.keyCode === 13) {
-        this.addSection();
+        this.createNewSection();
       }
     })
   }
 
+  createNewSection() {
+    if (this.checkSectionValidity() === this.IS_VALID) {
+      // this.updateAddToLocalStorage();
+      // this.addSection();
+    }
+    else {
+      this.alertCorrespondingError();
+    }
+  }
+
+  checkSectionValidity() {
+    if (this.isEmpty() === this.IS_NOT_VALID) {
+      return this.IS_NOT_VALID;
+    }
+
+    if (this.isNegative() === this.IS_NOT_VALID) {
+      return this.IS_NOT_VALID;
+    }
+
+    if (this.isNotConsecutive() === this.IS_NOT_VALID) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  isEmpty() {
+    if (!this._orderInput.value) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  isNegative() {
+    if (this._orderInput.value < 0) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  isNotConsecutive() {
+    const tbody = document.querySelector(`#${this.LINE_TABLE_SECTION}Table tbody`);
+    const rowCount = tbody.childElementCount;
+
+    if (this._orderInput.value >= rowCount) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  alertCorrespondingError() {
+    if (this.isEmpty() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(this.IS_EMPTY_ERROR_MESSAGE);
+    }
+    else if (this.isNegative() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(this.IS_NEGATIVE_ERROR_MESSAGE);
+    }
+    else if (this.isNotConsecutive() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(this.IS_NOT_CONSECUTIVE_ERROR_MESSAGE);
+    }
+  }
+
+  updateAddToLocalStorage() {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+
+    lineList[this._lineInput.value] = [this._startSelect.value, this._endSelect.value];
+    stationList[this._startSelect.value].push(this._lineInput.value);
+    stationList[this._endSelect.value].push(this._lineInput.value);
+
+    this._privateCommonUtils.saveToLocalStorage('lineList', lineList);
+    this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
+  }
+
   addSection() {
 
   }
 
-  createManageLineSectionTable() {
+  /*
+   * createManageLineSectionTable
+   */
+
+    createManageLineSectionTable() {
     this._privateCommonUtils.createDiv(this.MANAGE_LINE_SECTION, this.LINE_TABLE_SECTION);
     this._privateCommonUtils.insertEmptyline(this.LINE_TABLE_SECTION);
     this._privateCommonUtils.insertEmptyline(this.LINE_TABLE_SECTION);

From f48b3d66b877668a6344448b65c5157b65971604 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 19:29:53 +0900
Subject: [PATCH 33/44] feat: update localStorage when section input added

---
 src/manage_line.js    | 19 +++++++++++++------
 src/manage_section.js | 21 +++++++++++++++++----
 src/table_utils.js    |  2 +-
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/manage_line.js b/src/manage_line.js
index dace1b7aa..298e2b15e 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -112,6 +112,7 @@ export default class ManageLine {
     if (this.checkLineValidity(this._lineInput.value) === this.IS_VALID) {
       this.updateAddToLocalStorage();
       this.addLine();
+      this.emptyInput();
     }
   }
 
@@ -169,12 +170,14 @@ export default class ManageLine {
   }
 
   updateAddToLocalStorage() {
-    this._lineList[this._lineInput.value] = [this._startSelect.value, this._endSelect.value];
-    this._stationList[this._startSelect.value].push(this._lineInput.value);
-    this._stationList[this._endSelect.value].push(this._lineInput.value);
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+    lineList[this._lineInput.value] = [this._startSelect.value, this._endSelect.value];
+    stationList[this._startSelect.value].push(this._lineInput.value);
+    stationList[this._endSelect.value].push(this._lineInput.value);
 
-    this._privateCommonUtils.saveToLocalStorage('lineList', this._lineList);
-    this._privateCommonUtils.saveToLocalStorage('stationList', this._stationList);
+    this._privateCommonUtils.saveToLocalStorage('lineList', lineList);
+    this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
   }
 
   addLine() {
@@ -182,7 +185,11 @@ export default class ManageLine {
 
     this._privateTableUtils.addRow(rowArray, this.ARTICLE_NAME);
   }
-  
+
+  emptyInput() {
+    this._lineInput.value = '';
+  }
+
   /*
    * this.createTableSection()
    */
diff --git a/src/manage_section.js b/src/manage_section.js
index 9391e5ced..5c5ef4d34 100644
--- a/src/manage_section.js
+++ b/src/manage_section.js
@@ -162,7 +162,7 @@ export default class ManageSection {
 
   createNewSection() {
     if (this.checkSectionValidity() === this.IS_VALID) {
-      // this.updateAddToLocalStorage();
+      this.updateAddToLocalStorage();
       // this.addSection();
     }
     else {
@@ -228,17 +228,30 @@ export default class ManageSection {
   updateAddToLocalStorage() {
     const lineList = this._privateCommonUtils.getLocalStorageLine();
     const stationList = this._privateCommonUtils.getLocalStorageStation();
+    const line = this.getCurrentLineFromTitle();
+    const station = this.getSelectedStation();
 
-    lineList[this._lineInput.value] = [this._startSelect.value, this._endSelect.value];
-    stationList[this._startSelect.value].push(this._lineInput.value);
-    stationList[this._endSelect.value].push(this._lineInput.value);
+    lineList[line].splice(this._orderInput.value, 0, station);
+    stationList[station].push(line);
 
     this._privateCommonUtils.saveToLocalStorage('lineList', lineList);
     this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
   }
 
+  getCurrentLineFromTitle() {
+    const title = document.querySelector("#manageLineSection h3");
+
+    return title.innerHTML.split(' ')[0];
+  }
+
+  getSelectedStation() {
+    return document.getElementById('section-station-selector').value;
+  }
+
   addSection() {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
 
+    const rowArray = [this._orderInput]
   }
 
   /*
diff --git a/src/table_utils.js b/src/table_utils.js
index b24a6fee9..d3a30156b 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -164,7 +164,7 @@ export default class TableUtils {
     this._tableType[tableType].forEach((v, i) => {
       const typeUpper = this.getType(tableType).toUpperCase();
 
-      if (i !== 3) {
+      if (i !== 3 || rowArray[i] === this.LINE_DELETE_BUTTON_TEXT) {
         const cell = row.insertCell(i);
 
         this.addCellBorder(cell);

From 6a4b60538f5881848614fc6b0454be5f081de577 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 19:38:50 +0900
Subject: [PATCH 34/44] feat: update section table when section is added

---
 src/manage_section.js | 16 +++++++++++-----
 src/table_utils.js    |  9 +++++++++
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/manage_section.js b/src/manage_section.js
index 5c5ef4d34..dd7976df7 100644
--- a/src/manage_section.js
+++ b/src/manage_section.js
@@ -163,6 +163,8 @@ export default class ManageSection {
   createNewSection() {
     if (this.checkSectionValidity() === this.IS_VALID) {
       this.updateAddToLocalStorage();
+      const line = this.getCurrentLineFromTitle();
+      this._privateTableUtils.refreshTableData(this.LINE_TABLE_SECTION, line);
       // this.addSection();
     }
     else {
@@ -248,17 +250,21 @@ export default class ManageSection {
     return document.getElementById('section-station-selector').value;
   }
 
-  addSection() {
-    const lineList = this._privateCommonUtils.getLocalStorageLine();
+  // addSection() {
+  //   const lineList = this._privateCommonUtils.getLocalStorageLine();
+  //   const line = this.getCurrentLineFromTitle();
+  //   const station = this.getSelectedStation();
+  //   const rowArray = [this._orderInput.value, station, this.SECTION_DELETE_TEXT, line];
 
-    const rowArray = [this._orderInput]
-  }
+  //   this._privateTableUtils.addRowAtIndex(rowArray, line, this.MANAGE_LINE_SECTION);
+    
+  // }
 
   /*
    * createManageLineSectionTable
    */
 
-    createManageLineSectionTable() {
+  createManageLineSectionTable() {
     this._privateCommonUtils.createDiv(this.MANAGE_LINE_SECTION, this.LINE_TABLE_SECTION);
     this._privateCommonUtils.insertEmptyline(this.LINE_TABLE_SECTION);
     this._privateCommonUtils.insertEmptyline(this.LINE_TABLE_SECTION);
diff --git a/src/table_utils.js b/src/table_utils.js
index d3a30156b..7247bf2f0 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -152,6 +152,15 @@ export default class TableUtils {
     this.addCellsAndButton(tableType, row, rowArray);
   }
 
+  addRowAtIndex(rowArray, line, tableType) {
+    const table = document.getElementById('sectionManageAreaTable');
+    const index = rowArray[0];
+    const row = table.insertRow(index);
+
+    this._privateDomUtils.addDataAttribute(row, rowArray);
+    this.addCellsAndButton(tableType, row, rowArray);
+  }
+
   addCellText(cell, text) {
     cell.innerHTML = text;
   }

From fcdcc0eb5e3b5acceba4792ba16d6bec8009f808 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 19:57:28 +0900
Subject: [PATCH 35/44] feat: renew selectors and inputs when line or section
 is added

---
 src/common_utils.js   | 10 ++++++++++
 src/manage_line.js    |  8 +++++---
 src/manage_section.js | 32 +++++++++++++++++++++++++++++---
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/common_utils.js b/src/common_utils.js
index 7fa685aba..7742c14ed 100644
--- a/src/common_utils.js
+++ b/src/common_utils.js
@@ -69,4 +69,14 @@ export default class CommonUtils {
   saveToLocalStorage(datasetName, data) {
     localStorage.setItem(datasetName, JSON.stringify(data));
   }
+
+  renewSelect(idName) {
+    const select =  document.getElementById(idName);
+
+    select.value = select.firstChild.value;
+  }
+
+  emptyInput(input) {
+    input.value = '';
+  }
 }
\ No newline at end of file
diff --git a/src/manage_line.js b/src/manage_line.js
index 298e2b15e..65e294e27 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -112,7 +112,7 @@ export default class ManageLine {
     if (this.checkLineValidity(this._lineInput.value) === this.IS_VALID) {
       this.updateAddToLocalStorage();
       this.addLine();
-      this.emptyInput();
+      this.renewLineUserInteractions();
     }
   }
 
@@ -186,8 +186,10 @@ export default class ManageLine {
     this._privateTableUtils.addRow(rowArray, this.ARTICLE_NAME);
   }
 
-  emptyInput() {
-    this._lineInput.value = '';
+  renewLineUserInteractions() {
+    this._privateCommonUtils.emptyInput(this._lineInput);
+    this._privateCommonUtils.renewSelect('line-start-station-selector');
+    this._privateCommonUtils.renewSelect('line-end-station-selector');
   }
 
   /*
diff --git a/src/manage_section.js b/src/manage_section.js
index dd7976df7..28cd1c1ab 100644
--- a/src/manage_section.js
+++ b/src/manage_section.js
@@ -44,9 +44,10 @@ export default class ManageSection {
     this.ADD_BUTTON = 'section-add-button';
     this.ADD_BUTTON_TEXT = '등록';
 
-    this.IS_EMPTY_ERROR_MESSAGE = '순서 입력값이 비었습니다.';
+    this.IS_EMPTY_ERROR_MESSAGE = '순서를 입력해주세요.';
     this.IS_NEGATIVE_ERROR_MESSAGE = '수가 아닌 정수 순서를 입력해주세요.';
     this.IS_NOT_CONSECUTIVE_ERROR_MESSAGE = '기존 순서들과 연속되는 순서를 입력해주세요.';
+    this.IS_ALREADY_REGISTERED_ERROR_MESSAGE = '이미 등록되어있는 역입니다.';
   }
 
   getLocalStorage() {
@@ -162,17 +163,27 @@ export default class ManageSection {
 
   createNewSection() {
     if (this.checkSectionValidity() === this.IS_VALID) {
-      this.updateAddToLocalStorage();
       const line = this.getCurrentLineFromTitle();
+
+      this.updateAddToLocalStorage();
       this._privateTableUtils.refreshTableData(this.LINE_TABLE_SECTION, line);
-      // this.addSection();
+      this.renewSectionUserInteractions();
     }
     else {
       this.alertCorrespondingError();
     }
   }
 
+  renewSectionUserInteractions() {
+    this._privateCommonUtils.renewSelect('section-station-selector');
+    this._privateCommonUtils.emptyInput(this._orderInput);
+  }
+
   checkSectionValidity() {
+    if (this.isAlreadyRegistered() === this.IS_NOT_VALID) {
+        return this.IS_NOT_VALID
+    }
+
     if (this.isEmpty() === this.IS_NOT_VALID) {
       return this.IS_NOT_VALID;
     }
@@ -188,6 +199,18 @@ export default class ManageSection {
     return this.IS_VALID;
   }
 
+  isAlreadyRegistered() {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+    const line = this.getCurrentLineFromTitle();
+    const station = this.getSelectedStation();
+
+    if (lineList[line].includes(station)) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
   isEmpty() {
     if (!this._orderInput.value) {
       return this.IS_NOT_VALID;
@@ -225,6 +248,9 @@ export default class ManageSection {
     else if (this.isNotConsecutive() === this.IS_NOT_VALID) {
       this._privateCommonUtils.alertError(this.IS_NOT_CONSECUTIVE_ERROR_MESSAGE);
     }
+    else if (this.isAlreadyRegistered() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(this.IS_ALREADY_REGISTERED_ERROR_MESSAGE);
+    }
   }
 
   updateAddToLocalStorage() {

From 335a3e5330934ab2a9e5672ec65f623c675aeb91 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 20:45:03 +0900
Subject: [PATCH 36/44] feat: renew line buttons and hide manageLineSection
 when section manage button is clicked

---
 src/index.js          |  5 +++--
 src/manage_section.js | 37 ++++++++++++++++++++++++++-----------
 src/menu.js           | 24 ++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/index.js b/src/index.js
index 88a20a455..1c30b471b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,10 +7,11 @@ export default class SubwayMap {
   constructor() {
     document.body.style.fontFamily = 'Arial';
     new Menu();
-
     new ManageStation();
     new ManageLine();
-    new ManageSection();
+    const manageSection = new ManageSection();
+
+    manageSection.initPage();
   }
 }
 
diff --git a/src/manage_section.js b/src/manage_section.js
index 28cd1c1ab..61e6c37fb 100644
--- a/src/manage_section.js
+++ b/src/manage_section.js
@@ -4,13 +4,6 @@ import CommonUtils from './common_utils.js';
 import SelectUtils from './select_utils.js';
 
 export default class ManageSection {
-  constructor() {
-    this.setPrivateVariables();
-    this.setConst();
-    this.getLocalStorage();
-    this.initPage();
-  }
-
   setPrivateVariables() {
     this._privateTableUtils = new TableUtils();
     this._privateDomUtils = new DomUtils();
@@ -29,13 +22,17 @@ export default class ManageSection {
 
     this.SELECT_LINE_TITLE_TAG = 'h3';
     this.SELECT_LINE_TITLE = '구간을 수정할 노선을 선택해주세요';
+
     this.MANAGE_LINE_TITLE_TAG = 'h3';
     this.MANAGE_LINE_TITLE = ' 관리';
+
     this.ADD_SECTION_TITLE_TAG = 'h4';
     this.ADD_SECTION_TITLE = '구간 등록';
+
     this.SECTION_ORDER_INPUT_PLACEHOLDER = '순서';
     this.SECTION_DELETE_TEXT = '노선에서 제거';
 
+    this.LINE_BUTTONS_CLASS = 'line-button';
     this.SELECT_LINE_BUTTON_CLASS = 'section-line-menu-button';
     this.DELETE_BUTTON_CLASS = 'section-delete-button';
 
@@ -56,6 +53,10 @@ export default class ManageSection {
   }
 
   initPage() {
+    this.setPrivateVariables();
+    this.setConst();
+    this.getLocalStorage();
+
     this.createSelectLineSection();
     this.createManageLineSection();
     this.createManageLineSectionTable();
@@ -72,10 +73,16 @@ export default class ManageSection {
   }
   
   createLineButtons() {
-    for (const line in this._lineList) {
+    this.setPrivateVariables();
+    this.setConst();
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+
+    for (const line in lineList) {
       const button = this._privateDomUtils.createButton(`${line}Button`, line);
+
       this._privateDomUtils.appendToIdName(this.SELECT_LINE_SECTION, button);
       button.style.margin = "2px";
+      this._privateDomUtils.setAttribute('class', button, this.LINE_BUTTONS_CLASS);
       this.addEventToSelectButton(button, line);
     }
   }
@@ -88,9 +95,13 @@ export default class ManageSection {
   }
 
   showManageLineSection() {
-    this._manageLineSection.style.display = 'block';
+    const manageLineSection = document.getElementById(this.MANAGE_LINE_SECTION);
+
+    manageLineSection.style.display = 'block';
   }
 
+
+
   changeManageLineSection(line) {
     this.changeManageLineSectionTitle(line);
     this.changeManageLineSectionTable(line);
@@ -114,9 +125,13 @@ export default class ManageSection {
     this._privateCommonUtils.createDiv(this.ARTICLE_NAME, this.MANAGE_LINE_SECTION);
     this._privateCommonUtils.createTitle(this.MANAGE_LINE_TITLE_TAG, this.MANAGE_LINE_TITLE, this.MANAGE_LINE_SECTION);
     this.createSectionAddArea();
+    this.hideManageLineSection();
+  }
 
-    this._manageLineSection = document.getElementById(this.MANAGE_LINE_SECTION);
-    this._manageLineSection.style.display = 'none';
+  hideManageLineSection() {
+    const manageLineSection = document.getElementById(this.MANAGE_LINE_SECTION);
+    
+    manageLineSection.style.display = 'none';
   }
 
   createSectionAddArea() {
diff --git a/src/menu.js b/src/menu.js
index c970ab90f..c8b3f3274 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -5,6 +5,7 @@ import CommonUtils from './common_utils.js';
 import ManageLine from './manage_line.js';
 import SelectUtils from './select_utils.js';
 import ManageMapPrint from './manage_map_print.js';
+import ManageSection from './manage_section.js';
 
 export default class Menu {
   constructor() {
@@ -26,6 +27,8 @@ export default class Menu {
     this.LINE_ARTICLE = 'lineArticle';
     this.SECTION_ARTICLE = 'sectionArticle';
     this.MAP_PRINT_ARTICLE = 'mapArticle';
+
+    this.LINE_BUTTON_CLASS = 'line-button'
   }
 
   managerButton() {
@@ -95,6 +98,9 @@ export default class Menu {
       this.refreshLineSelect();
       this._privateTableUtils.refreshTableData(articleName);
     }
+    else if (articleName === this.SECTION_ARTICLE) {
+      this.refreshSectionLineButtons();
+    }
     else if (articleName === this.MAP_PRINT_ARTICLE) {
       this.refreshMapPrint(articleName);
     }
@@ -113,6 +119,24 @@ export default class Menu {
     
   }
 
+  refreshSectionLineButtons() {
+    this.removeButtons();
+    
+    const manageSection = new ManageSection();
+
+    manageSection.createLineButtons();
+    manageSection.hideManageLineSection();
+  }
+
+  removeButtons() {
+    const buttonArray = document.querySelectorAll(`.${this.LINE_BUTTON_CLASS}`);
+    const len = buttonArray.length
+
+    for (let i = 0; i < len; i++) {
+      document.querySelector(`.${this.LINE_BUTTON_CLASS}`).remove();
+    }
+  }
+
   refreshMapPrint(articleName) {
     const manageMapPrint = new ManageMapPrint();
 

From bdf72f83ca608aad3553271b6edda2660392b477 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 20:50:00 +0900
Subject: [PATCH 37/44] feat: renew station table when station manage button is
 clicked

---
 src/menu.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/menu.js b/src/menu.js
index c8b3f3274..222fa02aa 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -24,6 +24,7 @@ export default class Menu {
     this.ARTICLE_AREA = 'articleArea';
     this.DO_NOT_APPEND = false;
 
+    this.STATION_ARTICLE = 'stationArticle';
     this.LINE_ARTICLE = 'lineArticle';
     this.SECTION_ARTICLE = 'sectionArticle';
     this.MAP_PRINT_ARTICLE = 'mapArticle';
@@ -94,7 +95,10 @@ export default class Menu {
   }
 
   refreshArticle(articleName) {
-    if (articleName === this.LINE_ARTICLE) {
+    if (articleName === this.STATION_ARTICLE) {
+      this.refreshStationArticle(articleName);
+    }
+    else if (articleName === this.LINE_ARTICLE) {
       this.refreshLineSelect();
       this._privateTableUtils.refreshTableData(articleName);
     }
@@ -106,6 +110,11 @@ export default class Menu {
     }
   }
 
+  refreshStationArticle(articleName) {
+    this._privateTableUtils.emptyTableData(articleName);
+    this._privateTableUtils.initStationTableData(articleName);
+  }
+
   refreshLineSelect() {
     const startSelect = document.getElementById('line-start-station-selector');
     const endSelect = document.getElementById('line-end-station-selector');

From f948878b3b37118e359afee0d3e07149bd93ea78 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 21:24:18 +0900
Subject: [PATCH 38/44] feat: renew section table when a section is removed

---
 src/manage_section.js |  6 ++----
 src/table_utils.js    | 44 +++++++++++++++++++++++++++++++++----------
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/src/manage_section.js b/src/manage_section.js
index 61e6c37fb..885b024f9 100644
--- a/src/manage_section.js
+++ b/src/manage_section.js
@@ -83,11 +83,11 @@ export default class ManageSection {
       this._privateDomUtils.appendToIdName(this.SELECT_LINE_SECTION, button);
       button.style.margin = "2px";
       this._privateDomUtils.setAttribute('class', button, this.LINE_BUTTONS_CLASS);
-      this.addEventToSelectButton(button, line);
+      this.addEventToLineSelectButton(button, line);
     }
   }
 
-  addEventToSelectButton(button, line) {
+  addEventToLineSelectButton(button, line) {
     button.addEventListener('click', () => {
       this.showManageLineSection();
       this.changeManageLineSection(line);
@@ -100,8 +100,6 @@ export default class ManageSection {
     manageLineSection.style.display = 'block';
   }
 
-
-
   changeManageLineSection(line) {
     this.changeManageLineSectionTitle(line);
     this.changeManageLineSectionTable(line);
diff --git a/src/table_utils.js b/src/table_utils.js
index 7247bf2f0..4d082da69 100644
--- a/src/table_utils.js
+++ b/src/table_utils.js
@@ -1,5 +1,6 @@
 import DomUtils from './dom_utils.js';
 import CommonUtils from './common_utils.js';
+import ManageSection from './manage_section.js';
 
 export default class TableUtils {
   constructor() {
@@ -108,16 +109,7 @@ export default class TableUtils {
     for (const index in lineList[line]) {
       const rowArray = [index, lineList[line][index], this.SECTION_DELETE_BUTTON_TEXT, line];
       this.addRow(rowArray, toIdName);
-
-      // const station = lineList[line][index];
-      // const lineIndex = stationList[station].indexOf(line);
-      // console.log(station,stationList[station], line);
-      // console.log(lineIndex, index);
-      // stationList[station].splice(lineIndex, 1);
     }
-
-    // this._privateCommonUtils.saveToLocalStorage('lineList', lineList);
-    // this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
   }
 
   addTableStyle(table) {
@@ -272,6 +264,7 @@ export default class TableUtils {
   checkSectionDeleteValidity(button) {
     if (this.checkIfContainsOverTwoStations(button) === this.IS_VALID) {
       this.deleteRowAndData(button);
+      this.refreshSectionTable(button);
     }
     else {
       this._privateCommonUtils.alertError(this.SECTION_DELETE_ERROR_MESSAGE);
@@ -304,17 +297,31 @@ export default class TableUtils {
 
   deleteRowAndData(button) {
     const dataset = this.getDataAttribute(button);
-    const datasetArray = dataset.split(',');
+    const datasetArray = this.getDataSetArray(button);
     const row = document.querySelector(`[data-tracking="${dataset}"]`);
 
     this.updateDeleteToLocalStorage(button, datasetArray);
     this.deleteTableRow(row);
   }
 
+  getDataSetArray(button) {
+    const dataset = this.getDataAttribute(button);
+    const datasetArray = dataset.split(',');
+
+    return datasetArray;
+  }
+
   getDataAttribute(button) {
     return button.dataset.tracking;
   }
 
+  refreshSectionTable(button) {
+    const datasetArray = this.getDataSetArray(button);
+    const line = datasetArray[3];
+    
+    this.refreshTableData('sectionManageArea', line);
+  }
+
   updateDeleteToLocalStorage(button, datasetArray) {
     const stationList = this._privateCommonUtils.getLocalStorageStation();
     const lineList = this._privateCommonUtils.getLocalStorageLine();
@@ -325,6 +332,9 @@ export default class TableUtils {
     else if (this.checkTableId(button) === this.LINE_TABLE_NAME) {
       this.updateLineDelete(stationList, lineList, datasetArray);
     }
+    else if (this.checkTableId(button) === this.SECTION_TABLE_NAME) {
+      this.updateSectionDelete(stationList, lineList, datasetArray);
+    }
   }
 
   updateStationDelete(stationList, datasetArray) {
@@ -343,6 +353,20 @@ export default class TableUtils {
     this._privateCommonUtils.saveToLocalStorage('lineList', lineList);
   }
 
+  updateSectionDelete(stationList, lineList, datasetArray) {
+    const index = datasetArray[0];
+    const line = datasetArray[3];
+    const station = lineList[line][index];
+    const lineIndex = stationList[station].indexOf(line);
+    const stationIndex = lineList[line].indexOf(station);
+
+    stationList[station].splice(lineIndex, 1);
+    lineList[line].splice(stationIndex, 1);
+
+    this._privateCommonUtils.saveToLocalStorage('lineList', lineList);
+    this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
+  }
+
   checkTableId(button) {
     return button.parentNode.parentNode.parentNode.parentNode.id;
   }

From 8ee21dd1e22888df0a7d20771575a829c80d9889 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 21:28:56 +0900
Subject: [PATCH 39/44] feat: renew section manage selector when section manage
 button is clicked

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

diff --git a/src/menu.js b/src/menu.js
index 222fa02aa..b85d96d70 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -104,6 +104,7 @@ export default class Menu {
     }
     else if (articleName === this.SECTION_ARTICLE) {
       this.refreshSectionLineButtons();
+      this.refreshStationsSelector();
     }
     else if (articleName === this.MAP_PRINT_ARTICLE) {
       this.refreshMapPrint(articleName);
@@ -137,6 +138,14 @@ export default class Menu {
     manageSection.hideManageLineSection();
   }
 
+  refreshStationsSelector() {
+    const select = document.getElementById('section-station-selector');
+
+    select.innerHTML = '';
+
+    this._privateSelectUtils.addStationsToSelect(select, this._privateCommonUtils, this._privateDomUtils);
+  }
+
   removeButtons() {
     const buttonArray = document.querySelectorAll(`.${this.LINE_BUTTON_CLASS}`);
     const len = buttonArray.length

From 170d01288e9e56ee5015089765b590c06e3918e3 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 21:38:25 +0900
Subject: [PATCH 40/44] refactor: refactor constructor of main modules

---
 src/index.js          | 10 +++++++---
 src/manage_line.js    | 21 +++++++++++++--------
 src/manage_station.js | 19 ++++++++++++-------
 src/menu.js           | 11 ++++++-----
 4 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/index.js b/src/index.js
index 1c30b471b..43a7bc448 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,11 +6,15 @@ import ManageSection from './manage_section.js';
 export default class SubwayMap {
   constructor() {
     document.body.style.fontFamily = 'Arial';
-    new Menu();
-    new ManageStation();
-    new ManageLine();
+    
+    const menu = new Menu();
+    const manageStation = new ManageStation();
+    const manageLine = new ManageLine();
     const manageSection = new ManageSection();
 
+    menu.createMenu();
+    manageLine.initPage();
+    manageStation.initPage();
     manageSection.initPage();
   }
 }
diff --git a/src/manage_line.js b/src/manage_line.js
index 65e294e27..bf403d745 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -4,13 +4,11 @@ import TableUtils from "./table_utils.js";
 import SelectUtils from "./select_utils.js";
 
 export default class ManageLine {
-  constructor() {
-    this.setConst();
+  setPrivateVariables() {
     this._privateCommonUtils = new CommonUtils();
     this._privateDomUtils = new DomUtils();
     this._privateTableUtils = new TableUtils();
     this._privateSelectUtils = new SelectUtils();
-    this.initPage();
   }
 
   setConst() {
@@ -41,11 +39,11 @@ export default class ManageLine {
   }
 
   initPage() {
+    this.setConst();
+    this.setPrivateVariables();
     this.initLists();
-    this.createInputSection();
-    this._privateSelectUtils.createSelectSection(this.ARTICLE_NAME);
-    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
-    this.createLineAddButton();
+
+    this.createLineAddSection();
     this.createTableSection();
   }
 
@@ -60,9 +58,16 @@ export default class ManageLine {
   }
 
   /*
-   * this.createInputSection()
+   * this.createLineAddSection()
    */
 
+   createLineAddSection() {
+    this.createInputSection();
+    this._privateSelectUtils.createSelectSection(this.ARTICLE_NAME);
+    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
+    this.createLineAddButton();
+   }
+
   createInputSection() {
     this._privateCommonUtils.createTitle('div', this.LINE_INPUT_TITLE_TEXT, this.ARTICLE_NAME);
     this.createLineInput();
diff --git a/src/manage_station.js b/src/manage_station.js
index 7919ba022..3956b78e7 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -3,13 +3,6 @@ import TableUtils from './table_utils.js';
 import CommonUtils from './common_utils.js';
 
 export default class ManageStation {
-  constructor() {
-    this.setPrivateVariable();
-    this._stationList = {};
-    this.setConst();
-    this.initPage();
-  }
-
   setPrivateVariable() {
     this._privateDomUtils = new DomUtils();
     this._privateCommonUtils = new CommonUtils();
@@ -44,12 +37,24 @@ export default class ManageStation {
   }
 
   initPage() {
+    this.setPrivateVariable();
+    this._stationList = {};
+    this.setConst();
+
+    this.createInputSection();
+    this.createTableSection();
+  }
+
+  createInputSection() {
     this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
     this._privateCommonUtils.createTitle(this.STATION_INPUT_TITLE_TAG, this.STATION_INPUT_TITLE_TEXT, this.ARTICLE_NAME);
     this.createStationInput();
     this._stationAddButton = this._privateDomUtils.createButton(this.ADD_BUTTON_ID, this.ADD_BUTTON_TEXT);
     this._privateDomUtils.appendToIdName(this.ARTICLE_NAME, this._stationAddButton);
     this.addEventToButton(this.ADD_TYPE, this.MENU_TYPE);
+  }
+
+  createTableSection() {
     this._privateCommonUtils.createTitle(this.STATION_LIST_TITLE_TAG, this.STATION_LIST_TITLE_TEXT, this.ARTICLE_NAME);
     this._privateTableUtils.initTable(this.ARTICLE_NAME);
   }
diff --git a/src/menu.js b/src/menu.js
index b85d96d70..8d8b0551f 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -8,18 +8,15 @@ import ManageMapPrint from './manage_map_print.js';
 import ManageSection from './manage_section.js';
 
 export default class Menu {
-  constructor() {
+  setPrivateVariables() {
     this._privateDomUtils = new DomUtils();
     this._privateStringUtils = new StringUtils();
     this._privateTableUtils = new TableUtils();
     this._privateCommonUtils = new CommonUtils();
     this._privateSelectUtils = new SelectUtils();
-    this.setIdNAme();
-    this.managerButton();
-    this.createMenu();
   }
 
-  setIdNAme() {
+  setIdName() {
     this.APP = 'app';
     this.ARTICLE_AREA = 'articleArea';
     this.DO_NOT_APPEND = false;
@@ -42,6 +39,10 @@ export default class Menu {
   }
 
   createMenu() {
+    this.setIdName();
+    this.managerButton();
+    this.setPrivateVariables();
+
     this.createArticleArea();
     for (const idName in this._managerButton) {
       const varName = this.createMenuButton(idName);

From 9c7b4a96925b9aacd9d4ed77fe032e97e1bc4530 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 22:03:34 +0900
Subject: [PATCH 41/44] feat: trim all spaces in station and line name inputs

---
 src/manage_line.js    | 22 +++++++++++-----------
 src/manage_section.js | 14 +++-----------
 src/manage_station.js | 17 ++++++++++++-----
 src/string_utils.js   |  4 ++++
 4 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/manage_line.js b/src/manage_line.js
index bf403d745..605a09f06 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -2,6 +2,7 @@ import CommonUtils from "./common_utils.js";
 import DomUtils from "./dom_utils.js";
 import TableUtils from "./table_utils.js";
 import SelectUtils from "./select_utils.js";
+import StringUtils from "./string_utils.js";
 
 export default class ManageLine {
   setPrivateVariables() {
@@ -9,6 +10,7 @@ export default class ManageLine {
     this._privateDomUtils = new DomUtils();
     this._privateTableUtils = new TableUtils();
     this._privateSelectUtils = new SelectUtils();
+    this._privateStringUtils = new StringUtils();
   }
 
   setConst() {
@@ -47,10 +49,6 @@ export default class ManageLine {
     this.createTableSection();
   }
 
-  /*
-   * this.initLists()
-   */
-
   initLists() {
     this._lineList = this._privateCommonUtils.getLocalStorageLine();
     this._stationList = this._privateCommonUtils.getLocalStorageStation();
@@ -114,7 +112,9 @@ export default class ManageLine {
   }
 
   createNewLine() {
-    if (this.checkLineValidity(this._lineInput.value) === this.IS_VALID) {
+    this._lineInputValue = this._privateStringUtils.removeSpace(this._lineInput.value);
+    
+    if (this.checkLineValidity() === this.IS_VALID) {
       this.updateAddToLocalStorage();
       this.addLine();
       this.renewLineUserInteractions();
@@ -144,7 +144,7 @@ export default class ManageLine {
   }
 
   isEmpty() {
-    if (this._lineInput.value.length === 0) {
+    if (this._lineInputValue.length === 0) {
       return this.IS_NOT_VALID;
     }
 
@@ -153,7 +153,7 @@ export default class ManageLine {
 
   overlap() {
     const lineList = this._privateCommonUtils.getLocalStorageLine();
-    if  (this._lineInput.value in lineList) {
+    if  (this._lineInputValue in lineList) {
       return this.IS_NOT_VALID;
     }
 
@@ -177,16 +177,16 @@ export default class ManageLine {
   updateAddToLocalStorage() {
     const lineList = this._privateCommonUtils.getLocalStorageLine();
     const stationList = this._privateCommonUtils.getLocalStorageStation();
-    lineList[this._lineInput.value] = [this._startSelect.value, this._endSelect.value];
-    stationList[this._startSelect.value].push(this._lineInput.value);
-    stationList[this._endSelect.value].push(this._lineInput.value);
+    lineList[this._lineInputValue] = [this._startSelect.value, this._endSelect.value];
+    stationList[this._startSelect.value].push(this._lineInputValue);
+    stationList[this._endSelect.value].push(this._lineInputValue);
 
     this._privateCommonUtils.saveToLocalStorage('lineList', lineList);
     this._privateCommonUtils.saveToLocalStorage('stationList', stationList);
   }
 
   addLine() {
-    const rowArray = [this._lineInput.value, this._startSelect.value, this._endSelect.value, this.DELETE_BUTTON_TEXT];
+    const rowArray = [this._lineInputValue, this._startSelect.value, this._endSelect.value, this.DELETE_BUTTON_TEXT];
 
     this._privateTableUtils.addRow(rowArray, this.ARTICLE_NAME);
   }
diff --git a/src/manage_section.js b/src/manage_section.js
index 885b024f9..83aab68d7 100644
--- a/src/manage_section.js
+++ b/src/manage_section.js
@@ -2,6 +2,7 @@ import TableUtils from './table_utils.js';
 import DomUtils from './dom_utils.js';
 import CommonUtils from './common_utils.js';
 import SelectUtils from './select_utils.js';
+import StringUtils from './string_utils.js';
 
 export default class ManageSection {
   setPrivateVariables() {
@@ -9,6 +10,7 @@ export default class ManageSection {
     this._privateDomUtils = new DomUtils();
     this._privateCommonUtils = new CommonUtils();
     this._privateSelectUtils = new SelectUtils();
+    this._privateStringUtils = new StringUtils();
   }
 
   setConst() {
@@ -42,7 +44,7 @@ export default class ManageSection {
     this.ADD_BUTTON_TEXT = '등록';
 
     this.IS_EMPTY_ERROR_MESSAGE = '순서를 입력해주세요.';
-    this.IS_NEGATIVE_ERROR_MESSAGE = '수가 아닌 정수 순서를 입력해주세요.';
+    this.IS_NEGATIVE_ERROR_MESSAGE = '음수가 아닌 정수 순서를 입력해주세요.';
     this.IS_NOT_CONSECUTIVE_ERROR_MESSAGE = '기존 순서들과 연속되는 순서를 입력해주세요.';
     this.IS_ALREADY_REGISTERED_ERROR_MESSAGE = '이미 등록되어있는 역입니다.';
   }
@@ -289,16 +291,6 @@ export default class ManageSection {
     return document.getElementById('section-station-selector').value;
   }
 
-  // addSection() {
-  //   const lineList = this._privateCommonUtils.getLocalStorageLine();
-  //   const line = this.getCurrentLineFromTitle();
-  //   const station = this.getSelectedStation();
-  //   const rowArray = [this._orderInput.value, station, this.SECTION_DELETE_TEXT, line];
-
-  //   this._privateTableUtils.addRowAtIndex(rowArray, line, this.MANAGE_LINE_SECTION);
-    
-  // }
-
   /*
    * createManageLineSectionTable
    */
diff --git a/src/manage_station.js b/src/manage_station.js
index 3956b78e7..fb6e152b7 100644
--- a/src/manage_station.js
+++ b/src/manage_station.js
@@ -1,9 +1,11 @@
 import DomUtils from './dom_utils.js';
 import TableUtils from './table_utils.js';
 import CommonUtils from './common_utils.js';
+import StringUtils from './string_utils.js';
 
 export default class ManageStation {
   setPrivateVariable() {
+    this._privateStringUtils = new StringUtils();
     this._privateDomUtils = new DomUtils();
     this._privateCommonUtils = new CommonUtils();
     this._privateTableUtils = new TableUtils();
@@ -89,10 +91,13 @@ export default class ManageStation {
   }
 
   addStation() {
+    this._inputValue = this._privateStringUtils.removeSpace(this._stationInput.value);
+    console.log(this._inputValue);
+
     if (this.checkStationValidity() === this.IS_VALID) {
-      const rowArray = [this._stationInput.value, this.DELETE_BUTTON_TEXT];
+      const rowArray = [this._inputValue, this.DELETE_BUTTON_TEXT];
       
-      this.addToStationList(this._stationInput.value);
+      this.addToStationList(this._inputValue);
       this._privateCommonUtils.saveToLocalStorage('stationList', this._stationList);
       this._privateTableUtils.addRow(rowArray, this.ARTICLE_NAME);
       this._stationInput.value = '';
@@ -107,7 +112,7 @@ export default class ManageStation {
     }
 
     if (this.overlap() === this.IS_NOT_VALID) {
-      this._privateCommonUtils.alertError(`"${this._stationInput.value}"은/는 ` + this.OVERLAP_ERROR_MESSAGE)
+      this._privateCommonUtils.alertError(`"${this._inputValue}"은/는 ` + this.OVERLAP_ERROR_MESSAGE)
 
       return this.IS_NOT_VALID;
     }
@@ -116,7 +121,7 @@ export default class ManageStation {
   }
 
   minLength() {
-    if (this._stationInput.value.length <= 1) {
+    if (this._inputValue.length <= 1) {
       return this.IS_NOT_VALID;
     }
 
@@ -124,7 +129,9 @@ export default class ManageStation {
   }
 
   overlap() {
-    if (this._stationInput.value in this._stationList) {
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+
+    if (this._inputValue in stationList) {
       return this.IS_NOT_VALID;
     }
 
diff --git a/src/string_utils.js b/src/string_utils.js
index ed45cce77..b1365ec67 100644
--- a/src/string_utils.js
+++ b/src/string_utils.js
@@ -1,4 +1,8 @@
 export default class StringUtils {
+  removeSpace(inputValue) {
+    return inputValue.split(' ').join('');
+  }
+
   getVarName(tagName) {
     let tagParts = this.splitTagName(tagName);
     let varNameParts = this.intoCamelCase(tagParts);

From db7a2404c6b4c58a1985b413f4f11f8ec5d778b6 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 22:23:42 +0900
Subject: [PATCH 42/44] refactor: split error chekcing and error alerting
 functions in station manage

---
 src/manage_line.js    | 25 ++++++++++++++++++-------
 src/manage_section.js |  3 ---
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/manage_line.js b/src/manage_line.js
index 605a09f06..2b69f4f14 100644
--- a/src/manage_line.js
+++ b/src/manage_line.js
@@ -113,30 +113,27 @@ export default class ManageLine {
 
   createNewLine() {
     this._lineInputValue = this._privateStringUtils.removeSpace(this._lineInput.value);
-    
+
     if (this.checkLineValidity() === this.IS_VALID) {
       this.updateAddToLocalStorage();
       this.addLine();
       this.renewLineUserInteractions();
     }
+    else {
+      this.alertCorrespondingError();
+    }
   }
 
   checkLineValidity() {
     if (this.isEmpty() === this.IS_NOT_VALID) {
-      this._privateCommonUtils.alertError(this.EMPTY_ERROR_MESSAGE);
-
       return this.IS_NOT_VALID;
     }
 
     if (this.overlap() === this.IS_NOT_VALID) {
-      this._privateCommonUtils.alertError(this.OVERLAP_ERROR_MESSAGE);
-
       return this.IS_NOT_VALID;
     }
 
     if (this.sameStartEnd() === this.IS_NOT_VALID) {
-      this._privateCommonUtils.alertError(this.SAME_START_END_ERROR_MESSAGE);
-
       return this.IS_NOT_VALID;
     }
 
@@ -169,6 +166,20 @@ export default class ManageLine {
     return this.IS_VALID;
   }
 
+  alertCorrespondingError() {
+    if (this.isEmpty() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(this.EMPTY_ERROR_MESSAGE);
+    }
+    else if (this.overlap() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(this.OVERLAP_ERROR_MESSAGE);
+    }
+    else if (this.sameStartEnd() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(this.SAME_START_END_ERROR_MESSAGE);
+    }
+
+    return this.IS_VALID;
+  }
+
   getSelect() {
     this._startSelect = document.getElementById('line-start-station-selector');
     this._endSelect = document.getElementById('line-end-station-selector');
diff --git a/src/manage_section.js b/src/manage_section.js
index 83aab68d7..cfc22c4d1 100644
--- a/src/manage_section.js
+++ b/src/manage_section.js
@@ -198,15 +198,12 @@ export default class ManageSection {
     if (this.isAlreadyRegistered() === this.IS_NOT_VALID) {
         return this.IS_NOT_VALID
     }
-
     if (this.isEmpty() === this.IS_NOT_VALID) {
       return this.IS_NOT_VALID;
     }
-
     if (this.isNegative() === this.IS_NOT_VALID) {
       return this.IS_NOT_VALID;
     }
-
     if (this.isNotConsecutive() === this.IS_NOT_VALID) {
       return this.IS_NOT_VALID;
     }

From 674ddcb7fa1206634b1d3ec28746cb78d29c2a71 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 22:31:46 +0900
Subject: [PATCH 43/44] feat: refresh input when change manage buttons are
 clicked

---
 src/menu.js | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/menu.js b/src/menu.js
index 8d8b0551f..f3cf8366e 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -100,12 +100,10 @@ export default class Menu {
       this.refreshStationArticle(articleName);
     }
     else if (articleName === this.LINE_ARTICLE) {
-      this.refreshLineSelect();
-      this._privateTableUtils.refreshTableData(articleName);
+      this.refreshLineArticle(articleName);
     }
     else if (articleName === this.SECTION_ARTICLE) {
-      this.refreshSectionLineButtons();
-      this.refreshStationsSelector();
+      this.refreshSectionArticle();
     }
     else if (articleName === this.MAP_PRINT_ARTICLE) {
       this.refreshMapPrint(articleName);
@@ -113,21 +111,37 @@ export default class Menu {
   }
 
   refreshStationArticle(articleName) {
+    this.findInputAndEmpty('station-name-input');
     this._privateTableUtils.emptyTableData(articleName);
     this._privateTableUtils.initStationTableData(articleName);
   }
 
+  refreshLineArticle(articleName) {
+    this.findInputAndEmpty('line-name-input')
+    this.refreshLineSelect();
+    this._privateTableUtils.refreshTableData(articleName);
+  }
+
   refreshLineSelect() {
     const startSelect = document.getElementById('line-start-station-selector');
     const endSelect = document.getElementById('line-end-station-selector');
     
-
     startSelect.innerHTML = '';
     endSelect.innerHTML = '';
 
     this._privateSelectUtils.addStationsToSelect(startSelect, this._privateCommonUtils, this._privateDomUtils);
-    this._privateSelectUtils.addStationsToSelect(endSelect, this._privateCommonUtils, this._privateDomUtils);
-    
+    this._privateSelectUtils.addStationsToSelect(endSelect, this._privateCommonUtils, this._privateDomUtils);  
+  }
+
+  refreshSectionArticle() {
+    this.findInputAndEmpty('section-order-input');
+    this.refreshSectionLineButtons();
+    this.refreshStationsSelector();
+  }
+
+  findInputAndEmpty(idName) {
+    const input = document.getElementById(idName)
+    this._privateCommonUtils.emptyInput(input);
   }
 
   refreshSectionLineButtons() {

From 3f9986ecd2368efcdb8291cbff67e4df562b3173 Mon Sep 17 00:00:00 2001
From: jehong <jehong@student.42seoul.com>
Date: Tue, 15 Dec 2020 22:49:11 +0900
Subject: [PATCH 44/44] docs: update README

---
 README.md | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index fa4e3d6ed..0cbdb1158 100644
--- a/README.md
+++ b/README.md
@@ -5,10 +5,12 @@
 
 ### 1. 역 관리
 - 처음 시작시 localStorage를 바탕으로 페이지 구성 요소 생성
+- 역 관리 버튼 누를 때마다 역 목록 테이블 새로고침
 
 - 역 등록 예외사항
   - 역 이름이 한글자 이하인 경우
   - 역 이름이 중복되는 경우
+- 역 이름의 공백 모두 제거
 - 지하철 역 목록 끝에 추가
 - localStorage에 역 목록 새로 저장
 - 역 목록 테이블 하단에 row 추가
@@ -26,10 +28,8 @@
 - 처음 시작시 localStorage를 바탕으로 페이지 구성 요소 생성
 
 - 노선 관리 버튼 누를 때마다
-  - localStorage의 역 목록과 다르면 불러오기 (selector 목록 업데이트)
-  - 상행 하행 selector에 역 목록 보여주기
-  - localStorage의 노선 목록 불러오기 (상행, 하행 업데이트)
-  - 노선 목록을 바탕으로 테이블 생성해서 페이지에 append 
+  - 상행 하행 selector 목록 새로고침
+  - 노선 목록 테이블 새로고침
 
 - 노선 등록 예외사항
   - 노선 이름이 비어있는 경우
@@ -38,6 +38,7 @@
 - 상행 종점역과 하행 종점역 선택
   - 상행과 하행 종점역 selector의 기본은 첫 역으로 보여주기
   - 상행 종점역과 하행 종점역은 역 목록 순서대로 보여주기
+- 노선 이름의 공백 모두 제거
 - 노선 목록 끝에 추가
 - 역 목록에 해당 역의 노선 정보 추가
 - 노선 목록과 역 목록 localStorage에 새로 저장
@@ -56,22 +57,19 @@
 - 처음 시작시 localStorage를 바탕으로 페이지 구성 요소 생성
 
 - 구간 관리 버튼 누를 때마다
-  - localStorage의 역 목록 불러오기 (노선 리스트, selector 목록 업데이트)
-  - 각 호선별로 버튼과 페이지 생성 (아무 호선도 안 눌렀을 시 아무 페이지도 보이면 안됨)
-  - 버튼 클릭시 해당되는 페이지만 보여주기
-  - selector에 역 목록 보여주기
+  - 각 노선별로 버튼 새로 생성
+  - selector 목록 새로고침
 
-- 호선 버튼 누를 때마다
-  - localStorage의 노선 목록 불러오기 (노선에 등록된 역 목록 업데이트)
-  - 노선 목록을 바탕으로 테이블 생성해서 페이지에 append
+- 노선 버튼 누를 때마다
+  - 노선 구간 테이블 새로고침
 
 - 구간 추가 예외사항
   - 순서가 비어있는 경우
   - 순서가 음수인 경우
   - 순서가 종점역 순서보다 1넘게 큰 경우 (연속적이지 않은 순서 발생시키는 경우)
-- 역이름 선택하고 순서 지정해서 구간 등록
+  - 이미 등록된 역인 경우
 - 입력한 순서 이후의 순서는 밀림 (순서는 중복되지 않음)
-- 노선 목록에서 해당되는 호선, 해당되는 순서로 역 등록
+- 노선 목록에서, 해당되는 노선의 역 리스트에, 해당되는 순서로 역 등록
 - 역 목록에 해당 역의 노선 정보 추가
 - 노선 목록과 역 목록 localStorage에 새로 저장
 - 호선별 역 목록 테이블에 해당되는 순서 row 추가
@@ -85,5 +83,12 @@
 
 ### 4. 지하철 노선도 출력
 - 지하철 노선도 출력 버튼 클릭할 때마다
-  - localStorage의 노선 목록 불러오기
-  - 호선과 해당되는 역을 순서대로 화면에 출력하기
\ No newline at end of file
+  - 호선과 해당되는 역을 순서대로 화면에 새로 출력하기
+
+### 5. LocalStorage
+- stationList 객체
+  - key: 역이름
+  - value: 역이 등록된 노선 배열
+- lineList 객체
+  - key: 노선이름
+  - value: 노선에 등록된 역 배열
\ No newline at end of file