diff --git a/MISSION.md b/MISSION.md
new file mode 100644
index 000000000..e97a1d649
--- /dev/null
+++ b/MISSION.md
@@ -0,0 +1,114 @@
+# 🚇 지하철 노선도 미션
+
+## 🚀 기능 요구사항
+
+### 지하철 역 관련 기능
+- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
+- 중복된 지하철 역 이름이 등록될 수 없다.
+- 지하철 역은 2글자 이상이어야 한다.
+- 지하철 역의 목록을 조회할 수 있다.
+
+### 지하철 노선 관련 기능
+- 지하철 노선을 등록하고 삭제할 수 있다.
+- 중복된 지하철 노선 이름이 등록될 수 없다.
+- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
+- 지하철 노선의 목록을 조회할 수 있다.
+
+### 지하철 구간 추가 기능
+- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
+- 하나의 역은 여러개의 노선에 추가될 수 있다.
+- 역과 역 사이에 새로운 역이 추가 될 수 있다.
+- 노선에서 갈래길은 생길 수 없다.
+
+<img width="500" src="/images/section1.png">
+
+### 지하철 구간 삭제 기능
+- 노선에 등록된 역을 제거할 수 있다.
+- 종점을 제거할 경우 다음 역이 종점이 된다.
+- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
+
+<img width="500" src="/images/section2.png">
+
+### 지하철 노선에 등록된 역 조회 기능
+- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
+
+<br/>
+
+## 💻 프로그램 실행 결과
+
+### 역관리
+<img width="100%" src="/images/station_manager.gif">
+
+### 노선관리
+<img width="100%" src="/images/line_manager.gif">
+
+### 구간관리
+<img width="100%" src="/images/section_manager.gif">
+
+### 노선도 출력
+<img width="100%" src="/images/map_print_manager.gif">
+
+
+## ✅ 프로그래밍 요구사항
+
+### 메뉴 버튼
+- 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
+- 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
+- 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
+- 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
+
+### 지하철 역 관련 기능
+- 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
+- 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
+- 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
+
+### 지하철 노선 관련 기능
+- 지하철 노선의 이름을 입력하는 input 태그는 `#line-name-input` id값을 가진다.
+- 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
+- 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
+- 지하철 노선을 추가하는 button 태그는 `#line-add-button` id값을 가진다.
+- 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
+
+### 지하철 구간 추가 기능
+- 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
+- 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
+- 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
+- 지하철 구간을 등록하는 button 태그는 `#section-add-button` id값을 가진다.
+- 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
+
+### 지하철 노선도 출력 기능
+- 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
+
+### 기존 요구사항
+
+- 사용자가 잘못된 입력 값을 작성한 경우 `alert`을 이용해 메시지를 보여주고, 재입력할 수 있게 한다.
+- 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않고, 순수 Vanilla JS로만 구현한다.
+- **자바스크립트 코드 컨벤션을 지키면서 프로그래밍** 한다
+  - [https://google.github.io/styleguide/jsguide.html](https://google.github.io/styleguide/jsguide.html)
+  - [https://ui.toast.com/fe-guide/ko_CODING-CONVENSION/](https://ui.toast.com/fe-guide/ko_CODING-CONVENTION)
+- **indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용**한다.
+  - 예를 들어 while문 안에 if문이 있으면 들여쓰기는 2이다.
+  - 힌트: indent(인덴트, 들여쓰기) depth를 줄이는 좋은 방법은 함수(또는 메소드)를 분리하면 된다.
+- **함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.**
+  - 함수(또는 메소드)가 한 가지 일만 잘 하도록 구현한다.
+- 변수 선언시 `var` 를 사용하지 않는다. `const` 와 `let` 을 사용한다.
+  - [const](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const)
+  - [let](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let)
+- `import` 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.
+  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import)
+- `template literal`을 이용해 데이터와 html string을 가독성 좋게 표현한다.
+  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)
+
+### 추가된 요구사항
+- [data](https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)속성을 활용하여 html 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다. 
+- [localStorage](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.
+
+<br/>
+
+## 📝 미션 저장소 및 진행 요구사항
+
+- 미션은 [https://github.com/woowacourse/javascript-subway-map-precours](https://github.com/woowacourse/javascript-subway-map-precourse) 저장소를 fork/clone해 시작한다.
+- **기능을 구현하기 전에 javascript-subway-precourse/docs/README.md 파일에 구현할 기능 목록**을 정리해 추가한다.
+- **git의 commit 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가**한다.
+- [프리코스 과제 제출](https://github.com/woowacourse/woowacourse-docs/tree/master/precourse) 문서 절차를 따라 미션을 제출한다.
diff --git a/README.md b/README.md
index e97a1d649..33942b111 100644
--- a/README.md
+++ b/README.md
@@ -1,114 +1,49 @@
 # 🚇 지하철 노선도 미션
 
-## 🚀 기능 요구사항
+[우아한 테크 코스 - 3기] 프리코스 3주차 미션을 진행한 저장소입니다.
 
-### 지하철 역 관련 기능
-- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
-- 중복된 지하철 역 이름이 등록될 수 없다.
-- 지하철 역은 2글자 이상이어야 한다.
-- 지하철 역의 목록을 조회할 수 있다.
+[미션내용 확인하기](./MISSION.md)
 
-### 지하철 노선 관련 기능
-- 지하철 노선을 등록하고 삭제할 수 있다.
-- 중복된 지하철 노선 이름이 등록될 수 없다.
-- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
-- 지하철 노선의 목록을 조회할 수 있다.
+## 🚀 구현 기능
 
-### 지하철 구간 추가 기능
-- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
-- 하나의 역은 여러개의 노선에 추가될 수 있다.
-- 역과 역 사이에 새로운 역이 추가 될 수 있다.
-- 노선에서 갈래길은 생길 수 없다.
+각 기능으로 이동하는 navigator 화면을 구성한다.
 
-<img width="500" src="/images/section1.png">
+### 역 관리
 
-### 지하철 구간 삭제 기능
-- 노선에 등록된 역을 제거할 수 있다.
-- 종점을 제거할 경우 다음 역이 종점이 된다.
-- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
+- 역 관리 화면을 구성한다.
+- 저장된 모든 지하철 역 이름을 조회한다.
+- 입력받은 역 이름이 2글자 이상인지 검사한다.
+- 입력받은 역 이름이 기존에 존재하지 않는지 검사한다.
+- 입력받은 역 이름으로 새로운 지하철 역을 등록한다.
+- 선택된 지하철 역이 노선에 등록되어있는지 검사한다.
+- 지하철 역을 삭제한다.
 
-<img width="500" src="/images/section2.png">
+### 노선 관리
 
-### 지하철 노선에 등록된 역 조회 기능
-- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
+- 노선 관리 화면을 구성한다.
+- 저장된 모든 지하철 노선을 조회한다.
+- 입력받은 노선 이름이 1글자 이상인지 검사한다.
+- 입력받은 노선 이름이 기존에 존재하지 않는지 검사한다.
+- 입력받은 상행 종점역과 하행 종점역이 동일하지 않은지 검사한다.
+- 새로운 지하철 노선을 등록한다.
+- 사용자 확인 후 지하철 노선을 삭제한다.
 
-<br/>
+### 구간 관리
 
-## 💻 프로그램 실행 결과
+- 구간 관리 화면을 구성한다.
+- 선택된 노선에 등록된 지하철 역을 조회한다.
+- 구간 등록 시 이미 등록된 역은 옵션에 포함하지 않는다.
+- 입력받은 구간 순서가 자연수인지 검사한다.
+- 입력받은 구간 순서 숫자가 기존에 등록된 지하철 수를 초과하지 않는지 검사한다.
+- 노선에 새로운 구간을 등록한다.
+- 노선에 등록된 역이 2개 이하인지 검사한다.
+- 선택된 지하철 역을 노선에서 삭제한다.
 
-### 역관리
-<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) 문서 절차를 따라 미션을 제출한다.
+- [[HTML 바로 알기] Semantic Web을 위한 Semantic Elements - bono](https://blueshw.github.io/2020/05/09/know-html-semantic-elements/)
+- [비구조화 할당(구조분해) 문법 - velopert](https://learnjs.vlpt.us/useful/06-destructuring.html)
diff --git a/index.html b/index.html
index fc99deac2..6f3862daa 100644
--- a/index.html
+++ b/index.html
@@ -3,11 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <title>지하철 노선도 관리</title>
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
-    </div>
+    <div id="app"></div>
+
     <script type="module" src="src/index.js"></script>
   </body>
 </html>
diff --git a/src/components/App.js b/src/components/App.js
new file mode 100644
index 000000000..03044cf06
--- /dev/null
+++ b/src/components/App.js
@@ -0,0 +1,159 @@
+import Header from "./Header.js";
+import Navigator from "./Navigator.js";
+import StationManager from "./StationManager.js";
+import LineManager from "./LineManager.js";
+import SectionManager from "./SectionManager.js";
+import localStorageManager from "../util/localStorage.js";
+import { ELEMENT_INFO, ERROR_MESSAGE, STORAGE_KEY } from "../util/constants.js";
+import SubwayMap from "./SubwayMap.js";
+
+export default function App($app) {
+  this.$app = $app;
+  this.header = new Header({ $target: this.$app });
+
+  this.positionId = "";
+
+  this.onTogglePosition = (nextPositionId) => {
+    this.stationManager.setState({ nextIsShow: nextPositionId === this.stationManager.id });
+    this.lineManager.setState({
+      nextIsShow: nextPositionId === this.lineManager.id,
+      nextStations: this.stations,
+    });
+    this.sectionManager.setState({
+      nextIsShow: nextPositionId === this.sectionManager.id,
+      nextStations: this.stations,
+    });
+    this.subwayMap.setState({
+      nextIsShow: nextPositionId === this.subwayMap.id,
+      nextLines: this.lines,
+    });
+  };
+
+  this.navigator = new Navigator({
+    $target: this.$app,
+    onTogglePosition: this.onTogglePosition,
+  });
+
+  this.$main = document.createElement("main");
+  this.$app.append(this.$main);
+
+  this.stations = localStorageManager.getItem({
+    key: STORAGE_KEY.station,
+    defaultValue: [],
+  });
+  this.lines = localStorageManager.getItem({
+    key: STORAGE_KEY.line,
+    defaultValue: [],
+  });
+
+  this.onAddStation = (stationName) => {
+    const nextStations = [...this.stations, stationName];
+    this.setState({ nextStations });
+  };
+
+  this.onDeleteStation = (stationIndex) => {
+    if (!this.isContaineLines(this.stations[stationIndex])) {
+      const nextStations = [...this.stations];
+      nextStations.splice(stationIndex, 1);
+      this.setState({ nextStations });
+    }
+  };
+
+  this.isContaineLines = (stationName) => {
+    const result = this.lines.find((line) => {
+      return line.stations.find((station) => station === stationName) ? true : false;
+    });
+
+    if (result) {
+      alert(ERROR_MESSAGE.notPossibleToDeleteStation);
+      return true;
+    }
+
+    return false;
+  };
+
+  this.stationManager = new StationManager({
+    id: ELEMENT_INFO.navigator[0].id,
+    $target: this.$main,
+    stations: this.stations,
+    isShow: false,
+    onAddStation: this.onAddStation,
+    onDeleteStation: this.onDeleteStation,
+  });
+
+  this.onAddLine = (line) => {
+    const nextLines = [...this.lines, line];
+    this.setState({ nextLines });
+  };
+
+  this.onDeleteLine = (lineIndex) => {
+    const nextLines = [...this.lines];
+    nextLines.splice(lineIndex, 1);
+
+    this.setState({ nextLines });
+  };
+
+  this.lineManager = new LineManager({
+    id: ELEMENT_INFO.navigator[1].id,
+    $target: this.$main,
+    isShow: false,
+    stations: this.stations,
+    lines: this.lines,
+    onAddLine: this.onAddLine,
+    onDeleteLine: this.onDeleteLine,
+  });
+
+  this.updateSection = (lineIndex, nextStations) => {
+    const nextLines = [...this.lines];
+    nextLines.splice(lineIndex, 1, { ...nextLines[lineIndex], stations: nextStations });
+
+    this.setState({ nextLines });
+  };
+
+  this.sectionManager = new SectionManager({
+    id: ELEMENT_INFO.navigator[2].id,
+    $target: this.$main,
+    isShow: false,
+    stations: this.stations,
+    lines: this.lines,
+    updateSection: this.updateSection,
+  });
+
+  this.subwayMap = new SubwayMap({
+    id: ELEMENT_INFO.navigator[3].id,
+    $target: this.$main,
+    isShow: false,
+    lines: this.lines,
+  });
+
+  this.setNextStations = (nextStations) => {
+    this.stations = nextStations;
+
+    localStorageManager.setItem({
+      key: STORAGE_KEY.station,
+      item: nextStations,
+    });
+  };
+
+  this.setNextLines = (nextLines) => {
+    this.lines = nextLines;
+
+    localStorageManager.setItem({
+      key: STORAGE_KEY.line,
+      item: nextLines,
+    });
+  };
+
+  this.setState = ({ nextStations, nextLines }) => {
+    if (nextStations) {
+      this.setNextStations(nextStations);
+      this.stationManager.setState({ nextStations: this.stations });
+    }
+
+    if (nextLines) {
+      this.setNextLines(nextLines);
+      this.lineManager.setState({ nextLines: this.lines });
+      this.sectionManager.setState({ nextLines: this.lines });
+    }
+  };
+}
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 000000000..bcb12f86f
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,15 @@
+export default function Header({ $target }) {
+  this.$target = $target;
+
+  this.render = () => {
+    const HTMLString = `
+      <header>
+        <h1>🚇 지하철 노선도 관리 </h1>
+      </header>
+    `;
+
+    this.$target.insertAdjacentHTML("afterbegin", HTMLString);
+  };
+
+  this.render();
+}
diff --git a/src/components/LineInput.js b/src/components/LineInput.js
new file mode 100644
index 000000000..24b36ebb9
--- /dev/null
+++ b/src/components/LineInput.js
@@ -0,0 +1,97 @@
+import { isTextOverMinLength } from "../util/validation.js";
+import { ELEMENT_INFO, LINE_NAME_MIN_LENGTH, ERROR_MESSAGE } from "../util/constants.js";
+
+export default function LineInput({ $target, stations, isExistLineName, onAddLine }) {
+  const { lineNameInput, lineStartStationSelector, lineEndStationSelector, lineAddButton } = ELEMENT_INFO;
+
+  this.$container = document.createElement("form");
+  $target.append(this.$container);
+
+  this.stations = stations;
+  this.onAddLine = onAddLine;
+
+  this.$container.addEventListener("submit", (e) => {
+    const $lineNameInput = document.querySelector(`#${lineNameInput.id}`);
+    const startStationName = document.querySelector(`#${lineStartStationSelector.id}`).value;
+    const endStationName = document.querySelector(`#${lineEndStationSelector.id}`).value;
+
+    if (this.isValidInput({ $lineNameInput, startStationName, endStationName })) {
+      this.onAddLine({
+        name: $lineNameInput.value,
+        stations: [startStationName, endStationName],
+      });
+
+      e.target.reset();
+    }
+
+    e.preventDefault();
+  });
+
+  this.isValidInput = ({ $lineNameInput, startStationName, endStationName }) => {
+    return (
+      this.isLineNameOverMinLength($lineNameInput) &&
+      !this.isExistLineName($lineNameInput) &&
+      !this.isSameStation(startStationName, endStationName)
+    );
+  };
+
+  this.isLineNameOverMinLength = ($lineNameInput) => {
+    const result = isTextOverMinLength($lineNameInput.value, LINE_NAME_MIN_LENGTH);
+
+    if (!result) {
+      alert(ERROR_MESSAGE.shortLineName);
+      $lineNameInput.value = "";
+    }
+
+    return result;
+  };
+
+  this.isExistLineName = ($lineNameInput) => {
+    const result = isExistLineName($lineNameInput.value);
+
+    if (result) {
+      alert(ERROR_MESSAGE.duplicatedLineName);
+      $lineNameInput.value = "";
+    }
+
+    return result;
+  };
+
+  this.isSameStation = (startStationName, endStationName) => {
+    if (startStationName === endStationName) {
+      alert(ERROR_MESSAGE.sameStartAndEndStation);
+
+      return true;
+    }
+
+    return false;
+  };
+
+  this.setState = ({ nextStations }) => {
+    this.stations = nextStations;
+
+    this.render();
+  };
+
+  this.createSelectOptionHTMLString = () => {
+    return this.stations.map((station) => `<option value="${station}">${station}</option>`).join("");
+  };
+
+  this.render = () => {
+    this.$container.innerHTML = `
+      <label for="${lineNameInput.id}">${lineNameInput.text}</label>
+      <input id="${lineNameInput.id}" type="text" palceholder="노선 이름을 입력해주세요" />
+      <label>
+        ${lineStartStationSelector.text}
+        <select id="${lineStartStationSelector.id}">${this.createSelectOptionHTMLString()}</select>
+      </label>
+      <label>
+        ${lineEndStationSelector.text}
+        <select id="${lineEndStationSelector.id}">${this.createSelectOptionHTMLString()}</select>
+      </label>
+      <button id="${lineAddButton.id}" type="submit">${lineAddButton.text}</button>
+    `;
+  };
+
+  this.render();
+}
diff --git a/src/components/LineList.js b/src/components/LineList.js
new file mode 100644
index 000000000..3e1746458
--- /dev/null
+++ b/src/components/LineList.js
@@ -0,0 +1,59 @@
+import { ELEMENT_INFO } from "../util/constants.js";
+
+export default function LineList({ $target, lines, onDeleteLine }) {
+  const { lineDeleteButton } = ELEMENT_INFO;
+
+  this.$container = document.createElement("section");
+  $target.append(this.$container);
+
+  this.lines = lines;
+  this.onDeleteLine = onDeleteLine;
+
+  this.bindOnDelete = () => {
+    this.$container.addEventListener("click", (e) => {
+      if (e.target.className === lineDeleteButton.className) {
+        this.onDeleteLine(e.target.dataset.lineIndex);
+      }
+    });
+  };
+
+  this.setState = ({ nextLines }) => {
+    this.lines = nextLines;
+    this.render();
+  };
+
+  this.createTableRowHTMLString = (line, index) => {
+    return `
+      <tr>
+        <td>${line.name}</td>
+        <td>${line.stations[0]}</td>
+        <td>${line.stations[line.stations.length - 1]}</td>
+        <td>
+          <button data-line-index="${index}" class="${lineDeleteButton.className}">${lineDeleteButton.text}</button>
+        </td>
+      </tr>
+    `;
+  };
+
+  this.render = () => {
+    this.$container.innerHTML = `
+      <h2>🚉 지하철 노선 목록</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>노선 이름</th>
+            <th>상행 종점역</th>
+            <th>하행 종점역</th>
+            <th>설정</th>
+          </tr>
+        </thead>
+        </tbody>
+          ${this.lines.map((line, index) => this.createTableRowHTMLString(line, index)).join("")}
+        </tbody>
+      </table>
+    `;
+  };
+
+  this.render();
+  this.bindOnDelete();
+}
diff --git a/src/components/LineManager.js b/src/components/LineManager.js
new file mode 100644
index 000000000..573bbd798
--- /dev/null
+++ b/src/components/LineManager.js
@@ -0,0 +1,55 @@
+import LineInput from "./LineInput.js";
+import LineList from "./LineList.js";
+
+export default function LineManager({ id, $target, isShow, stations, lines, onAddLine, onDeleteLine }) {
+  this.$container = document.createElement("div");
+  this.$container.className = "line-manager";
+  $target.append(this.$container);
+
+  this.id = id;
+  this.isShow = isShow;
+  this.stations = stations;
+  this.lines = lines;
+
+  this.isExistLineName = (lineName) => {
+    if (this.lines.find((line) => line.name === lineName)) {
+      return true;
+    }
+
+    return false;
+  };
+
+  this.lineInput = new LineInput({
+    $target: this.$container,
+    stations: this.stations,
+    isExistLineName: this.isExistLineName,
+    onAddLine,
+  });
+
+  this.lineList = new LineList({
+    $target: this.$container,
+    lines: this.lines,
+    onDeleteLine,
+  });
+
+  this.setState = ({ nextIsShow, nextStations, nextLines }) => {
+    if (nextIsShow !== undefined) {
+      this.isShow = nextIsShow;
+      this.stations = nextStations;
+      this.lineInput.setState({ nextStations });
+
+      this.render();
+    }
+
+    if (nextLines) {
+      this.lines = nextLines;
+      this.lineList.setState({ nextLines: this.lines });
+    }
+  };
+
+  this.render = () => {
+    this.$container.style.display = this.isShow ? "block" : "none";
+  };
+
+  this.render();
+}
diff --git a/src/components/LineSelector.js b/src/components/LineSelector.js
new file mode 100644
index 000000000..6a7aec221
--- /dev/null
+++ b/src/components/LineSelector.js
@@ -0,0 +1,36 @@
+import { ELEMENT_INFO } from "../util/constants.js";
+
+export default function LineSelector({ $target, lines, onChangeLine }) {
+  const { sectionLineMenuButton } = ELEMENT_INFO;
+
+  this.$container = document.createElement("section");
+  this.$container.className = "line-selector";
+  $target.append(this.$container);
+
+  this.lines = lines;
+  this.onChangeLine = onChangeLine;
+
+  this.bindOnClick = () => {
+    this.$container.addEventListener("click", (e) => {
+      if (e.target.className === sectionLineMenuButton.className) {
+        this.onChangeLine(e.target.dataset.lineIndex);
+      }
+    });
+  };
+
+  this.createLineList = (line, index) => {
+    return `<li><button data-line-index="${index}" class="${sectionLineMenuButton.className}">${line.name}</button></li>`;
+  };
+
+  this.render = () => {
+    this.$container.innerHTML = `
+      <h2>구간을 수정할 노선을 선택해주세요</h2>
+      <ul>
+        ${lines.map((line, index) => this.createLineList(line, index)).join("")}
+      </ul>
+    `;
+  };
+
+  this.render();
+  this.bindOnClick();
+}
diff --git a/src/components/Navigator.js b/src/components/Navigator.js
new file mode 100644
index 000000000..c3e6b0766
--- /dev/null
+++ b/src/components/Navigator.js
@@ -0,0 +1,28 @@
+import { ELEMENT_INFO } from "../util/constants.js";
+
+export default function Navigator({ $target, onTogglePosition }) {
+  const { navigator: navInfo } = ELEMENT_INFO;
+
+  this.onTogglePosition = onTogglePosition;
+  this.$container = document.createElement("nav");
+  $target.append(this.$container);
+
+  this.bindOnClick = () => {
+    this.$container.addEventListener("click", (e) => {
+      if (e.target.tagName === "BUTTON") {
+        this.onTogglePosition(e.target.id);
+      }
+    });
+  };
+
+  this.render = () => {
+    this.$container.innerHTML = `
+      <ol>
+        ${navInfo.map((nav, index) => `<li><button id="${nav.id}">${index + 1}. ${nav.text}</button></li>`).join("")}
+      </ol>
+    `;
+  };
+
+  this.render();
+  this.bindOnClick();
+}
diff --git a/src/components/SectionInput.js b/src/components/SectionInput.js
new file mode 100644
index 000000000..7ab538459
--- /dev/null
+++ b/src/components/SectionInput.js
@@ -0,0 +1,87 @@
+import { isNatureNumber } from "../util/validation.js";
+import { ELEMENT_INFO, ERROR_MESSAGE } from "../util/constants.js";
+
+export default function SectionInput({ $target, stations, selectedLineName, stationsInSelectedLine, onAddSection }) {
+  const { sectionStationSelector, sectionOrderInput, sectionAddButton } = ELEMENT_INFO;
+
+  this.$container = document.createElement("section");
+  this.$container.className = "section-input";
+  $target.append(this.$container);
+
+  this.stations = stations;
+  this.selectedLineName = selectedLineName;
+  this.stationsInSelectedLine = stationsInSelectedLine;
+
+  this.bindOnSubmit = () => {
+    this.$container.addEventListener("click", (e) => {
+      if (e.target.id === sectionAddButton.id) {
+        const selectedStation = document.querySelector(`#${sectionStationSelector.id}`).value;
+        let sectionOrder = document.querySelector(`#${sectionOrderInput.id}`).value - 0;
+
+        if (this.isNatureNumber(sectionOrder)) {
+          sectionOrder = this.checkOverStationsLength(sectionOrder);
+          onAddSection(selectedStation, sectionOrder);
+        }
+      }
+    });
+  };
+
+  this.isNatureNumber = (sectionOrder) => {
+    const result = isNatureNumber(sectionOrder);
+
+    if (!result) {
+      alert(ERROR_MESSAGE.notNatureNumberSectionOrder);
+    }
+
+    return result;
+  };
+
+  this.checkOverStationsLength = (sectionOrder) => {
+    if (sectionOrder > this.stationsInSelectedLine.length) {
+      alert(ERROR_MESSAGE.overStationsLength);
+
+      return this.stationsInSelectedLine.length;
+    }
+
+    return sectionOrder;
+  };
+
+  this.setState = ({ nextStations, nextSelectedLineName, nextStationsInSelectedLine }) => {
+    if (nextStations) {
+      this.stations = nextStations;
+    } else {
+      this.selectedLineName = nextSelectedLineName;
+      this.stationsInSelectedLine = nextStationsInSelectedLine;
+
+      this.render();
+    }
+  };
+
+  this.createSelectOptionHTMLString = () => {
+    return this.stations
+      .map((station) =>
+        this.stationsInSelectedLine.includes(station) ? "" : `<option value="${station}">${station}</option>`
+      )
+      .join("");
+  };
+
+  this.render = () => {
+    this.$container.innerHTML =
+      this.selectedLineName !== ""
+        ? `
+            <h2>${this.selectedLineName} 관리</h2>
+            <form>
+              <h3>구간 등록</h3>
+              <select id="${sectionStationSelector.id}">${this.createSelectOptionHTMLString()}</select>
+              <input id="${sectionOrderInput.id}" type="number" name="${sectionOrderInput.text}" placeholder="${
+            sectionOrderInput.text
+          }" />
+              <button id="${sectionAddButton.id}" type="button">${sectionAddButton.text}</button>
+            </form>
+          `
+        : "";
+  };
+
+  this.render();
+  this.bindOnSubmit();
+}
diff --git a/src/components/SectionList.js b/src/components/SectionList.js
new file mode 100644
index 000000000..84a3334fa
--- /dev/null
+++ b/src/components/SectionList.js
@@ -0,0 +1,68 @@
+import { ELEMENT_INFO, ERROR_MESSAGE } from "../util/constants.js";
+
+export default function SectionList({ $target, stationsInSelectedLine, onDeleteSection }) {
+  const { sectionDeleteButton } = ELEMENT_INFO;
+
+  this.$container = document.createElement("section");
+  $target.append(this.$container);
+
+  this.stationsInSelectedLine = stationsInSelectedLine;
+  this.onDeleteSection = onDeleteSection;
+
+  this.bindOnDelete = () => {
+    this.$container.addEventListener("click", (e) => {
+      if (e.target.className === sectionDeleteButton.className && this.isPossibleToDelete()) {
+        this.onDeleteSection(e.target.dataset.stationIndex);
+      }
+    });
+  };
+
+  this.isPossibleToDelete = () => {
+    const result = this.stationsInSelectedLine.length > 2 ? true : false;
+
+    if (!result) {
+      alert(ERROR_MESSAGE.notPossibleToDeleteSection);
+    }
+
+    return result;
+  };
+
+  this.setState = (nextStationsInSelectedLine) => {
+    this.stationsInSelectedLine = nextStationsInSelectedLine;
+
+    this.render();
+  };
+
+  this.createTableRowHTMLString = (stationName, index) => {
+    return `
+      <tr>
+        <td>${index}</td>
+        <td>${stationName}</td>
+        <td><button class="${sectionDeleteButton.className}" data-station-index="${index}">${sectionDeleteButton.text}</button></td>
+      </tr>
+    `;
+  };
+
+  this.render = () => {
+    this.$container.innerHTML =
+      this.stationsInSelectedLine.length > 0
+        ? `<table>
+            <thead>
+              <tr>
+                <th>순서</th>
+                <th>이름</th>
+                <th>설정</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${this.stationsInSelectedLine
+                .map((stationName, index) => this.createTableRowHTMLString(stationName, index))
+                .join("")}
+            </tbody>
+          </table>`
+        : "";
+  };
+
+  this.render();
+  this.bindOnDelete();
+}
diff --git a/src/components/SectionManager.js b/src/components/SectionManager.js
new file mode 100644
index 000000000..eb643f5dc
--- /dev/null
+++ b/src/components/SectionManager.js
@@ -0,0 +1,94 @@
+import LineSelector from "./LineSelector.js";
+import SectionInput from "./SectionInput.js";
+import SectionList from "./SectionList.js";
+
+export default function SectionManager({ id, $target, isShow, stations, lines, updateSection }) {
+  this.$container = document.createElement("div");
+  this.$container.className = "section-manager";
+  $target.append(this.$container);
+
+  this.id = id;
+  this.isShow = isShow;
+  this.stations = stations;
+  this.lines = lines;
+  this.selectedLineIndex = -1;
+
+  this.onChangeLine = (nextSelectedLineIndex) => {
+    this.setState({ nextSelectedLineIndex });
+  };
+
+  this.lineSelector = new LineSelector({
+    $target: this.$container,
+    lines: this.lines,
+    onChangeLine: this.onChangeLine,
+  });
+
+  this.onAddSection = (selectedStation, sectionOrder) => {
+    const nextStations = [...this.lines[this.selectedLineIndex].stations];
+    nextStations.splice(sectionOrder, 0, selectedStation);
+
+    updateSection(this.selectedLineIndex, nextStations);
+  };
+
+  this.sectionInput = new SectionInput({
+    $target: this.$container,
+    stations: this.stations,
+    selectedLineName: "",
+    stationsInSelectedLine: [],
+    onAddSection: this.onAddSection,
+  });
+
+  this.onDeleteSection = (selectedStationIndex) => {
+    const nextStations = [...this.lines[this.selectedLineIndex].stations];
+    nextStations.splice(selectedStationIndex, 1);
+
+    updateSection(this.selectedLineIndex, nextStations);
+  };
+
+  this.sectionList = new SectionList({
+    $target: this.$container,
+    stationsInSelectedLine: [],
+    onDeleteSection: this.onDeleteSection,
+  });
+
+  this.getSelectedLineName = () => {
+    return this.lines[this.selectedLineIndex].name;
+  };
+
+  this.getStationsInSelectedLine = () => {
+    return this.lines[this.selectedLineIndex].stations;
+  };
+
+  this.setStateComponents = () => {
+    this.sectionInput.setState({
+      nextSelectedLineName: this.getSelectedLineName(),
+      nextStationsInSelectedLine: this.getStationsInSelectedLine(),
+    });
+    this.sectionList.setState(this.getStationsInSelectedLine());
+  };
+
+  this.setState = ({ nextIsShow, nextStations, nextLines, nextSelectedLineIndex }) => {
+    if (nextIsShow !== undefined) {
+      this.isShow = nextIsShow;
+      this.stations = nextStations;
+      this.sectionInput.setState({ nextStations: this.stations });
+      this.render();
+    }
+
+    if (nextLines) {
+      this.lines = nextLines;
+      this.setStateComponents();
+    }
+
+    if (nextSelectedLineIndex) {
+      this.selectedLineIndex = nextSelectedLineIndex;
+      this.setStateComponents();
+    }
+  };
+
+  this.render = () => {
+    this.$container.style.display = this.isShow ? "block" : "none";
+  };
+
+  this.render();
+}
diff --git a/src/components/StationList.js b/src/components/StationList.js
new file mode 100644
index 000000000..c7968f1db
--- /dev/null
+++ b/src/components/StationList.js
@@ -0,0 +1,53 @@
+import { ELEMENT_INFO } from "../util/constants.js";
+
+export default function StationList({ $target, stations, onDeleteStation }) {
+  const { stationDeleteButton } = ELEMENT_INFO;
+
+  this.$container = document.createElement("section");
+  $target.append(this.$container);
+
+  this.stations = stations;
+  this.onDeleteStation = onDeleteStation;
+
+  this.bindOnDelete = () => {
+    this.$container.addEventListener("click", (e) => {
+      if (e.target.className === stationDeleteButton.className) {
+        this.onDeleteStation(e.target.dataset.stationIndex);
+      }
+    });
+  };
+
+  this.setState = ({ nextStations }) => {
+    this.stations = nextStations;
+    this.render();
+  };
+
+  this.createTableRowHTMLString = (stationName, index) => {
+    return `
+      <tr>
+        <td>${stationName}</td>
+        <td><button class="${stationDeleteButton.className}" data-station-index="${index}">${stationDeleteButton.text}</button></td>
+      </tr>
+    `;
+  };
+
+  this.render = () => {
+    this.$container.innerHTML = `
+      <h2>🚉 지하철 역 목록</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>역 이름</th>
+            <th>설정</th>
+          </tr>
+        </thead>
+        </tbody>
+          ${this.stations.map((station, index) => this.createTableRowHTMLString(station, index)).join("")}
+        </tbody>
+      </table>
+    `;
+  };
+
+  this.render();
+  this.bindOnDelete();
+}
diff --git a/src/components/StationManager.js b/src/components/StationManager.js
new file mode 100644
index 000000000..f2db841d9
--- /dev/null
+++ b/src/components/StationManager.js
@@ -0,0 +1,46 @@
+import StationNameInput from "./StationNameInput.js";
+import StationList from "./StationList.js";
+
+export default function StationManager({ id, $target, stations, isShow, onAddStation, onDeleteStation }) {
+  this.$container = document.createElement("div");
+  this.$container.className = "station-manager";
+  $target.append(this.$container);
+
+  this.id = id;
+  this.isShow = isShow;
+  this.stations = stations;
+
+  this.isExistStationName = (stationName) => {
+    return this.stations.includes(stationName);
+  };
+
+  this.stationNameInput = new StationNameInput({
+    $target: this.$container,
+    isExistStationName: this.isExistStationName,
+    onAddStation: onAddStation,
+  });
+
+  this.stationList = new StationList({
+    $target: this.$container,
+    stations: this.stations,
+    onDeleteStation: onDeleteStation,
+  });
+
+  this.setState = ({ nextIsShow, nextStations }) => {
+    if (nextStations) {
+      this.stations = nextStations;
+      this.stationList.setState({ nextStations: this.stations });
+    }
+
+    if (nextIsShow !== undefined) {
+      this.isShow = nextIsShow;
+      this.render();
+    }
+  };
+
+  this.render = () => {
+    this.$container.style.display = this.isShow ? "block" : "none";
+  };
+
+  this.render();
+}
diff --git a/src/components/StationNameInput.js b/src/components/StationNameInput.js
new file mode 100644
index 000000000..ab9b9a925
--- /dev/null
+++ b/src/components/StationNameInput.js
@@ -0,0 +1,55 @@
+import { isTextOverMinLength } from "../util/validation.js";
+import { ELEMENT_INFO, STATION_NAME_MIN_LENGTH, ERROR_MESSAGE } from "../util/constants.js";
+
+export default function StationNameInput({ $target, isExistStationName, onAddStation }) {
+  const { stationNameInput, stationNameSubmit } = ELEMENT_INFO;
+
+  this.$container = document.createElement("form");
+  $target.append(this.$container);
+
+  this.isExistStationName = isExistStationName;
+  this.onAddStation = onAddStation;
+
+  this.bindOnSubmit = () => {
+    this.$container.addEventListener("submit", (e) => {
+      const $stationNameInput = document.querySelector(`#${stationNameInput.id}`);
+
+      if (this.isValidStationName($stationNameInput.value)) {
+        this.onAddStation($stationNameInput.value);
+      }
+
+      $stationNameInput.value = "";
+
+      e.preventDefault();
+    });
+  };
+
+  this.isValidStationName = (stationName) => {
+    if (!isTextOverMinLength(stationName, STATION_NAME_MIN_LENGTH)) {
+      alert(ERROR_MESSAGE.shortStationName);
+
+      return false;
+    }
+
+    if (this.isExistStationName(stationName)) {
+      alert(ERROR_MESSAGE.duplicatedStationName);
+
+      return false;
+    }
+
+    return true;
+  };
+
+  this.render = () => {
+    this.$container.innerHTML = `
+      <label>
+        ${stationNameInput.text}<br />
+        <input id="${stationNameInput.id}" type="text" name="역 이름" placeholder="역 이름을 입력해주세요." />
+      </label>
+      <button id="${stationNameSubmit.id}" type="submit">${stationNameSubmit.text}</button>
+    `;
+  };
+
+  this.render();
+  this.bindOnSubmit();
+}
diff --git a/src/components/SubwayMap.js b/src/components/SubwayMap.js
new file mode 100644
index 000000000..9d84762a3
--- /dev/null
+++ b/src/components/SubwayMap.js
@@ -0,0 +1,30 @@
+export default function SubwayMap({ id, $target, isShow, lines }) {
+  this.$container = document.createElement("div");
+  this.$container.className = "map";
+  $target.append(this.$container);
+
+  this.id = id;
+  this.isShow = isShow;
+  this.lines = lines;
+
+  this.setState = ({ nextIsShow, nextLines }) => {
+    this.isShow = nextIsShow;
+    this.lines = nextLines;
+
+    this.render();
+  };
+
+  this.createStationListInLine = (stations) => {
+    return `<ol>${stations.map((station) => `<li>${station}</li>`).join("")}</ol>`;
+  };
+
+  this.render = () => {
+    this.$container.innerHTML = this.isShow
+      ? `<ul>
+          ${this.lines
+            .map((line) => `<li><h2>${line.name}</h2>${this.createStationListInLine(line.stations)}</li>`)
+            .join("")}
+        </ul>`
+      : "";
+  };
+}
diff --git a/src/index.js b/src/index.js
index e69de29bb..a8a730c71 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,3 @@
+import App from "./components/App.js";
+
+new App(document.querySelector("#app"));
diff --git a/src/util/constants.js b/src/util/constants.js
new file mode 100644
index 000000000..a29302d45
--- /dev/null
+++ b/src/util/constants.js
@@ -0,0 +1,92 @@
+export const ELEMENT_INFO = {
+  navigator: [
+    {
+      text: "역 관리",
+      id: "station-manager-button",
+    },
+    {
+      text: "노선 관리",
+      id: "line-manager-button",
+    },
+    {
+      text: "구간 관리",
+      id: "section-manager-button",
+    },
+    {
+      text: "지하철 노선도 출력",
+      id: "map-print-manager-button",
+    },
+  ],
+  stationNameInput: {
+    text: "역 이름",
+    id: "station-name-input",
+  },
+  stationNameSubmit: {
+    text: "역 추가",
+    id: "station-add-button",
+  },
+  stationDeleteButton: {
+    text: "삭제",
+    className: "station-delete-button",
+  },
+  lineNameInput: {
+    text: "노선 이름",
+    id: "line-name-input",
+  },
+  lineStartStationSelector: {
+    text: "상행 종점",
+    id: "line-start-station-selector",
+  },
+  lineEndStationSelector: {
+    text: "하행 종점",
+    id: "line-end-station-selector",
+  },
+  lineAddButton: {
+    text: "노선 추가",
+    id: "line-add-button",
+  },
+  lineDeleteButton: {
+    text: "삭제",
+    className: "line-delete-button",
+  },
+  sectionLineMenuButton: {
+    className: "section-line-menu-button",
+  },
+  sectionStationSelector: {
+    id: "section-station-selector",
+  },
+  sectionOrderInput: {
+    text: "순서",
+    id: "section-order-input",
+  },
+  sectionAddButton: {
+    text: "등록",
+    id: "section-add-button",
+  },
+  sectionDeleteButton: {
+    text: "노선에서 제거",
+    className: "section-delete-button",
+  },
+};
+
+export const STATION_NAME_MIN_LENGTH = 2;
+export const LINE_NAME_MIN_LENGTH = 1;
+
+export const ERROR_MESSAGE = {
+  getItem: "⚠ 데이터를 가져올 수 없습니다.",
+  setItem: "⚠ 데이터를 저장하지 못했습니다.",
+  shortStationName: `⚠ ${STATION_NAME_MIN_LENGTH}자 이상의 역 이름을 입력해주세요.`,
+  duplicatedStationName: "⚠ 이미 존재하는 역 이름입니다.",
+  notPossibleToDeleteStation: "⚠ 노선에 등록된 역은 삭제할 수 없습니다.",
+  shortLineName: `⚠ ${LINE_NAME_MIN_LENGTH}자 이상의 노선 이름을 입력해주세요.`,
+  duplicatedLineName: "⚠ 이미 존재하는 노선 이름입니다.",
+  sameStartAndEndStation: "⚠ 상행 종점역과 하행 종점역은 같을 수 없습니다.",
+  notNatureNumberSectionOrder: "⚠ 구간 순서는 소수나 음수가 될 수 없습니다. 자연수를 입력해주세요.",
+  overStationsLength: "⚠ 입력된 숫자가 기존 구간의 개수를 넘습니다. 이 노선의 마지막 순서로 구간을 등록합니다.",
+  notPossibleToDeleteSection: "⚠ 노선 내에 역의 개수가 2개 이하이면 노선에서 구간을 제거할 수 없습니다.",
+};
+
+export const STORAGE_KEY = {
+  station: "station",
+  line: "line",
+};
diff --git a/src/util/localStorage.js b/src/util/localStorage.js
new file mode 100644
index 000000000..6db253a1c
--- /dev/null
+++ b/src/util/localStorage.js
@@ -0,0 +1,25 @@
+import { ERROR_MESSAGE } from "./constants.js";
+
+const localStorageManager = {
+  getItem({ key, defaultValue }) {
+    try {
+      const storedData = localStorage.getItem(key);
+
+      return storedData ? JSON.parse(storedData) : defaultValue;
+    } catch (e) {
+      alert(ERROR_MESSAGE.getItem);
+      console.error(e);
+      return defaultValue;
+    }
+  },
+  setItem({ key, item }) {
+    try {
+      localStorage.setItem(key, JSON.stringify(item));
+    } catch (e) {
+      alert(ERROR_MESSAGE.setItem);
+      console.error(e);
+    }
+  },
+};
+
+export default localStorageManager;
diff --git a/src/util/validation.js b/src/util/validation.js
new file mode 100644
index 000000000..77d6614b2
--- /dev/null
+++ b/src/util/validation.js
@@ -0,0 +1,7 @@
+export const isTextOverMinLength = (text, minLength) => {
+  return text.trim().length >= minLength ? true : false;
+};
+
+export const isNatureNumber = (num) => {
+  return Number.isInteger(num) && num > 0 ? true : false;
+};
diff --git a/style.css b/style.css
new file mode 100644
index 000000000..0e9232bfa
--- /dev/null
+++ b/style.css
@@ -0,0 +1,75 @@
+ul,
+ol {
+  padding: 0;
+}
+
+nav li {
+  list-style: none;
+  display: inline;
+  margin-right: 10px;
+}
+
+section {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+}
+
+input {
+  margin-bottom: 10px;
+}
+
+button[type="submit"] {
+  margin-top: 15px;
+}
+
+table {
+  border-spacing: 0;
+  border: 2px solid black;
+}
+
+th {
+  padding: 6px;
+  border-bottom: 2px solid black;
+}
+
+td {
+  padding: 6px;
+  border-bottom: 1px solid black;
+}
+
+tr:last-child > td {
+  border-bottom: none;
+}
+
+.sr-only {
+  position: fixed;
+  top: -100px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.line-selector li {
+  display: inline;
+  margin-right: 10px;
+}
+
+.section-input form > * {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.map ul {
+  list-style: none;
+}
+
+.map ol {
+  list-style: disc;
+}
+
+.map ol {
+  margin-left: 50px;
+}