diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..fd5106ff2
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_STORE
diff --git a/README.md b/README.md
index e97a1d649..0cbdb1158 100644
--- a/README.md
+++ b/README.md
@@ -1,114 +1,94 @@
-# 🚇 지하철 노선도 미션
-
-## 🚀 기능 요구사항
-
-### 지하철 역 관련 기능
-- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
-- 중복된 지하철 역 이름이 등록될 수 없다.
-- 지하철 역은 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) 문서 절차를 따라 미션을 제출한다.
+### 0. 메뉴
+- 역 관리, 노선 관리, 구간 관리, 지하철 노선도 출력 버튼 생성
+- 각 버튼에 해당되는 페이지 생성해서 숨기기 (처음 로드 시 페이지는 보이면 안됨)
+- 각 버튼은 관련 페이지만 보이고 다른 페이지는 숨기기
+
+### 1. 역 관리
+- 처음 시작시 localStorage를 바탕으로 페이지 구성 요소 생성
+- 역 관리 버튼 누를 때마다 역 목록 테이블 새로고침
+
+- 역 등록 예외사항
+  - 역 이름이 한글자 이하인 경우
+  - 역 이름이 중복되는 경우
+- 역 이름의 공백 모두 제거
+- 지하철 역 목록 끝에 추가
+- localStorage에 역 목록 새로 저장
+- 역 목록 테이블 하단에 row 추가
+
+- 역 삭제 예외사항
+  - 노선에 등록되어있는 경우
+- 삭제 버튼 누르면 확인창 띄우기
+- localStorage에 역 목록 새로 저장
+- 삭제된 역 row를 테이블에서 제거
+  - 삭제 버튼의 dataset으로 row 찾기
+
+<br>
+
+### 2. 노선 관리
+- 처음 시작시 localStorage를 바탕으로 페이지 구성 요소 생성
+
+- 노선 관리 버튼 누를 때마다
+  - 상행 하행 selector 목록 새로고침
+  - 노선 목록 테이블 새로고침
+
+- 노선 등록 예외사항
+  - 노선 이름이 비어있는 경우
+  - 노선 이름이 중복되는 경우
+  - 상행 종점과 하행 종점이 같은 경우
+- 상행 종점역과 하행 종점역 선택
+  - 상행과 하행 종점역 selector의 기본은 첫 역으로 보여주기
+  - 상행 종점역과 하행 종점역은 역 목록 순서대로 보여주기
+- 노선 이름의 공백 모두 제거
+- 노선 목록 끝에 추가
+- 역 목록에 해당 역의 노선 정보 추가
+- 노선 목록과 역 목록 localStorage에 새로 저장
+- 노선 목록 테이블 하단에 row 추가
+
+- 지하철 노선 삭제
+- 삭제 버튼 누르면 확인창 띄우기
+- 역 목록에서 해당 역의 노선 정보 제거
+- 노선 목록과 역 목록 localStorage에 새로 저장
+- 노선 목록 테이블에서 해당 row를 제거
+  - 삭제 버튼의 dataset으로 row 찾기
+
+<br>
+
+### 3. 구간 관리
+- 처음 시작시 localStorage를 바탕으로 페이지 구성 요소 생성
+
+- 구간 관리 버튼 누를 때마다
+  - 각 노선별로 버튼 새로 생성
+  - selector 목록 새로고침
+
+- 노선 버튼 누를 때마다
+  - 노선 구간 테이블 새로고침
+
+- 구간 추가 예외사항
+  - 순서가 비어있는 경우
+  - 순서가 음수인 경우
+  - 순서가 종점역 순서보다 1넘게 큰 경우 (연속적이지 않은 순서 발생시키는 경우)
+  - 이미 등록된 역인 경우
+- 입력한 순서 이후의 순서는 밀림 (순서는 중복되지 않음)
+- 노선 목록에서, 해당되는 노선의 역 리스트에, 해당되는 순서로 역 등록
+- 역 목록에 해당 역의 노선 정보 추가
+- 노선 목록과 역 목록 localStorage에 새로 저장
+- 호선별 역 목록 테이블에 해당되는 순서 row 추가
+
+- 구간 제거 예외사항
+  - 해당 호선의 역이 두개 이하인 경우는 노선에서 역 제거 불가
+- 노선 목록에서 해당 호선의 해당 역 제거
+- 역 목록에서 해당 역의 노선 정보 제거
+- 노선 목록과 역 목록 localStorage에 새로 저장
+- 호선별 역 목록 테이블에서 해당되는 순서 row 제거
+
+### 4. 지하철 노선도 출력
+- 지하철 노선도 출력 버튼 클릭할 때마다
+  - 호선과 해당되는 역을 순서대로 화면에 새로 출력하기
+
+### 5. LocalStorage
+- stationList 객체
+  - key: 역이름
+  - value: 역이 등록된 노선 배열
+- lineList 객체
+  - key: 노선이름
+  - value: 노선에 등록된 역 배열
\ No newline at end of file
diff --git a/src/common_utils.js b/src/common_utils.js
new file mode 100644
index 000000000..7742c14ed
--- /dev/null
+++ b/src/common_utils.js
@@ -0,0 +1,82 @@
+import DomUtils from './dom_utils.js';
+
+export default class CommonUtils {
+  constructor() {
+    this._privateDomUtils = new DomUtils();
+  }
+
+  alertError(errorMessage) {
+    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);
+
+    title.innerHTML = titleContent;
+    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');
+
+    this._privateDomUtils.appendToIdName(toIdName, newline);
+  }
+  
+  getLocalStorageStation() {
+    const stationList = JSON.parse(localStorage.getItem('stationList'));
+
+    if (!stationList) {
+      return {};
+    }
+
+    return stationList;
+  }
+
+  getLocalStorageLine() {
+    const lineList = JSON.parse(localStorage.getItem('lineList'));
+
+    if (!lineList) {
+      return {};
+    }
+
+    return lineList;
+  }
+
+  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/dom_utils.js b/src/dom_utils.js
new file mode 100644
index 000000000..075c2332d
--- /dev/null
+++ b/src/dom_utils.js
@@ -0,0 +1,74 @@
+export default class DomUtils {
+  constructor() {
+    this.DO_NOT_APPEND = false;
+    this.ID_ATTRIBUTE = 'id';
+  }
+
+  createButton(idName, buttonText) {
+    const button = document.createElement('button');
+
+    this.setAttribute(this.ID_ATTRIBUTE, button, idName);
+    this.setInnerHtml(button, buttonText);
+
+    return button;
+  }
+
+  createArticle(toIdName, idName) {
+    const article = document.createElement('ARTICLE');
+
+    this.setAttribute(this.ID_ATTRIBUTE, article, idName);
+    this.appendToIdName(toIdName, article);
+
+    return article
+  }
+
+  setAttribute(attribute, varName, attributeName) {
+    varName.setAttribute(attribute, attributeName);
+  }
+
+  setInnerHtml(varName, buttonText) {
+    varName.innerHTML = buttonText;
+  }
+
+  appendToIdName(toIdName, varName) {
+    document.getElementById(toIdName).appendChild(varName);
+  }
+
+  appendToVarName(toVarName, varName) {
+    toVarName.appendChild(varName);
+  }
+
+  appendBefore(toIdName, varName, before) {
+    const toVarName = document.getElementById(toIdName);
+
+    toVarName.insertBefore(varName, before);
+  }
+
+  displayNone(varName) {
+    varName.style.display = "none";
+  }
+
+  createInput(inputObject) {
+    const input = document.createElement('input');
+
+    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;
+  }
+
+  setInputType(input, type) {
+    input.setAttribute('type', type);
+  }
+
+  setPlaceholder(input, placeholder) {
+    input.placeholder = placeholder;
+  }
+
+  addDataAttribute(tag, trackingData) {
+    tag.setAttribute('data-tracking', trackingData);
+  }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e69de29bb..43a7bc448 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,22 @@
+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() {
+    document.body.style.fontFamily = 'Arial';
+    
+    const menu = new Menu();
+    const manageStation = new ManageStation();
+    const manageLine = new ManageLine();
+    const manageSection = new ManageSection();
+
+    menu.createMenu();
+    manageLine.initPage();
+    manageStation.initPage();
+    manageSection.initPage();
+  }
+}
+
+new SubwayMap();
\ No newline at end of file
diff --git a/src/manage_line.js b/src/manage_line.js
new file mode 100644
index 000000000..2b69f4f14
--- /dev/null
+++ b/src/manage_line.js
@@ -0,0 +1,219 @@
+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() {
+    this._privateCommonUtils = new CommonUtils();
+    this._privateDomUtils = new DomUtils();
+    this._privateTableUtils = new TableUtils();
+    this._privateSelectUtils = new SelectUtils();
+    this._privateStringUtils = new StringUtils();
+  }
+
+  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.ADD_BUTTON_ID = 'line-add-button';
+    this.ADD_BUTTON_TEXT = '노선 추가';
+
+    this.LINE_LIST_TITLE_TAG = 'h2';
+    this.LINE_LIST_TITLE_TEXT = '🚉 지하철 역 목록';
+    
+    this.IS_VALID = 1;
+    this.IS_NOT_VALID = 0;
+
+    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.setConst();
+    this.setPrivateVariables();
+    this.initLists();
+
+    this.createLineAddSection();
+    this.createTableSection();
+  }
+
+  initLists() {
+    this._lineList = this._privateCommonUtils.getLocalStorageLine();
+    this._stationList = this._privateCommonUtils.getLocalStorageStation();
+    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
+  }
+
+  /*
+   * 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();
+    this._privateCommonUtils.insertEmptyline(this.ARTICLE_NAME);
+  }
+
+  createLineInput() {
+    const inputObject = this.lineInputObject();
+
+    this._lineInput = this._privateDomUtils.createInput(inputObject);
+  }
+
+  lineInputObject() {
+    const inputObject = {
+      'attribute': 'id',
+      'toIdName': this.ARTICLE_NAME,
+      'idName': this.LINE_INPUT_ID,
+      'placeholder': this.LINE_INPUT_PLACEHOLDER,
+      'type': this.LINE_INPUT_TYPE,
+    }
+
+    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);
+    this.addEventToButton();
+  }
+
+  addEventToButton() {
+    this._lineAddButton.addEventListener('click', () => {
+      this.createNewLine();
+    })
+    this._lineInput.addEventListener('keypress', e => {
+      if (e.keyCode === 13) {
+        this.createNewLine();
+      }
+    })
+  }
+
+  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) {
+      return this.IS_NOT_VALID;
+    }
+
+    if (this.overlap() === this.IS_NOT_VALID) {
+      return this.IS_NOT_VALID;
+    }
+
+    if (this.sameStartEnd() === this.IS_NOT_VALID) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  isEmpty() {
+    if (this._lineInputValue.length === 0) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  overlap() {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+    if  (this._lineInputValue in lineList) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  sameStartEnd() {
+    this.getSelect();
+    if (this._startSelect.value === this._endSelect.value) {
+      return this.IS_NOT_VALID;
+    }
+
+    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');
+  }
+
+  updateAddToLocalStorage() {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+    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._lineInputValue, this._startSelect.value, this._endSelect.value, this.DELETE_BUTTON_TEXT];
+
+    this._privateTableUtils.addRow(rowArray, this.ARTICLE_NAME);
+  }
+
+  renewLineUserInteractions() {
+    this._privateCommonUtils.emptyInput(this._lineInput);
+    this._privateCommonUtils.renewSelect('line-start-station-selector');
+    this._privateCommonUtils.renewSelect('line-end-station-selector');
+  }
+
+  /*
+   * 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_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
diff --git a/src/manage_section.js b/src/manage_section.js
new file mode 100644
index 000000000..cfc22c4d1
--- /dev/null
+++ b/src/manage_section.js
@@ -0,0 +1,301 @@
+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() {
+    this._privateTableUtils = new TableUtils();
+    this._privateDomUtils = new DomUtils();
+    this._privateCommonUtils = new CommonUtils();
+    this._privateSelectUtils = new SelectUtils();
+    this._privateStringUtils = new StringUtils();
+  }
+
+  setConst() {
+    this.IS_VALID = 1;
+    this.IS_NOT_VALID = 0;
+
+    this.ARTICLE_NAME = 'sectionArticle';
+    this.SELECT_LINE_SECTION = 'selectLineSection';
+    this.MANAGE_LINE_SECTION = 'manageLineSection';
+    this.LINE_TABLE_SECTION = 'sectionManageArea';
+
+    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';
+
+    this.SECTION_STATION_SELECTOR = 'section-station-selector';
+    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 = '기존 순서들과 연속되는 순서를 입력해주세요.';
+    this.IS_ALREADY_REGISTERED_ERROR_MESSAGE = '이미 등록되어있는 역입니다.';
+  }
+
+  getLocalStorage() {
+    this._lineList = this._privateCommonUtils.getLocalStorageLine();
+    this._stationList = this._privateCommonUtils.getLocalStorageStation();
+  }
+
+  initPage() {
+    this.setPrivateVariables();
+    this.setConst();
+    this.getLocalStorage();
+
+    this.createSelectLineSection();
+    this.createManageLineSection();
+    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);
+    this.createLineButtons();
+  }
+  
+  createLineButtons() {
+    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.addEventToLineSelectButton(button, line);
+    }
+  }
+
+  addEventToLineSelectButton(button, line) {
+    button.addEventListener('click', () => {
+      this.showManageLineSection();
+      this.changeManageLineSection(line);
+    })
+  }
+
+  showManageLineSection() {
+    const manageLineSection = document.getElementById(this.MANAGE_LINE_SECTION);
+
+    manageLineSection.style.display = 'block';
+  }
+
+  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()
+   */
+
+  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.hideManageLineSection();
+  }
+
+  hideManageLineSection() {
+    const manageLineSection = document.getElementById(this.MANAGE_LINE_SECTION);
+    
+    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.createSectionOrderInput();
+    this.createSectionAddButton();
+  }
+
+  createSectionOrderInput() {
+    const inputObject = this.createInputObject();
+    this._orderInput = this._privateDomUtils.createInput(inputObject);
+  }
+
+  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.createNewSection();
+    })
+    this._orderInput.addEventListener('keypress', (e) => {
+      if (e.keyCode === 13) {
+        this.createNewSection();
+      }
+    })
+  }
+
+  createNewSection() {
+    if (this.checkSectionValidity() === this.IS_VALID) {
+      const line = this.getCurrentLineFromTitle();
+
+      this.updateAddToLocalStorage();
+      this._privateTableUtils.refreshTableData(this.LINE_TABLE_SECTION, line);
+      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;
+    }
+    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;
+  }
+
+  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;
+    }
+
+    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);
+    }
+    else if (this.isAlreadyRegistered() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(this.IS_ALREADY_REGISTERED_ERROR_MESSAGE);
+    }
+  }
+
+  updateAddToLocalStorage() {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+    const line = this.getCurrentLineFromTitle();
+    const station = this.getSelectedStation();
+
+    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;
+  }
+
+  /*
+   * 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);
+    this._privateTableUtils.initTable(this.LINE_TABLE_SECTION);
+  }
+}
\ No newline at end of file
diff --git a/src/manage_station.js b/src/manage_station.js
new file mode 100644
index 000000000..fb6e152b7
--- /dev/null
+++ b/src/manage_station.js
@@ -0,0 +1,150 @@
+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();
+  }
+
+  setConst() {
+    this.ARTICLE_NAME = 'stationArticle';
+
+    this.MENU_TYPE = 'station',
+    this.ADD_TYPE = 'Add',
+    this.DELETE_TYPE = 'Delete',
+
+    this.STATION_INPUT_TITLE_TAG = 'div';
+    this.STATION_INPUT_TITLE_TEXT = '역 이름';
+    this.STATION_LIST_TITLE_TAG = 'h2';
+    this.STATION_LIST_TITLE_TEXT = '🚉 지하철 역 목록';
+
+    this.STATION_INPUT_ID = 'station-name-input';
+    this.ADD_BUTTON_ID = 'station-add-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.IS_VALID = true;
+    this.IS_NOT_VALID = false;
+  }
+
+  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);
+  }
+
+  createStationInput() {
+    const inputObject = this.stationInputObject();
+
+    this._stationInput = this._privateDomUtils.createInput(inputObject);
+  }
+
+  stationInputObject() {
+    const inputObject = {
+      'attribute': 'id',
+      'toIdName': this.ARTICLE_NAME,
+      'idName': this.STATION_INPUT_ID,
+      'placeholder': this.STATION_INPUT_PLACEHOLDER,
+      'type': this.STATION_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() {
+    this._inputValue = this._privateStringUtils.removeSpace(this._stationInput.value);
+    console.log(this._inputValue);
+
+    if (this.checkStationValidity() === this.IS_VALID) {
+      const rowArray = [this._inputValue, this.DELETE_BUTTON_TEXT];
+      
+      this.addToStationList(this._inputValue);
+      this._privateCommonUtils.saveToLocalStorage('stationList', this._stationList);
+      this._privateTableUtils.addRow(rowArray, this.ARTICLE_NAME);
+      this._stationInput.value = '';
+    }
+  }
+
+  checkStationValidity() {
+    if (this.minLength() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(this.MINLENGTH_ERROR_MESSAGE);
+
+      return this.IS_NOT_VALID;
+    }
+
+    if (this.overlap() === this.IS_NOT_VALID) {
+      this._privateCommonUtils.alertError(`"${this._inputValue}"은/는 ` + this.OVERLAP_ERROR_MESSAGE)
+
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  minLength() {
+    if (this._inputValue.length <= 1) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  overlap() {
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+
+    if (this._inputValue in stationList) {
+      return this.IS_NOT_VALID;
+    }
+
+    return this.IS_VALID;
+  }
+
+  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/menu.js b/src/menu.js
new file mode 100644
index 000000000..f3cf8366e
--- /dev/null
+++ b/src/menu.js
@@ -0,0 +1,182 @@
+import DomUtils from './dom_utils.js';
+import StringUtils from './string_utils.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';
+import ManageMapPrint from './manage_map_print.js';
+import ManageSection from './manage_section.js';
+
+export default class Menu {
+  setPrivateVariables() {
+    this._privateDomUtils = new DomUtils();
+    this._privateStringUtils = new StringUtils();
+    this._privateTableUtils = new TableUtils();
+    this._privateCommonUtils = new CommonUtils();
+    this._privateSelectUtils = new SelectUtils();
+  }
+
+  setIdName() {
+    this.APP = 'app';
+    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';
+
+    this.LINE_BUTTON_CLASS = 'line-button'
+  }
+
+  managerButton() {
+    this._managerButton = {
+      'station-manager-button': '1. 역 관리',
+      'line-manager-button': '2. 노선 관리',
+      'section-manager-button': '3. 구간 관리',
+      'map-print-manager-button': '4. 지하철 노선도 출력',
+    }
+  }
+
+  createMenu() {
+    this.setIdName();
+    this.managerButton();
+    this.setPrivateVariables();
+
+    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);
+      this.refreshArticle(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';
+  }
+
+  refreshArticle(articleName) {
+    if (articleName === this.STATION_ARTICLE) {
+      this.refreshStationArticle(articleName);
+    }
+    else if (articleName === this.LINE_ARTICLE) {
+      this.refreshLineArticle(articleName);
+    }
+    else if (articleName === this.SECTION_ARTICLE) {
+      this.refreshSectionArticle();
+    }
+    else if (articleName === this.MAP_PRINT_ARTICLE) {
+      this.refreshMapPrint(articleName);
+    }
+  }
+
+  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);  
+  }
+
+  refreshSectionArticle() {
+    this.findInputAndEmpty('section-order-input');
+    this.refreshSectionLineButtons();
+    this.refreshStationsSelector();
+  }
+
+  findInputAndEmpty(idName) {
+    const input = document.getElementById(idName)
+    this._privateCommonUtils.emptyInput(input);
+  }
+
+  refreshSectionLineButtons() {
+    this.removeButtons();
+    
+    const manageSection = new ManageSection();
+
+    manageSection.createLineButtons();
+    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
+
+    for (let i = 0; i < len; i++) {
+      document.querySelector(`.${this.LINE_BUTTON_CLASS}`).remove();
+    }
+  }
+
+  refreshMapPrint(articleName) {
+    const manageMapPrint = new ManageMapPrint();
+
+    manageMapPrint.emptyArticle(articleName);
+    manageMapPrint.displayMapPrint(articleName, this._privateCommonUtils);
+  }
+
+
+
+}
\ No newline at end of file
diff --git a/src/select_utils.js b/src/select_utils.js
new file mode 100644
index 000000000..7b5b0c89a
--- /dev/null
+++ b/src/select_utils.js
@@ -0,0 +1,65 @@
+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._privateCommonUtils.insertEmptyline(articleName);
+    this.createSelectStation('end', articleName);
+    this._privateCommonUtils.insertEmptyline(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`], this._privateCommonUtils, this._privateDomUtils);
+  }
+
+  createSelect(toIdName, idName, commonUtils, domUtils) {
+    const select = document.createElement('SELECT');
+
+    domUtils.setAttribute('id', select, idName);
+    domUtils.appendToIdName(toIdName, select);
+    this.addStationsToSelect(select, commonUtils, domUtils);
+
+    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/string_utils.js b/src/string_utils.js
new file mode 100644
index 000000000..b1365ec67
--- /dev/null
+++ b/src/string_utils.js
@@ -0,0 +1,40 @@
+export default class StringUtils {
+  removeSpace(inputValue) {
+    return inputValue.split(' ').join('');
+  }
+
+  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
diff --git a/src/table_utils.js b/src/table_utils.js
new file mode 100644
index 000000000..4d082da69
--- /dev/null
+++ b/src/table_utils.js
@@ -0,0 +1,397 @@
+import DomUtils from './dom_utils.js';
+import CommonUtils from './common_utils.js';
+import ManageSection from './manage_section.js';
+
+export default class TableUtils {
+  constructor() {
+    this.setPrivateVariable();
+    this.setTableType();
+    this.setConst();
+  }
+
+  setPrivateVariable() {
+    this._privateDomUtils = new DomUtils();
+    this._privateCommonUtils = new CommonUtils();
+  }
+
+  setTableType() {
+    this._tableType = {
+      stationArticle: ['역 이름', '설정'],
+      lineArticle: ['노선 이름', '상행 종점역', '하행 종점역', '설정'],
+      sectionManageArea: ['순서', '이름', '설정'],
+    }
+  }
+
+  setConst() {
+    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;
+
+    this.STATION_DELETE_ERROR_MESSAGE = '노선에 등록되어 있는 역은 삭제할 수 없습니다.';
+    this.SECTION_DELETE_ERROR_MESSAGE = '더 이상 이 노선에서 역을 제거할 수 없습니다. 노선에 등록된 역이 두개 이하일 때는 역을 제거할 수 없습니다.'
+
+    this.STATION_TABLE_NAME = 'stationArticleTable';
+    this.LINE_TABLE_NAME = 'lineArticleTable';
+    this.SECTION_TABLE_NAME = 'sectionManageAreaTable';
+  }
+
+  initTable(toIdName) {
+    const table = document.createElement('table');
+
+    this._privateDomUtils.setAttribute(this.ID_ATTRIBUTE, table, `${toIdName}Table`);
+    this.addTableStyle(table);
+    this.createTitleRow(table, toIdName);
+    this._privateDomUtils.appendToIdName(toIdName, table);
+    this.initTableData(toIdName);
+  }
+
+  initTableData(toIdName) {
+    if (toIdName === 'stationArticle') {
+      this.initStationTableData(toIdName);
+    }
+    else if (toIdName === 'lineArticle') {
+      this.initLineTableData(toIdName);
+    }
+  }
+
+  initStationTableData(articleName) {
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+
+    for (const station in stationList) {
+      const rowArray = [station, this.STATION_DELETE_BUTTON_TEXT];
+      this.addRow(rowArray, articleName);
+    }
+  }
+
+  initLineTableData(articleName) {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+
+    for (const line in lineList) {
+      const lineLen = lineList[line].length;
+      const rowArray = [line, lineList[line][0], lineList[line][lineLen - 1], this.LINE_DELETE_BUTTON_TEXT];
+      this.addRow(rowArray, articleName);
+    }
+  }
+
+  refreshTableData(toIdName, line) {
+    this.emptyTableData(toIdName);
+    if (toIdName === 'lineArticle') {
+      this.initLineTableData(toIdName);
+    }
+    else if (toIdName === 'sectionManageArea') {
+      this.initSectionTable(toIdName, 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 = rowCount - 1; i > 0; i--) {
+      table.deleteRow(i);
+    }
+  }
+
+  initSectionTable(toIdName, line) {
+    const lineList = this._privateCommonUtils.getLocalStorageLine();
+    const stationList = this._privateCommonUtils.getLocalStorageStation();
+
+    for (const index in lineList[line]) {
+      const rowArray = [index, lineList[line][index], this.SECTION_DELETE_BUTTON_TEXT, line];
+      this.addRow(rowArray, toIdName);
+    }
+  }
+
+  addTableStyle(table) {
+    table.style.border = '1px solid black';
+  }
+
+  createTitleRow(table, tableType) {
+    const titleRow = table.insertRow(0);
+
+    this._tableType[tableType].forEach((text, i) => {
+      const cell = this.addCell(titleRow, i);
+      this.addTitleCellStyle(cell, text);
+   })
+  }
+
+  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';
+  }
+
+  addRow(rowArray, tableType) {
+    const table = document.getElementById(`${tableType}Table`);
+    const row = table.insertRow();
+
+    this._privateDomUtils.addDataAttribute(row, rowArray);
+    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;
+  }
+  
+  addCellBorder(cell) {
+    cell.style.border = '1px solid black';
+  }
+
+  addCellsAndButton(tableType, row, rowArray) {
+    this._tableType[tableType].forEach((v, i) => {
+      const typeUpper = this.getType(tableType).toUpperCase();
+
+      if (i !== 3 || rowArray[i] === this.LINE_DELETE_BUTTON_TEXT) {
+        const cell = row.insertCell(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();
+
+    this._privateDomUtils.addDataAttribute(deleteButton, rowArray);
+    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, type);
+  }
+
+  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);
+    }
+    else if (type === 'section') {
+      this.addEventToSectionDeleteButton(deleteButton);
+    }
+  }
+
+  addEventToStationDeleteButton(button) {
+    button.addEventListener('click', () => {
+      if (this.ifOkay() === this.IS_VALID) {
+        this.checkStationDeleteValidity(button);
+      }
+    });
+  }
+
+  addEventToLineDeleteButton(button) {
+    button.addEventListener('click', () => {
+      if (this.ifOkay() === this.IS_VALID) {
+        this.deleteRowAndData(button);
+      }
+    })
+  }
+
+  addEventToSectionDeleteButton(button) {
+    button.addEventListener('click', () => {
+      if (this.ifOkay() === this.IS_VALID) {
+        this.checkSectionDeleteValidity(button);
+      }
+    })
+  }
+
+  ifOkay() {
+    if (confirm('정말로 삭제하시겠습니까?')) {
+      return this.IS_VALID;
+    }
+    else {
+      return this.IS_NOT_VALID;
+    }
+  }
+
+  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);
+      this.refreshSectionTable(button);
+    }
+    else {
+      this._privateCommonUtils.alertError(this.SECTION_DELETE_ERROR_MESSAGE);
+    }
+  }
+
+  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;
+  }
+
+  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 = 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();
+
+    if (this.checkTableId(button) === this.STATION_TABLE_NAME) {
+      this.updateStationDelete(stationList, datasetArray);
+    }
+    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) {
+    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);
+  }
+
+  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;
+  }
+
+  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);
+
+    return array;
+  }
+
+  deleteTableRow(row) {
+    row.remove();
+  }
+}
\ No newline at end of file