diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 000000000..a9ab309eb --- /dev/null +++ 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": { + } +} \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 000000000..0a725205c --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": true +} diff --git a/constants.js b/constants.js new file mode 100644 index 000000000..2f92c1b2d --- /dev/null +++ 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 new file mode 100644 index 000000000..bafe0a008 --- /dev/null +++ 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 index fc99deac2..7fd31b1da 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,13 @@

🚇 지하철 노선도 관리

+
+ + + + +
+
diff --git a/src/index.js b/src/index.js index e69de29bb..fd84046ed 100644 --- 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 new file mode 100644 index 000000000..2e25b964d --- /dev/null +++ b/src/template.js @@ -0,0 +1,154 @@ +export const stationInput = () => { + return ` +

+ + `; +}; + +export const stationTable = () => { + return ` +

🚉지하철 역 목록

+ + + + + + + + ${stationList(stations)} +
역 이름설정
`; +}; + +const stationList = (stations) => { + let count = 0; + return stations + .map( + (station) => + ` + ${station.name} + + + ` + ) + .join(''); +}; + +export const lineInput = (stations) => { + return ` +

+

+ 상행 종점
+ 하행 종점

+ `; +}; + +const stationSelectorOption = (stations) => { + return stations.map((station) => ``).join(''); +}; + +export const lineTable = (lines) => { + return ` +

🚉지하철 노선 목록

+ + + + + + + + + + ${lineList(lines)} +
노선 이름상행 종점역하행 종점역설정
`; +}; + +const lineList = (lines) => { + let count = 0; + return lines + .map( + (line) => + ` + ${line.name} + ${line.section[0]} + ${line.section[line.section.length - 1]} + + + + ` + ) + .join(''); +}; + +export const sectionLineMenuTemplate = (lines) => { + return ` +

구간을 수정할 노선을 선택해주세요.

+ ${lineNumbersToBtn(lines)}`; +}; + +const lineNumbersToBtn = (lines) => { + let count = 0; + return lines + .map( + (line) => ` + ` + ) + .join(''); +}; + +export const sectionInput = (line, stations) => { + return ` +

${line} 관리

+

구간 등록

+ + +

`; +}; + +export const sectionTable = (sections) => { + return ` + + + + + + + + + ${sectionList(sections)} +
순서이름설정
`; +}; + +const sectionList = (sections) => { + let count = 0; + return sections + .map( + (section) => ` + + ${count} + ${section} + + ` + ) + .join(''); +}; + +export const mapPrint = (lines) => { + return lines + .map( + (line) => ` +

${line.name}

+ ` + ) + .join(''); +}; + +const showSection = (sections) => { + return sections.map((section) => `
  • ${section}
    • `).join(''); +};