diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..3a2021c
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,28 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "airbnb-base",
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2015,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-console": "off",
+    "no-plusplus": "off",
+    "class-methods-use-this": "off",
+    "radix": "off",
+    "no-restricted-properties": "off",
+    "max-depth" : ["error", 2],
+    "no-return-assign" : "off",
+    "no-continue" : "off",
+    "no-param-reassign" : "off",
+    "import/extensions" : "off"
+  }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..98d3dc8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.ides
+.DS_Store
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..13a6d05
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "arrowParens": "always"
+}
diff --git a/README.md b/README.md
index 51abd25..3fa16a7 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,129 @@
-# javascript-subway-final
\ No newline at end of file
+# 🚇 지하철 노선도 경로 조회 미션
+- 등록된 지하철 노선도에서 경로를 조회하는 기능을 구현한다.
+
+## 🚀 기능 구현 목록
+### 초기 설정
+0. 공통조건 : 정상적으로 프로그램이 수행되지 않은 경우 `alert`으로 에러를 출력한다.
+1. 사용자가 프로그램을 시작하면 역, 노선, 구간 데이터가 초기화된다.
+    - [조건] 소요 시간과 거리는 양의 정수이다.
+```
+1. 지하철역으로 교대, 강남, 역삼, 남부터미널, 양재, 양재시민의숲, 매봉 역 정보가 등록되어 있다.
+2. 지하철 노선으로 2호선, 3호선, 신분당선이 등록되어 있다.
+3. 노선에 역이 아래와 같이 등록되어 있다.(왼쪽 끝이 상행 종점)
+    - 2호선: 교대 - ( 2km / 3분 ) - 강남 - ( 2km / 3분 ) - 역삼
+    - 3호선: 교대 - ( 3km / 2분 ) - 남부터미널 - ( 6km / 5분 ) - 양재 - ( 1km / 1분 ) - 매봉
+    - 신분당선: 강남 - ( 2km / 8분 ) - 양재 - ( 10km / 3분 ) - 양재시민의숲
+```
+2. 사용자는 출발역과 도착역을 입력할 수 있다.
+    - [예외처리] 등록되어 있지 않은 역을 입력한건 아닌지 검증한다.
+    - [예외처리] 역의 이름은 두 글자 이상으로 이루어져 있다.
+    - [예외처리] 출발역과 도착역이 다른 역인지 검증해야 한다.
+3. 사용자가 길찾기 버튼을 누르면 `최단 거리` 또는 `최소 시간` 옵션을 선택할  수 있다.
+4. 최단거리, 최소시간의 선택에 따라 총 거리 및 총 소요시간을 함께 출력한다.
+    - [예외처리] 출발역과 도착역이 연결되었는지 검증한다.
+
+## ✅ 프로그래밍 요구사항
+### 길찾기 관련 기능
+- 출발역을 입력하는 input 태그는 `departure-station-name-input` id 속성값을 가진다.
+- 도착역을 입력하는 input 태그는 `arrival-station-name-input` id 속성값을 가진다.
+- 최단거리, 최소시간을 선택하는 radio는 `search-type` name 속성값을 가진다.
+  - **radio option의 default 값은 최단거리이다.**
+- 길찾기 버튼은 `search-button` id 속성값을 가진다.
+- 📝 결과는 `table`을 이용하여 보여준다.
+
+## ❗️힌트
+## 데이터 초기화
+자바스크립트에서 데이터를 초기화하는 방법 중에 하나는 아래와 같이 data를 `export`하고, `import`하는 것이다.
+
+```javascript
+export const users = [
+  {
+    name: 'Alt'
+  },
+  {
+    name: 'Jamie'
+  },
+  {
+    name: 'Sony'
+  }
+]
+
+export const courses = [
+  {
+    name: 'frontend',
+  },
+  {
+    name: 'backend',
+  },
+  {
+    name: 'iOS',
+  },
+  {
+    name: 'Android',
+  }
+]
+
+```
+위와 같이 데이터를 `export`하면 아래와 같이 데이터를 `import` 하여 사용할 수 있다.
+```javascript
+import { users, courses } from './data.js'
+
+function App() {
+  this.users = users
+  this.courses = courses
+}
+```
+
+## 최단 경로 라이브러리
+- `utils/Dijkstra.js` 라이브러리를 활용하면 간편하게 최단거리를 조회할 수 있다.
+- 정점(Vertex)과 간선(Edge), 그리고 가중치 개념을 이용
+  - 정점: 지하철역
+  - 간선: 지하철역 연결정보
+  - 가중치: 거리 or 소요 시간
+- 최단 거리 기준 조회 시 가중치를 거리로 설정
+- 최소 시간 기준 조회 시 가중치를 시간으로 설정
+
+```javascript
+import Dijkstra from "./utils/Dijkstra.js";
+const dijkstra = new Dijkstra()
+
+//dijkstra.addEdge("출발역", "도착역", 거리 또는 시간);
+dijkstra.addEdge("V1", "V2", 2);
+dijkstra.addEdge("V2", "V3", 2);
+dijkstra.addEdge("V1", "V3", 100);
+
+const result = dijkstra.findShortestPath("V1", "V3");
+// result = ["V1", "V2", "V3"]
+```
+
+#### 테스트설명
+<img src="/images/dijkstra_example.png" width="400">
+
+- 역 사이의 거리를 고려하지 않는 경우 V1->V3 경로가 최단 경로
+- 역 사이의 거리를 고려할 경우 V1->V3 경로의 거리는 100km, V1->V2->V3 경로의 거리는 4km이므로 최단 경로는 V1->V2->V3
+
+<br>
+
+### 요구사항
+- 사용자가 잘못된 입력 값을 작성한 경우 `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](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var) 를 사용하지 않는다. [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) 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.
+- [template literal](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)을 이용해 데이터와 html string을 가독성 좋게 표현한다.
+
+<br/>
+
+## 📝 미션 저장소 및 진행 요구사항
+
+- 미션은 [https://github.com/woowacourse/javascript-subway-path-precourse](https://github.com/woowacourse/javascript-subway-path-precourse) 저장소를 fork/clone해 시작한다.
+- **기능을 구현하기 전에 javascript-subway-path-precourse/docs/README.md 파일에 구현할 기능 목록**을 정리해 추가한다.
+- **git의 commit 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가**한다.
+- [프리코스 과제 제출](https://github.com/woowacourse/woowacourse-docs/tree/master/precourse) 문서 절차를 따라 미션을 제출한다.
diff --git a/images/dijkstra_example.png b/images/dijkstra_example.png
new file mode 100644
index 0000000..7c75197
Binary files /dev/null and b/images/dijkstra_example.png differ
diff --git a/images/path_result.gif b/images/path_result.gif
new file mode 100644
index 0000000..ee394bd
Binary files /dev/null and b/images/path_result.gif differ
diff --git a/images/path_result.jpg b/images/path_result.jpg
new file mode 100644
index 0000000..40a4bed
Binary files /dev/null and b/images/path_result.jpg differ
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..77314c6
--- /dev/null
+++ b/index.css
@@ -0,0 +1,18 @@
+#input-search-station-container{
+  margin-bottom: 1rem;
+}
+
+.station-input-form-container >input {
+  height: 1.2rem;
+  margin-bottom: 1rem;
+}
+
+.path-selectors {
+  margin-bottom: 1rem;
+}
+
+#path-result-title {
+  font-size: 1.1rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cf5b93e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>지하철 길찾기</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+  <div id="app">
+    <section id="title">
+      <h1>🚇 지하철 길찾기</h1>
+    </section>
+
+    <section id="input-search-station-container"></section>
+    <scction id="path-search-result-container"></scction>
+  </div>
+  <script type="module" src="src/index.js"></script>
+  </body>
+</html>
diff --git a/src/controllers/MainController.js b/src/controllers/MainController.js
new file mode 100644
index 0000000..cecdc86
--- /dev/null
+++ b/src/controllers/MainController.js
@@ -0,0 +1,109 @@
+import SearchPathInputFormView from '../views/SearchPathInputFormView.js';
+import ResultSearchPathView from '../views/SearchPathResultView.js';
+
+import StationModel from '../models/StationModel.js';
+import StationDistanceModel from '../models/StationDistanceModel.js';
+import StationTimeModel from '../models/StationTimeModel.js';
+
+import { Lines2, Lines3, LineSinbundang } from '../utils/data.js';
+import { SEARCH_PATH_TYPE, ERROR_MESSAGE } from '../utils/constants.js';
+import stationInputValidator from '../utils/stationInputValidator.js';
+
+export default class MainController {
+  init() {
+    this.initStation();
+
+    this.searchPathInputForm = new SearchPathInputFormView()
+      .setup(document.querySelector('#input-search-station-container'))
+      .on('submitSearchInputValue', (e) => this.onSubmitSearchInputHandler(e.detail))
+      .on('onChangeSelector', (e) => this.onChangeSelectorHandler(e.detail));
+
+    this.resultSearchPath = new ResultSearchPathView()
+      .setup(document.querySelector('#path-search-result-container'))
+      .hide();
+
+    this.selectPathType = SEARCH_PATH_TYPE.MIN_DISTANCE;
+    this.stationTimeModel = new StationTimeModel();
+    this.stationDistanceModel = new StationDistanceModel();
+  }
+
+  initStation() {
+    this.stationmodel = new StationModel();
+
+    this.createStation(Lines2);
+    this.createStation(Lines3);
+    this.createStation(LineSinbundang);
+  }
+
+  createStation(Line) {
+    Line.forEach((station) => {
+      if (!this.stationmodel.getStationByName(station.stationName)) {
+        this.stationmodel.createStation(station.id, station.stationName, station.line);
+      } else {
+        this.stationmodel.addLIne(station.stationName, station.line);
+      }
+    });
+  }
+
+  findPath(departureStationName, arrivalStationName) {
+    this.selectPathType === SEARCH_PATH_TYPE.MIN_DISTANCE
+      ? this.getShortestDistancePath(departureStationName, arrivalStationName)
+      : this.getShortestTimePath(departureStationName, arrivalStationName);
+  }
+
+  getShortestDistancePath(departureStationName, arrivalStationName) {
+    const shortestDistancePath = this.stationDistanceModel.getShortestDistancePath(
+      departureStationName,
+      arrivalStationName
+    );
+    const totalShortestDistance = this.stationDistanceModel.getTotalDistance(shortestDistancePath);
+    const totalTime = this.stationTimeModel.getTotalTime(shortestDistancePath);
+    this.renderResultView(shortestDistancePath, totalShortestDistance, totalTime);
+  }
+
+  getShortestTimePath(departureStationName, arrivalStationName) {
+    const shortestTimePath = this.stationTimeModel.getShortestTimePath(
+      departureStationName,
+      arrivalStationName
+    );
+    console.log(this.stationTimeModel.getTotalTime(shortestTimePath));
+    const totalShortestTime = this.stationTimeModel.getTotalTime(shortestTimePath);
+    const totalDistance = this.stationDistanceModel.getTotalDistance(shortestTimePath);
+    this.renderResultView(shortestTimePath, totalDistance, totalShortestTime);
+  }
+
+  renderResultView(path, totalDistance, totalTime) {
+    this.resultSearchPath.renderSearchPathResult(
+      path,
+      totalDistance,
+      totalTime,
+      this.selectPathType
+    );
+    this.resultSearchPath.show();
+  }
+
+  isValidStation(departureStationName, arrivalStationName) {
+    this.departureStationName = departureStationName.trim();
+    this.arrivalStationName = arrivalStationName.trim();
+
+    stationInputValidator(
+      this.departureStationName,
+      this.arrivalStationName,
+      this.stationmodel.getStationNames()
+    )
+      ? this.findPath(departureStationName, arrivalStationName)
+      : this.searchPathInputForm.resetInputForm();
+  }
+
+  onSubmitSearchInputHandler({ departureStationName, arrivalStationName }) {
+    this.isValidStation(departureStationName, arrivalStationName);
+  }
+
+  onChangeSelectorHandler(targetId) {
+    if (!this.departureStationName || !this.arrivalStationName) {
+      return alert(ERROR_MESSAGE.IS_NOT_INPUT);
+    }
+    this.selectPathType = targetId;
+    this.findPath(this.departureStationName, this.arrivalStationName);
+  }
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..38001d7
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,5 @@
+import MainController from './controllers/MainController.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  new MainController().init();
+});
diff --git a/src/models/Station.js b/src/models/Station.js
new file mode 100644
index 0000000..777695c
--- /dev/null
+++ b/src/models/Station.js
@@ -0,0 +1,11 @@
+export default class Station {
+  constructor(id, name) {
+    this.id = id;
+    this.name = name;
+    this.lineNumber = [];
+  }
+
+  setLine(lineNumber) {
+    this.lineNumber.push(lineNumber);
+  }
+}
diff --git a/src/models/StationDistanceModel.js b/src/models/StationDistanceModel.js
new file mode 100644
index 0000000..4a23b80
--- /dev/null
+++ b/src/models/StationDistanceModel.js
@@ -0,0 +1,40 @@
+import { stationDistance } from '../utils/data.js';
+import Dijkstra from '../utils/Dijkstra.js';
+
+export default class StationDistanceModel {
+  constructor() {
+    this.distances = stationDistance;
+    this.dijkstra = new Dijkstra();
+  }
+
+  setDistance() {
+    this.distances.forEach((station) => {
+      this.dijkstra.addEdge(station.departureStation, station.endStation, station.distance);
+    });
+  }
+
+  getShortestDistancePath(departureStation, endStation) {
+    this.setDistance();
+    // todo 연결되지 않은 곳일 때 예외처리
+    return this.dijkstra.findShortestPath(departureStation, endStation);
+  }
+
+  getTotalDistance(path) {
+    return path.reduce((totalDistance, station, index) => {
+      if (index !== path.length - 1) {
+        totalDistance += this.getOneDistance(station, path[index + 1]);
+      }
+      return totalDistance;
+    }, 0);
+  }
+
+  getOneDistance(departureStation, endStation) {
+    return parseInt(
+      this.distances.find(
+        (time) =>
+          (time.departureStation === departureStation && time.endStation === endStation) ||
+          (time.departureStation === endStation && time.endStation === departureStation)
+      ).distance
+    );
+  }
+}
diff --git a/src/models/StationModel.js b/src/models/StationModel.js
new file mode 100644
index 0000000..da6ec4f
--- /dev/null
+++ b/src/models/StationModel.js
@@ -0,0 +1,25 @@
+import Station from './Station.js';
+
+export default class StationModel {
+  constructor() {
+    this.stations = [];
+  }
+
+  createStation(id, stationName, lineNumber) {
+    const station = new Station(id, stationName);
+    station.setLine(lineNumber);
+    this.stations.push(station);
+  }
+
+  getStationByName(stationName) {
+    return this.stations.find((station) => station.name === stationName);
+  }
+
+  getStationNames() {
+    return this.stations.map((station) => station.name);
+  }
+
+  addLIne(stationName, stationLine) {
+    this.getStationByName(stationName).setLine(stationLine);
+  }
+}
diff --git a/src/models/StationTimeModel.js b/src/models/StationTimeModel.js
new file mode 100644
index 0000000..a066e73
--- /dev/null
+++ b/src/models/StationTimeModel.js
@@ -0,0 +1,39 @@
+import { stationTime } from '../utils/data.js';
+import Dijkstra from '../utils/Dijkstra.js';
+
+export default class StationTimeModel {
+  constructor() {
+    this.times = stationTime;
+    this.dijkstra = new Dijkstra();
+  }
+
+  setTime() {
+    this.times.forEach((station) => {
+      this.dijkstra.addEdge(station.departureStation, station.endStation, station.time);
+    });
+  }
+
+  getShortestTimePath(departureStation, endStation) {
+    this.setTime();
+    return this.dijkstra.findShortestPath(departureStation, endStation);
+  }
+
+  getTotalTime(path) {
+    return path.reduce((totalTime, station, index) => {
+      if (index !== path.length - 1) {
+        totalTime += this.getOneTime(station, path[index + 1]);
+      }
+      return totalTime;
+    }, 0);
+  }
+
+  getOneTime(departureStation, endStation) {
+    return parseInt(
+      this.times.find(
+        (time) =>
+          (time.departureStation === departureStation && time.endStation === endStation) ||
+          (time.departureStation === endStation && time.endStation === departureStation)
+      ).time
+    );
+  }
+}
diff --git a/src/utils/Dijkstra.js b/src/utils/Dijkstra.js
new file mode 100644
index 0000000..7c6cfd5
--- /dev/null
+++ b/src/utils/Dijkstra.js
@@ -0,0 +1,220 @@
+export default function Dijkstra() {
+  const Node = {
+    init: function (val, priority) {
+      this.val = val;
+      this.priority = priority;
+    },
+  };
+
+  const PriorityQueue = {
+    init: function () {
+      this.values = [];
+    },
+    enqueue: function (val, priority) {
+      const newNode = Object.create(Node);
+      newNode.init(val, priority);
+
+      this.values.push(newNode);
+
+      let idxOfNewNode = this.values.length - 1;
+
+      while (idxOfNewNode > 0) {
+        const idxOfParentNode = Math.floor((idxOfNewNode - 1) / 2);
+
+        const parentNode = this.values[idxOfParentNode];
+
+        if (priority < parentNode.priority) {
+          this.values[idxOfParentNode] = newNode;
+          this.values[idxOfNewNode] = parentNode;
+          idxOfNewNode = idxOfParentNode;
+          continue;
+        }
+        break;
+      }
+      return this.values;
+    },
+    dequeue: function () {
+      if (this.values.length == 0) {
+        return;
+      }
+      const dequeued = this.values.shift();
+      const lastItem = this.values.pop();
+      if (!lastItem) {
+        return dequeued;
+      }
+      this.values.unshift(lastItem);
+
+      let idxOfTarget = 0;
+
+      while (true) {
+        let idxOfLeftChild = idxOfTarget * 2 + 1;
+        let idxOfRightChild = idxOfTarget * 2 + 2;
+        let leftChild = this.values[idxOfLeftChild];
+        let rightChild = this.values[idxOfRightChild];
+
+        function swap(direction) {
+          const idxOfChild =
+            direction == "left" ? idxOfLeftChild : idxOfRightChild;
+          const child = direction == "left" ? leftChild : rightChild;
+          this.values[idxOfChild] = this.values[idxOfTarget];
+          this.values[idxOfTarget] = child;
+          idxOfTarget = idxOfChild;
+        }
+
+        if (!leftChild) {
+          return dequeued;
+        }
+
+        if (!rightChild) {
+          if (leftChild.priority < lastItem.priority) {
+            swap.call(this, "left");
+            continue;
+          }
+          return dequeued;
+        }
+
+        if (leftChild.priority == rightChild.priority) {
+          swap.call(this, "left");
+          continue;
+        }
+
+        if (
+          leftChild.priority < rightChild.priority &&
+          leftChild.priority < lastItem.priority
+        ) {
+          swap.call(this, "left");
+          continue;
+        }
+
+        if (
+          rightChild.priority < leftChild.priority &&
+          rightChild.priority < lastItem.priority
+        ) {
+          swap.call(this, "right");
+          continue;
+        }
+      }
+    },
+  };
+
+  const WeightedGraph = {
+    init: function () {
+      this.adjacencyList = {};
+      this.length = 0;
+    },
+    addVertex: function (vertex) {
+      if (!this.adjacencyList.hasOwnProperty(vertex)) {
+        this.adjacencyList[vertex] = {};
+        this.length++;
+      }
+    },
+    addEdge: function (vertex1, vertex2, weight) {
+      this.addVertex(vertex1);
+      this.addVertex(vertex2);
+      this.adjacencyList[vertex1][vertex2] = weight;
+      this.adjacencyList[vertex2][vertex1] = weight;
+      return this.adjacencyList;
+    },
+    removeEdge: function (vertex1, vertex2) {
+      if (!this.adjacencyList.hasOwnProperty(vertex1)) {
+        return `There's no ${vertex1}`;
+      }
+      if (!this.adjacencyList.hasOwnProperty(vertex2)) {
+        return `There's no ${vertex2}`;
+      }
+
+      function removeHelper(v1, v2) {
+        if (!this.adjacencyList.hasOwnProperty(v1)) {
+          return `There's no edge between ${v1} and ${v2}`;
+        }
+        delete this.adjacencyList[v1][v2];
+        if (Object.keys(this.adjacencyList[v1]).length == 0) {
+          delete this.adjacencyList[v1];
+        }
+      }
+
+      removeHelper.call(this, vertex1, vertex2);
+      removeHelper.call(this, vertex2, vertex1);
+
+      return this.adjacencyList;
+    },
+    removeVertex: function (vertex) {
+      if (!this.adjacencyList.hasOwnProperty(vertex)) {
+        return `There's no ${vertex}`;
+      }
+      const edges = this.adjacencyList[vertex];
+      for (const key in edges) {
+        this.removeEdge(key, vertex);
+      }
+      return this.adjacencyList;
+    },
+    findShortestRoute: function (start, end) {
+      if (!start || !end) {
+        throw Error("출발지와 도착지를 모두 입력해야 합니다.");
+      }
+      const distance = {};
+      const previous = {};
+      const pq = Object.create(PriorityQueue);
+      pq.init();
+      pq.enqueue(start, 0);
+      const visited = {};
+
+      const hashOfVertex = this.adjacencyList;
+      for (const vertexName in hashOfVertex) {
+        const priority = vertexName == start ? 0 : Infinity;
+        distance[vertexName] = priority;
+        previous[vertexName] = null;
+      }
+
+      while (true) {
+        let current = pq.dequeue();
+        if (!current?.val) {
+          return;
+        }
+        current = current.val;
+        if (current == end) {
+          break;
+        }
+        const neighbors = hashOfVertex[current];
+
+        for (const vertexName in neighbors) {
+          if (visited.hasOwnProperty(vertexName)) {
+            continue;
+          }
+          const distFromStart = distance[current] + neighbors[vertexName];
+
+          if (distFromStart < distance[vertexName]) {
+            pq.enqueue(vertexName, distFromStart);
+            distance[vertexName] = distFromStart;
+            previous[vertexName] = current;
+          }
+        }
+        visited[current] = true;
+      }
+
+      let node = end;
+
+      const route = [];
+      while (node) {
+        route.unshift(node);
+        node = previous[node];
+      }
+
+      return route;
+    },
+  };
+
+  this.addEdge = (source, target, weight) => {
+    WeightedGraph.addEdge(source, target, weight);
+  };
+
+  this.findShortestPath = (source, target) => {
+    return WeightedGraph.findShortestRoute(source, target);
+  };
+
+  this.addVertex = (vertex) => {
+    WeightedGraph.addVertex(vertex);
+  };
+
+  WeightedGraph.init();
+}
diff --git a/src/utils/constants.js b/src/utils/constants.js
new file mode 100644
index 0000000..61a2ba4
--- /dev/null
+++ b/src/utils/constants.js
@@ -0,0 +1,27 @@
+const MIN_LENGTH_OF_NAME = 2;
+
+const LINE_NUMBER = {
+  LINE2: 2,
+  LINE3: 3,
+  LINE_SINBUNDANG: 4,
+};
+
+const ERROR_MESSAGE = {
+  IS_EMPTY_STRING: '역을 입력해주세요',
+  IS_SAME_STATION: '서로 다른 역을 입력해주세요',
+  IS_TOO_SHORT_STRING: '역이름은 두 글자 이상입니다',
+  IS_NOT_EXIST: '존재하지 않는 역입니다',
+  IS_NOT_INPUT: '역을 먼저 입력해주세요',
+};
+
+const SEARCH_PATH_TYPE = {
+  MIN_TIME: '최소시간',
+  MIN_DISTANCE: '최단거리',
+};
+
+const UNIT = {
+  DISTANCE: 'km',
+  TIME: '분',
+};
+
+export { MIN_LENGTH_OF_NAME, ERROR_MESSAGE, LINE_NUMBER, SEARCH_PATH_TYPE, UNIT };
diff --git a/src/utils/data.js b/src/utils/data.js
new file mode 100644
index 0000000..2fa7783
--- /dev/null
+++ b/src/utils/data.js
@@ -0,0 +1,136 @@
+import { LINE_NUMBER } from './constants.js';
+
+export const Lines2 = [
+  {
+    id: 1,
+    stationName: '교대',
+    line: LINE_NUMBER.LINE2,
+  },
+  {
+    id: 2,
+    stationName: '강남',
+    line: LINE_NUMBER.LINE2,
+  },
+  {
+    id: 3,
+    stationName: '역삼',
+    line: LINE_NUMBER.LINE2,
+  },
+];
+
+export const Lines3 = [
+  {
+    id: 4,
+    stationName: '교대',
+    line: LINE_NUMBER.LINE3,
+  },
+  {
+    id: 5,
+    stationName: '남부터미널',
+    line: LINE_NUMBER.LINE3,
+  },
+  {
+    id: 6,
+    stationName: '양재',
+    line: LINE_NUMBER.LINE3,
+  },
+  {
+    id: 7,
+    stationName: '매봉',
+    line: LINE_NUMBER.LINE3,
+  },
+];
+
+export const LineSinbundang = [
+  {
+    id: 8,
+    stationName: '강남',
+    line: LINE_NUMBER.LINE_SINBUNDANG,
+  },
+  {
+    id: 9,
+    stationName: '양재',
+    line: LINE_NUMBER.LINE_SINBUNDANG,
+  },
+  {
+    id: 10,
+    stationName: '양재시민의숲',
+    line: LINE_NUMBER.LINE_SINBUNDANG,
+  },
+];
+
+export const stationTime = [
+  {
+    departureStation: '교대',
+    endStation: '강남',
+    time: 3,
+  },
+  {
+    departureStation: '강남',
+    endStation: '역삼',
+    time: 3,
+  },
+  {
+    departureStation: '교대',
+    endStation: '남부터미널',
+    time: 2,
+  },
+  {
+    departureStation: '남부터미널',
+    endStation: '양재',
+    time: 5,
+  },
+  {
+    departureStation: '양재',
+    endStation: '매봉',
+    time: 1,
+  },
+  {
+    departureStation: '강남',
+    endStation: '양재',
+    time: 8,
+  },
+  {
+    departureStation: '양재',
+    endStation: '양재시민의숲',
+    time: 3,
+  },
+];
+
+export const stationDistance = [
+  {
+    departureStation: '교대',
+    endStation: '강남',
+    distance: 2,
+  },
+  {
+    departureStation: '강남',
+    endStation: '역삼',
+    distance: 2,
+  },
+  {
+    departureStation: '교대',
+    endStation: '남부터미널',
+    distance: 3,
+  },
+  {
+    departureStation: '남부터미널',
+    endStation: '양재',
+    distance: 6,
+  },
+  {
+    departureStation: '양재',
+    endStation: '매봉',
+    distance: 1,
+  },
+  {
+    departureStation: '강남',
+    endStation: '양재',
+    distance: 2,
+  },
+  {
+    departureStation: '양재',
+    endStation: '양재시민의숲',
+    distance: 10,
+  },
+];
diff --git a/src/utils/stationInputValidator.js b/src/utils/stationInputValidator.js
new file mode 100644
index 0000000..3ea04fe
--- /dev/null
+++ b/src/utils/stationInputValidator.js
@@ -0,0 +1,36 @@
+import { ERROR_MESSAGE } from './constants.js';
+
+const isNotNull = (departureStationName, arrivalStationName) => {
+  return departureStationName === '' || arrivalStationName === ''
+    ? alert(ERROR_MESSAGE.IS_EMPTY_STRING)
+    : true;
+};
+
+const isMoreThanOneString = (departureStationName, arrivalStationName) => {
+  return departureStationName.length > 1 && arrivalStationName.length > 1
+    ? true
+    : alert(ERROR_MESSAGE.IS_TOO_SHORT_STRING);
+};
+
+const isNotSameStation = (departureStationName, arrivalStationName) => {
+  return departureStationName !== arrivalStationName ? true : alert(ERROR_MESSAGE.IS_SAME_STATION);
+};
+
+const isExistStation = (departureStationName, arrivalStationName, stationNames) => {
+  return stationNames.includes(departureStationName) && stationNames.includes(arrivalStationName)
+    ? true
+    : alert(ERROR_MESSAGE.IS_NOT_EXIST);
+};
+
+export default function stationInputValidator(
+  departureStationName,
+  arrivalStationName,
+  stationNames
+) {
+  return (
+    isNotNull(departureStationName, arrivalStationName) &&
+    isMoreThanOneString(departureStationName, arrivalStationName) &&
+    isNotSameStation(departureStationName, arrivalStationName) &&
+    isExistStation(departureStationName, arrivalStationName, stationNames)
+  );
+}
diff --git a/src/views/SearchPathInputFormView.js b/src/views/SearchPathInputFormView.js
new file mode 100644
index 0000000..80e5461
--- /dev/null
+++ b/src/views/SearchPathInputFormView.js
@@ -0,0 +1,76 @@
+import View from './View.js';
+import { SEARCH_PATH_TYPE } from '../utils/constants.js';
+
+export default class SearchPathInputFormView extends View {
+  setup($element) {
+    this.init($element);
+    this.renderSearchInputForm();
+    return this;
+  }
+
+  renderSearchInputForm() {
+    this.$element.innerHTML =
+      this.getInputStationFormHTML() + this.getSelectSearchTypeBtnHTML() + this.getSubmitBtnHTML();
+
+    this.$departureStationInput = this.$element.querySelector('#departure-station-name-input');
+    this.$ArrivalStationInput = this.$element.querySelector('#arrival-station-name-input');
+    this.$pathSelectorContainer = this.$element.querySelector('.path-selectors');
+
+    this.bindInputEvent();
+    this.bindClickEvent();
+    return this;
+  }
+
+  getInputStationFormHTML() {
+    return `<div class="station-input-form-container">
+        <label>출발역</label>
+        <input id="departure-station-name-input" type="text" placeholder="">
+        <br />
+        <label>도착역</label>
+        <input id="arrival-station-name-input" type="text" placeholder="">
+      </div>`;
+  }
+
+  getSelectSearchTypeBtnHTML() {
+    return `<div class="path-selectors">
+        <input type="radio" id=${SEARCH_PATH_TYPE.MIN_DISTANCE} name="search-type" checked> <label id="min_distance_selector_label" for=${SEARCH_PATH_TYPE.MIN_DISTANCE}>최단거리</label>
+        <input type="radio" id=${SEARCH_PATH_TYPE.MIN_TIME} name="search-type"> <label for=${SEARCH_PATH_TYPE.MIN_TIME}>최소시간</label>
+      </div>`;
+  }
+
+  getSubmitBtnHTML() {
+    return `<button id="search-button">길 찾기</button>`;
+  }
+
+  resetInputForm() {
+    this.$departureStationInput.value = '';
+    this.$ArrivalStationInput.value = '';
+  }
+
+  bindInputEvent() {
+    this.$element
+      .querySelector('#search-button')
+      .addEventListener('click', () => this.onSubmitSearchPathHandler());
+  }
+
+  onSubmitSearchPathHandler() {
+    const searchInputValue = {
+      departureStationName: this.$departureStationInput.value,
+      arrivalStationName: this.$ArrivalStationInput.value,
+    };
+
+    this.emit('submitSearchInputValue', searchInputValue);
+  }
+
+  bindClickEvent() {
+    this.$pathSelectorContainer.addEventListener('click', (e) =>
+      this.onChangeSearchPathHandler(e.target.id)
+    );
+  }
+
+  onChangeSearchPathHandler(targetId) {
+    if (targetId === SEARCH_PATH_TYPE.MIN_DISTANCE || targetId === SEARCH_PATH_TYPE.MIN_TIME) {
+      this.emit('onChangeSelector', targetId);
+    }
+  }
+}
diff --git a/src/views/SearchPathResultView.js b/src/views/SearchPathResultView.js
new file mode 100644
index 0000000..220bd6f
--- /dev/null
+++ b/src/views/SearchPathResultView.js
@@ -0,0 +1,46 @@
+import View from './View.js';
+import { UNIT } from '../utils/constants.js';
+
+export default class SearchPathInputFormView extends View {
+  setup($element) {
+    this.init($element);
+    return this;
+  }
+
+  renderSearchPathResult(path, totalDistance, totalTime, searchType) {
+    this.$element.innerHTML = this.getSearchPathResultHTML(
+      path,
+      totalDistance,
+      totalTime,
+      searchType
+    );
+    return this;
+  }
+
+  getSearchPathResultHTML(path, totalDistance, totalTime, searchType) {
+    return `<h2>📝 결과</h2>
+      <table border="1">
+        <caption id="path-result-title">${searchType}</caption>
+        <thead>
+          <tr>
+            <th>총 거리</th>
+            <th>총 소요시간</th>
+          </tr>
+        </thead>
+        <tbody class="station_manager_tbody">
+          <tr>
+            <td>${totalDistance}${UNIT.DISTANCE}</td>
+            <td>${totalTime}${UNIT.TIME}</td>
+          </tr>
+          <tr>
+            <td colspan="2">${this.getPathHTML(path)}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>`;
+  }
+
+  getPathHTML(path) {
+    return `${path.join('👉🏻')}`;
+  }
+}
diff --git a/src/views/View.js b/src/views/View.js
new file mode 100644
index 0000000..99f7c03
--- /dev/null
+++ b/src/views/View.js
@@ -0,0 +1,28 @@
+export default class View {
+  init($element) {
+    if (!$element) throw $element;
+    this.$element = $element;
+    return this;
+  }
+
+  on(event, eventHandler) {
+    this.$element.addEventListener(event, eventHandler);
+    return this;
+  }
+
+  emit(event, data) {
+    const newEvent = new CustomEvent(event, { detail: data });
+    this.$element.dispatchEvent(newEvent);
+    return this;
+  }
+
+  hide() {
+    this.$element.style.display = 'none';
+    return this;
+  }
+
+  show() {
+    this.$element.style.display = '';
+    return this;
+  }
+}