diff --git a/README.md b/README.md
index e97a1d649..eb2df86ff 100644
--- a/README.md
+++ b/README.md
@@ -1,114 +1,129 @@
 # 🚇 지하철 노선도 미션
 
+## URL
+
+### https://yungo1846.github.io/javascript-subway-map-precourse/
+
+## 디렉토리 구조
+
+```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: 사용자에게 보이는 화면을 구성하는 로직을 모아놓은 디렉토리
+
 ## 🚀 기능 요구사항
 
 ### 지하철 역 관련 기능
-- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
-- 중복된 지하철 역 이름이 등록될 수 없다.
-- 지하철 역은 2글자 이상이어야 한다.
-- 지하철 역의 목록을 조회할 수 있다.
+
+- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다) (완료)
+- 중복된 지하철 역 이름이 등록될 수 없다. (완료)
+- 지하철 역은 2글자 이상이어야 한다. (완료)
+- 지하철 역의 목록을 조회할 수 있다. (완료)
 
 ### 지하철 노선 관련 기능
-- 지하철 노선을 등록하고 삭제할 수 있다.
-- 중복된 지하철 노선 이름이 등록될 수 없다.
-- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
-- 지하철 노선의 목록을 조회할 수 있다.
+
+- 지하철 노선을 등록하고 삭제할 수 있다. (완료)
+- 중복된 지하철 노선 이름이 등록될 수 없다. (완료)
+- 노선 이름은 2글자 이상이어야 한다. (완료)
+- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다. (완료)
+- 지하철 노선의 목록을 조회할 수 있다. (완료)
+- 노선에서 갈래길은 생길 수 없다. (상행선 혹은 하행선이 다른 노선과 겹치는 경우도 갈래길로 인정) (완료)
 
 ### 지하철 구간 추가 기능
-- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
-- 하나의 역은 여러개의 노선에 추가될 수 있다.
-- 역과 역 사이에 새로운 역이 추가 될 수 있다.
-- 노선에서 갈래길은 생길 수 없다.
+
+- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다. (완료)
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.
+- 하나의 역은 여러개의 노선에 추가될 수 있다. (완료)
+- 역과 역 사이에 새로운 역이 추가 될 수 있다. (완료)
+- 노선에서 갈래길은 생길 수 없다. (상행선 혹은 하행선이 다른 노선과 겹치는 경우도 갈래길로 인정) (완료)
+- 구간 순서는 어떤 숫자든 입력 받을 수 있다. (완료)
+  - 0보다 작은 숫자를 입력 받은 경우, 상행선(0번 순서)에 추가한다.
+  - 해당 노선 하행선 순서 보다 큰 숫자를 입력 받은 경우, 하행선에 추가한다.
 
 <img width="500" src="/images/section1.png">
 
 ### 지하철 구간 삭제 기능
-- 노선에 등록된 역을 제거할 수 있다.
-- 종점을 제거할 경우 다음 역이 종점이 된다.
-- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
+
+- 노선에 등록된 역을 제거할 수 있다. (완료)
+- 종점을 제거할 경우 다음 역이 종점이 된다. (완료)
+- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다. (완료)
 
 <img width="500" src="/images/section2.png">
 
 ### 지하철 노선에 등록된 역 조회 기능
-- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
+
+- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다. (완료)
+
+## 🤔 고민사항
+
+- 사용자 localStorage에 다른 프로그램에서 사용하고 있는 stations와 lines가 있는 경우, 어떻게 처리해야하는가?
+
+  후보1. localStorage의 stations와 lines를 초기화
+
+  => 다른 프로그램에서 문제가 발생할 수 있음. 또한 초기화 시, 매번 페이지를 새로고침 할 때마다 초기화가 발생하기 때문에 localStorage 사용이유가 사라짐.
+
+  후보2. 다른 사람들이 절대 사용하지 않을 것 같은 네이밍을 사용한다.
+
+  => 가장 쉬운 방법이지만 코드의 가독성을 위해 여기서는 사용하지 않았다.
 
 <br/>
 
 ## 💻 프로그램 실행 결과
 
 ### 역관리
+
 <img width="100%" src="/images/station_manager.gif">
 
 ### 노선관리
+
 <img width="100%" src="/images/line_manager.gif">
 
 ### 구간관리
+
 <img width="100%" src="/images/section_manager.gif">
 
 ### 노선도 출력
-<img width="100%" src="/images/map_print_manager.gif">
-
-
-## ✅ 프로그래밍 요구사항
-
-### 메뉴 버튼
-- 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
-- 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
-- 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
-- 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
-
-### 지하철 역 관련 기능
-- 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
-- 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
-- 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
-
-### 지하철 노선 관련 기능
-- 지하철 노선의 이름을 입력하는 input 태그는 `#line-name-input` id값을 가진다.
-- 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
-- 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
-- 지하철 노선을 추가하는 button 태그는 `#line-add-button` id값을 가진다.
-- 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
-
-### 지하철 구간 추가 기능
-- 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
-- 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
-- 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
-- 지하철 구간을 등록하는 button 태그는 `#section-add-button` id값을 가진다.
-- 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
-
-### 지하철 노선도 출력 기능
-- 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
-
-### 기존 요구사항
-
-- 사용자가 잘못된 입력 값을 작성한 경우 `alert`을 이용해 메시지를 보여주고, 재입력할 수 있게 한다.
-- 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않고, 순수 Vanilla JS로만 구현한다.
-- **자바스크립트 코드 컨벤션을 지키면서 프로그래밍** 한다
-  - [https://google.github.io/styleguide/jsguide.html](https://google.github.io/styleguide/jsguide.html)
-  - [https://ui.toast.com/fe-guide/ko_CODING-CONVENSION/](https://ui.toast.com/fe-guide/ko_CODING-CONVENTION)
-- **indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용**한다.
-  - 예를 들어 while문 안에 if문이 있으면 들여쓰기는 2이다.
-  - 힌트: indent(인덴트, 들여쓰기) depth를 줄이는 좋은 방법은 함수(또는 메소드)를 분리하면 된다.
-- **함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.**
-  - 함수(또는 메소드)가 한 가지 일만 잘 하도록 구현한다.
-- 변수 선언시 `var` 를 사용하지 않는다. `const` 와 `let` 을 사용한다.
-  - [const](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const)
-  - [let](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let)
-- `import` 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.
-  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import)
-- `template literal`을 이용해 데이터와 html string을 가독성 좋게 표현한다.
-  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)
-
-### 추가된 요구사항
-- [data](https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)속성을 활용하여 html 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다. 
-- [localStorage](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.
 
-<br/>
-
-## 📝 미션 저장소 및 진행 요구사항
-
-- 미션은 [https://github.com/woowacourse/javascript-subway-map-precours](https://github.com/woowacourse/javascript-subway-map-precourse) 저장소를 fork/clone해 시작한다.
-- **기능을 구현하기 전에 javascript-subway-precourse/docs/README.md 파일에 구현할 기능 목록**을 정리해 추가한다.
-- **git의 commit 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가**한다.
-- [프리코스 과제 제출](https://github.com/woowacourse/woowacourse-docs/tree/master/precourse) 문서 절차를 따라 미션을 제출한다.
+<img width="100%" src="/images/map_print_manager.gif">
diff --git a/index.html b/index.html
index fc99deac2..7529e6f1c 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,49 @@
   </head>
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <h1>🚇 지하철 노선도 관리</h1>
+      <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 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>
+        <div id="station-table-container"></div>
+      </div>
+      <div class="page" id="line-page" style="display: none;">
+        <h4>노선 이름</h4>
+            <h4><input type="text" id="line-name-input" placeholder="노선 이름을 입력해주세요."></input></h4>
+          <div>
+            <span>상행 종점</span>
+            <select class="line-station-selector" id="line-start-station-selector">
+            </select>
+          </div><br>
+          <div>
+            <span>하행 종점</span>
+            <select class="line-station-selector" id="line-end-station-selector">
+            </select>
+          </div><br>
+          <button id="line-add-button">노선 추가</button>
+          <h2>🚉 지하철 노선 목록</h2>
+          <div id="line-table-container"></div>
+      </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>
+      </div>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/common/alertMessage.js b/src/common/alertMessage.js
new file mode 100644
index 000000000..403ba1ad4
--- /dev/null
+++ b/src/common/alertMessage.js
@@ -0,0 +1,14 @@
+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: "이미 같은 구간이 등록되어 있습니다.",
+  TRANSFER_STATION_MESSAGE: `역은 다른 노선에 등록되어 있어 추가할 수 없습니다.\n "4. 지하철 노선도 출력"을 클릭하여 노선을 확인해주세요.\n📌 교차역이 없도록 하기 위함입니다. 📌`,
+};
diff --git a/src/common/checkInput.js b/src/common/checkInput.js
new file mode 100644
index 000000000..6a3873afe
--- /dev/null
+++ b/src/common/checkInput.js
@@ -0,0 +1,112 @@
+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 < localStorage.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;
+}
+
+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;
+}
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/common/constant.js b/src/common/constant.js
new file mode 100644
index 000000000..3b75617b1
--- /dev/null
+++ b/src/common/constant.js
@@ -0,0 +1,4 @@
+export const constant = {
+  minLength: 2,
+  minStations: 2,
+};
diff --git a/src/event/common/checkStorageItem.js b/src/event/common/checkStorageItem.js
new file mode 100644
index 000000000..16b8caf40
--- /dev/null
+++ b/src/event/common/checkStorageItem.js
@@ -0,0 +1,25 @@
+export default function checkLocalStorageItem() {
+  if (localStorage.stations === undefined) {
+    localStorage.stations = JSON.stringify([
+      "인천",
+      "동인천",
+      "도원",
+      "소요산",
+      "사당",
+      "시청",
+      "신도림",
+      "대화",
+      "오금",
+      "오이도",
+      "당고개",
+    ]);
+  }
+
+  if (localStorage.lines === undefined) {
+    localStorage.lines = JSON.stringify([
+      { name: "1호선", sections: ["인천", "소요산"] },
+      { name: "2호선", sections: ["시청", "신도림"] },
+      { name: "3호선", sections: ["대화", "오금"] },
+    ]);
+  }
+}
diff --git a/src/event/line/addLineEvent.js b/src/event/line/addLineEvent.js
new file mode 100644
index 000000000..da24c65c8
--- /dev/null
+++ b/src/event/line/addLineEvent.js
@@ -0,0 +1,46 @@
+import renderLine from "../../render/renderLine.js";
+import {
+  isSatisfyLength,
+  isSameDestination,
+  isLineAlreadyExist,
+  isTransferStation,
+} 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() {
+  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);
+  } 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);
+}
+
+export default function addLineEvent() {
+  const $addLineBtn = document.getElementById("line-add-button");
+  $addLineBtn.addEventListener("click", checkValidLine);
+}
diff --git a/src/event/line/delLineEvent.js b/src/event/line/delLineEvent.js
new file mode 100644
index 000000000..95a786add
--- /dev/null
+++ b/src/event/line/delLineEvent.js
@@ -0,0 +1,35 @@
+import renderLine from "../../render/renderLine.js";
+import { alertMessage } from "../../common/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;
+  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
new file mode 100644
index 000000000..1e5bbcc23
--- /dev/null
+++ b/src/event/menuEvent.js
@@ -0,0 +1,39 @@
+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 chooseLineEvent from "./section/chooseLineEvent.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";
+    addLineEvent();
+    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");
+  }
+}
+
+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
new file mode 100644
index 000000000..aa6082f6e
--- /dev/null
+++ b/src/event/section/addSectionEvent.js
@@ -0,0 +1,52 @@
+import { renderSection } from "../../render/renderSection.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);
+  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);
+  clearInput();
+}
+
+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);
+  } else if (isTransferStation(lines, selectedStation)) {
+    return alert(`${selectedStation}` + alertMessage.TRANSFER_STATION_MESSAGE);
+  }
+
+  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..ddfcb5c74
--- /dev/null
+++ b/src/event/section/chooseLineEvent.js
@@ -0,0 +1,17 @@
+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..f7cd90c67
--- /dev/null
+++ b/src/event/section/delSectionEvent.js
@@ -0,0 +1,54 @@
+import { renderSection } from "../../render/renderSection.js";
+import { getIndexOfLine } from "./addSectionEvent.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;
+      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/event/station/addStationEvent.js b/src/event/station/addStationEvent.js
new file mode 100644
index 000000000..283471b93
--- /dev/null
+++ b/src/event/station/addStationEvent.js
@@ -0,0 +1,29 @@
+import renderStation from "../../render/renderStation.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)) {
+    return alert(alertMessage.SAME_STATION_EXIST_ERROR);
+  }
+  addStation(station);
+}
+
+export default function addStationEvent() {
+  const $addStationBtn = document.getElementById("station-add-button");
+  $addStationBtn.addEventListener("click", checkValidStation);
+}
diff --git a/src/event/station/delStationEvent.js b/src/event/station/delStationEvent.js
new file mode 100644
index 000000000..12dbfae55
--- /dev/null
+++ b/src/event/station/delStationEvent.js
@@ -0,0 +1,38 @@
+import renderStation from "../../render/renderStation.js";
+import { isStationOnLine } from "../../common/checkInput.js";
+import { alertMessage } from "../../common/alertMessage.js";
+
+function delStation(station) {
+  const lines = JSON.parse(localStorage.lines);
+  const stations = JSON.parse(localStorage.stations);
+
+  stations.splice(stations.indexOf(station), 1);
+
+  if (isStationOnLine(lines, station)) {
+    return alert(alertMessage.DELETE_STATION_ON_LINE_MESSAGE);
+  }
+
+  localStorage.stations = JSON.stringify(stations);
+
+  renderStation();
+}
+
+function findDeleteTarget(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)) {
+        findDeleteTarget(event);
+      }
+    })
+  );
+}
diff --git a/src/index.js b/src/index.js
index e69de29bb..2b42f38e2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,7 @@
+import menuEvent from "./event/menuEvent.js";
+
+export default function SubwayMap() {
+  menuEvent();
+}
+
+new SubwayMap();
diff --git a/src/render/render.js b/src/render/render.js
new file mode 100644
index 000000000..739eebced
--- /dev/null
+++ b/src/render/render.js
@@ -0,0 +1,16 @@
+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") {
+    renderStation();
+  } else if (name === "line") {
+    renderLine();
+  } else if (name === "section") {
+    renderLineButton();
+  } else if (name === "mapPrint") {
+    renderMapPrint();
+  }
+}
diff --git a/src/render/renderLine.js b/src/render/renderLine.js
new file mode 100644
index 000000000..5f29d7247
--- /dev/null
+++ b/src/render/renderLine.js
@@ -0,0 +1,71 @@
+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;
+}
+
+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>
+              <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, 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>`;
+}
+
+function initLineList(lines) {
+  const $lineTable = document.querySelector(".line-table");
+  let lineNumber = 0;
+
+  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) {
+    initLineList(lines);
+  }
+}
diff --git a/src/render/renderMapPrint.js b/src/render/renderMapPrint.js
new file mode 100644
index 000000000..fe525c5d6
--- /dev/null
+++ b/src/render/renderMapPrint.js
@@ -0,0 +1,22 @@
+function mapPrintTemplate() {
+  const lines = JSON.parse(localStorage.lines);
+  let newHTML = `<div class="map">`;
+
+  lines.forEach(
+    (line) =>
+      (newHTML += `<h3>${line.name}</h3><ul>${line.sections
+        .map((section) => `<li>${section}</li>`)
+        .join("")}</ul>`)
+  );
+
+  return newHTML + "</div>";
+}
+
+function initMapPrint() {
+  const $mapPrintContainer = document.getElementById("map-print-container");
+  $mapPrintContainer.innerHTML = mapPrintTemplate();
+}
+
+export default function renderMapPrint() {
+  initMapPrint();
+}
diff --git a/src/render/renderSection.js b/src/render/renderSection.js
new file mode 100644
index 000000000..3348c193c
--- /dev/null
+++ b/src/render/renderSection.js
@@ -0,0 +1,106 @@
+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);
+}
diff --git a/src/render/renderStation.js b/src/render/renderStation.js
new file mode 100644
index 000000000..d1eca5190
--- /dev/null
+++ b/src/render/renderStation.js
@@ -0,0 +1,46 @@
+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);
+  }
+}