From cb103255cf0c22e1e977ac787c17c377fa2eed4d Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Thu, 10 Dec 2020 01:14:27 +0900
Subject: [PATCH 01/28] =?UTF-8?q?docs=20:=20=EA=B8=B0=EB=8A=A5=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/README.md | 147 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 docs/README.md

diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 000000000..721e2bc50
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,147 @@
+# 🚇 지하철 노선도 미션
+
+## 📌 프로젝트 개요
+
+지하철 노선도 미션은 지하철 노선도를 관리할 수 있는 프로젝트입니다. 프로그램 상단에는 총 4가지의 메뉴로 `1. 역 관리`, `2. 노선 관리`, `3. 구간 관리`, `4. 지하철 노선도 출력` 가 있습니다. `1. 역 관리`, `2. 노선 관리`, `3. 구간 관리` 메뉴는 각각 지하철 역, 지하철 노선, 지하철 구간을 등록(추가) 하거나 삭제, 조회하는 기능을 가지고 있으며, `4. 지하철 노선도 출력` 메뉴는 지하철 노선도를 보여주는 기능을 합니다.
+
+## 🚀 기능 요구 사항
+
+### 1.1 주어진 요구 사항
+
+##### 지하철 역 관련 기능
+
+- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
+- 중복된 지하철 역 이름이 등록될 수 없다.
+- 지하철 역은 2글자 이상이어야 한다.
+- 지하철 역의 목록을 조회할 수 있다.
+
+##### 지하철 노선 관련 기능
+- 지하철 노선을 등록하고 삭제할 수 있다.
+- 중복된 지하철 노선 이름이 등록될 수 없다.
+- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
+- 지하철 노선의 목록을 조회할 수 있다.
+
+##### 지하철 구간 추가 기능
+- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
+- 하나의 역은 여러개의 노선에 추가될 수 있다.
+- 역과 역 사이에 새로운 역이 추가 될 수 있다.
+- 노선에서 갈래길은 생길 수 없다.
+
+##### 지하철 구간 삭제 기능
+- 노선에 등록된 역을 제거할 수 있다.
+- 종점을 제거할 경우 다음 역이 종점이 된다.
+- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
+
+##### 지하철 노선에 등록된 역 조회 기능
+- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
+
+### 1.2 기능 목록
+
+- `1. 역 관리`, `2. 노선 관리`, `3. 구간 관리`, `4. 지하철 노선 출력` 버튼을 누르면 관련 화면을 출력한다.
+
+- 역 관리
+  - 추가
+    - 사용자가 입력한 역 이름은 2글자 이상인지 검증해야 한다.
+      - 중복된 역 이름은 등록할 수 없다.
+      - 한글만 가능하다. (공백이 포함된 경우, 입력값이 없는 경우, 알파벳인 경우, 특수 문자인 경우 확인)
+  - 삭제
+    - 지하철 역 목록에서 역을 삭제할 수 있다.
+      - `alert`를 통해 다시 물어본다.
+  - 역의 목록을  조회한다.
+- 노선 관리
+  - 추가
+    - 사용자가 입력한 노선 이름을 검증한다.
+      - 중복된 노선 이름은 등록할 수 없다.
+      - 숫자와 알파벳 문자만 가능하다. (공백이 포함된 경우, 입력값이 없는 경우 확인)
+    - 상행 종점과 하행 종점 목록을 역 목록에서 가져온다.
+    - 노선의 이름이 다르면 상행 종점과 하행 종점이 중복될 수 있다. (고민)
+  - 삭제
+    - 지하철 노선 목록에서 노선을 삭제할 수 있다.
+      - `alert`를 통해 다시 물어본다.
+  - 노선 목록을 조회한다.
+- 구간 관리
+  - 구간을 수정할 노선을 선택하면 관련 화면을 출력한다.
+  - 등록(추가)
+    - 사용자가 입력한 역의 이름과 순서를 검증한다.
+      - 중복된 역 이름은 등록할 수 없다.
+      - 역과 역 사이(구간)만 추가할 수 있다. (상행 종점이나 하행 종점 추가는 불가능)
+  - 삭제
+    - 노선에 등록된 역을 제거할 수 있다.
+      - `alert`를 통해 다시 물어본다.
+      - 노선에 등록된 역이 두 개 이하일 때는 역을 제거할 수 없다.
+  - 노선의 구간 목록을 조회한다.
+- 지하철 노선도 관리
+  - 각 노선의 역들을 출력한다.
+
+<br/>
+
+
+## ✅ 비기능 요구사항
+
+### 2.1 속성 태그 요구사항
+
+##### 메뉴 버튼
+
+- 역 관리 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>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
+
+### 2.2 프로그래밍 요구사항
+
+##### 기존 요구사항
+
+- 사용자가 잘못된 입력 값을 작성한 경우 `alert`을 이용해 메시지를 보여주고, 재입력할 수 있게 한다.
+- 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않고, 순수 Vanilla JS로만 구현한다.
+- **자바스크립트 코드 컨벤션을 지키면서 프로그래밍** 한다
+- **indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용**한다.
+- **함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.**
+  - 함수(또는 메소드)가 한 가지 일만 잘 하도록 구현한다.
+- 변수 선언시 `var` 를 사용하지 않는다. `const` 와 `let` 을 사용한다.
+- `import` 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.
+- `template literal`을 이용해 데이터와 html string을 가독성 좋게 표현한다.
+
+#### 추가된 요구사항
+- [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)를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.
+
+## 💻 프로그램 실행 결과
+
+### 역관리
+
+![img](file:///Users/hanjunmo/Desktop/javascript-subway-map-precourse/images/station_manager.gif?lastModify=1607501706)
+
+### 노선관리
+
+![img](file:///Users/hanjunmo/Desktop/javascript-subway-map-precourse/images/line_manager.gif?lastModify=1607501706)
+
+### 구간관리
+
+![img](file:///Users/hanjunmo/Desktop/javascript-subway-map-precourse/images/section_manager.gif?lastModify=1607501706)
+
+### 노선도 출력
+
+![img](file:///Users/hanjunmo/Desktop/javascript-subway-map-precourse/images/map_print_manager.gif?lastModify=1607501706)
\ No newline at end of file

From 5e9bad28c922c3a66414d0c42ab0ff116dda77a7 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Thu, 10 Dec 2020 01:53:38 +0900
Subject: [PATCH 02/28] =?UTF-8?q?etc=20:=20eslint,=20prettier=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslinrc.json | 16 ++++++++++++++++
 .prettierrc   |  7 +++++++
 2 files changed, 23 insertions(+)
 create mode 100644 .eslinrc.json
 create mode 100644 .prettierrc

diff --git a/.eslinrc.json b/.eslinrc.json
new file mode 100644
index 000000000..984c2dc7b
--- /dev/null
+++ b/.eslinrc.json
@@ -0,0 +1,16 @@
+{
+  "plugins": ["prettier"],
+  "extends": ["eslint:recommended", "google", "plugin:prettier/recommended"],
+  "rules": {
+    "prettier/prettier": "error"
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es2020": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  }
+}
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..598d33228
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "bracketSpacing": true,
+  "printWidth": 80
+}

From 68eccc7a1707ff13c93d5afaf6d649020ab14230 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Sat, 12 Dec 2020 20:00:07 +0900
Subject: [PATCH 03/28] =?UTF-8?q?feat=20:=20=EC=97=AD=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?,=20=EB=85=B8=EC=84=A0=20=EA=B4=80=EB=A6=AC,=20=EA=B5=AC?=
 =?UTF-8?q?=EA=B0=84=20=EA=B4=80=EB=A6=AC,=20=EC=A7=80=ED=95=98=EC=B2=A0?=
 =?UTF-8?q?=20=EB=85=B8=EC=84=A0=20=EC=B6=9C=EB=A0=A5=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=EC=9D=84=20=EB=88=84=EB=A5=B4=EB=A9=B4=20=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=EC=9D=84=20=EC=B6=9C=EB=A0=A5=ED=95=9C?=
 =?UTF-8?q?=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html           | 98 +++++++++++++++++++++++++++++++++++++++++++-
 src/index.js         | 28 +++++++++++++
 src/util/constant.js | 18 ++++++++
 src/view/element.js  | 44 ++++++++++++++++++++
 style.css            | 42 +++++++++++++++++++
 5 files changed, 229 insertions(+), 1 deletion(-)
 create mode 100644 src/util/constant.js
 create mode 100644 src/view/element.js
 create mode 100644 style.css

diff --git a/index.html b/index.html
index fc99deac2..57c126192 100644
--- a/index.html
+++ b/index.html
@@ -2,12 +2,108 @@
 <html lang="kr">
   <head>
     <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./style.css" />
     <title>지하철 노선도 관리</title>
   </head>
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <h1>🚇 지하철 노선도 관리</h1>
+      <button id="station-manager-button">1. 역 관리</button>
+      <button id="line-manager-button">2. 노선 관리</button>
+      <button id="section-manager-button">3. 구간 관리</button>
+      <button id="map-print-manager-button">4.지하철 노선도 출력</button>
     </div>
+
+    <!-- 1. 역 관리 -->
+    <div class="station-container">
+      <div>
+        <label>역 이름</label>
+      </div>
+      <input
+        type="text"
+        id="station-name-input"
+        placeholder="역 이름을 입력해주세요."
+      />
+      <button id="station-add-button">역 추가</button>
+
+      <h2>🚉 지하철 역 목록</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>역 이름</th>
+            <th>설정</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </div>
+
+    <!-- 2. 노선 관리 -->
+    <div class="line-container">
+      <div>
+        <label>노선 이름</label>
+      </div>
+      <input id="line-name-input" placeholder="노선 이름을 입력해주세요." />
+      <div id="line-start-end-station">
+        <div>
+          <label for="line-start-station-selector">상행 종점</label>
+          <select id="line-start-station-selector"></select>
+        </div>
+        <div>
+          <label for="line-end-station-selector">하행 종점</label>
+          <select id="line-end-station-selector"></select>
+        </div>
+      </div>
+      <button id="line-add-button">노선 추가</button>
+
+      <h2>🚉 지하철 노선 목록</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>노선 이름</th>
+            <th>상행 종점역</th>
+            <th>하행 종점역</th>
+            <th>설정</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </div>
+
+    <!-- 3. 구간 관리 -->
+    <div class="section-container">
+      <h3>구간을 수정할 노선을 선택해주세요.</h3>
+      <div class="section-line-menu">
+        <!-- 예시 -->
+        <button class="section-line-menu-button">1호선</button>
+        <button class="section-line-menu-button">2호선</button>
+      </div>
+
+      <div class="section-manager">
+        <h3 class="section-manager-title">1호선 관리</h3>
+        <h4>구간 등록</h4>
+        <select id="section-station-selector"></select>
+        <input id="section-order-input" placeholder="순서" />
+        <button id="section-add-button">등록</button>
+      </div>
+      <table id="section-table">
+        <thead>
+          <tr>
+            <th>순서</th>
+            <th>이름</th>
+            <th>설정</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </div>
+
+    <!-- 4. 지하철 노선도 출력 -->
+    <div class="map-print-container">
+      <!-- test -->
+      <label>map-print-container</label>
+    </div>
+
     <script type="module" src="src/index.js"></script>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
index e69de29bb..03d1249cd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,28 @@
+import { CONSTANT } from "./util/constant.js";
+import { element, elementControl } from "./view/element.js";
+
+export default class SubwayManager {
+  constructor() {
+    this.setEventListener();
+  }
+
+  setEventListener() {
+    element.stationManagerButton.addEventListener(CONSTANT.CLICK, () => {
+      elementControl.showStataionManger();
+    });
+
+    element.lineManagerButton.addEventListener(CONSTANT.CLICK, () => {
+      elementControl.showLineManager();
+    });
+
+    element.sectionManagerButton.addEventListener(CONSTANT.CLICK, () => {
+      elementControl.showSectionManager();
+    });
+
+    element.mapPrintManagerButton.addEventListener(CONSTANT.CLICK, () => {
+      elementControl.showMapPrintManager();
+    });
+  }
+}
+
+new SubwayManager();
diff --git a/src/util/constant.js b/src/util/constant.js
new file mode 100644
index 000000000..bba293049
--- /dev/null
+++ b/src/util/constant.js
@@ -0,0 +1,18 @@
+export const CONSTANT = {
+  // querySelector
+  STATION_MANAGER_BTN_ID: "#station-manager-button",
+  LINE_MANAGER_BTN_ID: "#line-manager-button",
+  SECTION_MANAGER_BTN_ID: "#section-manager-button",
+  MAP_PRINT_MANAGER_BTN_ID: "#map-print-manager-button",
+
+  STATION_CONTAINER_CLASS: ".station-container",
+  LINE_CONTAINER_CLASS: ".line-container",
+  SECTION_CONTAINER_CLASS: ".section-container",
+  MAP_PRINT_CONTAINER_CLASS: ".map-print-container",
+
+  // etc
+  CLICK: "click",
+  NONE: "none",
+  BLOCK: "block",
+  ZERO_MARGIN: 0,
+};
diff --git a/src/view/element.js b/src/view/element.js
new file mode 100644
index 000000000..fcf3b7717
--- /dev/null
+++ b/src/view/element.js
@@ -0,0 +1,44 @@
+import { CONSTANT } from "../util/constant.js";
+
+export const element = {
+  stationManagerButton: document.querySelector(CONSTANT.STATION_MANAGER_BTN_ID),
+  lineManagerButton: document.querySelector(CONSTANT.LINE_MANAGER_BTN_ID),
+  sectionManagerButton: document.querySelector(CONSTANT.SECTION_MANAGER_BTN_ID),
+  mapPrintManagerButton: document.querySelector(
+    CONSTANT.MAP_PRINT_MANAGER_BTN_ID
+  ),
+
+  stationContainer: document.querySelector(CONSTANT.STATION_CONTAINER_CLASS),
+  lineContainer: document.querySelector(CONSTANT.LINE_CONTAINER_CLASS),
+  sectionContainer: document.querySelector(CONSTANT.SECTION_CONTAINER_CLASS),
+  mapPrintContainer: document.querySelector(CONSTANT.MAP_PRINT_CONTAINER_CLASS),
+};
+
+export const elementControl = {
+  hideAllManagers() {
+    element.stationContainer.style.display = CONSTANT.NONE;
+    element.lineContainer.style.display = CONSTANT.NONE;
+    element.sectionContainer.style.display = CONSTANT.NONE;
+    element.mapPrintContainer.style.display = CONSTANT.NONE;
+  },
+
+  showStataionManger() {
+    this.hideAllManagers();
+    element.stationContainer.style.display = CONSTANT.BLOCK;
+  },
+
+  showLineManager() {
+    this.hideAllManagers();
+    element.lineContainer.style.display = CONSTANT.BLOCK;
+  },
+
+  showSectionManager() {
+    this.hideAllManagers();
+    element.sectionContainer.style.display = CONSTANT.BLOCK;
+  },
+
+  showMapPrintManager() {
+    this.hideAllManagers();
+    element.mapPrintContainer.style.display = CONSTANT.BLOCK;
+  },
+};
diff --git a/style.css b/style.css
new file mode 100644
index 000000000..58c26e40d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,42 @@
+/* table */
+table {
+  border: 1px solid gray;
+}
+
+th,
+td {
+  border: 1px solid gray;
+}
+
+/* 역 관리 */
+.station-container {
+  padding-top: 20px;
+  display: none;
+}
+
+/* 노선 관리 */
+.line-container {
+  padding-top: 20px;
+  display: none;
+}
+
+#line-start-end-station {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+/* 구간 관리 */
+.section-container {
+  padding-top: 20px;
+  display: none;
+}
+
+#section-table {
+  margin-top: 40px;
+}
+
+/* 지하철 노선도 관리 */
+.map-print-container {
+  padding-top: 20px;
+  display: none;
+}

From d3db37c761c719f4f049b33b1b7e58db21d57af9 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Sat, 12 Dec 2020 22:09:51 +0900
Subject: [PATCH 04/28] =?UTF-8?q?docs=20:=20=EA=B8=B0=EB=8A=A5=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md      |  20 +++++++--
 docs/README.md | 110 ++++++++++++++++++++++++++-----------------------
 2 files changed, 75 insertions(+), 55 deletions(-)

diff --git a/README.md b/README.md
index e97a1d649..eafa0409f 100644
--- a/README.md
+++ b/README.md
@@ -3,20 +3,23 @@
 ## 🚀 기능 요구사항
 
 ### 지하철 역 관련 기능
+
 - 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
 - 중복된 지하철 역 이름이 등록될 수 없다.
 - 지하철 역은 2글자 이상이어야 한다.
 - 지하철 역의 목록을 조회할 수 있다.
 
 ### 지하철 노선 관련 기능
+
 - 지하철 노선을 등록하고 삭제할 수 있다.
 - 중복된 지하철 노선 이름이 등록될 수 없다.
 - 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
 - 지하철 노선의 목록을 조회할 수 있다.
 
 ### 지하철 구간 추가 기능
+
 - 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.
 - 하나의 역은 여러개의 노선에 추가될 수 있다.
 - 역과 역 사이에 새로운 역이 추가 될 수 있다.
 - 노선에서 갈래길은 생길 수 없다.
@@ -24,6 +27,7 @@
 <img width="500" src="/images/section1.png">
 
 ### 지하철 구간 삭제 기능
+
 - 노선에 등록된 역을 제거할 수 있다.
 - 종점을 제거할 경우 다음 역이 종점이 된다.
 - 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
@@ -31,6 +35,7 @@
 <img width="500" src="/images/section2.png">
 
 ### 지하철 노선에 등록된 역 조회 기능
+
 - 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
 
 <br/>
@@ -38,32 +43,38 @@
 ## 💻 프로그램 실행 결과
 
 ### 역관리
+
 <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">
 
+<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값을 가진다.
@@ -71,6 +82,7 @@
 - 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
 
 ### 지하철 구간 추가 기능
+
 - 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
 - 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
 - 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
@@ -78,6 +90,7 @@
 - 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
 
 ### 지하철 노선도 출력 기능
+
 - 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
 
 ### 기존 요구사항
@@ -101,7 +114,8 @@
   - [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 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다. 
+
+- [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/>
diff --git a/docs/README.md b/docs/README.md
index 721e2bc50..2f307741f 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -16,99 +16,104 @@
 - 지하철 역의 목록을 조회할 수 있다.
 
 ##### 지하철 노선 관련 기능
+
 - 지하철 노선을 등록하고 삭제할 수 있다.
 - 중복된 지하철 노선 이름이 등록될 수 없다.
 - 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
 - 지하철 노선의 목록을 조회할 수 있다.
 
 ##### 지하철 구간 추가 기능
+
 - 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.
 - 하나의 역은 여러개의 노선에 추가될 수 있다.
 - 역과 역 사이에 새로운 역이 추가 될 수 있다.
 - 노선에서 갈래길은 생길 수 없다.
 
 ##### 지하철 구간 삭제 기능
+
 - 노선에 등록된 역을 제거할 수 있다.
 - 종점을 제거할 경우 다음 역이 종점이 된다.
 - 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
 
 ##### 지하철 노선에 등록된 역 조회 기능
+
 - 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
 
 ### 1.2 기능 목록
 
 - `1. 역 관리`, `2. 노선 관리`, `3. 구간 관리`, `4. 지하철 노선 출력` 버튼을 누르면 관련 화면을 출력한다.
-
 - 역 관리
-  - 추가
-    - 사용자가 입력한 역 이름은 2글자 이상인지 검증해야 한다.
-      - 중복된 역 이름은 등록할 수 없다.
-      - 한글만 가능하다. (공백이 포함된 경우, 입력값이 없는 경우, 알파벳인 경우, 특수 문자인 경우 확인)
-  - 삭제
-    - 지하철 역 목록에서 역을 삭제할 수 있다.
-      - `alert`를 통해 다시 물어본다.
-  - 역의 목록을  조회한다.
+  - `역 추가` 버튼을 눌러 역을 추가한다.
+    - 입력한 역 이름이 2글자 이상인지 검증해야 한다.
+    - 입력한 역 이름이 중복인지 검증해야 한다.
+    - 지하철 역 목록에 반영한다.
+  - `삭제` 버튼을 눌러 역을 삭제한다.
+    - `alert`를 통해 다시 물어본다.
+    - 지하철 역 목록에 반영한다.
 - 노선 관리
-  - 추가
-    - 사용자가 입력한 노선 이름을 검증한다.
-      - 중복된 노선 이름은 등록할 수 없다.
-      - 숫자와 알파벳 문자만 가능하다. (공백이 포함된 경우, 입력값이 없는 경우 확인)
+  - `노선 추가` 버튼을 눌러 노선을 추가한다.
     - 상행 종점과 하행 종점 목록을 역 목록에서 가져온다.
+    - 입력한 노선 이름이 중복인지 검증해야 한다.
     - 노선의 이름이 다르면 상행 종점과 하행 종점이 중복될 수 있다. (고민)
-  - 삭제
-    - 지하철 노선 목록에서 노선을 삭제할 수 있다.
-      - `alert`를 통해 다시 물어본다.
-  - 노선 목록을 조회한다.
+    - 노선 목록에 반영한다.
+  - `삭제` 버튼을 눌러 노선을 삭제한다.
+    - `alert`를 통해 다시 물어본다.
+    - 노선 목록에 반영한다.
 - 구간 관리
-  - 구간을 수정할 노선을 선택하면 관련 화면을 출력한다.
-  - 등록(추가)
-    - 사용자가 입력한 역의 이름과 순서를 검증한다.
-      - 중복된 역 이름은 등록할 수 없다.
-      - 역과 역 사이(구간)만 추가할 수 있다. (상행 종점이나 하행 종점 추가는 불가능)
-  - 삭제
-    - 노선에 등록된 역을 제거할 수 있다.
-      - `alert`를 통해 다시 물어본다.
-      - 노선에 등록된 역이 두 개 이하일 때는 역을 제거할 수 없다.
-  - 노선의 구간 목록을 조회한다.
+  - 구간을 수정할 노선의 목록을 버튼으로 출력한다.
+  - 노선을 선택하면 관련 화면을 출력한다.
+    - 제목은 `(선택된 노선) 관리`를 출력한다.
+  - `등록` 버튼을 눌러 구간을 추가한다.
+    - 입력한 역의 이름과 순서를 검증해야 한다.
+    - 입력한 역의 이름이 중복인지 검증해야 한다.
+    - 역과 역 사이(구간)인지 검증해야 한다.
+    - 구간 목록에 반영한다.
+  - `노선에서 제거` 버튼을 눌러 구간을 삭제한다.
+    - 노선에 등록된 역이 두 개 이하인지 검증해야 한다. (두 개 이하인 경우에는 삭제 불가)
+    - `alert`를 통해 다시 물어본다.
+    - 구간 목록에 반영한다.
 - 지하철 노선도 관리
   - 각 노선의 역들을 출력한다.
 
 <br/>
 
-
 ## ✅ 비기능 요구사항
 
 ### 2.1 속성 태그 요구사항
 
 ##### 메뉴 버튼
 
-- 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
-- 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
-- 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
-- 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
+- [x] 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
+- [x] 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
+- [x] 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
+- [x] 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
 
 ##### 지하철 역 관련 기능
-- 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
-- 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
-- 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
+
+- [x] 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
+- [x] 지하철 역을 추가하는 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값을 가진다.
+
+- [x] 지하철 노선의 이름을 입력하는 input 태그는 `#line-name-input` id값을 가진다.
+- [x] 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
+- [x] 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
+- [x] 지하철 노선을 추가하는 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값을 가진다.
+
+- [ ] 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
+- [x] 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
+- [x] 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
+- [x] 지하철 구간을 등록하는 button 태그는 `#section-add-button` id값을 가진다.
+- [ ] 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
 
 ##### 지하철 노선도 출력 기능
-- 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
+
+- [ ] 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
 
 ### 2.2 프로그래밍 요구사항
 
@@ -125,23 +130,24 @@
 - `template literal`을 이용해 데이터와 html string을 가독성 좋게 표현한다.
 
 #### 추가된 요구사항
-- [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 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다. 
+
+- [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)를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.
 
 ## 💻 프로그램 실행 결과
 
 ### 역관리
 
-![img](file:///Users/hanjunmo/Desktop/javascript-subway-map-precourse/images/station_manager.gif?lastModify=1607501706)
+<img width="100%" src="../images/station_manager.gif">
 
 ### 노선관리
 
-![img](file:///Users/hanjunmo/Desktop/javascript-subway-map-precourse/images/line_manager.gif?lastModify=1607501706)
+<img width="100%" src="../images/line_manager.gif">
 
 ### 구간관리
 
-![img](file:///Users/hanjunmo/Desktop/javascript-subway-map-precourse/images/section_manager.gif?lastModify=1607501706)
+<img width="100%" src="../images/section_manager.gif">
 
 ### 노선도 출력
 
-![img](file:///Users/hanjunmo/Desktop/javascript-subway-map-precourse/images/map_print_manager.gif?lastModify=1607501706)
\ No newline at end of file
+<img width="100%" src="../images/map_print_manager.gif">

From b5f5d6e5a8bd8c0dcfd738f2a0724a814cad0747 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Mon, 14 Dec 2020 04:35:38 +0900
Subject: [PATCH 05/28] =?UTF-8?q?feat=20:=20=EC=97=AD=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=EB=88=8C=EB=9F=AC=20=EC=97=AD?=
 =?UTF-8?q?=EC=9D=84=20=EC=B6=94=EA=B0=80=ED=95=9C=EB=8B=A4=20-=20?=
 =?UTF-8?q?=EA=B2=80=EC=A6=9D=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/controller/station-manager.js | 33 ++++++++++++++++++++
 src/index.js                      | 42 ++++++++++++-------------
 src/model/station.js              |  5 +++
 src/util/constant.js              | 18 +++++++++--
 src/util/validation.js            | 33 ++++++++++++++++++++
 src/view/element.js               | 52 ++++++++++++++++++++-----------
 src/view/station-view.js          |  3 ++
 7 files changed, 142 insertions(+), 44 deletions(-)
 create mode 100644 src/controller/station-manager.js
 create mode 100644 src/model/station.js
 create mode 100644 src/util/validation.js
 create mode 100644 src/view/station-view.js

diff --git a/src/controller/station-manager.js b/src/controller/station-manager.js
new file mode 100644
index 000000000..b3dde6d6b
--- /dev/null
+++ b/src/controller/station-manager.js
@@ -0,0 +1,33 @@
+import { Station } from "../model/station.js";
+import { Constant } from "../util/constant.js";
+import { StationValidation } from "../util/validation.js";
+import { Element, ElementControl } from "../view/element.js";
+
+export const StationManager = {
+  isVisited: false,
+
+  init() {
+    this.isVisited = true;
+    this.setEventListener();
+  },
+
+  setEventListener() {
+    // 추가
+    Element.stationAddButton.addEventListener(Constant.CLICK, () => {
+      this.onClickAddBtn();
+    });
+
+    // 삭제
+  },
+
+  onClickAddBtn() {
+    const name = Element.stationNameInput.value;
+
+    if (StationValidation.isValidStation(name)) {
+      // Station.add()
+    }
+    ElementControl.clearInput(Element.stationNameInput);
+  },
+
+  onClickRemoveBtn() { },
+};
diff --git a/src/index.js b/src/index.js
index 03d1249cd..c08c7ffd0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,28 +1,26 @@
-import { CONSTANT } from "./util/constant.js";
-import { element, elementControl } from "./view/element.js";
+import { Constant } from "./util/constant.js";
+import { Element, ElementControl } from "./view/element.js";
 
-export default class SubwayManager {
-  constructor() {
-    this.setEventListener();
-  }
+const App = () => {
+  SubwayManager();
+};
 
-  setEventListener() {
-    element.stationManagerButton.addEventListener(CONSTANT.CLICK, () => {
-      elementControl.showStataionManger();
-    });
+const SubwayManager = () => {
+  Element.stationManagerButton.addEventListener(Constant.CLICK, () => {
+    ElementControl.showStataionManger();
+  });
 
-    element.lineManagerButton.addEventListener(CONSTANT.CLICK, () => {
-      elementControl.showLineManager();
-    });
+  Element.lineManagerButton.addEventListener(Constant.CLICK, () => {
+    ElementControl.showLineManager();
+  });
 
-    element.sectionManagerButton.addEventListener(CONSTANT.CLICK, () => {
-      elementControl.showSectionManager();
-    });
+  Element.sectionManagerButton.addEventListener(Constant.CLICK, () => {
+    ElementControl.showSectionManager();
+  });
 
-    element.mapPrintManagerButton.addEventListener(CONSTANT.CLICK, () => {
-      elementControl.showMapPrintManager();
-    });
-  }
-}
+  Element.mapPrintManagerButton.addEventListener(Constant.CLICK, () => {
+    ElementControl.showMapPrintManager();
+  });
+};
 
-new SubwayManager();
+App();
diff --git a/src/model/station.js b/src/model/station.js
new file mode 100644
index 000000000..ea887325e
--- /dev/null
+++ b/src/model/station.js
@@ -0,0 +1,5 @@
+export const Station = {
+  stations: ["양재", "잠실"],
+
+  add(name) { },
+};
\ No newline at end of file
diff --git a/src/util/constant.js b/src/util/constant.js
index bba293049..fb06d541d 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -1,18 +1,30 @@
-export const CONSTANT = {
-  // querySelector
+export const Constant = {
+  // 초기 화면 버튼
   STATION_MANAGER_BTN_ID: "#station-manager-button",
   LINE_MANAGER_BTN_ID: "#line-manager-button",
   SECTION_MANAGER_BTN_ID: "#section-manager-button",
   MAP_PRINT_MANAGER_BTN_ID: "#map-print-manager-button",
 
+  // 각 화면 container
   STATION_CONTAINER_CLASS: ".station-container",
   LINE_CONTAINER_CLASS: ".line-container",
   SECTION_CONTAINER_CLASS: ".section-container",
   MAP_PRINT_CONTAINER_CLASS: ".map-print-container",
 
+  // 역 관리
+  STATION_ADD_BUTTON_ID: "#station-add-button",
+  STATION_NAME_INPUT_ID: "#station-name-input",
+
+  MINIMUM_NAME_LENGTH: 2,
+  REGEX_CATCHING_WHITESPACE: /^\s*$/,
+
   // etc
   CLICK: "click",
   NONE: "none",
   BLOCK: "block",
-  ZERO_MARGIN: 0,
+};
+
+export const ErrorMessage = {
+  MINIMUM_NAME_LENGTH: "공백이 아닌 2글자 이상의 역 이름을 입력해 주세요.",
+  DUPLICATED_NAME: "중복되지 않은 역 이름을 입력해 주세요.",
 };
diff --git a/src/util/validation.js b/src/util/validation.js
new file mode 100644
index 000000000..e7671f03e
--- /dev/null
+++ b/src/util/validation.js
@@ -0,0 +1,33 @@
+import { Station } from "../model/station.js";
+import { Constant, ErrorMessage } from "./constant.js";
+
+export const StationValidation = {
+  isValidStation(name) {
+    return this.hasValidName(name);
+  },
+
+  hasValidName(name) {
+    if (!this.hasMinimumLength(name)) {
+      alert(ErrorMessage.MINIMUM_NAME_LENGTH);
+      return;
+    }
+
+    if (!this.isNotDuplicated(name)) {
+      alert(ErrorMessage.DUPLICATED_NAME);
+      return;
+    }
+
+    return true;
+  },
+
+  hasMinimumLength(name) {
+    return (
+      name.length >= Constant.MINIMUM_NAME_LENGTH &&
+      !Constant.REGEX_CATCHING_WHITESPACE.test(name)
+    );
+  },
+
+  isNotDuplicated(name) {
+    return !Station.stations.includes(name);
+  },
+};
\ No newline at end of file
diff --git a/src/view/element.js b/src/view/element.js
index fcf3b7717..c473f1ab4 100644
--- a/src/view/element.js
+++ b/src/view/element.js
@@ -1,44 +1,58 @@
-import { CONSTANT } from "../util/constant.js";
+import { StationManager } from "../controller/station-manager.js";
+import { StationView } from "./station-view.js";
+import { Constant } from "../util/constant.js";
 
-export const element = {
-  stationManagerButton: document.querySelector(CONSTANT.STATION_MANAGER_BTN_ID),
-  lineManagerButton: document.querySelector(CONSTANT.LINE_MANAGER_BTN_ID),
-  sectionManagerButton: document.querySelector(CONSTANT.SECTION_MANAGER_BTN_ID),
+export const Element = {
+  // 초기 화면 버튼
+  stationManagerButton: document.querySelector(Constant.STATION_MANAGER_BTN_ID),
+  lineManagerButton: document.querySelector(Constant.LINE_MANAGER_BTN_ID),
+  sectionManagerButton: document.querySelector(Constant.SECTION_MANAGER_BTN_ID),
   mapPrintManagerButton: document.querySelector(
-    CONSTANT.MAP_PRINT_MANAGER_BTN_ID
+    Constant.MAP_PRINT_MANAGER_BTN_ID
   ),
 
-  stationContainer: document.querySelector(CONSTANT.STATION_CONTAINER_CLASS),
-  lineContainer: document.querySelector(CONSTANT.LINE_CONTAINER_CLASS),
-  sectionContainer: document.querySelector(CONSTANT.SECTION_CONTAINER_CLASS),
-  mapPrintContainer: document.querySelector(CONSTANT.MAP_PRINT_CONTAINER_CLASS),
+  // 각 화면 container
+  stationContainer: document.querySelector(Constant.STATION_CONTAINER_CLASS),
+  lineContainer: document.querySelector(Constant.LINE_CONTAINER_CLASS),
+  sectionContainer: document.querySelector(Constant.SECTION_CONTAINER_CLASS),
+  mapPrintContainer: document.querySelector(Constant.MAP_PRINT_CONTAINER_CLASS),
+
+  // 역 관리
+  stationAddButton: document.querySelector(Constant.STATION_ADD_BUTTON_ID),
+  stationNameInput: document.querySelector(Constant.STATION_NAME_INPUT_ID),
 };
 
-export const elementControl = {
+export const ElementControl = {
   hideAllManagers() {
-    element.stationContainer.style.display = CONSTANT.NONE;
-    element.lineContainer.style.display = CONSTANT.NONE;
-    element.sectionContainer.style.display = CONSTANT.NONE;
-    element.mapPrintContainer.style.display = CONSTANT.NONE;
+    Element.stationContainer.style.display = Constant.NONE;
+    Element.lineContainer.style.display = Constant.NONE;
+    Element.sectionContainer.style.display = Constant.NONE;
+    Element.mapPrintContainer.style.display = Constant.NONE;
   },
 
   showStataionManger() {
     this.hideAllManagers();
-    element.stationContainer.style.display = CONSTANT.BLOCK;
+    Element.stationContainer.style.display = Constant.BLOCK;
+
+    StationManager.isVisited ? StationView.render() : StationManager.init();
   },
 
   showLineManager() {
     this.hideAllManagers();
-    element.lineContainer.style.display = CONSTANT.BLOCK;
+    Element.lineContainer.style.display = Constant.BLOCK;
   },
 
   showSectionManager() {
     this.hideAllManagers();
-    element.sectionContainer.style.display = CONSTANT.BLOCK;
+    Element.sectionContainer.style.display = Constant.BLOCK;
   },
 
   showMapPrintManager() {
     this.hideAllManagers();
-    element.mapPrintContainer.style.display = CONSTANT.BLOCK;
+    Element.mapPrintContainer.style.display = Constant.BLOCK;
   },
+
+  clearInput(element) {
+    element.value = "";
+  }
 };
diff --git a/src/view/station-view.js b/src/view/station-view.js
new file mode 100644
index 000000000..bd5adb767
--- /dev/null
+++ b/src/view/station-view.js
@@ -0,0 +1,3 @@
+export const StationView = {
+  render() {},
+};

From cd59ae490c7d03786600e88f066a1044f7f8e083 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Mon, 14 Dec 2020 15:30:22 +0900
Subject: [PATCH 06/28] =?UTF-8?q?refactor=20:=20UI=20=EC=88=98=EC=A0=95(?=
 =?UTF-8?q?=EB=9D=84=EC=96=B4=EC=93=B0=EA=B8=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/index.html b/index.html
index 57c126192..1e1cb24b6 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@ <h1>🚇 지하철 노선도 관리</h1>
       <button id="station-manager-button">1. 역 관리</button>
       <button id="line-manager-button">2. 노선 관리</button>
       <button id="section-manager-button">3. 구간 관리</button>
-      <button id="map-print-manager-button">4.지하철 노선도 출력</button>
+      <button id="map-print-manager-button">4. 지하철 노선도 출력</button>
     </div>
 
     <!-- 1. 역 관리 -->

From 63f4749e3d5641fdcf0f79eddd8cc7679ac4e917 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Mon, 14 Dec 2020 15:31:17 +0900
Subject: [PATCH 07/28] =?UTF-8?q?docs=20:=20=EC=97=AD=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EB=AA=A9=EB=A1=9D=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20-=20localStorage,=20data=EC=86=8D=EC=84=B1=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/README.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 2f307741f..3bf79656f 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -42,12 +42,13 @@
 
 ### 1.2 기능 목록
 
-- `1. 역 관리`, `2. 노선 관리`, `3. 구간 관리`, `4. 지하철 노선 출력` 버튼을 누르면 관련 화면을 출력한다.
+- [x] `1. 역 관리`, `2. 노선 관리`, `3. 구간 관리`, `4. 지하철 노선 출력` 버튼을 누르면 관련 화면을 출력한다.
 - 역 관리
-  - `역 추가` 버튼을 눌러 역을 추가한다.
-    - 입력한 역 이름이 2글자 이상인지 검증해야 한다.
-    - 입력한 역 이름이 중복인지 검증해야 한다.
-    - 지하철 역 목록에 반영한다.
+  - `localStorage` 및 `data`속성을 반영한다.
+  - [x] `역 추가` 버튼을 눌러 역을 추가한다.
+    - [x] 입력한 역 이름이 2글자 이상인지 검증해야 한다.
+    - [x] 입력한 역 이름이 중복인지 검증해야 한다.
+    - [x] 지하철 역 목록에 반영한다.
   - `삭제` 버튼을 눌러 역을 삭제한다.
     - `alert`를 통해 다시 물어본다.
     - 지하철 역 목록에 반영한다.
@@ -93,7 +94,7 @@
 
 - [x] 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
 - [x] 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
-- [ ] 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
+- [x] 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
 
 ##### 지하철 노선 관련 기능
 

From 0a90232ddcd7da3d8bd866edd2fcc70c83831944 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Mon, 14 Dec 2020 15:31:54 +0900
Subject: [PATCH 08/28] =?UTF-8?q?feat=20:=20=EC=97=AD=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=EB=88=8C=EB=9F=AC=20=EC=97=AD?=
 =?UTF-8?q?=EC=9D=84=20=EC=B6=94=EA=B0=80=ED=95=9C=EB=8B=A4=20-=20?=
 =?UTF-8?q?=EC=A7=80=ED=95=98=EC=B2=A0=20=EC=97=AD=20=EB=AA=A9=EB=A1=9D?=
 =?UTF-8?q?=EC=97=90=20=EB=B0=98=EC=98=81=ED=95=9C=EB=8B=A4=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/controller/station-manager.js |  7 +++++--
 src/model/station.js              |  8 +++++---
 src/util/constant.js              |  3 +++
 src/util/validation.js            |  2 +-
 src/view/element.js               | 17 ++++++++++++-----
 src/view/station-view.js          | 19 ++++++++++++++++++-
 6 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/controller/station-manager.js b/src/controller/station-manager.js
index b3dde6d6b..9a8e3b416 100644
--- a/src/controller/station-manager.js
+++ b/src/controller/station-manager.js
@@ -2,12 +2,14 @@ import { Station } from "../model/station.js";
 import { Constant } from "../util/constant.js";
 import { StationValidation } from "../util/validation.js";
 import { Element, ElementControl } from "../view/element.js";
+import { StationView } from "../view/station-view.js";
 
 export const StationManager = {
   isVisited: false,
 
   init() {
     this.isVisited = true;
+    StationView.render();
     this.setEventListener();
   },
 
@@ -24,10 +26,11 @@ export const StationManager = {
     const name = Element.stationNameInput.value;
 
     if (StationValidation.isValidStation(name)) {
-      // Station.add()
+      Station.add(name);
+      StationView.render();
     }
     ElementControl.clearInput(Element.stationNameInput);
   },
 
-  onClickRemoveBtn() { },
+  onClickRemoveBtn() {},
 };
diff --git a/src/model/station.js b/src/model/station.js
index ea887325e..cfe18ce57 100644
--- a/src/model/station.js
+++ b/src/model/station.js
@@ -1,5 +1,7 @@
 export const Station = {
-  stations: ["양재", "잠실"],
+  stations: ["양재", "매봉", "도곡"],
 
-  add(name) { },
-};
\ No newline at end of file
+  add(name) {
+    this.stations.push(name);
+  },
+};
diff --git a/src/util/constant.js b/src/util/constant.js
index fb06d541d..e275a4214 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -22,6 +22,9 @@ export const Constant = {
   CLICK: "click",
   NONE: "none",
   BLOCK: "block",
+
+  // tag
+  TBODY: "tbody",
 };
 
 export const ErrorMessage = {
diff --git a/src/util/validation.js b/src/util/validation.js
index e7671f03e..8b0ca0a1e 100644
--- a/src/util/validation.js
+++ b/src/util/validation.js
@@ -30,4 +30,4 @@ export const StationValidation = {
   isNotDuplicated(name) {
     return !Station.stations.includes(name);
   },
-};
\ No newline at end of file
+};
diff --git a/src/view/element.js b/src/view/element.js
index c473f1ab4..d3161b2ac 100644
--- a/src/view/element.js
+++ b/src/view/element.js
@@ -11,15 +11,22 @@ export const Element = {
     Constant.MAP_PRINT_MANAGER_BTN_ID
   ),
 
-  // 각 화면 container
+  // 역 관리
   stationContainer: document.querySelector(Constant.STATION_CONTAINER_CLASS),
+  stationAddButton: document.querySelector(Constant.STATION_ADD_BUTTON_ID),
+  stationNameInput: document.querySelector(Constant.STATION_NAME_INPUT_ID),
+
+  // 노선 관리
   lineContainer: document.querySelector(Constant.LINE_CONTAINER_CLASS),
+
+  // 구간 관리
   sectionContainer: document.querySelector(Constant.SECTION_CONTAINER_CLASS),
+
+  // 지하철 노선도 관리
   mapPrintContainer: document.querySelector(Constant.MAP_PRINT_CONTAINER_CLASS),
 
-  // 역 관리
-  stationAddButton: document.querySelector(Constant.STATION_ADD_BUTTON_ID),
-  stationNameInput: document.querySelector(Constant.STATION_NAME_INPUT_ID),
+  // html tag 관련
+  querySelectorTbody: document.querySelector(Constant.TBODY),
 };
 
 export const ElementControl = {
@@ -54,5 +61,5 @@ export const ElementControl = {
 
   clearInput(element) {
     element.value = "";
-  }
+  },
 };
diff --git a/src/view/station-view.js b/src/view/station-view.js
index bd5adb767..80e148e6a 100644
--- a/src/view/station-view.js
+++ b/src/view/station-view.js
@@ -1,3 +1,20 @@
+import { Station } from "../model/station.js";
+import { Element } from "./element.js";
+
 export const StationView = {
-  render() {},
+  render() {
+    let content = "";
+
+    Station.stations.forEach((station) => {
+      content += `
+      <tr>
+        <td>${station}</td>
+        <td>
+          <button class="station-delete-button" data-name="${station}">삭제</button>
+        </td>
+      </tr>
+      `;
+    });
+    Element.querySelectorTbody.innerHTML = content;
+  },
 };

From c143f32d841d1bc93b93d302e50f77fc7d35f2c2 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Mon, 14 Dec 2020 16:08:10 +0900
Subject: [PATCH 09/28] =?UTF-8?q?feat=20:=20localStorage=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/controller/station-manager.js | 2 ++
 src/model/station.js              | 7 ++++++-
 src/util/constant.js              | 1 +
 src/util/storage.js               | 9 +++++++++
 4 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 src/util/storage.js

diff --git a/src/controller/station-manager.js b/src/controller/station-manager.js
index 9a8e3b416..457b75877 100644
--- a/src/controller/station-manager.js
+++ b/src/controller/station-manager.js
@@ -1,5 +1,6 @@
 import { Station } from "../model/station.js";
 import { Constant } from "../util/constant.js";
+import { Storage } from "../util/storage.js";
 import { StationValidation } from "../util/validation.js";
 import { Element, ElementControl } from "../view/element.js";
 import { StationView } from "../view/station-view.js";
@@ -9,6 +10,7 @@ export const StationManager = {
 
   init() {
     this.isVisited = true;
+    Station.stations = Storage.load(Station.key);
     StationView.render();
     this.setEventListener();
   },
diff --git a/src/model/station.js b/src/model/station.js
index cfe18ce57..92dbe1e45 100644
--- a/src/model/station.js
+++ b/src/model/station.js
@@ -1,7 +1,12 @@
+import { Constant } from "../util/constant.js";
+import { Storage } from "../util/storage.js";
+
 export const Station = {
-  stations: ["양재", "매봉", "도곡"],
+  key: Constant.STORAGE_KEY_STATION,
+  stations: [],
 
   add(name) {
     this.stations.push(name);
+    Storage.save(this.key, this.stations);
   },
 };
diff --git a/src/util/constant.js b/src/util/constant.js
index e275a4214..3ae1885dc 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -12,6 +12,7 @@ export const Constant = {
   MAP_PRINT_CONTAINER_CLASS: ".map-print-container",
 
   // 역 관리
+  STORAGE_KEY_STATION: "stations",
   STATION_ADD_BUTTON_ID: "#station-add-button",
   STATION_NAME_INPUT_ID: "#station-name-input",
 
diff --git a/src/util/storage.js b/src/util/storage.js
new file mode 100644
index 000000000..3df31279b
--- /dev/null
+++ b/src/util/storage.js
@@ -0,0 +1,9 @@
+export const Storage = {
+  save(key, array) {
+    localStorage.setItem(key, JSON.stringify(array));
+  },
+
+  load(key) {
+    return JSON.parse(localStorage.getItem(key));
+  },
+};

From 4d9d82dd297c086daf71b3dc062ee5ac574def5a Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Mon, 14 Dec 2020 17:22:24 +0900
Subject: [PATCH 10/28] =?UTF-8?q?feat=20:=20=EC=97=AD=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=20-=20=EC=82=AD=EC=A0=9C=20=EB=B2=84=ED=8A=BC=EC=9D=84=20?=
 =?UTF-8?q?=EB=88=8C=EB=9F=AC=20=EC=97=AD=EC=9D=84=20=EC=82=AD=EC=A0=9C?=
 =?UTF-8?q?=ED=95=9C=EB=8B=A4=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/controller/station-manager.js | 19 +++++++++++++++++--
 src/model/station.js              |  5 +++++
 src/util/constant.js              |  5 +++++
 src/view/element.js               |  1 +
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/controller/station-manager.js b/src/controller/station-manager.js
index 457b75877..a4b762d57 100644
--- a/src/controller/station-manager.js
+++ b/src/controller/station-manager.js
@@ -1,5 +1,5 @@
 import { Station } from "../model/station.js";
-import { Constant } from "../util/constant.js";
+import { ConfirmMessage, Constant } from "../util/constant.js";
 import { Storage } from "../util/storage.js";
 import { StationValidation } from "../util/validation.js";
 import { Element, ElementControl } from "../view/element.js";
@@ -22,6 +22,14 @@ export const StationManager = {
     });
 
     // 삭제
+    // Element.stationDeleteButton
+    // document.querySelector(Constant.STATION_DELELE_BUTTON_CLASS).addEventListener(Constant.CLICK, (e) => {
+    //   this.onClickDeleteBtn(e);
+    // });
+    Element.querySelectorTbody.addEventListener(Constant.CLICK, (e) => {
+      this.onClickDeleteBtn(e);
+    })
+
   },
 
   onClickAddBtn() {
@@ -34,5 +42,12 @@ export const StationManager = {
     ElementControl.clearInput(Element.stationNameInput);
   },
 
-  onClickRemoveBtn() {},
+  onClickDeleteBtn(e) {
+    const name = e.target.dataset.name;
+
+    if (confirm(ConfirmMessage.CHECK_DELETION)) {
+      Station.delete(name);
+      StationView.render();
+    }
+  },
 };
diff --git a/src/model/station.js b/src/model/station.js
index 92dbe1e45..793eaa683 100644
--- a/src/model/station.js
+++ b/src/model/station.js
@@ -9,4 +9,9 @@ export const Station = {
     this.stations.push(name);
     Storage.save(this.key, this.stations);
   },
+
+  delete(name) {
+    this.stations = this.stations.filter(e => e !== name);
+    Storage.save(this.key, this.stations);
+  }
 };
diff --git a/src/util/constant.js b/src/util/constant.js
index 3ae1885dc..9c3a55e6a 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -15,6 +15,7 @@ export const Constant = {
   STORAGE_KEY_STATION: "stations",
   STATION_ADD_BUTTON_ID: "#station-add-button",
   STATION_NAME_INPUT_ID: "#station-name-input",
+  STATION_DELELE_BUTTON_CLASS: ".station-delete-button",
 
   MINIMUM_NAME_LENGTH: 2,
   REGEX_CATCHING_WHITESPACE: /^\s*$/,
@@ -32,3 +33,7 @@ export const ErrorMessage = {
   MINIMUM_NAME_LENGTH: "공백이 아닌 2글자 이상의 역 이름을 입력해 주세요.",
   DUPLICATED_NAME: "중복되지 않은 역 이름을 입력해 주세요.",
 };
+
+export const ConfirmMessage = {
+  CHECK_DELETION: "정말로 삭제하시겠습니까?",
+}
diff --git a/src/view/element.js b/src/view/element.js
index d3161b2ac..9e3bcf94d 100644
--- a/src/view/element.js
+++ b/src/view/element.js
@@ -15,6 +15,7 @@ export const Element = {
   stationContainer: document.querySelector(Constant.STATION_CONTAINER_CLASS),
   stationAddButton: document.querySelector(Constant.STATION_ADD_BUTTON_ID),
   stationNameInput: document.querySelector(Constant.STATION_NAME_INPUT_ID),
+  stationDeleteButton: document.querySelector(Constant.STATION_DELELE_BUTTON_CLASS),
 
   // 노선 관리
   lineContainer: document.querySelector(Constant.LINE_CONTAINER_CLASS),

From 67091919803b308d527ec45ba91b38e0c36924a0 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Mon, 14 Dec 2020 20:07:06 +0900
Subject: [PATCH 11/28] =?UTF-8?q?docs=20:=20=EA=B8=B0=EB=8A=A5=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=A0=95=EB=A6=AC=20=EB=B0=8F=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=ED=95=9C=20=EA=B8=B0=EB=8A=A5=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/README.md | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 3bf79656f..3bf654a1e 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -44,38 +44,40 @@
 
 - [x] `1. 역 관리`, `2. 노선 관리`, `3. 구간 관리`, `4. 지하철 노선 출력` 버튼을 누르면 관련 화면을 출력한다.
 - 역 관리
-  - `localStorage` 및 `data`속성을 반영한다.
-  - [x] `역 추가` 버튼을 눌러 역을 추가한다.
+  - [x] `localStorage` 및 `data`속성을 반영한다.
+  - [x] 지하철 역 목록을 조회한다.
+  - `역 추가`
     - [x] 입력한 역 이름이 2글자 이상인지 검증해야 한다.
     - [x] 입력한 역 이름이 중복인지 검증해야 한다.
     - [x] 지하철 역 목록에 반영한다.
-  - `삭제` 버튼을 눌러 역을 삭제한다.
-    - `alert`를 통해 다시 물어본다.
-    - 지하철 역 목록에 반영한다.
+  - `삭제`
+    - [x] `alert`를 통해 다시 물어본다.
+    - [x] 지하철 역 목록에 반영한다.
 - 노선 관리
-  - `노선 추가` 버튼을 눌러 노선을 추가한다.
-    - 상행 종점과 하행 종점 목록을 역 목록에서 가져온다.
+  - 노선 목록을 조회한다.
+  - `노선 추가`
+    - [x] 상행 종점과 하행 종점 목록을 조회한다.
     - 입력한 노선 이름이 중복인지 검증해야 한다.
     - 노선의 이름이 다르면 상행 종점과 하행 종점이 중복될 수 있다. (고민)
     - 노선 목록에 반영한다.
-  - `삭제` 버튼을 눌러 노선을 삭제한다.
+  - `삭제`
     - `alert`를 통해 다시 물어본다.
     - 노선 목록에 반영한다.
 - 구간 관리
-  - 구간을 수정할 노선의 목록을 버튼으로 출력한다.
-  - 노선을 선택하면 관련 화면을 출력한다.
+  - 구간을 수정할 노선의 목록을 조회한다. (버튼으로 출력)
+  - 노선을 선택하면 해당 노선의 구간 목록을 조회한다.
     - 제목은 `(선택된 노선) 관리`를 출력한다.
-  - `등록` 버튼을 눌러 구간을 추가한다.
+  - `등록`
     - 입력한 역의 이름과 순서를 검증해야 한다.
     - 입력한 역의 이름이 중복인지 검증해야 한다.
     - 역과 역 사이(구간)인지 검증해야 한다.
     - 구간 목록에 반영한다.
-  - `노선에서 제거` 버튼을 눌러 구간을 삭제한다.
+  - `노선에서 제거`
     - 노선에 등록된 역이 두 개 이하인지 검증해야 한다. (두 개 이하인 경우에는 삭제 불가)
     - `alert`를 통해 다시 물어본다.
     - 구간 목록에 반영한다.
 - 지하철 노선도 관리
-  - 각 노선의 역들을 출력한다.
+  - 각 노선의 역들을 조회한다.
 
 <br/>
 

From 01e32878b739f4b0bc742f8d067beab9ca8502aa Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Mon, 14 Dec 2020 20:07:59 +0900
Subject: [PATCH 12/28] =?UTF-8?q?feat=20:=20=EB=85=B8=EC=84=A0=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20=EC=83=81=ED=96=89=20=EC=A2=85=EC=A0=90?=
 =?UTF-8?q?=EA=B3=BC=20=ED=95=98=ED=96=89=20=EC=A2=85=EC=A0=90=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=EC=9D=84=20=EC=A1=B0=ED=9A=8C=ED=95=98=EB=8A=94=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/controller/line-manager.js    | 13 +++++++++++++
 src/controller/station-manager.js |  3 +--
 src/model/station.js              |  4 ++--
 src/util/constant.js              | 21 ++++++++++++++-------
 src/view/element.js               | 10 +++++++++-
 src/view/line-view.js             | 26 ++++++++++++++++++++++++++
 src/view/station-view.js          | 13 +++++++------
 7 files changed, 72 insertions(+), 18 deletions(-)
 create mode 100644 src/controller/line-manager.js
 create mode 100644 src/view/line-view.js

diff --git a/src/controller/line-manager.js b/src/controller/line-manager.js
new file mode 100644
index 000000000..db83a4f19
--- /dev/null
+++ b/src/controller/line-manager.js
@@ -0,0 +1,13 @@
+import { Station } from "../model/station.js";
+import { Storage } from "../util/storage.js";
+import { LineView } from "../view/line-view.js";
+
+export const LineManager = {
+  isVisited: false,
+
+  init() {
+    this.isVisited = true;
+    Station.stations = Storage.load(Station.key);
+    LineView.render();
+  },
+};
diff --git a/src/controller/station-manager.js b/src/controller/station-manager.js
index a4b762d57..e182c96e0 100644
--- a/src/controller/station-manager.js
+++ b/src/controller/station-manager.js
@@ -28,8 +28,7 @@ export const StationManager = {
     // });
     Element.querySelectorTbody.addEventListener(Constant.CLICK, (e) => {
       this.onClickDeleteBtn(e);
-    })
-
+    });
   },
 
   onClickAddBtn() {
diff --git a/src/model/station.js b/src/model/station.js
index 793eaa683..9b4cc279b 100644
--- a/src/model/station.js
+++ b/src/model/station.js
@@ -11,7 +11,7 @@ export const Station = {
   },
 
   delete(name) {
-    this.stations = this.stations.filter(e => e !== name);
+    this.stations = this.stations.filter((e) => e !== name);
     Storage.save(this.key, this.stations);
-  }
+  },
 };
diff --git a/src/util/constant.js b/src/util/constant.js
index 9c3a55e6a..c7afd10e6 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -5,18 +5,25 @@ export const Constant = {
   SECTION_MANAGER_BTN_ID: "#section-manager-button",
   MAP_PRINT_MANAGER_BTN_ID: "#map-print-manager-button",
 
-  // 각 화면 container
-  STATION_CONTAINER_CLASS: ".station-container",
-  LINE_CONTAINER_CLASS: ".line-container",
-  SECTION_CONTAINER_CLASS: ".section-container",
-  MAP_PRINT_CONTAINER_CLASS: ".map-print-container",
-
   // 역 관리
+  STATION_CONTAINER_CLASS: ".station-container",
   STORAGE_KEY_STATION: "stations",
   STATION_ADD_BUTTON_ID: "#station-add-button",
   STATION_NAME_INPUT_ID: "#station-name-input",
   STATION_DELELE_BUTTON_CLASS: ".station-delete-button",
 
+  // 노선 관리
+  LINE_CONTAINER_CLASS: ".line-container",
+  LINE_START_STATION_SELECTOR_ID: "#line-start-station-selector",
+  LINE_END_STATION_SELECTOR_ID: "#line-end-station-selector",
+
+  // 구간 관리
+  SECTION_CONTAINER_CLASS: ".section-container",
+
+  // 지하철 노선 관리
+  MAP_PRINT_CONTAINER_CLASS: ".map-print-container",
+
+  // 
   MINIMUM_NAME_LENGTH: 2,
   REGEX_CATCHING_WHITESPACE: /^\s*$/,
 
@@ -36,4 +43,4 @@ export const ErrorMessage = {
 
 export const ConfirmMessage = {
   CHECK_DELETION: "정말로 삭제하시겠습니까?",
-}
+};
diff --git a/src/view/element.js b/src/view/element.js
index 9e3bcf94d..6ccb46874 100644
--- a/src/view/element.js
+++ b/src/view/element.js
@@ -1,6 +1,8 @@
 import { StationManager } from "../controller/station-manager.js";
 import { StationView } from "./station-view.js";
 import { Constant } from "../util/constant.js";
+import { LineManager } from "../controller/line-manager.js";
+import { LineView } from "./line-view.js";
 
 export const Element = {
   // 초기 화면 버튼
@@ -15,10 +17,14 @@ export const Element = {
   stationContainer: document.querySelector(Constant.STATION_CONTAINER_CLASS),
   stationAddButton: document.querySelector(Constant.STATION_ADD_BUTTON_ID),
   stationNameInput: document.querySelector(Constant.STATION_NAME_INPUT_ID),
-  stationDeleteButton: document.querySelector(Constant.STATION_DELELE_BUTTON_CLASS),
+  stationDeleteButton: document.querySelector(
+    Constant.STATION_DELELE_BUTTON_CLASS
+  ),
 
   // 노선 관리
   lineContainer: document.querySelector(Constant.LINE_CONTAINER_CLASS),
+  lineStartStationSelector: document.querySelector(Constant.LINE_START_STATION_SELECTOR_ID),
+  lineEndStationSelector: document.querySelector(Constant.LINE_END_STATION_SELECTOR_ID),
 
   // 구간 관리
   sectionContainer: document.querySelector(Constant.SECTION_CONTAINER_CLASS),
@@ -48,6 +54,8 @@ export const ElementControl = {
   showLineManager() {
     this.hideAllManagers();
     Element.lineContainer.style.display = Constant.BLOCK;
+
+    LineManager.isVisited ? LineView.render() : LineManager.init();
   },
 
   showSectionManager() {
diff --git a/src/view/line-view.js b/src/view/line-view.js
new file mode 100644
index 000000000..90c8f49bf
--- /dev/null
+++ b/src/view/line-view.js
@@ -0,0 +1,26 @@
+import { Station } from "../model/station.js";
+import { Element } from "./element.js";
+
+export const LineView = {
+  render() {
+    this.renderSelector();
+    this.renderTable();
+  },
+
+  renderSelector() {
+    let content = "";
+
+    Station.stations.forEach((station) => {
+      content += `
+        <option value=${station}>${station}</option>
+      `;
+    });
+
+    Element.lineStartStationSelector.innerHTML = content;
+    Element.lineEndStationSelector.innerHTML = content;
+  },
+
+  renderTable() {
+
+  }
+}
\ No newline at end of file
diff --git a/src/view/station-view.js b/src/view/station-view.js
index 80e148e6a..87f2d5088 100644
--- a/src/view/station-view.js
+++ b/src/view/station-view.js
@@ -7,14 +7,15 @@ export const StationView = {
 
     Station.stations.forEach((station) => {
       content += `
-      <tr>
-        <td>${station}</td>
-        <td>
-          <button class="station-delete-button" data-name="${station}">삭제</button>
-        </td>
-      </tr>
+        <tr>
+          <td>${station}</td>
+          <td>
+            <button class="station-delete-button" data-name="${station}">삭제</button>
+          </td>
+        </tr>
       `;
     });
+
     Element.querySelectorTbody.innerHTML = content;
   },
 };

From 2cca0ad5a4c2cf4393d00442d1504e9caebdae25 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Mon, 14 Dec 2020 22:35:33 +0900
Subject: [PATCH 13/28] =?UTF-8?q?docs=20:=20=EA=B8=B0=EB=8A=A5=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=B6=94=EA=B0=80=20=EB=85=B8=EC=84=A0=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20=EB=85=B8=EC=84=A0=EC=9D=98=20=EC=83=81?=
 =?UTF-8?q?=ED=96=89=20=EC=A2=85=EC=A0=90=EA=B3=BC=20=ED=95=98=ED=96=89=20?=
 =?UTF-8?q?=EB=8F=99=EC=A0=90=EC=9D=98=20=EC=A4=91=EB=B3=B5=20=EC=97=AC?=
 =?UTF-8?q?=EB=B6=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/docs/README.md b/docs/README.md
index 3bf654a1e..56a05d7a7 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -57,8 +57,9 @@
   - 노선 목록을 조회한다.
   - `노선 추가`
     - [x] 상행 종점과 하행 종점 목록을 조회한다.
-    - 입력한 노선 이름이 중복인지 검증해야 한다.
-    - 노선의 이름이 다르면 상행 종점과 하행 종점이 중복될 수 있다. (고민)
+    - [x] 입력한 노선 이름이 중복인지 검증해야 한다.
+    - [x] 노선의 상행 종점과 하행 종점이 동일한지 검증해야 한다.
+    - [x] 노선의 이름이 다르면 상행 종점과 하행 종점이 중복될 수 있다.
     - 노선 목록에 반영한다.
   - `삭제`
     - `alert`를 통해 다시 물어본다.

From 825f9f8d493297ba4092c9f7ac1e132c18ca317d Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Mon, 14 Dec 2020 22:36:21 +0900
Subject: [PATCH 14/28] =?UTF-8?q?feat=20:=20=EC=9E=85=EB=A0=A5=ED=95=9C=20?=
 =?UTF-8?q?=EB=85=B8=EC=84=A0=20=EC=9D=B4=EB=A6=84=EC=9D=98=20=EC=A4=91?=
 =?UTF-8?q?=EB=B3=B5=20=EC=97=AC=EB=B6=80,=20=EB=85=B8=EC=84=A0=EC=9D=98?=
 =?UTF-8?q?=20=EC=83=81=ED=96=89=20=EC=A2=85=EC=A0=90=EA=B3=BC=20=ED=95=98?=
 =?UTF-8?q?=ED=96=89=20=EC=A2=85=EC=A0=90=EC=9D=98=20=EC=A4=91=EB=B3=B5=20?=
 =?UTF-8?q?=EC=97=AC=EB=B6=80=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/controller/line-manager.js    | 39 +++++++++++++++++++++++++++++++
 src/controller/station-manager.js |  8 +++----
 src/model/line.js                 |  7 ++++++
 src/util/constant.js              | 14 +++++++++--
 src/util/validation.js            | 38 ++++++++++++++++++++++++++++++
 src/view/element.js               | 10 ++++++--
 src/view/line-view.js             |  6 ++---
 7 files changed, 110 insertions(+), 12 deletions(-)
 create mode 100644 src/model/line.js

diff --git a/src/controller/line-manager.js b/src/controller/line-manager.js
index db83a4f19..1e6511c44 100644
--- a/src/controller/line-manager.js
+++ b/src/controller/line-manager.js
@@ -1,5 +1,8 @@
 import { Station } from "../model/station.js";
+import { Constant } from "../util/constant.js";
 import { Storage } from "../util/storage.js";
+import { LineValidation } from "../util/validation.js";
+import { Element, ElementControl } from "../view/element.js";
 import { LineView } from "../view/line-view.js";
 
 export const LineManager = {
@@ -9,5 +12,41 @@ export const LineManager = {
     this.isVisited = true;
     Station.stations = Storage.load(Station.key);
     LineView.render();
+    this.setEventListener();
   },
+
+  setEventListener() {
+    // 추가
+    Element.lineAddButton.addEventListener(Constant.CLICK, () => {
+      this.onClickAddButton();
+    });
+
+    // 삭제
+  },
+
+  onClickAddButton() {
+    // const name = Element.stationNameInput.value;
+
+    // if (StationValidation.isValidStation(name)) {
+    //   Station.add(name);
+    //   StationView.render();
+    // }
+    // ElementControl.clearInput(Element.stationNameInput);
+    const name = Element.lineNameInput.value;
+    const start = Element.lineStartStationSelector.value;
+    const end = Element.lineEndStationSelector.value;
+
+    console.log(name);
+    console.log(start);
+    console.log(end);
+
+    if (LineValidation.isValidLine(name, start, end)) {
+      console.log("if");
+    } else {
+      console.log("else");
+    }
+    ElementControl.clearInput(Element.lineNameInput);
+  },
+
+  onClickDeleteButton() {},
 };
diff --git a/src/controller/station-manager.js b/src/controller/station-manager.js
index e182c96e0..fb05ea52c 100644
--- a/src/controller/station-manager.js
+++ b/src/controller/station-manager.js
@@ -18,7 +18,7 @@ export const StationManager = {
   setEventListener() {
     // 추가
     Element.stationAddButton.addEventListener(Constant.CLICK, () => {
-      this.onClickAddBtn();
+      this.onClickAddButton();
     });
 
     // 삭제
@@ -27,11 +27,11 @@ export const StationManager = {
     //   this.onClickDeleteBtn(e);
     // });
     Element.querySelectorTbody.addEventListener(Constant.CLICK, (e) => {
-      this.onClickDeleteBtn(e);
+      this.onClickDeleteButton(e);
     });
   },
 
-  onClickAddBtn() {
+  onClickAddButton() {
     const name = Element.stationNameInput.value;
 
     if (StationValidation.isValidStation(name)) {
@@ -41,7 +41,7 @@ export const StationManager = {
     ElementControl.clearInput(Element.stationNameInput);
   },
 
-  onClickDeleteBtn(e) {
+  onClickDeleteButton(e) {
     const name = e.target.dataset.name;
 
     if (confirm(ConfirmMessage.CHECK_DELETION)) {
diff --git a/src/model/line.js b/src/model/line.js
new file mode 100644
index 000000000..e5909ba23
--- /dev/null
+++ b/src/model/line.js
@@ -0,0 +1,7 @@
+import { Constant } from "../util/constant.js";
+
+export const Line = {
+  key: Constant.STORAGE_KEY_LINE,
+  names: ["3호선"],
+  stations: [],
+};
diff --git a/src/util/constant.js b/src/util/constant.js
index c7afd10e6..01adaaea6 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -14,8 +14,11 @@ export const Constant = {
 
   // 노선 관리
   LINE_CONTAINER_CLASS: ".line-container",
+  STORAGE_KEY_LINE: "lines",
   LINE_START_STATION_SELECTOR_ID: "#line-start-station-selector",
   LINE_END_STATION_SELECTOR_ID: "#line-end-station-selector",
+  LINE_ADD_BUTTON_ID: "#line-add-button",
+  LINE_NAME_INPUT_ID: "#line-name-input",
 
   // 구간 관리
   SECTION_CONTAINER_CLASS: ".section-container",
@@ -23,7 +26,7 @@ export const Constant = {
   // 지하철 노선 관리
   MAP_PRINT_CONTAINER_CLASS: ".map-print-container",
 
-  // 
+  //
   MINIMUM_NAME_LENGTH: 2,
   REGEX_CATCHING_WHITESPACE: /^\s*$/,
 
@@ -37,8 +40,15 @@ export const Constant = {
 };
 
 export const ErrorMessage = {
-  MINIMUM_NAME_LENGTH: "공백이 아닌 2글자 이상의 역 이름을 입력해 주세요.",
+  // 공통
   DUPLICATED_NAME: "중복되지 않은 역 이름을 입력해 주세요.",
+
+  // 역 관리
+  MINIMUM_NAME_LENGTH: "공백이 아닌 2글자 이상의 역 이름을 입력해 주세요.",
+
+  // 노선 관리
+  NAME_WHITE_SPACE: "공백이 아닌 노선 이름을 입력해 주세요.",
+  SAME_START_END_STATION: "서로 다른 종점을 선택해 주세요.",
 };
 
 export const ConfirmMessage = {
diff --git a/src/util/validation.js b/src/util/validation.js
index 8b0ca0a1e..87ec0e2c9 100644
--- a/src/util/validation.js
+++ b/src/util/validation.js
@@ -1,3 +1,4 @@
+import { Line } from "../model/line.js";
 import { Station } from "../model/station.js";
 import { Constant, ErrorMessage } from "./constant.js";
 
@@ -31,3 +32,40 @@ export const StationValidation = {
     return !Station.stations.includes(name);
   },
 };
+
+export const LineValidation = {
+  isValidLine(name, start, end) {
+    return this.hasValidName(name) && this.hasValidStartEndStation(start, end);
+  },
+
+  hasValidName(name) {
+    if (!this.isNotWhiteSpace(name)) {
+      alert(ErrorMessage.NAME_WHITE_SPACE);
+      return;
+    }
+
+    if (!this.isNotDuplicated(name)) {
+      alert(ErrorMessage.DUPLICATED_NAME);
+      return;
+    }
+
+    return true;
+  },
+
+  hasValidStartEndStation(start, end) {
+    if (start === end) {
+      alert(ErrorMessage.SAME_START_END_STATION);
+      return;
+    }
+
+    return true;
+  },
+
+  isNotWhiteSpace(name) {
+    return !Constant.REGEX_CATCHING_WHITESPACE.test(name);
+  },
+
+  isNotDuplicated(name) {
+    return !Line.names.includes(name);
+  },
+};
diff --git a/src/view/element.js b/src/view/element.js
index 6ccb46874..7f092cb6b 100644
--- a/src/view/element.js
+++ b/src/view/element.js
@@ -23,8 +23,14 @@ export const Element = {
 
   // 노선 관리
   lineContainer: document.querySelector(Constant.LINE_CONTAINER_CLASS),
-  lineStartStationSelector: document.querySelector(Constant.LINE_START_STATION_SELECTOR_ID),
-  lineEndStationSelector: document.querySelector(Constant.LINE_END_STATION_SELECTOR_ID),
+  lineStartStationSelector: document.querySelector(
+    Constant.LINE_START_STATION_SELECTOR_ID
+  ),
+  lineEndStationSelector: document.querySelector(
+    Constant.LINE_END_STATION_SELECTOR_ID
+  ),
+  lineAddButton: document.querySelector(Constant.LINE_ADD_BUTTON_ID),
+  lineNameInput: document.querySelector(Constant.LINE_NAME_INPUT_ID),
 
   // 구간 관리
   sectionContainer: document.querySelector(Constant.SECTION_CONTAINER_CLASS),
diff --git a/src/view/line-view.js b/src/view/line-view.js
index 90c8f49bf..8e2fddca8 100644
--- a/src/view/line-view.js
+++ b/src/view/line-view.js
@@ -20,7 +20,5 @@ export const LineView = {
     Element.lineEndStationSelector.innerHTML = content;
   },
 
-  renderTable() {
-
-  }
-}
\ No newline at end of file
+  renderTable() {},
+};

From 018ed69c13777baf7b6e68e0f344233c7e2bce0c Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 01:23:06 +0900
Subject: [PATCH 15/28] =?UTF-8?q?feat=20:=20=EB=85=B8=EC=84=A0=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20=EB=85=B8=EC=84=A0=20=EB=AA=A9=EB=A1=9D?=
 =?UTF-8?q?=EC=9D=84=20=EC=A1=B0=ED=9A=8C=ED=95=98=EA=B3=A0=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/controller/line-manager.js | 18 ++++--------------
 src/model/line.js              | 18 ++++++++++++++++--
 src/util/validation.js         |  9 ++++++++-
 src/view/element.js            |  3 ---
 src/view/line-view.js          | 21 ++++++++++++++++++++-
 src/view/station-view.js       |  3 ++-
 6 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/src/controller/line-manager.js b/src/controller/line-manager.js
index 1e6511c44..65adfc44d 100644
--- a/src/controller/line-manager.js
+++ b/src/controller/line-manager.js
@@ -1,3 +1,4 @@
+import { Line, LineObject } from "../model/line.js";
 import { Station } from "../model/station.js";
 import { Constant } from "../util/constant.js";
 import { Storage } from "../util/storage.js";
@@ -11,6 +12,7 @@ export const LineManager = {
   init() {
     this.isVisited = true;
     Station.stations = Storage.load(Station.key);
+    Line.lines = Storage.load(Line.key);
     LineView.render();
     this.setEventListener();
   },
@@ -25,25 +27,13 @@ export const LineManager = {
   },
 
   onClickAddButton() {
-    // const name = Element.stationNameInput.value;
-
-    // if (StationValidation.isValidStation(name)) {
-    //   Station.add(name);
-    //   StationView.render();
-    // }
-    // ElementControl.clearInput(Element.stationNameInput);
     const name = Element.lineNameInput.value;
     const start = Element.lineStartStationSelector.value;
     const end = Element.lineEndStationSelector.value;
 
-    console.log(name);
-    console.log(start);
-    console.log(end);
-
     if (LineValidation.isValidLine(name, start, end)) {
-      console.log("if");
-    } else {
-      console.log("else");
+      Line.add(new LineObject(name, start, end));
+      LineView.render();
     }
     ElementControl.clearInput(Element.lineNameInput);
   },
diff --git a/src/model/line.js b/src/model/line.js
index e5909ba23..d21b536a2 100644
--- a/src/model/line.js
+++ b/src/model/line.js
@@ -1,7 +1,21 @@
 import { Constant } from "../util/constant.js";
+import { Storage } from "../util/storage.js";
+
+export class LineObject {
+  constructor(name, start, end) {
+    this.name = name;
+    this.stations = [start, end];
+  }
+}
 
 export const Line = {
   key: Constant.STORAGE_KEY_LINE,
-  names: ["3호선"],
-  stations: [],
+  lines: [],
+
+  add(lineObject) {
+    this.lines.push(lineObject);
+    Storage.save(this.key, this.lines);
+  },
+
+  delete() {},
 };
diff --git a/src/util/validation.js b/src/util/validation.js
index 87ec0e2c9..a27ecdcec 100644
--- a/src/util/validation.js
+++ b/src/util/validation.js
@@ -10,11 +10,13 @@ export const StationValidation = {
   hasValidName(name) {
     if (!this.hasMinimumLength(name)) {
       alert(ErrorMessage.MINIMUM_NAME_LENGTH);
+
       return;
     }
 
     if (!this.isNotDuplicated(name)) {
       alert(ErrorMessage.DUPLICATED_NAME);
+
       return;
     }
 
@@ -41,11 +43,13 @@ export const LineValidation = {
   hasValidName(name) {
     if (!this.isNotWhiteSpace(name)) {
       alert(ErrorMessage.NAME_WHITE_SPACE);
+
       return;
     }
 
     if (!this.isNotDuplicated(name)) {
       alert(ErrorMessage.DUPLICATED_NAME);
+
       return;
     }
 
@@ -55,6 +59,7 @@ export const LineValidation = {
   hasValidStartEndStation(start, end) {
     if (start === end) {
       alert(ErrorMessage.SAME_START_END_STATION);
+
       return;
     }
 
@@ -66,6 +71,8 @@ export const LineValidation = {
   },
 
   isNotDuplicated(name) {
-    return !Line.names.includes(name);
+    const stationNameArray = Line.lines.map(({ name }) => name);
+
+    return !stationNameArray.includes(name);
   },
 };
diff --git a/src/view/element.js b/src/view/element.js
index 7f092cb6b..93a005113 100644
--- a/src/view/element.js
+++ b/src/view/element.js
@@ -37,9 +37,6 @@ export const Element = {
 
   // 지하철 노선도 관리
   mapPrintContainer: document.querySelector(Constant.MAP_PRINT_CONTAINER_CLASS),
-
-  // html tag 관련
-  querySelectorTbody: document.querySelector(Constant.TBODY),
 };
 
 export const ElementControl = {
diff --git a/src/view/line-view.js b/src/view/line-view.js
index 8e2fddca8..74b0e46e8 100644
--- a/src/view/line-view.js
+++ b/src/view/line-view.js
@@ -1,4 +1,6 @@
+import { Line } from "../model/line.js";
 import { Station } from "../model/station.js";
+import { Constant } from "../util/constant.js";
 import { Element } from "./element.js";
 
 export const LineView = {
@@ -20,5 +22,22 @@ export const LineView = {
     Element.lineEndStationSelector.innerHTML = content;
   },
 
-  renderTable() {},
+  renderTable() {
+    let content = "";
+
+    Line.lines.forEach(({ name, stations }) => {
+      content += `
+        <tr>
+          <td>${name}</td>
+          <td>${stations[0]}</td>
+          <td>${stations[stations.length - 1]}</td>
+          <td>
+            <button class="line-delete-button" data-name="${name}">삭제</button>
+          </td>
+        </tr>
+      `;
+    });
+
+    Element.lineContainer.querySelector(Constant.TBODY).innerHTML = content;
+  },
 };
diff --git a/src/view/station-view.js b/src/view/station-view.js
index 87f2d5088..0a97d72e1 100644
--- a/src/view/station-view.js
+++ b/src/view/station-view.js
@@ -1,4 +1,5 @@
 import { Station } from "../model/station.js";
+import { Constant } from "../util/constant.js";
 import { Element } from "./element.js";
 
 export const StationView = {
@@ -16,6 +17,6 @@ export const StationView = {
       `;
     });
 
-    Element.querySelectorTbody.innerHTML = content;
+    Element.stationContainer.querySelector(Constant.TBODY).innerHTML = content;
   },
 };

From c668ec5ddcd86dfd5718f5b545a9e2c5ca4cd092 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 02:19:59 +0900
Subject: [PATCH 16/28] =?UTF-8?q?feat=20:=20=EB=85=B8=EC=84=A0=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/controller/line-manager.js    | 18 ++++++++++++++----
 src/controller/station-manager.js |  8 +++++---
 src/model/line.js                 |  5 ++++-
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/controller/line-manager.js b/src/controller/line-manager.js
index 65adfc44d..c09142545 100644
--- a/src/controller/line-manager.js
+++ b/src/controller/line-manager.js
@@ -1,6 +1,6 @@
 import { Line, LineObject } from "../model/line.js";
 import { Station } from "../model/station.js";
-import { Constant } from "../util/constant.js";
+import { ConfirmMessage, Constant } from "../util/constant.js";
 import { Storage } from "../util/storage.js";
 import { LineValidation } from "../util/validation.js";
 import { Element, ElementControl } from "../view/element.js";
@@ -18,12 +18,15 @@ export const LineManager = {
   },
 
   setEventListener() {
-    // 추가
     Element.lineAddButton.addEventListener(Constant.CLICK, () => {
       this.onClickAddButton();
     });
 
-    // 삭제
+    Element.lineContainer
+      .querySelector(Constant.TBODY)
+      .addEventListener(Constant.CLICK, (e) => {
+        this.onClickDeleteButton(e);
+      });
   },
 
   onClickAddButton() {
@@ -38,5 +41,12 @@ export const LineManager = {
     ElementControl.clearInput(Element.lineNameInput);
   },
 
-  onClickDeleteButton() {},
+  onClickDeleteButton(e) {
+    const name = e.target.dataset.name;
+
+    if (confirm(ConfirmMessage.CHECK_DELETION)) {
+      Line.delete(name);
+      LineView.render();
+    }
+  },
 };
diff --git a/src/controller/station-manager.js b/src/controller/station-manager.js
index fb05ea52c..0a47e0830 100644
--- a/src/controller/station-manager.js
+++ b/src/controller/station-manager.js
@@ -26,9 +26,11 @@ export const StationManager = {
     // document.querySelector(Constant.STATION_DELELE_BUTTON_CLASS).addEventListener(Constant.CLICK, (e) => {
     //   this.onClickDeleteBtn(e);
     // });
-    Element.querySelectorTbody.addEventListener(Constant.CLICK, (e) => {
-      this.onClickDeleteButton(e);
-    });
+    Element.stationContainer
+      .querySelector(Constant.TBODY)
+      .addEventListener(Constant.CLICK, (e) => {
+        this.onClickDeleteButton(e);
+      });
   },
 
   onClickAddButton() {
diff --git a/src/model/line.js b/src/model/line.js
index d21b536a2..44f0871b3 100644
--- a/src/model/line.js
+++ b/src/model/line.js
@@ -17,5 +17,8 @@ export const Line = {
     Storage.save(this.key, this.lines);
   },
 
-  delete() {},
+  delete(name) {
+    this.lines = this.lines.filter((el) => el.name !== name);
+    Storage.save(this.key, this.lines);
+  },
 };

From ae59b97818afc4c8890cda0e8a6fa56da5404960 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 02:56:59 +0900
Subject: [PATCH 17/28] =?UTF-8?q?feat=20:=20=EA=B5=AC=EA=B0=84=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20=EA=B5=AC=EA=B0=84=EC=9D=84=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=ED=95=A0=20=EB=85=B8=EC=84=A0=20=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                        | 26 +++++++++++---------------
 src/controller/section-manager.js | 15 +++++++++++++++
 src/util/constant.js              |  1 +
 src/view/element.js               |  5 +++++
 src/view/section-view.js          | 20 ++++++++++++++++++++
 style.css                         |  4 ++++
 6 files changed, 56 insertions(+), 15 deletions(-)
 create mode 100644 src/controller/section-manager.js
 create mode 100644 src/view/section-view.js

diff --git a/index.html b/index.html
index 1e1cb24b6..410c8e6f1 100644
--- a/index.html
+++ b/index.html
@@ -73,11 +73,7 @@ <h2>🚉 지하철 노선 목록</h2>
     <!-- 3. 구간 관리 -->
     <div class="section-container">
       <h3>구간을 수정할 노선을 선택해주세요.</h3>
-      <div class="section-line-menu">
-        <!-- 예시 -->
-        <button class="section-line-menu-button">1호선</button>
-        <button class="section-line-menu-button">2호선</button>
-      </div>
+      <div class="section-line-menu"></div>
 
       <div class="section-manager">
         <h3 class="section-manager-title">1호선 관리</h3>
@@ -85,17 +81,17 @@ <h4>구간 등록</h4>
         <select id="section-station-selector"></select>
         <input id="section-order-input" placeholder="순서" />
         <button id="section-add-button">등록</button>
+        <table id="section-table">
+          <thead>
+            <tr>
+              <th>순서</th>
+              <th>이름</th>
+              <th>설정</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
       </div>
-      <table id="section-table">
-        <thead>
-          <tr>
-            <th>순서</th>
-            <th>이름</th>
-            <th>설정</th>
-          </tr>
-        </thead>
-        <tbody></tbody>
-      </table>
     </div>
 
     <!-- 4. 지하철 노선도 출력 -->
diff --git a/src/controller/section-manager.js b/src/controller/section-manager.js
new file mode 100644
index 000000000..5567823c3
--- /dev/null
+++ b/src/controller/section-manager.js
@@ -0,0 +1,15 @@
+import { Line } from "../model/line.js";
+import { Storage } from "../util/storage.js";
+import { SectionView } from "../view/section-view.js";
+
+export const SectionManager = {
+  isVisited: false,
+
+  init() {
+    this.isVisited = true;
+    Line.lines = Storage.load(Line.key);
+    SectionView.render();
+  },
+
+  setEventListener() {},
+};
diff --git a/src/util/constant.js b/src/util/constant.js
index 01adaaea6..96ac3058d 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -22,6 +22,7 @@ export const Constant = {
 
   // 구간 관리
   SECTION_CONTAINER_CLASS: ".section-container",
+  SECTION_LINE_MENU_CLASS: ".section-line-menu",
 
   // 지하철 노선 관리
   MAP_PRINT_CONTAINER_CLASS: ".map-print-container",
diff --git a/src/view/element.js b/src/view/element.js
index 93a005113..9e2ade236 100644
--- a/src/view/element.js
+++ b/src/view/element.js
@@ -3,6 +3,8 @@ import { StationView } from "./station-view.js";
 import { Constant } from "../util/constant.js";
 import { LineManager } from "../controller/line-manager.js";
 import { LineView } from "./line-view.js";
+import { SectionManager } from "../controller/section-manager.js";
+import { SectionView } from "./section-view.js";
 
 export const Element = {
   // 초기 화면 버튼
@@ -34,6 +36,7 @@ export const Element = {
 
   // 구간 관리
   sectionContainer: document.querySelector(Constant.SECTION_CONTAINER_CLASS),
+  sectionLineMenu: document.querySelector(Constant.SECTION_LINE_MENU_CLASS),
 
   // 지하철 노선도 관리
   mapPrintContainer: document.querySelector(Constant.MAP_PRINT_CONTAINER_CLASS),
@@ -64,6 +67,8 @@ export const ElementControl = {
   showSectionManager() {
     this.hideAllManagers();
     Element.sectionContainer.style.display = Constant.BLOCK;
+
+    SectionManager.isVisited ? SectionView.render() : SectionManager.init();
   },
 
   showMapPrintManager() {
diff --git a/src/view/section-view.js b/src/view/section-view.js
new file mode 100644
index 000000000..49114e1a0
--- /dev/null
+++ b/src/view/section-view.js
@@ -0,0 +1,20 @@
+import { Line } from "../model/line.js";
+import { Element } from "./element.js";
+
+export const SectionView = {
+  render() {
+    this.renderLineButton();
+  },
+
+  renderLineButton() {
+    let content = "";
+
+    Line.lines.forEach(({ name }) => {
+      content += `
+        <button class="section-line-menu-button" data-name="${name}">${name}</button>
+      `;
+    });
+
+    Element.sectionLineMenu.innerHTML = content;
+  },
+};
diff --git a/style.css b/style.css
index 58c26e40d..331291179 100644
--- a/style.css
+++ b/style.css
@@ -31,6 +31,10 @@ td {
   display: none;
 }
 
+.section-manager {
+  display: none;
+}
+
 #section-table {
   margin-top: 40px;
 }

From 9f89b53751f2290a1292fd83c1e7e8807b1ece5d Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 06:10:07 +0900
Subject: [PATCH 18/28] =?UTF-8?q?docs=20:=20=EA=B8=B0=EB=8A=A5=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=20=EC=99=84=EB=A3=8C=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/README.md | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 56a05d7a7..e8ee81da6 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -53,21 +53,24 @@
   - `삭제`
     - [x] `alert`를 통해 다시 물어본다.
     - [x] 지하철 역 목록에 반영한다.
+    - [ ] 누른 곳이 버튼인지 검증해야 한다.
 - 노선 관리
-  - 노선 목록을 조회한다.
+  - [x] 노선 목록을 조회한다.
   - `노선 추가`
     - [x] 상행 종점과 하행 종점 목록을 조회한다.
     - [x] 입력한 노선 이름이 중복인지 검증해야 한다.
     - [x] 노선의 상행 종점과 하행 종점이 동일한지 검증해야 한다.
     - [x] 노선의 이름이 다르면 상행 종점과 하행 종점이 중복될 수 있다.
-    - 노선 목록에 반영한다.
+    - [x] 노선 목록에 반영한다.
   - `삭제`
-    - `alert`를 통해 다시 물어본다.
-    - 노선 목록에 반영한다.
+    - [x] `alert`를 통해 다시 물어본다.
+    - [x] 노선 목록에 반영한다.
+    - [ ] 누른 곳이 버튼인지 검증해야 한다.
 - 구간 관리
-  - 구간을 수정할 노선의 목록을 조회한다. (버튼으로 출력)
-  - 노선을 선택하면 해당 노선의 구간 목록을 조회한다.
-    - 제목은 `(선택된 노선) 관리`를 출력한다.
+  - [x] 구간을 수정할 노선의 목록을 조회한다. (버튼으로 출력)
+  - [x] 노선을 선택하면 해당 노선의 구간 목록을 조회한다.
+    - [x] 제목은 `(선택된 노선) 관리`를 출력한다.
+    - [x] 누른 곳이 버튼인지 검증해야 한다.
   - `등록`
     - 입력한 역의 이름과 순서를 검증해야 한다.
     - 입력한 역의 이름이 중복인지 검증해야 한다.
@@ -77,6 +80,7 @@
     - 노선에 등록된 역이 두 개 이하인지 검증해야 한다. (두 개 이하인 경우에는 삭제 불가)
     - `alert`를 통해 다시 물어본다.
     - 구간 목록에 반영한다.
+    - 누른 곳이 버튼인지 검증해야 한다.
 - 지하철 노선도 관리
   - 각 노선의 역들을 조회한다.
 
@@ -105,15 +109,15 @@
 - [x] 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
 - [x] 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
 - [x] 지하철 노선을 추가하는 button 태그는 `#line-add-button` id값을 가진다.
-- [ ] 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
+- [x] 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
 
 ##### 지하철 구간 추가 기능
 
-- [ ] 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
+- [x] 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
 - [x] 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
 - [x] 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
 - [x] 지하철 구간을 등록하는 button 태그는 `#section-add-button` id값을 가진다.
-- [ ] 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
+- [x] 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
 
 ##### 지하철 노선도 출력 기능
 

From 8ef1ec11109fe0ccf63c61a84c189ec8f15627a5 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 06:10:54 +0900
Subject: [PATCH 19/28] =?UTF-8?q?feat=20:=20=EA=B5=AC=EA=B0=84=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20=EB=85=B8=EC=84=A0=EC=9D=84=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=ED=95=98=EB=A9=B4=20=ED=95=B4=EB=8B=B9=20=EB=85=B8?=
 =?UTF-8?q?=EC=84=A0=EC=9D=98=20=EA=B5=AC=EA=B0=84=20=EB=AA=A9=EB=A1=9D?=
 =?UTF-8?q?=EC=9D=84=20=EC=A1=B0=ED=9A=8C=ED=95=98=EB=8A=94=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                        |  4 +-
 src/controller/section-manager.js | 19 +++++++++-
 src/index.js                      |  8 ++--
 src/util/constant.js              |  4 ++
 src/view/element.js               | 33 +++++++++++-----
 src/view/line-view.js             |  8 ++--
 src/view/section-view.js          | 63 +++++++++++++++++++++++++++++--
 style.css                         |  2 +-
 8 files changed, 116 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 410c8e6f1..f6790847a 100644
--- a/index.html
+++ b/index.html
@@ -76,12 +76,12 @@ <h3>구간을 수정할 노선을 선택해주세요.</h3>
       <div class="section-line-menu"></div>
 
       <div class="section-manager">
-        <h3 class="section-manager-title">1호선 관리</h3>
+        <h3 class="section-manager-title"></h3>
         <h4>구간 등록</h4>
         <select id="section-station-selector"></select>
         <input id="section-order-input" placeholder="순서" />
         <button id="section-add-button">등록</button>
-        <table id="section-table">
+        <table id="section-container-table">
           <thead>
             <tr>
               <th>순서</th>
diff --git a/src/controller/section-manager.js b/src/controller/section-manager.js
index 5567823c3..b3e34b013 100644
--- a/src/controller/section-manager.js
+++ b/src/controller/section-manager.js
@@ -1,5 +1,8 @@
 import { Line } from "../model/line.js";
+import { Station } from "../model/station.js";
+import { Constant } from "../util/constant.js";
 import { Storage } from "../util/storage.js";
+import { Element, ElementControl } from "../view/element.js";
 import { SectionView } from "../view/section-view.js";
 
 export const SectionManager = {
@@ -7,9 +10,23 @@ export const SectionManager = {
 
   init() {
     this.isVisited = true;
+    Station.stations = Storage.load(Station.key);
     Line.lines = Storage.load(Line.key);
     SectionView.render();
+    this.setEventListener();
   },
 
-  setEventListener() {},
+  setEventListener() {
+    Element.sectionLineMenu.addEventListener(Constant.CLICK, (e) => {
+      this.onCLickLineButton(e);
+    });
+  },
+
+  onCLickLineButton(e) {
+    if (e.target.tagName !== Constant.BUTTON) {
+      return false;
+    }
+
+    SectionView.renderSectionManager(e);
+  },
 };
diff --git a/src/index.js b/src/index.js
index c08c7ffd0..d0b94168c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,19 +7,19 @@ const App = () => {
 
 const SubwayManager = () => {
   Element.stationManagerButton.addEventListener(Constant.CLICK, () => {
-    ElementControl.showStataionManger();
+    ElementControl.showStationContainer();
   });
 
   Element.lineManagerButton.addEventListener(Constant.CLICK, () => {
-    ElementControl.showLineManager();
+    ElementControl.showLineContainer();
   });
 
   Element.sectionManagerButton.addEventListener(Constant.CLICK, () => {
-    ElementControl.showSectionManager();
+    ElementControl.showSectionContainer();
   });
 
   Element.mapPrintManagerButton.addEventListener(Constant.CLICK, () => {
-    ElementControl.showMapPrintManager();
+    ElementControl.showMapPrintContainer();
   });
 };
 
diff --git a/src/util/constant.js b/src/util/constant.js
index 96ac3058d..3b5f2903a 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -23,6 +23,9 @@ export const Constant = {
   // 구간 관리
   SECTION_CONTAINER_CLASS: ".section-container",
   SECTION_LINE_MENU_CLASS: ".section-line-menu",
+  SECTION_MANAGER_CLASS: ".section-manager",
+  SECTION_MANAGER_TITLE_CLASS: ".section-manager-title",
+  SECTION_STATION_SELECTOR_ID: "#section-station-selector",
 
   // 지하철 노선 관리
   MAP_PRINT_CONTAINER_CLASS: ".map-print-container",
@@ -38,6 +41,7 @@ export const Constant = {
 
   // tag
   TBODY: "tbody",
+  BUTTON: "BUTTON",
 };
 
 export const ErrorMessage = {
diff --git a/src/view/element.js b/src/view/element.js
index 9e2ade236..9bda27cb8 100644
--- a/src/view/element.js
+++ b/src/view/element.js
@@ -37,42 +37,57 @@ export const Element = {
   // 구간 관리
   sectionContainer: document.querySelector(Constant.SECTION_CONTAINER_CLASS),
   sectionLineMenu: document.querySelector(Constant.SECTION_LINE_MENU_CLASS),
+  sectionManager: document.querySelector(Constant.SECTION_MANAGER_CLASS),
+  sectionManagerTitle: document.querySelector(
+    Constant.SECTION_MANAGER_TITLE_CLASS
+  ),
+  sectionStationSelector: document.querySelector(
+    Constant.SECTION_STATION_SELECTOR_ID
+  ),
 
   // 지하철 노선도 관리
   mapPrintContainer: document.querySelector(Constant.MAP_PRINT_CONTAINER_CLASS),
 };
 
 export const ElementControl = {
-  hideAllManagers() {
+  hideAllContainers() {
     Element.stationContainer.style.display = Constant.NONE;
     Element.lineContainer.style.display = Constant.NONE;
     Element.sectionContainer.style.display = Constant.NONE;
     Element.mapPrintContainer.style.display = Constant.NONE;
   },
 
-  showStataionManger() {
-    this.hideAllManagers();
+  showStationContainer() {
+    this.hideAllContainers();
     Element.stationContainer.style.display = Constant.BLOCK;
 
     StationManager.isVisited ? StationView.render() : StationManager.init();
   },
 
-  showLineManager() {
-    this.hideAllManagers();
+  showLineContainer() {
+    this.hideAllContainers();
     Element.lineContainer.style.display = Constant.BLOCK;
 
     LineManager.isVisited ? LineView.render() : LineManager.init();
   },
 
-  showSectionManager() {
-    this.hideAllManagers();
+  showSectionContainer() {
+    this.hideAllContainers();
     Element.sectionContainer.style.display = Constant.BLOCK;
 
     SectionManager.isVisited ? SectionView.render() : SectionManager.init();
   },
 
-  showMapPrintManager() {
-    this.hideAllManagers();
+  showSectionManager() {
+    Element.sectionManager.style.display = Constant.BLOCK;
+  },
+
+  hideSectionManager() {
+    Element.sectionManager.style.display = Constant.NONE;
+  },
+
+  showMapPrintContainer() {
+    this.hideAllContainers();
     Element.mapPrintContainer.style.display = Constant.BLOCK;
   },
 
diff --git a/src/view/line-view.js b/src/view/line-view.js
index 74b0e46e8..abae4870c 100644
--- a/src/view/line-view.js
+++ b/src/view/line-view.js
@@ -5,11 +5,11 @@ import { Element } from "./element.js";
 
 export const LineView = {
   render() {
-    this.renderSelector();
-    this.renderTable();
+    this.renderLineStartEndSelector();
+    this.renderLineContainerTable();
   },
 
-  renderSelector() {
+  renderLineStartEndSelector() {
     let content = "";
 
     Station.stations.forEach((station) => {
@@ -22,7 +22,7 @@ export const LineView = {
     Element.lineEndStationSelector.innerHTML = content;
   },
 
-  renderTable() {
+  renderLineContainerTable() {
     let content = "";
 
     Line.lines.forEach(({ name, stations }) => {
diff --git a/src/view/section-view.js b/src/view/section-view.js
index 49114e1a0..f4c8d8578 100644
--- a/src/view/section-view.js
+++ b/src/view/section-view.js
@@ -1,20 +1,75 @@
 import { Line } from "../model/line.js";
-import { Element } from "./element.js";
+import { Station } from "../model/station.js";
+import { Constant } from "../util/constant.js";
+import { Element, ElementControl } from "./element.js";
 
 export const SectionView = {
   render() {
-    this.renderLineButton();
+    this.renderSectionLineMenuButton();
+    ElementControl.hideSectionManager();
   },
 
-  renderLineButton() {
+  renderSectionLineMenuButton() {
     let content = "";
 
     Line.lines.forEach(({ name }) => {
       content += `
-        <button class="section-line-menu-button" data-name="${name}">${name}</button>
+        <button class="section-line-menu-button" data-name="${name}">
+          ${name}
+        </button>
       `;
     });
 
     Element.sectionLineMenu.innerHTML = content;
   },
+
+  renderSectionManager(e) {
+    const line = e.target.dataset.name;
+
+    this.renderSectionManagerTitle(line);
+    this.renderSectionStationSelector();
+    this.renderSectionContainerTable(line);
+
+    ElementControl.showSectionManager();
+  },
+
+  renderSectionManagerTitle(line) {
+    const sectionManagerTitleContent = `${line} 관리`;
+
+    Element.sectionManagerTitle.innerHTML = sectionManagerTitleContent;
+  },
+
+  renderSectionStationSelector() {
+    let content = "";
+
+    Station.stations.forEach((station) => {
+      content += `
+        <option value="${station}">${station}</option>
+      `;
+    });
+
+    Element.sectionStationSelector.innerHTML = content;
+  },
+
+  renderSectionContainerTable(line) {
+    const stationArray = Line.lines.filter(({ name }) => name === line)[0]
+      .stations;
+    let content = "";
+
+    for (let i = 0; i < stationArray.length; i++) {
+      content += `
+        <tr>
+          <td style="text-align: center">${i}</td>
+          <td>${stationArray[i]}</td>
+          <td>
+            <button class="section-delete-button" data-name="${stationArray[i]}">
+              노선에서 제거
+            </button>
+          </td>
+        </tr>
+      `;
+    }
+
+    Element.sectionContainer.querySelector(Constant.TBODY).innerHTML = content;
+  },
 };
diff --git a/style.css b/style.css
index 331291179..5a7579515 100644
--- a/style.css
+++ b/style.css
@@ -35,7 +35,7 @@ td {
   display: none;
 }
 
-#section-table {
+#section-container-table {
   margin-top: 40px;
 }
 

From 312f015dcae9bdf8c497f48f9481b5d452782d60 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 12:02:21 +0900
Subject: [PATCH 20/28] =?UTF-8?q?feat=20:=20=EA=B5=AC=EA=B0=84=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20=EB=93=B1=EB=A1=9D=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                        |  2 +-
 src/controller/section-manager.js | 22 ++++++++++++-
 src/model/section.js              | 20 ++++++++++++
 src/util/constant.js              |  7 ++++
 src/util/validation.js            | 53 +++++++++++++++++++++++++++++++
 src/view/element.js               |  2 ++
 src/view/section-view.js          |  5 ++-
 7 files changed, 106 insertions(+), 5 deletions(-)
 create mode 100644 src/model/section.js

diff --git a/index.html b/index.html
index f6790847a..0fd4aa3b3 100644
--- a/index.html
+++ b/index.html
@@ -79,7 +79,7 @@ <h3>구간을 수정할 노선을 선택해주세요.</h3>
         <h3 class="section-manager-title"></h3>
         <h4>구간 등록</h4>
         <select id="section-station-selector"></select>
-        <input id="section-order-input" placeholder="순서" />
+        <input type="number" id="section-order-input" placeholder="순서" />
         <button id="section-add-button">등록</button>
         <table id="section-container-table">
           <thead>
diff --git a/src/controller/section-manager.js b/src/controller/section-manager.js
index b3e34b013..ea3ba45bc 100644
--- a/src/controller/section-manager.js
+++ b/src/controller/section-manager.js
@@ -1,12 +1,16 @@
 import { Line } from "../model/line.js";
+import { Section } from "../model/section.js";
 import { Station } from "../model/station.js";
 import { Constant } from "../util/constant.js";
 import { Storage } from "../util/storage.js";
+import { SectionValidation } from "../util/validation.js";
 import { Element, ElementControl } from "../view/element.js";
 import { SectionView } from "../view/section-view.js";
+import { StationView } from "../view/station-view.js";
 
 export const SectionManager = {
   isVisited: false,
+  selectedLine: "",
 
   init() {
     this.isVisited = true;
@@ -20,6 +24,10 @@ export const SectionManager = {
     Element.sectionLineMenu.addEventListener(Constant.CLICK, (e) => {
       this.onCLickLineButton(e);
     });
+
+    Element.sectionAddButton.addEventListener(Constant.CLICK, () => {
+      this.onClickAddButton();
+    });
   },
 
   onCLickLineButton(e) {
@@ -27,6 +35,18 @@ export const SectionManager = {
       return false;
     }
 
-    SectionView.renderSectionManager(e);
+    this.selectedLine = e.target.dataset.name;
+    SectionView.renderSectionManager(this.selectedLine);
+  },
+
+  onClickAddButton() {
+    const station = Element.sectionStationSelector.value;
+    const order = Element.sectionOrderInupt.value;
+
+    if (SectionValidation.isValidSection(station, order, this.selectedLine)) {
+      Section.add(station, order, this.selectedLine);
+      SectionView.renderSectionManager(this.selectedLine);
+    }
+    ElementControl.clearInput(Element.sectionOrderInupt);
   },
 };
diff --git a/src/model/section.js b/src/model/section.js
new file mode 100644
index 000000000..77841dc83
--- /dev/null
+++ b/src/model/section.js
@@ -0,0 +1,20 @@
+import { Storage } from "../util/storage.js";
+import { Line } from "./line.js";
+
+export const Section = {
+  add(station, order, line) {
+    const stationArray = Line.lines.filter(({ name }) => name === line)[0]
+      .stations;
+
+    //
+    stationArray.splice(order, 0, station);
+    Storage.save(Line.key, Line.lines);
+    // 원래 index에 넣기 - 인덱스 구해서 넣고 다음 인덱스 삭제
+    // 교체하면 안될까?
+    // console.log(Line.lines);
+    // Line.lines.forEach(({ name, stations }) => {
+    //   console.log(name, stations);
+    // })
+    // Line.lines = Line.lines.filter(({ name }) => name !== line);
+  },
+};
diff --git a/src/util/constant.js b/src/util/constant.js
index 3b5f2903a..0ec100e05 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -26,6 +26,8 @@ export const Constant = {
   SECTION_MANAGER_CLASS: ".section-manager",
   SECTION_MANAGER_TITLE_CLASS: ".section-manager-title",
   SECTION_STATION_SELECTOR_ID: "#section-station-selector",
+  SECTION_ADD_BUTTON_ID: "#section-add-button",
+  SECTION_ORDER_INPUT_ID: "#section-order-input",
 
   // 지하철 노선 관리
   MAP_PRINT_CONTAINER_CLASS: ".map-print-container",
@@ -33,6 +35,7 @@ export const Constant = {
   //
   MINIMUM_NAME_LENGTH: 2,
   REGEX_CATCHING_WHITESPACE: /^\s*$/,
+  REGEX_CATCHING_INTEGER: /^[0-9 ()+-]+$/,
 
   // etc
   CLICK: "click",
@@ -54,6 +57,10 @@ export const ErrorMessage = {
   // 노선 관리
   NAME_WHITE_SPACE: "공백이 아닌 노선 이름을 입력해 주세요.",
   SAME_START_END_STATION: "서로 다른 종점을 선택해 주세요.",
+
+  // 구간 관리
+  NOT_INTEGER_ORDER: "1 이상 정수의 순서를 입력해 주세요.",
+  MINIMUM_ORDER: "1 이상의 순서를 입력해 주세요.",
 };
 
 export const ConfirmMessage = {
diff --git a/src/util/validation.js b/src/util/validation.js
index a27ecdcec..8de6dd04c 100644
--- a/src/util/validation.js
+++ b/src/util/validation.js
@@ -76,3 +76,56 @@ export const LineValidation = {
     return !stationNameArray.includes(name);
   },
 };
+
+export const SectionValidation = {
+  isValidSection(station, order, selectedLine) {
+    return (
+      this.hasValidName(station, selectedLine) &&
+      this.hasValidOrder(order, selectedLine)
+    );
+  },
+
+  hasValidName(station, selectedLine) {
+    if (!this.isNotDuplicated(station, selectedLine)) {
+      alert(ErrorMessage.DUPLICATED_NAME);
+
+      return;
+    }
+
+    return true;
+  },
+
+  hasValidOrder(order, selectedLine) {
+    const stationArray = Line.lines.filter(
+      ({ name }) => name === selectedLine
+    )[0].stations;
+
+    if (!Constant.REGEX_CATCHING_INTEGER.test(order)) {
+      alert(ErrorMessage.NOT_INTEGER_ORDER);
+
+      return;
+    }
+
+    if (order < 1) {
+      alert(ErrorMessage.MINIMUM_ORDER);
+
+      return;
+    }
+
+    if (order > stationArray.length - 1) {
+      alert(`${stationArray.length - 1} 이하의 순서를 입력해 주세요.`);
+
+      return;
+    }
+
+    return true;
+  },
+
+  isNotDuplicated(station, selectedLine) {
+    const stationArray = Line.lines.filter(
+      ({ name }) => name === selectedLine
+    )[0].stations;
+
+    return !stationArray.includes(station);
+  },
+};
diff --git a/src/view/element.js b/src/view/element.js
index 9bda27cb8..4c9352e5c 100644
--- a/src/view/element.js
+++ b/src/view/element.js
@@ -44,6 +44,8 @@ export const Element = {
   sectionStationSelector: document.querySelector(
     Constant.SECTION_STATION_SELECTOR_ID
   ),
+  sectionAddButton: document.querySelector(Constant.SECTION_ADD_BUTTON_ID),
+  sectionOrderInupt: document.querySelector(Constant.SECTION_ORDER_INPUT_ID),
 
   // 지하철 노선도 관리
   mapPrintContainer: document.querySelector(Constant.MAP_PRINT_CONTAINER_CLASS),
diff --git a/src/view/section-view.js b/src/view/section-view.js
index f4c8d8578..4d10950a1 100644
--- a/src/view/section-view.js
+++ b/src/view/section-view.js
@@ -6,6 +6,7 @@ import { Element, ElementControl } from "./element.js";
 export const SectionView = {
   render() {
     this.renderSectionLineMenuButton();
+
     ElementControl.hideSectionManager();
   },
 
@@ -23,9 +24,7 @@ export const SectionView = {
     Element.sectionLineMenu.innerHTML = content;
   },
 
-  renderSectionManager(e) {
-    const line = e.target.dataset.name;
-
+  renderSectionManager(line) {
     this.renderSectionManagerTitle(line);
     this.renderSectionStationSelector();
     this.renderSectionContainerTable(line);

From 7cdbd99951d2f5020bba585d1ac681ac6e5d377a Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 14:03:31 +0900
Subject: [PATCH 21/28] =?UTF-8?q?feat=20:=20=EA=B5=AC=EA=B0=84=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20=EB=85=B8=EC=84=A0=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/controller/section-manager.js | 31 +++++++++++++++++++++++++++----
 src/model/section.js              |  8 ++++++++
 src/util/constant.js              |  7 +++++--
 src/util/validation.js            | 13 ++++++++++---
 src/view/section-view.js          |  2 +-
 5 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/controller/section-manager.js b/src/controller/section-manager.js
index ea3ba45bc..53093fe72 100644
--- a/src/controller/section-manager.js
+++ b/src/controller/section-manager.js
@@ -1,7 +1,7 @@
 import { Line } from "../model/line.js";
 import { Section } from "../model/section.js";
 import { Station } from "../model/station.js";
-import { Constant } from "../util/constant.js";
+import { ConfirmMessage, Constant, ErrorMessage } from "../util/constant.js";
 import { Storage } from "../util/storage.js";
 import { SectionValidation } from "../util/validation.js";
 import { Element, ElementControl } from "../view/element.js";
@@ -22,19 +22,24 @@ export const SectionManager = {
 
   setEventListener() {
     Element.sectionLineMenu.addEventListener(Constant.CLICK, (e) => {
-      this.onCLickLineButton(e);
+      this.onClickLineButton(e);
     });
 
     Element.sectionAddButton.addEventListener(Constant.CLICK, () => {
       this.onClickAddButton();
     });
+
+    Element.sectionContainer
+      .querySelector(Constant.TBODY)
+      .addEventListener(Constant.CLICK, (e) => {
+        this.onClickDeleteButton(e);
+      });
   },
 
-  onCLickLineButton(e) {
+  onClickLineButton(e) {
     if (e.target.tagName !== Constant.BUTTON) {
       return false;
     }
-
     this.selectedLine = e.target.dataset.name;
     SectionView.renderSectionManager(this.selectedLine);
   },
@@ -49,4 +54,22 @@ export const SectionManager = {
     }
     ElementControl.clearInput(Element.sectionOrderInupt);
   },
+
+  onClickDeleteButton(e) {
+    const idx = e.target.dataset.idx;
+
+    if (e.target.tagName !== Constant.BUTTON) {
+      return false;
+    }
+
+    if (confirm(ConfirmMessage.CHECK_DELETION_FROM_LINE)) {
+      if (!SectionValidation.hasMinimumStations(this.selectedLine)) {
+        alert(ErrorMessage.MINIMUM_STATIONS);
+
+        return;
+      }
+      Section.delete(idx, this.selectedLine);
+      SectionView.renderSectionManager(this.selectedLine);
+    }
+  },
 };
diff --git a/src/model/section.js b/src/model/section.js
index 77841dc83..63f80097c 100644
--- a/src/model/section.js
+++ b/src/model/section.js
@@ -17,4 +17,12 @@ export const Section = {
     // })
     // Line.lines = Line.lines.filter(({ name }) => name !== line);
   },
+
+  delete(idx, line) {
+    const stationArray = Line.lines.filter(({ name }) => name === line)[0]
+      .stations;
+
+    stationArray.splice(idx, 1);
+    Storage.save(Line.key, Line.lines);
+  },
 };
diff --git a/src/util/constant.js b/src/util/constant.js
index 0ec100e05..218d9ebf9 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -32,8 +32,8 @@ export const Constant = {
   // 지하철 노선 관리
   MAP_PRINT_CONTAINER_CLASS: ".map-print-container",
 
-  //
-  MINIMUM_NAME_LENGTH: 2,
+  // validation
+  MINIMUM_LENGTH: 2,
   REGEX_CATCHING_WHITESPACE: /^\s*$/,
   REGEX_CATCHING_INTEGER: /^[0-9 ()+-]+$/,
 
@@ -61,8 +61,11 @@ export const ErrorMessage = {
   // 구간 관리
   NOT_INTEGER_ORDER: "1 이상 정수의 순서를 입력해 주세요.",
   MINIMUM_ORDER: "1 이상의 순서를 입력해 주세요.",
+  MINIMUM_STATIONS:
+    "노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없습니다.",
 };
 
 export const ConfirmMessage = {
   CHECK_DELETION: "정말로 삭제하시겠습니까?",
+  CHECK_DELETION_FROM_LINE: "정말로 노선에서 삭제하시겠습니까?",
 };
diff --git a/src/util/validation.js b/src/util/validation.js
index 8de6dd04c..7eac30226 100644
--- a/src/util/validation.js
+++ b/src/util/validation.js
@@ -25,7 +25,7 @@ export const StationValidation = {
 
   hasMinimumLength(name) {
     return (
-      name.length >= Constant.MINIMUM_NAME_LENGTH &&
+      name.length >= Constant.MINIMUM_LENGTH &&
       !Constant.REGEX_CATCHING_WHITESPACE.test(name)
     );
   },
@@ -37,7 +37,7 @@ export const StationValidation = {
 
 export const LineValidation = {
   isValidLine(name, start, end) {
-    return this.hasValidName(name) && this.hasValidStartEndStation(start, end);
+    return this.hasValidName(name) && this.hasValidStartEndStations(start, end);
   },
 
   hasValidName(name) {
@@ -56,7 +56,7 @@ export const LineValidation = {
     return true;
   },
 
-  hasValidStartEndStation(start, end) {
+  hasValidStartEndStations(start, end) {
     if (start === end) {
       alert(ErrorMessage.SAME_START_END_STATION);
 
@@ -128,4 +128,11 @@ export const SectionValidation = {
 
     return !stationArray.includes(station);
   },
+
+  hasMinimumStations(selectedLine) {
+    return (
+      Line.lines.filter(({ name }) => name === selectedLine)[0].stations
+        .length > Constant.MINIMUM_LENGTH
+    );
+  },
 };
diff --git a/src/view/section-view.js b/src/view/section-view.js
index 4d10950a1..4a2763e51 100644
--- a/src/view/section-view.js
+++ b/src/view/section-view.js
@@ -61,7 +61,7 @@ export const SectionView = {
           <td style="text-align: center">${i}</td>
           <td>${stationArray[i]}</td>
           <td>
-            <button class="section-delete-button" data-name="${stationArray[i]}">
+            <button class="section-delete-button" data-name="${stationArray[i]}" data-idx=${i}>
               노선에서 제거
             </button>
           </td>

From 491cc20061630cf10c367e64cddc6e1131641693 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 15:25:30 +0900
Subject: [PATCH 22/28] =?UTF-8?q?docs=20:=20=EA=B5=AC=ED=98=84=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=EB=90=9C=20=EA=B8=B0=EB=8A=A5=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/README.md | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index e8ee81da6..283a986a8 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -54,6 +54,7 @@
     - [x] `alert`를 통해 다시 물어본다.
     - [x] 지하철 역 목록에 반영한다.
     - [ ] 누른 곳이 버튼인지 검증해야 한다.
+    - [ ] 노선(전체 구간)에 포함되어 있는지 검증해야 한다.
 - 노선 관리
   - [x] 노선 목록을 조회한다.
   - `노선 추가`
@@ -72,17 +73,17 @@
     - [x] 제목은 `(선택된 노선) 관리`를 출력한다.
     - [x] 누른 곳이 버튼인지 검증해야 한다.
   - `등록`
-    - 입력한 역의 이름과 순서를 검증해야 한다.
-    - 입력한 역의 이름이 중복인지 검증해야 한다.
-    - 역과 역 사이(구간)인지 검증해야 한다.
-    - 구간 목록에 반영한다.
+    - [x] 입력한 역의 이름과 순서를 검증해야 한다.
+    - [x] 입력한 역의 이름이 중복인지 검증해야 한다.
+    - [x] 역과 역 사이(구간)인지 검증해야 한다.
+    - [x] 구간 목록에 반영한다.
   - `노선에서 제거`
-    - 노선에 등록된 역이 두 개 이하인지 검증해야 한다. (두 개 이하인 경우에는 삭제 불가)
-    - `alert`를 통해 다시 물어본다.
-    - 구간 목록에 반영한다.
-    - 누른 곳이 버튼인지 검증해야 한다.
+    - [x] 노선에 등록된 역이 두 개 이하인지 검증해야 한다. (두 개 이하인 경우에는 삭제 불가)
+    - [x] `alert`를 통해 다시 물어본다.
+    - [x] 구간 목록에 반영한다.
+    - [x] 누른 곳이 버튼인지 검증해야 한다.
 - 지하철 노선도 관리
-  - 각 노선의 역들을 조회한다.
+  - [x] 각 노선의 역들을 조회한다.
 
 <br/>
 
@@ -121,7 +122,7 @@
 
 ##### 지하철 노선도 출력 기능
 
-- [ ] 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
+- [x] 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
 
 ### 2.2 프로그래밍 요구사항
 

From cf6a422d3d8182a6002b606a73b8beaedd37d3e8 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 15:27:09 +0900
Subject: [PATCH 23/28] =?UTF-8?q?feat=20:=20=EC=A7=80=ED=95=98=EC=B2=A0=20?=
 =?UTF-8?q?=EB=85=B8=EC=84=A0=EB=8F=84=20=EA=B4=80=EB=A6=AC=20-=20?=
 =?UTF-8?q?=EA=B0=81=20=EB=85=B8=EC=84=A0=EB=93=A4=EC=9D=98=20=EC=97=AD=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                    |  2 --
 src/controller/map-manager.js | 15 +++++++++++++++
 src/view/element.js           |  4 ++++
 src/view/map-view.js          | 20 ++++++++++++++++++++
 4 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/controller/map-manager.js
 create mode 100644 src/view/map-view.js

diff --git a/index.html b/index.html
index 0fd4aa3b3..7870cda8d 100644
--- a/index.html
+++ b/index.html
@@ -96,8 +96,6 @@ <h4>구간 등록</h4>
 
     <!-- 4. 지하철 노선도 출력 -->
     <div class="map-print-container">
-      <!-- test -->
-      <label>map-print-container</label>
     </div>
 
     <script type="module" src="src/index.js"></script>
diff --git a/src/controller/map-manager.js b/src/controller/map-manager.js
new file mode 100644
index 000000000..0fb3aaaba
--- /dev/null
+++ b/src/controller/map-manager.js
@@ -0,0 +1,15 @@
+import { Line } from "../model/line.js";
+import { Station } from "../model/station.js";
+import { Storage } from "../util/storage.js";
+import { MapView } from "../view/map-view.js";
+
+export const MapManager = {
+  isVisited: false,
+
+  init() {
+    this.isVisited = true;
+    Station.stations = Storage.load(Station.key);
+    Line.lines = Storage.load(Line.key);
+    MapView.render();
+  }
+}
\ No newline at end of file
diff --git a/src/view/element.js b/src/view/element.js
index 4c9352e5c..75cd4b1f0 100644
--- a/src/view/element.js
+++ b/src/view/element.js
@@ -5,6 +5,8 @@ import { LineManager } from "../controller/line-manager.js";
 import { LineView } from "./line-view.js";
 import { SectionManager } from "../controller/section-manager.js";
 import { SectionView } from "./section-view.js";
+import { MapView } from "./map-view.js";
+import { MapManager } from "../controller/map-manager.js";
 
 export const Element = {
   // 초기 화면 버튼
@@ -91,6 +93,8 @@ export const ElementControl = {
   showMapPrintContainer() {
     this.hideAllContainers();
     Element.mapPrintContainer.style.display = Constant.BLOCK;
+
+    MapManager.isVisited ? MapView.render() : MapManager.init();
   },
 
   clearInput(element) {
diff --git a/src/view/map-view.js b/src/view/map-view.js
new file mode 100644
index 000000000..ca443f963
--- /dev/null
+++ b/src/view/map-view.js
@@ -0,0 +1,20 @@
+import { Line } from "../model/line.js"
+import { Element } from "./element.js";
+
+export const MapView = {
+  render() {
+    let content = '<div class="map">';
+
+    Line.lines.forEach(({ name, stations }) => {
+      content += `<h3>${name}</h3><ul>`;
+
+      stations.forEach((station) => {
+        content += `<li>${station}</li>`;
+      })
+      content += '</ul>';
+    })
+    content += '</div>';
+
+    Element.mapPrintContainer.innerHTML = content;
+  }
+}
\ No newline at end of file

From ecf9b99600d030ad093d5f32184ea2958fb18293 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 18:25:18 +0900
Subject: [PATCH 24/28] =?UTF-8?q?docs=20:=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20=EC=99=84=EB=A3=8C=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/docs/README.md b/docs/README.md
index 283a986a8..153892505 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -53,8 +53,8 @@
   - `삭제`
     - [x] `alert`를 통해 다시 물어본다.
     - [x] 지하철 역 목록에 반영한다.
-    - [ ] 누른 곳이 버튼인지 검증해야 한다.
-    - [ ] 노선(전체 구간)에 포함되어 있는지 검증해야 한다.
+    - [x] 누른 곳이 버튼인지 검증해야 한다.
+    - [x] 노선(전체 구간)에 포함되어 있는지 검증해야 한다.
 - 노선 관리
   - [x] 노선 목록을 조회한다.
   - `노선 추가`
@@ -66,7 +66,7 @@
   - `삭제`
     - [x] `alert`를 통해 다시 물어본다.
     - [x] 노선 목록에 반영한다.
-    - [ ] 누른 곳이 버튼인지 검증해야 한다.
+    - [x] 누른 곳이 버튼인지 검증해야 한다.
 - 구간 관리
   - [x] 구간을 수정할 노선의 목록을 조회한다. (버튼으로 출력)
   - [x] 노선을 선택하면 해당 노선의 구간 목록을 조회한다.

From bb6efac993c0b72f5a837f2cd0afdb2631d9adba Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 18:27:18 +0900
Subject: [PATCH 25/28] =?UTF-8?q?feat=20:=20=20=EC=97=AD=EC=9D=B4=20?=
 =?UTF-8?q?=EB=85=B8=EC=84=A0=EC=97=90=20=ED=8F=AC=ED=95=A8=EB=90=98?=
 =?UTF-8?q?=EC=96=B4=20=EC=9E=88=EB=8A=94=EC=A7=80=20=EA=B2=80=EC=A6=9D?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?=EB=B0=8F=20null=20guard=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                  |  3 +--
 src/controller/line-manager.js              | 10 +++++++--
 src/controller/map-manager.js               | 15 --------------
 src/controller/map-print-manager.js         | 17 +++++++++++++++
 src/controller/section-manager.js           | 11 +++++-----
 src/controller/station-manager.js           | 23 ++++++++++++++-------
 src/model/section.js                        |  8 -------
 src/util/constant.js                        |  8 +++----
 src/util/validation.js                      | 20 ++++++++++++++++++
 src/view/element.js                         |  6 +++---
 src/view/{map-view.js => map-print-view.js} | 16 +++++++-------
 11 files changed, 81 insertions(+), 56 deletions(-)
 delete mode 100644 src/controller/map-manager.js
 create mode 100644 src/controller/map-print-manager.js
 rename src/view/{map-view.js => map-print-view.js} (68%)

diff --git a/index.html b/index.html
index 7870cda8d..d2cda19c3 100644
--- a/index.html
+++ b/index.html
@@ -95,8 +95,7 @@ <h4>구간 등록</h4>
     </div>
 
     <!-- 4. 지하철 노선도 출력 -->
-    <div class="map-print-container">
-    </div>
+    <div class="map-print-container"></div>
 
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/controller/line-manager.js b/src/controller/line-manager.js
index c09142545..0c30d56e5 100644
--- a/src/controller/line-manager.js
+++ b/src/controller/line-manager.js
@@ -11,8 +11,10 @@ export const LineManager = {
 
   init() {
     this.isVisited = true;
-    Station.stations = Storage.load(Station.key);
-    Line.lines = Storage.load(Line.key);
+    Station.stations = Storage.load(Station.key)
+      ? Storage.load(Station.key)
+      : [];
+    Line.lines = Storage.load(Line.key) ? Storage.load(Line.key) : [];
     LineView.render();
     this.setEventListener();
   },
@@ -44,6 +46,10 @@ export const LineManager = {
   onClickDeleteButton(e) {
     const name = e.target.dataset.name;
 
+    if (e.target.tagName !== Constant.BUTTON) {
+      return;
+    }
+
     if (confirm(ConfirmMessage.CHECK_DELETION)) {
       Line.delete(name);
       LineView.render();
diff --git a/src/controller/map-manager.js b/src/controller/map-manager.js
deleted file mode 100644
index 0fb3aaaba..000000000
--- a/src/controller/map-manager.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Line } from "../model/line.js";
-import { Station } from "../model/station.js";
-import { Storage } from "../util/storage.js";
-import { MapView } from "../view/map-view.js";
-
-export const MapManager = {
-  isVisited: false,
-
-  init() {
-    this.isVisited = true;
-    Station.stations = Storage.load(Station.key);
-    Line.lines = Storage.load(Line.key);
-    MapView.render();
-  }
-}
\ No newline at end of file
diff --git a/src/controller/map-print-manager.js b/src/controller/map-print-manager.js
new file mode 100644
index 000000000..b91ab826c
--- /dev/null
+++ b/src/controller/map-print-manager.js
@@ -0,0 +1,17 @@
+import { Line } from "../model/line.js";
+import { Station } from "../model/station.js";
+import { Storage } from "../util/storage.js";
+import { MapPrintView } from "../view/map-print-view.js";
+
+export const MapPrintManager = {
+  isVisited: false,
+
+  init() {
+    this.isVisited = true;
+    Station.stations = Storage.load(Station.key)
+      ? Storage.load(Station.key)
+      : [];
+    Line.lines = Storage.load(Line.key) ? Storage.load(Line.key) : [];
+    MapPrintView.render();
+  },
+};
diff --git a/src/controller/section-manager.js b/src/controller/section-manager.js
index 53093fe72..3c7884c3f 100644
--- a/src/controller/section-manager.js
+++ b/src/controller/section-manager.js
@@ -6,7 +6,6 @@ import { Storage } from "../util/storage.js";
 import { SectionValidation } from "../util/validation.js";
 import { Element, ElementControl } from "../view/element.js";
 import { SectionView } from "../view/section-view.js";
-import { StationView } from "../view/station-view.js";
 
 export const SectionManager = {
   isVisited: false,
@@ -14,8 +13,10 @@ export const SectionManager = {
 
   init() {
     this.isVisited = true;
-    Station.stations = Storage.load(Station.key);
-    Line.lines = Storage.load(Line.key);
+    Station.stations = Storage.load(Station.key)
+      ? Storage.load(Station.key)
+      : [];
+    Line.lines = Storage.load(Line.key) ? Storage.load(Line.key) : [];
     SectionView.render();
     this.setEventListener();
   },
@@ -50,8 +51,8 @@ export const SectionManager = {
 
     if (SectionValidation.isValidSection(station, order, this.selectedLine)) {
       Section.add(station, order, this.selectedLine);
-      SectionView.renderSectionManager(this.selectedLine);
     }
+    SectionView.renderSectionManager(this.selectedLine);
     ElementControl.clearInput(Element.sectionOrderInupt);
   },
 
@@ -59,7 +60,7 @@ export const SectionManager = {
     const idx = e.target.dataset.idx;
 
     if (e.target.tagName !== Constant.BUTTON) {
-      return false;
+      return;
     }
 
     if (confirm(ConfirmMessage.CHECK_DELETION_FROM_LINE)) {
diff --git a/src/controller/station-manager.js b/src/controller/station-manager.js
index 0a47e0830..bef65abd3 100644
--- a/src/controller/station-manager.js
+++ b/src/controller/station-manager.js
@@ -1,5 +1,6 @@
+import { Line } from "../model/line.js";
 import { Station } from "../model/station.js";
-import { ConfirmMessage, Constant } from "../util/constant.js";
+import { ConfirmMessage, Constant, ErrorMessage } from "../util/constant.js";
 import { Storage } from "../util/storage.js";
 import { StationValidation } from "../util/validation.js";
 import { Element, ElementControl } from "../view/element.js";
@@ -10,22 +11,19 @@ export const StationManager = {
 
   init() {
     this.isVisited = true;
-    Station.stations = Storage.load(Station.key);
+    Station.stations = Storage.load(Station.key)
+      ? Storage.load(Station.key)
+      : [];
+    Line.lines = Storage.load(Line.key) ? Storage.load(Line.key) : [];
     StationView.render();
     this.setEventListener();
   },
 
   setEventListener() {
-    // 추가
     Element.stationAddButton.addEventListener(Constant.CLICK, () => {
       this.onClickAddButton();
     });
 
-    // 삭제
-    // Element.stationDeleteButton
-    // document.querySelector(Constant.STATION_DELELE_BUTTON_CLASS).addEventListener(Constant.CLICK, (e) => {
-    //   this.onClickDeleteBtn(e);
-    // });
     Element.stationContainer
       .querySelector(Constant.TBODY)
       .addEventListener(Constant.CLICK, (e) => {
@@ -46,7 +44,16 @@ export const StationManager = {
   onClickDeleteButton(e) {
     const name = e.target.dataset.name;
 
+    if (e.target.tagName !== Constant.BUTTON) {
+      return;
+    }
+
     if (confirm(ConfirmMessage.CHECK_DELETION)) {
+      if (!StationValidation.isValidStatonDeletion(name)) {
+        alert(ErrorMessage.STATION_RELATED_LINE);
+
+        return;
+      }
       Station.delete(name);
       StationView.render();
     }
diff --git a/src/model/section.js b/src/model/section.js
index 63f80097c..c1c4c9484 100644
--- a/src/model/section.js
+++ b/src/model/section.js
@@ -6,16 +6,8 @@ export const Section = {
     const stationArray = Line.lines.filter(({ name }) => name === line)[0]
       .stations;
 
-    //
     stationArray.splice(order, 0, station);
     Storage.save(Line.key, Line.lines);
-    // 원래 index에 넣기 - 인덱스 구해서 넣고 다음 인덱스 삭제
-    // 교체하면 안될까?
-    // console.log(Line.lines);
-    // Line.lines.forEach(({ name, stations }) => {
-    //   console.log(name, stations);
-    // })
-    // Line.lines = Line.lines.filter(({ name }) => name !== line);
   },
 
   delete(idx, line) {
diff --git a/src/util/constant.js b/src/util/constant.js
index 218d9ebf9..0b0c23545 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -37,12 +37,10 @@ export const Constant = {
   REGEX_CATCHING_WHITESPACE: /^\s*$/,
   REGEX_CATCHING_INTEGER: /^[0-9 ()+-]+$/,
 
-  // etc
+  // tag 관련
   CLICK: "click",
   NONE: "none",
   BLOCK: "block",
-
-  // tag
   TBODY: "tbody",
   BUTTON: "BUTTON",
 };
@@ -53,6 +51,7 @@ export const ErrorMessage = {
 
   // 역 관리
   MINIMUM_NAME_LENGTH: "공백이 아닌 2글자 이상의 역 이름을 입력해 주세요.",
+  STATION_RELATED_LINE: "노선에 포함된 역은 제거할 수 없습니다.",
 
   // 노선 관리
   NAME_WHITE_SPACE: "공백이 아닌 노선 이름을 입력해 주세요.",
@@ -61,8 +60,7 @@ export const ErrorMessage = {
   // 구간 관리
   NOT_INTEGER_ORDER: "1 이상 정수의 순서를 입력해 주세요.",
   MINIMUM_ORDER: "1 이상의 순서를 입력해 주세요.",
-  MINIMUM_STATIONS:
-    "노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없습니다.",
+  MINIMUM_STATIONS: "노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없습니다.",
 };
 
 export const ConfirmMessage = {
diff --git a/src/util/validation.js b/src/util/validation.js
index 7eac30226..2fc6ed235 100644
--- a/src/util/validation.js
+++ b/src/util/validation.js
@@ -33,6 +33,18 @@ export const StationValidation = {
   isNotDuplicated(name) {
     return !Station.stations.includes(name);
   },
+
+  isValidStatonDeletion(station) {
+    let isValid = true;
+
+    Line.lines.forEach(({ stations }) => {
+      if (stations.includes(station)) {
+        isValid = false;
+      }
+    });
+
+    return isValid;
+  },
 };
 
 export const LineValidation = {
@@ -106,6 +118,14 @@ export const SectionValidation = {
       return;
     }
 
+    if (!this.hasValidNumberRange(order, stationArray)) {
+      return;
+    }
+
+    return true;
+  },
+
+  hasValidNumberRange(order, stationArray) {
     if (order < 1) {
       alert(ErrorMessage.MINIMUM_ORDER);
 
diff --git a/src/view/element.js b/src/view/element.js
index 75cd4b1f0..4fe778790 100644
--- a/src/view/element.js
+++ b/src/view/element.js
@@ -5,8 +5,8 @@ import { LineManager } from "../controller/line-manager.js";
 import { LineView } from "./line-view.js";
 import { SectionManager } from "../controller/section-manager.js";
 import { SectionView } from "./section-view.js";
-import { MapView } from "./map-view.js";
-import { MapManager } from "../controller/map-manager.js";
+import { MapPrintView } from "./map-print-view.js";
+import { MapPrintManager } from "../controller/map-print-manager.js";
 
 export const Element = {
   // 초기 화면 버튼
@@ -94,7 +94,7 @@ export const ElementControl = {
     this.hideAllContainers();
     Element.mapPrintContainer.style.display = Constant.BLOCK;
 
-    MapManager.isVisited ? MapView.render() : MapManager.init();
+    MapPrintManager.isVisited ? MapPrintView.render() : MapPrintManager.init();
   },
 
   clearInput(element) {
diff --git a/src/view/map-view.js b/src/view/map-print-view.js
similarity index 68%
rename from src/view/map-view.js
rename to src/view/map-print-view.js
index ca443f963..3a047c2b8 100644
--- a/src/view/map-view.js
+++ b/src/view/map-print-view.js
@@ -1,7 +1,7 @@
-import { Line } from "../model/line.js"
+import { Line } from "../model/line.js";
 import { Element } from "./element.js";
 
-export const MapView = {
+export const MapPrintView = {
   render() {
     let content = '<div class="map">';
 
@@ -10,11 +10,11 @@ export const MapView = {
 
       stations.forEach((station) => {
         content += `<li>${station}</li>`;
-      })
-      content += '</ul>';
-    })
-    content += '</div>';
+      });
+      content += "</ul>";
+    });
+    content += "</div>";
 
     Element.mapPrintContainer.innerHTML = content;
-  }
-}
\ No newline at end of file
+  },
+};

From 48bd8ba2c3bc4d382a6cedd376ba41cd2cabe99e Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 19:59:46 +0900
Subject: [PATCH 26/28] =?UTF-8?q?docs=20:=20=EB=85=B8=EC=84=A0=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20-=20=EC=9D=B4=EB=A6=84=EC=9D=B4=20=EB=8B=AC?=
 =?UTF-8?q?=EB=9D=BC=EB=8F=84=20=EC=83=81=ED=96=89=20=EC=A2=85=EC=A0=90=20?=
 =?UTF-8?q?=EB=98=90=EB=8A=94=20=ED=95=98=ED=96=89=20=EC=A2=85=EC=A0=90?=
 =?UTF-8?q?=EC=9D=B4=20=EC=A4=91=EB=B3=B5=EB=90=A0=20=EC=88=98=20=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EB=AA=A9=EB=A1=9D=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EA=B5=AC=ED=98=84=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/docs/README.md b/docs/README.md
index 153892505..e3527a893 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -61,7 +61,10 @@
     - [x] 상행 종점과 하행 종점 목록을 조회한다.
     - [x] 입력한 노선 이름이 중복인지 검증해야 한다.
     - [x] 노선의 상행 종점과 하행 종점이 동일한지 검증해야 한다.
-    - [x] 노선의 이름이 다르면 상행 종점과 하행 종점이 중복될 수 있다.
+    - [x] 노선의 이름이 달라도 상행 종점 또는 하행 종점이 중복될 수 없다.
+      - [x] 상행 종점이 중복인지 검증해야 한다.
+      - [x] 하행 종점이 중복인지 검증해야 한다.
+      - [x] 상행 종점과 하행 종점의 방향이 반대인지 검증해야 한다.
     - [x] 노선 목록에 반영한다.
   - `삭제`
     - [x] `alert`를 통해 다시 물어본다.

From 289573873b76e0df9d3336b388ee8001d21070d9 Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 20:00:28 +0900
Subject: [PATCH 27/28] =?UTF-8?q?feat=20:=20=EB=85=B8=EC=84=A0=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20=EC=A2=85=EC=A0=90=EC=9D=B4=20=EC=A4=91?=
 =?UTF-8?q?=EB=B3=B5=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EB=85=B8=EC=84=A0=EC=9D=84=20=EC=B6=94=EA=B0=80=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/controller/line-manager.js |  2 +-
 src/util/constant.js           |  4 +++-
 src/util/validation.js         | 36 ++++++++++++++++++++++++++++++----
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/controller/line-manager.js b/src/controller/line-manager.js
index 0c30d56e5..a55410ce7 100644
--- a/src/controller/line-manager.js
+++ b/src/controller/line-manager.js
@@ -38,8 +38,8 @@ export const LineManager = {
 
     if (LineValidation.isValidLine(name, start, end)) {
       Line.add(new LineObject(name, start, end));
-      LineView.render();
     }
+    LineView.render();
     ElementControl.clearInput(Element.lineNameInput);
   },
 
diff --git a/src/util/constant.js b/src/util/constant.js
index 0b0c23545..cffe4378e 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -47,7 +47,7 @@ export const Constant = {
 
 export const ErrorMessage = {
   // 공통
-  DUPLICATED_NAME: "중복되지 않은 역 이름을 입력해 주세요.",
+  DUPLICATED_STATION_NAME: "중복되지 않은 역 이름을 입력해 주세요.",
 
   // 역 관리
   MINIMUM_NAME_LENGTH: "공백이 아닌 2글자 이상의 역 이름을 입력해 주세요.",
@@ -56,6 +56,8 @@ export const ErrorMessage = {
   // 노선 관리
   NAME_WHITE_SPACE: "공백이 아닌 노선 이름을 입력해 주세요.",
   SAME_START_END_STATION: "서로 다른 종점을 선택해 주세요.",
+  DUPLICATED_START_END_STATION: "기존 노선과 다른 상행, 하행 종점을 선택해 주세요.",
+  DUPLICATED_LINE_NAME: "중복되지 않은 노선 이름을 입력해 주세요.",
 
   // 구간 관리
   NOT_INTEGER_ORDER: "1 이상 정수의 순서를 입력해 주세요.",
diff --git a/src/util/validation.js b/src/util/validation.js
index 2fc6ed235..dc8e6afbb 100644
--- a/src/util/validation.js
+++ b/src/util/validation.js
@@ -15,7 +15,7 @@ export const StationValidation = {
     }
 
     if (!this.isNotDuplicated(name)) {
-      alert(ErrorMessage.DUPLICATED_NAME);
+      alert(ErrorMessage.DUPLICATED_STATION_NAME);
 
       return;
     }
@@ -60,7 +60,7 @@ export const LineValidation = {
     }
 
     if (!this.isNotDuplicated(name)) {
-      alert(ErrorMessage.DUPLICATED_NAME);
+      alert(ErrorMessage.DUPLICATED_LINE_NAME);
 
       return;
     }
@@ -69,12 +69,18 @@ export const LineValidation = {
   },
 
   hasValidStartEndStations(start, end) {
-    if (start === end) {
+    if (this.isSameStartEndStation(start, end)) {
       alert(ErrorMessage.SAME_START_END_STATION);
 
       return;
     }
 
+    if (this.isDuplicatedStartEndStation(start, end)) {
+      alert(ErrorMessage.DUPLICATED_START_END_STATION);
+
+      return;
+    }
+
     return true;
   },
 
@@ -87,6 +93,28 @@ export const LineValidation = {
 
     return !stationNameArray.includes(name);
   },
+
+  isSameStartEndStation(start, end) {
+    return start === end;
+  },
+
+  isDuplicatedStartEndStation(start, end) {
+    let isValid = false;
+
+    Line.lines.forEach(({ stations }) => {
+      if (stations[0] === start) {
+        isValid = true;
+      }
+      if (stations[stations.length - 1] === end) {
+        isValid = true;
+      }
+      if (stations[0] === end && stations[stations.length - 1] === start) {
+        isValid = true;
+      }
+    });
+
+    return isValid;
+  }
 };
 
 export const SectionValidation = {
@@ -99,7 +127,7 @@ export const SectionValidation = {
 
   hasValidName(station, selectedLine) {
     if (!this.isNotDuplicated(station, selectedLine)) {
-      alert(ErrorMessage.DUPLICATED_NAME);
+      alert(ErrorMessage.DUPLICATED_STATION_NAME);
 
       return;
     }

From acfd94caf642a6434612d235fe4e13405490c68f Mon Sep 17 00:00:00 2001
From: jum0 <wnsah052@naver.com>
Date: Tue, 15 Dec 2020 20:07:47 +0900
Subject: [PATCH 28/28] =?UTF-8?q?refactor=20:=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=20=EA=B5=AC=EC=B2=B4=EC=A0=81?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/util/constant.js b/src/util/constant.js
index cffe4378e..d76025eab 100644
--- a/src/util/constant.js
+++ b/src/util/constant.js
@@ -56,7 +56,7 @@ export const ErrorMessage = {
   // 노선 관리
   NAME_WHITE_SPACE: "공백이 아닌 노선 이름을 입력해 주세요.",
   SAME_START_END_STATION: "서로 다른 종점을 선택해 주세요.",
-  DUPLICATED_START_END_STATION: "기존 노선과 다른 상행, 하행 종점을 선택해 주세요.",
+  DUPLICATED_START_END_STATION: "기존 노선과 다른 상행, 하행 종점을 선택해 주세요.\n또한, 종점 방향만 다른 경우 동일한 노선으로 간주됩니다.",
   DUPLICATED_LINE_NAME: "중복되지 않은 노선 이름을 입력해 주세요.",
 
   // 구간 관리