woowacourse · da1907 · Dec 14, 2020 · Dec 14, 2020 · Dec 14, 2020 · Dec 14, 2020
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,17 @@
+{
+  "env": {
+      "browser": true,
+      "es6": true
+  },
+  "extends": "eslint:recommended",
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+      "ecmaVersion": 2018,
+      "sourceType": "module"
+  },
+  "rules": {
+  }
+}
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/constants.js b/constants.js
@@ -0,0 +1,14 @@
+const MINIMUM_INPUT_LENGTH = 2;
+const MINIMUM_STATION_COUNT = 2;
+
+export const REGISTERD_STATION_MESSAGE = `노선에 등록된 역은 삭제할 수 없습니다!`;
+export const DUPLICATED_STATION_MESSAGE = `중복된 지하철 역 이름은 등록될 수 없습니다!`;
+export const TEXT_LENGTH_MESSAGE = `지하철 역은 ${MINIMUM_INPUT_LENGTH}글자 이상이어야 합니다!`;
+
+export const DUPLICATED_LINE_MESSAGE = `중복된 지하철 노선 이름은 등록될 수 없습니다!`;
+
+export const DUPLICATED_SECTION_MESSAGE = `노선 내에 이미 등록된 역입니다!`;
+export const ORDER_MESSAGE = (number) => `순서는 0 ~ ${number}로 지정해주세요!`;
+export const MINIMUM_STATION_MESSAGE = `노선에는 역이 ${MINIMUM_STATION_COUNT} 개 이상 포함되어 있어야 합니다!`;
+
+export const DELET_CONFIRM_MESSAGE = `정말로 삭제하시겠습니까?`;
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,37 @@
+## 📌 구현할 기능 목록
+
+[x] alert 메세지 상수 지정
+
+- 메뉴 기능
+  [x] 메뉴 버튼 생성
+  [x] `1. 역 관리` 버튼 누르면 **지하철 역 관련 기능** 화면 출력
+  [x] `2. 노선 관리` 버튼 누르면 **지하철 노선 관련 기능** 화면 출력
+  [x] `3. 구간 관리` 버튼 누르면 **지하철 구간 관련 기능** 화면 출력
+  [x] `4. 지하철 노선도 출력` 버튼 누르면 **모든 노선의 역 조회 기능** 화면 출력
+
+- 지하철 역 관련 기능
+  [x] UI 구현
+  [ ] 지하철 역 등록
+  [ ] 역 이름 중복 여부 체크
+  [ ] 역 이름 두 글자 이상인지 체크
+  [ ] 역 목록에 추가
+  [ ] 지하철 역 삭제
+  [ ] 노선에 등록되어 있는 역인지 체크
+
+- 지하철 노선 관련 기능
+  [x] UI 구현
+  [ ] 노선 이름, 상행 종점역, 하행 종점역 입력받기
+  [ ] 노선 이름 중복 여부 체크
+  [ ] 노선 목록에 추가
+  [ ] 노선 삭제
+
+- 지하철 구간 관련 기능
+  [x] UI 구현
+  [ ] 수정할 노선 입력받기
+  [ ] 구간 등록
+  [ ] 제일 처음, 제일 끝에 추가되면 alert
+  [ ] 구간 삭제
+  [ ] 삭제하고 남은 역 개수 두 개 이하이면 alert
+
+- 모든 노선의 역 조회 기능
+  [ ] 모든 노선의 역 목록 출력
diff --git a/index.html b/index.html
@@ -7,6 +7,13 @@
   <body>
     <div id="app">
       <h1>🚇 지하철 노선도 관리 </h1>
+      <div id="manager-buttons-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="contents-container"></div>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>

diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,30 @@
+import { applyStation } from './station.js';
+import { applyLine } from './line.js';
+import { applySection } from './section.js';
+import { printMap } from './mapPrint.js';
+
+export default function SubwayMap() {
+  const stationManageBtn = document.getElementById('station-manager-button');
+  const lineManageBtn = document.getElementById('line-manager-button');
+  const sectionManageBtn = document.getElementById('section-manager-button');
+  const mapPrintManageBtn = document.getElementById('map-print-manager-button');
+
+  const chooseMenu = () => {
+    if (stationManageBtn) {
+      stationManageBtn.addEventListener('click', applyStation);
+    }
+    if (lineManageBtn) {
+      lineManageBtn.addEventListener('click', applyLine);
+    }
+    if (sectionManageBtn) {
+      sectionManageBtn.addEventListener('click', applySection);
+    }
+    if (mapPrintManageBtn) {
+      mapPrintManageBtn.addEventListener('click', printMap);
+    }
+  };
+
+  chooseMenu();
+}
+
+new SubwayMap();
diff --git a/src/template.js b/src/template.js
@@ -0,0 +1,154 @@
+export const stationInput = () => {
+  return `
+    <br><label>역 이름</label><br>
+    <input id="station-name-input" type="text" placeholder="역 이름을 입력해주세요." />
+    <button id="station-apply-btn">역 추가</button>`;
+};
+
+export const stationTable = () => {
+  return `
+    <h2>🚉지하철 역 목록</h2>
+    <table border=1px>
+      <thead>
+        <tr>
+          <th>역 이름</th>
+          <th>설정</th>
+        </tr>
+      </thead>
+      ${stationList(stations)}
+    </table>`;
+};
+
+const stationList = (stations) => {
+  let count = 0;
+  return stations
+    .map(
+      (station) =>
+        `<tr>
+        <td>${station.name}</td>
+        <td data-index='${count++}'>
+          <button id='delete-station-btn'>삭제</button>
+        </td></tr>`
+    )
+    .join('');
+};
+
+export const lineInput = (stations) => {
+  return `
+    <br><label>노선 이름</label><br>
+    <input id='line-name-input' type='text' placeholder='노선 이름을 입력해주세요.'/><br><br>
+    상행 종점 <select id="start-station-selector">
+      ${stationSelectorOption(stations)}
+    </select><br>
+    하행 종점 <select id="end-station-selector">
+      ${stationSelectorOption(stations)}
+    </select><br><br>
+    <button id="line-apply-btn">노선 추가</button>`;
+};
+
+const stationSelectorOption = (stations) => {
+  return stations.map((station) => `<option>${station.name}</option>`).join('');
+};
+
+export const lineTable = (lines) => {
+  return `
+    <h2>🚉지하철 노선 목록</h2>
+      <table border=1px>
+        <thead>
+          <tr>
+            <th>노선 이름</th>
+            <th>상행 종점역</th>
+            <th>하행 종점역</th>
+            <th>설정</th>
+          </tr>
+        </thead>
+        ${lineList(lines)}
+      </table>`;
+};
+
+const lineList = (lines) => {
+  let count = 0;
+  return lines
+    .map(
+      (line) =>
+        `<tr>
+        <td>${line.name}</td>
+        <td>${line.section[0]}</td>
+        <td>${line.section[line.section.length - 1]}</td>
+        <td data-index='${count++}'>
+          <button id='delete-line-btn'>삭제</button>
+        </td>
+      </tr>`
+    )
+    .join('');
+};
+
+export const sectionLineMenuTemplate = (lines) => {
+  return `
+  <h2>구간을 수정할 노선을 선택해주세요.</h2>
+  ${lineNumbersToBtn(lines)}`;
+};
+
+const lineNumbersToBtn = (lines) => {
+  let count = 0;
+  return lines
+    .map(
+      (line) => `
+    <button data-index='${count++}' id='lineBtn'>
+    ${line.name}</button>`
+    )
+    .join('');
+};
+
+export const sectionInput = (line, stations) => {
+  return `
+  <h2>${line} 관리</h2>
+  <h4>구간 등록</h4>
+  <select id='section-station-selector'>${stationSelectorOption(stations)}</select>
+  <input id='section-order-input' type='number' placeholder='순서'/>
+  <button id='section-apply-btn'>등록</button></br></br>`;
+};
+
+export const sectionTable = (sections) => {
+  return `
+    <table border=1px>
+      <thead>
+        <tr>
+          <th>순서</th>
+          <th>이름</th>
+          <th>설정</th>
+        </tr>
+      </thead>
+      ${sectionList(sections)}
+    </table>`;
+};
+
+const sectionList = (sections) => {
+  let count = 0;
+  return sections
+    .map(
+      (section) => `
+      <tr>
+        <td>${count}</td>
+        <td>${section}</td>
+        <td data-index='${count++}' data-name='${section}'><button id='delete-section-btn'>노선에서 제거</button></td>
+      </tr>`
+    )
+    .join('');
+};
+
+export const mapPrint = (lines) => {
+  return lines
+    .map(
+      (line) => `
+    <h3>${line.name}</h3>
+    <ul>
+      ${showSection(line.section)}
+    </ul>`
+    )
+    .join('');
+};
+
+const showSection = (sections) => {
+  return sections.map((section) => `<li>${section}</li>`).join('');
+};