[지하철 노선도 미션] 이송원 미션 제출합니다.

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

.eslintrc.json

@@ -0,0 +1,18 @@
+{
+    "extends": ["airbnb", "prettier"],
+    "env": {
+        "browser": true, 
+        "jest/globals": true,
+        "es2020": true
+    },
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": ["prettier", "jest", "@babel"],
+    "rules": {
+        "import/extensions": ["off"],
+        "lines-between-class-members": ["off"]
+    }
+}

.gitignore

@@ -0,0 +1,4 @@
+.vscode/
+node_modules/
+package.json
+package-lock.json

README.md

@@ -1,114 +1,155 @@
 # 🚇 지하철 노선도 미션
 
+## 소개
+
+나만의 역을 만들고, 만들어진 역들을 바탕으로 나만의 지하철 노선과 지하철 노선도를 제작할 수 있는 프로그램입니다. 실제 지하철 노선도와 유사한 노선도를 제작할 수 있도록 여러 기능과 제약사항이 제공됩니다.
+
+<br/><br/>
+
 ## 🚀 기능 요구사항
 
+<br/>
+
 ### 지하철 역 관련 기능
-- 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
-- 중복된 지하철 역 이름이 등록될 수 없다.
-- 지하철 역은 2글자 이상이어야 한다.
-- 지하철 역의 목록을 조회할 수 있다.
+
+- 지하철 역을 추가 (add subway station)
+  - :exclamation: 예외#1 - 추가하려는 역이 다른 역과 중복된 이름을 가질 경우
+  - :exclamation: 예외#2 - 역의 이름이 2글자 미만일 경우(한글, 영어 모두)
+- 지하철 역을 삭제 (delete subway station)
+  - :exclamation: 예외#3 - 삭제하려는 역이 노선에 추가되어 있는 경우
+- 지하철 역 추가 가능 여부 검사 (check if the subway station can be added)
+  - :wrench: 해결(예외 #1,#2) - 추가하려는 역의 이름이 다른 역과 중복되는지, 2글자 미만인지를 검사
+- 지하철 역 삭제 가능 여부 검사 (check if the subway station can be deleted)
+  - :wrench: 해결(예외 #3) - 삭제할 수 없는 역을 삭제하려는 것인지를 검사
+
+<br/>
 
 ### 지하철 노선 관련 기능
-- 지하철 노선을 등록하고 삭제할 수 있다.
-- 중복된 지하철 노선 이름이 등록될 수 없다.
-- 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
-- 지하철 노선의 목록을 조회할 수 있다.
+
+- 지하철 노선을 추가 (add subway line)
+  - :exclamation: 예외#4 - 추가하려는 노선이 다른 노선과 중복된 이름을 가질 경우
+  - :exclamation: 예외#5 - 추가할 때 설정하는 상행, 하행 종점역이 같을 경우
+- 지하철 노선을 삭제 (delete subway line)
+- 지하철 노선 추가 가능 여부 검사 (check if the subway line can be added)
+  - :wrench: 해결(예외 #4,#5) - 추가하려는 노선이 다른 노선과 중복된 이름을 가지는지, 해당 노선의 상행, 하행 종점역이 같은지를 검사
+- 지하철 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회 (get all subway stations in subway line)
+
+<br/>
+
+### 지하철 전체 정보 조회 기능
+
+- 전체 지하철 역의 목록 조회 (get all subway stations)
+- 전체 지하철 노선의 목록 조회 (get all subway lines)
+
+<br/>
 
 ### 지하철 구간 추가 기능
-- 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
-  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
-- 하나의 역은 여러개의 노선에 추가될 수 있다.
-- 역과 역 사이에 새로운 역이 추가 될 수 있다.
-- 노선에서 갈래길은 생길 수 없다.
+
+- 지하철 노선에 구간을 추가, 즉 지하철 노선 안의 두 역 사이에 새로운 역 끼워넣기(insert subway station in subway line)
+  - :exclamation: 예외#6 - 끼워 넣으려는 역이 이미 노선 안에 있는 경우
+  - :exclamation: 예외#7 - 끼워넣으려는 역의 순서가 숫자로 표현되어 있지 않을 경우
+- 지하철 노선 구간 추가 가능성 여부 검사 (check if the subway station can be inserted)
+  - :wrench: 해결(예외 #6) - 끼워 넣으려는 역이 이미 노선 안에 있는지 검사
+  - :wrench: 해결(예외 #7) - 끼워 넣으려는 역의 순서값이 숫자인지 검사
+
+<br/>
 
 <img width="500" src="/images/section1.png">
 
+<br/>
+
 ### 지하철 구간 삭제 기능
-- 노선에 등록된 역을 제거할 수 있다.
-- 종점을 제거할 경우 다음 역이 종점이 된다.
-- 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
 
-<img width="500" src="/images/section2.png">
+- 지하철 노선에 구간을 삭제, 즉 지하철 노선 안에서 특정 역을 빼기 (pull out subway station in subway line)
+  - :exclamation: 예외#8 - 노선에 포함된 역을 삭제하려는 시점에 그 노선에 포함된 역이 두개 이하일 경우
+- 지하철 노선 구간 삭제 가능성 여부 검사 (check if the subway station can be pulled out)
+  - :wrench: 해결(예외 #8) - 삭제 후 그 노선에 포함된 역이 두개 미만인지를 검사
+
+<br/>
+
+### 로컬 스토리지 기능
+
+- 전체 지하철 역, 노선 목록을 포함한 지하철 노선도 정보를 로컬 스토리지에 저장 (save subway map info to local storage)
+- 전체 지하철 역, 노선 목록을 포함한 지하철 노선도 정보를 로컬 스토리지에서 불러오기 (load subway map info from local storage)
+
+<br/>
+
+### 인터페이스 전환 기능
+
+- 버튼 클릭으로 인터페이스 전환 (convert interface with button click)
+
+### 인터페이스 데이터 동기화 기능
+
+- 인터페이스에 입력된 정보 저장하기 (save interface data)
+- 입력 정보를 불러오기 (load interface data)
+- 입력 정보를 인터페이스와 동기화 시키기(sync interface data to interface)
+
+### 역관리 인터페이스 기능
+
+- 역 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'add subway station' with alert message)
+  - 잘못된 입력이 들어왔을 때, 역을 추가할 수 없는 이유를 알려주어 재입력을 유도
+- 역 삭제 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'delete subway station' with alert message)
+  - 삭제할 수 없는 역을 삭제하려 할 때, 역을 삭제할 수 없는 이유를 알려주어 재입력을 유도
+- 역 추가 & 삭제 결과 보여주기(show result of add & delete subway station)
+
+<br/>
+
+### 노선관리 인터페이스 기능
 
-### 지하철 노선에 등록된 역 조회 기능
-- 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
+- 노선 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'add subway line' with alert message)
+  - 잘못된 입력이 들어왔을 때, 노선을 추가할 수 없는 이유를 알려주어 재입력을 유도
+- 노선 추가 & 삭제 결과 보여주기 (show result of add & delete subway line)
 
 <br/>
 
+### 구간관리 인터페이스 기능
+
+- 구간 추가 기능을 위한 유효성 검사에 따른 안내메시지 출력 (validation check before 'insert & pull out subway station in subway line' with alert message)
+  - 구간을 추가할 수 없는 이유를 알려주어 재입력을 유도
+  - 역을 삭제할 수 없는 이유를 알려주면서 노선 자체를 제거할 방법을 안내
+- 구간 추가 & 삭제 결과 보여주기 (show result of insert & pull out subway station)
+
+<br/>
+
+### 노선도 출력 인터페이스 기능
+
+- 전체 지하철 노선의 목록 조회 기능 호출 & 조회한 노선도 보여주기 (trigger 'get all subway lines' & show subway map)
+
+<br/>
+
+### 로컬스토리지 동기화
+
+- 닫기, 새로고침 전 로컬스토리지에 인터페이스 정보, 노선도 정보 저장하기 (save interface & subway Map data to local storage before exit or reload)
+- 접속 시 인터페이스 정보, 노선도 정보를 로컬스토리지로부터 받아 동기화 시키기 (synchronize interface & subway Map data from local storage when user access)
+
+<br/>
+
+<img width="500" src="/images/section2.png">
+
+<br/><br/>
+
 ## 💻 프로그램 실행 결과
 
+<br/>
+
 ### 역관리
+
 <img width="100%" src="/images/station_manager.gif">
 
-### 노선관리
-<img width="100%" src="/images/line_manager.gif">
+<br/>
 
-### 구간관리
-<img width="100%" src="/images/section_manager.gif">
+### 노선관리
 
-### 노선도 출력
-<img width="100%" src="/images/map_print_manager.gif">
+<img width="100%" src="/images/line_manager.gif">
 
+<br/>
 
-## ✅ 프로그래밍 요구사항
+### 구간관리
 
-### 메뉴 버튼
-- 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
-- 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
-- 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
-- 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
+<img width="100%" src="/images/section_manager.gif">
 
-### 지하철 역 관련 기능
-- 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
-- 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
-- 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
+<br/>
 
-### 지하철 노선 관련 기능
-- 지하철 노선의 이름을 입력하는 input 태그는 `#line-name-input` id값을 가진다.
-- 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
-- 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
-- 지하철 노선을 추가하는 button 태그는 `#line-add-button` id값을 가진다.
-- 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
+### 노선도 출력
 
-### 지하철 구간 추가 기능
-- 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
-- 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
-- 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
-- 지하철 구간을 등록하는 button 태그는 `#section-add-button` id값을 가진다.
-- 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
-
-### 지하철 노선도 출력 기능
-- 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
-
-### 기존 요구사항
-
-- 사용자가 잘못된 입력 값을 작성한 경우 `alert`을 이용해 메시지를 보여주고, 재입력할 수 있게 한다.
-- 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않고, 순수 Vanilla JS로만 구현한다.
-- **자바스크립트 코드 컨벤션을 지키면서 프로그래밍** 한다
-  - [https://google.github.io/styleguide/jsguide.html](https://google.github.io/styleguide/jsguide.html)
-  - [https://ui.toast.com/fe-guide/ko_CODING-CONVENSION/](https://ui.toast.com/fe-guide/ko_CODING-CONVENTION)
-- **indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용**한다.
-  - 예를 들어 while문 안에 if문이 있으면 들여쓰기는 2이다.
-  - 힌트: indent(인덴트, 들여쓰기) depth를 줄이는 좋은 방법은 함수(또는 메소드)를 분리하면 된다.
-- **함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.**
-  - 함수(또는 메소드)가 한 가지 일만 잘 하도록 구현한다.
-- 변수 선언시 `var` 를 사용하지 않는다. `const` 와 `let` 을 사용한다.
-  - [const](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const)
-  - [let](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let)
-- `import` 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.
-  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import)
-- `template literal`을 이용해 데이터와 html string을 가독성 좋게 표현한다.
-  - [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)
-
-### 추가된 요구사항
-- [data](https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)속성을 활용하여 html 태그에 역, 노선, 구간의 유일한 데이터 값들을 관리한다. 
-- [localStorage](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.
-
-<br/>
-
-## 📝 미션 저장소 및 진행 요구사항
-
-- 미션은 [https://github.com/woowacourse/javascript-subway-map-precours](https://github.com/woowacourse/javascript-subway-map-precourse) 저장소를 fork/clone해 시작한다.
-- **기능을 구현하기 전에 javascript-subway-precourse/docs/README.md 파일에 구현할 기능 목록**을 정리해 추가한다.
-- **git의 commit 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가**한다.
-- [프리코스 과제 제출](https://github.com/woowacourse/woowacourse-docs/tree/master/precourse) 문서 절차를 따라 미션을 제출한다.
+<img width="100%" src="/images/map_print_manager.gif">

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    '@babel/plugin-proposal-private-methods',
+    '@babel/plugin-proposal-class-properties',
+  ],
+};

index.css

@@ -0,0 +1,11 @@
+.content {
+  display: none;
+}
+
+#station-register {
+  display: none;
+}
+
+#registered-station-item-table {
+  display: none;
+}

index.html

@@ -3,10 +3,87 @@
   <head>
     <meta charset="UTF-8" />
     <title>지하철 노선도 관리</title>
+    <link rel="stylesheet" href="./index.css">
   </head>
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <h1>🚇 지하철 노선도 관리</h1>
+    </div>
+    <div>
+      <a href="#station-manager"><button id="station-manager-button">1.역 관리</button></a>
+      <a href="#line-manager"><button id="line-manager-button">2.노선 관리</button></a>
+      <a href="#section-manager"><button id="section-manager-button">3.구간 관리</button></a>
+      <a href="#map-print"><button id="map-print-manager-button">4.지하철 노선도 출력</button></a>
+    </div>
+    <div id="station-manager" class="content">
+      <div class="station-name">
+        <h3>역 이름</h3>
+        <input id="station-name-input" type="text" placeholder="역 이름을 입력해주세요." />
+        <button id="station-add-button">역 추가</button>
+      </div>
+      <div class="station-list">
+        <h2><span>&#128649</span>지하철 역 목록</h2>
+        <table class="station-item-table">
+          <thead>
+            <th>역 이름</th>
+            <th>설정</th>
+          </thead>
+          <tbody id="result-station-items">
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div id="line-manager" class="content">
+      <div class="line-name">
+        <h3>노선 이름</h3>
+        <input id="line-name-input" type="text" placeholder="노선 이름을 입력해주세요" />
+      </div>
+      <div class="terminating-lines">
+        <span>상행 종점</span>
+        <select id="line-start-station-selector"></select>
+        <span>하행 종점</span>
+        <select id="line-end-station-selector"></select>
+      </div>
+      <button id="line-add-button">노선 추가</button>
+      <div class="lines-list">
+        <h2><span>&#128649</span>지하철 노선 목록</h2>
+        <table class="line-item-table">
+          <thead>
+            <th>노선 이름</th>
+            <th>상행 종점역</th>
+            <th>하행 종점역</th>
+            <th>설정</th>
+          </thead>
+          <tbody id="result-line-items">
+
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div id="section-manager" class="content">
+      <h2>구간을 수정할 노선을 선택해주세요</h2>
+      <div id="section-line-menu-button-list">
+      </div>
+      <div id="station-register">
+        <h2><span id="section-line-name">1호선</span> 관리</h2>
+        <h3>구간 등록</h3>
+        <select id="section-station-selector"></select>
+        <input id="section-order-input" type="text" placeholder="순서" />
+        <button id="section-add-button">등록</button>
+      </div>
+      <table id="registered-station-item-table">
+        <thead>
+          <th>순서</th>
+          <th>이름</th>
+          <th>설정</th>
+        </thead>
+        <tbody id="registered-station-items">
+
+        </tbody>
+      </table>
+    </div>
+    <div id="map-print" class="content">
+
     </div>
     <script type="module" src="src/index.js"></script>
   </body>