transcendence42 · hochan222 · May 25, 2021 · May 25, 2021 · May 25, 2021 · May 25, 2021
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+node_modules
+.eslintrc.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,25 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['airbnb-base', 'plugin:prettier/recommended'],
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  rules: {
+    'no-new': 'off',
+    'no-console': 'off',
+    'no-alert': 'off',
+    'no-plusplus': 'error',
+    'no-param-reassign': 'error',
+    'no-underscore-dangle': 'off',
+    'no-return-assign': 'error',
+    'max-depth': ['error', 2],
+    'max-lines-per-function': ['error', 15],
+    'import/extensions': ['off'],
+    'import/prefer-default-export': 'off',
+    "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"]
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+node_modules/
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"  
+}
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,63 @@
+## 📝 구현할 기능 목록
+
+### 🗂 공통 메뉴
+
+- [x] 역 관리 button 태그는 `#station-manager-button` id값을 가진다.
+- [x] 노선 관리 button 태그는 `#line-manager-button` id값을 가진다.
+- [x] 구간 관리 button 태그는 `#section-manager-button` id값을 가진다.
+- [x] 지하철 노선도 출력 관리 button 태그는 `#map-print-manager-button` id값을 가진다.
+
+### 🚋 지하철 역 관리
+
+- [x] 지하철 역을 입력하는 input 태그는 `#station-name-input` id값을 가진다.
+- [x] 지하철 역을 추가하는 button 태그는 `#station-add-button` id값을 가진다.
+- [x] 지하철 역을 삭제하는 button 태그는 `.station-delete-button` class값을 가진다.
+
+- [x] 지하철 역을 등록하고 삭제할 수 있다. (단, 노선에 등록된 역은 삭제할 수 없다)
+  - [x] localStorage에 등록
+- [x] 중복된 지하철 역 이름이 등록될 수 없다.
+- [x] 지하철 역은 2글자 이상이어야 한다.
+- [x] 지하철 역의 목록을 조회할 수 있다.
+
+### 🛤 지하철 노선 관리
+
+- [x] 지하철 노선의 이름을 입력하는 input 태그는 `#line-name-input` id값을 가진다.
+- [x] 지하철 노선의 상행 종점을 선택하는 select 태그는 `#line-start-station-selector` id값을 가진다.
+- [x] 지하철 노선의 하행 종점을 선택하는 select 태그는 `#line-end-station-selector` id값을 가진다.
+- [x] 지하철 노선을 추가하는 button 태그는 `#line-add-button` id값을 가진다.
+- [x] 지하철 노선을 삭제하는 button 태그는 `.line-delete-button` class값을 가진다.
+
+- [x] 지하철 노선을 등록하고 삭제할 수 있다.
+- [x] 중복된 지하철 노선 이름이 등록될 수 없다.
+- [x] 노선 등록 시 상행 종점역과 하행 종점역을 입력받는다.
+- [x] 지하철 노선의 목록을 조회할 수 있다.
+
+### 🚉 지하철 구간 관리
+
+#### 삭제
+
+- [x] 지하철 노선에 구간을 추가하는 기능은 노선에 역을 추가하는 기능이라고도 할 수 있다.
+  - [x] 역과 역사이를 구간이라 하고 이 구간들의 모음이 노선이다.
+- [x] 하나의 역은 여러개의 노선에 추가될 수 있다.
+- [x] 역과 역 사이에 새로운 역이 추가 될 수 있다.
+- [x] 노선에서 갈래길은 생길 수 없다.
+
+#### 추가
+
+- [x] 지하철 노선을 선택하는 button 태그는 `.section-line-menu-button` class값을 가진다.
+- [x] 지하철 구간을 설정할 역 select 태그는 `#section-station-selector` id값을 가진다.
+- [x] 지하철 구간의 순서를 입력하는 input 태그는 `#section-order-input` id값을 가진다.
+- [x] 지하철 구간을 등록하는 button 태그는 `#section-add-button` id값을 가진다.
+- [x] 지하철 구간을 제거하는 button 태그는 `.section-delete-button` class값을 가진다.
+
+- [x] 노선에 등록된 역을 제거할 수 있다.
+- [x] 노선에 역을 중복해서 추가할 수 없다.
+- [x] 종점을 제거할 경우 다음 역이 종점이 된다.
+- [x] 노선에 포함된 역이 두개 이하일 때는 역을 제거할 수 없다.
+
+
+### 🗺 지하철 노선도 출력
+
+- [x] 지하철 노선도 출력 버튼을 누르면 `<div class="map"></div>` 태그를 만들고 해당 태그 내부에 노선도를 출력한다.
+
+- [x] 노선의 상행 종점부터 하행 종점까지 연결된 순서대로 역 목록을 조회할 수 있다.
diff --git a/index.html b/index.html
@@ -3,10 +3,99 @@
   <head>
     <meta charset="UTF-8" />
     <title>지하철 노선도 관리</title>
+    <style>
+      table {
+        border: 1px solid #444444;
+      }
+
+      th,
+      td {
+        border: 1px solid #444444;
+      }
+    </style>
   </head>
+
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <h1>🚇 지하철 노선도 관리</h1>
+      <div>
+        <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-management" hidden>
+        <h2>
+          역 이름
+          <br />
+          <input
+            id="station-name-input"
+            placeholder="역 이름을 입력해주세요."
+          />
+          <button id="station-add-button">역 추가</button>
+        </h2>
+        <h2>🚉 지하철 역 목록</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>역 이름</th>
+              <th>설정</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </div>
+      <div id="line-management" hidden>
+        <p>
+          <strong>노선 이름</strong>
+          <br />
+          <input id="line-name-input" placeholder="노선 이름을 입력해주세요." />
+        </p>
+        <span><strong>상행 종점</strong></span>
+        <select id="line-start-station-selector"></select>
+        <br />
+        <span><strong>하행 종점</strong></span>
+        <select id="line-end-station-selector"></select>
+        <p>
+          <button id="line-add-button">노선 추가</button>
+        </p>
+        <h2>🚉 지하철 노선 목록</h2>
+        <table id="line-table">
+          <thead>
+            <tr>
+              <th>노선 이름</th>
+              <th>상행 종점역</th>
+              <th>하행 종점역</th>
+              <th>설정</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </div>
+      <div id="section-management" hidden>
+        <h4>구간을 수정할 노선을 선택해주세요.</h4>
+        <h3></h3>
+        <div id="section-buttons"></div>
+        <div id="section-register" hidden>
+          <div id="section-manage-text"></div>
+          <p>구간 등록</p>
+          <select id="section-station-selector"></select>
+          <input id="section-order-input" placeholder="순서" />
+          <button id="section-add-button">등록</button>
+          <br>
+          <br>
+          <table id="section-table">
+              <thead>
+                <tr>
+                  <th>순서</th>
+                  <th>이름</th>
+                  <th>설정</th>
+                </tr>
+              </thead>
+              <tbody></tbody>
+            </table>
+        </div>
+      </div>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>

diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "javascript-subway-map-precourse",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/transcendence42/javascript-subway-map-precourse.git",
+  "author": "hochan Lee <hochan049@gmail.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "eslint": "^7.27.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.3",
+    "eslint-plugin-prettier": "^3.4.0",
+    "prettier": "^2.3.0"
+  },
+  "scripts": {
+    "lint": "eslint ."
+  }
+}
diff --git a/src/controller/error-message.js b/src/controller/error-message.js
@@ -0,0 +1,8 @@
+export const errorMessage = {
+  stationDuplicate: '❗역이 중복되었습니다. ❗',
+  stationLength: '❗두글자 미만으로는 설정 할 수 없습니다.❗',
+  lineDuplicate: '❗중복된 노선입니다. ❗',
+  lineStationForbidden: '❗노선에 등록된 역은 삭제할 수 없습니다.❗',
+  sectionInvalidRangeInput: '❗범위에 맞지 않은 입력입니다. 재입력 해주세요!❗',
+  sectionInvalidOption: '❗노선에 이미 등록된 역입니다. 재선택 해주세요!❗',
+};
diff --git a/src/controller/index.js b/src/controller/index.js
@@ -0,0 +1,11 @@
+import { controlStationManagement } from './station-management/index.js';
+import { controlLineManagement } from './line-management/index.js';
+import { controlSectionManagement } from './section-management/index.js';
+import { controlSubwayRouteMap } from './subway-route-map/index.js';
+
+export const controller = () => {
+  controlStationManagement();
+  controlLineManagement();
+  controlSectionManagement();
+  controlSubwayRouteMap();
+};
diff --git a/src/controller/line-management/add-line.js b/src/controller/line-management/add-line.js
@@ -0,0 +1,52 @@
+import { rerenderSectionButtons } from '../section-management/index.js';
+import { addLineLocalStorage, addLineList } from './model.js';
+import { checkValidLineSelector } from './check.js';
+import { deleteLine } from './delete-line.js';
+import { storage } from '../../model/index.js';
+import { addButtonEvent } from '../utils.js';
+import { elementIds } from '../../utils.js';
+import { initLineInput } from './init.js';
+import { renderLine } from './view.js';
+
+const addLineButtonEvent = (lineName) => {
+  for (const item of document.querySelectorAll(
+    `table[id=line-table] tbody tr td button`,
+  )) {
+    if (item.dataset.line === `${lineName}-button`) {
+      addButtonEvent(item, deleteLine);
+    }
+  }
+};
+
+export const addLine = () => {
+  const lineName = elementIds.lineNameInput.value;
+  const lineStartStationSelectorValue =
+    elementIds.lineStartStationSelector.value;
+  const lineEndStationSelectorValue = elementIds.lineEndStationSelector.value;
+  if (
+    !checkValidLineSelector(
+      lineStartStationSelectorValue,
+      lineEndStationSelectorValue,
+    )
+  ) {
+    return;
+  }
+  if (
+    !addLineLocalStorage(
+      lineStartStationSelectorValue,
+      lineEndStationSelectorValue,
+    )
+  ) {
+    return;
+  }
+  renderLine({
+    lineName,
+    lineStartStationSelectorValue,
+    lineEndStationSelectorValue,
+  });
+  initLineInput();
+  addLineList(lineStartStationSelectorValue, lineEndStationSelectorValue);
+  addLineButtonEvent(lineName);
+  rerenderSectionButtons();
+  console.log(storage.getLocalStorageMap('subway-line'));
+};
diff --git a/src/controller/line-management/check.js b/src/controller/line-management/check.js
@@ -0,0 +1,12 @@
+import { errorMessage } from '../error-message.js';
+
+export const checkValidLineSelector = (
+  lineStartStationSelectorValue,
+  lineEndStationSelectorValue,
+) => {
+  if (lineStartStationSelectorValue === lineEndStationSelectorValue) {
+    alert(errorMessage.stationDuplicate);
+    return false;
+  }
+  return true;
+};
diff --git a/src/controller/line-management/delete-line.js b/src/controller/line-management/delete-line.js
@@ -0,0 +1,16 @@
+import { rerenderSectionButtons } from '../section-management/index.js';
+import { storage } from '../../model/index.js';
+
+export const deleteLine = (e) => {
+  const dataLine = e.currentTarget.dataset.line.slice(0, -7);
+  for (const item of document.querySelectorAll(
+    `table[id=line-table] tbody tr`,
+  )) {
+    if (item.dataset.line === dataLine) {
+      storage.removeLocalStorage('subway-line', item.dataset.line);
+      item.remove();
+    }
+  }
+  window.removeEventListener(e.currentTarget, deleteLine);
+  rerenderSectionButtons();
+};
diff --git a/src/controller/line-management/index.js b/src/controller/line-management/index.js
@@ -0,0 +1,15 @@
+import { toggleDisplay } from './toggle-display.js';
+import { deleteLine } from './delete-line.js';
+import { addButtonEvent } from '../utils.js';
+import { elementIds } from '../../utils.js';
+import { addLine } from './add-line.js';
+
+export const controlLineManagement = () => {
+  addButtonEvent(elementIds.lineManagerButton, toggleDisplay);
+  addButtonEvent(elementIds.lineAddButton, addLine);
+  for (const item of document.querySelectorAll(
+    `table[id=line-table] tbody tr button`,
+  )) {
+    addButtonEvent(item, deleteLine);
+  }
+};
diff --git a/src/controller/line-management/init.js b/src/controller/line-management/init.js
@@ -0,0 +1,6 @@
+import { elementIds } from '../../utils.js';
+
+export const initLineInput = () => {
+  elementIds.lineNameInput.value = '';
+  elementIds.lineNameInput.focus();
+};
diff --git a/src/controller/line-management/model.js b/src/controller/line-management/model.js
@@ -0,0 +1,37 @@
+import { errorMessage } from '../error-message.js';
+import { storage } from '../../model/index.js';
+import { elementIds } from '../../utils.js';
+
+const addLineList = (
+  lineStartStationSelectorValue,
+  lineEndStationSelectorValue,
+) => {
+  if (!storage.getLocalStorage('subway-line-list')) {
+    storage.setLocalStorageArray('subway-line-list', []);
+  }
+  const lineList = storage.getLocalStorageArray('subway-line-list');
+  lineList.push(lineStartStationSelectorValue, lineEndStationSelectorValue);
+  storage.setLocalStorageArray('subway-line-list', lineList);
+};
+
+const addLineLocalStorage = (
+  lineStartStationSelectorValue,
+  lineEndStationSelectorValue,
+) => {
+  if (!storage.getLocalStorage('subway-line')) {
+    storage.setLocalStorageMap('subway-line', new Map());
+  }
+  const subwayLine = storage.getLocalStorageMap('subway-line');
+  if (subwayLine.get(elementIds.lineNameInput.value)) {
+    alert(errorMessage.lineDuplicate);
+    return false;
+  }
+  subwayLine.set(elementIds.lineNameInput.value, [
+    lineStartStationSelectorValue,
+    lineEndStationSelectorValue,
+  ]);
+  storage.setLocalStorageMap('subway-line', subwayLine);
+  return true;
+};
+
+export { addLineList, addLineLocalStorage };
diff --git a/src/controller/line-management/toggle-display.js b/src/controller/line-management/toggle-display.js
@@ -0,0 +1,12 @@
+import { initSubwayRouteMap } from '../subway-route-map/init.js';
+import { elementIds } from '../../utils.js';
+
+export const toggleDisplay = () => {
+  elementIds.stationManagement.hidden = true;
+  elementIds.lineManagement.hidden = !elementIds.lineManagement.hidden;
+  elementIds.sectionManagement.hidden = true;
+  if (elementIds.mapPrintManagement) {
+    elementIds.mapPrintManagement.hidden = true;
+  }
+  initSubwayRouteMap();
+};