From 3b23682b0b16b8f6db17a890be0d1c04dfc150f9 Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Thu, 10 Dec 2020 10:56:21 +0900
Subject: [PATCH 01/20] =?UTF-8?q?docs:=20code=20formatter=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=20=EB=AA=A9=EB=A1=9D=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore |  1 +
 README.md  | 34 +++++++++++++++++++++++++++++++---
 2 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..600d2d33b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.vscode
\ No newline at end of file
diff --git a/README.md b/README.md
index e97a1d649..b7dd4ba7d 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,39 @@
 # 🚇 지하철 노선도 미션
 
+## 기능 구현 목록
+
+- [x] 기능 구현 목록 작성 및 code formatter 설정
+- [ ] 네비게이션 레이아웃 잡고 버튼 클릭 시 해당 내용 보여주기
+- [ ] 역 관리 레이아웃 잡기
+- [ ] 역 추가 및 삭제 하기
+- [ ] 노선 관리 레이아웃 잡기
+- [ ] 상행 하행 종점에 역 리스트 넣기
+- [ ] 노선 추가 및 삭제 하기
+- [ ] 구간 관리 레이아웃 잡기
+- [ ] 구간 선택 하기
+- [ ] 구간 등록 및 제거 하기
+- [ ] 지하철 노선도 출력 레이아웃 및 보여주기
+
 ## 🚀 기능 요구사항
 
 ### 지하철 역 관련 기능
+
 - 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
 - 중복된 지하철 역 이름이 등록될 수 없다.
 - 지하철 역은 2글자 이상이어야 한다.
 - 지하철 역의 목록을 조회할 수 있다.
 
 ### 지하철 노선 관련 기능
+
 - 지하철 노선을 등록하고 삭제할 수 있다.
 - 중복된 지하철 노선 이름이 등록될 수 없다.
 - 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
 - 지하철 노선의 목록을 조회할 수 있다.
 
 ### 지하철 구간 추가 기능
+
 - 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.
 - 하나의 역은 여러개의 노선에 추가될 수 있다.
 - 역과 역 사이에 새로운 역이 추가 될 수 있다.
 - 노선에서 갈래길은 생길 수 없다.
@@ -24,6 +41,7 @@
 <img width="500" src="/images/section1.png">
 
 ### 지하철 구간 삭제 기능
+
 - 노선에 등록된 역을 제거할 수 있다.
 - 종점을 제거할 경우 다음 역이 종점이 된다.
 - 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
@@ -31,6 +49,7 @@
 <img width="500" src="/images/section2.png">
 
 ### 지하철 노선에 등록된 역 조회 기능
+
 - 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
 
 <br/>
@@ -38,32 +57,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 +96,7 @@
 - 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
 
 ### 지하철 구간 추가 기능
+
 - 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
 - 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
 - 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
@@ -78,6 +104,7 @@
 - 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
 
 ### 지하철 노선도 출력 기능
+
 - 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
 
 ### 기존 요구사항
@@ -101,7 +128,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/>

From 7e5e398473238ed8ee2d8d80741854104d369119 Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Fri, 11 Dec 2020 13:10:58 +0900
Subject: [PATCH 02/20] =?UTF-8?q?feat:=20=EB=A9=94=EB=89=B4=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=9E=A1=EA=B3=A0=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=ED=95=B4=EB=8B=B9?=
 =?UTF-8?q?=20=EB=82=B4=EC=9A=A9=20=EB=B3=B4=EC=97=AC=EC=A3=BC=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - SubwayMapManage class 생성
 - map을 제외하고(요구사항 맞추기 위해) content 영역을 미리 생성 후 display 값으로 화면 표시 유무 결정
 - map content는 지웠다가 매번 다시 생성
---
 README.md    |  2 +-
 index.html   | 18 +++++++++++++++++-
 src/index.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b7dd4ba7d..f8e452129 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 ## 기능 구현 목록
 
 - [x] 기능 구현 목록 작성 및 code formatter 설정
-- [ ] 네비게이션 레이아웃 잡고 버튼 클릭 시 해당 내용 보여주기
+- [x] 네비게이션 레이아웃 잡고 버튼 클릭 시 해당 내용 보여주기
 - [ ] 역 관리 레이아웃 잡기
 - [ ] 역 추가 및 삭제 하기
 - [ ] 노선 관리 레이아웃 잡기
diff --git a/index.html b/index.html
index fc99deac2..100db9c8a 100644
--- a/index.html
+++ b/index.html
@@ -6,8 +6,24 @@
   </head>
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <header>
+        <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>
+      </header>
+      <div id="content">
+        <div class="hide" id="station-manager-content">역 관리 내용</div>
+        <div class="hide" id="line-manager-content">노선 관리 내용</div>
+        <div class="hide" id="section-manager-content">구간 관리 내용</div>
+      </div>
     </div>
+    <style>
+      .hide {
+        display: none;
+      }
+    </style>
     <script type="module" src="src/index.js"></script>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
index e69de29bb..88333a4ae 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,50 @@
+const menuIds = [
+  "station-manager-button",
+  "line-manager-button",
+  "section-manager-button",
+  "map-print-manager-button",
+];
+
+export default class SubwayMapManager {
+  constructor() {
+    this.clickMenuEventListener();
+  }
+
+  clickMenuEventListener() {
+    menuIds.forEach((id) => {
+      const menuButton = document.getElementById(id);
+      menuButton.addEventListener("click", () => this.clickMenuEvent(id));
+    });
+  }
+
+  clickMenuEvent(id) {
+    this.hideContentChildren();
+    const isMap = Boolean(id.match("map"));
+    if (isMap) {
+      this.renderMapContent();
+      return;
+    }
+    const content = document.getElementById(id.replace("button", "content"));
+    content.style.display = "block";
+  }
+
+  hideContentChildren() {
+    const contentChildren = document.getElementById("content").children;
+    const contentChildrenRealArray = Array.from(contentChildren);
+    contentChildrenRealArray.forEach((el) => (el.style.display = "none"));
+    const mapContent = document.getElementsByClassName("map")[0];
+    if (mapContent !== undefined) {
+      mapContent.remove();
+    }
+  }
+
+  renderMapContent() {
+    const newEl = document.createElement("div");
+    newEl.setAttribute("class", "map");
+    newEl.innerHTML = "노선 출력 내용";
+    const contentEl = document.getElementById("content");
+    contentEl.appendChild(newEl);
+  }
+}
+
+new SubwayMapManager();

From 39b8473d3f61df5bc5428fe1834af9459604103e Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Sat, 12 Dec 2020 15:59:57 +0900
Subject: [PATCH 03/20] =?UTF-8?q?feat:=20=EC=97=AD=20=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EB=B6=80=EB=B6=84=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=9E=A1=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  |  2 +-
 index.html | 21 ++++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f8e452129..15b402b68 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 - [x] 기능 구현 목록 작성 및 code formatter 설정
 - [x] 네비게이션 레이아웃 잡고 버튼 클릭 시 해당 내용 보여주기
-- [ ] 역 관리 레이아웃 잡기
+- [x] 역 관리 레이아웃 잡기
 - [ ] 역 추가 및 삭제 하기
 - [ ] 노선 관리 레이아웃 잡기
 - [ ] 상행 하행 종점에 역 리스트 넣기
diff --git a/index.html b/index.html
index 100db9c8a..99e9f6db6 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,18 @@ <h1>🚇 지하철 노선도 관리</h1>
         <button id="map-print-manager-button">4.지하철 노선도 출력</button>
       </header>
       <div id="content">
-        <div class="hide" id="station-manager-content">역 관리 내용</div>
+        <div class="" id="station-manager-content">
+          <div>역 이름</div>
+          <input type="text" />
+          <button>역 추가</button>
+          <h2>🚉 지하철 역 목록</h2>
+          <table>
+            <tr>
+              <th>역 이름</th>
+              <th>설정</th>
+            </tr>
+          </table>
+        </div>
         <div class="hide" id="line-manager-content">노선 관리 내용</div>
         <div class="hide" id="section-manager-content">구간 관리 내용</div>
       </div>
@@ -23,6 +34,14 @@ <h1>🚇 지하철 노선도 관리</h1>
       .hide {
         display: none;
       }
+      #content {
+        margin-top: 20px;
+      }
+      table,
+      th,
+      td {
+        border: 1px solid black;
+      }
     </style>
     <script type="module" src="src/index.js"></script>
   </body>

From f002ba57e043b33b979624e4b86f05ef6b5b853f Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Sun, 13 Dec 2020 22:48:53 +0900
Subject: [PATCH 04/20] =?UTF-8?q?feat:=20=EC=97=AD=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=82=AD=EC=A0=9C=ED=95=98=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - 예외 상황 처리: 2자 이하, 이미 있는 역일 때
---
 README.md            |  2 +-
 index.html           | 16 +++++-----
 src/constant.js      |  4 +++
 src/index.js         | 74 +++++++++++++++++++++++++++++++++++++++-----
 src/utils/dom.js     |  9 ++++++
 src/utils/station.js | 36 +++++++++++++++++++++
 6 files changed, 126 insertions(+), 15 deletions(-)
 create mode 100644 src/constant.js
 create mode 100644 src/utils/dom.js
 create mode 100644 src/utils/station.js

diff --git a/README.md b/README.md
index 15b402b68..3b309674e 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 - [x] 기능 구현 목록 작성 및 code formatter 설정
 - [x] 네비게이션 레이아웃 잡고 버튼 클릭 시 해당 내용 보여주기
 - [x] 역 관리 레이아웃 잡기
-- [ ] 역 추가 및 삭제 하기
+- [x] 역 추가 및 삭제 하기(예외 상황 처리)
 - [ ] 노선 관리 레이아웃 잡기
 - [ ] 상행 하행 종점에 역 리스트 넣기
 - [ ] 노선 추가 및 삭제 하기
diff --git a/index.html b/index.html
index 99e9f6db6..995fc4824 100644
--- a/index.html
+++ b/index.html
@@ -16,14 +16,16 @@ <h1>🚇 지하철 노선도 관리</h1>
       <div id="content">
         <div class="" id="station-manager-content">
           <div>역 이름</div>
-          <input type="text" />
-          <button>역 추가</button>
+          <input type="text" id="station-name-input" />
+          <button id="station-add-button">역 추가</button>
           <h2>🚉 지하철 역 목록</h2>
-          <table>
-            <tr>
-              <th>역 이름</th>
-              <th>설정</th>
-            </tr>
+          <table id="station-table">
+            <tbody id="station-table-body">
+              <tr>
+                <th>역 이름</th>
+                <th>설정</th>
+              </tr>
+            </tbody>
           </table>
         </div>
         <div class="hide" id="line-manager-content">노선 관리 내용</div>
diff --git a/src/constant.js b/src/constant.js
new file mode 100644
index 000000000..0a9ce1063
--- /dev/null
+++ b/src/constant.js
@@ -0,0 +1,4 @@
+export const INPUT_LESS_THAN_2_MESSAGE = "역 이름은 2자 이상이어야 합니다.";
+export const INPUT_ALREADY_EXIST_NAME_MESSAGE = "이미 존재하는 역입니다.";
+
+export const DELETE_TEXT = "삭제";
diff --git a/src/index.js b/src/index.js
index 88333a4ae..5b94d2d0f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,17 @@
+import {
+  getStations,
+  setStations,
+  existStationName,
+  pushNewStation,
+  removeStation,
+} from "./utils/station.js";
+import { addClickEventFromId, resetStationTable } from "./utils/dom.js";
+import {
+  INPUT_ALREADY_EXIST_NAME_MESSAGE,
+  INPUT_LESS_THAN_2_MESSAGE,
+  DELETE_TEXT,
+} from "./constant.js";
+
 const menuIds = [
   "station-manager-button",
   "line-manager-button",
@@ -8,17 +22,19 @@ const menuIds = [
 export default class SubwayMapManager {
   constructor() {
     this.clickMenuEventListener();
+    this.clickAddStationEventListener();
   }
 
   clickMenuEventListener() {
     menuIds.forEach((id) => {
-      const menuButton = document.getElementById(id);
-      menuButton.addEventListener("click", () => this.clickMenuEvent(id));
+      addClickEventFromId(id, () => {
+        this.hideContentChildren();
+        this.renderContent(id);
+      });
     });
   }
 
-  clickMenuEvent(id) {
-    this.hideContentChildren();
+  renderContent(id) {
     const isMap = Boolean(id.match("map"));
     if (isMap) {
       this.renderMapContent();
@@ -28,10 +44,53 @@ export default class SubwayMapManager {
     content.style.display = "block";
   }
 
+  clickAddStationEventListener() {
+    addClickEventFromId("station-add-button", () => {
+      const stationInputValue = document.getElementById("station-name-input")
+        .value;
+      if (stationInputValue.length < 2) {
+        alert(INPUT_LESS_THAN_2_MESSAGE);
+        return;
+      }
+      const isExistStationName = existStationName(stationInputValue);
+      if (isExistStationName) {
+        alert(INPUT_ALREADY_EXIST_NAME_MESSAGE);
+        return;
+      }
+      pushNewStation(stationInputValue);
+      this.renderStationList();
+    });
+  }
+
+  renderStationList() {
+    const stations = getStations();
+    if (!stations) {
+      return;
+    }
+    resetStationTable();
+    const stationTableBody = document.getElementById("station-table-body");
+    stations.forEach((station) => {
+      const tableRow = document.createElement("tr");
+      const stationTableData = document.createElement("td");
+      stationTableData.innerText = station;
+      const tableSetData = document.createElement("td");
+      const stationSetButton = document.createElement("button");
+      stationSetButton.innerText = DELETE_TEXT;
+      stationSetButton.onclick = () => {
+        removeStation(station);
+        this.renderStationList();
+      };
+      tableSetData.appendChild(stationSetButton);
+      tableRow.append(stationTableData, tableSetData);
+      stationTableBody.appendChild(tableRow);
+    });
+  }
+
   hideContentChildren() {
-    const contentChildren = document.getElementById("content").children;
-    const contentChildrenRealArray = Array.from(contentChildren);
-    contentChildrenRealArray.forEach((el) => (el.style.display = "none"));
+    const contentChildren = Array.from(
+      document.getElementById("content").children
+    );
+    contentChildren.forEach((el) => (el.style.display = "none"));
     const mapContent = document.getElementsByClassName("map")[0];
     if (mapContent !== undefined) {
       mapContent.remove();
@@ -48,3 +107,4 @@ export default class SubwayMapManager {
 }
 
 new SubwayMapManager();
+setStations(null);
diff --git a/src/utils/dom.js b/src/utils/dom.js
new file mode 100644
index 000000000..fb9795146
--- /dev/null
+++ b/src/utils/dom.js
@@ -0,0 +1,9 @@
+export const addClickEventFromId = (id, event) => {
+  const element = document.getElementById(id);
+  element.addEventListener("click", event);
+};
+
+export const resetStationTable = () => {
+  const stationTable = document.getElementById("station-table");
+  stationTable.innerHTML = `<tbody id="station-table-body"><tr><th>역 이름</th><th>설정</th></tr></tbody>`;
+};
diff --git a/src/utils/station.js b/src/utils/station.js
new file mode 100644
index 000000000..e214b44dd
--- /dev/null
+++ b/src/utils/station.js
@@ -0,0 +1,36 @@
+const LOCAL_STORAGE_STATIONS_KEY = "STATIONS";
+
+export const getStations = () => {
+  return JSON.parse(localStorage.getItem(LOCAL_STORAGE_STATIONS_KEY));
+};
+
+export const setStations = (stations) => {
+  return localStorage.setItem(
+    LOCAL_STORAGE_STATIONS_KEY,
+    JSON.stringify(stations)
+  );
+};
+
+export const existStationName = (name) => {
+  const stations = getStations();
+  if (!stations) {
+    return false;
+  }
+  return stations.indexOf(name) > -1;
+};
+
+export const removeStation = (name) => {
+  const stations = getStations();
+  if (stations === null) {
+    return;
+  }
+  setStations(stations.filter((el) => el !== name));
+};
+
+export const pushNewStation = (station) => {
+  const previousStations = getStations();
+  const newStations = previousStations
+    ? [...previousStations, station]
+    : [station];
+  setStations(newStations);
+};

From af0d1e8907eb427ba6f5882873c64baf7577f445 Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Sun, 13 Dec 2020 23:22:35 +0900
Subject: [PATCH 05/20] =?UTF-8?q?feat:=20=EB=85=B8=EC=84=A0=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=9E=A1?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  |  2 +-
 index.html | 34 ++++++++++++++++++++++++++++++++--
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 3b309674e..fbb108db5 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 - [x] 네비게이션 레이아웃 잡고 버튼 클릭 시 해당 내용 보여주기
 - [x] 역 관리 레이아웃 잡기
 - [x] 역 추가 및 삭제 하기(예외 상황 처리)
-- [ ] 노선 관리 레이아웃 잡기
+- [x] 노선 관리 레이아웃 잡기
 - [ ] 상행 하행 종점에 역 리스트 넣기
 - [ ] 노선 추가 및 삭제 하기
 - [ ] 구간 관리 레이아웃 잡기
diff --git a/index.html b/index.html
index 995fc4824..9a4ee11c7 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@ <h1>🚇 지하철 노선도 관리</h1>
         <button id="map-print-manager-button">4.지하철 노선도 출력</button>
       </header>
       <div id="content">
-        <div class="" id="station-manager-content">
+        <div class="hide" id="station-manager-content">
           <div>역 이름</div>
           <input type="text" id="station-name-input" />
           <button id="station-add-button">역 추가</button>
@@ -28,7 +28,33 @@ <h2>🚉 지하철 역 목록</h2>
             </tbody>
           </table>
         </div>
-        <div class="hide" id="line-manager-content">노선 관리 내용</div>
+        <div class="hide" id="line-manager-content">
+          <div>노선 이름</div>
+          <input
+            type="text"
+            placeholder="노선 이름을 입력해주세요"
+            id="line-name-input"
+          />
+          <div id="end-point-container">
+            상행 종점
+            <select id="line-start-station-selector"></select>
+            <br />
+            하행 종점
+            <select id="line-end-station-selector"></select>
+          </div>
+          <button id="line-add-button">노선 추가</button>
+          <h2>🚉 지하철 노선 목록</h2>
+          <table>
+            <tbody>
+              <tr>
+                <th>노선 이름</th>
+                <th>상행 종점역</th>
+                <th>하행 종점역</th>
+                <th>설정</th>
+              </tr>
+            </tbody>
+          </table>
+        </div>
         <div class="hide" id="section-manager-content">구간 관리 내용</div>
       </div>
     </div>
@@ -44,6 +70,10 @@ <h2>🚉 지하철 역 목록</h2>
       td {
         border: 1px solid black;
       }
+      #line-name-input,
+      #end-point-container {
+        margin-bottom: 20px;
+      }
     </style>
     <script type="module" src="src/index.js"></script>
   </body>

From 7458da6209336f06672e7d334ace100816a846bc Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Sun, 13 Dec 2020 23:28:18 +0900
Subject: [PATCH 06/20] =?UTF-8?q?refactor:=20Header=20=ED=81=B4=EB=9E=98?=
 =?UTF-8?q?=EC=8A=A4=EB=A5=BC=20=EB=94=B0=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - 각각의 class를 작은 단위로 유지하기 위해
---
 README.md     |  1 +
 src/Header.js | 52 +++++++++++++++++++++++++++++++++++++++++++++++++++
 src/index.js  | 48 ++---------------------------------------------
 3 files changed, 55 insertions(+), 46 deletions(-)
 create mode 100644 src/Header.js

diff --git a/README.md b/README.md
index fbb108db5..2a7ed78e5 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@
 - [x] 역 관리 레이아웃 잡기
 - [x] 역 추가 및 삭제 하기(예외 상황 처리)
 - [x] 노선 관리 레이아웃 잡기
+- [ ] header 모듈 분리하기
 - [ ] 상행 하행 종점에 역 리스트 넣기
 - [ ] 노선 추가 및 삭제 하기
 - [ ] 구간 관리 레이아웃 잡기
diff --git a/src/Header.js b/src/Header.js
new file mode 100644
index 000000000..38ca3609f
--- /dev/null
+++ b/src/Header.js
@@ -0,0 +1,52 @@
+import { addClickEventFromId } from "./utils/dom.js";
+
+const menuIds = [
+  "station-manager-button",
+  "line-manager-button",
+  "section-manager-button",
+  "map-print-manager-button",
+];
+
+export default class Header {
+  constructor() {
+    this.clickMenuEventListener();
+  }
+
+  clickMenuEventListener() {
+    menuIds.forEach((id) => {
+      addClickEventFromId(id, () => {
+        this.hideContentChildren();
+        this.renderContent(id);
+      });
+    });
+  }
+
+  hideContentChildren() {
+    const contentChildren = Array.from(
+      document.getElementById("content").children
+    );
+    contentChildren.forEach((el) => (el.style.display = "none"));
+    const mapContent = document.getElementsByClassName("map")[0];
+    if (mapContent !== undefined) {
+      mapContent.remove();
+    }
+  }
+
+  renderContent(id) {
+    const isMap = Boolean(id.match("map"));
+    if (isMap) {
+      this.renderMapContent();
+      return;
+    }
+    const content = document.getElementById(id.replace("button", "content"));
+    content.style.display = "block";
+  }
+
+  renderMapContent() {
+    const newEl = document.createElement("div");
+    newEl.setAttribute("class", "map");
+    newEl.innerHTML = "노선 출력 내용";
+    const contentEl = document.getElementById("content");
+    contentEl.appendChild(newEl);
+  }
+}
diff --git a/src/index.js b/src/index.js
index 5b94d2d0f..91a447896 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,39 +11,14 @@ import {
   INPUT_LESS_THAN_2_MESSAGE,
   DELETE_TEXT,
 } from "./constant.js";
-
-const menuIds = [
-  "station-manager-button",
-  "line-manager-button",
-  "section-manager-button",
-  "map-print-manager-button",
-];
+import Header from "./Header.js";
 
 export default class SubwayMapManager {
   constructor() {
-    this.clickMenuEventListener();
+    new Header();
     this.clickAddStationEventListener();
   }
 
-  clickMenuEventListener() {
-    menuIds.forEach((id) => {
-      addClickEventFromId(id, () => {
-        this.hideContentChildren();
-        this.renderContent(id);
-      });
-    });
-  }
-
-  renderContent(id) {
-    const isMap = Boolean(id.match("map"));
-    if (isMap) {
-      this.renderMapContent();
-      return;
-    }
-    const content = document.getElementById(id.replace("button", "content"));
-    content.style.display = "block";
-  }
-
   clickAddStationEventListener() {
     addClickEventFromId("station-add-button", () => {
       const stationInputValue = document.getElementById("station-name-input")
@@ -85,25 +60,6 @@ export default class SubwayMapManager {
       stationTableBody.appendChild(tableRow);
     });
   }
-
-  hideContentChildren() {
-    const contentChildren = Array.from(
-      document.getElementById("content").children
-    );
-    contentChildren.forEach((el) => (el.style.display = "none"));
-    const mapContent = document.getElementsByClassName("map")[0];
-    if (mapContent !== undefined) {
-      mapContent.remove();
-    }
-  }
-
-  renderMapContent() {
-    const newEl = document.createElement("div");
-    newEl.setAttribute("class", "map");
-    newEl.innerHTML = "노선 출력 내용";
-    const contentEl = document.getElementById("content");
-    contentEl.appendChild(newEl);
-  }
 }
 
 new SubwayMapManager();

From c322335ab22b2a45eaf30ae56199811620084a1d Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Sun, 13 Dec 2020 23:31:48 +0900
Subject: [PATCH 07/20] =?UTF-8?q?chore:=20station=20delete=20button?=
 =?UTF-8?q?=EC=97=90=20class=20=EA=B0=92=20=EB=B6=80=EC=97=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - 기능 요구 사항에 맞추기 위해
---
 src/index.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/index.js b/src/index.js
index 91a447896..77ac4401d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -47,17 +47,18 @@ export default class SubwayMapManager {
     stations.forEach((station) => {
       const tableRow = document.createElement("tr");
       const stationTableData = document.createElement("td");
-      stationTableData.innerText = station;
       const tableSetData = document.createElement("td");
-      const stationSetButton = document.createElement("button");
-      stationSetButton.innerText = DELETE_TEXT;
-      stationSetButton.onclick = () => {
+      const stationDeleteButton = document.createElement("button");
+      stationTableData.innerText = station;
+      stationDeleteButton.setAttribute("class", "station-delete-button");
+      stationDeleteButton.innerText = DELETE_TEXT;
+      stationDeleteButton.onclick = () => {
         removeStation(station);
         this.renderStationList();
       };
-      tableSetData.appendChild(stationSetButton);
+      tableSetData.append(stationDeleteButton);
       tableRow.append(stationTableData, tableSetData);
-      stationTableBody.appendChild(tableRow);
+      stationTableBody.append(tableRow);
     });
   }
 }

From 7b903b5227ac29463f02c6478fa53b8d899faa06 Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Sun, 13 Dec 2020 23:45:45 +0900
Subject: [PATCH 08/20] =?UTF-8?q?refactor:=20utils=20=EC=95=88=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20storage=20=EB=AA=A8=EB=93=88=EC=9D=84=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - line 이 추가됨에 따라 storage를 다양하게 사용해야하기 때문에
---
 src/constant.js      |  3 +++
 src/index.js         |  8 ++++----
 src/utils/station.js | 27 ++++++++++-----------------
 src/utils/storage.js |  7 +++++++
 4 files changed, 24 insertions(+), 21 deletions(-)
 create mode 100644 src/utils/storage.js

diff --git a/src/constant.js b/src/constant.js
index 0a9ce1063..2ff2d5151 100644
--- a/src/constant.js
+++ b/src/constant.js
@@ -2,3 +2,6 @@ export const INPUT_LESS_THAN_2_MESSAGE = "역 이름은 2자 이상이어야 합
 export const INPUT_ALREADY_EXIST_NAME_MESSAGE = "이미 존재하는 역입니다.";
 
 export const DELETE_TEXT = "삭제";
+
+export const LOCAL_STORAGE_STATIONS_KEY = "STATIONS";
+export const LOCAL_STORAGE_LINES_KEY = "LINES";
diff --git a/src/index.js b/src/index.js
index 77ac4401d..f213dbe4a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,15 +1,15 @@
 import {
-  getStations,
-  setStations,
   existStationName,
   pushNewStation,
   removeStation,
 } from "./utils/station.js";
 import { addClickEventFromId, resetStationTable } from "./utils/dom.js";
+import { getStateFromStorage, setStateToStorage } from "./utils/storage.js";
 import {
   INPUT_ALREADY_EXIST_NAME_MESSAGE,
   INPUT_LESS_THAN_2_MESSAGE,
   DELETE_TEXT,
+  LOCAL_STORAGE_STATIONS_KEY,
 } from "./constant.js";
 import Header from "./Header.js";
 
@@ -38,7 +38,7 @@ export default class SubwayMapManager {
   }
 
   renderStationList() {
-    const stations = getStations();
+    const stations = getStateFromStorage(LOCAL_STORAGE_STATIONS_KEY);
     if (!stations) {
       return;
     }
@@ -64,4 +64,4 @@ export default class SubwayMapManager {
 }
 
 new SubwayMapManager();
-setStations(null);
+setStateToStorage(LOCAL_STORAGE_STATIONS_KEY, null);
diff --git a/src/utils/station.js b/src/utils/station.js
index e214b44dd..624e37e3f 100644
--- a/src/utils/station.js
+++ b/src/utils/station.js
@@ -1,18 +1,8 @@
-const LOCAL_STORAGE_STATIONS_KEY = "STATIONS";
-
-export const getStations = () => {
-  return JSON.parse(localStorage.getItem(LOCAL_STORAGE_STATIONS_KEY));
-};
-
-export const setStations = (stations) => {
-  return localStorage.setItem(
-    LOCAL_STORAGE_STATIONS_KEY,
-    JSON.stringify(stations)
-  );
-};
+import { LOCAL_STORAGE_STATIONS_KEY } from "../constant.js";
+import { getStateFromStorage, setStateToStorage } from "./storage.js";
 
 export const existStationName = (name) => {
-  const stations = getStations();
+  const stations = getStateFromStorage(LOCAL_STORAGE_STATIONS_KEY);
   if (!stations) {
     return false;
   }
@@ -20,17 +10,20 @@ export const existStationName = (name) => {
 };
 
 export const removeStation = (name) => {
-  const stations = getStations();
+  const stations = getStateFromStorage(LOCAL_STORAGE_STATIONS_KEY);
   if (stations === null) {
     return;
   }
-  setStations(stations.filter((el) => el !== name));
+  setStateToStorage(
+    LOCAL_STORAGE_STATIONS_KEY,
+    stations.filter((el) => el !== name)
+  );
 };
 
 export const pushNewStation = (station) => {
-  const previousStations = getStations();
+  const previousStations = getStateFromStorage(LOCAL_STORAGE_STATIONS_KEY);
   const newStations = previousStations
     ? [...previousStations, station]
     : [station];
-  setStations(newStations);
+  setStateToStorage(LOCAL_STORAGE_STATIONS_KEY, newStations);
 };
diff --git a/src/utils/storage.js b/src/utils/storage.js
new file mode 100644
index 000000000..1968d3ce4
--- /dev/null
+++ b/src/utils/storage.js
@@ -0,0 +1,7 @@
+export const getStateFromStorage = (key) => {
+  return JSON.parse(localStorage.getItem(key));
+};
+
+export const setStateToStorage = (key, data) => {
+  return localStorage.setItem(key, JSON.stringify(data));
+};

From f77b316aa119e1db52617af312c3f6a8c1573abe Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Mon, 14 Dec 2020 00:01:15 +0900
Subject: [PATCH 09/20] =?UTF-8?q?feat:=20=EB=85=B8=EC=84=A0=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EB=88=8C=EB=A0=80=EC=9D=84=20=EB=95=8C=20=EC=97=AD?=
 =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20select=EC=97=90=20=EB=84=A3?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - 역 리스트의 값이 변할때보다 노선 내용이 보여질 때 select를 변경하는게 더 효율적이므로 눌렀을 때 변경
---
 README.md         |  4 ++--
 src/Header.js     | 16 ++++++++++++++++
 src/utils/line.js | 10 ++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/line.js

diff --git a/README.md b/README.md
index 2a7ed78e5..9f65c52bc 100644
--- a/README.md
+++ b/README.md
@@ -7,8 +7,8 @@
 - [x] 역 관리 레이아웃 잡기
 - [x] 역 추가 및 삭제 하기(예외 상황 처리)
 - [x] 노선 관리 레이아웃 잡기
-- [ ] header 모듈 분리하기
-- [ ] 상행 하행 종점에 역 리스트 넣기
+- [x] header 모듈 분리하기
+- [x] 상행 하행 종점에 역 리스트 넣기
 - [ ] 노선 추가 및 삭제 하기
 - [ ] 구간 관리 레이아웃 잡기
 - [ ] 구간 선택 하기
diff --git a/src/Header.js b/src/Header.js
index 38ca3609f..7d276b3ab 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,4 +1,5 @@
 import { addClickEventFromId } from "./utils/dom.js";
+import { getStationOptions } from "./utils/line.js";
 
 const menuIds = [
   "station-manager-button",
@@ -32,12 +33,27 @@ export default class Header {
     }
   }
 
+  putOptions() {
+    const startStationSeletor = document.getElementById(
+      "line-start-station-selector"
+    );
+    const endStationSelector = document.getElementById(
+      "line-end-station-selector"
+    );
+    startStationSeletor.innerHTML = getStationOptions();
+    endStationSelector.innerHTML = getStationOptions();
+  }
+
   renderContent(id) {
     const isMap = Boolean(id.match("map"));
     if (isMap) {
       this.renderMapContent();
       return;
     }
+    const isLine = Boolean(id.match("line"));
+    if (isLine) {
+      this.putOptions();
+    }
     const content = document.getElementById(id.replace("button", "content"));
     content.style.display = "block";
   }
diff --git a/src/utils/line.js b/src/utils/line.js
new file mode 100644
index 000000000..0f938b675
--- /dev/null
+++ b/src/utils/line.js
@@ -0,0 +1,10 @@
+import { LOCAL_STORAGE_STATIONS_KEY } from "../constant.js";
+import { getStateFromStorage } from "./storage.js";
+
+export const getStationOptions = () => {
+  const stations = getStateFromStorage(LOCAL_STORAGE_STATIONS_KEY);
+  if (!stations) {
+    return null;
+  }
+  return stations.map((el) => `<option value="${el}">${el}</option>`).join("");
+};

From 56966cb45dbbf3755d0951ccc65b76980248ade2 Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Mon, 14 Dec 2020 11:45:30 +0900
Subject: [PATCH 10/20] =?UTF-8?q?chore:=20constant.js=20=EB=A5=BC=20consta?=
 =?UTF-8?q?nts=20=ED=8F=B4=EB=8D=94=EB=A1=9C=20=EB=94=B0=EB=A1=9C=20?=
 =?UTF-8?q?=EA=B5=AC=EB=B6=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - 구조 가독성을 높이기 위해
---
 src/{constant.js => constants/index.js} | 0
 src/index.js                            | 2 +-
 src/utils/line.js                       | 2 +-
 src/utils/station.js                    | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename src/{constant.js => constants/index.js} (100%)

diff --git a/src/constant.js b/src/constants/index.js
similarity index 100%
rename from src/constant.js
rename to src/constants/index.js
diff --git a/src/index.js b/src/index.js
index f213dbe4a..f51cba19f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,7 +10,7 @@ import {
   INPUT_LESS_THAN_2_MESSAGE,
   DELETE_TEXT,
   LOCAL_STORAGE_STATIONS_KEY,
-} from "./constant.js";
+} from "./constants/index.js";
 import Header from "./Header.js";
 
 export default class SubwayMapManager {
diff --git a/src/utils/line.js b/src/utils/line.js
index 0f938b675..b21c4fee0 100644
--- a/src/utils/line.js
+++ b/src/utils/line.js
@@ -1,4 +1,4 @@
-import { LOCAL_STORAGE_STATIONS_KEY } from "../constant.js";
+import { LOCAL_STORAGE_STATIONS_KEY } from "../constants/index.js";
 import { getStateFromStorage } from "./storage.js";
 
 export const getStationOptions = () => {
diff --git a/src/utils/station.js b/src/utils/station.js
index 624e37e3f..46f8541d2 100644
--- a/src/utils/station.js
+++ b/src/utils/station.js
@@ -1,4 +1,4 @@
-import { LOCAL_STORAGE_STATIONS_KEY } from "../constant.js";
+import { LOCAL_STORAGE_STATIONS_KEY } from "../constants/index.js";
 import { getStateFromStorage, setStateToStorage } from "./storage.js";
 
 export const existStationName = (name) => {

From 306e01b82684a0f18055f973f3223046f4cdaf24 Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Mon, 14 Dec 2020 17:15:22 +0900
Subject: [PATCH 11/20] =?UTF-8?q?feat:=20=EB=85=B8=EC=84=A0=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - 예외 상황 처리(노선 이름 존재하는 경우, 종점이 둘다 같은 경우, 종점이 서로 같은 경우)
 - 메뉴 버튼 누를 때 역, 노선 table 렌더링
---
 README.md              |  2 +-
 index.html             | 16 +-------
 src/Header.js          | 26 ++++++-------
 src/Line.js            | 18 +++++++++
 src/constants/index.js |  6 +++
 src/index.js           | 69 +++++++++++++++++++----------------
 src/utils/dom.js       | 83 +++++++++++++++++++++++++++++++++++++++++-
 src/utils/line.js      | 36 +++++++++++++++++-
 8 files changed, 192 insertions(+), 64 deletions(-)
 create mode 100644 src/Line.js

diff --git a/README.md b/README.md
index 9f65c52bc..0c7e71b7c 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
 - [x] 노선 관리 레이아웃 잡기
 - [x] header 모듈 분리하기
 - [x] 상행 하행 종점에 역 리스트 넣기
-- [ ] 노선 추가 및 삭제 하기
+- [x] 노선 추가 및 삭제 하기
 - [ ] 구간 관리 레이아웃 잡기
 - [ ] 구간 선택 하기
 - [ ] 구간 등록 및 제거 하기
diff --git a/index.html b/index.html
index 9a4ee11c7..e99f0e406 100644
--- a/index.html
+++ b/index.html
@@ -20,12 +20,7 @@ <h1>🚇 지하철 노선도 관리</h1>
           <button id="station-add-button">역 추가</button>
           <h2>🚉 지하철 역 목록</h2>
           <table id="station-table">
-            <tbody id="station-table-body">
-              <tr>
-                <th>역 이름</th>
-                <th>설정</th>
-              </tr>
-            </tbody>
+            <tbody id="station-table-body"></tbody>
           </table>
         </div>
         <div class="hide" id="line-manager-content">
@@ -45,14 +40,7 @@ <h2>🚉 지하철 역 목록</h2>
           <button id="line-add-button">노선 추가</button>
           <h2>🚉 지하철 노선 목록</h2>
           <table>
-            <tbody>
-              <tr>
-                <th>노선 이름</th>
-                <th>상행 종점역</th>
-                <th>하행 종점역</th>
-                <th>설정</th>
-              </tr>
-            </tbody>
+            <tbody id="line-table-body"></tbody>
           </table>
         </div>
         <div class="hide" id="section-manager-content">구간 관리 내용</div>
diff --git a/src/Header.js b/src/Header.js
index 7d276b3ab..37061ac44 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,5 +1,9 @@
-import { addClickEventFromId } from "./utils/dom.js";
-import { getStationOptions } from "./utils/line.js";
+import {
+  addClickEventFromId,
+  renderLineTable,
+  renderStationTable,
+  putOptions,
+} from "./utils/dom.js";
 
 const menuIds = [
   "station-manager-button",
@@ -33,17 +37,6 @@ export default class Header {
     }
   }
 
-  putOptions() {
-    const startStationSeletor = document.getElementById(
-      "line-start-station-selector"
-    );
-    const endStationSelector = document.getElementById(
-      "line-end-station-selector"
-    );
-    startStationSeletor.innerHTML = getStationOptions();
-    endStationSelector.innerHTML = getStationOptions();
-  }
-
   renderContent(id) {
     const isMap = Boolean(id.match("map"));
     if (isMap) {
@@ -52,7 +45,12 @@ export default class Header {
     }
     const isLine = Boolean(id.match("line"));
     if (isLine) {
-      this.putOptions();
+      putOptions();
+      renderLineTable();
+    }
+    const isStation = Boolean(id.match("station"));
+    if (isStation) {
+      renderStationTable();
     }
     const content = document.getElementById(id.replace("button", "content"));
     content.style.display = "block";
diff --git a/src/Line.js b/src/Line.js
new file mode 100644
index 000000000..5180b13c9
--- /dev/null
+++ b/src/Line.js
@@ -0,0 +1,18 @@
+import { getStateFromStorage, setStateToStorage } from "./utils/storage.js";
+import { LOCAL_STORAGE_LINES_KEY } from "./constants/index.js";
+
+export default class Line {
+  constructor(name, section) {
+    this.name = name;
+    this.section = section;
+  }
+
+  add() {
+    const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+    if (!lines) {
+      setStateToStorage(LOCAL_STORAGE_LINES_KEY, [this]);
+      return;
+    }
+    setStateToStorage(LOCAL_STORAGE_LINES_KEY, [...lines, this]);
+  }
+}
diff --git a/src/constants/index.js b/src/constants/index.js
index 2ff2d5151..3b4808f6a 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -1,5 +1,11 @@
 export const INPUT_LESS_THAN_2_MESSAGE = "역 이름은 2자 이상이어야 합니다.";
 export const INPUT_ALREADY_EXIST_NAME_MESSAGE = "이미 존재하는 역입니다.";
+export const INPUT_ALREADY_EXIST_LINE_NAME_MESSAGE =
+  "이미 존재하는 노선 이름입니다.";
+export const CANT_SAME_START_AND_END_MESSAGE =
+  "상행 종점과 하행 종점이 같을 수 없습니다.";
+export const ALREAY_EXIST_SAME_END_POINTS =
+  "종점이 일치하는 노선이 이미 존재합니다.";
 
 export const DELETE_TEXT = "삭제";
 
diff --git a/src/index.js b/src/index.js
index f51cba19f..07d50ce16 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,22 +1,28 @@
+import { existStationName, pushNewStation } from "./utils/station.js";
 import {
-  existStationName,
-  pushNewStation,
-  removeStation,
-} from "./utils/station.js";
-import { addClickEventFromId, resetStationTable } from "./utils/dom.js";
-import { getStateFromStorage, setStateToStorage } from "./utils/storage.js";
+  addClickEventFromId,
+  resetLineTable,
+  renderStationTable,
+  renderLineTable,
+} from "./utils/dom.js";
+import { setStateToStorage } from "./utils/storage.js";
 import {
   INPUT_ALREADY_EXIST_NAME_MESSAGE,
   INPUT_LESS_THAN_2_MESSAGE,
-  DELETE_TEXT,
-  LOCAL_STORAGE_STATIONS_KEY,
+  INPUT_ALREADY_EXIST_LINE_NAME_MESSAGE,
+  CANT_SAME_START_AND_END_MESSAGE,
+  ALREAY_EXIST_SAME_END_POINTS,
+  LOCAL_STORAGE_LINES_KEY,
 } from "./constants/index.js";
+import { existLineName, existLineSameEndPoints } from "./utils/line.js";
 import Header from "./Header.js";
+import Line from "./Line.js";
 
 export default class SubwayMapManager {
   constructor() {
     new Header();
     this.clickAddStationEventListener();
+    this.lineAddClickEventListener();
   }
 
   clickAddStationEventListener() {
@@ -33,35 +39,34 @@ export default class SubwayMapManager {
         return;
       }
       pushNewStation(stationInputValue);
-      this.renderStationList();
+      renderStationTable();
     });
   }
 
-  renderStationList() {
-    const stations = getStateFromStorage(LOCAL_STORAGE_STATIONS_KEY);
-    if (!stations) {
-      return;
-    }
-    resetStationTable();
-    const stationTableBody = document.getElementById("station-table-body");
-    stations.forEach((station) => {
-      const tableRow = document.createElement("tr");
-      const stationTableData = document.createElement("td");
-      const tableSetData = document.createElement("td");
-      const stationDeleteButton = document.createElement("button");
-      stationTableData.innerText = station;
-      stationDeleteButton.setAttribute("class", "station-delete-button");
-      stationDeleteButton.innerText = DELETE_TEXT;
-      stationDeleteButton.onclick = () => {
-        removeStation(station);
-        this.renderStationList();
-      };
-      tableSetData.append(stationDeleteButton);
-      tableRow.append(stationTableData, tableSetData);
-      stationTableBody.append(tableRow);
+  lineAddClickEventListener() {
+    addClickEventFromId("line-add-button", () => {
+      const lineNameValue = document.getElementById("line-name-input").value;
+      const startValue = document.getElementById("line-start-station-selector")
+        .value;
+      const endValue = document.getElementById("line-end-station-selector")
+        .value;
+      if (existLineName(lineNameValue)) {
+        alert(INPUT_ALREADY_EXIST_LINE_NAME_MESSAGE);
+        return;
+      }
+      if (startValue === endValue) {
+        alert(CANT_SAME_START_AND_END_MESSAGE);
+        return;
+      }
+      if (existLineSameEndPoints([startValue, endValue])) {
+        alert(ALREAY_EXIST_SAME_END_POINTS);
+        return;
+      }
+      new Line(lineNameValue, [startValue, endValue]).add();
+      resetLineTable();
+      renderLineTable();
     });
   }
 }
 
 new SubwayMapManager();
-setStateToStorage(LOCAL_STORAGE_STATIONS_KEY, null);
diff --git a/src/utils/dom.js b/src/utils/dom.js
index fb9795146..454dca35c 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -1,9 +1,88 @@
+import {
+  DELETE_TEXT,
+  LOCAL_STORAGE_LINES_KEY,
+  LOCAL_STORAGE_STATIONS_KEY,
+} from "../constants/index.js";
+import { getStationOptions, removeLine } from "./line.js";
+import { removeStation } from "./station.js";
+import { getStateFromStorage } from "./storage.js";
+
 export const addClickEventFromId = (id, event) => {
   const element = document.getElementById(id);
   element.addEventListener("click", event);
 };
 
 export const resetStationTable = () => {
-  const stationTable = document.getElementById("station-table");
-  stationTable.innerHTML = `<tbody id="station-table-body"><tr><th>역 이름</th><th>설정</th></tr></tbody>`;
+  const stationTableBody = document.getElementById("station-table-body");
+  stationTableBody.innerHTML = `<tr><th>역 이름</th><th>설정</th></tr>`;
+};
+
+export const renderStationTable = () => {
+  const stations = getStateFromStorage(LOCAL_STORAGE_STATIONS_KEY);
+  resetStationTable();
+  if (!stations) {
+    return;
+  }
+  const stationTableBody = document.getElementById("station-table-body");
+  stations.forEach((station) => {
+    const tableRow = document.createElement("tr");
+    const stationTableData = document.createElement("td");
+    const tableSetData = document.createElement("td");
+    const stationDeleteButton = document.createElement("button");
+    stationTableData.innerText = station;
+    stationDeleteButton.setAttribute("class", "station-delete-button");
+    stationDeleteButton.innerText = DELETE_TEXT;
+    stationDeleteButton.onclick = () => {
+      removeStation(station);
+      renderStationTable();
+    };
+    tableSetData.append(stationDeleteButton);
+    tableRow.append(stationTableData, tableSetData);
+    stationTableBody.append(tableRow);
+  });
+};
+
+export const resetLineTable = () => {
+  const lineTableBody = document.getElementById("line-table-body");
+  lineTableBody.innerHTML = `<tr><th>노선 이름</th><th>상행 종점역</th><th>하행 종점역</th><th>설정</th></tr>`;
+};
+
+export const renderLineTable = () => {
+  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  resetLineTable();
+  if (!lines) {
+    return;
+  }
+  const lineTableBody = document.getElementById("line-table-body");
+  lines.forEach((line) => {
+    const tableRow = document.createElement("tr");
+    const nameEl = document.createElement("td");
+    const startEl = document.createElement("td");
+    const endEl = document.createElement("td");
+    const setEl = document.createElement("td");
+    const lineDeleteButton = document.createElement("button");
+    nameEl.innerText = line.name;
+    startEl.innerText = line.section[0];
+    endEl.innerText = line.section.slice(-1)[0];
+    lineDeleteButton.setAttribute("class", "line-delete-button");
+    lineDeleteButton.innerText = DELETE_TEXT;
+    lineDeleteButton.onclick = () => {
+      removeLine(line.name);
+      renderLineTable();
+    };
+    setEl.append(lineDeleteButton);
+    tableRow.append(nameEl, startEl, endEl, setEl);
+    lineTableBody.append(tableRow);
+  });
+};
+
+export const putOptions = () => {
+  const startStationSeletor = document.getElementById(
+    "line-start-station-selector"
+  );
+  const endStationSelector = document.getElementById(
+    "line-end-station-selector"
+  );
+  startStationSeletor.innerHTML = getStationOptions();
+  endStationSelector.innerHTML = getStationOptions();
 };
diff --git a/src/utils/line.js b/src/utils/line.js
index b21c4fee0..68d6d0622 100644
--- a/src/utils/line.js
+++ b/src/utils/line.js
@@ -1,4 +1,7 @@
-import { LOCAL_STORAGE_STATIONS_KEY } from "../constants/index.js";
+import {
+  LOCAL_STORAGE_STATIONS_KEY,
+  LOCAL_STORAGE_LINES_KEY,
+} from "../constants/index.js";
 import { getStateFromStorage } from "./storage.js";
 
 export const getStationOptions = () => {
@@ -8,3 +11,34 @@ export const getStationOptions = () => {
   }
   return stations.map((el) => `<option value="${el}">${el}</option>`).join("");
 };
+
+export const existLineName = (name) => {
+  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  if (!lines) {
+    return false;
+  }
+  return lines.find((el) => el.name === name);
+};
+
+export const existLineSameEndPoints = ([start, end]) => {
+  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  if (!lines) {
+    return false;
+  }
+  return Boolean(
+    lines.find(
+      (el) => el.section[0] === start && el.section.slice(-1)[0] === end
+    )
+  );
+};
+
+export const removeLine = (lineName) => {
+  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  if (!lines) {
+    return;
+  }
+  setStateToStorage(
+    LOCAL_STORAGE_LINES_KEY,
+    lines.filter((el) => el.name !== lineName)
+  );
+};

From aa4a63fdf8569db5f33c34be73647ef16cc75723 Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Mon, 14 Dec 2020 22:35:34 +0900
Subject: [PATCH 12/20] =?UTF-8?q?feat:=20=EA=B5=AC=EA=B0=84=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=9E=A1?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  |  2 +-
 index.html | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 0c7e71b7c..0026eb1a4 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
 - [x] header 모듈 분리하기
 - [x] 상행 하행 종점에 역 리스트 넣기
 - [x] 노선 추가 및 삭제 하기
-- [ ] 구간 관리 레이아웃 잡기
+- [x] 구간 관리 레이아웃 잡기
 - [ ] 구간 선택 하기
 - [ ] 구간 등록 및 제거 하기
 - [ ] 지하철 노선도 출력 레이아웃 및 보여주기
diff --git a/index.html b/index.html
index e99f0e406..859840358 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,18 @@ <h2>🚉 지하철 노선 목록</h2>
             <tbody id="line-table-body"></tbody>
           </table>
         </div>
-        <div class="hide" id="section-manager-content">구간 관리 내용</div>
+        <div class="" id="section-manager-content">
+          <h2>구간을 수정할 노선을 선택해주세요.</h2>
+          <div id="section-selector-container"></div>
+          <h3 id="section-manage-title"></h3>
+          <h4>구간 등록</h4>
+          <select id="section-station-selector"></select>
+          <input type="number" id="section-order-input" />
+          <button id="section-add-button">등록</button>
+          <table>
+            <tbody id="section-table-body"></tbody>
+          </table>
+        </div>
       </div>
     </div>
     <style>

From e8b08f4a4c0862aa078cd1f5e15a5bee7f4efde3 Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Tue, 15 Dec 2020 15:24:43 +0900
Subject: [PATCH 13/20] =?UTF-8?q?feat:=20=EA=B5=AC=EA=B0=84=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EC=8B=9C=20=EA=B5=AC=EA=B0=84=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20=ED=99=94=EB=A9=B4=20=EC=B6=9C=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - 구간 선택 화면 뼈대를 template literal로 따로 분리
---
 README.md              |  2 +-
 index.html             | 19 +++++-------
 src/Header.js          | 10 +++++--
 src/constants/index.js | 13 ++++++++
 src/index.js           |  2 --
 src/utils/dom.js       | 68 +++++++++++++++++++++++++++++++++++++-----
 6 files changed, 90 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 0026eb1a4..26d634c0a 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 - [x] 상행 하행 종점에 역 리스트 넣기
 - [x] 노선 추가 및 삭제 하기
 - [x] 구간 관리 레이아웃 잡기
-- [ ] 구간 선택 하기
+- [x] 구간 선택 하기
 - [ ] 구간 등록 및 제거 하기
 - [ ] 지하철 노선도 출력 레이아웃 및 보여주기
 
diff --git a/index.html b/index.html
index 859840358..2e648728d 100644
--- a/index.html
+++ b/index.html
@@ -43,18 +43,7 @@ <h2>🚉 지하철 노선 목록</h2>
             <tbody id="line-table-body"></tbody>
           </table>
         </div>
-        <div class="" id="section-manager-content">
-          <h2>구간을 수정할 노선을 선택해주세요.</h2>
-          <div id="section-selector-container"></div>
-          <h3 id="section-manage-title"></h3>
-          <h4>구간 등록</h4>
-          <select id="section-station-selector"></select>
-          <input type="number" id="section-order-input" />
-          <button id="section-add-button">등록</button>
-          <table>
-            <tbody id="section-table-body"></tbody>
-          </table>
-        </div>
+        <div class="hide" id="section-manager-content"></div>
       </div>
     </div>
     <style>
@@ -73,6 +62,12 @@ <h4>구간 등록</h4>
       #end-point-container {
         margin-bottom: 20px;
       }
+      #section-table {
+        margin-top: 20px;
+      }
+      .section-line-menu-button {
+        margin-right: 8px;
+      }
     </style>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/Header.js b/src/Header.js
index 37061ac44..db66332e1 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -2,7 +2,8 @@ import {
   addClickEventFromId,
   renderLineTable,
   renderStationTable,
-  putOptions,
+  putOptionsFromId,
+  renderSectionSelector,
 } from "./utils/dom.js";
 
 const menuIds = [
@@ -45,13 +46,18 @@ export default class Header {
     }
     const isLine = Boolean(id.match("line"));
     if (isLine) {
-      putOptions();
+      putOptionsFromId("line-start-station-selector");
+      putOptionsFromId("line-end-station-selector");
       renderLineTable();
     }
     const isStation = Boolean(id.match("station"));
     if (isStation) {
       renderStationTable();
     }
+    const isSection = Boolean(id.match("section"));
+    if (isSection) {
+      renderSectionSelector();
+    }
     const content = document.getElementById(id.replace("button", "content"));
     content.style.display = "block";
   }
diff --git a/src/constants/index.js b/src/constants/index.js
index 3b4808f6a..2cb73625f 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -11,3 +11,16 @@ export const DELETE_TEXT = "삭제";
 
 export const LOCAL_STORAGE_STATIONS_KEY = "STATIONS";
 export const LOCAL_STORAGE_LINES_KEY = "LINES";
+
+export const SECTION_CONTENT_SKELETON = `<h2>구간을 수정할 노선을 선택해주세요.</h2>
+  <div id="section-selector-container"></div>
+  <div id="section-modify-container" class="hide">
+    <h3 id="section-manage-title"></h3>
+    <h4>구간 등록</h4>
+    <select id="section-station-selector"></select>
+    <input type="number" id="section-order-input" />
+    <button id="section-add-button">등록</button>
+    <table id="section-table">
+      <tbody id="section-table-body"></tbody>
+    </table>
+  </div>`;
diff --git a/src/index.js b/src/index.js
index 07d50ce16..38987bb92 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,14 +5,12 @@ import {
   renderStationTable,
   renderLineTable,
 } from "./utils/dom.js";
-import { setStateToStorage } from "./utils/storage.js";
 import {
   INPUT_ALREADY_EXIST_NAME_MESSAGE,
   INPUT_LESS_THAN_2_MESSAGE,
   INPUT_ALREADY_EXIST_LINE_NAME_MESSAGE,
   CANT_SAME_START_AND_END_MESSAGE,
   ALREAY_EXIST_SAME_END_POINTS,
-  LOCAL_STORAGE_LINES_KEY,
 } from "./constants/index.js";
 import { existLineName, existLineSameEndPoints } from "./utils/line.js";
 import Header from "./Header.js";
diff --git a/src/utils/dom.js b/src/utils/dom.js
index 454dca35c..1d0f363fc 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -2,6 +2,7 @@ import {
   DELETE_TEXT,
   LOCAL_STORAGE_LINES_KEY,
   LOCAL_STORAGE_STATIONS_KEY,
+  SECTION_CONTENT_SKELETON,
 } from "../constants/index.js";
 import { getStationOptions, removeLine } from "./line.js";
 import { removeStation } from "./station.js";
@@ -76,13 +77,66 @@ export const renderLineTable = () => {
   });
 };
 
-export const putOptions = () => {
-  const startStationSeletor = document.getElementById(
-    "line-start-station-selector"
+export const putOptionsFromId = (id) => {
+  const element = document.getElementById(id);
+  element.innerHTML = getStationOptions();
+};
+
+export const renderSectionSelector = () => {
+  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  if (!lines) {
+    return;
+  }
+  const sectionManagerContent = document.getElementById(
+    "section-manager-content"
   );
-  const endStationSelector = document.getElementById(
-    "line-end-station-selector"
+  sectionManagerContent.innerHTML = SECTION_CONTENT_SKELETON;
+  const sectionSelectorContainer = document.getElementById(
+    "section-selector-container"
   );
-  startStationSeletor.innerHTML = getStationOptions();
-  endStationSelector.innerHTML = getStationOptions();
+  lines.forEach((line) => {
+    const lineSelectorButton = document.createElement("button");
+    lineSelectorButton.setAttribute("class", "section-line-menu-button");
+    lineSelectorButton.innerText = line.name;
+    lineSelectorButton.onclick = () => renderModifySectionContainer(line.name);
+    sectionSelectorContainer.appendChild(lineSelectorButton);
+  });
+};
+
+export const renderModifySectionContainer = (lineName) => {
+  const sectionModifyContainer = document.getElementById(
+    "section-modify-container"
+  );
+  const sectionManageTitle = document.getElementById("section-manage-title");
+  sectionModifyContainer.style.display = "block";
+  sectionManageTitle.innerText = `${lineName} 관리`;
+  putOptionsFromId("section-station-selector");
+  renderSectionTable(lineName);
+};
+
+export const resetSectionTable = () => {
+  const sectionTableBody = document.getElementById("section-table-body");
+  sectionTableBody.innerHTML = `<tr><th>순서</th><th>이름</th><th>설정</th></tr>`;
+};
+
+export const renderSectionTable = (lineName) => {
+  const selectedLine = getStateFromStorage(LOCAL_STORAGE_LINES_KEY).find(
+    (el) => el.name === lineName
+  );
+  resetSectionTable();
+  const sectionTableBody = document.getElementById("section-table-body");
+  selectedLine.section.forEach((station, i) => {
+    const tableRow = document.createElement("tr");
+    const orderEl = document.createElement("td");
+    const nameEl = document.createElement("td");
+    const setEl = document.createElement("td");
+    const deleteButton = document.createElement("button");
+    orderEl.innerText = i;
+    nameEl.innerText = station;
+    deleteButton.innerText = "노선에서 제거";
+    deleteButton.onclick = () => {};
+    setEl.append(deleteButton);
+    tableRow.append(orderEl, nameEl, setEl);
+    sectionTableBody.append(tableRow);
+  });
 };

From 0aafdcb46884100111f0f5fe1a6d37862474a8f8 Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Tue, 15 Dec 2020 17:12:17 +0900
Subject: [PATCH 14/20] =?UTF-8?q?feat:=20=EA=B5=AC=EA=B0=84=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=82=AD=EC=A0=9C=ED=95=98=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - line storage에 array로 저장하지 않고 object 형태로 변경
---
 README.md              |  3 +-
 src/Line.js            |  9 +++---
 src/constants/index.js |  3 ++
 src/utils/dom.js       | 63 +++++++++++++++++++++++++++++++-----------
 src/utils/line.js      | 20 +++++++-------
 5 files changed, 66 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index 26d634c0a..cf63e0d1e 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,8 @@
 - [x] 노선 추가 및 삭제 하기
 - [x] 구간 관리 레이아웃 잡기
 - [x] 구간 선택 하기
-- [ ] 구간 등록 및 제거 하기
+- [x] 구간 등록 및 제거 하기
+- [ ] 에러 메시지 정리하기
 - [ ] 지하철 노선도 출력 레이아웃 및 보여주기
 
 ## 🚀 기능 요구사항
diff --git a/src/Line.js b/src/Line.js
index 5180b13c9..478aa89c0 100644
--- a/src/Line.js
+++ b/src/Line.js
@@ -9,10 +9,9 @@ export default class Line {
 
   add() {
     const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
-    if (!lines) {
-      setStateToStorage(LOCAL_STORAGE_LINES_KEY, [this]);
-      return;
-    }
-    setStateToStorage(LOCAL_STORAGE_LINES_KEY, [...lines, this]);
+    setStateToStorage(LOCAL_STORAGE_LINES_KEY, {
+      ...lines,
+      [this.name]: this.section,
+    });
   }
 }
diff --git a/src/constants/index.js b/src/constants/index.js
index 2cb73625f..b6beed3aa 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -6,6 +6,9 @@ export const CANT_SAME_START_AND_END_MESSAGE =
   "상행 종점과 하행 종점이 같을 수 없습니다.";
 export const ALREAY_EXIST_SAME_END_POINTS =
   "종점이 일치하는 노선이 이미 존재합니다.";
+export const ALREADY_EXIST_STATION_IN_LINE = "역이 이미 노선에 존재합니다.";
+export const LESS_THAN_2_LINE_SECTION =
+  "구간이 2개 이하일 때는 삭제할 수 없습니다.";
 
 export const DELETE_TEXT = "삭제";
 
diff --git a/src/utils/dom.js b/src/utils/dom.js
index 1d0f363fc..bd1963e07 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -3,10 +3,12 @@ import {
   LOCAL_STORAGE_LINES_KEY,
   LOCAL_STORAGE_STATIONS_KEY,
   SECTION_CONTENT_SKELETON,
+  ALREADY_EXIST_STATION_IN_LINE,
+  LESS_THAN_2_LINE_SECTION,
 } from "../constants/index.js";
 import { getStationOptions, removeLine } from "./line.js";
 import { removeStation } from "./station.js";
-import { getStateFromStorage } from "./storage.js";
+import { getStateFromStorage, setStateToStorage } from "./storage.js";
 
 export const addClickEventFromId = (id, event) => {
   const element = document.getElementById(id);
@@ -55,26 +57,26 @@ export const renderLineTable = () => {
     return;
   }
   const lineTableBody = document.getElementById("line-table-body");
-  lines.forEach((line) => {
+  for (const key in lines) {
     const tableRow = document.createElement("tr");
     const nameEl = document.createElement("td");
     const startEl = document.createElement("td");
     const endEl = document.createElement("td");
     const setEl = document.createElement("td");
     const lineDeleteButton = document.createElement("button");
-    nameEl.innerText = line.name;
-    startEl.innerText = line.section[0];
-    endEl.innerText = line.section.slice(-1)[0];
+    nameEl.innerText = key;
+    startEl.innerText = lines[key][0];
+    endEl.innerText = lines[key].slice(-1)[0];
     lineDeleteButton.setAttribute("class", "line-delete-button");
     lineDeleteButton.innerText = DELETE_TEXT;
     lineDeleteButton.onclick = () => {
-      removeLine(line.name);
+      removeLine(key);
       renderLineTable();
     };
     setEl.append(lineDeleteButton);
     tableRow.append(nameEl, startEl, endEl, setEl);
     lineTableBody.append(tableRow);
-  });
+  }
 };
 
 export const putOptionsFromId = (id) => {
@@ -94,13 +96,27 @@ export const renderSectionSelector = () => {
   const sectionSelectorContainer = document.getElementById(
     "section-selector-container"
   );
-  lines.forEach((line) => {
+  for (const key in lines) {
     const lineSelectorButton = document.createElement("button");
     lineSelectorButton.setAttribute("class", "section-line-menu-button");
-    lineSelectorButton.innerText = line.name;
-    lineSelectorButton.onclick = () => renderModifySectionContainer(line.name);
+    lineSelectorButton.innerText = key;
+    lineSelectorButton.onclick = () => renderModifySectionContainer(key);
     sectionSelectorContainer.appendChild(lineSelectorButton);
-  });
+  }
+};
+
+export const addSection = (lineName) => {
+  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  const section = lines[lineName];
+  const station = document.getElementById("section-station-selector").value;
+  let order = document.getElementById("section-order-input").value;
+  if (section.indexOf(station) > -1) {
+    alert(ALREADY_EXIST_STATION_IN_LINE);
+    return;
+  }
+  section.splice(order, 0, station);
+  setStateToStorage(LOCAL_STORAGE_LINES_KEY, { ...lines, [lineName]: section });
+  renderSectionTable(lineName);
 };
 
 export const renderModifySectionContainer = (lineName) => {
@@ -108,6 +124,8 @@ export const renderModifySectionContainer = (lineName) => {
     "section-modify-container"
   );
   const sectionManageTitle = document.getElementById("section-manage-title");
+  const sectionAddButton = document.getElementById("section-add-button");
+  sectionAddButton.onclick = () => addSection(lineName);
   sectionModifyContainer.style.display = "block";
   sectionManageTitle.innerText = `${lineName} 관리`;
   putOptionsFromId("section-station-selector");
@@ -119,13 +137,26 @@ export const resetSectionTable = () => {
   sectionTableBody.innerHTML = `<tr><th>순서</th><th>이름</th><th>설정</th></tr>`;
 };
 
+export const removeSection = (lineName, station) => {
+  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  if (lines[lineName].length < 3) {
+    alert(LESS_THAN_2_LINE_SECTION);
+    return;
+  }
+  setStateToStorage(LOCAL_STORAGE_LINES_KEY, {
+    ...lines,
+    [lineName]: lines[lineName].filter((el) => el !== station),
+  });
+  renderSectionTable(lineName);
+};
+
 export const renderSectionTable = (lineName) => {
-  const selectedLine = getStateFromStorage(LOCAL_STORAGE_LINES_KEY).find(
-    (el) => el.name === lineName
-  );
+  const selectedSection = getStateFromStorage(LOCAL_STORAGE_LINES_KEY)[
+    lineName
+  ];
   resetSectionTable();
   const sectionTableBody = document.getElementById("section-table-body");
-  selectedLine.section.forEach((station, i) => {
+  selectedSection.forEach((station, i) => {
     const tableRow = document.createElement("tr");
     const orderEl = document.createElement("td");
     const nameEl = document.createElement("td");
@@ -134,7 +165,7 @@ export const renderSectionTable = (lineName) => {
     orderEl.innerText = i;
     nameEl.innerText = station;
     deleteButton.innerText = "노선에서 제거";
-    deleteButton.onclick = () => {};
+    deleteButton.onclick = () => removeSection(lineName, station);
     setEl.append(deleteButton);
     tableRow.append(orderEl, nameEl, setEl);
     sectionTableBody.append(tableRow);
diff --git a/src/utils/line.js b/src/utils/line.js
index 68d6d0622..f1d73aacd 100644
--- a/src/utils/line.js
+++ b/src/utils/line.js
@@ -17,7 +17,7 @@ export const existLineName = (name) => {
   if (!lines) {
     return false;
   }
-  return lines.find((el) => el.name === name);
+  return Object.keys(lines).indexOf(name) > -1;
 };
 
 export const existLineSameEndPoints = ([start, end]) => {
@@ -25,11 +25,13 @@ export const existLineSameEndPoints = ([start, end]) => {
   if (!lines) {
     return false;
   }
-  return Boolean(
-    lines.find(
-      (el) => el.section[0] === start && el.section.slice(-1)[0] === end
-    )
-  );
+  for (const key in lines) {
+    const section = lines[key];
+    if (section[0] === start && section.slice(-1)[0] === end) {
+      return true;
+    }
+  }
+  return false;
 };
 
 export const removeLine = (lineName) => {
@@ -37,8 +39,6 @@ export const removeLine = (lineName) => {
   if (!lines) {
     return;
   }
-  setStateToStorage(
-    LOCAL_STORAGE_LINES_KEY,
-    lines.filter((el) => el.name !== lineName)
-  );
+  delete lines[lineName];
+  setStateToStorage(LOCAL_STORAGE_LINES_KEY, lines);
 };

From 3d91111373835aa21506e2251c3ed412e11c7771 Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Tue, 15 Dec 2020 18:00:31 +0900
Subject: [PATCH 15/20] =?UTF-8?q?refactor:=20=EC=83=81=EC=88=98=20?=
 =?UTF-8?q?=EB=AA=A8=EB=93=88=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                   |  2 +-
 src/Line.js                 |  6 ++---
 src/constants/index.js      | 29 ---------------------
 src/constants/message.js    | 10 ++++++++
 src/constants/skeleton.js   | 38 +++++++++++++++++++++++++++
 src/constants/storageKey.js |  2 ++
 src/index.js                | 18 +++++--------
 src/utils/dom.js            | 51 ++++++++++++++++++-------------------
 src/utils/line.js           | 15 +++++------
 src/utils/station.js        | 12 ++++-----
 10 files changed, 97 insertions(+), 86 deletions(-)
 delete mode 100644 src/constants/index.js
 create mode 100644 src/constants/message.js
 create mode 100644 src/constants/skeleton.js
 create mode 100644 src/constants/storageKey.js

diff --git a/README.md b/README.md
index cf63e0d1e..06dfb1b91 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@
 - [x] 구간 관리 레이아웃 잡기
 - [x] 구간 선택 하기
 - [x] 구간 등록 및 제거 하기
-- [ ] 에러 메시지 정리하기
+- [x] 상수 정리하기
 - [ ] 지하철 노선도 출력 레이아웃 및 보여주기
 
 ## 🚀 기능 요구사항
diff --git a/src/Line.js b/src/Line.js
index 478aa89c0..28ecb11c8 100644
--- a/src/Line.js
+++ b/src/Line.js
@@ -1,5 +1,5 @@
 import { getStateFromStorage, setStateToStorage } from "./utils/storage.js";
-import { LOCAL_STORAGE_LINES_KEY } from "./constants/index.js";
+import * as storageKey from "./constants/storageKey.js";
 
 export default class Line {
   constructor(name, section) {
@@ -8,8 +8,8 @@ export default class Line {
   }
 
   add() {
-    const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
-    setStateToStorage(LOCAL_STORAGE_LINES_KEY, {
+    const lines = getStateFromStorage(storageKey.LINES);
+    setStateToStorage(storageKey.LINES, {
       ...lines,
       [this.name]: this.section,
     });
diff --git a/src/constants/index.js b/src/constants/index.js
deleted file mode 100644
index b6beed3aa..000000000
--- a/src/constants/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-export const INPUT_LESS_THAN_2_MESSAGE = "역 이름은 2자 이상이어야 합니다.";
-export const INPUT_ALREADY_EXIST_NAME_MESSAGE = "이미 존재하는 역입니다.";
-export const INPUT_ALREADY_EXIST_LINE_NAME_MESSAGE =
-  "이미 존재하는 노선 이름입니다.";
-export const CANT_SAME_START_AND_END_MESSAGE =
-  "상행 종점과 하행 종점이 같을 수 없습니다.";
-export const ALREAY_EXIST_SAME_END_POINTS =
-  "종점이 일치하는 노선이 이미 존재합니다.";
-export const ALREADY_EXIST_STATION_IN_LINE = "역이 이미 노선에 존재합니다.";
-export const LESS_THAN_2_LINE_SECTION =
-  "구간이 2개 이하일 때는 삭제할 수 없습니다.";
-
-export const DELETE_TEXT = "삭제";
-
-export const LOCAL_STORAGE_STATIONS_KEY = "STATIONS";
-export const LOCAL_STORAGE_LINES_KEY = "LINES";
-
-export const SECTION_CONTENT_SKELETON = `<h2>구간을 수정할 노선을 선택해주세요.</h2>
-  <div id="section-selector-container"></div>
-  <div id="section-modify-container" class="hide">
-    <h3 id="section-manage-title"></h3>
-    <h4>구간 등록</h4>
-    <select id="section-station-selector"></select>
-    <input type="number" id="section-order-input" />
-    <button id="section-add-button">등록</button>
-    <table id="section-table">
-      <tbody id="section-table-body"></tbody>
-    </table>
-  </div>`;
diff --git a/src/constants/message.js b/src/constants/message.js
new file mode 100644
index 000000000..e7c978272
--- /dev/null
+++ b/src/constants/message.js
@@ -0,0 +1,10 @@
+export const MORE_THAN_2_STATION_NAME = "역 이름은 2자 이상이어야 합니다.";
+export const ALREADY_EXIST_STATION_NAME = "이미 존재하는 역입니다.";
+export const ALREADY_EXIST_LINE_NAME = "이미 존재하는 노선 이름입니다.";
+export const CANT_SAME_START_AND_END =
+  "상행 종점과 하행 종점이 같을 수 없습니다.";
+export const ALREAY_EXIST_SAME_END_POINTS =
+  "종점이 일치하는 노선이 이미 존재합니다.";
+export const ALREADY_EXIST_STATION_IN_LINE = "역이 이미 노선에 존재합니다.";
+export const LESS_THAN_2_LINE_SECTION =
+  "구간이 2개 이하일 때는 삭제할 수 없습니다.";
diff --git a/src/constants/skeleton.js b/src/constants/skeleton.js
new file mode 100644
index 000000000..8cca7eb39
--- /dev/null
+++ b/src/constants/skeleton.js
@@ -0,0 +1,38 @@
+export const SECTION_CONTENT = `
+  <h2>구간을 수정할 노선을 선택해주세요.</h2>
+  <div id="section-selector-container"></div>
+  <div id="section-modify-container" class="hide">
+    <h3 id="section-manage-title"></h3>
+    <h4>구간 등록</h4>
+    <select id="section-station-selector"></select>
+    <input type="number" id="section-order-input" />
+    <button id="section-add-button">등록</button>
+    <table id="section-table">
+      <tbody id="section-table-body"></tbody>
+    </table>
+  </div>
+`;
+
+export const STATION_TABLE_BODY = `
+  <tr>
+    <th>역 이름</th>
+    <th>설정</th>
+  </tr>
+`;
+
+export const LINE_TABLE_BODY = `
+  <tr>
+    <th>노선 이름</th>
+    <th>상행 종점역</th>
+    <th>하행 종점역</th>
+    <th>설정</th>
+  </tr>
+`;
+
+export const SECTION_TABLE_BODY = `
+  <tr>
+    <th>순서</th>
+    <th>이름</th>
+    <th>설정</th>
+  </tr>
+`;
diff --git a/src/constants/storageKey.js b/src/constants/storageKey.js
new file mode 100644
index 000000000..a20021f0f
--- /dev/null
+++ b/src/constants/storageKey.js
@@ -0,0 +1,2 @@
+export const STATIONS = "STATIONS";
+export const LINES = "LINES";
diff --git a/src/index.js b/src/index.js
index 38987bb92..7d9b802ed 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,13 +5,7 @@ import {
   renderStationTable,
   renderLineTable,
 } from "./utils/dom.js";
-import {
-  INPUT_ALREADY_EXIST_NAME_MESSAGE,
-  INPUT_LESS_THAN_2_MESSAGE,
-  INPUT_ALREADY_EXIST_LINE_NAME_MESSAGE,
-  CANT_SAME_START_AND_END_MESSAGE,
-  ALREAY_EXIST_SAME_END_POINTS,
-} from "./constants/index.js";
+import * as message from "./constants/message.js";
 import { existLineName, existLineSameEndPoints } from "./utils/line.js";
 import Header from "./Header.js";
 import Line from "./Line.js";
@@ -28,12 +22,12 @@ export default class SubwayMapManager {
       const stationInputValue = document.getElementById("station-name-input")
         .value;
       if (stationInputValue.length < 2) {
-        alert(INPUT_LESS_THAN_2_MESSAGE);
+        alert(message.MORE_THAN_2_STATION_NAME);
         return;
       }
       const isExistStationName = existStationName(stationInputValue);
       if (isExistStationName) {
-        alert(INPUT_ALREADY_EXIST_NAME_MESSAGE);
+        alert(message.ALREADY_EXIST_STATION_NAME);
         return;
       }
       pushNewStation(stationInputValue);
@@ -49,15 +43,15 @@ export default class SubwayMapManager {
       const endValue = document.getElementById("line-end-station-selector")
         .value;
       if (existLineName(lineNameValue)) {
-        alert(INPUT_ALREADY_EXIST_LINE_NAME_MESSAGE);
+        alert(message.ALREADY_EXIST_LINE_NAME);
         return;
       }
       if (startValue === endValue) {
-        alert(CANT_SAME_START_AND_END_MESSAGE);
+        alert(message.CANT_SAME_START_AND_END);
         return;
       }
       if (existLineSameEndPoints([startValue, endValue])) {
-        alert(ALREAY_EXIST_SAME_END_POINTS);
+        alert(message.ALREAY_EXIST_SAME_END_POINTS);
         return;
       }
       new Line(lineNameValue, [startValue, endValue]).add();
diff --git a/src/utils/dom.js b/src/utils/dom.js
index bd1963e07..035c11623 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -1,15 +1,13 @@
-import {
-  DELETE_TEXT,
-  LOCAL_STORAGE_LINES_KEY,
-  LOCAL_STORAGE_STATIONS_KEY,
-  SECTION_CONTENT_SKELETON,
-  ALREADY_EXIST_STATION_IN_LINE,
-  LESS_THAN_2_LINE_SECTION,
-} from "../constants/index.js";
+import * as storageKey from "../constants/storageKey.js";
+import * as skeleton from "../constants/skeleton.js";
+import * as message from "../constants/message.js";
 import { getStationOptions, removeLine } from "./line.js";
 import { removeStation } from "./station.js";
 import { getStateFromStorage, setStateToStorage } from "./storage.js";
 
+const DELETE = "삭제";
+const DELETE_AT_LINE = "노선에서 제거";
+
 export const addClickEventFromId = (id, event) => {
   const element = document.getElementById(id);
   element.addEventListener("click", event);
@@ -17,11 +15,11 @@ export const addClickEventFromId = (id, event) => {
 
 export const resetStationTable = () => {
   const stationTableBody = document.getElementById("station-table-body");
-  stationTableBody.innerHTML = `<tr><th>역 이름</th><th>설정</th></tr>`;
+  stationTableBody.innerHTML = skeleton.STATION_TABLE_BODY;
 };
 
 export const renderStationTable = () => {
-  const stations = getStateFromStorage(LOCAL_STORAGE_STATIONS_KEY);
+  const stations = getStateFromStorage(storageKey.STATIONS);
   resetStationTable();
   if (!stations) {
     return;
@@ -34,7 +32,7 @@ export const renderStationTable = () => {
     const stationDeleteButton = document.createElement("button");
     stationTableData.innerText = station;
     stationDeleteButton.setAttribute("class", "station-delete-button");
-    stationDeleteButton.innerText = DELETE_TEXT;
+    stationDeleteButton.innerText = DELETE;
     stationDeleteButton.onclick = () => {
       removeStation(station);
       renderStationTable();
@@ -47,11 +45,11 @@ export const renderStationTable = () => {
 
 export const resetLineTable = () => {
   const lineTableBody = document.getElementById("line-table-body");
-  lineTableBody.innerHTML = `<tr><th>노선 이름</th><th>상행 종점역</th><th>하행 종점역</th><th>설정</th></tr>`;
+  lineTableBody.innerHTML = skeleton.LINE_TABLE_BODY;
 };
 
 export const renderLineTable = () => {
-  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  const lines = getStateFromStorage(storageKey.LINES);
   resetLineTable();
   if (!lines) {
     return;
@@ -85,14 +83,14 @@ export const putOptionsFromId = (id) => {
 };
 
 export const renderSectionSelector = () => {
-  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  const lines = getStateFromStorage(storageKey.LINES);
   if (!lines) {
     return;
   }
   const sectionManagerContent = document.getElementById(
     "section-manager-content"
   );
-  sectionManagerContent.innerHTML = SECTION_CONTENT_SKELETON;
+  sectionManagerContent.innerHTML = skeleton.SECTION_CONTENT;
   const sectionSelectorContainer = document.getElementById(
     "section-selector-container"
   );
@@ -106,16 +104,19 @@ export const renderSectionSelector = () => {
 };
 
 export const addSection = (lineName) => {
-  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  const lines = getStateFromStorage(storageKey.LINES);
   const section = lines[lineName];
   const station = document.getElementById("section-station-selector").value;
   let order = document.getElementById("section-order-input").value;
   if (section.indexOf(station) > -1) {
-    alert(ALREADY_EXIST_STATION_IN_LINE);
+    alert(message.ALREADY_EXIST_STATION_IN_LINE);
     return;
   }
   section.splice(order, 0, station);
-  setStateToStorage(LOCAL_STORAGE_LINES_KEY, { ...lines, [lineName]: section });
+  setStateToStorage(storageKey.LINES, {
+    ...lines,
+    [lineName]: section,
+  });
   renderSectionTable(lineName);
 };
 
@@ -134,16 +135,16 @@ export const renderModifySectionContainer = (lineName) => {
 
 export const resetSectionTable = () => {
   const sectionTableBody = document.getElementById("section-table-body");
-  sectionTableBody.innerHTML = `<tr><th>순서</th><th>이름</th><th>설정</th></tr>`;
+  sectionTableBody.innerHTML = skeleton.SECTION_TABLE_BODY;
 };
 
 export const removeSection = (lineName, station) => {
-  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  const lines = getStateFromStorage(storageKey.LINES);
   if (lines[lineName].length < 3) {
-    alert(LESS_THAN_2_LINE_SECTION);
+    alert(message.LESS_THAN_2_LINE_SECTION);
     return;
   }
-  setStateToStorage(LOCAL_STORAGE_LINES_KEY, {
+  setStateToStorage(storageKey.LINES, {
     ...lines,
     [lineName]: lines[lineName].filter((el) => el !== station),
   });
@@ -151,9 +152,7 @@ export const removeSection = (lineName, station) => {
 };
 
 export const renderSectionTable = (lineName) => {
-  const selectedSection = getStateFromStorage(LOCAL_STORAGE_LINES_KEY)[
-    lineName
-  ];
+  const selectedSection = getStateFromStorage(storageKey.LINES)[lineName];
   resetSectionTable();
   const sectionTableBody = document.getElementById("section-table-body");
   selectedSection.forEach((station, i) => {
@@ -164,7 +163,7 @@ export const renderSectionTable = (lineName) => {
     const deleteButton = document.createElement("button");
     orderEl.innerText = i;
     nameEl.innerText = station;
-    deleteButton.innerText = "노선에서 제거";
+    deleteButton.innerText = DELETE_AT_LINE;
     deleteButton.onclick = () => removeSection(lineName, station);
     setEl.append(deleteButton);
     tableRow.append(orderEl, nameEl, setEl);
diff --git a/src/utils/line.js b/src/utils/line.js
index f1d73aacd..06e1c3163 100644
--- a/src/utils/line.js
+++ b/src/utils/line.js
@@ -1,11 +1,8 @@
-import {
-  LOCAL_STORAGE_STATIONS_KEY,
-  LOCAL_STORAGE_LINES_KEY,
-} from "../constants/index.js";
+import * as storageKey from "../constants/storageKey.js";
 import { getStateFromStorage } from "./storage.js";
 
 export const getStationOptions = () => {
-  const stations = getStateFromStorage(LOCAL_STORAGE_STATIONS_KEY);
+  const stations = getStateFromStorage(storageKey.STATIONS);
   if (!stations) {
     return null;
   }
@@ -13,7 +10,7 @@ export const getStationOptions = () => {
 };
 
 export const existLineName = (name) => {
-  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  const lines = getStateFromStorage(storageKey.LINES);
   if (!lines) {
     return false;
   }
@@ -21,7 +18,7 @@ export const existLineName = (name) => {
 };
 
 export const existLineSameEndPoints = ([start, end]) => {
-  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  const lines = getStateFromStorage(storageKey.LINES);
   if (!lines) {
     return false;
   }
@@ -35,10 +32,10 @@ export const existLineSameEndPoints = ([start, end]) => {
 };
 
 export const removeLine = (lineName) => {
-  const lines = getStateFromStorage(LOCAL_STORAGE_LINES_KEY);
+  const lines = getStateFromStorage(storageKey.LINES);
   if (!lines) {
     return;
   }
   delete lines[lineName];
-  setStateToStorage(LOCAL_STORAGE_LINES_KEY, lines);
+  setStateToStorage(storageKey.LINES, lines);
 };
diff --git a/src/utils/station.js b/src/utils/station.js
index 46f8541d2..aa98f53f8 100644
--- a/src/utils/station.js
+++ b/src/utils/station.js
@@ -1,8 +1,8 @@
-import { LOCAL_STORAGE_STATIONS_KEY } from "../constants/index.js";
+import * as storageKey from "../constants/storageKey.js";
 import { getStateFromStorage, setStateToStorage } from "./storage.js";
 
 export const existStationName = (name) => {
-  const stations = getStateFromStorage(LOCAL_STORAGE_STATIONS_KEY);
+  const stations = getStateFromStorage(storageKey.STATIONS);
   if (!stations) {
     return false;
   }
@@ -10,20 +10,20 @@ export const existStationName = (name) => {
 };
 
 export const removeStation = (name) => {
-  const stations = getStateFromStorage(LOCAL_STORAGE_STATIONS_KEY);
+  const stations = getStateFromStorage(storageKey.STATIONS);
   if (stations === null) {
     return;
   }
   setStateToStorage(
-    LOCAL_STORAGE_STATIONS_KEY,
+    storageKey.STATIONS,
     stations.filter((el) => el !== name)
   );
 };
 
 export const pushNewStation = (station) => {
-  const previousStations = getStateFromStorage(LOCAL_STORAGE_STATIONS_KEY);
+  const previousStations = getStateFromStorage(storageKey.STATIONS);
   const newStations = previousStations
     ? [...previousStations, station]
     : [station];
-  setStateToStorage(LOCAL_STORAGE_STATIONS_KEY, newStations);
+  setStateToStorage(storageKey.STATIONS, newStations);
 };

From 1f1614af74672670561cbd69d9f6a4a9d98fa43c Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Tue, 15 Dec 2020 18:13:01 +0900
Subject: [PATCH 16/20] =?UTF-8?q?fix:=20=EC=83=81=EC=88=98=20=EC=98=A4?=
 =?UTF-8?q?=ED=83=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/utils/dom.js b/src/utils/dom.js
index 035c11623..01731e908 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -66,7 +66,7 @@ export const renderLineTable = () => {
     startEl.innerText = lines[key][0];
     endEl.innerText = lines[key].slice(-1)[0];
     lineDeleteButton.setAttribute("class", "line-delete-button");
-    lineDeleteButton.innerText = DELETE_TEXT;
+    lineDeleteButton.innerText = DELETE;
     lineDeleteButton.onclick = () => {
       removeLine(key);
       renderLineTable();

From 157aa809be93d0990600674287eb07a4db91b71a Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Tue, 15 Dec 2020 20:06:55 +0900
Subject: [PATCH 17/20] =?UTF-8?q?feat:=20=EC=A7=80=ED=95=98=EC=B2=A0=20?=
 =?UTF-8?q?=EB=85=B8=EC=84=A0=EB=8F=84=20=EC=B6=9C=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md        |  2 +-
 src/Header.js    |  9 ++++++++-
 src/utils/dom.js | 10 ++++++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 06dfb1b91..9e7dd7195 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@
 - [x] 구간 선택 하기
 - [x] 구간 등록 및 제거 하기
 - [x] 상수 정리하기
-- [ ] 지하철 노선도 출력 레이아웃 및 보여주기
+- [x] 지하철 노선도 출력 레이아웃 및 보여주기
 
 ## 🚀 기능 요구사항
 
diff --git a/src/Header.js b/src/Header.js
index db66332e1..1684bca3c 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -4,7 +4,10 @@ import {
   renderStationTable,
   putOptionsFromId,
   renderSectionSelector,
+  combineMap,
 } from "./utils/dom.js";
+import { getStateFromStorage } from "./utils/storage.js";
+import * as storageKey from "./constants/storageKey.js";
 
 const menuIds = [
   "station-manager-button",
@@ -63,9 +66,13 @@ export default class Header {
   }
 
   renderMapContent() {
+    const lines = getStateFromStorage(storageKey.LINES);
+    if (!lines) {
+      return;
+    }
     const newEl = document.createElement("div");
     newEl.setAttribute("class", "map");
-    newEl.innerHTML = "노선 출력 내용";
+    newEl.innerHTML = Object.entries(lines).reduce(combineMap, "");
     const contentEl = document.getElementById("content");
     contentEl.appendChild(newEl);
   }
diff --git a/src/utils/dom.js b/src/utils/dom.js
index 01731e908..8a2575305 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -170,3 +170,13 @@ export const renderSectionTable = (lineName) => {
     sectionTableBody.append(tableRow);
   });
 };
+
+export const combineMap = (acc, [line, section]) => {
+  return (
+    acc +
+    `<h2>${line}</h2><ul>${section.reduce(
+      (a, c) => a + `<li>${c}</li>`,
+      ""
+    )}</ul>`
+  );
+};

From 87e4de8d557456a4ffceb3d3659e3035223a967a Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Tue, 15 Dec 2020 20:36:48 +0900
Subject: [PATCH 18/20] =?UTF-8?q?feat:=20data=20=EC=86=8D=EC=84=B1?=
 =?UTF-8?q?=EC=9D=84=20=EC=9D=B4=EC=9A=A9=ED=95=98=EC=97=AC=20html?=
 =?UTF-8?q?=EC=97=90=20=EA=B3=A0=EC=9C=A0=ED=95=9C=20=EA=B0=92=20=EB=B6=80?=
 =?UTF-8?q?=EC=97=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md        | 1 +
 src/utils/dom.js | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 9e7dd7195..7b60b9067 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@
 - [x] 구간 등록 및 제거 하기
 - [x] 상수 정리하기
 - [x] 지하철 노선도 출력 레이아웃 및 보여주기
+- [x] data 속성 사용하여 유일한 값 부여하기
 
 ## 🚀 기능 요구사항
 
diff --git a/src/utils/dom.js b/src/utils/dom.js
index 8a2575305..0181c2ac6 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -37,6 +37,7 @@ export const renderStationTable = () => {
       removeStation(station);
       renderStationTable();
     };
+    tableRow.dataset.station = station;
     tableSetData.append(stationDeleteButton);
     tableRow.append(stationTableData, tableSetData);
     stationTableBody.append(tableRow);
@@ -71,6 +72,7 @@ export const renderLineTable = () => {
       removeLine(key);
       renderLineTable();
     };
+    tableRow.dataset.line = key;
     setEl.append(lineDeleteButton);
     tableRow.append(nameEl, startEl, endEl, setEl);
     lineTableBody.append(tableRow);
@@ -97,6 +99,7 @@ export const renderSectionSelector = () => {
   for (const key in lines) {
     const lineSelectorButton = document.createElement("button");
     lineSelectorButton.setAttribute("class", "section-line-menu-button");
+    lineSelectorButton.dataset.line = key;
     lineSelectorButton.innerText = key;
     lineSelectorButton.onclick = () => renderModifySectionContainer(key);
     sectionSelectorContainer.appendChild(lineSelectorButton);
@@ -165,6 +168,7 @@ export const renderSectionTable = (lineName) => {
     nameEl.innerText = station;
     deleteButton.innerText = DELETE_AT_LINE;
     deleteButton.onclick = () => removeSection(lineName, station);
+    tableRow.dataset.section = `${lineName}-${i}`;
     setEl.append(deleteButton);
     tableRow.append(orderEl, nameEl, setEl);
     sectionTableBody.append(tableRow);
@@ -174,8 +178,8 @@ export const renderSectionTable = (lineName) => {
 export const combineMap = (acc, [line, section]) => {
   return (
     acc +
-    `<h2>${line}</h2><ul>${section.reduce(
-      (a, c) => a + `<li>${c}</li>`,
+    `<h2 data-line=${line}>${line}</h2><ul>${section.reduce(
+      (a, c) => a + `<li data-station=${line}-${c}>${c}</li>`,
       ""
     )}</ul>`
   );

From ae6e806b622d7af6493e6ee89547c79d4d85c2c0 Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Tue, 15 Dec 2020 21:33:47 +0900
Subject: [PATCH 19/20] =?UTF-8?q?chore:=20renderMapContent=20=EB=A9=94?=
 =?UTF-8?q?=EC=86=8C=EB=93=9C=EB=A5=BC=20utils=EB=A1=9C=20=EC=98=AE?=
 =?UTF-8?q?=EA=B9=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Header.js    | 18 ++----------------
 src/utils/dom.js | 12 ++++++++++++
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/Header.js b/src/Header.js
index 1684bca3c..34aa73e8e 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -4,10 +4,8 @@ import {
   renderStationTable,
   putOptionsFromId,
   renderSectionSelector,
-  combineMap,
+  renderMapContent,
 } from "./utils/dom.js";
-import { getStateFromStorage } from "./utils/storage.js";
-import * as storageKey from "./constants/storageKey.js";
 
 const menuIds = [
   "station-manager-button",
@@ -44,7 +42,7 @@ export default class Header {
   renderContent(id) {
     const isMap = Boolean(id.match("map"));
     if (isMap) {
-      this.renderMapContent();
+      renderMapContent();
       return;
     }
     const isLine = Boolean(id.match("line"));
@@ -64,16 +62,4 @@ export default class Header {
     const content = document.getElementById(id.replace("button", "content"));
     content.style.display = "block";
   }
-
-  renderMapContent() {
-    const lines = getStateFromStorage(storageKey.LINES);
-    if (!lines) {
-      return;
-    }
-    const newEl = document.createElement("div");
-    newEl.setAttribute("class", "map");
-    newEl.innerHTML = Object.entries(lines).reduce(combineMap, "");
-    const contentEl = document.getElementById("content");
-    contentEl.appendChild(newEl);
-  }
 }
diff --git a/src/utils/dom.js b/src/utils/dom.js
index 0181c2ac6..be19eea16 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -184,3 +184,15 @@ export const combineMap = (acc, [line, section]) => {
     )}</ul>`
   );
 };
+
+export const renderMapContent = () => {
+  const lines = getStateFromStorage(storageKey.LINES);
+  if (!lines) {
+    return;
+  }
+  const newEl = document.createElement("div");
+  newEl.setAttribute("class", "map");
+  newEl.innerHTML = Object.entries(lines).reduce(combineMap, "");
+  const contentEl = document.getElementById("content");
+  contentEl.appendChild(newEl);
+};

From 5d9172a216b4a4c69ec14744acbe7e1072bf8152 Mon Sep 17 00:00:00 2001
From: rjwu95 <yugun000@gmail.com>
Date: Tue, 15 Dec 2020 21:52:56 +0900
Subject: [PATCH 20/20] =?UTF-8?q?feat:=20=EB=85=B8=EC=84=A0=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A6=84=EC=9D=B4=20=EB=B9=84=EC=96=B4=EC=9E=88=EB=8A=94=20?=
 =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EC=98=88=EC=99=B8=20=EC=B2=98=EB=A6=AC?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                | 1 +
 src/constants/message.js | 1 +
 src/index.js             | 4 ++++
 3 files changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 7b60b9067..6bbf130cb 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,7 @@
 - [x] 상수 정리하기
 - [x] 지하철 노선도 출력 레이아웃 및 보여주기
 - [x] data 속성 사용하여 유일한 값 부여하기
+- [x] 노선 이름 비어있는 경우 예외처리
 
 ## 🚀 기능 요구사항
 
diff --git a/src/constants/message.js b/src/constants/message.js
index e7c978272..065b4ae62 100644
--- a/src/constants/message.js
+++ b/src/constants/message.js
@@ -8,3 +8,4 @@ export const ALREAY_EXIST_SAME_END_POINTS =
 export const ALREADY_EXIST_STATION_IN_LINE = "역이 이미 노선에 존재합니다.";
 export const LESS_THAN_2_LINE_SECTION =
   "구간이 2개 이하일 때는 삭제할 수 없습니다.";
+export const MUST_INPUT_LINE_NAME = "노선 이름을 입력해 주세요.";
diff --git a/src/index.js b/src/index.js
index 7d9b802ed..efd25fdc0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -42,6 +42,10 @@ export default class SubwayMapManager {
         .value;
       const endValue = document.getElementById("line-end-station-selector")
         .value;
+      if (!lineNameValue) {
+        alert(message.MUST_INPUT_LINE_NAME);
+        return;
+      }
       if (existLineName(lineNameValue)) {
         alert(message.ALREADY_EXIST_LINE_NAME);
         return;