프로젝트 요구사항 분석

프로젝트 권장사항 정리

• 타입스크립트 사용하기! 긍정적!!
• 단순 클론? 추가적인 기능? (https://mapstyle.withgoogle.com)
• CRA 사용
• mapbox sdk 어느 정도 사용?
• 주 사용자? 사용 목적?
  • 블로그 스마트 에디터 내 커스텀 디자인
• 정리된 요구사항에 대한 대략적인 중요도?
• redux?!

기술 스펙 정리

• 언어: Typescript
• 프레임워크: 리액트
• 패키지: redux, emotion js, prettier, eslint, (mapbox)

요구사항 정리

• Map 스타일 편집기
  • density
    • Roads
    • Landmarks
    • Labels
  • theme
  • import(by JSON)
  • export(by JSON), API Key 발급?
  • search
  • 현재 위치
  • 전체화면으로 확장
  • 화면 드래그를 이용한 위치이동
  • 지도 확대 축소 (+/- | 마우스휠)
  • 지도 더블 클릭/스크롤시 지도 확대/축소
  • More Options
    • Element Type
      • Geometry
      • Labels
    • Stylers
      • Visibility
      • Color
      • Weight
      • Saturation
      • Lightness
    • 변경이 된 항목에 가운데점으로 변경사항 표시
  • undo 기능(스타일 적용 뒤로가기)
  • reset 기능
  • compare 기능
  • 추가 기능(브레인스토밍)
    • 반응형

UI

• Prototype tool Figma 활용
• https://www.figma.com/file/cwjgVIiCH4YtKRCSSWKHji/project08?node-id=1%3A3

feature list

• Spreadsheet 활용 feature list 링크

추가된 부가기능

• 사용자가 원하는 곳에 마커 생성 및 제거 marker 관련 tutorial

프로젝트 구성

• Presentational and Container Components
  • 한 컴포넌트 폴더 안에 presenter와 container 파일 필요
  • 해당 컴포넌트를 불러올때 container 불러오기
• components 폴더 안에 같은 depth로 각 component 폴더 생성

+-- src
    +-- components
    +-- hooks
    +-- pages
    +-- store
    +-- utils