From 1c64efd5dd00196395c1badec5e838914948338c Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 01:11:11 +0900
Subject: [PATCH 01/20] =?UTF-8?q?docs:=20=EA=B8=B0=EB=8A=A5=EC=9A=94?=
 =?UTF-8?q?=EA=B5=AC=EC=82=AC=ED=95=AD=20=EC=97=85=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 75 ++++++++-----------------------------------------------
 1 file changed, 10 insertions(+), 65 deletions(-)

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

From e65b2ab2e03d469f4b3062bdbbd1daa653ff5552 Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 01:50:56 +0900
Subject: [PATCH 02/20] =?UTF-8?q?feat:=20station=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=20=EC=A0=9C=EA=B1=B0=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html              | 38 +++++++++++++++++-
 src/alertMessage.js     | 13 ++++++
 src/constant.js         |  4 ++
 src/index.js            | 34 ++++++++++++++++
 src/inputCheck.js       | 88 +++++++++++++++++++++++++++++++++++++++++
 src/manager/line.js     |  1 +
 src/manager/mapPrint.js |  1 +
 src/manager/section.js  |  1 +
 src/manager/station.js  | 78 ++++++++++++++++++++++++++++++++++++
 9 files changed, 257 insertions(+), 1 deletion(-)
 create mode 100644 src/alertMessage.js
 create mode 100644 src/constant.js
 create mode 100644 src/inputCheck.js
 create mode 100644 src/manager/line.js
 create mode 100644 src/manager/mapPrint.js
 create mode 100644 src/manager/section.js
 create mode 100644 src/manager/station.js

diff --git a/index.html b/index.html
index fc99deac2..c3d7cdc6d 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,43 @@
   </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>
+    <div id="main-container">
+      <div id="station-page" style="display: none;">
+        <h4>역 이름</h4>
+        <input type="text" id="station-name-input" placeholder="역 이름을 입력해주세요."></input>
+        <button id="station-add-button">역 추가</button>
+        <h2>🚉 지하철 역 목록</h2>
+        <table id="station-table" border="1">
+          <th>역 이름</th><th>설정</th>
+        </table>
+      </div>
+      <div id="line-page" style="display: none;">
+        <h4>노선 이름</h4>
+            <input type="text" id="line-name-input" placeholder="노선 이름을 입력해주세요."></input><br>
+          <div>
+            <span>상행 종점</span>
+            <select id="line-start-station-selector">
+            </select>
+          </div><br>
+          <div>
+            <span>하행 종점</span>
+            <select id="line-end-station-selector">
+            </select>
+          </div><br>
+          <button id="line-add-button">노선 추가</button>
+          <h2>🚉 지하철 노선 목록</h2>
+      </div>
+      <div id="section-page" style="display: none;">
+        <h3>구간을 수정할 노선을 선택해주세요.</h3>
+      </div>
+      <div id="mapPrint-page" style="display: none;">
+      </div>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/alertMessage.js b/src/alertMessage.js
new file mode 100644
index 000000000..f0e954841
--- /dev/null
+++ b/src/alertMessage.js
@@ -0,0 +1,13 @@
+import { constant } from "./constant.js";
+
+export const alertMessage = {
+  SHORT_LENGTH_ERROR: `최소 ${constant.minLength} 글자 이상 입력해야 합니다.`,
+  ORDERING_INPUT_NOTHING_ERROR: `순서를 입력해주세요`,
+  DELETE_CHECK_MESSAGE: "정말로 삭제하시겠습니까?",
+  DELETE_STATION_ON_LINE_MESSAGE: "이 역은 현재 노선에 등록되어 있어 삭제가 불가능합니다.",
+  DELETE_STATIONS_ON_LINE_SHORTAGE_MESSAGE: `선택한 노선의 역이 ${constant.minStations}개 이하인 경우에는 삭제할 수 없습니다.`,
+  SAME_DESTINATION_ERROR: `상행과 하행이 같습니다. 다시 입력해주세요.`,
+  SAME_LINE_EXIST_ERROR: "이미 같은 이름을 가진 노선이 있습니다.",
+  SAME_STATION_EXIST_ERROR: "이미 같은 이름을 가진 역이 있습니다.",
+  SAME_SECTION_EXIST_ERROR: "이미 같은 구간이 등록되어 있습니다.",
+};
diff --git a/src/constant.js b/src/constant.js
new file mode 100644
index 000000000..3b75617b1
--- /dev/null
+++ b/src/constant.js
@@ -0,0 +1,4 @@
+export const constant = {
+  minLength: 2,
+  minStations: 2,
+};
diff --git a/src/index.js b/src/index.js
index e69de29bb..028a2b904 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,34 @@
+import Station from "./manager/station.js";
+import Line from "./manager/line.js";
+import Section from "./manager/section.js";
+import MapPrint from "./manager/mapPrint.js";
+
+export default function SubwayMap() {
+  const station = new Station();
+  const line = new Line();
+  const section = new Section();
+  const mapPrint = new MapPrint();
+  const stationBtn = document.getElementById("station-manager-button");
+  const lineBtn = document.getElementById("line-manager-button");
+  const sectionBtn = document.getElementById("section-manager-button");
+  const mapPrintBtn = document.getElementById("map-print-manager-button");
+
+  this.onClickStation = () => {
+    station.init(line.lines);
+  };
+
+  this.onClickLine = () => {
+    line.init();
+  };
+
+  this.onClickSection = () => {};
+
+  this.onClickMapPrint = () => {};
+
+  stationBtn.addEventListener("click", this.onClickStation);
+  lineBtn.addEventListener("click", this.onClickLine);
+  sectionBtn.addEventListener("click", this.onClickSection);
+  mapPrintBtn.addEventListener("click", this.onClickMapPrint);
+}
+
+new SubwayMap();
diff --git a/src/inputCheck.js b/src/inputCheck.js
new file mode 100644
index 000000000..5a135c1b5
--- /dev/null
+++ b/src/inputCheck.js
@@ -0,0 +1,88 @@
+import { constant } from "./constant.js";
+
+export function isSatisfyLength(len) {
+  let result = true;
+  if (String(len).length < constant.minLength) {
+    result = false;
+  }
+
+  return result;
+}
+
+export function isSameDestination(start, end) {
+  let result = true;
+  if (start !== end) {
+    result = false;
+  }
+
+  return result;
+}
+
+export function isStationAlreadyExist(stations, name) {
+  let result = false;
+  for (let i = 0; i < stations.length; i++) {
+    if (name === stations[i]) {
+      result = true;
+      break;
+    }
+  }
+
+  return result;
+}
+
+export function isLineAlreadyExist(lines, name) {
+  let result = false;
+  for (let i = 0; i < lines.length; i++) {
+    if (name === lines[i].name) {
+      result = true;
+      break;
+    }
+  }
+
+  return result;
+}
+
+export function isSectionAlreadyExist(sections, name) {
+  let result = false;
+  for (let i = 0; i < sections.length; i++) {
+    if (name === sections[i]) {
+      result = true;
+      break;
+    }
+  }
+
+  return result;
+}
+
+function _isStationOnLine(sections, name) {
+  let result = false;
+  for (let i = 0; i < sections.length; i++) {
+    if (name === sections[i]) {
+      result = true;
+      break;
+    }
+  }
+
+  return result;
+}
+
+export function isStationOnLine(lines, name) {
+  let result = false;
+  for (let i = 0; i < lines.length; i++) {
+    if (_isStationOnLine(lines[i].sections, name)) {
+      result = true;
+      break;
+    }
+  }
+
+  return result;
+}
+
+export function isSatisfyMinNumOfStations(line) {
+  let result = false;
+  if (line.sections.length > constant.minStations) {
+    result = true;
+  }
+
+  return result;
+}
diff --git a/src/manager/line.js b/src/manager/line.js
new file mode 100644
index 000000000..0f0f329ff
--- /dev/null
+++ b/src/manager/line.js
@@ -0,0 +1 @@
+export default function Line() {}
diff --git a/src/manager/mapPrint.js b/src/manager/mapPrint.js
new file mode 100644
index 000000000..e70441540
--- /dev/null
+++ b/src/manager/mapPrint.js
@@ -0,0 +1 @@
+export default function MapPrint() {}
diff --git a/src/manager/section.js b/src/manager/section.js
new file mode 100644
index 000000000..138ffff5c
--- /dev/null
+++ b/src/manager/section.js
@@ -0,0 +1 @@
+export default function Section() {}
diff --git a/src/manager/station.js b/src/manager/station.js
new file mode 100644
index 000000000..1ae8c17dd
--- /dev/null
+++ b/src/manager/station.js
@@ -0,0 +1,78 @@
+import { isSatisfyLength, isStationAlreadyExist, isStationOnLine } from "../inputCheck.js";
+import { alertMessage } from "../alertMessage.js";
+
+export default function Station() {
+  const stationPage = document.getElementById("station-page");
+  const stationTable = document.getElementById("station-table");
+  let lines;
+  this.stations = [
+    "인천",
+    "동인천",
+    "도원",
+    "소요산",
+    "사당",
+    "시청",
+    "신도림",
+    "대화",
+    "오금",
+    "오이도",
+    "당고개",
+  ];
+  this.count = this.stations.length;
+
+  this.init = (lineList) => {
+    lines = lineList; // Line 클래스 인스턴스를 받아옴
+    stationPage.style.display = "block";
+    this.showStations();
+    const stationDelBtns = document.getElementsByClassName("station-delete-button");
+    for (let i = 0; i < stationDelBtns.length; i++) {
+      stationDelBtns[i].addEventListener("click", (event) => this.deleteStation(event));
+    }
+    const stationInputBtn = document.getElementById("station-add-button");
+    stationInputBtn.addEventListener("click", this.addStation);
+  };
+
+  this.showStations = () => {
+    let newHTML = "";
+    for (let i = 0; i < this.stations.length; i++) {
+      newHTML += `
+        <tr id="station${i}">
+          <td><span>${this.stations[i]} </span></td>
+          <td><button class="station-delete-button" id="${i}" value="${this.stations[i]}">삭제</button></td>
+        </tr>`;
+    }
+    stationTable.insertAdjacentHTML("beforeend", newHTML);
+  };
+
+  this.addStation = () => {
+    const stationInput = document.getElementById("station-name-input").value;
+    if (!isSatisfyLength(stationInput)) {
+      return alert(alertMessage.SHORT_LENGTH_ERROR);
+    } else if (isStationAlreadyExist(this.stations, stationInput)) {
+      return alert(alertMessage.SAME_STATION_EXIST_ERROR);
+    }
+    this.stations.push(stationInput);
+    const newHTML = `
+    <tr id="station${this.count}">
+    <td><span>${stationInput}</span></td>
+    <td><button class="station-delete-button" id="${this.count}">삭제</button></td></tr>`;
+    stationTable.insertAdjacentHTML("beforeend", newHTML);
+    const newStation = document.getElementById(`${this.count}`);
+    newStation.addEventListener("click", (event) => this.deleteStation(event));
+    this.count++;
+  };
+
+  this.deleteStation = (event) => {
+    const targetId = event.target.id;
+    const targetValue = event.target.value;
+    const delStation = document.getElementById(`station${targetId}`);
+    if (!confirm(alertMessage.DELETE_CHECK_MESSAGE)) {
+      return;
+    }
+    if (isStationOnLine(lines, targetValue)) {
+      return alert(alertMessage.DELETE_STATION_ON_LINE_MESSAGE);
+    }
+    delStation.remove();
+    this.stations.splice(this.stations.indexOf(targetValue), 1);
+  };
+}

From 7a0c62f03f1f4b30b32cb5348fbe3ae410f7b125 Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 13:39:06 +0900
Subject: [PATCH 03/20] =?UTF-8?q?feat:=20station=20=EC=B6=94=EA=B0=80,=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                           | 25 +++++----
 src/event/line/addLine.js            |  0
 src/event/line/delLine.js            |  0
 src/event/menuEvent.js               | 28 ++++++++++
 src/event/station/addStationEvent.js | 29 ++++++++++
 src/event/station/delStationEvent.js | 31 ++++++++++
 src/index.js                         | 27 +--------
 src/inputCheck.js                    |  2 +-
 src/manager/line.js                  | 84 +++++++++++++++++++++++++++-
 src/manager/station.js               | 80 +++-----------------------
 src/render/render.js                 | 11 ++++
 src/render/renderLine.js             | 40 +++++++++++++
 src/render/renderStation.js          | 45 +++++++++++++++
 13 files changed, 291 insertions(+), 111 deletions(-)
 create mode 100644 src/event/line/addLine.js
 create mode 100644 src/event/line/delLine.js
 create mode 100644 src/event/menuEvent.js
 create mode 100644 src/event/station/addStationEvent.js
 create mode 100644 src/event/station/delStationEvent.js
 create mode 100644 src/render/render.js
 create mode 100644 src/render/renderLine.js
 create mode 100644 src/render/renderStation.js

diff --git a/index.html b/index.html
index c3d7cdc6d..bb0ee944c 100644
--- a/index.html
+++ b/index.html
@@ -7,24 +7,24 @@
   <body>
     <div id="app">
       <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 class="menu-button">
+        <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>
     </div>
     <div id="main-container">
-      <div id="station-page" style="display: none;">
+      <div class="page" id="station-page" style="display: none;">
         <h4>역 이름</h4>
         <input type="text" id="station-name-input" placeholder="역 이름을 입력해주세요."></input>
         <button id="station-add-button">역 추가</button>
         <h2>🚉 지하철 역 목록</h2>
-        <table id="station-table" border="1">
-          <th>역 이름</th><th>설정</th>
-        </table>
+        <div id="station-table-container"></div>
       </div>
-      <div id="line-page" style="display: none;">
+      <div class="page" id="line-page" style="display: none;">
         <h4>노선 이름</h4>
-            <input type="text" id="line-name-input" placeholder="노선 이름을 입력해주세요."></input><br>
+            <h4><input type="text" id="line-name-input" placeholder="노선 이름을 입력해주세요."></input></h4>
           <div>
             <span>상행 종점</span>
             <select id="line-start-station-selector">
@@ -37,11 +37,12 @@ <h4>노선 이름</h4>
           </div><br>
           <button id="line-add-button">노선 추가</button>
           <h2>🚉 지하철 노선 목록</h2>
+          <div id="line-table-container"></div>
       </div>
-      <div id="section-page" style="display: none;">
+      <div class="page" id="section-page" style="display: none;">
         <h3>구간을 수정할 노선을 선택해주세요.</h3>
       </div>
-      <div id="mapPrint-page" style="display: none;">
+      <div class="page" id="map-print-page" style="display: none;">
       </div>
     </div>
     <script type="module" src="src/index.js"></script>
diff --git a/src/event/line/addLine.js b/src/event/line/addLine.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/event/line/delLine.js b/src/event/line/delLine.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/event/menuEvent.js b/src/event/menuEvent.js
new file mode 100644
index 000000000..6333fbbfc
--- /dev/null
+++ b/src/event/menuEvent.js
@@ -0,0 +1,28 @@
+import render from "../render/render.js";
+import addStationEvent from "./station/addStationEvent.js";
+
+function setHiddenPages() {
+  const $page = document.querySelectorAll(".page");
+  $page.forEach((page) => (page.style.display = "none"));
+}
+
+function changeManagerContainer({ target }) {
+  setHiddenPages();
+  if (target.id === "station-manager-button") {
+    document.getElementById("station-page").style.display = "block";
+    addStationEvent();
+    render("station");
+  } else if (target.id === "line-manager-button") {
+    document.getElementById("line-page").style.display = "block";
+  } else if (target.id === "section-manager-button") {
+    document.getElementById("section-page").style.display = "block";
+  } else if (target.id === "map-print-manager-button") {
+    document.getElementById("map-print-page").style.display = "block";
+  }
+}
+
+export default function selectMenuButtonEvent() {
+  const $menuButton = document.querySelector(".menu-button");
+
+  $menuButton.addEventListener("click", changeManagerContainer);
+}
diff --git a/src/event/station/addStationEvent.js b/src/event/station/addStationEvent.js
new file mode 100644
index 000000000..c9f31bf01
--- /dev/null
+++ b/src/event/station/addStationEvent.js
@@ -0,0 +1,29 @@
+import renderStation from "../../render/renderStation.js";
+import { isSatisfyLength, isStationAlreadyExist, isStationOnLine } from "../../inputCheck.js";
+import { alertMessage } from "../../alertMessage.js";
+
+function addStation(stationInput) {
+  let stations = JSON.parse(localStorage.stations);
+  stations.push(String(stationInput));
+  localStorage.stations = JSON.stringify(stations);
+  renderStation();
+}
+
+function checkValidStation() {
+  const station = document.getElementById("station-name-input").value;
+  let stations = JSON.parse(localStorage.stations);
+  if (!isSatisfyLength(station)) {
+    return alert(alertMessage.SHORT_LENGTH_ERROR);
+  } else if (isStationAlreadyExist(stations, station)) {
+    return alert(alertMessage.SAME_STATION_EXIST_ERROR);
+  }
+  addStation(station);
+}
+
+export default function addStationEvent() {
+  const $addStationBtn = document.getElementById("station-add-button");
+  if (localStorage.stations === undefined) {
+    localStorage.stations = JSON.stringify([]);
+  }
+  $addStationBtn.addEventListener("click", checkValidStation);
+}
diff --git a/src/event/station/delStationEvent.js b/src/event/station/delStationEvent.js
new file mode 100644
index 000000000..9680eb518
--- /dev/null
+++ b/src/event/station/delStationEvent.js
@@ -0,0 +1,31 @@
+import renderStation from "../../render/renderStation.js";
+import { alertMessage } from "../../alertMessage.js";
+
+function delStation(station) {
+  const stations = JSON.parse(localStorage.stations);
+  stations.splice(stations.indexOf(station), 1);
+
+  localStorage.stations = JSON.stringify(stations);
+
+  renderStation();
+}
+
+function findRemoveTarget(event) {
+  const $target = event.target;
+  const $stationTable = document.getElementsByClassName("station-table-row");
+  const targetNumber = $target.closest("tr").dataset.number;
+  const station = $stationTable[targetNumber].querySelector("span").innerText;
+
+  delStation(station);
+}
+
+export default function delStationEvent() {
+  const $delStationBtn = document.querySelectorAll(".station-delete-button");
+  $delStationBtn.forEach((button) =>
+    button.addEventListener("click", (event) => {
+      if (confirm(alertMessage.DELETE_CHECK_MESSAGE)) {
+        findRemoveTarget(event);
+      }
+    })
+  );
+}
diff --git a/src/index.js b/src/index.js
index 028a2b904..dddf11102 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,33 +2,10 @@ import Station from "./manager/station.js";
 import Line from "./manager/line.js";
 import Section from "./manager/section.js";
 import MapPrint from "./manager/mapPrint.js";
+import menuEvent from "./event/menuEvent.js";
 
 export default function SubwayMap() {
-  const station = new Station();
-  const line = new Line();
-  const section = new Section();
-  const mapPrint = new MapPrint();
-  const stationBtn = document.getElementById("station-manager-button");
-  const lineBtn = document.getElementById("line-manager-button");
-  const sectionBtn = document.getElementById("section-manager-button");
-  const mapPrintBtn = document.getElementById("map-print-manager-button");
-
-  this.onClickStation = () => {
-    station.init(line.lines);
-  };
-
-  this.onClickLine = () => {
-    line.init();
-  };
-
-  this.onClickSection = () => {};
-
-  this.onClickMapPrint = () => {};
-
-  stationBtn.addEventListener("click", this.onClickStation);
-  lineBtn.addEventListener("click", this.onClickLine);
-  sectionBtn.addEventListener("click", this.onClickSection);
-  mapPrintBtn.addEventListener("click", this.onClickMapPrint);
+  menuEvent();
 }
 
 new SubwayMap();
diff --git a/src/inputCheck.js b/src/inputCheck.js
index 5a135c1b5..7bbe045b4 100644
--- a/src/inputCheck.js
+++ b/src/inputCheck.js
@@ -20,7 +20,7 @@ export function isSameDestination(start, end) {
 
 export function isStationAlreadyExist(stations, name) {
   let result = false;
-  for (let i = 0; i < stations.length; i++) {
+  for (let i = 0; i < localStorage.stations.length; i++) {
     if (name === stations[i]) {
       result = true;
       break;
diff --git a/src/manager/line.js b/src/manager/line.js
index 0f0f329ff..581ef39a1 100644
--- a/src/manager/line.js
+++ b/src/manager/line.js
@@ -1 +1,83 @@
-export default function Line() {}
+import { isSameDestination, isLineAlreadyExist } from "../inputCheck.js";
+import { alertMessage } from "../alertMessage.js";
+
+export default function Line() {
+  const linePage = document.getElementById("line-page");
+  const lineTable = document.getElementById("line-table");
+  let stations;
+  this.lines = [
+    { name: "1호선", sections: ["인천", "소요산"] },
+    { name: "2호선", sections: ["시청", "신도림"] },
+    { name: "3호선", sections: ["대화", "오금"] },
+  ];
+  let count = this.lines.length;
+
+  this.init = (stationList) => {
+    stations = stationList;
+    linePage.style.display = "block";
+    this.showOptions();
+    this.showLines();
+    const lineDelBtns = document.getElementsByClassName("line-delete-button");
+    for (let i = 0; i < lineDelBtns.length; i++) {
+      lineDelBtns[i].addEventListener("click", (event) => this.deleteLine(event));
+    }
+    const lineInputBtn = document.getElementById("line-add-button");
+    lineInputBtn.addEventListener("click", this.addLine);
+  };
+
+  this.showOptions = () => {
+    const startStationSelector = document.getElementById("line-start-station-selector");
+    const endStationSelector = document.getElementById("line-end-station-selector");
+    console.log(stations);
+    const startHTML = `${stations
+      .map((station) => `<option value=${station}>${station}</option>`)
+      .join("")}`;
+    const endHTML = `${stations
+      .map((station) => `<option value=${station}>${station}</option>`)
+      .join("")}`;
+    startStationSelector.insertAdjacentHTML("beforeend", startHTML);
+    endStationSelector.insertAdjacentHTML("beforeend", endHTML);
+  };
+
+  this.showLines = () => {
+    let newHTML = "";
+    for (let i = 0; i < this.lines.length; i++) {
+      newHTML += `
+      <tr id="line${i}">
+        <td><span>${this.lines[i].name}</span></td>
+        <td><span>${this.lines[i].sections[0]}</span></td>
+        <td><span>${this.lines[i].sections[this.lines[i].sections.length - 1]}</span></td>
+        <td><button class="line-delete-button" id="${i}" value=${
+        this.lines[i].name
+      }>삭제</button></td></tr>
+      `;
+    }
+    lineTable.insertAdjacentHTML("beforeend", newHTML);
+  };
+
+  this.addLine = () => {
+    const lineNameInput = document.getElementById("line-name-input").value;
+    const lineStart = document.getElementById("line-start-station-selector").value;
+    const lineEnd = document.getElementById("line-end-station-selector").value;
+    if (isSameDestination(lineStart, lineEnd)) {
+      return alert(alertMessage.SAME_DESTINATION_ERROR);
+    } else if (isLineAlreadyExist(this.lines, lineNameInput)) {
+      return alert(alertMessage.SAME_LINE_EXIST_ERROR);
+    }
+    const addHTML = `
+      <tr id="line${count}">
+        <td><span>${lineNameInput}</span></td>
+        <td><span>${lineStart}</span></td>
+        <td><span>${lineEnd}</span></td>
+        <td><button class="line-delete-button" id="${count}" value=${lineNameInput}>삭제</button></td>
+      </tr>`;
+    this.lines.push({
+      name: lineNameInput,
+      sections: [lineStart, lineEnd],
+    });
+    lineTable.insertAdjacentHTML("beforeend", addHTML);
+    const newLine = document.getElementById(`${count}`);
+    newLine.addEventListener("click", (event) => this.deleteLine(event));
+    count++;
+  };
+}
diff --git a/src/manager/station.js b/src/manager/station.js
index 1ae8c17dd..16a0a860b 100644
--- a/src/manager/station.js
+++ b/src/manager/station.js
@@ -1,78 +1,14 @@
+import render from "../render/render.js";
 import { isSatisfyLength, isStationAlreadyExist, isStationOnLine } from "../inputCheck.js";
 import { alertMessage } from "../alertMessage.js";
 
-export default function Station() {
-  const stationPage = document.getElementById("station-page");
-  const stationTable = document.getElementById("station-table");
-  let lines;
-  this.stations = [
-    "인천",
-    "동인천",
-    "도원",
-    "소요산",
-    "사당",
-    "시청",
-    "신도림",
-    "대화",
-    "오금",
-    "오이도",
-    "당고개",
-  ];
-  this.count = this.stations.length;
+function addStations() {}
 
-  this.init = (lineList) => {
-    lines = lineList; // Line 클래스 인스턴스를 받아옴
-    stationPage.style.display = "block";
-    this.showStations();
-    const stationDelBtns = document.getElementsByClassName("station-delete-button");
-    for (let i = 0; i < stationDelBtns.length; i++) {
-      stationDelBtns[i].addEventListener("click", (event) => this.deleteStation(event));
-    }
-    const stationInputBtn = document.getElementById("station-add-button");
-    stationInputBtn.addEventListener("click", this.addStation);
-  };
-
-  this.showStations = () => {
-    let newHTML = "";
-    for (let i = 0; i < this.stations.length; i++) {
-      newHTML += `
-        <tr id="station${i}">
-          <td><span>${this.stations[i]} </span></td>
-          <td><button class="station-delete-button" id="${i}" value="${this.stations[i]}">삭제</button></td>
-        </tr>`;
-    }
-    stationTable.insertAdjacentHTML("beforeend", newHTML);
-  };
-
-  this.addStation = () => {
-    const stationInput = document.getElementById("station-name-input").value;
-    if (!isSatisfyLength(stationInput)) {
-      return alert(alertMessage.SHORT_LENGTH_ERROR);
-    } else if (isStationAlreadyExist(this.stations, stationInput)) {
-      return alert(alertMessage.SAME_STATION_EXIST_ERROR);
-    }
-    this.stations.push(stationInput);
-    const newHTML = `
-    <tr id="station${this.count}">
-    <td><span>${stationInput}</span></td>
-    <td><button class="station-delete-button" id="${this.count}">삭제</button></td></tr>`;
-    stationTable.insertAdjacentHTML("beforeend", newHTML);
-    const newStation = document.getElementById(`${this.count}`);
-    newStation.addEventListener("click", (event) => this.deleteStation(event));
-    this.count++;
-  };
+function showStations() {
+  console.log(localStorage.statios);
+}
 
-  this.deleteStation = (event) => {
-    const targetId = event.target.id;
-    const targetValue = event.target.value;
-    const delStation = document.getElementById(`station${targetId}`);
-    if (!confirm(alertMessage.DELETE_CHECK_MESSAGE)) {
-      return;
-    }
-    if (isStationOnLine(lines, targetValue)) {
-      return alert(alertMessage.DELETE_STATION_ON_LINE_MESSAGE);
-    }
-    delStation.remove();
-    this.stations.splice(this.stations.indexOf(targetValue), 1);
-  };
+export default function manageStation() {
+  render("station");
+  showStations();
 }
diff --git a/src/render/render.js b/src/render/render.js
new file mode 100644
index 000000000..22cee1633
--- /dev/null
+++ b/src/render/render.js
@@ -0,0 +1,11 @@
+import renderStation from "./renderStation";
+
+import renderStation from "./renderStation.js";
+import renderLine from "./renderLine.js";
+export default function render(name) {
+  if (name === "station") {
+    renderStation();
+  } else if (name === "line") {
+    renderLine();
+  }
+}
diff --git a/src/render/renderLine.js b/src/render/renderLine.js
new file mode 100644
index 000000000..a86941c96
--- /dev/null
+++ b/src/render/renderLine.js
@@ -0,0 +1,40 @@
+function lineTableTemplate() {
+  return `<table class="line-table" border="1">
+    <tr>
+    <th>노선 이름</th>
+    <th>상행 종점역</th>
+    <th>하행 종점역</th>
+    <th>설정</th>
+    </tr>
+    </table>`;
+}
+
+function initLineListContainer() {
+  const $lineTableContainer = document.getElementById("line-table-container");
+  $lineTableContainer.innerHTML = lineTableTemplate();
+}
+
+function lineListTemplate(line, start, end, lineNumber) {
+  return `<tr class="line-table-row"data-number=${lineNumber}>
+              <td>
+                <span>${line}</span>
+              </td>
+              <td>
+                <span>${start}</span>
+              </td>
+              <td>
+                <span>${end}</span>
+              </td>
+              <td>
+                <button class="line-delete-button">삭제</button>
+              </td>
+            </tr>`;
+}
+
+export default function renderStation() {
+  initLineListContainer();
+  const lines = JSON.parse(localStorage.lines);
+  if (lines !== null) {
+    initLineList(lines);
+  }
+}
diff --git a/src/render/renderStation.js b/src/render/renderStation.js
new file mode 100644
index 000000000..2771c4066
--- /dev/null
+++ b/src/render/renderStation.js
@@ -0,0 +1,45 @@
+import delStationEvent from "../event/station/delStationEvent.js";
+
+function stationTableTemplate() {
+  return `<table class="station-table" border="1">
+    <tr>
+    <th>역 이름</th>
+    <th>설정</th>
+    </tr>
+    </table>`;
+}
+
+function initStationListContainer() {
+  const $stationTableContainer = document.getElementById("station-table-container");
+  $stationTableContainer.innerHTML = stationTableTemplate();
+}
+
+function stationListTemplate(station, stationNumber) {
+  return `<tr class="station-table-row"data-number=${stationNumber}>
+              <td>
+                <span>${station}</span>
+              </td>
+              <td>
+                <button class="station-delete-button">삭제</button>
+              </td>
+            </tr>`;
+}
+
+function initStationList(stations) {
+  const $stationTable = document.querySelector(".station-table");
+  let stationNumber = 0;
+
+  stations.forEach((station) =>
+    $stationTable.insertAdjacentHTML("beforeend", stationListTemplate(station, stationNumber++))
+  );
+
+  delStationEvent();
+}
+
+export default function renderStation() {
+  initStationListContainer();
+  const stations = JSON.parse(localStorage.stations);
+  if (stations !== null) {
+    initStationList(stations);
+  }
+}

From 43dbd06da998a8b63d3c14572df5d26441ac645c Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 14:43:56 +0900
Subject: [PATCH 04/20] =?UTF-8?q?feat:=20line=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                           |  4 +--
 src/event/common/checkStorageItem.js |  8 ++++++
 src/event/line/addLine.js            |  0
 src/event/line/addLineEvent.js       | 31 +++++++++++++++++++++++
 src/event/line/delLine.js            |  0
 src/event/line/delLineEvent.js       | 36 +++++++++++++++++++++++++++
 src/event/menuEvent.js               |  8 ++++--
 src/event/station/addStationEvent.js |  3 ---
 src/event/station/delStationEvent.js |  4 +--
 src/render/render.js                 |  3 +--
 src/render/renderLine.js             | 37 +++++++++++++++++++++++++---
 11 files changed, 119 insertions(+), 15 deletions(-)
 create mode 100644 src/event/common/checkStorageItem.js
 delete mode 100644 src/event/line/addLine.js
 create mode 100644 src/event/line/addLineEvent.js
 delete mode 100644 src/event/line/delLine.js
 create mode 100644 src/event/line/delLineEvent.js

diff --git a/index.html b/index.html
index bb0ee944c..c726551a5 100644
--- a/index.html
+++ b/index.html
@@ -27,12 +27,12 @@ <h4>노선 이름</h4>
             <h4><input type="text" id="line-name-input" placeholder="노선 이름을 입력해주세요."></input></h4>
           <div>
             <span>상행 종점</span>
-            <select id="line-start-station-selector">
+            <select class="line-station-selector" id="line-start-station-selector">
             </select>
           </div><br>
           <div>
             <span>하행 종점</span>
-            <select id="line-end-station-selector">
+            <select class="line-station-selector" id="line-end-station-selector">
             </select>
           </div><br>
           <button id="line-add-button">노선 추가</button>
diff --git a/src/event/common/checkStorageItem.js b/src/event/common/checkStorageItem.js
new file mode 100644
index 000000000..ae2cea396
--- /dev/null
+++ b/src/event/common/checkStorageItem.js
@@ -0,0 +1,8 @@
+export default function checkLocalStorageItem() {
+  if (localStorage.stations === undefined) {
+    localStorage.stations = JSON.stringify([]);
+  }
+  if (localStorage.lines === undefined) {
+    localStorage.lines = JSON.stringify([]);
+  }
+}
diff --git a/src/event/line/addLine.js b/src/event/line/addLine.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/event/line/addLineEvent.js b/src/event/line/addLineEvent.js
new file mode 100644
index 000000000..c036e0ec3
--- /dev/null
+++ b/src/event/line/addLineEvent.js
@@ -0,0 +1,31 @@
+import renderLine from "../../render/renderLine.js";
+import { isSatisfyLength, isSameDestination, isLineAlreadyExist } from "../../inputCheck.js";
+import { alertMessage } from "../../alertMessage.js";
+
+function addLine(line, start, end) {
+  let lines = JSON.parse(localStorage.lines);
+  let newLine = { name: String(line), sections: [start, end] };
+  lines.push(newLine);
+  localStorage.lines = JSON.stringify(lines);
+  renderLine();
+}
+
+function checkValidLine() {
+  const line = document.getElementById("line-name-input").value;
+  const start = document.getElementById("line-start-station-selector").value;
+  const end = document.getElementById("line-end-station-selector").value;
+  const lines = JSON.parse(localStorage.lines);
+  if (!isSatisfyLength(line)) {
+    return alert(alertMessage.SHORT_LENGTH_ERROR);
+  } else if (isSameDestination(start, end)) {
+    return alert(alertMessage.SAME_DESTINATION_ERROR);
+  } else if (isLineAlreadyExist(lines, line)) {
+    return alert(alertMessage.SAME_LINE_EXIST_ERROR);
+  }
+  addLine(line, start, end);
+}
+
+export default function addLineEvent() {
+  const $addLineBtn = document.getElementById("line-add-button");
+  $addLineBtn.addEventListener("click", checkValidLine);
+}
diff --git a/src/event/line/delLine.js b/src/event/line/delLine.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/event/line/delLineEvent.js b/src/event/line/delLineEvent.js
new file mode 100644
index 000000000..86fd31d7b
--- /dev/null
+++ b/src/event/line/delLineEvent.js
@@ -0,0 +1,36 @@
+import renderLine from "../../render/renderLine.js";
+import { alertMessage } from "../../alertMessage.js";
+
+function delLine(line) {
+  const lines = JSON.parse(localStorage.lines);
+  for (let i = 0; i < lines.length; i++) {
+    if (line === lines[i].name) {
+      lines.splice(i, 1);
+    }
+  }
+
+  localStorage.lines = JSON.stringify(lines);
+
+  renderLine();
+}
+
+function findDeleteTarget(event) {
+  const $target = event.target;
+  const $lineTable = document.getElementsByClassName("line-table-row");
+  const targetNumber = $target.closest("tr").dataset.number;
+  console.log(targetNumber);
+  const line = $lineTable[targetNumber].querySelector("span").innerText;
+
+  delLine(line);
+}
+
+export default function delLineEvent() {
+  const $delLineBtn = document.querySelectorAll(".line-delete-button");
+  $delLineBtn.forEach((button) => {
+    button.addEventListener("click", (event) => {
+      if (confirm(alertMessage.DELETE_CHECK_MESSAGE)) {
+        findDeleteTarget(event);
+      }
+    });
+  });
+}
diff --git a/src/event/menuEvent.js b/src/event/menuEvent.js
index 6333fbbfc..0afb8e37b 100644
--- a/src/event/menuEvent.js
+++ b/src/event/menuEvent.js
@@ -1,5 +1,7 @@
 import render from "../render/render.js";
+import checkLocalStorageItem from "./common/checkStorageItem.js";
 import addStationEvent from "./station/addStationEvent.js";
+import addLineEvent from "./line/addLineEvent.js";
 
 function setHiddenPages() {
   const $page = document.querySelectorAll(".page");
@@ -14,6 +16,8 @@ function changeManagerContainer({ target }) {
     render("station");
   } else if (target.id === "line-manager-button") {
     document.getElementById("line-page").style.display = "block";
+    addLineEvent();
+    render("line");
   } else if (target.id === "section-manager-button") {
     document.getElementById("section-page").style.display = "block";
   } else if (target.id === "map-print-manager-button") {
@@ -21,8 +25,8 @@ function changeManagerContainer({ target }) {
   }
 }
 
-export default function selectMenuButtonEvent() {
+export default function menuEvent() {
   const $menuButton = document.querySelector(".menu-button");
-
+  checkLocalStorageItem();
   $menuButton.addEventListener("click", changeManagerContainer);
 }
diff --git a/src/event/station/addStationEvent.js b/src/event/station/addStationEvent.js
index c9f31bf01..5c5867268 100644
--- a/src/event/station/addStationEvent.js
+++ b/src/event/station/addStationEvent.js
@@ -22,8 +22,5 @@ function checkValidStation() {
 
 export default function addStationEvent() {
   const $addStationBtn = document.getElementById("station-add-button");
-  if (localStorage.stations === undefined) {
-    localStorage.stations = JSON.stringify([]);
-  }
   $addStationBtn.addEventListener("click", checkValidStation);
 }
diff --git a/src/event/station/delStationEvent.js b/src/event/station/delStationEvent.js
index 9680eb518..fd4921d34 100644
--- a/src/event/station/delStationEvent.js
+++ b/src/event/station/delStationEvent.js
@@ -10,7 +10,7 @@ function delStation(station) {
   renderStation();
 }
 
-function findRemoveTarget(event) {
+function findDeleteTarget(event) {
   const $target = event.target;
   const $stationTable = document.getElementsByClassName("station-table-row");
   const targetNumber = $target.closest("tr").dataset.number;
@@ -24,7 +24,7 @@ export default function delStationEvent() {
   $delStationBtn.forEach((button) =>
     button.addEventListener("click", (event) => {
       if (confirm(alertMessage.DELETE_CHECK_MESSAGE)) {
-        findRemoveTarget(event);
+        findDeleteTarget(event);
       }
     })
   );
diff --git a/src/render/render.js b/src/render/render.js
index 22cee1633..fecb7e6d1 100644
--- a/src/render/render.js
+++ b/src/render/render.js
@@ -1,7 +1,6 @@
-import renderStation from "./renderStation";
-
 import renderStation from "./renderStation.js";
 import renderLine from "./renderLine.js";
+
 export default function render(name) {
   if (name === "station") {
     renderStation();
diff --git a/src/render/renderLine.js b/src/render/renderLine.js
index a86941c96..00dc9a501 100644
--- a/src/render/renderLine.js
+++ b/src/render/renderLine.js
@@ -1,3 +1,19 @@
+import delLineEvent from "../event/line/delLineEvent.js";
+
+function selectListTemplate() {
+  const stations = JSON.parse(localStorage.stations);
+  let newTemplate = "";
+  stations.forEach((station) => (newTemplate += `<option>${station}</option>`));
+  return newTemplate;
+}
+
+function initSelectContainer() {
+  const $selectContainers = document.querySelectorAll(".line-station-selector");
+  $selectContainers.forEach(
+    (selectContainer) => (selectContainer.innerHTML = selectListTemplate())
+  );
+}
+
 function lineTableTemplate() {
   return `<table class="line-table" border="1">
     <tr>
@@ -14,16 +30,16 @@ function initLineListContainer() {
   $lineTableContainer.innerHTML = lineTableTemplate();
 }
 
-function lineListTemplate(line, start, end, lineNumber) {
+function lineListTemplate(line, lineNumber) {
   return `<tr class="line-table-row"data-number=${lineNumber}>
               <td>
-                <span>${line}</span>
+                <span>${line.name}</span>
               </td>
               <td>
-                <span>${start}</span>
+                <span>${line.sections[0]}</span>
               </td>
               <td>
-                <span>${end}</span>
+                <span>${line.sections[line.sections.length - 1]}</span>
               </td>
               <td>
                 <button class="line-delete-button">삭제</button>
@@ -31,7 +47,20 @@ function lineListTemplate(line, start, end, lineNumber) {
             </tr>`;
 }
 
+function initLineList(lines) {
+  const $lineTable = document.querySelector(".line-table");
+  let lineNumber = 0;
+  console.log(lines);
+
+  lines.forEach((line) =>
+    $lineTable.insertAdjacentHTML("beforeend", lineListTemplate(line, lineNumber++))
+  );
+
+  delLineEvent();
+}
+
 export default function renderStation() {
+  initSelectContainer();
   initLineListContainer();
   const lines = JSON.parse(localStorage.lines);
   if (lines !== null) {

From 8fea2c764309137c0c89e00bdae26c70a98fd20d Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 15:04:35 +0900
Subject: [PATCH 05/20] =?UTF-8?q?map-print=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                   |  1 +
 src/event/menuEvent.js       |  2 ++
 src/render/render.js         |  5 +++++
 src/render/renderLine.js     |  1 -
 src/render/renderMapPrint.js | 21 +++++++++++++++++++++
 5 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 src/render/renderMapPrint.js

diff --git a/index.html b/index.html
index c726551a5..f5b1c54ea 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,7 @@ <h2>🚉 지하철 노선 목록</h2>
         <h3>구간을 수정할 노선을 선택해주세요.</h3>
       </div>
       <div class="page" id="map-print-page" style="display: none;">
+        <div id="map-print-container"></div>
       </div>
     </div>
     <script type="module" src="src/index.js"></script>
diff --git a/src/event/menuEvent.js b/src/event/menuEvent.js
index 0afb8e37b..d93a76e05 100644
--- a/src/event/menuEvent.js
+++ b/src/event/menuEvent.js
@@ -2,6 +2,7 @@ import render from "../render/render.js";
 import checkLocalStorageItem from "./common/checkStorageItem.js";
 import addStationEvent from "./station/addStationEvent.js";
 import addLineEvent from "./line/addLineEvent.js";
+import renderMapPrint from "../render/renderMapPrint.js";
 
 function setHiddenPages() {
   const $page = document.querySelectorAll(".page");
@@ -22,6 +23,7 @@ function changeManagerContainer({ target }) {
     document.getElementById("section-page").style.display = "block";
   } else if (target.id === "map-print-manager-button") {
     document.getElementById("map-print-page").style.display = "block";
+    render("mapPrint");
   }
 }
 
diff --git a/src/render/render.js b/src/render/render.js
index fecb7e6d1..a3d15da81 100644
--- a/src/render/render.js
+++ b/src/render/render.js
@@ -1,10 +1,15 @@
 import renderStation from "./renderStation.js";
 import renderLine from "./renderLine.js";
+import renderMapPrint from "./renderMapPrint.js";
 
 export default function render(name) {
   if (name === "station") {
     renderStation();
   } else if (name === "line") {
     renderLine();
+  } else if (name === "section") {
+    renderSection();
+  } else if (name === "mapPrint") {
+    renderMapPrint();
   }
 }
diff --git a/src/render/renderLine.js b/src/render/renderLine.js
index 00dc9a501..04cf7d097 100644
--- a/src/render/renderLine.js
+++ b/src/render/renderLine.js
@@ -50,7 +50,6 @@ function lineListTemplate(line, lineNumber) {
 function initLineList(lines) {
   const $lineTable = document.querySelector(".line-table");
   let lineNumber = 0;
-  console.log(lines);
 
   lines.forEach((line) =>
     $lineTable.insertAdjacentHTML("beforeend", lineListTemplate(line, lineNumber++))
diff --git a/src/render/renderMapPrint.js b/src/render/renderMapPrint.js
new file mode 100644
index 000000000..bc6ccc83f
--- /dev/null
+++ b/src/render/renderMapPrint.js
@@ -0,0 +1,21 @@
+function mapPrintTemplate() {
+  const lines = JSON.parse(localStorage.lines);
+  let newHTML = "";
+  lines.forEach(
+    (line) =>
+      (newHTML += `<h3>${line.name}</h3><ul>${line.sections
+        .map((section) => `<li>${section}</li>`)
+        .join("")}</ul>`)
+  );
+
+  return newHTML;
+}
+
+function initMapPrint() {
+  const $mapPrintContainer = document.getElementById("map-print-container");
+  $mapPrintContainer.innerHTML = mapPrintTemplate();
+}
+
+export default function renderMapPrint() {
+  initMapPrint();
+}

From 69b0f4c80ed7f633b108a50de92e1397ac4f305e Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 18:58:37 +0900
Subject: [PATCH 06/20] =?UTF-8?q?feat:=20section=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                           |   4 ++
 src/event/line/delLineEvent.js       |   1 -
 src/event/menuEvent.js               |   4 +-
 src/event/section/addSectionEvent.js |  46 ++++++++++++
 src/event/section/chooseLineEvent.js |  16 +++++
 src/event/section/delSectionEvent.js |  51 ++++++++++++++
 src/render/render.js                 |   3 +-
 src/render/renderLine.js             |   9 +--
 src/render/renderSection.js          | 102 +++++++++++++++++++++++++++
 9 files changed, 229 insertions(+), 7 deletions(-)
 create mode 100644 src/event/section/addSectionEvent.js
 create mode 100644 src/event/section/chooseLineEvent.js
 create mode 100644 src/event/section/delSectionEvent.js
 create mode 100644 src/render/renderSection.js

diff --git a/index.html b/index.html
index f5b1c54ea..7529e6f1c 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,10 @@ <h2>🚉 지하철 노선 목록</h2>
       </div>
       <div class="page" id="section-page" style="display: none;">
         <h3>구간을 수정할 노선을 선택해주세요.</h3>
+        <div id="line-select-button-container">
+        </div>
+        <div id="section-input-container"></div>
+        <div id="section-table-container"></div>
       </div>
       <div class="page" id="map-print-page" style="display: none;">
         <div id="map-print-container"></div>
diff --git a/src/event/line/delLineEvent.js b/src/event/line/delLineEvent.js
index 86fd31d7b..916bd8374 100644
--- a/src/event/line/delLineEvent.js
+++ b/src/event/line/delLineEvent.js
@@ -18,7 +18,6 @@ function findDeleteTarget(event) {
   const $target = event.target;
   const $lineTable = document.getElementsByClassName("line-table-row");
   const targetNumber = $target.closest("tr").dataset.number;
-  console.log(targetNumber);
   const line = $lineTable[targetNumber].querySelector("span").innerText;
 
   delLine(line);
diff --git a/src/event/menuEvent.js b/src/event/menuEvent.js
index d93a76e05..3e780c9d0 100644
--- a/src/event/menuEvent.js
+++ b/src/event/menuEvent.js
@@ -2,7 +2,7 @@ import render from "../render/render.js";
 import checkLocalStorageItem from "./common/checkStorageItem.js";
 import addStationEvent from "./station/addStationEvent.js";
 import addLineEvent from "./line/addLineEvent.js";
-import renderMapPrint from "../render/renderMapPrint.js";
+import chooseLineEvent from "./section/chooseLineEvent.js";
 
 function setHiddenPages() {
   const $page = document.querySelectorAll(".page");
@@ -21,6 +21,8 @@ function changeManagerContainer({ target }) {
     render("line");
   } else if (target.id === "section-manager-button") {
     document.getElementById("section-page").style.display = "block";
+    render("section");
+    chooseLineEvent();
   } else if (target.id === "map-print-manager-button") {
     document.getElementById("map-print-page").style.display = "block";
     render("mapPrint");
diff --git a/src/event/section/addSectionEvent.js b/src/event/section/addSectionEvent.js
new file mode 100644
index 000000000..d59173e21
--- /dev/null
+++ b/src/event/section/addSectionEvent.js
@@ -0,0 +1,46 @@
+import { renderSection } from "../../render/renderSection.js";
+import { isSectionAlreadyExist } from "../../inputCheck.js";
+import { alertMessage } from "../../alertMessage.js";
+
+export function getIndexOfLine(lineName) {
+  const lines = JSON.parse(localStorage.lines);
+  let indexOfLine;
+
+  for (let i = 0; i < lines.length; i++) {
+    if (lineName === lines[i].name) {
+      indexOfLine = i;
+      break;
+    }
+  }
+
+  return indexOfLine;
+}
+
+function addSection(indexOfLine, selectedLine, selectedStaion, stationOrder) {
+  let lines = JSON.parse(localStorage.lines);
+  lines[indexOfLine].sections = [
+    ...lines[indexOfLine].sections.slice(0, stationOrder),
+    selectedStaion,
+    ...lines[indexOfLine].sections.slice(stationOrder),
+  ];
+  localStorage.lines = JSON.stringify(lines);
+  renderSection(selectedLine);
+}
+
+function checkValidSection(selectedLine) {
+  const selectedStation = document.getElementById("section-station-selector").value;
+  const stationOrder = document.getElementById("section-order-input").value;
+  const lines = JSON.parse(localStorage.lines);
+  const indexOfLine = getIndexOfLine(selectedLine);
+  if (isSectionAlreadyExist(lines[indexOfLine].sections, selectedStation)) {
+    return alert(alertMessage.SAME_SECTION_EXIST_ERROR);
+  } else if (stationOrder === "") {
+    return alert(alertMessage.ORDERING_INPUT_NOTHING_ERROR);
+  }
+  addSection(indexOfLine, selectedLine, selectedStation, stationOrder);
+}
+
+export default function addSectionEvent(selectedLine) {
+  const $addSectionBtn = document.getElementById("section-add-button");
+  $addSectionBtn.addEventListener("click", () => checkValidSection(selectedLine));
+}
diff --git a/src/event/section/chooseLineEvent.js b/src/event/section/chooseLineEvent.js
new file mode 100644
index 000000000..ac5e0bacd
--- /dev/null
+++ b/src/event/section/chooseLineEvent.js
@@ -0,0 +1,16 @@
+import { renderSection } from "../../render/renderSection.js";
+
+function onClickLine(event) {
+  const $target = event.target;
+  const targetName = $target.dataset.name;
+  renderSection(targetName);
+}
+
+export default function addSectionEvent() {
+  const $sectionLineMenuBtns = document.querySelectorAll(".section-line-menu-button");
+  $sectionLineMenuBtns.forEach((button) =>
+    button.addEventListener("click", (event) => {
+      onClickLine(event);
+    })
+  );
+}
diff --git a/src/event/section/delSectionEvent.js b/src/event/section/delSectionEvent.js
new file mode 100644
index 000000000..c9069d881
--- /dev/null
+++ b/src/event/section/delSectionEvent.js
@@ -0,0 +1,51 @@
+import { renderSection } from "../../render/renderSection.js";
+import { getIndexOfLine } from "./addSectionEvent.js";
+import { isSatisfyMinNumOfStations } from "../../inputCheck.js";
+import { alertMessage } from "../../alertMessage.js";
+
+function getIndexOfSection(indexOfLine, section) {
+  const lines = JSON.parse(localStorage.lines);
+  let indexOfSection;
+  for (let i = 0; i < lines[indexOfLine].sections.length; i++) {
+    if (section === lines[indexOfLine].sections[i]) {
+      indexOfSection = i;
+      break;
+    }
+  }
+
+  return indexOfSection;
+}
+
+function delSection(selectedLine, section) {
+  const indexOfLine = getIndexOfLine(selectedLine);
+  const indexOfSection = getIndexOfSection(indexOfLine, section);
+  let lines = JSON.parse(localStorage.lines);
+
+  if (!isSatisfyMinNumOfStations(lines[indexOfLine])) {
+    return alert(alertMessage.DELETE_STATIONS_ON_LINE_SHORTAGE_MESSAGE);
+  }
+
+  lines[indexOfLine].sections.splice(indexOfSection, 1);
+  localStorage.lines = JSON.stringify(lines);
+
+  renderSection(selectedLine);
+}
+
+function findDeleteTarget(event, selectedLine) {
+  const $target = event.target;
+  const $sectionTable = document.getElementsByClassName("section-table-row");
+  const targetNumber = $target.closest("tr").dataset.number;
+  const section = $sectionTable[targetNumber].querySelector("span").innerText;
+  delSection(selectedLine, section);
+}
+
+export default function delSectionEvent(selectedLine) {
+  const $delSectionBtn = document.querySelectorAll(".section-delete-button");
+  $delSectionBtn.forEach((button) =>
+    button.addEventListener("click", (event) => {
+      if (confirm(alertMessage.DELETE_CHECK_MESSAGE)) {
+        findDeleteTarget(event, selectedLine);
+      }
+    })
+  );
+}
diff --git a/src/render/render.js b/src/render/render.js
index a3d15da81..739eebced 100644
--- a/src/render/render.js
+++ b/src/render/render.js
@@ -1,6 +1,7 @@
 import renderStation from "./renderStation.js";
 import renderLine from "./renderLine.js";
 import renderMapPrint from "./renderMapPrint.js";
+import { renderLineButton } from "./renderSection.js";
 
 export default function render(name) {
   if (name === "station") {
@@ -8,7 +9,7 @@ export default function render(name) {
   } else if (name === "line") {
     renderLine();
   } else if (name === "section") {
-    renderSection();
+    renderLineButton();
   } else if (name === "mapPrint") {
     renderMapPrint();
   }
diff --git a/src/render/renderLine.js b/src/render/renderLine.js
index 04cf7d097..94f3a35eb 100644
--- a/src/render/renderLine.js
+++ b/src/render/renderLine.js
@@ -2,9 +2,10 @@ import delLineEvent from "../event/line/delLineEvent.js";
 
 function selectListTemplate() {
   const stations = JSON.parse(localStorage.stations);
-  let newTemplate = "";
-  stations.forEach((station) => (newTemplate += `<option>${station}</option>`));
-  return newTemplate;
+  let newHTML = "";
+  stations.forEach((station) => (newHTML += `<option>${station}</option>`));
+
+  return newHTML;
 }
 
 function initSelectContainer() {
@@ -31,7 +32,7 @@ function initLineListContainer() {
 }
 
 function lineListTemplate(line, lineNumber) {
-  return `<tr class="line-table-row"data-number=${lineNumber}>
+  return `<tr class="line-table-row" data-number=${lineNumber}>
               <td>
                 <span>${line.name}</span>
               </td>
diff --git a/src/render/renderSection.js b/src/render/renderSection.js
new file mode 100644
index 000000000..94ca5e2eb
--- /dev/null
+++ b/src/render/renderSection.js
@@ -0,0 +1,102 @@
+import addSectionEvent from "../event/section/addSectionEvent.js";
+import delSectionEvent from "../event/section/delSectionEvent.js";
+
+function lineSelectButtonTemplate() {
+  const lines = JSON.parse(localStorage.lines);
+  return lines
+    .map(
+      (line) =>
+        `<button class="section-line-menu-button" data-name=${line.name}>${line.name}</button>`
+    )
+    .join(" ");
+}
+
+function initLineSelectButtonCotainer() {
+  const $lineSelectButtonContainer = document.getElementById("line-select-button-container");
+  $lineSelectButtonContainer.innerHTML = lineSelectButtonTemplate();
+}
+
+export function renderLineButton() {
+  initLineSelectButtonCotainer();
+}
+
+function sectionInputTemplate(line) {
+  return `<h3>${line}</h3>
+          <h4>구간 등록</h4>
+          <div id="section-input-container">
+            <select id="section-station-selector"></select>
+            <input type="number" id="section-order-input"></input>
+            <button id="section-add-button">등록</button>
+          </div>`;
+}
+
+function initSectionInputContainer(selectedLine) {
+  const $sectionInputContainer = document.getElementById("section-input-container");
+  $sectionInputContainer.innerHTML = sectionInputTemplate(selectedLine);
+  addSectionEvent(selectedLine);
+}
+
+function sectionSelectorTemplate() {
+  const stations = JSON.parse(localStorage.stations);
+  let newHTML = "";
+  stations.forEach((station) => (newHTML += `<option>${station}</option>`));
+
+  return newHTML;
+}
+
+function initSectionSelector() {
+  const $sectionStationSelector = document.getElementById("section-station-selector");
+  $sectionStationSelector.innerHTML = sectionSelectorTemplate();
+}
+
+function sectionTableTemplate() {
+  return `<h4><table class="section-table" border="1">
+            <tr>
+              <th>순서</th>
+              <th>이름</th>
+              <th>설정</th>
+            </tr>
+          </table><h4>`;
+}
+
+function initSectionTableContainer() {
+  const $sectionTableContainer = document.getElementById("section-table-container");
+  $sectionTableContainer.innerHTML = sectionTableTemplate();
+}
+
+function sectionListTemplate(section, sectionNumber) {
+  return `<tr class="section-table-row" data-number=${sectionNumber}>
+            <td>
+              ${sectionNumber}
+            </td>
+            <td>
+              <span>${section}</span>
+            </td>
+            <td>
+              <button class="section-delete-button">노선에서 제거</button>
+            </td>
+          </tr>
+            `;
+}
+
+function initSectionList(selectedLine) {
+  const lines = JSON.parse(localStorage.lines);
+  const $sectionTable = document.querySelector(".section-table");
+  let sectionNumber = 0;
+  for (let i = 0; i < lines.length; i++) {
+    if (selectedLine === lines[i].name) {
+      lines[i].sections.forEach((section) =>
+        $sectionTable.insertAdjacentHTML("beforeend", sectionListTemplate(section, sectionNumber++))
+      );
+    }
+  }
+
+  delSectionEvent(selectedLine);
+}
+
+export function renderSection(selectedLine) {
+  initSectionInputContainer(selectedLine);
+  initSectionSelector();
+  initSectionTableContainer();
+  initSectionList(selectedLine);
+}

From 131acf8e0e61e2e04f947eca8af968dc48159514 Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 19:03:54 +0900
Subject: [PATCH 07/20] =?UTF-8?q?fix:=20=EB=85=B8=EC=84=A0=EC=97=90=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=EB=90=9C=20=EC=97=AD=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?=EB=B6=88=EA=B0=80=EB=8A=A5=20=EC=A1=B0=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/event/station/delStationEvent.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/event/station/delStationEvent.js b/src/event/station/delStationEvent.js
index fd4921d34..583c51e40 100644
--- a/src/event/station/delStationEvent.js
+++ b/src/event/station/delStationEvent.js
@@ -1,10 +1,16 @@
 import renderStation from "../../render/renderStation.js";
+import { isStationOnLine } from "../../inputCheck.js";
 import { alertMessage } from "../../alertMessage.js";
 
 function delStation(station) {
   const stations = JSON.parse(localStorage.stations);
+  const lines = JSON.parse(localStorage.lines);
   stations.splice(stations.indexOf(station), 1);
 
+  if (isStationOnLine(lines, station)) {
+    return alert(alertMessage.DELETE_STATION_ON_LINE_MESSAGE);
+  }
+
   localStorage.stations = JSON.stringify(stations);
 
   renderStation();

From aa4e97014b90e20b923241ea4e6dd02519144265 Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 19:06:37 +0900
Subject: [PATCH 08/20] =?UTF-8?q?fix:=20=EA=B8=B0=EB=B3=B8=20=EC=97=AD=20?=
 =?UTF-8?q?=EB=B0=8F=20=20=EB=85=B8=EC=84=A0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/event/common/checkStorageItem.js | 20 ++++++++++++++++++--
 src/manager/line.js                  |  1 -
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/event/common/checkStorageItem.js b/src/event/common/checkStorageItem.js
index ae2cea396..a65ecf79a 100644
--- a/src/event/common/checkStorageItem.js
+++ b/src/event/common/checkStorageItem.js
@@ -1,8 +1,24 @@
 export default function checkLocalStorageItem() {
   if (localStorage.stations === undefined) {
-    localStorage.stations = JSON.stringify([]);
+    localStorage.stations = JSON.stringify([
+      "인천",
+      "동인천",
+      "도원",
+      "소요산",
+      "사당",
+      "시청",
+      "신도림",
+      "대화",
+      "오금",
+      "오이도",
+      "당고개",
+    ]);
   }
   if (localStorage.lines === undefined) {
-    localStorage.lines = JSON.stringify([]);
+    localStorage.lines = JSON.stringify([
+      { name: "1호선", sections: ["인천", "소요산"] },
+      { name: "2호선", sections: ["시청", "신도림"] },
+      { name: "3호선", sections: ["대화", "오금"] },
+    ]);
   }
 }
diff --git a/src/manager/line.js b/src/manager/line.js
index 581ef39a1..75a8608c1 100644
--- a/src/manager/line.js
+++ b/src/manager/line.js
@@ -28,7 +28,6 @@ export default function Line() {
   this.showOptions = () => {
     const startStationSelector = document.getElementById("line-start-station-selector");
     const endStationSelector = document.getElementById("line-end-station-selector");
-    console.log(stations);
     const startHTML = `${stations
       .map((station) => `<option value=${station}>${station}</option>`)
       .join("")}`;

From 4de46d74169b4a44f3145f47284f95e26acef2b4 Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 19:10:43 +0900
Subject: [PATCH 09/20] =?UTF-8?q?docs:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20Manager=20=ED=8F=B4=EB=8D=94=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.js            |  4 --
 src/manager/line.js     | 82 -----------------------------------------
 src/manager/mapPrint.js |  1 -
 src/manager/section.js  |  1 -
 src/manager/station.js  | 14 -------
 5 files changed, 102 deletions(-)
 delete mode 100644 src/manager/line.js
 delete mode 100644 src/manager/mapPrint.js
 delete mode 100644 src/manager/section.js
 delete mode 100644 src/manager/station.js

diff --git a/src/index.js b/src/index.js
index dddf11102..2b42f38e2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,3 @@
-import Station from "./manager/station.js";
-import Line from "./manager/line.js";
-import Section from "./manager/section.js";
-import MapPrint from "./manager/mapPrint.js";
 import menuEvent from "./event/menuEvent.js";
 
 export default function SubwayMap() {
diff --git a/src/manager/line.js b/src/manager/line.js
deleted file mode 100644
index 75a8608c1..000000000
--- a/src/manager/line.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { isSameDestination, isLineAlreadyExist } from "../inputCheck.js";
-import { alertMessage } from "../alertMessage.js";
-
-export default function Line() {
-  const linePage = document.getElementById("line-page");
-  const lineTable = document.getElementById("line-table");
-  let stations;
-  this.lines = [
-    { name: "1호선", sections: ["인천", "소요산"] },
-    { name: "2호선", sections: ["시청", "신도림"] },
-    { name: "3호선", sections: ["대화", "오금"] },
-  ];
-  let count = this.lines.length;
-
-  this.init = (stationList) => {
-    stations = stationList;
-    linePage.style.display = "block";
-    this.showOptions();
-    this.showLines();
-    const lineDelBtns = document.getElementsByClassName("line-delete-button");
-    for (let i = 0; i < lineDelBtns.length; i++) {
-      lineDelBtns[i].addEventListener("click", (event) => this.deleteLine(event));
-    }
-    const lineInputBtn = document.getElementById("line-add-button");
-    lineInputBtn.addEventListener("click", this.addLine);
-  };
-
-  this.showOptions = () => {
-    const startStationSelector = document.getElementById("line-start-station-selector");
-    const endStationSelector = document.getElementById("line-end-station-selector");
-    const startHTML = `${stations
-      .map((station) => `<option value=${station}>${station}</option>`)
-      .join("")}`;
-    const endHTML = `${stations
-      .map((station) => `<option value=${station}>${station}</option>`)
-      .join("")}`;
-    startStationSelector.insertAdjacentHTML("beforeend", startHTML);
-    endStationSelector.insertAdjacentHTML("beforeend", endHTML);
-  };
-
-  this.showLines = () => {
-    let newHTML = "";
-    for (let i = 0; i < this.lines.length; i++) {
-      newHTML += `
-      <tr id="line${i}">
-        <td><span>${this.lines[i].name}</span></td>
-        <td><span>${this.lines[i].sections[0]}</span></td>
-        <td><span>${this.lines[i].sections[this.lines[i].sections.length - 1]}</span></td>
-        <td><button class="line-delete-button" id="${i}" value=${
-        this.lines[i].name
-      }>삭제</button></td></tr>
-      `;
-    }
-    lineTable.insertAdjacentHTML("beforeend", newHTML);
-  };
-
-  this.addLine = () => {
-    const lineNameInput = document.getElementById("line-name-input").value;
-    const lineStart = document.getElementById("line-start-station-selector").value;
-    const lineEnd = document.getElementById("line-end-station-selector").value;
-    if (isSameDestination(lineStart, lineEnd)) {
-      return alert(alertMessage.SAME_DESTINATION_ERROR);
-    } else if (isLineAlreadyExist(this.lines, lineNameInput)) {
-      return alert(alertMessage.SAME_LINE_EXIST_ERROR);
-    }
-    const addHTML = `
-      <tr id="line${count}">
-        <td><span>${lineNameInput}</span></td>
-        <td><span>${lineStart}</span></td>
-        <td><span>${lineEnd}</span></td>
-        <td><button class="line-delete-button" id="${count}" value=${lineNameInput}>삭제</button></td>
-      </tr>`;
-    this.lines.push({
-      name: lineNameInput,
-      sections: [lineStart, lineEnd],
-    });
-    lineTable.insertAdjacentHTML("beforeend", addHTML);
-    const newLine = document.getElementById(`${count}`);
-    newLine.addEventListener("click", (event) => this.deleteLine(event));
-    count++;
-  };
-}
diff --git a/src/manager/mapPrint.js b/src/manager/mapPrint.js
deleted file mode 100644
index e70441540..000000000
--- a/src/manager/mapPrint.js
+++ /dev/null
@@ -1 +0,0 @@
-export default function MapPrint() {}
diff --git a/src/manager/section.js b/src/manager/section.js
deleted file mode 100644
index 138ffff5c..000000000
--- a/src/manager/section.js
+++ /dev/null
@@ -1 +0,0 @@
-export default function Section() {}
diff --git a/src/manager/station.js b/src/manager/station.js
deleted file mode 100644
index 16a0a860b..000000000
--- a/src/manager/station.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import render from "../render/render.js";
-import { isSatisfyLength, isStationAlreadyExist, isStationOnLine } from "../inputCheck.js";
-import { alertMessage } from "../alertMessage.js";
-
-function addStations() {}
-
-function showStations() {
-  console.log(localStorage.statios);
-}
-
-export default function manageStation() {
-  render("station");
-  showStations();
-}

From ef7500ebe0cdbb2ec9a04ff693e38f18bd5842ed Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 19:14:40 +0900
Subject: [PATCH 10/20] =?UTF-8?q?fix:=20<div=20class=3Dmap></div>=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/render/renderMapPrint.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/render/renderMapPrint.js b/src/render/renderMapPrint.js
index bc6ccc83f..54674438b 100644
--- a/src/render/renderMapPrint.js
+++ b/src/render/renderMapPrint.js
@@ -1,6 +1,6 @@
 function mapPrintTemplate() {
   const lines = JSON.parse(localStorage.lines);
-  let newHTML = "";
+  let newHTML = `<div class="map">`;
   lines.forEach(
     (line) =>
       (newHTML += `<h3>${line.name}</h3><ul>${line.sections
@@ -8,7 +8,7 @@ function mapPrintTemplate() {
         .join("")}</ul>`)
   );
 
-  return newHTML;
+  return newHTML + "</div>";
 }
 
 function initMapPrint() {

From 7021f39ed2390ba58a033a7c2a12cf0a2f459392 Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 19:51:45 +0900
Subject: [PATCH 11/20] =?UTF-8?q?fix:=20=EA=B0=88=EB=9E=98=EA=B8=B8(?=
 =?UTF-8?q?=EA=B5=90=EC=B0=A8=EC=97=AD=20or=20=ED=99=98=EC=8A=B9=EC=97=AD)?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80=EA=B0=80=20=EB=B6=88=EA=B0=80=EB=8A=A5?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                            |  1 +
 src/alertMessage.js                  |  1 +
 src/event/line/addLineEvent.js       | 11 ++++++++++-
 src/event/section/addSectionEvent.js |  4 +++-
 src/inputCheck.js                    | 24 ++++++++++++++++++++++++
 5 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 4808037fa..bf876022f 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@
 - 중복된 지하철 노선 이름이 등록될 수 없다.
 - 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
 - 지하철 노선의 목록을 조회할 수 있다.
+- 노선에서 갈래길은 생길 수 없다. (상행선 혹은 하행선이 다른 노선과 겹치는 경우도 갈래길로 인정 )
 
 ### 지하철 구간 추가 기능
 
diff --git a/src/alertMessage.js b/src/alertMessage.js
index f0e954841..403ba1ad4 100644
--- a/src/alertMessage.js
+++ b/src/alertMessage.js
@@ -10,4 +10,5 @@ export const alertMessage = {
   SAME_LINE_EXIST_ERROR: "이미 같은 이름을 가진 노선이 있습니다.",
   SAME_STATION_EXIST_ERROR: "이미 같은 이름을 가진 역이 있습니다.",
   SAME_SECTION_EXIST_ERROR: "이미 같은 구간이 등록되어 있습니다.",
+  TRANSFER_STATION_MESSAGE: `역은 다른 노선에 등록되어 있어 추가할 수 없습니다.\n "4. 지하철 노선도 출력"을 클릭하여 노선을 확인해주세요.\n📌 교차역이 없도록 하기 위함입니다. 📌`,
 };
diff --git a/src/event/line/addLineEvent.js b/src/event/line/addLineEvent.js
index c036e0ec3..09192f0af 100644
--- a/src/event/line/addLineEvent.js
+++ b/src/event/line/addLineEvent.js
@@ -1,5 +1,10 @@
 import renderLine from "../../render/renderLine.js";
-import { isSatisfyLength, isSameDestination, isLineAlreadyExist } from "../../inputCheck.js";
+import {
+  isSatisfyLength,
+  isSameDestination,
+  isLineAlreadyExist,
+  isTransferStation,
+} from "../../inputCheck.js";
 import { alertMessage } from "../../alertMessage.js";
 
 function addLine(line, start, end) {
@@ -21,6 +26,10 @@ function checkValidLine() {
     return alert(alertMessage.SAME_DESTINATION_ERROR);
   } else if (isLineAlreadyExist(lines, line)) {
     return alert(alertMessage.SAME_LINE_EXIST_ERROR);
+  } else if (isTransferStation(lines, start)) {
+    return alert(`${start}` + alertMessage.TRANSFER_STATION_MESSAGE);
+  } else if (isTransferStation(lines, end)) {
+    return alert(`${end}` + alertMessage.TRANSFER_STATION_MESSAGE);
   }
   addLine(line, start, end);
 }
diff --git a/src/event/section/addSectionEvent.js b/src/event/section/addSectionEvent.js
index d59173e21..0764ff65c 100644
--- a/src/event/section/addSectionEvent.js
+++ b/src/event/section/addSectionEvent.js
@@ -1,5 +1,5 @@
 import { renderSection } from "../../render/renderSection.js";
-import { isSectionAlreadyExist } from "../../inputCheck.js";
+import { isSectionAlreadyExist, isTransferStation } from "../../inputCheck.js";
 import { alertMessage } from "../../alertMessage.js";
 
 export function getIndexOfLine(lineName) {
@@ -36,6 +36,8 @@ function checkValidSection(selectedLine) {
     return alert(alertMessage.SAME_SECTION_EXIST_ERROR);
   } else if (stationOrder === "") {
     return alert(alertMessage.ORDERING_INPUT_NOTHING_ERROR);
+  } else if (isTransferStation(lines, selectedStation)) {
+    return alert(`${selectedStation}` + alertMessage.TRANSFER_STATION_MESSAGE);
   }
   addSection(indexOfLine, selectedLine, selectedStation, stationOrder);
 }
diff --git a/src/inputCheck.js b/src/inputCheck.js
index 7bbe045b4..6a3873afe 100644
--- a/src/inputCheck.js
+++ b/src/inputCheck.js
@@ -86,3 +86,27 @@ export function isSatisfyMinNumOfStations(line) {
 
   return result;
 }
+
+export function _isTransferStation(sections, station) {
+  let result = false;
+  for (let i = 0; i < sections.length; i++) {
+    if (station === sections[i]) {
+      result = true;
+      break;
+    }
+  }
+
+  return result;
+}
+
+export function isTransferStation(lines, station) {
+  let result = false;
+  for (let i = 0; i < lines.length; i++) {
+    if (_isTransferStation(lines[i].sections, station)) {
+      result = true;
+      break;
+    }
+  }
+
+  return result;
+}

From 609570f3a97467726817e467f197a13382b0d3bb Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 21:12:47 +0900
Subject: [PATCH 12/20] =?UTF-8?q?docs:=20=EC=99=84=EB=A3=8C=ED=95=9C=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=EC=9A=94=EA=B5=AC=EC=82=AC=ED=95=AD=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index bf876022f..6b0357718 100644
--- a/README.md
+++ b/README.md
@@ -4,40 +4,40 @@
 
 ### 지하철 역 관련 기능
 
-- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
-- 중복된 지하철 역 이름이 등록될 수 없다.
-- 지하철 역은 2글자 이상이어야 한다.
-- 지하철 역의 목록을 조회할 수 있다.
+- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다) (완료)
+- 중복된 지하철 역 이름이 등록될 수 없다. (완료)
+- 지하철 역은 2글자 이상이어야 한다. (완료)
+- 지하철 역의 목록을 조회할 수 있다. (완료)
 
 ### 지하철 노선 관련 기능
 
-- 지하철 노선을 등록하고 삭제할 수 있다.
-- 중복된 지하철 노선 이름이 등록될 수 없다.
-- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
-- 지하철 노선의 목록을 조회할 수 있다.
-- 노선에서 갈래길은 생길 수 없다. (상행선 혹은 하행선이 다른 노선과 겹치는 경우도 갈래길로 인정 )
+- 지하철 노선을 등록하고 삭제할 수 있다. (완료)
+- 중복된 지하철 노선 이름이 등록될 수 없다. (완료)
+- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다. (완료)
+- 지하철 노선의 목록을 조회할 수 있다. (완료)
+- 노선에서 갈래길은 생길 수 없다. (상행선 혹은 하행선이 다른 노선과 겹치는 경우도 갈래길로 인정) (완료)
 
 ### 지하철 구간 추가 기능
 
-- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.
-- 하나의 역은 여러개의 노선에 추가될 수 있다.
-- 역과 역 사이에 새로운 역이 추가 될 수 있다.
-- 노선에서 갈래길은 생길 수 없다.
+- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다. (완료)
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다. (완료)
+- 하나의 역은 여러개의 노선에 추가될 수 있다. (완료)
+- 역과 역 사이에 새로운 역이 추가 될 수 있다. (완료)
+- 노선에서 갈래길은 생길 수 없다. (완료)
 
 <img width="500" src="/images/section1.png">
 
 ### 지하철 구간 삭제 기능
 
-- 노선에 등록된 역을 제거할 수 있다.
-- 종점을 제거할 경우 다음 역이 종점이 된다.
-- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
+- 노선에 등록된 역을 제거할 수 있다. (완료)
+- 종점을 제거할 경우 다음 역이 종점이 된다. (완료)
+- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다. (완료)
 
 <img width="500" src="/images/section2.png">
 
 ### 지하철 노선에 등록된 역 조회 기능
 
-- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
+- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다. (완료)
 
 <br/>
 

From 178c284bad14b592081149c3216cd86cc37a0f44 Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Sun, 13 Dec 2020 21:14:20 +0900
Subject: [PATCH 13/20] =?UTF-8?q?docs:=20=EC=99=84=EB=A3=8C=ED=95=9C=20?=
 =?UTF-8?q?=EC=9A=94=EA=B5=AC=EC=82=AC=ED=95=AD=20=EC=B2=B4=ED=81=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/README.md b/README.md
index 6b0357718..25ce21214 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@
 ### 지하철 구간 추가 기능
 
 - 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다. (완료)
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다. (완료)
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.
 - 하나의 역은 여러개의 노선에 추가될 수 있다. (완료)
 - 역과 역 사이에 새로운 역이 추가 될 수 있다. (완료)
 - 노선에서 갈래길은 생길 수 없다. (완료)

From 300c10f503af7ddfe9d82d77e56b799e3f99b9db Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Mon, 14 Dec 2020 20:49:11 +0900
Subject: [PATCH 14/20] =?UTF-8?q?refactor:=20=EC=BB=A8=EB=B2=A4=EC=85=98?=
 =?UTF-8?q?=20=EC=A4=80=EC=88=98=20=EB=B0=8F=20=ED=8F=B4=EB=8D=94=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                   |  4 ++
 src/{ => common}/alertMessage.js            |  0
 src/{inputCheck.js => common/checkInput.js} |  0
 src/common/clearInput.js                    |  4 ++
 src/{ => common}/constant.js                |  0
 src/event/common/checkStorageItem.js        |  1 +
 src/event/line/addLineEvent.js              | 10 ++++-
 src/event/line/delLineEvent.js              |  2 +-
 src/event/menuEvent.js                      |  3 ++
 src/event/section/addSectionEvent.js        |  8 +++-
 src/event/section/chooseLineEvent.js        |  1 +
 src/event/section/delSectionEvent.js        |  7 +++-
 src/event/station/addStationEvent.js        |  7 +++-
 src/event/station/delStationEvent.js        |  7 ++--
 src/render/renderLine.js                    | 42 +++++++++++----------
 src/render/renderMapPrint.js                |  1 +
 src/render/renderSection.js                 |  4 ++
 src/render/renderStation.js                 | 25 ++++++------
 18 files changed, 82 insertions(+), 44 deletions(-)
 rename src/{ => common}/alertMessage.js (100%)
 rename src/{inputCheck.js => common/checkInput.js} (100%)
 create mode 100644 src/common/clearInput.js
 rename src/{ => common}/constant.js (100%)

diff --git a/README.md b/README.md
index 25ce21214..784d1c559 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,9 @@
 # 🚇 지하철 노선도 미션
 
+```bash
+
+```
+
 ## 🚀 기능 요구사항
 
 ### 지하철 역 관련 기능
diff --git a/src/alertMessage.js b/src/common/alertMessage.js
similarity index 100%
rename from src/alertMessage.js
rename to src/common/alertMessage.js
diff --git a/src/inputCheck.js b/src/common/checkInput.js
similarity index 100%
rename from src/inputCheck.js
rename to src/common/checkInput.js
diff --git a/src/common/clearInput.js b/src/common/clearInput.js
new file mode 100644
index 000000000..f42c5f15e
--- /dev/null
+++ b/src/common/clearInput.js
@@ -0,0 +1,4 @@
+export function clearInput() {
+  const $input = document.querySelectorAll("input");
+  $input.forEach((input) => (input.value = ""));
+}
diff --git a/src/constant.js b/src/common/constant.js
similarity index 100%
rename from src/constant.js
rename to src/common/constant.js
diff --git a/src/event/common/checkStorageItem.js b/src/event/common/checkStorageItem.js
index a65ecf79a..16b8caf40 100644
--- a/src/event/common/checkStorageItem.js
+++ b/src/event/common/checkStorageItem.js
@@ -14,6 +14,7 @@ export default function checkLocalStorageItem() {
       "당고개",
     ]);
   }
+
   if (localStorage.lines === undefined) {
     localStorage.lines = JSON.stringify([
       { name: "1호선", sections: ["인천", "소요산"] },
diff --git a/src/event/line/addLineEvent.js b/src/event/line/addLineEvent.js
index 09192f0af..da24c65c8 100644
--- a/src/event/line/addLineEvent.js
+++ b/src/event/line/addLineEvent.js
@@ -4,15 +4,19 @@ import {
   isSameDestination,
   isLineAlreadyExist,
   isTransferStation,
-} from "../../inputCheck.js";
-import { alertMessage } from "../../alertMessage.js";
+} from "../../common/checkInput.js";
+import { alertMessage } from "../../common/alertMessage.js";
+import { clearInput } from "../../common/clearInput.js";
 
 function addLine(line, start, end) {
   let lines = JSON.parse(localStorage.lines);
   let newLine = { name: String(line), sections: [start, end] };
+
   lines.push(newLine);
   localStorage.lines = JSON.stringify(lines);
+
   renderLine();
+  clearInput();
 }
 
 function checkValidLine() {
@@ -20,6 +24,7 @@ function checkValidLine() {
   const start = document.getElementById("line-start-station-selector").value;
   const end = document.getElementById("line-end-station-selector").value;
   const lines = JSON.parse(localStorage.lines);
+
   if (!isSatisfyLength(line)) {
     return alert(alertMessage.SHORT_LENGTH_ERROR);
   } else if (isSameDestination(start, end)) {
@@ -31,6 +36,7 @@ function checkValidLine() {
   } else if (isTransferStation(lines, end)) {
     return alert(`${end}` + alertMessage.TRANSFER_STATION_MESSAGE);
   }
+
   addLine(line, start, end);
 }
 
diff --git a/src/event/line/delLineEvent.js b/src/event/line/delLineEvent.js
index 916bd8374..95a786add 100644
--- a/src/event/line/delLineEvent.js
+++ b/src/event/line/delLineEvent.js
@@ -1,5 +1,5 @@
 import renderLine from "../../render/renderLine.js";
-import { alertMessage } from "../../alertMessage.js";
+import { alertMessage } from "../../common/alertMessage.js";
 
 function delLine(line) {
   const lines = JSON.parse(localStorage.lines);
diff --git a/src/event/menuEvent.js b/src/event/menuEvent.js
index 3e780c9d0..1e5bbcc23 100644
--- a/src/event/menuEvent.js
+++ b/src/event/menuEvent.js
@@ -11,6 +11,7 @@ function setHiddenPages() {
 
 function changeManagerContainer({ target }) {
   setHiddenPages();
+
   if (target.id === "station-manager-button") {
     document.getElementById("station-page").style.display = "block";
     addStationEvent();
@@ -31,6 +32,8 @@ function changeManagerContainer({ target }) {
 
 export default function menuEvent() {
   const $menuButton = document.querySelector(".menu-button");
+
   checkLocalStorageItem();
+
   $menuButton.addEventListener("click", changeManagerContainer);
 }
diff --git a/src/event/section/addSectionEvent.js b/src/event/section/addSectionEvent.js
index 0764ff65c..aa6082f6e 100644
--- a/src/event/section/addSectionEvent.js
+++ b/src/event/section/addSectionEvent.js
@@ -1,6 +1,7 @@
 import { renderSection } from "../../render/renderSection.js";
-import { isSectionAlreadyExist, isTransferStation } from "../../inputCheck.js";
-import { alertMessage } from "../../alertMessage.js";
+import { isSectionAlreadyExist, isTransferStation } from "../../common/checkInput.js";
+import { alertMessage } from "../../common/alertMessage.js";
+import { clearInput } from "../../common/clearInput.js";
 
 export function getIndexOfLine(lineName) {
   const lines = JSON.parse(localStorage.lines);
@@ -24,7 +25,9 @@ function addSection(indexOfLine, selectedLine, selectedStaion, stationOrder) {
     ...lines[indexOfLine].sections.slice(stationOrder),
   ];
   localStorage.lines = JSON.stringify(lines);
+
   renderSection(selectedLine);
+  clearInput();
 }
 
 function checkValidSection(selectedLine) {
@@ -39,6 +42,7 @@ function checkValidSection(selectedLine) {
   } else if (isTransferStation(lines, selectedStation)) {
     return alert(`${selectedStation}` + alertMessage.TRANSFER_STATION_MESSAGE);
   }
+
   addSection(indexOfLine, selectedLine, selectedStation, stationOrder);
 }
 
diff --git a/src/event/section/chooseLineEvent.js b/src/event/section/chooseLineEvent.js
index ac5e0bacd..ddfcb5c74 100644
--- a/src/event/section/chooseLineEvent.js
+++ b/src/event/section/chooseLineEvent.js
@@ -3,6 +3,7 @@ import { renderSection } from "../../render/renderSection.js";
 function onClickLine(event) {
   const $target = event.target;
   const targetName = $target.dataset.name;
+
   renderSection(targetName);
 }
 
diff --git a/src/event/section/delSectionEvent.js b/src/event/section/delSectionEvent.js
index c9069d881..f7cd90c67 100644
--- a/src/event/section/delSectionEvent.js
+++ b/src/event/section/delSectionEvent.js
@@ -1,11 +1,12 @@
 import { renderSection } from "../../render/renderSection.js";
 import { getIndexOfLine } from "./addSectionEvent.js";
-import { isSatisfyMinNumOfStations } from "../../inputCheck.js";
-import { alertMessage } from "../../alertMessage.js";
+import { isSatisfyMinNumOfStations } from "../../common/checkInput.js";
+import { alertMessage } from "../../common/alertMessage.js";
 
 function getIndexOfSection(indexOfLine, section) {
   const lines = JSON.parse(localStorage.lines);
   let indexOfSection;
+
   for (let i = 0; i < lines[indexOfLine].sections.length; i++) {
     if (section === lines[indexOfLine].sections[i]) {
       indexOfSection = i;
@@ -36,11 +37,13 @@ function findDeleteTarget(event, selectedLine) {
   const $sectionTable = document.getElementsByClassName("section-table-row");
   const targetNumber = $target.closest("tr").dataset.number;
   const section = $sectionTable[targetNumber].querySelector("span").innerText;
+
   delSection(selectedLine, section);
 }
 
 export default function delSectionEvent(selectedLine) {
   const $delSectionBtn = document.querySelectorAll(".section-delete-button");
+
   $delSectionBtn.forEach((button) =>
     button.addEventListener("click", (event) => {
       if (confirm(alertMessage.DELETE_CHECK_MESSAGE)) {
diff --git a/src/event/station/addStationEvent.js b/src/event/station/addStationEvent.js
index 5c5867268..283471b93 100644
--- a/src/event/station/addStationEvent.js
+++ b/src/event/station/addStationEvent.js
@@ -1,17 +1,20 @@
 import renderStation from "../../render/renderStation.js";
-import { isSatisfyLength, isStationAlreadyExist, isStationOnLine } from "../../inputCheck.js";
-import { alertMessage } from "../../alertMessage.js";
+import { isSatisfyLength, isStationAlreadyExist } from "../../common/checkInput.js";
+import { alertMessage } from "../../common/alertMessage.js";
+import { clearInput } from "../../common/clearInput.js";
 
 function addStation(stationInput) {
   let stations = JSON.parse(localStorage.stations);
   stations.push(String(stationInput));
   localStorage.stations = JSON.stringify(stations);
   renderStation();
+  clearInput();
 }
 
 function checkValidStation() {
   const station = document.getElementById("station-name-input").value;
   let stations = JSON.parse(localStorage.stations);
+
   if (!isSatisfyLength(station)) {
     return alert(alertMessage.SHORT_LENGTH_ERROR);
   } else if (isStationAlreadyExist(stations, station)) {
diff --git a/src/event/station/delStationEvent.js b/src/event/station/delStationEvent.js
index 583c51e40..12dbfae55 100644
--- a/src/event/station/delStationEvent.js
+++ b/src/event/station/delStationEvent.js
@@ -1,10 +1,11 @@
 import renderStation from "../../render/renderStation.js";
-import { isStationOnLine } from "../../inputCheck.js";
-import { alertMessage } from "../../alertMessage.js";
+import { isStationOnLine } from "../../common/checkInput.js";
+import { alertMessage } from "../../common/alertMessage.js";
 
 function delStation(station) {
-  const stations = JSON.parse(localStorage.stations);
   const lines = JSON.parse(localStorage.lines);
+  const stations = JSON.parse(localStorage.stations);
+
   stations.splice(stations.indexOf(station), 1);
 
   if (isStationOnLine(lines, station)) {
diff --git a/src/render/renderLine.js b/src/render/renderLine.js
index 94f3a35eb..5f29d7247 100644
--- a/src/render/renderLine.js
+++ b/src/render/renderLine.js
@@ -3,6 +3,7 @@ import delLineEvent from "../event/line/delLineEvent.js";
 function selectListTemplate() {
   const stations = JSON.parse(localStorage.stations);
   let newHTML = "";
+
   stations.forEach((station) => (newHTML += `<option>${station}</option>`));
 
   return newHTML;
@@ -17,13 +18,13 @@ function initSelectContainer() {
 
 function lineTableTemplate() {
   return `<table class="line-table" border="1">
-    <tr>
-    <th>노선 이름</th>
-    <th>상행 종점역</th>
-    <th>하행 종점역</th>
-    <th>설정</th>
-    </tr>
-    </table>`;
+            <tr>
+              <th>노선 이름</th>
+              <th>상행 종점역</th>
+              <th>하행 종점역</th>
+              <th>설정</th>
+            </tr>
+          </table>`;
 }
 
 function initLineListContainer() {
@@ -33,19 +34,19 @@ function initLineListContainer() {
 
 function lineListTemplate(line, lineNumber) {
   return `<tr class="line-table-row" data-number=${lineNumber}>
-              <td>
-                <span>${line.name}</span>
-              </td>
-              <td>
-                <span>${line.sections[0]}</span>
-              </td>
-              <td>
-                <span>${line.sections[line.sections.length - 1]}</span>
-              </td>
-              <td>
-                <button class="line-delete-button">삭제</button>
-              </td>
-            </tr>`;
+            <td>
+              <span>${line.name}</span>
+            </td>
+            <td>
+              <span>${line.sections[0]}</span>
+            </td>
+            <td>
+              <span>${line.sections[line.sections.length - 1]}</span>
+            </td>
+            <td>
+              <button class="line-delete-button">삭제</button>
+            </td>
+          </tr>`;
 }
 
 function initLineList(lines) {
@@ -62,6 +63,7 @@ function initLineList(lines) {
 export default function renderStation() {
   initSelectContainer();
   initLineListContainer();
+
   const lines = JSON.parse(localStorage.lines);
   if (lines !== null) {
     initLineList(lines);
diff --git a/src/render/renderMapPrint.js b/src/render/renderMapPrint.js
index 54674438b..fe525c5d6 100644
--- a/src/render/renderMapPrint.js
+++ b/src/render/renderMapPrint.js
@@ -1,6 +1,7 @@
 function mapPrintTemplate() {
   const lines = JSON.parse(localStorage.lines);
   let newHTML = `<div class="map">`;
+
   lines.forEach(
     (line) =>
       (newHTML += `<h3>${line.name}</h3><ul>${line.sections
diff --git a/src/render/renderSection.js b/src/render/renderSection.js
index 94ca5e2eb..3348c193c 100644
--- a/src/render/renderSection.js
+++ b/src/render/renderSection.js
@@ -3,6 +3,7 @@ import delSectionEvent from "../event/section/delSectionEvent.js";
 
 function lineSelectButtonTemplate() {
   const lines = JSON.parse(localStorage.lines);
+
   return lines
     .map(
       (line) =>
@@ -33,12 +34,14 @@ function sectionInputTemplate(line) {
 function initSectionInputContainer(selectedLine) {
   const $sectionInputContainer = document.getElementById("section-input-container");
   $sectionInputContainer.innerHTML = sectionInputTemplate(selectedLine);
+
   addSectionEvent(selectedLine);
 }
 
 function sectionSelectorTemplate() {
   const stations = JSON.parse(localStorage.stations);
   let newHTML = "";
+
   stations.forEach((station) => (newHTML += `<option>${station}</option>`));
 
   return newHTML;
@@ -83,6 +86,7 @@ function initSectionList(selectedLine) {
   const lines = JSON.parse(localStorage.lines);
   const $sectionTable = document.querySelector(".section-table");
   let sectionNumber = 0;
+
   for (let i = 0; i < lines.length; i++) {
     if (selectedLine === lines[i].name) {
       lines[i].sections.forEach((section) =>
diff --git a/src/render/renderStation.js b/src/render/renderStation.js
index 2771c4066..d1eca5190 100644
--- a/src/render/renderStation.js
+++ b/src/render/renderStation.js
@@ -2,11 +2,11 @@ import delStationEvent from "../event/station/delStationEvent.js";
 
 function stationTableTemplate() {
   return `<table class="station-table" border="1">
-    <tr>
-    <th>역 이름</th>
-    <th>설정</th>
-    </tr>
-    </table>`;
+            <tr>
+              <th>역 이름</th>
+              <th>설정</th>
+            </tr>
+          </table>`;
 }
 
 function initStationListContainer() {
@@ -16,13 +16,13 @@ function initStationListContainer() {
 
 function stationListTemplate(station, stationNumber) {
   return `<tr class="station-table-row"data-number=${stationNumber}>
-              <td>
-                <span>${station}</span>
-              </td>
-              <td>
-                <button class="station-delete-button">삭제</button>
-              </td>
-            </tr>`;
+            <td>
+              <span>${station}</span>
+            </td>
+            <td>
+              <button class="station-delete-button">삭제</button>
+            </td>
+          </tr>`;
 }
 
 function initStationList(stations) {
@@ -38,6 +38,7 @@ function initStationList(stations) {
 
 export default function renderStation() {
   initStationListContainer();
+
   const stations = JSON.parse(localStorage.stations);
   if (stations !== null) {
     initStationList(stations);

From 572717d0d13ac4197b2722d174d2a92c1effb41e Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Mon, 14 Dec 2020 21:01:16 +0900
Subject: [PATCH 15/20] =?UTF-8?q?docs:=20README.md=20=EB=94=94=EB=A0=89?=
 =?UTF-8?q?=ED=86=A0=EB=A6=AC=20=EA=B5=AC=EC=A1=B0=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 784d1c559..f78123b8e 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,54 @@
 # 🚇 지하철 노선도 미션
 
-```bash
+## 폴더 구조
 
+```bash
+│  index.html
+│  LICENSE
+│  README.md
+│
+├─images
+│
+└─src
+    │  index.js
+    │
+    ├─common
+    │      alertMessage.js
+    │      checkInput.js
+    │      clearInput.js
+    │      constant.js
+    │
+    ├─event
+    │  │  menuEvent.js
+    │  │
+    │  ├─common
+    │  │      checkStorageItem.js
+    │  │
+    │  ├─line
+    │  │      addLineEvent.js
+    │  │      delLineEvent.js
+    │  │
+    │  ├─section
+    │  │      addSectionEvent.js
+    │  │      chooseLineEvent.js
+    │  │      delSectionEvent.js
+    │  │
+    │  └─station
+    │          addStationEvent.js
+    │          delStationEvent.js
+    │
+    └─render
+            render.js
+            renderLine.js
+            renderMapPrint.js
+            renderSection.js
+            renderStation.js
 ```
 
+- common: 자주 사용되는 상수, 함수 등을 모아놓은 디렉토리
+- event: eventHandle에 필요한 로직을 모아놓은 디렉토리
+- render: 사용자에게 보이는 화면을 구성하는 로직을 모아놓은 디렉토리
+
 ## 🚀 기능 요구사항
 
 ### 지하철 역 관련 기능
@@ -27,7 +72,10 @@
   - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.
 - 하나의 역은 여러개의 노선에 추가될 수 있다. (완료)
 - 역과 역 사이에 새로운 역이 추가 될 수 있다. (완료)
-- 노선에서 갈래길은 생길 수 없다. (완료)
+- 노선에서 갈래길은 생길 수 없다. (상행선 혹은 하행선이 다른 노선과 겹치는 경우도 갈래길로 인정) (완료)
+- 구간 순서는 어떤 숫자든 입력 받을 수 있다.
+  - 0보다 작은 숫자를 입력 받은 경우, 상행선(0번 순서)에 추가한다.
+  - 해당 노선 하행선 순서 보다 큰 숫자를 입력 받은 경우, 하행선에 추가한다.
 
 <img width="500" src="/images/section1.png">
 

From 023c52a458df7499d3ceeef857256b1d59844ffd Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Mon, 14 Dec 2020 21:04:27 +0900
Subject: [PATCH 16/20] =?UTF-8?q?docs:=20=EC=98=88=EC=99=B8=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD=20=EC=99=84=EB=A3=8C=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/README.md b/README.md
index f78123b8e..20dddf6d3 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,7 @@
 - 하나의 역은 여러개의 노선에 추가될 수 있다. (완료)
 - 역과 역 사이에 새로운 역이 추가 될 수 있다. (완료)
 - 노선에서 갈래길은 생길 수 없다. (상행선 혹은 하행선이 다른 노선과 겹치는 경우도 갈래길로 인정) (완료)
-- 구간 순서는 어떤 숫자든 입력 받을 수 있다.
+- 구간 순서는 어떤 숫자든 입력 받을 수 있다. (완료)
   - 0보다 작은 숫자를 입력 받은 경우, 상행선(0번 순서)에 추가한다.
   - 해당 노선 하행선 순서 보다 큰 숫자를 입력 받은 경우, 하행선에 추가한다.
 

From 52d4db8b4d235074a5411a8eb542ee1c76b30a3d Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Tue, 15 Dec 2020 18:30:04 +0900
Subject: [PATCH 17/20] =?UTF-8?q?docs:=20localStorage=EC=97=90=20=EA=B0=99?=
 =?UTF-8?q?=EC=9D=80=20=EC=9D=B4=EB=A6=84=EC=9D=84=20=EA=B0=80=EC=A7=84=20?=
 =?UTF-8?q?=ED=95=AD=EB=AA=A9=EC=9D=B4=20=EC=9E=88=EB=8A=94=20=EA=B2=BD?=
 =?UTF-8?q?=EC=9A=B0=EC=97=90=20=EB=8C=80=ED=95=9C=20=EA=B3=A0=EB=AF=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/README.md b/README.md
index 20dddf6d3..1b1a48be1 100644
--- a/README.md
+++ b/README.md
@@ -62,6 +62,7 @@
 
 - 지하철 노선을 등록하고 삭제할 수 있다. (완료)
 - 중복된 지하철 노선 이름이 등록될 수 없다. (완료)
+- 노선 이름은 2글자 이상이어야 한다. (완료)
 - 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다. (완료)
 - 지하철 노선의 목록을 조회할 수 있다. (완료)
 - 노선에서 갈래길은 생길 수 없다. (상행선 혹은 하행선이 다른 노선과 겹치는 경우도 갈래길로 인정) (완료)
@@ -77,6 +78,16 @@
   - 0보다 작은 숫자를 입력 받은 경우, 상행선(0번 순서)에 추가한다.
   - 해당 노선 하행선 순서 보다 큰 숫자를 입력 받은 경우, 하행선에 추가한다.
 
+### 고민사항
+
+- 사용자 localStorage에 다른 프로그램에서 사용하고 있는 stations와 lines가 있는 경우, 어떻게 처리해야하는가?
+
+  후보1. localStorage의 stations와 lines를 초기화
+  => 다른 프로그램에서 문제가 발생할 수 있음. 또한 초기화 시, 매번 페이지를 새로고침 할 때마다 초기화가 발생하기 때문에 localStorage 사용이유가 사라짐.
+
+  후보2. 다른 사람들이 절대 사용하지 않을 것 같은 네이밍을 사용한다.
+  => 가장 쉬운 방법이지만 코드의 가독성을 위해 여기서는 사용하지 않았다.
+
 <img width="500" src="/images/section1.png">
 
 ### 지하철 구간 삭제 기능

From d677483410b0a80dca65cc92bf5f2ada6d51c003 Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Tue, 15 Dec 2020 18:31:36 +0900
Subject: [PATCH 18/20] =?UTF-8?q?docs:=20README.md=20=ED=91=9C=ED=98=84=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/README.md b/README.md
index 1b1a48be1..01782dd33 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # 🚇 지하철 노선도 미션
 
-## 폴더 구조
+## 디렉토리 구조
 
 ```bash
 │  index.html
@@ -83,9 +83,11 @@
 - 사용자 localStorage에 다른 프로그램에서 사용하고 있는 stations와 lines가 있는 경우, 어떻게 처리해야하는가?
 
   후보1. localStorage의 stations와 lines를 초기화
+
   => 다른 프로그램에서 문제가 발생할 수 있음. 또한 초기화 시, 매번 페이지를 새로고침 할 때마다 초기화가 발생하기 때문에 localStorage 사용이유가 사라짐.
 
   후보2. 다른 사람들이 절대 사용하지 않을 것 같은 네이밍을 사용한다.
+
   => 가장 쉬운 방법이지만 코드의 가독성을 위해 여기서는 사용하지 않았다.
 
 <img width="500" src="/images/section1.png">

From b59af985b603f643f092470d3bb57276cda75f79 Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Tue, 15 Dec 2020 18:32:43 +0900
Subject: [PATCH 19/20] =?UTF-8?q?docs:=20README.md=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 01782dd33..8ad363dfd 100644
--- a/README.md
+++ b/README.md
@@ -78,18 +78,6 @@
   - 0보다 작은 숫자를 입력 받은 경우, 상행선(0번 순서)에 추가한다.
   - 해당 노선 하행선 순서 보다 큰 숫자를 입력 받은 경우, 하행선에 추가한다.
 
-### 고민사항
-
-- 사용자 localStorage에 다른 프로그램에서 사용하고 있는 stations와 lines가 있는 경우, 어떻게 처리해야하는가?
-
-  후보1. localStorage의 stations와 lines를 초기화
-
-  => 다른 프로그램에서 문제가 발생할 수 있음. 또한 초기화 시, 매번 페이지를 새로고침 할 때마다 초기화가 발생하기 때문에 localStorage 사용이유가 사라짐.
-
-  후보2. 다른 사람들이 절대 사용하지 않을 것 같은 네이밍을 사용한다.
-
-  => 가장 쉬운 방법이지만 코드의 가독성을 위해 여기서는 사용하지 않았다.
-
 <img width="500" src="/images/section1.png">
 
 ### 지하철 구간 삭제 기능
@@ -104,6 +92,18 @@
 
 - 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다. (완료)
 
+### 고민사항
+
+- 사용자 localStorage에 다른 프로그램에서 사용하고 있는 stations와 lines가 있는 경우, 어떻게 처리해야하는가?
+
+  후보1. localStorage의 stations와 lines를 초기화
+
+  => 다른 프로그램에서 문제가 발생할 수 있음. 또한 초기화 시, 매번 페이지를 새로고침 할 때마다 초기화가 발생하기 때문에 localStorage 사용이유가 사라짐.
+
+  후보2. 다른 사람들이 절대 사용하지 않을 것 같은 네이밍을 사용한다.
+
+  => 가장 쉬운 방법이지만 코드의 가독성을 위해 여기서는 사용하지 않았다.
+
 <br/>
 
 ## 💻 프로그램 실행 결과

From a65095159fa9229363fc8c4aca32ecb6e9cba2ce Mon Sep 17 00:00:00 2001
From: yungo1846 <yungo1468@naver.com>
Date: Tue, 15 Dec 2020 18:36:34 +0900
Subject: [PATCH 20/20] =?UTF-8?q?docs:=20README.md=20github-page=20url=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 8ad363dfd..eb2df86ff 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,9 @@
 # 🚇 지하철 노선도 미션
 
+## URL
+
+### https://yungo1846.github.io/javascript-subway-map-precourse/
+
 ## 디렉토리 구조
 
 ```bash
@@ -92,7 +96,7 @@
 
 - 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다. (완료)
 
-### 고민사항
+## 🤔 고민사항
 
 - 사용자 localStorage에 다른 프로그램에서 사용하고 있는 stations와 lines가 있는 경우, 어떻게 처리해야하는가?