🚇 지하철 노선도 미션

사용자가 조회, 추가, 삭제 등의 기능을 이용하여 직접 지하철 노선도를 설계하는 어플리케이션입니다.

🚀 전반적인 구조

├── index.js
├── Components             # 컴포넌트 관련 디렉토리
│   ├── App.js             # 모든 컴포넌트를 관리하는 최상위 컴포넌트
│   ├── Menu.js            # 메뉴 버튼 컴포넌트
│   ├── /StationManager    # 역 관리 메뉴 컴포넌트
│   ├── /LineManager       # 노선 관리 메뉴 컴포넌트
│   ├── /SectionManager    # 구간 관리 메뉴 컴포넌트
│   └── /MapPrintManager   # 지하철 노선도 출력 메뉴 컴포넌트
│
├── /store                 # 상태 관리 관련 디렉토리
│   ├── observer.js        # 모든 상태 관리 스토어의 공통 옵저버 추상 클래스
│   ├── lineStore.js       # 노선 상태 관리 스토어
│   └── stationStore.js    # 역 상태 관리 스토어
│
└── /utils                 # 각종 유틸들을 모아놓은 디렉토리
    ├── domUtil.js         # DOM API를 활용한 유틸
    ├── storage.js         # 로컬스토리지 활용 유틸
    ├── /constants         # 각종 상수값 모아 놓은 유틸
    ├── /templates         # HTML 템플릿을 모아 놓은 유틸
    └── /validations       # 어플리케이션 동작과 관련한 각종 검증 유틸

🚀 기능 목록

0. 메뉴 인터페이스 및 공통 기능

1. 메뉴 버튼 렌더링

   • 4개의 메뉴 버튼을 렌더링 하는 기능
   • 각각의 버튼 클릭시 적절한 메뉴 화면을 보여주는 기능

2. localStorage

   • 로컬스토리지를 통해 저장된 역에 대한 정보를 저장하고 불러오는 기능.
   • 로컬스토리지를 통해 저장된 노선에 대한 정보를 저장하고 불러오는 기능

1. 역 관리 메뉴

1. 지하철 역 등록

   • 역을 입력하면 해당 역을 추가하는 기능
   • 역 입력값에 대한 검증 하는 기능
     • 지하철 역 이름 2글자 이상
     • 중복된 이름 등록 X
     • 빈 입력값 X

2. 지하철 역 삭제

   • 등록된 역을 삭제하는 기능
     • 이미 노선에 등록된 역은 삭제 X

3. 지하철 역 목록 조회

   • 저장된 역을 테이블 형태로 보여주는 기능

2. 노선 관리 메뉴

1. 지하철 노선 등록

   • 노선 이름 입력과 상행, 하행 종점을 선택하여 노선을 추가하는 기능
   • 추가할 노선을 검증하는 기능
     • 노선 등록 시 상행, 하행 종점역 필요
     • 동일한 역으로 상행, 하행 종점 설정 X
     • 중복된 노선 등록 X

2. 지하철 노선 삭제

   • 등록된 노선을 삭제하는 기능

3. 지하철 노선 목록 조회

   • 저장된 노선을 테이블 형태로 보여주는 기능

3. 구간 관리 메뉴

1. 지하철 노선 목록 활성화

   • 저장된 노선 목록을 버튼 형태로 보여주는 기능
   • 노선 버튼 클릭시 해당 노선의 구간 목록을 보여주는 기능

2. 지하철 구간 등록

   • 구간에 등록할 지하철 역을 선택하고, 구간 순서를 입력하여 추가하는 기능
   • 등록할 구간에 대해 검증하는 기능
     • 이미 등록되어 있는 역 X
     • 음수, 구간의 길이보다 큰 순서 등록 X
     • 빈 구간 값 등록 X
     • 0번 순서, 구간 길이 + 1의 순서는 등록 O

3. 지하철 구간 삭제

   • 선택한 역을 구간에서 지우는 기능

     • 0번 구간을 지우면 1번 역이 0번이 됨
     • 마지막 구간을 지우면 마지막 바로 앞에 역이 마지막이 됨
     • 중간 구간을 지우면 지워진 역 다음부터 번호를 땡겨 갱신함

   • 지울 구간에 대해 검증하는 기능

     • 노선내 역이 2개 이하면 구간 삭제 X

4. 지하철 노선도 출력 메뉴

1. 모든 노선 및 구간 목록 활성화
   • 모든 노선에 대한 지하철 역 조회 기능
     • 모든 노선의 구간 목록을 리스트 형태 보여줌
     • 노선이 없을 경우 노선이 없다는 안내 메시지를 보여줌

🚀 기타

3WEEK 미션 진행