woowacourse · 0307kwon · Dec 9, 2020 · Dec 9, 2020 · Dec 9, 2020 · Dec 9, 2020
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # 🚇 지하철 노선도 미션
 
+[/docs/README.md로 이동하기](./docs/README.md)
+
 ## 🚀 기능 요구사항
 
 ### 지하철 역 관련 기능

diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,95 @@
+# 🚇 지하철 노선도 미션
+
+## 🎯 미션 목표
+
+지하철 노선도 미션은 지하철의 역과 노선을 추가, 삭제하는 등 지하철의 구조를 관리할 수 있는 웹을 제작하는 미션입니다.
+
+웹은 '역 관리', '노선 관리', '구간 관리', '지하철 노선도 출력'의 4가지 컨텐츠를 가지고 있고 웹 상단의 메뉴 바로 컨텐츠 간의 이동이 가능합니다.
+
+지하철 노선도 웹에 의해 관리되는 정보는 컴퓨터에 저장되어 웹을 끄고 켜더라도 마지막으로 작업한 정보를 불러옵니다.
+
+## 💻 프로그램 기능
+
+### 1. 역 관리
+
+<image src="./images/stations-manager.png" width="250" />
+
+현재 지하철이 가지고 있는 역 정보들을 목록으로 표시합니다.
+
+새로운 역을 추가하고, 기존의 역을 삭제할 수 있습니다.
+
+### 2. 노선 관리
+
+<image src="./images/line-manager.png" width="250" /> 
+
+지하철이 가지고 있는 노선 정보들을 목록으로 표시합니다.
+
+표시되는 노선 정보는 노선 이름, 상행 종점, 하행 종점입니다.
+
+새로운 노선을 입력받아 추가할 수 있고 기존의 노선을 삭제도 가능합니다.
+
+### 3. 구간 관리
+
+<image src="./images/section-manager.png" width="250" />
+
+구간 관리는 노선에 등록된 역을 관리하는 기능입니다.
+
+각 노선에 대해 새로운 역을 등록시킬 수도 있고 노선에 포함되어있던 기존 역을 제거할 수도 있습니다.
+
+### 4. 노선도 출력
+
+<image src="./images/map-print-manager.png" width="250" />
+
+노선도 출력은 저장된 노선에 대한 정보를 바탕으로 각 노선의 이름과 노선에 등록된 역 이름을 나열하여 간단하게 보여줍니다.
+
+## 📝 구현할 기능 목록
+
+- (완료)4가지 페이지를 전환하는 메뉴 버튼 구현
+- 역 관리
+    - (완료)html string 작성
+    - (완료)역의 정보를 저장하는 클래스 생성
+    - (완료)역 추가 버튼을 누르면 역 목록에 역 추가
+        - (완료)역 이름 입력이 2글자 미만이면 에러메세지 출력
+        - (완료)중복된 역 이름 등록 제한, 에러 메세지 띄움
+    - (완료)역 목록을 표로 출력하도록 구현
+    - (완료)역 삭제 버튼 클릭 시 해당 역 제거(data 속성 활용)
+    - (완료)역 삭제 버튼 클릭 시 confirm 창 띄우기
+    - (완료)입력값을 목록에 담기 전에 입력값의 앞뒤 공백을 제거
+    - (완료)노선에 등록된 역은 삭제 불가하도록 구현
+- 노선 관리
+    - (완료)html string 작성
+    - (완료)노선의 정보를 저장할 수 있는 자료구조를 구현
+    - (완료)노선 이름과 종점 정보들을 받아 노선 추가하는 기능 구현
+        - (완료)노선 목록을 표로 화면에 출력
+        - (완료)노선 이름이 한 글자 미만이면 에러 메세지 출력
+        - (완료)노선 이름이 중복이면, 상행 종점과 하행 종점이 같은 역이면 에러
+        - (완료)종점 정보가 선택되지 않았다면 에러 메세지 출력
+    - (완료)입력값을 목록에 담기 전에 입력값의 앞뒤 공백을 제거
+    - (완료)삭제 버튼을 누르면 노선이 삭제되도록 구현
+    - (완료)노선이 삭제되기 이전에 comfirm 창을 띄우기
+- 구간 관리
+    - (완료)html string 작성
+    - (완료)구간 수정할 노선을 선택하는 버튼 생성
+    - (완료)노선 선택 버튼을 누르면 노선 관리 UI가 생성됨
+    - (완료)선택된 노선에 포함되어 있지 않은 역들만 콤보 박스의 옵션으로 설정
+    - (완료)노선에 등록된 역들을 표로 출력
+    - (완료)등록 버튼을 누르면 입력받은 노선의 순서에 역이 추가됨
+        - (완료)순서 input text가 0 이상의 숫자가 아니면 에러메세지 생성
+        - (완료)노선에 추가할 역이 선택되지 않았다면 에러 메세지 출력
+    - (완료)노선에서 제거 버튼을 누르면 노선에서 해당 역이 제외됨
+        - (완료)노선에서 제거 동작을 수행하기 전에 confirm 창을 띄우기
+        - (완료)노선에 포함된 역이 2개 이하일 때는 제거할 수 없도록 구현
+- 노선도 출력
+    - (완료)html string 작성
+    - (완료)노선도 정보를 받아와 출력함
+- 그 외의 추가해야할 기능들
+    - (완료)역과 노선 정보를 localStorage를 이용하여 저장
+
+## 😵 고민해야할 사항들
+
+- 화면 전환은 어떻게 할 것인가
+- 클래스는 어떻게 나누어야 할까
+- IO를 하나의 클래스가 총괄하도록 할 것인가 나눌 것인가
+- 지하철 역과 노선을 저장하기 위해 어떤 자료구조를 사용할 것인가
+- 수행하는 기능이 비슷한 메소드들을 어떻게 컴포넌트화하여 활용할 것인가
+- 메소드와 변수 이름을 어떻게 해야 가독성 좋게 정할수 있을까
diff --git a/docs/images/line-manager.png b/docs/images/line-manager.png
diff --git a/docs/images/map-print-manager.png b/docs/images/map-print-manager.png
diff --git a/docs/images/section-manager.png b/docs/images/section-manager.png
diff --git a/docs/images/stations-manager.png b/docs/images/stations-manager.png
diff --git a/index.html b/index.html
@@ -7,6 +7,11 @@
   <body>
     <div id="app">
       <h1>🚇 지하철 노선도 관리 </h1>
+      <nav id="menubar">
+      </nav>
+      <p></p> 
+      <div id="contents">
+      </div> 
     </div>
     <script type="module" src="src/index.js"></script>
   </body>