diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..6d0ee45db
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.vscode
+.DS_Store
\ No newline at end of file
diff --git a/README.md b/README.md
index e97a1d649..51ba8acb2 100644
--- a/README.md
+++ b/README.md
@@ -1,69 +1,176 @@
 # 🚇 지하철 노선도 미션
 
-## 🚀 기능 요구사항
+> 지하철 노선도 미션은 우아한 테크코스 프리코스 3주차 미션입니다.
+
+지하철 노선도 미션에서는 유저가 지하철 역과 역을 포함하고있는 노선과 노선의 구간을 관리하고, 그에 따라 만들어진 전체 지하철 노선도를 출력해볼 수 있는 화면을 만듭니다.
+
+## ✔️ 주어진 요구사항
+
+- [기능요구사항](#기능-요구사항)
+- [프로그래밍 요구사항](#프로그래밍-요구사항)
+- [추가된 요구사항](#추가된-요구사항)
+- [미션 저장소 및 진행 요구사항](#미션-저장소-및-진행-요구사항)
+
+## ✔️ 주어진 참고사항
+
+- [프로그램 실행 결과](#프로그램-실행-결과)
+
+## ✔️ 피드백 정리
+
+- [2주차 피드백 정리](#2주차-피드백-정리)
+
+## ✔️ 화면의 구성
+
+![화면 구성 - 1, 2](images/1.png)
+
+## ✔️ 구현할 기능 목록
+
+### 0. 전체 화면
+
+- 전체 지하철 관리
+
+### 1.지하철 역 관리 관련 기능
+
+- 유저로부터 지하철 역 이름을 입력받아 등록하는 기능
+
+  - 🚦**예외 상황**
+    - 유저가 지하철 역 이름을 <ins>1글자</ins>만 입력하거나 <ins>입력하지 않았을 때</ins> ex) `"잠"`, `""`
+    - 유저가 <ins>완성되지 않은 역 이름을</ins> 입력했을 때 ex) `"잠ㅁ실"`, `"서ㅓㄱ촌"`
+    - 유저가 <ins>중복된 지하철 역 이름을</ins> 입력했을 때
+    - 유저가 <ins>공백으로 시작하거나 끝나는 역 이름을</ins> 입력했을 때
+    - 유저가 <ins>연속적인 공백이 들어간 역 이름을</ins> 입력했을 때
+    - 유저가 <ins>특수문자 가 포함된 역 이름을</ins> 입력했을 때 ex) `"잠실역;;"`, `"*석촌*"`
+
+- 저장된 지하철 역 목록을 보여주는 기능
+- 저장된 지하철 역에서 역을 삭제할 수 있는 기능
+  - 🚦**예외 상황**
+    - 노선에 등록된 역은 삭제할 수 없음
+
+### 2.지하철 노선 관리 관련 기능
+
+- 유저로부터 노선 이름을 입력받아 등록하는 기능
+
+  - 🚦**예외 상황**
+    - 유저가 노선 이름을 <ins>입력하지 않았을 때</ins> ex) `""`
+    - 유저가 <ins>완성되지 않은 노선 이름</ins>을 입력했을 때 ex) `"경ㅇ의중앙선"`, `"4호선ㄴ"`
+    - 유저가 <ins>중복된 노선 이름을</ins> 입력했을 때
+    - 유저가 <ins>공백으로 시작하거나 끝나는 노선 이름을</ins> 입력했을 때
+    - 유저가 <ins>연속적인 공백이 들어간 노선 이름을</ins> 입력했을 때
+    - 유저가 <ins>특수문자가 포함된 노선 이름을</ins> 입력했을 때
+    - 유저가 <ins>상행 종점역과 하행 종점역을 같게</ins> 입력했을 때
+
+- 저장된 노선 목록을 보여주는 기능
+- 저장된 노선 목록에서 노선을 삭제할 수 있는 기능
+
+### 3.지하철 구간 관리 관련 기능
+
+- 각 노선 별로 만들어진 버튼을 누르면 해당 노선 관리 컨테이너를 보여주는 기능
+- 역을 선택하고 유저의 입력을 받아 노선의 순서를 정할 수 있는 기능
+
+  - 하나의 역은 여러 개의 노선에 추가될 수 있음
+  - 역과 역 사이에 새로운 역이 추가될 수 있음
+  - 🚦**예외 상황**
+    - 유저가 노선의 순서를 <ins>0 또는 음수</ins>로 입력했을 때
+    - 유저가 노선의 순서를 <ins>소수</ins>로 입력했을 때 ex) `1.2`
+
+- 역을 노선에서 삭제할 수 있는 기능
+  - 종점을 제거할 경우, 그 다음 역이 종점이 됨
+  - 🚦**예외 상황**
+    - <ins>노선에 포함된 역이 2개 이하</ins>일 때 역을 제거할 수 없음
+
+### 4.지하철 노선도 출력 관련 기능
+
+- 노선 별 저장된 역들을 순서대로 모두 출력하는 기능
+
+## ✔️ 지하철 노선도 미션 회고 (2020.12.09 ~ 2020.12.15)
+
+이번 미션도 저번 주 자동차 경주 게임 미션과 마찬가지로 **기능에 따라 모듈을 분리하고, 분리한 모듈을 찾기 쉽게 구조화**하는 데 집중했다. 어떻게 모듈을 분리해야 1개의 모듈에서 1개의 역할만을 하게 만들지 고민했다. 그리고 **data속성을 활용해 유일한 데이터 값들을 관리**할 수 있게 만드는 데 집중했다. 주어진 요구사항을 숙지하고, 매 코드에 적용할 수 있도록 노력했다.
+
+### 모듈 분리, 구조화
+
+1개의 함수가 1개의 기능을 구현할 수 있게 구현하려고 노력했다. 생각보다 다양하고 많은 기능에 조금 헤맨 감이 없지 않아 있지만, 코드의 반복을 줄이고 재사용 할 수 있는 코드를 만들어 모듈을 분리할 수 있는 데 힘썼다. 비록 이번에 구현한 코드에 완벽히 만족하지는 않지만, 앞으로 더 많은 연습을 통해 스스로 만족할 수 있는 코드를 만들어나가고 싶다.
+
+### 읽기 좋은 코드란 무엇일까?
+
+이번 주 미션은 생각보다 구현하는 데 시간이 많이 들었다. 예외 상황도 생각하지 못한 곳에서 튀어나왔고, 코드가 길어지면 안된다는 생각에 무작정 모듈화 해 떼낸 적도 있었다. 숫자 야구 게임, 자동차 경주 게임에서는 보다 손쉽게 기능을 구현하고 생각하는대로 메소드 분리도 잘 되었는데, 이번 미션에서는 나름대로(?) 체계적으로 가닥을 잡고 들어갔다고 생각했지만 마음처럼 잘 만들어지지 않은 것 같아 아쉬움이 크다. 프로젝트가 커짐에 따라 쓰이는 변수 명이나 함수 명도 헷갈리기 쉬워 더 명확하고 와닿을 수 있게 만들 수 있도록 고민과 연습을 거듭해야겠다고 생각했다. 기능을 구현하고 나서, 리팩토링하며 내가 구현한 코드의 부족한 점에 대해 여실히 깨달았고, 보다 읽기 쉽고 누구나 쉽게 접근할 수 있는 코드를 만들기 위해 노력할 것이다.
+
+---
+
+## 기능 요구사항
 
 ### 지하철 역 관련 기능
+
 - 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
 - 중복된 지하철 역 이름이 등록될 수 없다.
 - 지하철 역은 2글자 이상이어야 한다.
 - 지하철 역의 목록을 조회할 수 있다.
 
 ### 지하철 노선 관련 기능
+
 - 지하철 노선을 등록하고 삭제할 수 있다.
 - 중복된 지하철 노선 이름이 등록될 수 없다.
 - 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
 - 지하철 노선의 목록을 조회할 수 있다.
 
 ### 지하철 구간 추가 기능
+
 - 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.
 - 하나의 역은 여러개의 노선에 추가될 수 있다.
 - 역과 역 사이에 새로운 역이 추가 될 수 있다.
 - 노선에서 갈래길은 생길 수 없다.
 
-<img width="500" src="/images/section1.png">
+![지하철 구간 추가 기능](images/section1.png)
 
 ### 지하철 구간 삭제 기능
+
 - 노선에 등록된 역을 제거할 수 있다.
 - 종점을 제거할 경우 다음 역이 종점이 된다.
 - 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
 
-<img width="500" src="/images/section2.png">
+![지하철 구간 삭제 기능](images/section2.png)
 
 ### 지하철 노선에 등록된 역 조회 기능
+
 - 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
 
-<br/>
+<br />
 
-## 💻 프로그램 실행 결과
+## 프로그램 실행 결과
 
 ### 역관리
-<img width="100%" src="/images/station_manager.gif">
+
+![프로그램 실행 결과 - 역관리](images/station_manager.gif)
 
 ### 노선관리
-<img width="100%" src="/images/line_manager.gif">
+
+![프로그램 실행 결과 - 노선관리](images/line_manager.gif)
 
 ### 구간관리
-<img width="100%" src="/images/section_manager.gif">
+
+![프로그램 실행 결과 - 구간관리](images/section_manager.gif)
 
 ### 노선도 출력
-<img width="100%" src="/images/map_print_manager.gif">
 
+![프로그램 실행 결과 - 노선도 출력](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 +178,7 @@
 - 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
 
 ### 지하철 구간 추가 기능
+
 - 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
 - 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
 - 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
@@ -78,6 +186,7 @@
 - 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
 
 ### 지하철 노선도 출력 기능
+
 - 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
 
 ### 기존 요구사항
@@ -101,14 +210,176 @@
   - [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/>
 
-## 📝 미션 저장소 및 진행 요구사항
+## 미션 저장소 및 진행 요구사항
 
 - 미션은 [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) 문서 절차를 따라 미션을 제출한다.
+
+---
+
+## 2주차 피드백 정리
+
+> 🔫: 1주차 피드백에서도 강조된 부분
+
+### 📌기능 목록 구현
+
+- 🔫기능 목록 구현을 재검토한다.
+
+  - 기능 목록을 너무 상세히 작성하지 않는다. (언제든 변경될 수 있기 때문)
+  - 구현해야 할 기능 목록을 정리하는 데 집중한다.
+  - **예외적인 상황도 기능 목록에 정리한다.**
+    - 기능을 구현하며 계속해서 추가해 나간다.
+  - 기능 목록 작성 예시(자동차 경주 게임)
+
+    ```text
+    - 사용자가 입력한 이름을 쉼표 기준으로 분리해야 한다.
+    - 사용자 이름이 5자 이하인지 검증해야 한다.
+    - 자동차는 4이상인 경우 전진한다.
+    - 자동차는 4미만인 경우 정지한다.
+    - 0 ~ 9 사이의 임의의 값을 생성한다.
+    - 여러 대의 자동차 중 최대 위치 값을 구한다.
+    - 최대 위치 값에 해당하는 자동차 목록을 구한다.
+    ```
+
+### 📌Git
+
+- git `commit message`에 `#번호`를 추가하지 않는다.
+  - `#번호`는 `다른 이슈` 또는 `Pull Request`를 참조할 때 사용한다.
+- git을 통해 관리할 자원에 대해서도 고려한다.
+  - `.idea`, `.vscode`, `node_modules` 등과 같은 경우 git으로 관리하지 않아도 된다.
+  - git에 파일을 추가할 때에는 git을 통해 관리할 필요가 있는 지 여부를 고려해야 한다.
+- Pull Request를 보내기 전, 브랜치를 확인한다.
+  - 새로 만든 브랜치에서 작업한 후, PR을 보닌다.
+
+### 📌상수, 이름 및 주석
+
+- 가능하면 하드코딩되는 값들을 `상수`로 활용한다.
+- 서비스, 게임 등에서는 로직이 변경되거나 요구사항이 추가될 수 있기 때문에, 해당하는 값들을 하드코딩하다보면 수정 과정 중에 휴먼 에러가 발생할 수 있기 때문이다.
+- 하드코딩 되는 값들의 예시(자동차 경주 게임)
+
+  ```text
+  - 이동/정지 기준 : 4
+  - Random 생성 기준 : 10
+  - 여러 에러 메시지들
+  ```
+
+- 🔫`이름`을 통해 의도를 드러내라.
+
+  - 변수, 함수 이름을 축약하지 말아라.
+  - 의도를 드러낼 수 있다면 이름이 길어져도 괜찮다.
+
+- 🔫주석은 꼭 필요한 경우만 남긴다.
+  - 가능하면 변수 이름, 함수(메소드) 이름을 통해 의도를 드러내고, 의도를 드러내기 힘든 경우 주석을 단다.
+
+### 📌Coding
+
+- Boolean을 return하는 경우, 간결히 한다.
+
+  - 좋지 않은 예시
+
+    ```javascript
+    const isValidCar = (car) => {
+      if (car.hasValidName()) {
+        return true;
+      }
+      return false;
+    };
+    ```
+
+  - 좋은 예시 (보다 명확하고, 코드가 간결)
+
+    ```javascript
+    const isValidCar = () => {
+      return car.hasVAlidName();
+    };
+    ```
+
+- javascript에서 제공하는 api를 적극적으로 활용한다.
+
+  - 메소드를 직접 구현하기 전에, javascript api에서 제공하는 기능인지 검색을 먼저 해본다.
+  - 제공하지 않는 기능일 경우, 직접 구현한다.
+  - 자동차 경주 게임의 우승자 출력 예시
+
+    ```javascript
+    const winners = ["east", "west", "south"];
+    winners
+      .map((winner) => {
+        return winner;
+      })
+      .join(",");
+    // "east,west,south"
+    ```
+
+- 불필요한 변수를 줄이기 위해 노력한다.
+
+  - 복잡도와 버그가 발생할 가능성을 높인다.
+  - 중복이 있는지 확인해 `멤버변수의 수`를 최소화한다.
+  - 자동차 경주 게임 예시
+
+    - 좋지 않은 예시
+
+      ```javascript
+      function RacingCarGame() {
+        this.cars;
+        this.maxDistance;
+        this.winners;
+      }
+      ```
+
+    - 좋은 예시
+
+      ```javascript
+      function RacingCarGame() {
+        this.cars;
+
+        this.getWinners = () => {...}
+        this.getMaxDistance = () => {...}
+      }
+      ```
+
+- 비지니스 로직과 UI 로직을 분리해라.
+
+  - 비지니스 로직과 UI 로직을 한 함수가 담당하지 않도록 한다.
+  - 단일 책임의 원칙을 지켜야 한다.
+  - 자동차 경주 게임 예시
+
+    - 좋지 않은 예시
+
+      ```javascript
+      function Car() {
+        this.position = 0;
+
+        // 자동차 이동 여부를 결정하는 비지니스 로직
+        this.move = (randomNumber) => {...} ;
+
+        // UI 로직
+        this.render = () => {
+          $element.innerHTML = template()
+        };
+      }
+      ```
+
+- 함수(메소드) 라인에 대한 기준
+
+  - 공백 라인도 한 라인에 해당하기 때문에 주석은 가능하면 함수 밖 또는 코드 우측에 추가하는 방식으로 구현한다.
+
+- 발생할 수 있는 예외 케이스에 대해 고민한다.
+
+  - 정상적인 경우를 구현하는 것보다 예외 상황을 모두 고려해 프로그래밍하는 것이 더 어렵다.
+  - 예외 상황을 잘 고려해 프로그래밍하는 `습관`을 들여야 한다.
+  - 그리고 이러한 예외 상황에 대한 처리를 잘 할 수 있어야 한다.
+  - 자동차 경주 게임의 예외상황 예시
+
+    ```text
+    - 만약 진행할 게임의 횟수에 음수를 입력한다면?
+    - 만약 이름에 빈 값을 넣는다면?
+    - 만약 쉼표를 이름으로 넣는다면?
+    ```
diff --git a/images/1.png b/images/1.png
new file mode 100644
index 000000000..7acaf4667
Binary files /dev/null and b/images/1.png differ
diff --git a/index.html b/index.html
index fc99deac2..7ce6a0b1e 100644
--- a/index.html
+++ b/index.html
@@ -6,8 +6,15 @@
   </head>
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <h1>🚇 지하철 노선도 관리</h1>
     </div>
+    <div 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>
+    </div>
+    <div id="content"></div>
     <script type="module" src="src/index.js"></script>
   </body>
 </html>
diff --git a/src/components/line-manage-container.js b/src/components/line-manage-container.js
new file mode 100644
index 000000000..05bb02b30
--- /dev/null
+++ b/src/components/line-manage-container.js
@@ -0,0 +1,72 @@
+import SubwayLine from "../domain/subway-line.js";
+import inputNameValidator from "../utils/inputs/validator/name-validator.js";
+import clearInput from "../utils/inputs/clear-input.js";
+import { saveToLocalStorage } from "../index.js";
+import { showNewRow, makeSelectOptions } from "../utils/display/make-elements.js";
+import { getStationByName } from "../utils/global-utils.js";
+import { LINE_ALERT_MESSAGES } from "../global/messages.js";
+import { LINE_ARRAY_KEY, LINE_TAGS } from "../global/constant.js";
+
+const SUBWAY_LINE_TBODY_ID = "lines";
+const VALIDATION_TYPE = "LINE";
+
+function loadLines(state) {
+  for (const line of state.subwayLines) {
+    showNewRow(SUBWAY_LINE_TBODY_ID, line, [
+      line.lineName,
+      line.stations[0].stationName,
+      line.stations[line.stations.length - 1].stationName
+    ]);
+  }
+}
+
+function validateLineName(subwayLines, lineName, upLine, downLine, addLineInput) {
+  if (inputNameValidator(VALIDATION_TYPE, lineName)) {
+    saveLine(subwayLines, lineName, upLine, downLine);
+    saveToLocalStorage(LINE_ARRAY_KEY, JSON.stringify(subwayLines));
+    clearInput(addLineInput);
+  } else {
+    clearInput(addLineInput);
+  }
+}
+
+function saveLine(subwayLines, lineName, upLine, downLine) {
+  let lineId = 0;
+  if (subwayLines.length !== 0) {
+    lineId = subwayLines[subwayLines.length - 1].id + 1;
+  }
+
+  const line = new SubwayLine(
+    lineName,
+    getStationByName(upLine.value),
+    getStationByName(downLine.value),
+    lineId
+  );
+
+  showNewRow(SUBWAY_LINE_TBODY_ID, line, [
+    line.lineName,
+    line.stations[0].stationName,
+    line.stations[line.stations.length - 1].stationName
+  ]);
+
+  subwayLines.push(line);
+}
+
+export default function lineManageContainer(state) {
+  const addLineInput = document.getElementById(LINE_TAGS.LINE_NAME_INPUT_ID);
+  const addLineSubmit = document.getElementById(LINE_TAGS.ADD_LINE_ID);
+  const upLine = document.getElementById(LINE_TAGS.SELECT_UP_LINE_ID);
+  const downLine = document.getElementById(LINE_TAGS.SELECT_DOWN_LINE_ID);
+  makeSelectOptions(upLine, state.stationArray);
+  makeSelectOptions(downLine, state.stationArray);
+  loadLines(state);
+
+  addLineSubmit.addEventListener("click", () => {
+    if (upLine.value !== downLine.value) {
+      const lineNameInputValue = addLineInput.value.trim();
+      validateLineName(state.subwayLines, lineNameInputValue, upLine, downLine, addLineInput);
+    } else {
+      alert(LINE_ALERT_MESSAGES.ERROR_UPLINE_DOWNLINE_SAME);
+    }
+  });
+}
diff --git a/src/components/map-print-manage-container.js b/src/components/map-print-manage-container.js
new file mode 100644
index 000000000..f29fc0652
--- /dev/null
+++ b/src/components/map-print-manage-container.js
@@ -0,0 +1,39 @@
+import { state } from "../index.js";
+
+function printAllLineAndStations(elementToAppend, subwayLines) {
+  for (const line of subwayLines) {
+    printLineName(elementToAppend, line.lineName);
+    printStation(elementToAppend, line.stations);
+  }
+}
+
+function printLineName(elementToAppend, lineName) {
+  const h2 = document.createElement("h2");
+
+  h2.append(lineName);
+  elementToAppend.append(h2);
+}
+
+function printStation(elementToAppend, stationArray) {
+  for (const station of stationArray) {
+    const stationsInLine = document.createElement("li");
+    stationsInLine.append(station.stationName);
+    elementToAppend.append(stationsInLine);
+  }
+}
+
+export default function mapPrintManageContainer() {
+  const parent = document.getElementById("manage-map-print");
+  const div = document.createElement("div");
+
+  if (state.subwayLines.length) {
+    printAllLineAndStations(div, state.subwayLines);
+  } else {
+    const title = `<h2>노선이 없습니다.<br />노선에 아래의 역들을 등록해 주세요.</h2>`;
+    const titleElement = new DOMParser().parseFromString(title, "text/html").firstElementChild;
+    div.append(titleElement);
+    printStation(div, state.stationArray);
+  }
+
+  parent.append(div);
+}
diff --git a/src/components/section-manage-container.js b/src/components/section-manage-container.js
new file mode 100644
index 000000000..5392b8d63
--- /dev/null
+++ b/src/components/section-manage-container.js
@@ -0,0 +1,184 @@
+import { state, saveToLocalStorage } from "../index.js";
+import { LINE_ARRAY_KEY, SECTION_TAGS } from "../global/constant.js";
+import { CONFIRM_MESSAGES } from "../global/messages.js";
+import { SECTION_HTML, makeSectionHtml } from "../global/innerHtml.js";
+import { getStationByName } from "../utils/global-utils.js";
+import {
+  makeNewElementWithInnerHtml,
+  makeNewTdWithElement
+} from "../utils/display/make-elements.js";
+import sectionInputValidator, {
+  checkZero
+} from "../utils/inputs/validator/section-input-validator.js";
+
+import clearInput from "../utils/inputs/clear-input.js";
+
+function removeAllChild(element) {
+  while (element.firstChild) {
+    element.removeChild(element.firstChild);
+  }
+}
+
+function loadEditSectionLines() {
+  const parentDiv = document.getElementById(SECTION_TAGS.PARENT_SECTION_ID);
+
+  for (const line of state.subwayLines) {
+    const lineManageButton = makeNewElementWithInnerHtml("button", line.lineName);
+    lineManageButton.classList.add(SECTION_TAGS.LINE_MENU_BUTTON_CLASS);
+    lineManageButton.dataset.id = `manage-${line.id}`;
+
+    parentDiv.append(lineManageButton);
+  }
+}
+
+function indexOfNewElement(sectionInput, stationsInLine) {
+  if (sectionInput < stationsInLine.length) {
+    return sectionInput;
+  }
+  return stationsInLine.length;
+}
+
+function addSectionInput(input, option, line, tableBody) {
+  const sectionInputValue = checkZero(input.value);
+
+  if (sectionInputValidator(sectionInputValue, option.value, line.stations)) {
+    const newStation = getStationByName(option.value);
+    const newIndex = indexOfNewElement(sectionInputValue, line.stations);
+    const tr = makeOneRow(newStation, newIndex, line, tableBody);
+    line.stations.splice(parseInt(sectionInputValue), 0, newStation);
+
+    updateAddedIndex(newIndex, tableBody.children);
+    tableBody.insertBefore(tr, tableBody.children[newIndex]);
+    saveToLocalStorage(LINE_ARRAY_KEY, JSON.stringify(state.subwayLines));
+    clearInput(input);
+  } else {
+    clearInput(input);
+  }
+}
+
+function makeSelectOptions(stationArray) {
+  const selectWrapper = document.createElement("select");
+  selectWrapper.id = SECTION_TAGS.STATION_SELECTOR_ID;
+
+  for (const station of stationArray) {
+    const option = `<option value="${station.stationName}">${station.stationName}</option>`;
+    appendHtmlToParent(selectWrapper, option);
+  }
+  return selectWrapper;
+}
+
+function makeSectionManager(stationArray, wrapper, parent) {
+  const selectWrapper = makeSelectOptions(stationArray);
+
+  appendHtmlToParent(wrapper, SECTION_HTML.SECTION_TABLE_HTML);
+  wrapper.append(selectWrapper);
+  appendHtmlToParent(wrapper, SECTION_HTML.SECTION_INPUT_HTML);
+  parent.append(wrapper);
+}
+
+export default function sectionManageContainer() {
+  loadEditSectionLines();
+  const parentDiv = document.getElementById(SECTION_TAGS.PARENT_SECTION_ID);
+  const lineWrapperDiv = document.createElement("div");
+  lineWrapperDiv.id = "manage-wrapper";
+
+  for (const line of state.subwayLines) {
+    const manage = document.querySelector(`[data-id="manage-${line.id}"]`);
+    manage.addEventListener("click", () => {
+      removeAllChild(lineWrapperDiv);
+      appendHtmlToParent(lineWrapperDiv, makeSectionHtml(line.lineName));
+      makeSectionManager(state.stationArray, lineWrapperDiv, parentDiv);
+
+      const table = document.getElementById("section-table");
+      const tableBody = document.getElementById("section-tbody");
+
+      const selectedOption = document.getElementById(SECTION_TAGS.STATION_SELECTOR_ID);
+      const sectionInput = document.getElementById(SECTION_TAGS.ORDER_INPUT_ID);
+      const addSectionInputButton = document.getElementById(SECTION_TAGS.ADD_BUTTON_ID);
+
+      addSectionInputButton.addEventListener("click", () => {
+        addSectionInput(sectionInput, selectedOption, line, tableBody);
+      });
+
+      showTableItems(line, tableBody);
+      table.append(tableBody);
+      lineWrapperDiv.append(table);
+    });
+  }
+}
+
+// TODO - utils로 빼기
+
+function appendHtmlToParent(parent, html) {
+  const htmlDOM = new DOMParser().parseFromString(html, "text/html").body.childNodes;
+
+  for (const node of htmlDOM) {
+    parent.append(node);
+  }
+}
+
+function updateDeletedIndex(currentIndex, trDatas) {
+  for (let index = parseInt(currentIndex.innerHTML); index < trDatas.length; index++) {
+    trDatas[index].firstChild.innerHTML = parseInt(trDatas[index].firstChild.innerHTML) - 1;
+  }
+}
+
+function updateAddedIndex(currentIndex, trDatas) {
+  for (let index = parseInt(currentIndex); index < trDatas.length; index++) {
+    trDatas[index].firstChild.innerHTML = parseInt(trDatas[index].firstChild.innerHTML) + 1;
+  }
+}
+
+function deletedStationFromLine(currentStations, deleteButton) {
+  return currentStations.filter(
+    station => parseInt(deleteButton.dataset.id) !== parseInt(station.id)
+  );
+}
+
+function deleteStationFromLine(tr, line, tableBody) {
+  if (confirm(CONFIRM_MESSAGES.CONFIRM_DELETE)) {
+    line.stations = deletedStationFromLine(line.stations, tr.childNodes[2].firstChild);
+    tr.remove();
+
+    updateDeletedIndex(tr.childNodes[0], tableBody.children);
+  }
+  saveToLocalStorage(LINE_ARRAY_KEY, JSON.stringify(state.subwayLines));
+}
+
+function makeTdDeleteButton(station, tr, line, tableBody) {
+  const tdDeleteButton = makeNewElementWithInnerHtml("button", "노선에서 삭제");
+  tdDeleteButton.class = SECTION_TAGS.DELETE_BUTTON_CLASS;
+  tdDeleteButton.dataset.id = station.id;
+
+  tdDeleteButton.addEventListener("click", () => {
+    deleteStationFromLine(tr, line, tableBody);
+  });
+
+  return tdDeleteButton;
+}
+
+function makeTrWithDataset(station, index) {
+  const tr = document.createElement("tr");
+  tr.dataset.stationId = station.id;
+  tr.dataset.trId = index;
+
+  return tr;
+}
+
+function makeOneRow(station, index, line, tableBody) {
+  const tr = makeTrWithDataset(station, index);
+  const tdIndex = makeNewElementWithInnerHtml("td", index);
+  const tdStationName = makeNewElementWithInnerHtml("td", station.stationName);
+  const tdDeleteButton = makeTdDeleteButton(station, tr, line, tableBody);
+  const tdDelete = makeNewTdWithElement(tdDeleteButton);
+  tr.append(...[tdIndex, tdStationName, tdDelete]);
+
+  return tr;
+}
+
+function showTableItems(line, tableBody) {
+  for (const [index, station] of Object.entries(line.stations)) {
+    const tr = makeOneRow(station, index, line, tableBody);
+    tableBody.append(tr);
+  }
+}
diff --git a/src/components/station-manage-container.js b/src/components/station-manage-container.js
new file mode 100644
index 000000000..6a90aaabc
--- /dev/null
+++ b/src/components/station-manage-container.js
@@ -0,0 +1,50 @@
+import Station from "../domain/station.js";
+import inputNameValidator from "../utils/inputs/validator/name-validator.js";
+import clearInput from "../utils/inputs/clear-input.js";
+import { saveToLocalStorage } from "../index.js";
+import { showNewRow } from "../utils/display/make-elements.js";
+import { STATION_ARRAY_KEY, STATION_TAGS } from "../global/constant.js";
+
+const VALIDATION_TYPE = "STATION";
+
+function loadStations(state) {
+  for (const station of state.stationArray) {
+    showNewRow(STATION_TAGS.STATION_TBODY_ID, station, [station.stationName]);
+  }
+}
+
+function makeStationId(stationArray) {
+  let stationId = 0;
+
+  if (stationArray.length !== 0) {
+    stationId = stationArray[stationArray.length - 1].id + 1;
+  }
+
+  return stationId;
+}
+
+function makeNewStation(stationArray, stationNameInputValue) {
+  const stationId = makeStationId(stationArray);
+  const station = new Station(stationNameInputValue, stationId);
+
+  showNewRow(STATION_TAGS.STATION_TBODY_ID, station, [station.stationName]);
+  stationArray.push(station);
+  saveToLocalStorage(STATION_ARRAY_KEY, JSON.stringify(stationArray));
+}
+
+export default function stationManageContainer(state) {
+  const addStationButton = document.getElementById(STATION_TAGS.ADD_BUTTON_ID);
+  const stationNameInput = document.getElementById(STATION_TAGS.STATION_NAME_INPUT_ID);
+
+  loadStations(state);
+  addStationButton.addEventListener("click", () => {
+    const stationNameInputValue = stationNameInput.value.trim();
+
+    if (inputNameValidator(VALIDATION_TYPE, stationNameInputValue)) {
+      makeNewStation(state.stationArray, stationNameInputValue);
+      clearInput(stationNameInput);
+    } else {
+      clearInput(stationNameInput);
+    }
+  });
+}
diff --git a/src/components/total-subway-manage-container.js b/src/components/total-subway-manage-container.js
new file mode 100644
index 000000000..27064a85b
--- /dev/null
+++ b/src/components/total-subway-manage-container.js
@@ -0,0 +1,47 @@
+import stationManageContainer from "./station-manage-container.js";
+import lineManageContainer from "./line-manage-container.js";
+import sectionManageContainer from "./section-manage-container.js";
+import mapPrintManageContainer from "./map-print-manage-container.js";
+
+import { state } from "../index.js";
+import { menuIDs } from "../global/innerHtml.js";
+
+const menus = document.querySelectorAll("#menu > button");
+
+function removeAllChild(element) {
+  while (element.firstChild) {
+    element.removeChild(element.firstChild);
+  }
+}
+
+function createDOM(index) {
+  const html = menuIDs[index].html;
+  const createdDOM = new DOMParser().parseFromString(html, "text/html");
+
+  return createdDOM.body.firstChild;
+}
+
+function contentToShow(content, index) {
+  content.appendChild(createDOM(index));
+
+  if (index === 0) {
+    new stationManageContainer(state);
+  } else if (index === 1) {
+    new lineManageContainer(state);
+  } else if (index === 2) {
+    new sectionManageContainer();
+  } else if (index === 3) {
+    new mapPrintManageContainer();
+  }
+}
+
+export default function totalSubwayManageContainer() {
+  const content = document.getElementById("content");
+
+  for (const [index, child] of menus.entries()) {
+    child.addEventListener("click", () => {
+      removeAllChild(content);
+      contentToShow(content, index);
+    });
+  }
+}
diff --git a/src/domain/station.js b/src/domain/station.js
new file mode 100644
index 000000000..1118bcb02
--- /dev/null
+++ b/src/domain/station.js
@@ -0,0 +1,9 @@
+export default class Station {
+  constructor(stationName, id) {
+    this.stationName = stationName;
+    this.id = id;
+    this.type = "STATION";
+  }
+}
+
+export const allStationArray = [];
diff --git a/src/domain/subway-line.js b/src/domain/subway-line.js
new file mode 100644
index 000000000..201922c6c
--- /dev/null
+++ b/src/domain/subway-line.js
@@ -0,0 +1,8 @@
+export default class SubwayLine {
+  constructor(lineName, upLine, DownLine, id) {
+    this.lineName = lineName;
+    this.stations = [upLine, DownLine];
+    this.id = id;
+    this.type = "LINE";
+  }
+}
diff --git a/src/global/constant.js b/src/global/constant.js
new file mode 100644
index 000000000..8b7b61d2a
--- /dev/null
+++ b/src/global/constant.js
@@ -0,0 +1,24 @@
+export const STATION_ARRAY_KEY = "stationArray";
+export const LINE_ARRAY_KEY = "linesArray";
+
+export const STATION_TAGS = {
+  STATION_TBODY_ID: "stations",
+  ADD_BUTTON_ID: "station-add-button",
+  STATION_NAME_INPUT_ID: "station-name-input"
+};
+
+export const LINE_TAGS = {
+  LINE_NAME_INPUT_ID: "line-name-input",
+  SELECT_UP_LINE_ID: "line-start-station-selector",
+  SELECT_DOWN_LINE_ID: "line-end-station-selector",
+  ADD_LINE_ID: "line-add-button"
+};
+
+export const SECTION_TAGS = {
+  PARENT_SECTION_ID: "manage-sections",
+  LINE_MENU_BUTTON_CLASS: "section-line-menu-button",
+  STATION_SELECTOR_ID: "section-station-selector",
+  ORDER_INPUT_ID: "section-order-input",
+  ADD_BUTTON_ID: "section-add-button",
+  DELETE_BUTTON_CLASS: "section-delete-button"
+};
diff --git a/src/global/innerHtml.js b/src/global/innerHtml.js
new file mode 100644
index 000000000..b84e0b16c
--- /dev/null
+++ b/src/global/innerHtml.js
@@ -0,0 +1,108 @@
+import { SECTION_TAGS } from "../global/constant.js";
+
+export const menuIDs = {
+  0: {
+    id: "manage-station",
+    html: `
+          <div id="manage-station">
+            <div>
+              <h4>역 이름</h4>
+              <input
+                id="station-name-input"
+                type="text"
+                placeholder="역 이름을 입력해주세요."
+              />
+              <button id="station-add-button">역 추가</button>
+            </div>
+    
+            <div>
+              <h2>🚉 지하철 역 목록</h2>
+              <table border="1">
+                <thead>
+                  <tr>
+                    <th>역 이름</th>
+                    <th>설정</th>
+                  </tr>
+                </thead>
+                <tbody id="stations"></tbody>
+              </table>
+            </div>
+          </div>`
+  },
+  1: {
+    id: "manage-lines",
+    html: `
+            <div id="manage-lines">
+              <div>
+                <h4>노선 이름</h4>
+                <input
+                  id="line-name-input"
+                  type="text"
+                  placeholder="노선 이름을 입력해주세요."
+                />
+                <div class="line-select-box">
+                  상행 종점
+                  <select id="line-start-station-selector"></select><br />
+                  하행 종점
+                  <select id="line-end-station-selector"></select>
+                </div>
+                <button id="line-add-button">노선 추가</button>
+              </div>
+    
+              <div>
+                <h2>🚉 지하철 역 목록</h2>
+                <table border="1">
+                  <thead>
+                    <tr>
+                      <th>노선 이름</th>
+                      <th>상행 종점역</th>
+                      <th>하행 종점역</th>
+                      <th>설정</th>
+                    </tr>
+                  </thead>
+                  <tbody id="lines"></tbody>
+                </table>
+              </div>
+          </div>
+        `
+  },
+  2: {
+    id: "manage-sections",
+    html: `
+      <div id="manage-sections">
+        <h4>구간을 수정할 노선을 선택해 주세요.</h4>
+      </div>`
+  },
+  3: {
+    id: "manage-map-print",
+    html: `
+      <div id="manage-map-print"></div>
+      `
+  }
+};
+
+export const SECTION_HTML = {
+  SECTION_INPUT_HTML: `
+    <input id=${SECTION_TAGS.ORDER_INPUT_ID} placeholder="순서" />
+    <button type="submit" id=${SECTION_TAGS.ADD_BUTTON_ID}>등록</button>
+  `,
+  SECTION_TABLE_HTML: `
+    <table border="1" id="section-table">
+      <thead>
+        <tr>
+          <th>순서</th>
+          <th>이름</th>
+          <th>설정</th>
+        </tr>
+      </thead>
+      <tbody id="section-tbody"></tbody>
+    </table>`
+};
+
+export function makeSectionHtml(lineName) {
+  return `
+    <div id="choose-line">
+      <h4>${lineName} 관리</h4>
+      <h5>구간 등록</h5>
+    </div>`;
+}
diff --git a/src/global/messages.js b/src/global/messages.js
new file mode 100644
index 000000000..47ec22616
--- /dev/null
+++ b/src/global/messages.js
@@ -0,0 +1,26 @@
+export const STATION_ALERT_MESSAGES = {
+  ERROR_STATION_INPUT_DUPLICATED: "이미 존재하는 역 이름입니다.",
+  ERROR_STATION_INPUT_LENGTH_UNDER: "2글자 이상의 역 이름을 입력하셔야 합니다!",
+  ERROR_STATION_INPUT_SPECIAL_CHARACTER: "역 이름에는 특수문자가 입력되지 않습니다!",
+  ERROR_STATION_INPUT_NOT_COMPLETE: "역 이름을 바르게 작성해 주세요!",
+  ERROR_STATION_INPUT_MULTIPLE_SPACES: "1개 이하의 공백만 입력이 가능합니다!"
+};
+
+export const LINE_ALERT_MESSAGES = {
+  ERROR_LINE_INPUT_DUPLICATED: "이미 존재하는 노선 이름입니다.",
+  ERROR_LINE_INPUT_LENGTH_UNDER: "1글자 이상의 노선 이름을 입력하셔야 합니다!",
+  ERROR_LINE_INPUT_SPECIAL_CHARACTER: "노선 이름에는 특수문자가 입력되지 않습니다!",
+  ERROR_LINE_INPUT_NOT_COMPLETE: "노선 이름을 바르게 작성해 주세요!",
+  ERROR_LINE_INPUT_MULTIPLE_SPACES: "1개 이하의 공백만 입력이 가능합니다!",
+  ERROR_CANNOT_DELETE_STATION_IN_LINE: "노선에 존재하는 역은 삭제하실 수 없습니다.",
+  ERROR_UPLINE_DOWNLINE_SAME: "상행 종점 역과 하행 종점 역은 서로 달라야 합니다."
+};
+
+export const SECTION_ALERT_MESSAGES = {
+  ERROR_SECTION_INPUT_DUPLICATED: "한 구간에 중복된 역은 등록하실 수 없습니다.",
+  ERROR_SECTION_INPUT_NUMBER: "순서에는 정수 형태의 숫자를 입력해 주셔야 합니다."
+};
+
+export const CONFIRM_MESSAGES = {
+  CONFIRM_DELETE: "정말로 삭제하시겠습니까?"
+};
diff --git a/src/index.js b/src/index.js
index e69de29bb..55561038d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,25 @@
+import totalSubwayManageContainer from "./components/total-subway-manage-container.js";
+import { STATION_ARRAY_KEY, LINE_ARRAY_KEY } from "./global/constant.js";
+
+export const state = {
+  stationArray: [],
+  subwayLines: [],
+};
+
+export function saveToLocalStorage(key, value) {
+  localStorage.setItem(key, value);
+}
+
+function init() {
+  if (localStorage.getItem(STATION_ARRAY_KEY)) {
+    state.stationArray = JSON.parse(localStorage.getItem(STATION_ARRAY_KEY));
+  }
+
+  if (localStorage.getItem(LINE_ARRAY_KEY)) {
+    state.subwayLines = JSON.parse(localStorage.getItem(LINE_ARRAY_KEY));
+  }
+
+  totalSubwayManageContainer();
+}
+
+init();
diff --git a/src/utils/display/make-elements.js b/src/utils/display/make-elements.js
new file mode 100644
index 000000000..d665f3d83
--- /dev/null
+++ b/src/utils/display/make-elements.js
@@ -0,0 +1,116 @@
+import { state, saveToLocalStorage } from "../../index.js";
+import { LINE_ARRAY_KEY, STATION_ARRAY_KEY } from "../../global/constant.js";
+import {
+  CONFIRM_MESSAGES,
+  LINE_ALERT_MESSAGES,
+} from "../../global/messages.js";
+
+function confirmDelete(array, station, tr) {
+  const confirmDelete = confirm(CONFIRM_MESSAGES.CONFIRM_DELETE);
+
+  if (confirmDelete) {
+    deleteObject(array, station, tr);
+  }
+}
+
+function deleteObject(object, stationToDelete, tr) {
+  const deleteStation = object.filter(
+    (station) => station.id !== stationToDelete.id
+  );
+  tr.remove();
+  if (stationToDelete.type === "LINE") {
+    state.subwayLines = deleteStation;
+    saveToLocalStorage(LINE_ARRAY_KEY, JSON.stringify(deleteStation));
+  } else if (stationToDelete.type === "STATION") {
+    state.stationArray = deleteStation;
+    saveToLocalStorage(STATION_ARRAY_KEY, JSON.stringify(deleteStation));
+  }
+}
+
+function isContainedInLine(station) {
+  const isContained = state.subwayLines.filter((line) => {
+    let contain = false;
+    line.stations.filter((stations) => {
+      if (stations.stationName === station.stationName) {
+        contain = true;
+      }
+    });
+    return contain;
+  });
+
+  return isContained.length;
+}
+
+function alertContainedStationInLine(station, tr) {
+  if (isContainedInLine(station) === 0) {
+    confirmDelete(state.stationArray, station, tr);
+  } else {
+    return alert(LINE_ALERT_MESSAGES.ERROR_CANNOT_DELETE_STATION_IN_LINE);
+  }
+}
+
+function makeTdDeleteButton(station, tr) {
+  const td = document.createElement("td");
+  const deleteButtonHtml = `<button>삭제</button>`;
+  const deleteButton = new DOMParser().parseFromString(
+    deleteButtonHtml,
+    "text/html"
+  ).childNodes[0].lastElementChild.firstElementChild;
+
+  deleteButton.addEventListener("click", () => {
+    if (station.type === "LINE") {
+      confirmDelete(state.subwayLines, station, tr);
+    } else if (station.type === "STATION") {
+      alertContainedStationInLine(station, tr);
+    }
+  });
+  td.appendChild(deleteButton);
+
+  return td;
+}
+
+function makeOneRowWithDeleteButton(object, [...args]) {
+  const tr = document.createElement("tr");
+  const deleteButton = makeTdDeleteButton(object, tr);
+
+  for (const arg of [...args]) {
+    tr.appendChild(makeNewTdWithElement(arg));
+    tr.id = object.id;
+  }
+  tr.appendChild(deleteButton);
+
+  return tr;
+}
+
+export function showNewRow(parentID, rowToShow, [...args]) {
+  const oneRowWithDeleteButton = makeOneRowWithDeleteButton(rowToShow, [
+    ...args,
+  ]);
+  const locationOfRow = document.getElementById(parentID);
+
+  return locationOfRow.appendChild(oneRowWithDeleteButton);
+}
+
+export function makeSelectOptions(selectBox, optionToMakeArray) {
+  for (const optionValue of optionToMakeArray) {
+    const option = document.createElement("option");
+
+    option.value = optionValue.stationName;
+    option.text = optionValue.stationName;
+    selectBox.appendChild(option);
+  }
+}
+
+export function makeNewElementWithInnerHtml(elementType, innerHTML) {
+  const element = document.createElement(elementType);
+  element.innerHTML = innerHTML;
+
+  return element;
+}
+
+export function makeNewTdWithElement(element) {
+  const td = document.createElement("td");
+  td.append(element);
+
+  return td;
+}
diff --git a/src/utils/global-utils.js b/src/utils/global-utils.js
new file mode 100644
index 000000000..3cb9cf860
--- /dev/null
+++ b/src/utils/global-utils.js
@@ -0,0 +1,7 @@
+import { state } from "../index.js";
+
+export function getStationByName(name) {
+  return state.stationArray.filter(
+    (station) => station.stationName === name
+  )[0];
+}
diff --git a/src/utils/inputs/clear-input.js b/src/utils/inputs/clear-input.js
new file mode 100644
index 000000000..d383a93a5
--- /dev/null
+++ b/src/utils/inputs/clear-input.js
@@ -0,0 +1,3 @@
+export default function clearInput(elementToClear) {
+  elementToClear.value = "";
+}
diff --git a/src/utils/inputs/validator/name-validator.js b/src/utils/inputs/validator/name-validator.js
new file mode 100644
index 000000000..bb144a71b
--- /dev/null
+++ b/src/utils/inputs/validator/name-validator.js
@@ -0,0 +1,72 @@
+import { STATION_ALERT_MESSAGES, LINE_ALERT_MESSAGES } from "../../../global/messages.js";
+import { state } from "../../../index.js";
+
+const checkSpecialCharacter = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+₩\<\>@\#$%&\\\=\(\'\"]/;
+const checkInvalidKorean = /[|ㄱ-ㅎ|ㅏ-ㅣ]/;
+const checkMultipleSpaces = /\s{2,}/;
+const STATION_INPUT_MINIMUM_LENGTH = 2;
+const LINE_INPUT_MINIMUM_LENGTH = 1;
+
+function isDuplicatedName(array, name) {
+  let isDuplicated = false;
+
+  for (const object of array) {
+    if (object.type === "STATION" && object.stationName === name) {
+      isDuplicated = true;
+    }
+    if (object.type === "LINE" && object.lineName === name) {
+      isDuplicated = true;
+    }
+  }
+
+  return isDuplicated;
+}
+
+function isValidStationName(value) {
+  let isValid = false;
+
+  if (isDuplicatedName(state.stationArray, value)) {
+    alert(STATION_ALERT_MESSAGES.ERROR_STATION_INPUT_DUPLICATED);
+  } else if (value.length < STATION_INPUT_MINIMUM_LENGTH) {
+    alert(STATION_ALERT_MESSAGES.ERROR_STATION_INPUT_LENGTH_UNDER);
+  } else if (checkSpecialCharacter.test(value)) {
+    alert(STATION_ALERT_MESSAGES.ERROR_STATION_INPUT_SPECIAL_CHARACTER);
+  } else if (checkInvalidKorean.test(value)) {
+    alert(STATION_ALERT_MESSAGES.ERROR_STATION_INPUT_NOT_COMPLETE);
+  } else if (checkMultipleSpaces.test(value)) {
+    alert(STATION_ALERT_MESSAGES.ERROR_STATION_INPUT_MULTIPLE_SPACES);
+  } else {
+    isValid = true;
+  }
+
+  return isValid;
+}
+
+function isValidLineName(value) {
+  let isValid = false;
+
+  if (isDuplicatedName(state.subwayLines, value)) {
+    alert(LINE_ALERT_MESSAGES.ERROR_LINE_INPUT_DUPLICATED);
+  } else if (value.length < LINE_INPUT_MINIMUM_LENGTH) {
+    alert(LINE_ALERT_MESSAGES.ERROR_LINE_INPUT_LENGTH_UNDER);
+  } else if (checkSpecialCharacter.test(value)) {
+    alert(LINE_ALERT_MESSAGES.ERROR_LINE_INPUT_SPECIAL_CHARACTER);
+  } else if (checkInvalidKorean.test(value)) {
+    alert(LINE_ALERT_MESSAGES.ERROR_LINE_INPUT_NOT_COMPLETE);
+  } else if (checkMultipleSpaces.test(value)) {
+    alert(LINE_ALERT_MESSAGES.ERROR_LINE_INPUT_MULTIPLE_SPACES);
+  } else {
+    isValid = true;
+  }
+
+  return isValid;
+}
+
+export default function inputNameValidator(type, value) {
+  if (type === "STATION") {
+    return isValidStationName(value);
+  }
+  if (type === "LINE") {
+    return isValidLineName(value);
+  }
+}
diff --git a/src/utils/inputs/validator/section-input-validator.js b/src/utils/inputs/validator/section-input-validator.js
new file mode 100644
index 000000000..b6e4bade9
--- /dev/null
+++ b/src/utils/inputs/validator/section-input-validator.js
@@ -0,0 +1,40 @@
+import { SECTION_ALERT_MESSAGES } from "../../../global/messages.js";
+
+const checkNumber = /^\d+$/;
+const checkFirstDigitZero = /^0{1,}/;
+
+export function isDuplicatedStationInSection(selectedStation, stationsInLine) {
+  let isDuplicated = false;
+
+  for (const station of stationsInLine) {
+    if (station.stationName === selectedStation) {
+      isDuplicated = true;
+    }
+  }
+
+  return isDuplicated;
+}
+
+export function checkZero(inputValue) {
+  let deleteZeroInValue = inputValue.trim().replace(checkFirstDigitZero, "");
+
+  if (deleteZeroInValue === "") {
+    deleteZeroInValue = "0";
+  }
+
+  return deleteZeroInValue;
+}
+
+export default function sectionInputValidator(inputValue, selectedStation, stationsInLine) {
+  let isValid = false;
+
+  if (!checkNumber.test(inputValue)) {
+    alert(SECTION_ALERT_MESSAGES.ERROR_SECTION_INPUT_NUMBER);
+  } else if (isDuplicatedStationInSection(selectedStation, stationsInLine)) {
+    alert(SECTION_ALERT_MESSAGES.ERROR_SECTION_INPUT_DUPLICATED);
+  } else {
+    isValid = true;
+  }
+
+  return isValid;
+}