[yechoi] javascript-subway-map-precourse #3
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| node_modules | ||
| .eslintrc.js | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| module.exports = { | ||
| "env": { | ||
| "browser": true, | ||
| "es2021": true | ||
| }, | ||
| "extends": ["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'], | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| node_modules |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "semi": true, | ||
| "useTabs": false, | ||
| "tabWidth": 2, | ||
| "printWidth": 80, | ||
| "singleQuote": true, | ||
| "arrowParens": "always", | ||
| "trailingComma": "all" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| { | ||
| "name": "javascript-subway-map-precourse", | ||
| "version": "1.0.0", | ||
| "main": "index.js", | ||
| "repository": "https://github.com/transcendence42/javascript-subway-map-precourse.git", | ||
| "author": "Yeji Choi <yechoi@student.42seoul.kr>", | ||
| "license": "MIT", | ||
| "devDependencies": { | ||
| "eslint": "^7.27.0", | ||
| "eslint-config-prettier": "^8.3.0", | ||
| "eslint-plugin-prettier": "^3.4.0", | ||
| "prettier": "^2.3.0" | ||
| }, | ||
| "scripts": { | ||
| "lint": "eslint ." | ||
|
|
||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| export const Message = {}; | ||
|
|
||
| export const MainButtons = { | ||
| STATION: '#station-manager-button', | ||
| LINE: '#line-manager-button', | ||
| SECTION: '#section-manager-button', | ||
| MAP: '#map-print-manager-button', | ||
| }; | ||
|
|
||
| export const Station = { | ||
| DIV: '#stationPart', | ||
| INPUT: '#station-name-input', | ||
| ADDBTN: '#station-add-button', | ||
| DELETEBTN: '.station-delete-button', | ||
| TABLE: '#station-table', | ||
| TH: `<th style="border: 1px solid"><strong>역 이름</strong></th> | ||
| <th style="border: 1px solid"><strong>설정</strong></th>`, | ||
| }; | ||
|
|
||
| export const Line = { | ||
| DIV: '#linePart', | ||
| INPUT: '#line-name-input', | ||
| START: '#line-start-station-selector', | ||
| END: '#line-end-station-selector', | ||
| ADDBTN: '#line-add-button', | ||
| TABLE: '#line-table', | ||
| TH: `<th style="border: 1px solid"><strong>노선 이름</strong></th> | ||
| <th style="border: 1px solid"><strong>상행 종점역</strong></th> | ||
| <th style="border: 1px solid"><strong>하행 종점역</strong></th> | ||
| <th style="border: 1px solid"><strong>설정</strong></th>`, | ||
| }; | ||
|
|
||
| export const Section = { | ||
| DIV: '#sectionPart', | ||
| BTNS: '#line-buttons', | ||
| MANAGER: '#section-manager', | ||
| SELECT: '#station-select-button', | ||
| INPUT: '#station-order', | ||
| REGISTER: '#section-register', | ||
| TABLE: '#section-table', | ||
| DELETEBTN: 'section-delete-button', | ||
| TH: `<th style="border: 1px solid"><strong>순서</strong></th> | ||
| <th style="border: 1px solid"><strong>이름</strong></th> | ||
| <th style="border: 1px solid"><strong>설정</strong></th>`, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { Line } from '../constant.js'; | ||
| import { addLine, deleteLine } from '../model/line.js'; | ||
| import { removeLineTable, addLineTable } from '../view/vline.js'; | ||
|
|
||
| function clickAddLine() { | ||
| const newLine = document.getElementById(Line.INPUT).value; | ||
| const start = document.getElementById(Line.START).value; | ||
| const end = document.getElementById(Line.END).value; | ||
|
|
||
| if (start === end) { | ||
| alert('상행 종점역과 하행 종점역이 같을 수 없습니다.'); | ||
| } else if (addLine(newLine, start, end) == false) { | ||
| alert('중복된 지하철 노선 이름은 등록할 수 없습니다.'); | ||
| } else { | ||
| addLineTable(newLine, start, end); | ||
| document.getElementById(Line.INPUT).value = ''; | ||
| } | ||
| } | ||
|
|
||
| function activateTableListener() { | ||
| document.getElementById(Line.TABLE).addEventListener('click', (e) => { | ||
| const target = e.target; | ||
|
There was a problem hiding this comment. 처음에 코드를 작성하면서 매개 변수로 넘겨져오는 event 를 사용을 안했는데 생각해보니 event로 다 접근 가능 하더라구요..! document.~ 으로 접근안하고 event 활용한점 너무 좋은것같아요! |
||
| const action = target.dataset.action; | ||
|
|
||
| if (action === 'deleteLine') { | ||
| removeLineTable(target.closest('tbody')); | ||
| deleteLine(target.dataset.id); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| export function constructLine() { | ||
| const stations = JSON.parse(localStorage.getItem('stations')); | ||
|
There was a problem hiding this comment. 로컬스토리지 접근 함수를 코드 전반에 걸쳐 여러차례 사용하기 때문에 미리 유틸에 넣어놓는 방법도 좋을 것 같습니다. export const storeLocalStorage = (key, object) => {
localStorage.setItem(key, JSON.stringify(object));
};
export const loadLocalStorage = (key) => {
return JSON.parse(localStorage.getItem(key));
}; |
||
| const lineAddButton = document.getElementById(Line.ADDBTN); | ||
| lineAddButton.addEventListener('click', () => clickAddLine()); | ||
| if (stations) { | ||
| activateTableListener(); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import { MainButtons, Station } from '../constant.js'; | ||
| import { renderStationTable } from '../view/vstation.js'; | ||
| import { renderLineTable } from '../view/vline.js'; | ||
| import { renderLineButtons } from '../view/vsection.js'; | ||
| import { renderMap } from '../view/vmap.js'; | ||
| import { constructStation } from './cstation.js'; | ||
| import { constructLine } from './cline.js'; | ||
| import { constructSection } from './csection.js'; | ||
|
|
||
|
|
||
| function getParts() { | ||
| return { | ||
| stationPart: document.getElementById('#stationPart'), | ||
| linePart: document.getElementById('#linePart'), | ||
| sectionPart: document.getElementById('#sectionPart'), | ||
| mapPart: document.getElementById('#mapPart'), | ||
| }; | ||
| } | ||
|
|
||
| function showElem(elem) { | ||
| elem.style.display = 'block'; | ||
| } | ||
|
|
||
| function hideElem(elem) { | ||
| elem.style.display = 'none'; | ||
| } | ||
|
|
||
| // show 함수들이 다 내부적으로 비슷한데 효율적으로 만들 방법은 없었을까? | ||
| // getParts를 매번 해오지 않을 방법은? object 다른 파일에서 import 해서 쓰는 건 잘 작동하지 않았다. | ||
| // 초기에 id가 설정이 안돼있었기 때문일까? | ||
|
Comment on lines
+28
to
+30
There was a problem hiding this comment. toggle 관련해서 비슷한 고민을 했는데 좋은 방법을 찾으면 공유하기로...! |
||
|
|
||
| function showStationPart() { | ||
| const Parts = getParts(); | ||
| showElem(Parts.stationPart); | ||
| hideElem(Parts.linePart); | ||
| hideElem(Parts.sectionPart); | ||
| hideElem(Parts.mapPart); | ||
| renderStationTable(); | ||
| } | ||
|
|
||
| function showLinePart() { | ||
| const Parts = getParts(); | ||
| hideElem(Parts.stationPart); | ||
| showElem(Parts.linePart); | ||
| hideElem(Parts.sectionPart); | ||
| hideElem(Parts.mapPart); | ||
| renderLineTable(); | ||
| } | ||
|
|
||
| function showSectionPart() { | ||
| const Parts = getParts(); | ||
| hideElem(Parts.stationPart); | ||
| hideElem(Parts.linePart); | ||
| showElem(Parts.sectionPart); | ||
| hideElem(Parts.mapPart); | ||
| renderLineButtons(); | ||
| } | ||
|
|
||
| function showMapPart() { | ||
| const Parts = getParts(); | ||
| hideElem(Parts.stationPart); | ||
| hideElem(Parts.linePart); | ||
| hideElem(Parts.sectionPart); | ||
| showElem(Parts.mapPart); | ||
| renderMap(); | ||
| } | ||
|
|
||
| function constructor() { | ||
| document | ||
| .getElementById('#menu-buttons') | ||
| .addEventListener('click', (e) => { | ||
| if (e.target.id === MainButtons.STATION) { | ||
| showStationPart(); | ||
| } else if (e.target.id === MainButtons.LINE) { | ||
| showLinePart(); | ||
| } else if (e.target.id === MainButtons.SECTION) { | ||
| showSectionPart(); | ||
| } else if (e.target.id === MainButtons.MAP) { | ||
| showMapPart(); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| export default function controller() { | ||
| constructor(); | ||
| constructStation(); | ||
| constructLine(); | ||
| constructSection(); | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
'EOL' 이라는 키워드를 검색해서 관련된 아티클을 한번 읽어보시면 좋을거 같아요!