diff --git a/README.md b/README.md
index e97a1d649..3f72aab87 100644
--- a/README.md
+++ b/README.md
@@ -3,20 +3,23 @@
 ## 🚀 기능 요구사항
 
 ### 지하철 역 관련 기능
+
 - 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
 - 중복된 지하철 역 이름이 등록될 수 없다.
 - 지하철 역은 2글자 이상이어야 한다.
 - 지하철 역의 목록을 조회할 수 있다.
 
 ### 지하철 노선 관련 기능
+
 - 지하철 노선을 등록하고 삭제할 수 있다.
 - 중복된 지하철 노선 이름이 등록될 수 없다.
 - 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
 - 지하철 노선의 목록을 조회할 수 있다.
 
 ### 지하철 구간 추가 기능
+
 - 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.
 - 하나의 역은 여러개의 노선에 추가될 수 있다.
 - 역과 역 사이에 새로운 역이 추가 될 수 있다.
 - 노선에서 갈래길은 생길 수 없다.
@@ -24,6 +27,7 @@
 <img width="500" src="/images/section1.png">
 
 ### 지하철 구간 삭제 기능
+
 - 노선에 등록된 역을 제거할 수 있다.
 - 종점을 제거할 경우 다음 역이 종점이 된다.
 - 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
@@ -31,6 +35,7 @@
 <img width="500" src="/images/section2.png">
 
 ### 지하철 노선에 등록된 역 조회 기능
+
 - 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
 
 <br/>
@@ -38,32 +43,38 @@
 ## 💻 프로그램 실행 결과
 
 ### 역관리
+
 <img width="100%" src="/images/station_manager.gif">
 
 ### 노선관리
+
 <img width="100%" src="/images/line_manager.gif">
 
 ### 구간관리
+
 <img width="100%" src="/images/section_manager.gif">
 
 ### 노선도 출력
-<img width="100%" src="/images/map_print_manager.gif">
 
+<img width="100%" src="/images/map_print_manager.gif">
 
 ## ✅ 프로그래밍 요구사항
 
 ### 메뉴 버튼
+
 - 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
 - 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
 - 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
 - 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
 
 ### 지하철 역 관련 기능
+
 - 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
 - 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
 - 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
 
 ### 지하철 노선 관련 기능
+
 - 지하철 노선의 이름을 입력하는 input 태그는 `#line-name-input` id값을 가진다.
 - 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
 - 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
@@ -71,6 +82,7 @@
 - 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
 
 ### 지하철 구간 추가 기능
+
 - 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
 - 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
 - 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
@@ -78,6 +90,7 @@
 - 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
 
 ### 지하철 노선도 출력 기능
+
 - 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
 
 ### 기존 요구사항
@@ -101,7 +114,8 @@
   - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)
 
 ### 추가된 요구사항
-- [data](https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)속성을 활용하여 html 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다. 
+
+- [data](https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)속성을 활용하여 html 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다.
 - [localStorage](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.
 
 <br/>
@@ -112,3 +126,56 @@
 - **기능을 구현하기 전에 javascript-subway-precourse/docs/README.md 파일에 구현할 기능 목록**을 정리해 추가한다.
 - **git의 commit 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가**한다.
 - [프리코스 과제 제출](https://github.com/woowacourse/woowacourse-docs/tree/master/precourse) 문서 절차를 따라 미션을 제출한다.
+
+## 🔥 기능 목록
+
+- 공통 기능
+
+  - [x] 각 메뉴를 클릭시 해당 기능을 수행할 수 있게해야 한다. (역 관리, 노선 관리, 구간 관리, 지하철 노선도 출력)
+  - [x] data를 공유할 수 있도록 각 메뉴에서 data를 동기화 시킨다.
+  - [x] localStorage를 이용하여 새로고침해도 최근 데이터를 활용해 목록들을 표시한다.
+  - [x] form 제출 시  input을 초기화 한다.
+  - [x] 올바르 않은 입력일 경우 경고창을 표시하여 재입력 할 수 있게한다.
+
+- 역 관련 기능
+
+  - [x] 사용자가 역 이름을 추가할 수 있게해야 한다.
+  - [x] 역 이름이 중복되는지 확인해야한다.
+  - [x] 역 이름이 2글자 이상인지 확인해야 한다. (미만일 경우 경고창 표시)
+  - [x] 사용자가 입력한 역들을 차례대로 출력해야 한다.
+  - [x] 삭제 버튼을 클릭시 삭제할 수 있게 해야한다.
+  - [x] 삭제에 성공했을 경우 목록을 업데이트해서 다시 표시해야 한다.
+  - [x] 삭제시 사용자의 확인을 받는다
+  - [x] 삭제 시 노선에 추가되어 있을 경우 삭제할 수 없게 해야 한다.
+
+- 노선 관련 기능
+
+  - [x] 노선 이름을 등록 할 수 있게 한다.
+  - [x] 상행 종점 하행 종점을 등록한 역 목록에서 선택할 수 있게 해야한다.
+  - [x] 노선 이름이 중복되는지 확인해야한다.
+  - [x] 상행 종점과 하행 종점이 같은지 확인해야 한다.
+  - [x] 노선목록을 출력한다.
+  - [x] 삭제 버튼 클릭 시 삭제할 수 있게 해야한다.
+  - [x] 삭제에 성공했을 경우 목록을 업데이트 해서 다시 표시해야 한다.
+  - [x] 삭제 시 사용자의 확인을 받는다.
+
+- 구간 관련 기능
+
+  - [x] 사용자가 등록한 노선을 표시해야한다.
+  - [x] 노선을 클릭 시 그 노선을 수정 할 수 있게 해야한다.
+  - [x] 사용자가 입력한 역들을 순서에 따라 추가 할 수 있다.
+  - [x] 새로운 구간 등록시 노선의 상행종점과 하행종점을 업데이트 한다.
+  - [x] 구간 등록시 노선에 이미 포함된 역인지 확인한다.
+  - [x] '노선에서 제거' 버튼 클릭시 노선에서 제거 할 수 있게 해야한다.
+  - [x] 삭제시 노선에 포함된 역이 두개 이하인지 확인해야한다.
+  - [x] 삭제에 성공했을 경우 목록을 업데이트 해서 다시 표시해야 한다.
+
+- 노선도 출력 기능
+
+  - [x] 노선의 상행종점부터 하행종점까지 순서대로 목록을 표시해야 한다.
+
+- 예외사항
+  - 입력의 모든 공백은 제외한다.
+  - 노선에 구간 추가 시 현재의 길이보다 더 높은 숫자를 입력한 경우 마지막에 추가된다.
+
+
diff --git a/index.html b/index.html
index fc99deac2..253c80c62 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,108 @@
   <head>
     <meta charset="UTF-8" />
     <title>지하철 노선도 관리</title>
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <h1>🚇 지하철 노선도 관리</h1>
+      <nav id="menu">
+        <button id="station-manager-button">1.역 관리</button>
+        <button id="line-manager-button">2.노선 관리</button>
+        <button id="section-manager-button">3.구간 관리</button>
+        <button id="map-print-manager-button">4.지하철 노선도 출력</button>
+      </nav>
+      <div id="station-manager">
+        <form id="station-form">
+          <label for="station-name-input"><strong>역 이름</strong></label>
+          <input
+            type="text"
+            id="station-name-input"
+            placeholder="역 이름을 입력하주세요."
+          />
+          <button id="station-add-button">역 추가</button>
+        </form>
+        <section id="station-result">
+          <h2>🚉 지하철 역 목록</h2>
+          <table id="station-table">
+            <thead>
+              <tr>
+                <th>역 이름</th>
+                <th>설정</th>
+              </tr>
+            </thead>
+            <tbody id="station-table-body"></tbody>
+          </table>
+        </section>
+      </div>
+      <div id="line-manager" style="display: none">
+        <form id="line-form">
+          <label for="line-name-input"><strong>노선 이름</strong></label>
+          <input
+            type="text"
+            id="line-name-input"
+            placeholder="노선 이름을 입력해 주세요."
+          />
+          <p>
+            <strong>상행 종점</strong>
+            <select id="line-start-station-selector"></select>
+          </p>
+          <p>
+            <strong>하행 종점</strong>
+            <select id="line-end-station-selector"></select>
+          </p>
+          <button id="line-add-button">노선 추가</button>
+        </form>
+        <section id="line-result">
+            <h2>🚉 지하철 노선 목록</h2>
+            <table id="line-table">
+              <thead>
+                <tr>
+                  <th>노선 이름</th>
+                  <th>상행 종점역</th>
+                  <th>하행 종점역</th>
+                  <th>설정</th>
+                </tr>
+              </thead>
+              <tbody id="line-table-body"></tbody>
+            </table>
+          </h2>
+        </section>
+      </div>
+      <div id="section-manager" style="display: none">
+        <h2>구간을 수정할 노선을 선택해 주세요.</h2>
+        <nav id="section-line-menu">
+        </nav>
+        <div id="section-detail">
+          <form id="section-form">
+            <h3 id="section-form-header">n호선 관리</h3>
+            <h4>구간 등록</h4>
+            <select id="section-station-selector"></select>
+            <input
+              type="number"
+              id="section-order-input"
+              min="0"
+              placeholder="순서"
+            />
+            <button id="section-add-button">등록</button>
+          </form>
+          <section id="section-result">
+              <h2>🚉 지하철 노선 목록</h2>
+              <table id="section-table">
+                <thead>
+                  <tr>
+                    <th>순서</th>
+                    <th>이름</th>
+                    <th>설정</th>
+                  </tr>
+                </thead>
+                <tbody id="section-table-body"></tbody>
+              </table>
+            </h2>
+          </section>
+        </div>
+      </div>
+      <div id="map-print-manager" style="display: none"></div>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/src/factory/Component.js b/src/factory/Component.js
new file mode 100644
index 000000000..b7e84eb9e
--- /dev/null
+++ b/src/factory/Component.js
@@ -0,0 +1,45 @@
+export default class Component {
+  constructor(props = {}) {
+    this.data = {};
+    this.props = props;
+    this.managerId = props.managerId;
+    this.syncData = props.syncData;
+    this.container = document.querySelector(`#${props.containerId}`);
+  }
+
+  setData(nextData) {
+    this.data = {
+      ...this.data,
+      ...nextData,
+    };
+    this.render?.();
+  }
+
+  clearInput() {
+    this.userInput.value = '';
+  }
+
+  addToTable(value, keyName) {
+    const newData = { ...this.data };
+    newData[keyName].push(value);
+    this.syncData(newData);
+  }
+
+  deleteFromTable(index, keyName) {
+    const newData = { ...this.data };
+    newData[keyName].splice(index, 1);
+    this.syncData(newData);
+  }
+
+  updateTable(template) {
+    this.table.innerHTML = template;
+  }
+
+  show() {
+    this.container.style.display = 'block';
+  }
+
+  hide() {
+    this.container.style.display = 'none';
+  }
+}
diff --git a/src/factory/Line.js b/src/factory/Line.js
new file mode 100644
index 000000000..e151d227b
--- /dev/null
+++ b/src/factory/Line.js
@@ -0,0 +1,35 @@
+const MIN_SECTION_LENGTH = 2;
+
+export default class Line {
+  constructor(props) {
+    this.props = props;
+    this.name = props.name;
+    this.startStation = props.startStation;
+    this.endStation = props.endStation;
+    this.section = this.setSection();
+  }
+
+  setSection = () => this.props.section || [this.startStation, this.endStation];
+
+  addStationToSection({ stationName, index }) {
+    this.section.splice(index, 0, stationName);
+    this.updateStartStation();
+    this.updateEndStation();
+  }
+
+  deleteStationFromSection({ index }) {
+    this.section.splice(index, 1);
+    this.updateStartStation();
+    this.updateEndStation();
+  }
+
+  checkSectionLength = () => this.section.length === MIN_SECTION_LENGTH;
+
+  updateStartStation() {
+    [this.startStation] = this.section;
+  }
+
+  updateEndStation() {
+    this.endStation = this.section[this.section.length - 1];
+  }
+}
diff --git a/src/index.js b/src/index.js
index e69de29bb..15a4760fc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,5 @@
+import SubwayManager from './managers/app.js';
+
+const app = new SubwayManager();
+
+app.init();
diff --git a/src/managers/LineManager.js b/src/managers/LineManager.js
new file mode 100644
index 000000000..44e49518d
--- /dev/null
+++ b/src/managers/LineManager.js
@@ -0,0 +1,98 @@
+import Component from '../factory/Component.js';
+import Line from '../factory/Line.js';
+import { LINE_SELECTOR } from '../share/selector.js';
+import {
+  isOverlap,
+  isSameStation,
+  deleteWhiteSpace,
+  isEmpty,
+} from '../share/utils.js';
+import { lineTableTemplate, optionTemplate } from '../share/template.js';
+import { DATA_KEY, LINE_WORDS } from '../share/words.js';
+
+export default class LineManager extends Component {
+  constructor(props) {
+    super(props);
+
+    this.form = this.container.querySelector(`#${LINE_SELECTOR.FORM_ID}`);
+    this.userInput = this.container.querySelector(
+      `#${LINE_SELECTOR.NAME_INPUT_ID}`,
+    );
+    this.startStationSelector = this.container.querySelector(
+      `#${LINE_SELECTOR.START_STATION_SELECTOR_ID}`,
+    );
+    this.endStationSelector = this.container.querySelector(
+      `#${LINE_SELECTOR.END_STATION_SELECTOR}`,
+    );
+    this.table = this.container.querySelector(`#${LINE_SELECTOR.TABLE_BODY}`);
+
+    this.form.addEventListener('submit', this.onSubmit);
+    this.table.addEventListener('click', this.onTableClick);
+  }
+
+  onSubmit = (event) => {
+    event.preventDefault();
+    const constructorObj = this.getValues();
+    const newLine = new Line(constructorObj);
+    if (!this.isValid(newLine)) return;
+    this.addToTable(newLine, DATA_KEY.LINE_LIST);
+    this.clearInput();
+  };
+
+  onTableClick = (event) => {
+    const { className } = event.target;
+    const { index } = event.target.dataset;
+    if (className !== LINE_SELECTOR.DELETE_BUTTON_CLASS) return;
+    if (!confirm(LINE_WORDS.CONFIRM_MESSAGE)) return;
+    this.deleteFromTable(index, DATA_KEY.LINE_LIST);
+  };
+
+  isValid({ name, startStation, endStation }) {
+    if (isEmpty(name)) {
+      alert(LINE_WORDS.ALERT_MESSAGE_NO_WHITESPACE);
+      return false;
+    }
+    if (isOverlap(name, this.getAllLineNames())) {
+      alert(LINE_WORDS.ALERT_MESSAGE_SAME_NAME);
+      return false;
+    }
+    if (isSameStation(startStation, endStation)) {
+      alert(LINE_WORDS.ALERT_MESSAGE_SAME_STATION);
+      return false;
+    }
+    return true;
+  }
+
+  getAllLineNames = () => this.data.lineList.map((line) => line.name);
+
+  getValues = () => {
+    const name = deleteWhiteSpace(this.userInput.value);
+    const { value: startStation } = this.startStationSelector;
+    const { value: endStation } = this.endStationSelector;
+    return { name, startStation, endStation };
+  };
+
+  updateStationList() {
+    this.startStationSelector.innerHTML = this.data.stationList
+      .map((station) => optionTemplate(station))
+      .join('');
+    this.endStationSelector.innerHTML = this.data.stationList
+      .map((station) => optionTemplate(station))
+      .join('');
+  }
+
+  template() {
+    return this.data.lineList
+      .map((line, index) => lineTableTemplate({
+        ...line,
+        index,
+        buttonClass: LINE_SELECTOR.DELETE_BUTTON_CLASS,
+      }))
+      .join('');
+  }
+
+  render() {
+    this.updateStationList();
+    this.updateTable(this.template());
+  }
+}
diff --git a/src/managers/MapPrintManager.js b/src/managers/MapPrintManager.js
new file mode 100644
index 000000000..77b509eea
--- /dev/null
+++ b/src/managers/MapPrintManager.js
@@ -0,0 +1,22 @@
+import Component from '../factory/Component.js';
+import { MAP_SELECTOR } from '../share/selector.js';
+import { mapTemplate } from '../share/template.js';
+
+export default class MapPrintManager extends Component {
+  constructor(props) {
+    super(props);
+
+    this.map = document.createElement('div');
+    this.map.setAttribute('class', MAP_SELECTOR.MAP_CLASS);
+
+    this.container.appendChild(this.map);
+  }
+
+  updateTemplate() {
+    this.map.innerHTML = mapTemplate(this.data.lineList);
+  }
+
+  render() {
+    this.updateTemplate();
+  }
+}
diff --git a/src/managers/SectionDetailManager.js b/src/managers/SectionDetailManager.js
new file mode 100644
index 000000000..ff9a1c5bc
--- /dev/null
+++ b/src/managers/SectionDetailManager.js
@@ -0,0 +1,100 @@
+import Component from '../factory/Component.js';
+import { SECTION_SELECTOR } from '../share/selector.js';
+import {
+  optionTemplate,
+  sectionDetailTableTemplate,
+} from '../share/template.js';
+import { isOverlap, isEmpty } from '../share/utils.js';
+import { SECTION_DETAIL_WORDS } from '../share/words.js';
+
+export default class SectionDetailManager extends Component {
+  constructor(props) {
+    super(props);
+
+    this.form = this.container.querySelector(`#${SECTION_SELECTOR.FORM_ID}`);
+    this.formHeader = this.container.querySelector(
+      `#${SECTION_SELECTOR.FORM_HEADER_ID}`,
+    );
+    this.stationSelector = this.container.querySelector(
+      `#${SECTION_SELECTOR.STATION_SELECTOR_ID}`,
+    );
+    this.userInput = this.container.querySelector(
+      `#${SECTION_SELECTOR.ORDER_INPUT_ID}`,
+    );
+    this.table = this.container.querySelector(
+      `#${SECTION_SELECTOR.TABLE_BODY}`,
+    );
+
+    this.form.addEventListener('submit', this.onSubmit);
+    this.table.addEventListener('click', this.onTableClick);
+  }
+
+  onSubmit = (event) => {
+    event.preventDefault();
+    const targetLine = this.data.currentLineData;
+    if (!this.isValid(targetLine)) return;
+    targetLine.addStationToSection(this.getValues());
+    this.clearInput();
+    this.syncData(this.data);
+  };
+
+  onTableClick = (event) => {
+    const { className } = event.target;
+    const { index } = event.target.dataset;
+    const targetLine = this.data.currentLineData;
+    if (className !== SECTION_SELECTOR.DELETE_BUTTON_CLASS) return;
+    if (!confirm(SECTION_DETAIL_WORDS.CONFIRM_MESSAGE)) return;
+    if (targetLine.checkSectionLength()) {
+      alert(SECTION_DETAIL_WORDS.ALERT_MESSAGE_SECTION_MINLENGTH);
+      return;
+    }
+    targetLine.deleteStationFromSection({ index });
+    this.syncData(this.data);
+  };
+
+  isValid(targetLine) {
+    const { stationName, index } = this.getValues();
+    if (isEmpty(index)) {
+      alert(SECTION_DETAIL_WORDS.ALERT_MESSAGE_NO_INDEX);
+      return false;
+    }
+    if (isOverlap(stationName, targetLine.section)) {
+      alert(SECTION_DETAIL_WORDS.ALERT_MESSAGE_SECTION_INCLUDES_STATION);
+      return false;
+    }
+    return true;
+  }
+
+  getValues() {
+    const { value: stationName } = this.stationSelector;
+    const { value: index } = this.userInput;
+    return { stationName, index };
+  }
+
+  updateOptions() {
+    this.stationSelector.innerHTML = this.data.stationList
+      .map((station) => optionTemplate(station))
+      .join('');
+  }
+
+  updateFormHeader() {
+    const { name } = this.data.currentLineData;
+    this.formHeader.innerHTML = `${name} 관리`;
+  }
+
+  template() {
+    return this.data.currentLineData.section
+      .map((station, index) => sectionDetailTableTemplate({
+        name: station,
+        index,
+        buttonClass: SECTION_SELECTOR.DELETE_BUTTON_CLASS,
+      }))
+      .join('');
+  }
+
+  render() {
+    this.updateOptions();
+    this.updateFormHeader();
+    this.updateTable(this.template());
+  }
+}
diff --git a/src/managers/SectionManager.js b/src/managers/SectionManager.js
new file mode 100644
index 000000000..efe9d44ac
--- /dev/null
+++ b/src/managers/SectionManager.js
@@ -0,0 +1,43 @@
+import Component from '../factory/Component.js';
+import SectionDetailManager from './SectionDetailManager.js';
+import { SECTION_SELECTOR } from '../share/selector.js';
+
+export default class SectionManager extends Component {
+  constructor(props) {
+    super(props);
+
+    this.sectionLineMenu = this.container.querySelector(
+      `#${SECTION_SELECTOR.LINE_MENU_ID}`,
+    );
+    this.sectionDetailManager = new SectionDetailManager({
+      containerId: SECTION_SELECTOR.DETAIL_CONTAINER_ID,
+      syncData: this.syncData,
+    });
+
+    this.sectionLineMenu.addEventListener('click', this.changeSectionDetailManger);
+  }
+
+  changeSectionDetailManger = (event) => {
+    if (event.target.nodeName !== 'BUTTON') return;
+    const { name: selectedLineName } = event.target.dataset;
+    const newData = {
+      ...this.data,
+      currentLineData:
+      this.getSelectedLine(selectedLineName),
+    };
+    this.syncData(newData);
+    this.sectionDetailManager.show();
+  };
+
+  getSelectedLine = (name) => this.data.lineList.find((line) => line.name === name);
+
+  updateMenuList() {
+    this.sectionLineMenu.innerHTML = this.data.lineList
+      .map((line) => `<button class="${SECTION_SELECTOR.LINE_MENU_BUTTON_CLASS}" data-name="${line.name}">${line.name}</button>`)
+      .join('');
+  }
+
+  render() {
+    this.updateMenuList();
+  }
+}
diff --git a/src/managers/StationManager.js b/src/managers/StationManager.js
new file mode 100644
index 000000000..7fff3e87a
--- /dev/null
+++ b/src/managers/StationManager.js
@@ -0,0 +1,79 @@
+import Component from '../factory/Component.js';
+import { STATION_SELECTOR } from '../share/selector.js';
+import {
+  isOverlap,
+  isValidLength,
+  deleteWhiteSpace,
+} from '../share/utils.js';
+import { stationTableTemplate } from '../share/template.js';
+import { DATA_KEY, STATION_WORDS } from '../share/words.js';
+
+const MIN_STATION_NAME_LENGTH = 2;
+
+export default class StationManager extends Component {
+  constructor(props) {
+    super(props);
+
+    this.userInput = this.container.querySelector(
+      `#${STATION_SELECTOR.NAME_INPUT_ID}`,
+    );
+    this.form = this.container.querySelector(`#${STATION_SELECTOR.FORM_ID}`);
+    this.table = this.container.querySelector(
+      `#${STATION_SELECTOR.TABLE_BODY}`,
+    );
+
+    this.form.addEventListener('submit', this.onSubmit);
+    this.table.addEventListener('click', this.onTableClick);
+  }
+
+  onSubmit = (event) => {
+    event.preventDefault();
+    const stationName = deleteWhiteSpace(this.userInput.value);
+    if (!this.isValid(stationName)) return;
+    this.addToTable(stationName, DATA_KEY.STATION_LIST);
+    this.clearInput();
+  };
+
+  onTableClick = (event) => {
+    const { className } = event.target;
+    const { index } = event.target.dataset;
+    const { name: stationName } = event.target.parentNode.parentNode.dataset;
+    if (className !== STATION_SELECTOR.DELETE_BUTTON_CLASS) return;
+    if (!confirm(STATION_WORDS.CONFIRM_MESSAGE)) return;
+    if (isOverlap(stationName, this.getAllStationNamesInLines())) {
+      alert(STATION_WORDS.ALERT_MESSAGE_SECTION_INCLUDES_STATION);
+      return;
+    }
+    this.deleteFromTable(index, DATA_KEY.STATION_LIST);
+  };
+
+  isValid(value) {
+    if (isOverlap(value, this.data.stationList)) {
+      alert(STATION_WORDS.ALERT_MESSAGE_ALREADY_INCLUDE);
+      return false;
+    }
+    if (!isValidLength(value, MIN_STATION_NAME_LENGTH)) {
+      alert(STATION_WORDS.ALERT_MESSAGE_STATION_MINLENGTH);
+      return false;
+    }
+    return true;
+  }
+
+  getAllStationNamesInLines() {
+    return [...new Set(this.data.lineList.map((line) => line.section).flat())];
+  }
+
+  template() {
+    return this.data.stationList
+      .map((station, index) => stationTableTemplate({
+        stationName: station,
+        index,
+        buttonClass: STATION_SELECTOR.DELETE_BUTTON_CLASS,
+      }))
+      .join('');
+  }
+
+  render() {
+    this.updateTable(this.template());
+  }
+}
diff --git a/src/managers/app.js b/src/managers/app.js
new file mode 100644
index 000000000..6ceb2785b
--- /dev/null
+++ b/src/managers/app.js
@@ -0,0 +1,79 @@
+import Component from '../factory/Component.js';
+import StationManager from './StationManager.js';
+import LineManager from './LineManager.js';
+import SectionManager from './SectionManager.js';
+import MapPrintManager from './MapPrintManager.js';
+import {
+  MENU,
+  STATION_SELECTOR,
+  LINE_SELECTOR,
+  SECTION_SELECTOR,
+  MAP_SELECTOR,
+} from '../share/selector.js';
+import storage, { STORAGE_KEY } from '../share/storage.js';
+
+export default class SubwayManager extends Component {
+  constructor() {
+    super();
+    this.data = storage.getItem(STORAGE_KEY);
+    this.menu = document.querySelector(`#${MENU.MENU_CONTAINER_ID}`);
+
+    this.stationManager = new StationManager({
+      managerId: MENU.STATION_MANGER_BUTTON_ID,
+      containerId: STATION_SELECTOR.MANAGER_CONTAINER_ID,
+      syncData: this.syncData,
+    });
+    this.lineManager = new LineManager({
+      managerId: MENU.LINE_MANAGER_BUTTON_ID,
+      containerId: LINE_SELECTOR.MANAGER_CONTAINER_ID,
+      syncData: this.syncData,
+    });
+    this.sectionManager = new SectionManager({
+      managerId: MENU.SECTION_MANAGER_BUTTON_ID,
+      containerId: SECTION_SELECTOR.MANAGER_CONTAINER_ID,
+      syncData: this.syncData,
+    });
+    this.mapPrintManager = new MapPrintManager({
+      managerId: MENU.MAP_PRINT_MANAGER_BUTTON_ID,
+      containerId: MAP_SELECTOR.PRINT_MANAGER_CONTAINER_ID,
+      syncData: this.syncData,
+    });
+  }
+
+  init() {
+    this.syncData(this.data);
+    this.menu.addEventListener('click', this.changeMenu);
+  }
+
+  changeMenu = (event) => {
+    const { nodeName } = event.target;
+    const { id } = event.target;
+    if (nodeName !== 'BUTTON') return;
+    this.getManager(id);
+  };
+
+  getManager(id) {
+    const managerList = [
+      this.stationManager,
+      this.lineManager,
+      this.sectionManager,
+      this.mapPrintManager,
+    ];
+    managerList.forEach((manager) => {
+      manager.managerId === id ? manager.show() : manager.hide();
+      manager.managerId === MENU.SECTION_MANAGER_BUTTON_ID
+        ? this.sectionManager.sectionDetailManager.hide()
+        : '';
+    });
+  }
+
+  syncData = (data) => {
+    storage.setItem(STORAGE_KEY, data);
+    this.setData(data);
+    this.stationManager.setData(data);
+    this.lineManager.setData(data);
+    this.sectionManager.setData(data);
+    this.sectionManager.sectionDetailManager.setData(data);
+    this.mapPrintManager.setData(data);
+  };
+}
diff --git a/src/share/selector.js b/src/share/selector.js
new file mode 100644
index 000000000..4e7e541c6
--- /dev/null
+++ b/src/share/selector.js
@@ -0,0 +1,52 @@
+export const MENU = Object.freeze({
+  MENU_CONTAINER_ID: 'menu',
+  STATION_MANGER_BUTTON_ID: 'station-manager-button',
+  LINE_MANAGER_BUTTON_ID: 'line-manager-button',
+  SECTION_MANAGER_BUTTON_ID: 'section-manager-button',
+  MAP_PRINT_MANAGER_BUTTON_ID: 'map-print-manager-button',
+});
+
+export const STATION_SELECTOR = Object.freeze({
+  MANAGER_CONTAINER_ID: 'station-manager',
+  FORM_ID: 'station-form',
+  RESULT_CONTAINER_ID: 'station-result',
+  TABLE: 'station-table',
+  TABLE_BODY: 'station-table-body',
+  NAME_INPUT_ID: 'station-name-input',
+  ADD_BUTTON_ID: 'station-add-button',
+  DELETE_BUTTON_CLASS: 'station-delete-button',
+});
+
+export const LINE_SELECTOR = Object.freeze({
+  MANAGER_CONTAINER_ID: 'line-manager',
+  FORM_ID: 'line-form',
+  NAME_INPUT_ID: 'line-name-input',
+  START_STATION_SELECTOR_ID: 'line-start-station-selector',
+  END_STATION_SELECTOR: 'line-end-station-selector',
+  ADD_BUTTON_ID: 'line-add-button',
+  DELETE_BUTTON_CLASS: 'line-delete-button',
+  RESULT_CONTAINER_ID: 'line-result',
+  TABLE: 'line-table',
+  TABLE_BODY: 'line-table-body',
+});
+
+export const SECTION_SELECTOR = Object.freeze({
+  MANAGER_CONTAINER_ID: 'section-manager',
+  LINE_MENU_ID: 'section-line-menu',
+  LINE_MENU_BUTTON_CLASS: 'section-line-menu-button',
+  DETAIL_CONTAINER_ID: 'section-detail',
+  FORM_ID: 'section-form',
+  FORM_HEADER_ID: 'section-form-header',
+  STATION_SELECTOR_ID: 'section-station-selector',
+  ORDER_INPUT_ID: 'section-order-input',
+  ADD_BUTTON_ID: 'section-add-button',
+  DELETE_BUTTON_CLASS: 'section-delete-button',
+  RESULT_CONTAINER_ID: 'section-result',
+  TABLE: 'section-table',
+  TABLE_BODY: 'section-table-body',
+});
+
+export const MAP_SELECTOR = Object.freeze({
+  PRINT_MANAGER_CONTAINER_ID: 'map-print-manager',
+  MAP_CLASS: 'map',
+});
diff --git a/src/share/storage.js b/src/share/storage.js
new file mode 100644
index 000000000..d6b874d45
--- /dev/null
+++ b/src/share/storage.js
@@ -0,0 +1,30 @@
+import Line from '../factory/Line.js';
+
+export const STORAGE_KEY = 'data';
+
+const defaultState = {
+  stationList: [],
+  lineList: [],
+  currentLineData: {
+    name: '',
+    section: [],
+  },
+};
+
+const jsonToClassConverter = (dataList, Creator) => dataList.map((data) => new Creator(data));
+
+const setItem = (key, data) => localStorage.setItem(key, JSON.stringify(data));
+
+const getItem = (key) => {
+  const tempData = JSON.parse(localStorage.getItem(key));
+  const data = tempData || defaultState;
+  data.lineList = jsonToClassConverter(data.lineList, Line);
+  return data;
+};
+
+const storage = {
+  setItem,
+  getItem,
+};
+
+export default storage;
diff --git a/src/share/template.js b/src/share/template.js
new file mode 100644
index 000000000..00208cad6
--- /dev/null
+++ b/src/share/template.js
@@ -0,0 +1,37 @@
+export const stationTableTemplate = ({ stationName, index, buttonClass }) => `
+  <tr data-name="${stationName}" data-index="${index}">
+    <td>${stationName}</td>
+    <td><button class="${buttonClass}" data-index="${index}">삭제</button></td>
+  </tr>
+`;
+
+export const lineTableTemplate = ({
+  name, startStation, endStation, index, buttonClass,
+}) => `
+  <tr data-name="${name}" data-startStation="${startStation}" data-endStation="${endStation}" data-index="${index}">
+    <td>${name}</td>
+    <td>${startStation}</td>
+    <td>${endStation}</td>
+    <td><button class="${buttonClass}" data-index="${index}">삭제</button></td>
+  </tr>
+  `;
+
+export const sectionDetailTableTemplate = ({ index, name, buttonClass }) => `
+  <tr data-name="${name}" data-index="${index}">
+    <td>${index}</td>
+    <td>${name}</td>
+    <td><button class="${buttonClass}" data-index="${index}">노선에서 삭제</button></td>
+  </tr>
+  `;
+
+export const mapTemplate = (lineList) => lineList
+  .map((line) => `
+  <ul>
+    <li><h2>🚉 ${line.name}</h2></li>
+    <ul>
+      ${line.section.map((stationName) => `<li class="dot">${stationName}</li>`).join('')}
+    </ul>
+  </ul>`)
+  .join('');
+
+export const optionTemplate = (station) => `<option value="${station}">${station}</option>`;
diff --git a/src/share/utils.js b/src/share/utils.js
new file mode 100644
index 000000000..bcd8b00b9
--- /dev/null
+++ b/src/share/utils.js
@@ -0,0 +1,9 @@
+export const isOverlap = (value, list) => list.includes(value);
+
+export const isValidLength = (value, minLength) => value.length >= minLength;
+
+export const isSameStation = (prevStation, nextStation) => prevStation === nextStation;
+
+export const isEmpty = (value) => !value.length;
+
+export const deleteWhiteSpace = (words) => words.replaceAll(' ', '');
diff --git a/src/share/words.js b/src/share/words.js
new file mode 100644
index 000000000..c76f22668
--- /dev/null
+++ b/src/share/words.js
@@ -0,0 +1,28 @@
+export const DATA_KEY = {
+  STATION_LIST: 'stationList',
+  LINE_LIST: 'lineList',
+};
+
+export const STATION_WORDS = {
+  CONFIRM_MESSAGE: '정말로 삭제하시겠습니까?',
+  ALERT_MESSAGE_SECTION_INCLUDES_STATION:
+   '노선에 포함되어있어 삭제가 불가능합니다.',
+  ALERT_MESSAGE_STATION_MINLENGTH:
+   '역은 공백을 제외하고 2자 이상이여야 합니다.',
+  ALERT_MESSAGE_ALREADY_INCLUDE: '이미 등록된 역입니다.',
+
+};
+
+export const LINE_WORDS = {
+  CONFIRM_MESSAGE: '정말 노선을 삭제하시겠습니까?',
+  ALERT_MESSAGE_SAME_STATION: '상행 종점과 하행 종점은 달라야 합니다.',
+  ALERT_MESSAGE_SAME_NAME: '이미 등록된 노선이름입니다.',
+  ALERT_MESSAGE_NO_WHITESPACE: '노선이름은 공백으로 지정할 수 없습니다.',
+};
+
+export const SECTION_DETAIL_WORDS = {
+  CONFIRM_MESSAGE: '정말로 삭제하시겠습니까?',
+  ALERT_MESSAGE_SECTION_INCLUDES_STATION: '이미 노선에 포함되어있습니다',
+  ALERT_MESSAGE_SECTION_MINLENGTH: '노선은 최소 2개역을 포함해야 합니다.',
+  ALERT_MESSAGE_NO_INDEX: '순서를 입력해주세요',
+};
diff --git a/style.css b/style.css
new file mode 100644
index 000000000..fa27f7831
--- /dev/null
+++ b/style.css
@@ -0,0 +1,28 @@
+label {
+  margin-top: 2rem;
+  display: block;
+}
+table,
+th,
+tr,
+td {
+  border: 1px solid black;
+}
+
+input{
+  width: 10rem;
+}
+
+li{
+  list-style :none
+}
+
+.dot{
+  list-style: disc;
+}
+
+.section-line-menu-button{
+  min-width: 3rem;
+  min-height: 1.5rem;
+  margin-right: 0.3rem;
+}
\ No newline at end of file