woowacourse · ginger-kang · Dec 14, 2020 · Dec 14, 2020 · Dec 15, 2020 · Dec 15, 2020
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,35 @@
+# 🚇 지하철 노선도 미션
+
+## 🚀 기능 요구사항
+
+### 지하철 역 관련 기능
+- [x] 지하철 역을 등록하고 삭제할 수 있다.
+  - [x] 단, 노선에 등록된 역은 삭제할 수 없다
+- [x] 중복된 지하철 역 이름이 등록될 수 없다.
+- [x] 지하철 역은 2글자 이상이어야 한다.
+- [x] 지하철 역의 목록을 조회할 수 있다.
+
+### 지하철 노선 관련 기능
+- [x] 지하철 노선을 등록하고 삭제할 수 있다.
+- [x] 중복된 지하철 노선 이름이 등록될 수 없다.
+- [x] 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
+- [x] 지하철 노선의 목록을 조회할 수 있다.
+
+### 지하철 구간 추가 기능
+- [x] 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
+  - 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.  
+- [x] 하나의 역은 여러개의 노선에 추가될 수 있다.
+- [x] 역과 역 사이에 새로운 역이 추가 될 수 있다.
+- [ ] 노선에서 갈래길은 생길 수 없다.
+
+### 지하철 구간 삭제 기능
+- [x] 노선에 등록된 역을 제거할 수 있다.
+- [x] 종점을 제거할 경우 다음 역이 종점이 된다.
+- [x] 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
+
+### 지하철 노선에 등록된 역 조회 기능
+- [x] 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
+
+### 추가 기능
+- `localStorage`를 이용하여, 새로고침 하더라도 작업하던 정보들을 불러올 수 있게 한다.
+- `data`속성을 이용하여 html태그에 역, 노선, 구간의 유일한 데이터 값들을 보관한다.
diff --git a/index.html b/index.html
@@ -7,6 +7,43 @@
   <body>
     <div id="app">
       <h1>🚇 지하철 노선도 관리 </h1>
+      <div class="menu-container">
+        <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>
+      </div>
+      <div id="station-manager-container" style="display: none;">
+        <br />
+        <div>역 이름</div>
+        <input id="station-name-input" placeholder="역 이름을 입력해주세요." />
+        <button id="station-name-button">역 추가</button>
+        <h2>🚉 지하철 역 목록</h2>
+        <table id="station-name-table"></table>
+      </div>
+      <div id="line-manager-container" style="display: none;">
+        <br />
+        <div>노선 이름</div>
+        <input id="line-name-input" placeholder="노선 이름을 입력해주세요." />
+        <br />
+        <br />
+        상행 종점
+        <select id="line-start-name-selector"></select
+        ><br />
+        하행 종점
+        <select id="line-start-end-selector"></select>
+        <br />
+        <br />
+        <button id="line-name-button">노선 추가</button>
+        <h2>🚉 지하철 노선 목록</h2>
+        <table id="line-name-table"></table>
+      </div>
+      <div id="section-manager-container" style="display: none;">
+        <h3>구간을 수정할 노선을 선택해주세요.</h3>
+        <div id="line-menu-container"></div>
+        <div id="section-manage-container"></div>
+      </div>
+      <div id="map-print-manager-container" style="display: none;"></div>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>

diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,5 @@
+table,
+th,
+td {
+  border: 1px solid black;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,52 @@
+import stationContainer from "./station/stationContainer";
+import lineContainer from "./line/lineContainer";
+import sectionContainer from "./section/sectionContainer";
+import printMapContainer from "./printMap/printMapContainer";
+
+const init = () => {
+  const stationButton = document.querySelector("#station-manager-button");
+  const lineButton = document.querySelector("#line-manager-button");
+  const sectionButton = document.querySelector("#section-manager-button");
+  const printMapButton = document.querySelector("#map-print-manager-button");
+
+  stationButton.addEventListener("click", () => {
+    clearScreen();
+    stationContainer();
+  });
+
+  lineButton.addEventListener("click", () => {
+    clearScreen();
+    lineContainer();
+  });
+
+  sectionButton.addEventListener("click", () => {
+    clearScreen();
+    sectionContainer();
+  });
+  printMapButton.addEventListener("click", () => {
+    clearScreen();
+    printMapContainer();
+  });
+
+  const clearScreen = () => {
+    const stationManageContainer = document.querySelector(
+      "#station-manager-container",
+    );
+    const lineManageContainer = document.querySelector(
+      "#line-manager-container",
+    );
+    const sectionManageContainer = document.querySelector(
+      "#section-manager-container",
+    );
+    const printMapManageContainer = document.querySelector(
+      "#map-print-manager-container",
+    );
+
+    stationManageContainer.style.display = "none";
+    lineManageContainer.style.display = "none";
+    sectionManageContainer.style.display = "none";
+    printMapManageContainer.style.display = "none";
+  };
+};
+
+init();
diff --git a/src/line/lineConstant.js b/src/line/lineConstant.js
@@ -0,0 +1 @@
+export const INVALID_LINE_INFO = "지하철 노선이 중복되지 않게 입력해주세요.";
diff --git a/src/line/lineContainer.js b/src/line/lineContainer.js
@@ -0,0 +1,105 @@
+import { isValidLineInfo } from "../utils";
+import { INVALID_LINE_INFO } from "./lineConstant";
+import { lineListTemplate, clearOption } from "./linePresenter";
+
+export default function lineContainer() {
+  let lineList = [];
+
+  const checkLineName = (lineName, startLine, endLine) => {
+    const lineInfo = [lineName, startLine, endLine];
+
+    isValidLineInfo(lineList, lineInfo)
+      ? addLine(lineInfo)
+      : alert(INVALID_LINE_INFO);
+  };
+
+  const addLine = lineInfo => {
+    lineList.push(lineInfo);
+    setLocalData(lineList);
+    lineListTemplate(lineList);
+    removeLineHandler();
+  };
+
+  const removeLineHandler = () => {
+    const lineRemoveButton = document.querySelectorAll("#line-remove-button");
+    if (lineRemoveButton !== null) {
+      for (const removeButton of lineRemoveButton) {
+        removeButton.addEventListener("click", event => {
+          removeLine(event);
+        });
+      }
+    }
+  };
+
+  const removeLine = event => {
+    const targetLine = event.target.parentNode.parentNode;
+    const lineName = targetLine.dataset.linename;
+    let lineIndex = 0;
+    for (const line of lineList) {
+      if (line[0] === lineName) {
+        lineIndex = lineList.indexOf(line);
+      }
+    }
+    lineList.splice(lineIndex, 1);
+    setLocalData(lineList);
+    lineListTemplate(lineList);
+    removeLineHandler();
+  };
+
+  const setLocalData = lineList => {
+    window.localStorage.setItem("lineList", JSON.stringify(lineList));
+  };
+
+  const getLocalData = () => {
+    let localData = window.localStorage.getItem("lineList");
+
+    if (localData) {
+      lineList = JSON.parse(localData);
+    }
+  };
+
+  const setSelectorOption = selector => {
+    const lineStartSelector = document.querySelector(
+      "#line-start-name-selector",
+    );
+    const stationData = JSON.parse(window.localStorage.getItem("stationList"));
+    if (selector === lineStartSelector) {
+      clearOption();
+    }
+    if (stationData) {
+      for (const station of stationData) {
+        const selectorOption = document.createElement("option");
+        selectorOption.setAttribute("id", "station-option");
+        selectorOption.textContent = station;
+        selector.appendChild(selectorOption);
+      }
+    }
+  };
+
+  const init = () => {
+    const lineNameContainer = document.querySelector("#line-manager-container");
+    const lineNameInput = document.querySelector("#line-name-input");
+    const lineStartSelector = document.querySelector(
+      "#line-start-name-selector",
+    );
+    const lineEndSelector = document.querySelector("#line-start-end-selector");
+    const lineNameButton = document.querySelector("#line-name-button");
+
+    getLocalData();
+    lineListTemplate(lineList);
+    removeLineHandler();
+    setSelectorOption(lineStartSelector);
+    setSelectorOption(lineEndSelector);
+    lineNameContainer.style.display = "block";
+    lineNameButton.addEventListener("click", () => {
+      checkLineName(
+        lineNameInput.value,
+        lineStartSelector.options[lineStartSelector.selectedIndex].value,
+        lineEndSelector.options[lineEndSelector.selectedIndex].value,
+      );
+      lineNameInput.value = "";
+    });
+  };
+
+  init();
+}
diff --git a/src/line/linePresenter.js b/src/line/linePresenter.js
@@ -0,0 +1,33 @@
+export const lineListTemplate = lineList => {
+  let template = `
+      <tr>
+        <th>노선 이름</th>
+        <th>상행 종점역</th>
+        <th>하행 종점역</th>
+        <th>설정</th>
+      </tr>
+  `;
+  for (const line of lineList) {
+    template += `
+      <tr data-lineName="${line[0]}">
+        <td>${line[0]}</td>
+        <td>${line[1]}</td>
+        <td>${line[line.length - 1]}</td>
+        <td><button id="line-remove-button">삭제</button></td>
+      </tr>
+    `;
+  }
+  lineListPresenter(template);
+};
+
+export const lineListPresenter = template => {
+  const lineNameTable = document.querySelector("#line-name-table");
+  lineNameTable.innerHTML = template;
+};
+
+export const clearOption = () => {
+  const lineOptions = document.querySelectorAll("#station-option");
+  for (const option of lineOptions) {
+    option.remove();
+  }
+};
diff --git a/src/printMap/printMapContainer.js b/src/printMap/printMapContainer.js
@@ -0,0 +1,20 @@
+import { listHeaderPresenter } from "./printMapPresenter";
+
+export default function printMapContainer() {
+  let lineData = [];
+
+  const getLocalData = () => {
+    lineData = JSON.parse(window.localStorage.getItem("lineList"));
+  };
+
+  const init = () => {
+    const printMapContainer = document.querySelector(
+      "#map-print-manager-container",
+    );
+    getLocalData();
+    listHeaderPresenter(lineData);
+    printMapContainer.style.display = "block";
+  };
+
+  init();
+}
diff --git a/src/printMap/printMapPresenter.js b/src/printMap/printMapPresenter.js
@@ -0,0 +1,24 @@
+export const listHeaderPresenter = lineData => {
+  const printMapContainer = document.querySelector(
+    "#map-print-manager-container",
+  );
+  let listTemplate = "";
+  for (const line of lineData) {
+    listTemplate += `
+      <h3>${line[0]}</h3>
+    `;
+    listTemplate += listStation(line);
+  }
+  printMapContainer.innerHTML = listTemplate;
+};
+
+const listStation = lineData => {
+  let stationTemplate = `<ul>`;
+  for (let i = 1; i < lineData.length; i++) {
+    stationTemplate += `
+      <li>${lineData[i]}</li>
+    `;
+  }
+  stationTemplate += `</ul>`;
+  return stationTemplate;
+};
diff --git a/src/section/sectionConstant.js b/src/section/sectionConstant.js
@@ -0,0 +1,3 @@
+export const INVALID_SECTION_NAME = "구간이 중복되지 않게 입력해주세요.";
+export const CANNOT_REMOVE =
+  "노선에 포함된 역이 두 개 이하일 경우 역을 제거할 수 없습니다.";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const INVALID_LINE_INFO = "지하철 노선이 중복되지 않게 입력해주세요.";