woowacourse · dudtjr913 · Dec 10, 2020 · Dec 10, 2020 · Dec 10, 2020 · Dec 10, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+git-commit-template.txt
+node_modules
+package.json
+package-lock.json
+.eslintrc.js
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,61 @@
+## 기능 구현 목록
+
+### 화면 출력
+
+- ✔ 버튼을 누르면 버튼에 맞는 화면을 출력한다.
+
+### localStorage
+
+- ✔ localStorage를 사용해 새로고침하더라도 이전에 작업한 정보를 불러온다.
+
+### data
+
+- ✔ data속성을 활용해 역, 노선, 구간의 데이터 값을 관리한다.
+
+### 역 관리
+
+- ✔ 역을 추가할 수 있고, 화면에 추가한다.
+
+  - 예외처리)
+    - ✔ 중복 불가
+    - ✔ 2글자 미만 불가
+    - ✔ 한글과 숫자만 가능(기능 추가)
+
+- ✔ 역을 삭제할 수 있고, 화면에서 삭제한다.
+  - 예외처리)
+    - ✔ 노선에 등록된 역 삭제 불가
+
+### 노선 관리
+
+- ✔ 존재하는 역을 통해 상행과 하행 종점을 선택할 수 있고, 이름을 정해서 노선을 추가할 수 있으며, 화면에 추가한다.
+
+  - 예외처리)
+    - ✔ 노선 이름 중복 불가
+    - ✔ 한글과 숫자만 가능(기능 추가)
+    - ✔ 2글자 미만 불가(기능 추가)
+    - ✔ 한 노선에서 중복된 역 입력 불가(기능 추가)
+
+- ✔ 노선을 삭제할 수 있고, 화면에서 삭제한다.
+
+### 구간 관리
+
+- ✔ 존재하는 노선을 선택할 수 있고, 선택 시 화면에 출력한다.
+
+- ✔ 노선에 존재하는 역을 추가할 수 있으며, 순서를 정할 수 있다.
+  - 예외처리)
+    - ✔ 같은 노선에 중복된 역 추가 불가
+    - ✔ 노선 내에서 갈래길이 존재할 수 없음
+    - ✔ 가장 큰 순서보다 큰 수 입력 불가
+    - ✔ 0부터 입력가능
+- ✔ 이때 순서에 맞게 화면이 랜더링된다.
+- ✔ 또한, 순서 0이 입력되면, 상행 종점이 된다.
+
+- ✔ 노선에서 역을 삭제할 수 있으며, 화면에서 삭제한다.
+
+  - 예외처리)
+    - ✔ 한 노선에서 역이 두 개 이하일 때 삭제 불가
+  - ✔ 이때, 종점을 삭제하면 종점 전의 역이 종점이 되고, 화면을 랜더링한다.
+
+### 노선도 출력
+
+- ✔ 노선 별 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 화면에 출력한다.
diff --git a/index.html b/index.html
@@ -6,7 +6,73 @@
   </head>
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <h1>🚇 지하철 노선도 관리</h1>
+      <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>
+      <section id="station" style="margin-top: 20px; display: none">
+        <div>역 이름</div>
+        <input id="station-name-input" />
+        <button id="station-add-button">역 추가</button>
+        <h1>🚉 지하철 역 목록</h1>
+        <table border="1">
+          <tbody>
+            <tr>
+              <th>역 이름</th>
+              <th>설정</th>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+      <section id="line" style="margin-top: 20px; display: none;">
+        <div>노선 이름</div>
+        <input id="line-name-input" />
+        <p>
+        <div>
+          상행 종점
+          <select id="line-start-station-selector"></select>
+        </div>
+        <div>
+          하행 종점
+          <select id="line-end-station-selector"></select>
+        </div>
+      </p>
+        <button id="line-add-button">노선 추가</button>
+        <h1>🚉 지하철 노선 목록</h1>
+        <table border="1">
+          <tbody>
+            <tr>
+              <th>노선 이름</th>
+              <th>상행 종점역</th>
+              <th>하행 종점역</th>
+              <th>설정</th>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+      <section id="subway-section" style="margin-top: 20px; display: none">
+        <h2>구간을 수정할 노선을 선택해주세요.</h2>
+        <div id="section-select-button"></div>
+        <div id="subway-section-edit" style="display: none">
+          <h2></h2>
+          <h4>구간 등록</h4>
+          <select id="section-station-selector"></select>
+          <input placeholder="순서" id="section-order-input" />
+          <button id="section-add-button">등록</button>
+          <table border="1" style="margin-top: 30px">
+            <tbody>
+              <tr>
+                <th>순서</th>
+                <th>이름</th>
+                <th>설정</th>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+      <section id="map-section" style="display: none;">
+      </section>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>

diff --git a/src/Controller/line-control.js b/src/Controller/line-control.js
@@ -0,0 +1,81 @@
+import {
+  $lineNameInput,
+  $upStreamSelector,
+  $downStreamSelector,
+} from '../View/element.js';
+import {
+  addLineScreen,
+  addMapPrint,
+  addSectionButton,
+  addSectionScreen,
+  addSelectorOption,
+} from '../View/add-screen.js';
+import {
+  removeLineScreen,
+  removeSectionButton,
+  removeSectionScreen,
+  removeMapPrint,
+} from '../View/remove-screen.js';
+import {hideSectionEditContainer} from '../View/hide-screen.js';
+import {
+  setLocalStorage,
+  getLocalStorage,
+  removeLocalStorage,
+} from './local-storage.js';
+import {stationInstance, lineInstance} from '../index.js';
+import {
+  setLineButtonDeleteEvent,
+  setSectionButtonLoadEvent,
+  setSectionButtonDeleteEvent,
+} from './set-button-event.js';
+import {isLineInputValid} from './valid.js';
+import {KEY, TEXT} from '../constant.js';
+
+export const onAddLine = () => {
+  const lineValue = getLineValue();
+  if (isLineInputValid(lineValue, lineInstance.lines)) {
+    setLocalStorage(KEY.LINE, lineValue);
+    lineInstance.addLine(lineValue);
+    addLineScreen(lineValue);
+    addSectionButton(lineValue.lineName);
+    addSectionScreen(lineValue);
+    addMapPrint([lineValue]);
+    setSectionButtonDeleteEvent(lineValue);
+    setLineButtonDeleteEvent(lineValue.lineName);
+    setSectionButtonLoadEvent(lineValue.lineName);
+  }
+  $lineNameInput.value = '';
+};
+
+export const onRemoveLine = (e) => {
+  const removeConfirm = confirm(TEXT.CONFIRM_DELETE);
+  if (removeConfirm) {
+    removeLocalStorage(KEY.LINE, e.target.dataset.lineName);
+    lineInstance.removeLine(e.target.dataset.lineName);
+    removeLineScreen(e.target);
+    removeSectionButton(e.target.dataset.lineName);
+    removeSectionScreen(e.target.dataset.lineName);
+    removeMapPrint(e.target.dataset.lineName);
+    hideSectionEditContainer();
+  }
+};
+
+export const loadLine = () => {
+  const lines = getLocalStorage(KEY.LINE);
+  lineInstance.loadLine(lines);
+  stationInstance.stations.forEach((station) => {
+    addSelectorOption($upStreamSelector, station);
+    addSelectorOption($downStreamSelector, station);
+  });
+  lineInstance.lines.forEach((line) => {
+    addLineScreen(line);
+    setLineButtonDeleteEvent(line.lineName);
+  });
+};
+
+const getLineValue = () => {
+  return {
+    lineName: $lineNameInput.value,
+    station: [$upStreamSelector.value, $downStreamSelector.value],
+  };
+};
diff --git a/src/Controller/local-storage.js b/src/Controller/local-storage.js
@@ -0,0 +1,59 @@
+import {KEY} from '../constant.js';
+
+export const addSectionOnLocalStorage = (key, value) => {
+  const localStorageValue = getLocalStorage(key);
+  const sectionIndex = localStorageValue.findIndex(
+    (line) => line.lineName === value.lineName,
+  );
+  localStorageValue[sectionIndex].station.splice(
+    value.number,
+    0,
+    value.sectionName,
+  );
+
+  return localStorage.setItem(key, JSON.stringify([...localStorageValue]));
+};
+
+export const setLocalStorage = (key, value) => {
+  const localStorageValue = getLocalStorage(key);
+  if (localStorageValue === null) {
+    return localStorage.setItem(key, JSON.stringify([value]));
+  }
+
+  return localStorage.setItem(
+    key,
+    JSON.stringify([...localStorageValue, value]),
+  );
+};
+
+export const getLocalStorage = (key) => {
+  const localStorageValue = JSON.parse(localStorage.getItem(key));
+
+  return localStorageValue;
+};
+
+export const removeSectionOnLocalStorage = (key, value) => {
+  const localStorageValue = getLocalStorage(key);
+  const sectionIndex = localStorageValue.findIndex(
+    (line) => line.lineName === value.lineName,
+  );
+  localStorageValue[sectionIndex].station = localStorageValue[
+    sectionIndex
+  ].station.filter((station) => station !== value.station);
+
+  return localStorage.setItem(key, JSON.stringify([...localStorageValue]));
+};
+
+export const removeLocalStorage = (key, value) => {
+  const localStorageValue = getLocalStorage(key);
+  const filteredStorage = localStorageValue.filter((storage) => {
+    if (key === KEY.STATION) {
+      return storage !== value;
+    }
+    if (key === KEY.LINE) {
+      return storage.lineName !== value;
+    }
+  });
+
+  return localStorage.setItem(key, JSON.stringify(filteredStorage));
+};
diff --git a/src/Controller/map-print-control.js b/src/Controller/map-print-control.js
@@ -0,0 +1,7 @@
+import {addMapPrint} from '../View/add-screen.js';
+import {lineInstance} from '../index.js';
+
+export const loadMapPrint = () => {
+  lineInstance.loadLine();
+  addMapPrint(lineInstance.lines);
+};