diff --git a/README.md b/README.md
index 51abd25..4b838f2 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,146 @@
-# javascript-subway-final
\ No newline at end of file
+# 🚇 지하철 노선도 경로 조회 미션
+- 등록된 지하철 노선도에서 경로를 조회하는 기능을 구현한다.
+
+## 🚀 기능 요구사항
+> 프리코스 3주차 미션에서 사용한 코드를 참고해도 무관하다.
+
+### 초기 설정
+- 프로그램 시작 시 역, 노선, 구간 데이터를 초기 설정 해야 한다.
+- 거리와 소요 시간은 양의 정수이며 단위는 km와 분을 의미한다.
+- 아래의 사전 등록 정보로 반드시 초기 설정을 한다.
+
+```
+1. 지하철역으로 교대, 강남, 역삼, 남부터미널, 양재, 양재시민의숲, 매봉 역 정보가 등록되어 있다.
+2. 지하철 노선으로 2호선, 3호선, 신분당선이 등록되어 있다.
+3. 노선에 역이 아래와 같이 등록되어 있다.(왼쪽 끝이 상행 종점)
+    - 2호선: 교대 - ( 2km / 3분 ) - 강남 - ( 2km / 3분 ) - 역삼
+    - 3호선: 교대 - ( 3km / 2분 ) - 남부터미널 - ( 6km / 5분 ) - 양재 - ( 1km / 1분 ) - 매봉
+    - 신분당선: 강남 - ( 2km / 8분 ) - 양재 - ( 10km / 3분 ) - 양재시민의숲
+```
+
+### 경로 조회 기능
+<img src="/images/path_result.jpg" width="100%">
+
+- 출발역과 도착역을 입력받아 경로를 조회한다.
+- 경로 조회 시 총 거리, 총 소요 시간을 함께 출력한다.
+- 경로 조회 시 `최단 거리` 또는 `최소 시간` 옵션을 선택할  수 있다.
+
+### 예외 처리
+- 출발역과 도착역은 2글자 이상이어야 한다.
+- 존재하지 않는 역을 출발역 또는 도착역으로 입력할 수 없다.
+- 경로 조회 시 출발역과 도착역이 같을 수 없다.
+- 경로 조회 시 출발역과 도착역이 연결되지 않으면 경로를 조회할 수 없다.
+- 그 외 정상적으로 프로그램이 수행되지 않은 경우 `alert`으로 에러를 출력한다.
+
+<br>
+
+## 💻 프로그래밍 실행 결과
+### 경로 조회
+<img src="/images/path_result.gif" width="100%">
+
+
+## ✅ 프로그래밍 요구사항
+### 길찾기 관련 기능
+- 출발역을 입력하는 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/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..13907b1
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,291 @@
+# 기능 구현 목록
+
+1. 데이터 초기화
+
+   1. data.js에 정리하기
+   2. 지하철 역: 교대, 강남, 역삼, 남부터미널, 양재, 양재시민의숲, 매봉
+   3. 지하철 노선: 2호선, 3호선, 신분당선
+      - 2호선: 교대 - (2km / 3분) - 강남 - (2km / 3분) - 역삼
+      - 3호선: 교대 - (3km / 2분) - 남부터미널 - (6km / 5분) - 양재 - (1km / 1분) - 매봉
+      - 신분당선: 강남 - (2km / 8분) - 양재 - (10km / 3분) - 양재시민의숲
+
+2. 경로 조회
+
+   1. `getFromStation`: 출발역 입력 받기 함수
+   2. `getToStation`: 도착역 입력 받기 함수
+   3. `getOption`: 최단거리 or 최소시간 선택 함수
+
+3. 예외 처리 (<u>밑줄의 경우</u>에만 로직 처리)
+
+   1. `vaildStationNameLength`: 출발역/도착역 이름이 2글자 이상인지 확인하는 함수
+      (<u>true: 2글자 이상,</u> false: 2글자 미만)
+   2. `notExsistStation`: 존재하지 않는 역 여부 확인 함수
+      (true: 존재하지 않는 역, <u>false: 존재하는 역</u>)
+   3. `sameStation`: 출발역/도착역 이름이 같은지 확인하는 함수
+      (true: 같음, <u>false: 같지 않음</u>)
+   4. `connected`: 출발역과 도착역이 연결되었는지 확인하는 함수
+      (<u>true: 연결됨</u>, false: 연결되지 않음)
+   5. `alertError`: 그 외 정상적이지 않은 프로그램 수행 알림 함수
+
+4. 길찾기 관련 기능
+
+   1. 출발역 input 태그 id 속성값: `departure-station-name-input`
+   2. 도착역 input 태그 id 속성값: `arrival-station-name-input`
+   3. 최소시간/최단거리 선택 radio의 name 속성값: `search-type`
+      - radio option의 기본값: `최단거리`
+   4. 길찾기 버튼 id 속성값: `search-button`
+   5. 결과 출력: `table`
+
+5. 최단 경로 라이브러리: `utils/Dijkstra.js`에 정리되어 있음
+
+   ```javascript
+   export default function Dijkstra() {
+     
+       // Node: 역에대한 정보, 우선순위를 갖는 노드
+     const Node = {
+       init: function (val, priority) {
+         this.val = val;
+         this.priority = priority;
+       },
+     };
+     
+     // 다익스트라 알고리즘의 기반 자료구조, 우선순위 큐
+     const PriorityQueue = {
+       // 우선순위 큐의 초기값은 빈 배열
+       init: function () {
+         this.values = [];
+       },
+       
+       // 우선순위 큐에 노드를 생성(create & init)해서 큐에 넣는다.
+       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;
+         }
+         // enqueue 로직이 끝나면 우선순위대로 정렬된 values를 리턴
+         return this.values;
+       },
+         
+       // 우선순위 큐에서 노드 삭제
+       dequeue: function () {
+         // 만약 우선순위 큐에 들어있는 값이 없으면 삭제할 수 없음
+         if (this.values.length == 0) {
+           return;
+         }
+           
+         // 우선순위 큐에서 첫 번째 요소를 제거하고 반환하는 shift()
+         const dequeued = this.values.shift();
+         // 우선순위 큐에서 마지막 요소를 제거하고 그 요소를 반환하는 pop()
+         const lastItem = this.values.pop();
+         // 마지막 요소가 아니면 첫 번째 요소를 리턴
+         if (!lastItem) {
+           return dequeued;
+         }
+         // lastItem을 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환하는 unshift()
+         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;
+       },
+       
+       // 노드(vertex) 추가
+       addVertex: function (vertex) {
+         if (!this.adjacencyList.hasOwnProperty(vertex)) {
+           this.adjacencyList[vertex] = {};
+           this.length++;
+         }
+       },
+       
+       // 간선(edge) 추가
+       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();
+   }
+   
+   ```
+
+6. 
+7. 
\ No newline at end of file
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.html b/index.html
new file mode 100644
index 0000000..6b939ea
--- /dev/null
+++ b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>지하철 길찾기</title>
+</head>
+<body>
+<div id="app">
+  <div id="input-area">
+  </div>
+  <div id="result-area">
+    
+  </div>
+</div>
+</body>
+<script type="module" src="src/index.js"></script>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..aead43d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
\ No newline at end of file
diff --git a/src/data.js b/src/data.js
new file mode 100644
index 0000000..7161623
--- /dev/null
+++ b/src/data.js
@@ -0,0 +1,35 @@
+export const stationList = ["교대", "강남", "역삼", "남부터미널", "양재", "매봉", "양재시민의숲"]
+
+export const pathWithDistance = [
+  ["교대", "강남", 2],
+  ["교대", "남부터미널", 3],
+  ["강남", "교대", 2],
+  ["남부터미널", "교대", 3],
+  ["강남", "역삼", 2],
+  ["역삼", "강남", 2],
+  ["강남", "양재", 2],
+  ["양재", "강남", 2],
+  ["남부터미널", "양재", 6],
+  ["양재", "남부터미널", 6],
+  ["양재", "매봉", 1],
+  ["매봉", "양재", 1],
+  ["양재", "양재시민의숲", 10],
+  ["양재시민의숲", "양재", 10]
+]
+
+export const pathWithTime = [
+  ["교대", "강남", 2],
+  ["교대", "남부터미널", 3],
+  ["강남", "교대", 2],
+  ["남부터미널", "교대", 3],
+  ["강남", "역삼", 2],
+  ["역삼", "강남", 2],
+  ["강남", "양재", 2],
+  ["양재", "강남", 2],
+  ["남부터미널", "양재", 6],
+  ["양재", "남부터미널", 6],
+  ["양재", "매봉", 1],
+  ["매봉", "양재", 1],
+  ["양재", "양재시민의숲", 10],
+  ["양재시민의숲", "양재", 10]
+]
\ No newline at end of file
diff --git a/src/handler.js b/src/handler.js
new file mode 100644
index 0000000..50d3a65
--- /dev/null
+++ b/src/handler.js
@@ -0,0 +1,18 @@
+import {stationList} from "./data.js"
+
+export function validStationNameLength(name) {
+  return name.length > 1
+}
+
+export function notExistStation(station) {
+  return stationList.includes(station)
+}
+
+export function sameStation(departure, arrival) {
+  return (departure === arrival)
+}
+
+// function connected(departure, arrival) {
+//   // TODO: 출발역과 도착역이 연결되었는지 확인하는 로직 -> Dijkstra?
+//   return
+// }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..1658c72
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,105 @@
+import {validStationNameLength, notExistStation, sameStation} from "./handler.js"
+import Dijkstra from "./utils/Dijkstra.js"
+import {pathWithDistance, pathWithTime} from "./data.js"
+
+function init() {
+  const dijkstraDistance = new Dijkstra();
+  const dijkstraTime = new Dijkstra();
+  // TODO 1: 최단거리 로직
+  for (let i=0; i<pathWithDistance.length; i++) {
+    dijkstraDistance.addEdge(pathWithDistance[0], pathWithDistance[1], pathWithDistance[2])
+  }
+  // TODO 2: 최소시간 로직
+  for (let i=0; i<pathWithTime.length; i++) {
+    dijkstraTime.addEdge(pathWithTime[0], pathWithTime[1], pathWithTime[2])
+  }
+  let inputArea = document.getElementById("input-area");
+  inputArea.innerHTML = "";
+  
+  let title = document.createElement("h1");
+  let departure = document.createElement("input");
+  let arrival = document.createElement("input");
+  let shortestPath = document.createElement("input");
+  let shortestTime = document.createElement("input");
+  let btn = document.createElement("button")
+  
+  title.innerHTML = "🚇 지하철 길찾기";
+  departure.type = "text";
+  departure.id="departure-station-name-input";
+  arrival.type = "text";
+  arrival.id = "arrival-station-name-input";
+  shortestPath.type = "radio";
+  shortestPath.name = "search-type";
+  shortestPath.value = "최단거리";
+  shortestPath.checked = "checked";
+  shortestTime.type = "radio";
+  shortestTime.name = "search-type";
+  shortestTime.value = "최소시간";
+  btn.onclick = function(){
+    const departure = document.getElementById("departure-station-name-input").value;
+    const arrival = document.getElementById("arrival-station-name-input").value;
+    const radioInput = document.getElementsByName("search-type");
+    let radioInputValue = ""
+    for (let i=0; i<radioInput.length; i++) {
+      if ( radioInput[i].checked === true ) {
+        radioInputValue = radioInput[i].value;
+      }
+    }
+
+    if (validStationNameLength(departure) && validStationNameLength(arrival) && (notExistStation(departure)) && (notExistStation(arrival)) && !(sameStation(departure, arrival))){
+      if (radioInputValue === "최단거리") {
+        console.log(dijkstraDistance.adjacencyList)
+      } else {
+        console.log(dijkstraTime.adjacencyList)
+      }
+    } else {
+      alert("유효한 입력값을 넣어주세요")
+    }
+    printTable()
+  }
+  btn.type = "submit";
+  btn.id = "search-button";;
+  btn.innerHTML = "길 찾기";
+
+  inputArea.append(title);
+  inputArea.append('출발역   ', departure, document.createElement("br"));
+  inputArea.append('도착역   ', arrival, document.createElement("br"));
+  inputArea.append(shortestPath, "최단거리");
+  inputArea.append(shortestTime, "최소시간", document.createElement("br"));
+  inputArea.append(btn);
+  
+}
+
+function printTable() {
+  let resultArea = document.getElementById("result-area");
+  resultArea.innerText = "";
+  
+  const title = document.createElement("h1");
+  title.innerHTML = "⭐ 결과"
+  const result = document.createElement("h2");
+  result.innerHTML = "최단거리or최소시간";
+  const resultTable = document.createElement("table");
+  const totalDistance = document.createElement("th");
+  const totalTime = document.createElement("th");
+  totalDistance.innerHTML = "총 거리";
+  totalTime.innerHTML = "총 소요시간";
+  const row1 = document.createElement("tr");
+  const totalDistanceData = document.createElement("td");
+  totalDistanceData.innerHTML = 0;
+  const totalTimeData = document.createElement("td");
+  totalTimeData.innerHTML = 0;
+  row1.append(totalDistanceData, totalTimeData)
+  const row2 = document.createElement("tr");
+  const fullPathData = document.createElement("td");
+  fullPathData.innerHTML = "전체 경로 프린팅"
+  row2.append(fullPathData)
+  resultTable.append(totalDistance, totalTime);
+  resultTable.append(row1);
+  resultTable.append(row2);
+
+  resultArea.append(title);
+  resultArea.append(resultTable)
+
+}
+
+init()
\ No newline at end of file
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();
+}