diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..8aa924d7c
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 000000000..54b9a9b16
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+    "extends": ["airbnb", "prettier"],
+    "env": {
+        "browser": true, 
+        "jest/globals": true,
+        "es2020": true
+    },
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": ["prettier", "jest", "@babel"],
+    "rules": {
+        "import/extensions": ["off"],
+        "lines-between-class-members": ["off"]
+    }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..448cd77c1
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+.vscode/
+node_modules/
+package.json
+package-lock.json
diff --git a/README.md b/README.md
index e97a1d649..6cd835035 100644
--- a/README.md
+++ b/README.md
@@ -1,114 +1,155 @@
 # 🚇 지하철 노선도 미션
 
+## 소개
+
+나만의 역을 만들고, 만들어진 역들을 바탕으로 나만의 지하철 노선과 지하철 노선도를 제작할 수 있는 프로그램입니다. 실제 지하철 노선도와 유사한 노선도를 제작할 수 있도록 여러 기능과 제약사항이 제공됩니다.
+
+<br/><br/>
+
 ## 🚀 기능 요구사항
 
+<br/>
+
 ### 지하철 역 관련 기능
-- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
-- 중복된 지하철 역 이름이 등록될 수 없다.
-- 지하철 역은 2글자 이상이어야 한다.
-- 지하철 역의 목록을 조회할 수 있다.
+
+- 지하철 역을 추가 (add subway station)
+  - :exclamation: 예외#1 - 추가하려는 역이 다른 역과 중복된 이름을 가질 경우
+  - :exclamation: 예외#2 - 역의 이름이 2글자 미만일 경우(한글, 영어 모두)
+- 지하철 역을 삭제 (delete subway station)
+  - :exclamation: 예외#3 - 삭제하려는 역이 노선에 추가되어 있는 경우
+- 지하철 역 추가 가능 여부 검사 (check if the subway station can be added)
+  - :wrench: 해결(예외 #1,#2) - 추가하려는 역의 이름이 다른 역과 중복되는지, 2글자 미만인지를 검사
+- 지하철 역 삭제 가능 여부 검사 (check if the subway station can be deleted)
+  - :wrench: 해결(예외 #3) - 삭제할 수 없는 역을 삭제하려는 것인지를 검사
+
+<br/>
 
 ### 지하철 노선 관련 기능
-- 지하철 노선을 등록하고 삭제할 수 있다.
-- 중복된 지하철 노선 이름이 등록될 수 없다.
-- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
-- 지하철 노선의 목록을 조회할 수 있다.
+
+- 지하철 노선을 추가 (add subway line)
+  - :exclamation: 예외#4 - 추가하려는 노선이 다른 노선과 중복된 이름을 가질 경우
+  - :exclamation: 예외#5 - 추가할 때 설정하는 상행, 하행 종점역이 같을 경우
+- 지하철 노선을 삭제 (delete subway line)
+- 지하철 노선 추가 가능 여부 검사 (check if the subway line can be added)
+  - :wrench: 해결(예외 #4,#5) - 추가하려는 노선이 다른 노선과 중복된 이름을 가지는지, 해당 노선의 상행, 하행 종점역이 같은지를 검사
+- 지하철 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회 (get all subway stations in subway line)
+
+<br/>
+
+### 지하철 전체 정보 조회 기능
+
+- 전체 지하철 역의 목록 조회 (get all subway stations)
+- 전체 지하철 노선의 목록 조회 (get all subway lines)
+
+<br/>
 
 ### 지하철 구간 추가 기능
-- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
-- 하나의 역은 여러개의 노선에 추가될 수 있다.
-- 역과 역 사이에 새로운 역이 추가 될 수 있다.
-- 노선에서 갈래길은 생길 수 없다.
+
+- 지하철 노선에 구간을 추가, 즉 지하철 노선 안의 두 역 사이에 새로운 역 끼워넣기(insert subway station in subway line)
+  - :exclamation: 예외#6 - 끼워 넣으려는 역이 이미 노선 안에 있는 경우
+  - :exclamation: 예외#7 - 끼워넣으려는 역의 순서가 숫자로 표현되어 있지 않을 경우
+- 지하철 노선 구간 추가 가능성 여부 검사 (check if the subway station can be inserted)
+  - :wrench: 해결(예외 #6) - 끼워 넣으려는 역이 이미 노선 안에 있는지 검사
+  - :wrench: 해결(예외 #7) - 끼워 넣으려는 역의 순서값이 숫자인지 검사
+
+<br/>
 
 <img width="500" src="/images/section1.png">
 
+<br/>
+
 ### 지하철 구간 삭제 기능
-- 노선에 등록된 역을 제거할 수 있다.
-- 종점을 제거할 경우 다음 역이 종점이 된다.
-- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
 
-<img width="500" src="/images/section2.png">
+- 지하철 노선에 구간을 삭제, 즉 지하철 노선 안에서 특정 역을 빼기 (pull out subway station in subway line)
+  - :exclamation: 예외#8 - 노선에 포함된 역을 삭제하려는 시점에 그 노선에 포함된 역이 두개 이하일 경우
+- 지하철 노선 구간 삭제 가능성 여부 검사 (check if the subway station can be pulled out)
+  - :wrench: 해결(예외 #8) - 삭제 후 그 노선에 포함된 역이 두개 미만인지를 검사
+
+<br/>
+
+### 로컬 스토리지 기능
+
+- 전체 지하철 역, 노선 목록을 포함한 지하철 노선도 정보를 로컬 스토리지에 저장 (save subway map info to local storage)
+- 전체 지하철 역, 노선 목록을 포함한 지하철 노선도 정보를 로컬 스토리지에서 불러오기 (load subway map info from local storage)
+
+<br/>
+
+### 인터페이스 전환 기능
+
+- 버튼 클릭으로 인터페이스 전환 (convert interface with button click)
+
+### 인터페이스 데이터 동기화 기능
+
+- 인터페이스에 입력된 정보 저장하기 (save interface data)
+- 입력 정보를 불러오기 (load interface data)
+- 입력 정보를 인터페이스와 동기화 시키기(sync interface data to interface)
+
+### 역관리 인터페이스 기능
+
+- 역 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'add subway station' with alert message)
+  - 잘못된 입력이 들어왔을 때, 역을 추가할 수 없는 이유를 알려주어 재입력을 유도
+- 역 삭제 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'delete subway station' with alert message)
+  - 삭제할 수 없는 역을 삭제하려 할 때, 역을 삭제할 수 없는 이유를 알려주어 재입력을 유도
+- 역 추가 & 삭제 결과 보여주기(show result of add & delete subway station)
+
+<br/>
+
+### 노선관리 인터페이스 기능
 
-### 지하철 노선에 등록된 역 조회 기능
-- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
+- 노선 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'add subway line' with alert message)
+  - 잘못된 입력이 들어왔을 때, 노선을 추가할 수 없는 이유를 알려주어 재입력을 유도
+- 노선 추가 & 삭제 결과 보여주기 (show result of add & delete subway line)
 
 <br/>
 
+### 구간관리 인터페이스 기능
+
+- 구간 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'insert & pull out subway station in subway line' with alert message)
+  - 구간을 추가할 수 없는 이유를 알려주어 재입력을 유도
+  - 역을 삭제할 수 없는 이유를 알려주면서 노선 자체를 제거할 방법을 안내
+- 구간 추가 & 삭제 결과 보여주기 (show result of insert & pull out subway station)
+
+<br/>
+
+### 노선도 출력 인터페이스 기능
+
+- 전체 지하철 노선의 목록 조회 기능 호출 & 조회한 노선도 보여주기 (trigger 'get all subway lines' & show subway map)
+
+<br/>
+
+### 로컬스토리지 동기화
+
+- 닫기, 새로고침 전 로컬스토리지에 인터페이스 정보, 노선도 정보 저장하기 (save interface & subway Map data to local storage before exit or reload)
+- 접속 시 인터페이스 정보, 노선도 정보를 로컬스토리지로부터 받아 동기화 시키기 (synchronize interface & subway Map data from local storage when user access)
+
+<br/>
+
+<img width="500" src="/images/section2.png">
+
+<br/><br/>
+
 ## 💻 프로그램 실행 결과
 
+<br/>
+
 ### 역관리
+
 <img width="100%" src="/images/station_manager.gif">
 
-### 노선관리
-<img width="100%" src="/images/line_manager.gif">
+<br/>
 
-### 구간관리
-<img width="100%" src="/images/section_manager.gif">
+### 노선관리
 
-### 노선도 출력
-<img width="100%" src="/images/map_print_manager.gif">
+<img width="100%" src="/images/line_manager.gif">
 
+<br/>
 
-## ✅ 프로그래밍 요구사항
+### 구간관리
 
-### 메뉴 버튼
-- 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
-- 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
-- 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
-- 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
+<img width="100%" src="/images/section_manager.gif">
 
-### 지하철 역 관련 기능
-- 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
-- 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
-- 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
+<br/>
 
-### 지하철 노선 관련 기능
-- 지하철 노선의 이름을 입력하는 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/babel.config.js b/babel.config.js
new file mode 100644
index 000000000..14906bb61
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    '@babel/plugin-proposal-private-methods',
+    '@babel/plugin-proposal-class-properties',
+  ],
+};
diff --git a/index.css b/index.css
new file mode 100644
index 000000000..432019fe9
--- /dev/null
+++ b/index.css
@@ -0,0 +1,11 @@
+.content {
+  display: none;
+}
+
+#station-register {
+  display: none;
+}
+
+#registered-station-item-table {
+  display: none;
+}
diff --git a/index.html b/index.html
index fc99deac2..24eb6c15b 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,87 @@
   <head>
     <meta charset="UTF-8" />
     <title>지하철 노선도 관리</title>
+    <link rel="stylesheet" href="./index.css">
   </head>
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <h1>🚇 지하철 노선도 관리</h1>
+    </div>
+    <div>
+      <a href="#station-manager"><button id="station-manager-button">1.역 관리</button></a>
+      <a href="#line-manager"><button id="line-manager-button">2.노선 관리</button></a>
+      <a href="#section-manager"><button id="section-manager-button">3.구간 관리</button></a>
+      <a href="#map-print"><button id="map-print-manager-button">4.지하철 노선도 출력</button></a>
+    </div>
+    <div id="station-manager" class="content">
+      <div class="station-name">
+        <h3>역 이름</h3>
+        <input id="station-name-input" type="text" placeholder="역 이름을 입력해주세요." />
+        <button id="station-add-button">역 추가</button>
+      </div>
+      <div class="station-list">
+        <h2><span>&#128649</span>지하철 역 목록</h2>
+        <table class="station-item-table">
+          <thead>
+            <th>역 이름</th>
+            <th>설정</th>
+          </thead>
+          <tbody id="result-station-items">
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div id="line-manager" class="content">
+      <div class="line-name">
+        <h3>노선 이름</h3>
+        <input id="line-name-input" type="text" placeholder="노선 이름을 입력해주세요" />
+      </div>
+      <div class="terminating-lines">
+        <span>상행 종점</span>
+        <select id="line-start-station-selector"></select>
+        <span>하행 종점</span>
+        <select id="line-end-station-selector"></select>
+      </div>
+      <button id="line-add-button">노선 추가</button>
+      <div class="lines-list">
+        <h2><span>&#128649</span>지하철 노선 목록</h2>
+        <table class="line-item-table">
+          <thead>
+            <th>노선 이름</th>
+            <th>상행 종점역</th>
+            <th>하행 종점역</th>
+            <th>설정</th>
+          </thead>
+          <tbody id="result-line-items">
+
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div id="section-manager" class="content">
+      <h2>구간을 수정할 노선을 선택해주세요</h2>
+      <div id="section-line-menu-button-list">
+      </div>
+      <div id="station-register">
+        <h2><span id="section-line-name">1호선</span> 관리</h2>
+        <h3>구간 등록</h3>
+        <select id="section-station-selector"></select>
+        <input id="section-order-input" type="text" placeholder="순서" />
+        <button id="section-add-button">등록</button>
+      </div>
+      <table id="registered-station-item-table">
+        <thead>
+          <th>순서</th>
+          <th>이름</th>
+          <th>설정</th>
+        </thead>
+        <tbody id="registered-station-items">
+          
+        </tbody>
+      </table>
+    </div>
+    <div id="map-print" class="content">
+      
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/classes/classes.test.js b/src/classes/classes.test.js
new file mode 100644
index 000000000..eed3f5944
--- /dev/null
+++ b/src/classes/classes.test.js
@@ -0,0 +1,81 @@
+import SubWayStation from './subwayStation.js';
+import SubwayLine from './subwayLine.js';
+import SubwayMap from './subwayMap.js';
+
+describe('SubWayStation', () => {
+  const station1Name = 'station1';
+  const station2Name = 'station2';
+  const station3Name = 'station3';
+  const station1 = new SubWayStation();
+  const station2 = new SubWayStation();
+  const station3 = new SubWayStation();
+  const subwayMap = new SubwayMap();
+  subwayMap.addStation(station1, station1Name);
+  subwayMap.addStation(station2, station2Name);
+  subwayMap.addStation(station3, station3Name);
+  it('add subway station', () => {
+    expect(subwayMap.allStations).toHaveProperty(station1Name);
+    expect(subwayMap.allStations).toHaveProperty(station2Name);
+    expect(subwayMap.allStations).toHaveProperty(station3Name);
+  });
+  it('delete subway station', () => {
+    subwayMap.deleteStationByName(station3Name);
+    expect(subwayMap.allStations).toHaveProperty(station1Name);
+    expect(subwayMap.allStations).toHaveProperty(station2Name);
+    expect(subwayMap.allStations).not.toHaveProperty(station3Name);
+  });
+});
+
+describe('SubwayLine', () => {
+  const station1Name = 'station1';
+  const station2Name = 'station2';
+  const station3Name = 'station3';
+  const station1 = new SubWayStation();
+  const station2 = new SubWayStation();
+  const station3 = new SubWayStation();
+  const subwayMap = new SubwayMap();
+  subwayMap.addStation(station1, station1Name);
+  subwayMap.addStation(station2, station2Name);
+  subwayMap.addStation(station3, station3Name);
+  const line1 = new SubwayLine(station1Name, station2Name);
+  const line2 = new SubwayLine(station2Name, station3Name);
+  const line1Name = 'line1';
+  const line2Name = 'line2';
+  subwayMap.addLine(line1, line1Name);
+  subwayMap.addLine(line2, line2Name);
+  it('add subway line', () => {
+    expect(subwayMap.allLines).toHaveProperty(line1Name);
+    expect(subwayMap.allLines).toHaveProperty(line2Name);
+  });
+  it('delete subway line', () => {
+    subwayMap.deleteLineByName(line2Name);
+    expect(subwayMap.allLines).toHaveProperty(line1Name);
+    expect(subwayMap.allLines).not.toHaveProperty(line2Name);
+  });
+  it('add station to line', () => {
+    line1.addStationToLineByName(station3Name);
+    expect(line1.allStationsInLine).toContain(station3Name);
+  });
+});
+
+describe('SubwaySection', () => {
+  const station1Name = 'station1';
+  const station2Name = 'station2';
+  const station3Name = 'station3';
+  const station1 = new SubWayStation();
+  const station2 = new SubWayStation();
+  const station3 = new SubWayStation();
+  const subwayMap = new SubwayMap();
+  subwayMap.addStation(station1, station1Name);
+  subwayMap.addStation(station2, station2Name);
+  subwayMap.addStation(station3, station3Name);
+  const line1 = new SubwayLine(station1Name, station2Name);
+  it('insert subway station in subway line', () => {
+    line1.insertStationToLineByNameAndIndex(station3Name, 1);
+    expect(line1.allStationsInLine).toContain(station3Name);
+  });
+  it('pull out subway station in subway line', () => {
+    line1.pullOutStationFromLineByName(station3Name);
+    expect(line1.allStationsInLine).not.toContain(station3Name);
+  });
+});
diff --git a/src/classes/subwayLine.js b/src/classes/subwayLine.js
new file mode 100644
index 000000000..ba031aedb
--- /dev/null
+++ b/src/classes/subwayLine.js
@@ -0,0 +1,45 @@
+import { SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT } from '../constants/configuration.js';
+
+export default class SubwayLine {
+  allStationsInLine = [];
+
+  static checkIsStationsSame(startStationName, endStationName) {
+    return startStationName === endStationName;
+  }
+
+  static checkIsIndexNumberCorrect(index) {
+    return typeof index === 'number' && Number.isNaN(index) === false;
+  }
+
+  constructor(startStationName, endStationName) {
+    this.allStationsInLine.push(startStationName);
+    this.allStationsInLine.push(endStationName);
+  }
+
+  addStationToLineByName(stationName) {
+    if (stationName in this.allStationsInLine === false) {
+      this.allStationsInLine.push(stationName);
+    }
+  }
+
+  insertStationToLineByNameAndIndex({ stationName, index }) {
+    if (stationName in this.allStationsInLine === false) {
+      this.allStationsInLine.splice(index, 0, stationName);
+    }
+  }
+
+  pullOutStationFromLineByIndex(stationIndex) {
+    return this.allStationsInLine.splice(stationIndex, 1);
+  }
+
+  checkIsStationNameExistInLine(stationName) {
+    return this.allStationsInLine.includes(stationName);
+  }
+
+  checkIsAllStationsInLineLengthSameAsLimit() {
+    return (
+      this.allStationsInLine.length <=
+      SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT
+    );
+  }
+}
diff --git a/src/classes/subwayMap.js b/src/classes/subwayMap.js
new file mode 100644
index 000000000..d0e8d2911
--- /dev/null
+++ b/src/classes/subwayMap.js
@@ -0,0 +1,44 @@
+export default class SubwayMap {
+  #allStations = {};
+  #allLines = {};
+
+  get allStations() {
+    return this.#allStations;
+  }
+
+  get allLines() {
+    return this.#allLines;
+  }
+
+  addStation(station, stationName) {
+    if (stationName in this.#allStations === false) {
+      this.#allStations[stationName] = station;
+    }
+  }
+
+  checkIsStationNameExist(stationName) {
+    return stationName in this.#allStations;
+  }
+
+  deleteStationByName(stationName) {
+    if (stationName in this.#allStations) {
+      delete this.#allStations[stationName];
+    }
+  }
+
+  addLine(line, lineName) {
+    if (lineName in this.#allLines === false) {
+      this.#allLines[lineName] = line;
+    }
+  }
+
+  checkIsLineNameExist(lineName) {
+    return lineName in this.#allLines;
+  }
+
+  deleteLineByName(lineName) {
+    if (lineName in this.#allLines) {
+      delete this.#allLines[lineName];
+    }
+  }
+}
diff --git a/src/classes/subwayStation.js b/src/classes/subwayStation.js
new file mode 100644
index 000000000..43399e306
--- /dev/null
+++ b/src/classes/subwayStation.js
@@ -0,0 +1,24 @@
+import { SUBWAY_STATION_NAME_LENGTH_LIMIT } from '../constants/configuration.js';
+
+export default class SubwayStation {
+  static checkIsStationNameShort(stationName) {
+    return stationName.length < SUBWAY_STATION_NAME_LENGTH_LIMIT;
+  }
+
+  static checkIsStationBelongToLine(station) {
+    return station.belongingLineNames.length > 0;
+  }
+
+  constructor() {
+    this.belongingLineNames = [];
+  }
+
+  addBeloningLineByLineName(lineName) {
+    this.belongingLineNames.push(lineName);
+  }
+
+  deleteBeloningLineByLineName(lineName) {
+    const deleteLineIndex = this.belongingLineNames.indexOf(lineName);
+    this.belongingLineNames.splice(deleteLineIndex, 1);
+  }
+}
diff --git a/src/constants/configuration.js b/src/constants/configuration.js
new file mode 100644
index 000000000..966ae8585
--- /dev/null
+++ b/src/constants/configuration.js
@@ -0,0 +1,29 @@
+export const SUBWAY_STATION_NAME_LENGTH_LIMIT = 2;
+export const SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT = 2;
+export const SUBWAY_MAP_ITEM_NAME = 'Subway-Map';
+export const INTERFACE_DATA_ITEM_NAME = 'Data';
+export const SHORT_STATION_NAME_ALERT_MESSAGE =
+  '역의 이름이 너무 짧습니다. 2글자 이상의 이름을 입력해주세요';
+export const SAME_STATION_NAME_EXIST_MESSAGE =
+  '이미 동일한 이름의 역이 등록되어 있습니다. 다른 이름을 입력해주세요';
+export const STATION_REGISTERED_IN_LINE_MESSAGE =
+  '이 역은 노선의 구간으로 등록되어 있습니다. 삭제를 원하신다면 해당 노선 구간에서 역을 빼주세요.';
+export const SAME_LINE_NAME_EXIST_MESSAGE =
+  '이미 동일한 이름의 노선이 등록되어 있습니다. 다른 이름을 입력해주세요';
+export const END_AND_START_STATION_NAME_SAME_MESSAGE =
+  '상행 종점역과 하행 종점역이 같습니다. 서로 다른 종점역들을 선택해주세요.';
+export const SAME_STATION_REGISTER_TRY_MESSAGE =
+  '이 역은 이미 노선의 이 노선에 등록되어 있습니다. 다른 역을 선택해주세요';
+export const LESS_THAN_DELETE_LENGTH_LIMIT_MESSAGE = `이 역을 빼면 노선의 개수가 ${SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT}개 이하가 되므로 뺄 수 없습니다`;
+export const INDEX_IS_NOT_NUMBER_MESSAGE = '순서로 넣은 값이 숫자로 보이지 않습니다. 다시 입력해주세요'
+
+export default {
+  SUBWAY_STATION_NAME_LENGTH_LIMIT,
+  SUBWAY_STATION_IN_LINE_DELETE_LENGTH_LIMIT,
+  SUBWAY_MAP_ITEM_NAME,
+  SAME_LINE_NAME_EXIST_MESSAGE,
+  END_AND_START_STATION_NAME_SAME_MESSAGE,
+  SAME_STATION_REGISTER_TRY_MESSAGE,
+  LESS_THAN_DELETE_LENGTH_LIMIT_MESSAGE,
+  INDEX_IS_NOT_NUMBER_MESSAGE
+};
diff --git a/src/data/data.js b/src/data/data.js
new file mode 100644
index 000000000..dfaef22d0
--- /dev/null
+++ b/src/data/data.js
@@ -0,0 +1,69 @@
+import { setItemWithKey, getItemByKey } from '../utils/localStorage.js';
+import { stationNameInputElement } from '../elements/stationManager.js';
+import {
+  lineEndStationSelectorElement,
+  lineStartStationSelectorElement,
+  lineNameInputElement,
+} from '../elements/lineManager.js';
+import {
+  sectionOrderInputElement,
+  sectionStationSelectorElement,
+  sectionLineNameElement,
+} from '../elements/sectionManager.js';
+import { INTERFACE_DATA_ITEM_NAME } from '../constants/configuration.js';
+
+const data = {
+  stationNameInputValue: '',
+  lineNameInputValue: '',
+  lineStartStationSelectorValue: '',
+  lineEndStationSelectorValue: '',
+  sectionLineNameValue: '',
+  sectionStationSelectorValue: '',
+  sectionOrderInputNumberValue: '',
+};
+
+export const syncDataToLocalStorage = () => {
+  setItemWithKey(data, INTERFACE_DATA_ITEM_NAME);
+};
+
+export const loadDataToLocalStorage = () => {
+  const loadedData = getItemByKey(INTERFACE_DATA_ITEM_NAME);
+  if (loadedData) {
+    data.stationNameInputValue = loadedData.stationNameInputValue;
+    data.lineNameInputValue = loadedData.lineNameInputValue;
+    data.upTerminatingStationNameValue =
+      loadedData.upTerminatingStationNameValue;
+    data.downTerminatingStationNameValue =
+      loadedData.downTerminatingStationNameValue;
+    data.sectionLineValue = loadedData.sectionLineValue;
+    data.sectionStationSelectorValue = loadedData.sectionStationSelectorValue;
+    data.sectionOrderInputNumberValue = loadedData.sectionOrderInputNumberValue;
+  }
+};
+
+export const syncDataFromAllElements = () => {
+  data.stationNameInputValue = stationNameInputElement.value;
+  data.lineNameInputValue = lineNameInputElement.value;
+  data.lineStartStationSelectorValue = lineStartStationSelectorElement.value;
+  data.lineEndStationSelectorValue = lineEndStationSelectorElement.value;
+  data.sectionOrderInputNumberValue = sectionOrderInputElement.value;
+  data.sectionLineNameValue = sectionLineNameElement.value;
+  data.sectionStationSelectorValue = sectionStationSelectorElement.value;
+};
+
+export const syncDataToAllElements = () => {
+  stationNameInputElement.value = data.stationNameInputValue;
+  lineNameInputElement.value = data.lineNameInputValue;
+  lineStartStationSelectorElement.value = data.lineStartStationSelectorValue;
+  lineEndStationSelectorElement.value = data.lineEndStationSelectorValue;
+  sectionOrderInputElement.value = data.sectionOrderInputNumberValue;
+  sectionLineNameElement.value = data.sectionLineNameValue;
+  sectionStationSelectorElement.value = data.sectionStationSelectorValue;
+};
+
+export default {
+  syncDataToLocalStorage,
+  loadDataToLocalStorage,
+  syncDataFromAllElements,
+  syncDataToAllElements,
+};
diff --git a/src/elements/contentConvertButtons.js b/src/elements/contentConvertButtons.js
new file mode 100644
index 000000000..972fa947f
--- /dev/null
+++ b/src/elements/contentConvertButtons.js
@@ -0,0 +1,17 @@
+export const lineManagerButtonElement = document.getElementById(
+  'line-manager-button'
+);
+
+export const sectionManagerButtonElement = document.getElementById(
+  'section-manager-button'
+);
+
+export const mapPrintManagerButtonElement = document.getElementById(
+  'map-print-manager-button'
+);
+
+export default {
+  lineManagerButtonElement,
+  sectionManagerButtonElement,
+  mapPrintManagerButtonElement,
+};
diff --git a/src/elements/contents.js b/src/elements/contents.js
new file mode 100644
index 000000000..c7f394331
--- /dev/null
+++ b/src/elements/contents.js
@@ -0,0 +1,5 @@
+export const contentElements = document.querySelectorAll('.content');
+
+export default {
+  contentElements,
+};
diff --git a/src/elements/lineManager.js b/src/elements/lineManager.js
new file mode 100644
index 000000000..d2d1a7311
--- /dev/null
+++ b/src/elements/lineManager.js
@@ -0,0 +1,23 @@
+export const lineNameInputElement = document.getElementById('line-name-input');
+export const lineStartStationSelectorElement = document.getElementById(
+  'line-start-station-selector'
+);
+export const lineEndStationSelectorElement = document.getElementById(
+  'line-end-station-selector'
+);
+export const lineAddButtonElement = document.getElementById('line-add-button');
+export const lineDeleteButtonElements = document.querySelectorAll(
+  '.line-delete-button'
+);
+export const resultLineItemsElement = document.getElementById(
+  'result-line-items'
+);
+
+export default {
+  lineNameInputElement,
+  lineStartStationSelectorElement,
+  lineEndStationSelectorElement,
+  lineAddButtonElement,
+  lineDeleteButtonElements,
+  resultLineItemsElement,
+};
diff --git a/src/elements/mapPrint.js b/src/elements/mapPrint.js
new file mode 100644
index 000000000..4931c5570
--- /dev/null
+++ b/src/elements/mapPrint.js
@@ -0,0 +1,5 @@
+export const mapPrintWrapperElement = document.getElementById('map-print');
+
+export default {
+  mapPrintWrapperElement
+}
\ No newline at end of file
diff --git a/src/elements/sectionManager.js b/src/elements/sectionManager.js
new file mode 100644
index 000000000..2c78d13cd
--- /dev/null
+++ b/src/elements/sectionManager.js
@@ -0,0 +1,39 @@
+export const sectionLineMenuButtonListElement = document.getElementById(
+  'section-line-menu-button-list'
+);
+export const sectionLineNameElement = document.getElementById(
+  'section-line-name'
+);
+export const stationRegisterWrapperElement = document.getElementById(
+  'station-register'
+);
+export const registeredStationItemTableElement = document.getElementById(
+  'registered-station-item-table'
+);
+export const registeredStationItemsElement = document.getElementById(
+  'registered-station-items'
+);
+export const sectionStationSelectorElement = document.getElementById(
+  'section-station-selector'
+);
+export const sectionOrderInputElement = document.getElementById(
+  'section-order-input'
+);
+export const sectionAddButtonElement = document.getElementById(
+  'section-add-button'
+);
+export const sectionDeleteButtonElements = document.querySelectorAll(
+  '.section-delete-button'
+);
+
+export default {
+  sectionLineMenuButtonListElement,
+  sectionLineNameElement,
+  sectionStationSelectorElement,
+  registeredStationItemTableElement,
+  registeredStationItemsElement,
+  sectionOrderInputElement,
+  sectionAddButtonElement,
+  sectionDeleteButtonElements,
+  stationRegisterWrapperElement,
+};
diff --git a/src/elements/stationManager.js b/src/elements/stationManager.js
new file mode 100644
index 000000000..4e504dcd8
--- /dev/null
+++ b/src/elements/stationManager.js
@@ -0,0 +1,16 @@
+export const stationNameInputElement = document.getElementById(
+  'station-name-input'
+);
+export const stationAddButtonElement = document.getElementById(
+  'station-add-button'
+);
+export const stationDeleteButtonsElement = document.querySelectorAll(
+  '.station-delete-button'
+);
+export const resultStationItemsElement = document.getElementById('result-station-items');
+
+export default {
+  stationNameInputElement,
+  stationAddButtonElement,
+  stationDeleteButtonsElement,
+};
diff --git a/src/handlers/lineManager.js b/src/handlers/lineManager.js
new file mode 100644
index 000000000..ca76a9466
--- /dev/null
+++ b/src/handlers/lineManager.js
@@ -0,0 +1,103 @@
+import {
+  lineNameInputElement,
+  lineStartStationSelectorElement,
+  lineEndStationSelectorElement,
+  resultLineItemsElement,
+} from '../elements/lineManager.js';
+import { subwayMap } from '../store/store.js';
+import SubwayLine from '../classes/subwayLine.js';
+import {
+  SAME_LINE_NAME_EXIST_MESSAGE,
+  END_AND_START_STATION_NAME_SAME_MESSAGE,
+} from '../constants/configuration.js';
+import { getTableRowsTemplate } from '../templates/table.js';
+import { getSelectorOptionsTemplate } from '../templates/selector.js';
+
+const getAddLineAlertMessage = ({
+  lineName,
+  startStationName,
+  endStationName,
+}) => {
+  let alertMessage = '';
+  if (subwayMap.checkIsLineNameExist(lineName)) {
+    alertMessage += `${SAME_LINE_NAME_EXIST_MESSAGE}\n`;
+  }
+  if (SubwayLine.checkIsStationsSame(startStationName, endStationName)) {
+    alertMessage += END_AND_START_STATION_NAME_SAME_MESSAGE;
+  }
+
+  return alertMessage;
+};
+
+export const showLineManagerResultTable = () => {
+  const lineTableRows = [];
+  const allLineNames = Object.keys(subwayMap.allLines);
+  allLineNames.forEach((lineName) => {
+    const line = subwayMap.allLines[lineName];
+    const lineStartStation = line.allStationsInLine[0];
+    const lineEndStationIndex = line.allStationsInLine.length - 1;
+    const lineEndStation = line.allStationsInLine[lineEndStationIndex];
+    console.log(lineStartStation, lineEndStation);
+    const lineTableRow = [lineName, lineStartStation, lineEndStation];
+    lineTableRows.push(lineTableRow);
+  });
+  const deleteTargetCellIndex = 0;
+  const deleteButtonClass = 'line-delete-button';
+  resultLineItemsElement.innerHTML = getTableRowsTemplate({
+    rows: lineTableRows,
+    deleteTargetCellIndex,
+    deleteButtonClass,
+  });
+};
+
+export const onConverToLineContent = () => {
+  const allStationNames = Object.keys(subwayMap.allStations);
+  lineStartStationSelectorElement.innerHTML = getSelectorOptionsTemplate(
+    allStationNames
+  );
+  lineEndStationSelectorElement.innerHTML = getSelectorOptionsTemplate(
+    allStationNames
+  );
+};
+
+export const onAddLine = () => {
+  const lineName = lineNameInputElement.value;
+  const startStationName = lineStartStationSelectorElement.value;
+  const endStationName = lineEndStationSelectorElement.value;
+  subwayMap.allStations[startStationName].addBeloningLineByLineName(lineName);
+  subwayMap.allStations[endStationName].addBeloningLineByLineName(lineName);
+  const line = new SubwayLine(startStationName, endStationName);
+  const alertMessage = getAddLineAlertMessage({
+    lineName,
+    startStationName,
+    endStationName,
+  });
+  if (alertMessage === '') {
+    subwayMap.addLine(line, lineName);
+    showLineManagerResultTable();
+  } else {
+    alert(alertMessage);
+  }
+};
+
+export const onDeleteLine = (event) => {
+  const targetElement = event.target;
+  if (targetElement.className !== 'line-delete-button') {
+    return;
+  }
+  const deleteTargetName = targetElement.dataset.deleteTarget;
+  const targetLine = subwayMap.allLines[deleteTargetName];
+  targetLine.allStationsInLine.forEach((stationName) => {
+    const station = subwayMap.allStations[stationName];
+    station.deleteBeloningLineByLineName(deleteTargetName);
+  });
+  subwayMap.deleteLineByName(deleteTargetName);
+  showLineManagerResultTable();
+};
+
+export default {
+  onAddLine,
+  onConverToLineContent,
+  onDeleteLine,
+  showLineManagerResultTable,
+};
diff --git a/src/handlers/mapPrint.js b/src/handlers/mapPrint.js
new file mode 100644
index 000000000..6a9583516
--- /dev/null
+++ b/src/handlers/mapPrint.js
@@ -0,0 +1,11 @@
+import { mapPrintWrapperElement } from '../elements/mapPrint.js';
+import { getSubwayMapTemplate } from '../templates/list.js';
+import { subwayMap } from '../store/store.js';
+
+export const printMap = () => {
+  mapPrintWrapperElement.innerHTML = getSubwayMapTemplate(subwayMap.allLines);
+};
+
+export default {
+  printMap,
+};
diff --git a/src/handlers/sectionManager.js b/src/handlers/sectionManager.js
new file mode 100644
index 000000000..2fae8fce9
--- /dev/null
+++ b/src/handlers/sectionManager.js
@@ -0,0 +1,127 @@
+import {
+  sectionLineMenuButtonListElement,
+  sectionStationSelectorElement,
+  sectionLineNameElement,
+  stationRegisterWrapperElement,
+  registeredStationItemTableElement,
+  registeredStationItemsElement,
+  sectionOrderInputElement,
+} from '../elements/sectionManager.js';
+import { subwayMap } from '../store/store.js';
+import {
+  SAME_STATION_REGISTER_TRY_MESSAGE,
+  LESS_THAN_DELETE_LENGTH_LIMIT_MESSAGE,
+  INDEX_IS_NOT_NUMBER_MESSAGE,
+} from '../constants/configuration.js';
+import { getTableRowsTemplate } from '../templates/table.js';
+import { getSelectorOptionsTemplate } from '../templates/selector.js';
+import { getSectionLineMenuButtonsTemplate } from '../templates/button.js';
+import SubwayLine from '../classes/subwayLine.js';
+
+const getInsertStationAlertMessage = ({ line, stationName, index }) => {
+  let alertMessage = '';
+  if (line.checkIsStationNameExistInLine(stationName)) {
+    alertMessage += `${SAME_STATION_REGISTER_TRY_MESSAGE}\n`;
+  }
+  if (SubwayLine.checkIsIndexNumberCorrect(index) === false) {
+    alertMessage += INDEX_IS_NOT_NUMBER_MESSAGE;
+  }
+
+  return alertMessage;
+};
+
+const getPullOutStationAlertMessage = (line) => {
+  let alertMessage = '';
+  if (line.checkIsAllStationsInLineLengthSameAsLimit()) {
+    alertMessage += LESS_THAN_DELETE_LENGTH_LIMIT_MESSAGE;
+  }
+
+  return alertMessage;
+};
+
+export const showSectionManagerResultTable = () => {
+  const lineName = sectionLineNameElement.innerText;
+  const line = subwayMap.allLines[lineName];
+  if (line) {
+    const stationInLineRows = [];
+    line.allStationsInLine.forEach((stationName, index) => {
+      stationInLineRows.push([index, stationName]);
+    });
+    registeredStationItemsElement.innerHTML = getTableRowsTemplate({
+      rows: stationInLineRows,
+      deleteTargetCellIndex: 0,
+      deleteButtonClass: 'section-delete-button',
+      deleteButtonText: '노선에서 제거',
+    });
+  }
+};
+
+export const onClickSectionLineButton = (event) => {
+  const targetElement = event.target;
+  if (targetElement.className === 'section-line-menu-button') {
+    const lineName = targetElement.innerText;
+    sectionLineNameElement.innerText = lineName;
+    stationRegisterWrapperElement.setAttribute('style', 'display: block;');
+    registeredStationItemTableElement.setAttribute('style', 'display: block;');
+    showSectionManagerResultTable();
+  }
+};
+
+export const onConverToSectionContent = () => {
+  const allLineNames = Object.keys(subwayMap.allLines);
+  const allStationNames = Object.keys(subwayMap.allStations);
+  sectionLineMenuButtonListElement.innerHTML = getSectionLineMenuButtonsTemplate(
+    allLineNames
+  );
+  sectionStationSelectorElement.innerHTML = getSelectorOptionsTemplate(
+    allStationNames
+  );
+};
+
+export const onInsertStation = () => {
+  const lineName = sectionLineNameElement.innerText;
+  const stationName = sectionStationSelectorElement.value;
+  const index = Number(sectionOrderInputElement.value);
+  const line = subwayMap.allLines[lineName];
+  const alertMessage = getInsertStationAlertMessage({
+    line,
+    stationName,
+    index,
+  });
+  if (alertMessage === '') {
+    const insertingStation = subwayMap.allStations[stationName];
+    insertingStation.addBeloningLineByLineName(lineName);
+    line.insertStationToLineByNameAndIndex({ stationName, index });
+    showSectionManagerResultTable(line.allStationsInLine);
+  } else {
+    alert(alertMessage);
+  }
+};
+
+export const onPullOutStation = (event) => {
+  const targetElement = event.target;
+  if (targetElement.className !== 'section-delete-button') {
+    return;
+  }
+  const lineName = sectionLineNameElement.innerText;
+  const targetIndex = targetElement.dataset.deleteTarget;
+  const line = subwayMap.allLines[lineName];
+  const alertMessage = getPullOutStationAlertMessage(line);
+  if (alertMessage === '') {
+    const pulledOutStationName = line.pullOutStationFromLineByIndex(
+      targetIndex
+    );
+    const pulledOutStation = subwayMap.allStations[pulledOutStationName];
+    pulledOutStation.deleteBeloningLineByLineName(lineName);
+    showSectionManagerResultTable(line.allStationsInLine);
+  } else {
+    alert(alertMessage);
+  }
+};
+
+export default {
+  onInsertStation,
+  onConverToSectionContent,
+  onClickSectionLineButton,
+  showSectionManagerResultTable,
+};
diff --git a/src/handlers/stationManager.js b/src/handlers/stationManager.js
new file mode 100644
index 000000000..5878475e7
--- /dev/null
+++ b/src/handlers/stationManager.js
@@ -0,0 +1,79 @@
+import {
+  stationNameInputElement,
+  resultStationItemsElement,
+} from '../elements/stationManager.js';
+import SubwayStation from '../classes/subwayStation.js';
+import { subwayMap } from '../store/store.js';
+import {
+  SAME_STATION_NAME_EXIST_MESSAGE,
+  SHORT_STATION_NAME_ALERT_MESSAGE,
+  STATION_REGISTERED_IN_LINE_MESSAGE,
+} from '../constants/configuration.js';
+import { getTableRowsTemplate } from '../templates/table.js';
+
+const getAddStationAlertMessage = (stationName) => {
+  let alertMessage = '';
+  if (subwayMap.checkIsStationNameExist(stationName)) {
+    alertMessage += `${SAME_STATION_NAME_EXIST_MESSAGE}\n`;
+  }
+  if (SubwayStation.checkIsStationNameShort(stationName)) {
+    alertMessage += SHORT_STATION_NAME_ALERT_MESSAGE;
+  }
+
+  return alertMessage;
+};
+
+const getDeleteStationAlertMessage = (stationName) => {
+  let alertMessage = '';
+  const station = subwayMap.allStations[stationName];
+  if (SubwayStation.checkIsStationBelongToLine(station)) {
+    alertMessage += STATION_REGISTERED_IN_LINE_MESSAGE;
+  }
+
+  return alertMessage;
+};
+
+export const showStationManagerResultTable = () => {
+  const registerdStationNames = Object.keys(subwayMap.allStations);
+  const resultRows = registerdStationNames.map((stationName) => [stationName]);
+  const deleteTargetCellIndex = 0;
+  const deleteButtonClass = 'station-delete-button';
+  resultStationItemsElement.innerHTML = getTableRowsTemplate({
+    rows: resultRows,
+    deleteTargetCellIndex,
+    deleteButtonClass,
+  });
+};
+
+export const onAddStation = () => {
+  const stationName = stationNameInputElement.value;
+  const alertMessage = getAddStationAlertMessage(stationName);
+  if (alertMessage === '') {
+    const station = new SubwayStation();
+    subwayMap.addStation(station, stationName);
+    showStationManagerResultTable();
+    stationNameInputElement.value = '';
+  } else {
+    alert(alertMessage);
+  }
+};
+
+export const onDeleteStation = (event) => {
+  const targetElement = event.target;
+  if (targetElement.className !== 'station-delete-button') {
+    return;
+  }
+  const deleteTargetName = targetElement.dataset.deleteTarget;
+  const alertMessage = getDeleteStationAlertMessage(deleteTargetName);
+  if (alertMessage === '') {
+    subwayMap.deleteStationByName(deleteTargetName);
+    showStationManagerResultTable();
+  } else {
+    alert(alertMessage);
+  }
+};
+
+export default {
+  onAddStation,
+  showStationManagerResultTable
+};
diff --git a/src/index.js b/src/index.js
index e69de29bb..5e62e7185 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,19 @@
+import { setRouterWithElements } from './routes/routes.js';
+import { contentElements } from './elements/contents.js';
+import {
+  addLineMangerEventListeners,
+  addMapPrintEventListeners,
+  addSectionManagerEventListeners,
+  addStationManagerEventListeners,
+  addSyncDataBeforeOnloadEventListener,
+  addSyncDataBeforeUnloadEventListener,
+} from './listeners/listeners.js';
+
+setRouterWithElements(contentElements);
+
+addLineMangerEventListeners();
+addMapPrintEventListeners();
+addSectionManagerEventListeners();
+addStationManagerEventListeners();
+addSyncDataBeforeOnloadEventListener(contentElements, contentElements[0]);
+addSyncDataBeforeUnloadEventListener();
diff --git a/src/listeners/listeners.js b/src/listeners/listeners.js
new file mode 100644
index 000000000..c1e3f2d51
--- /dev/null
+++ b/src/listeners/listeners.js
@@ -0,0 +1,112 @@
+import {
+  stationAddButtonElement,
+  resultStationItemsElement,
+} from '../elements/stationManager.js';
+import {
+  lineAddButtonElement,
+  resultLineItemsElement,
+} from '../elements/lineManager.js';
+import {
+  sectionLineMenuButtonListElement,
+  sectionAddButtonElement,
+  registeredStationItemsElement,
+} from '../elements/sectionManager.js';
+import {
+  lineManagerButtonElement,
+  sectionManagerButtonElement,
+  mapPrintManagerButtonElement,
+} from '../elements/contentConvertButtons.js';
+
+import {
+  onAddStation,
+  onDeleteStation,
+  showStationManagerResultTable,
+} from '../handlers/stationManager.js';
+import {
+  onAddLine,
+  onConverToLineContent,
+  onDeleteLine,
+  showLineManagerResultTable,
+} from '../handlers/lineManager.js';
+import {
+  onConverToSectionContent,
+  onClickSectionLineButton,
+  onInsertStation,
+  onPullOutStation,
+  showSectionManagerResultTable,
+} from '../handlers/sectionManager.js';
+import { printMap } from '../handlers/mapPrint.js';
+import { convertContent } from '../routes/routes.js';
+import {
+  loadDataToLocalStorage,
+  syncDataToAllElements,
+  syncDataToLocalStorage,
+  syncDataFromAllElements,
+} from '../data/data.js';
+import {
+  syncSubwayMapFromLocalStorage,
+  syncSubwayMapToLocalStorage,
+} from '../store/store.js';
+
+export const addStationManagerEventListeners = () => {
+  stationAddButtonElement.addEventListener('click', onAddStation);
+  resultStationItemsElement.addEventListener('click', onDeleteStation);
+};
+
+export const addLineMangerEventListeners = () => {
+  lineAddButtonElement.addEventListener('click', onAddLine);
+  lineManagerButtonElement.addEventListener('click', onConverToLineContent);
+  resultLineItemsElement.addEventListener('click', onDeleteLine);
+};
+
+export const addSectionManagerEventListeners = () => {
+  sectionManagerButtonElement.addEventListener(
+    'click',
+    onConverToSectionContent
+  );
+  sectionLineMenuButtonListElement.addEventListener(
+    'click',
+    onClickSectionLineButton
+  );
+  sectionAddButtonElement.addEventListener('click', onInsertStation);
+  registeredStationItemsElement.addEventListener('click', onPullOutStation);
+};
+
+export const addMapPrintEventListeners = () => {
+  mapPrintManagerButtonElement.addEventListener('click', printMap);
+};
+
+export const addSyncDataBeforeUnloadEventListener = () => {
+  window.onbeforeunload = () => {
+    syncDataFromAllElements();
+    syncDataToLocalStorage();
+    syncSubwayMapToLocalStorage();
+  };
+};
+
+export const addSyncDataBeforeOnloadEventListener = (
+  contentElements,
+  defaultContentElement
+) => {
+  window.onload = () => {
+    const contentName = window.location.hash.substr(1);
+    if (contentName) {
+      convertContent(contentElements, contentName);
+    } else {
+      convertContent(contentElements, defaultContentElement.id);
+    }
+    loadDataToLocalStorage();
+    syncDataToAllElements();
+    syncSubwayMapFromLocalStorage();
+    showStationManagerResultTable();
+    showLineManagerResultTable();
+    showSectionManagerResultTable();
+  };
+};
+
+export default {
+  addStationManagerEventListeners,
+  addLineMangerEventListeners,
+  addSectionManagerEventListeners,
+  addMapPrintEventListeners,
+};
diff --git a/src/routes/routes.js b/src/routes/routes.js
new file mode 100644
index 000000000..342c31867
--- /dev/null
+++ b/src/routes/routes.js
@@ -0,0 +1,23 @@
+export const convertContent = (contentElements, contentName) => {
+  contentElements.forEach((element) => {
+    if (element.id === contentName) {
+      element.setAttribute('style', 'display: block;');
+    } else {
+      element.setAttribute('style', 'display: none;');
+    }
+  });
+};
+
+export const setRouterWithElements = (
+  contentElements,
+) => {
+  window.onhashchange = () => {
+    const contentName = window.location.hash.substr(1);
+    convertContent(contentElements, contentName);
+  };
+};
+
+export default {
+  setRouterWithElements,
+  convertContent
+};
diff --git a/src/store/store.js b/src/store/store.js
new file mode 100644
index 000000000..37271c88e
--- /dev/null
+++ b/src/store/store.js
@@ -0,0 +1,58 @@
+import StationMap from '../classes/subwayMap.js';
+import { getItemByKey, setItemWithKey } from '../utils/localStorage.js';
+import { SUBWAY_MAP_ITEM_NAME } from '../constants/configuration.js';
+import SubwayStation from '../classes/subwayStation.js';
+import SubwayLine from '../classes/subwayLine.js';
+
+export const subwayMap = new StationMap();
+
+export const syncSubwayMapToLocalStorage = () => {
+  const subwayMapItem = {
+    allStations: subwayMap.allStations,
+    allLines: subwayMap.allLines,
+  };
+  setItemWithKey(subwayMapItem, SUBWAY_MAP_ITEM_NAME);
+};
+
+const copyAllStations = (allStations) => {
+  Object.keys(allStations).forEach((stationName) => {
+    const loadedStation = allStations[stationName];
+    const station = new SubwayStation();
+    loadedStation.belongingLineNames.forEach((belongingLineName) => {
+      station.addBeloningLineByLineName(belongingLineName);
+    });
+    subwayMap.addStation(station, stationName);
+  });
+};
+
+const copyAllLines = (allLines) => {
+  Object.keys(allLines).forEach((lineName) => {
+    const loadedLine = allLines[lineName];
+    const loadedLineEndIndex = loadedLine.allStationsInLine.length - 1;
+    const line = new SubwayLine(
+      loadedLine.allStationsInLine[0],
+      loadedLine.allStationsInLine[loadedLineEndIndex]
+    );
+    for (let i = loadedLine.length - 2; i > 0; i -= 1) {
+      line.insertStationToLineByNameAndIndex(
+        loadedLine.allStationsInLine[i],
+        1
+      );
+    }
+    subwayMap.addLine(line, lineName);
+  });
+};
+
+export const syncSubwayMapFromLocalStorage = () => {
+  const subwayMapItem = getItemByKey(SUBWAY_MAP_ITEM_NAME);
+  const { allStations, allLines } = subwayMapItem;
+  copyAllStations(allStations);
+  copyAllLines(allLines);
+  console.log(subwayMap);
+};
+
+export default {
+  subwayMap,
+  syncSubwayMapToLocalStorage,
+  syncSubwayMapFromLocalStorage,
+};
diff --git a/src/templates/button.js b/src/templates/button.js
new file mode 100644
index 000000000..deeeacb9d
--- /dev/null
+++ b/src/templates/button.js
@@ -0,0 +1,18 @@
+const getSectionLineMenuButtonTemplate = (lineName) => {
+  return `<button class="section-line-menu-button" data-target-line="${lineName}">${lineName}</button>`;
+};
+
+export const getSectionLineMenuButtonsTemplate = (lineNames) => {
+  let targetLineSetterButtonsTemplate = '';
+  lineNames.forEach((lineName) => {
+    targetLineSetterButtonsTemplate += getSectionLineMenuButtonTemplate(
+      lineName
+    );
+  });
+
+  return targetLineSetterButtonsTemplate;
+};
+
+export default {
+  getSectionLineMenuButtonsTemplate,
+};
diff --git a/src/templates/list.js b/src/templates/list.js
new file mode 100644
index 000000000..a18db0157
--- /dev/null
+++ b/src/templates/list.js
@@ -0,0 +1,32 @@
+const getSubwayLineTemplate = (lineName, stationNamesInLine) => {
+  let stationItemsTemplate = '';
+  stationNamesInLine.forEach((stationName) => {
+    stationItemsTemplate += `<li>${stationName}</li>`;
+  });
+
+  return `
+    <h2>${lineName}</h2>
+    <ul>
+      ${stationItemsTemplate}
+    </ul>
+  `;
+};
+
+export const getSubwayMapTemplate = (allLines) => {
+  const allLineNames = Object.keys(allLines);
+  let subwayMapTemplate = '';
+  allLineNames.forEach((lineName) => {
+    const { allStationsInLine } = allLines[lineName];
+    subwayMapTemplate += getSubwayLineTemplate(lineName, allStationsInLine);
+  });
+
+  return `
+    <div class="map">
+      ${subwayMapTemplate}
+    </div>
+  `;
+};
+
+export default {
+  getSubwayMapTemplate,
+};
diff --git a/src/templates/selector.js b/src/templates/selector.js
new file mode 100644
index 000000000..1d776517e
--- /dev/null
+++ b/src/templates/selector.js
@@ -0,0 +1,16 @@
+const getSelectorOptionTemplate = (option) => {
+  return `<option value=${option}>${option}</option>`;
+};
+
+export const getSelectorOptionsTemplate = (options) => {
+  let selectorOptionsTemplate = '';
+  options.forEach((option) => {
+    selectorOptionsTemplate += getSelectorOptionTemplate(option);
+  });
+
+  return selectorOptionsTemplate;
+};
+
+export default {
+  getSelectorOptionsTemplate,
+};
diff --git a/src/templates/table.js b/src/templates/table.js
new file mode 100644
index 000000000..c7bfb36a8
--- /dev/null
+++ b/src/templates/table.js
@@ -0,0 +1,45 @@
+const getTableRowTemplate = ({
+  row,
+  deleteTarget,
+  deleteButtonClass,
+  deletebuttonText,
+}) => {
+  let tableCellsTemplate = '';
+  row.forEach((cell) => {
+    tableCellsTemplate += `<td>${cell}</td>`;
+  });
+  return `
+    <tr>
+      ${tableCellsTemplate}
+      <td><button class="${deleteButtonClass}" data-delete-target="${deleteTarget}">${deletebuttonText}</button></td>
+    </tr>
+  `;
+};
+
+export const getTableRowsTemplate = ({
+  rows,
+  deleteTargetCellIndex,
+  deleteButtonClass,
+  deleteButtonText,
+}) => {
+  let rowItemsTemplate = '';
+  let defaultDeleteButtonText = '삭제';
+  if (deleteButtonText) {
+    defaultDeleteButtonText = deleteButtonText;
+  }
+  rows.forEach((row) => {
+    const deleteTarget = row[deleteTargetCellIndex];
+    rowItemsTemplate += getTableRowTemplate({
+      row,
+      deleteTarget,
+      deleteButtonClass,
+      deletebuttonText: defaultDeleteButtonText,
+    });
+  });
+
+  return rowItemsTemplate;
+};
+
+export default {
+  getTableRowsTemplate,
+};
diff --git a/src/utils/localStorage.js b/src/utils/localStorage.js
new file mode 100644
index 000000000..0987a7fe1
--- /dev/null
+++ b/src/utils/localStorage.js
@@ -0,0 +1,14 @@
+export const setItemWithKey = (item, key) => {
+  const stringifiedItem = JSON.stringify(item);
+  localStorage.setItem(key, stringifiedItem);
+};
+
+export const getItemByKey = (key) => {
+  const stringifiedItem = localStorage.getItem(key);
+  return JSON.parse(stringifiedItem);
+};
+
+export default {
+  setItemWithKey,
+  getItemByKey,
+};