Project ETA

구글 캘린더에 일정을 등록하면, 목적지까지의 소요시간에 따라 적절한 시간에 출발 알림을 주는 웹서비스

ETA는 정해진 시간에 일정 개최지에 도착할 수 있도록 사용자가 캘린더에 일정을 저장하는 것에서부터 첫 대중교통을 탑승하기 전까지의 시나리오 안에서 최적의 사용자 경험을 제공하고자 합니다.

ETA

Server

npm install
node index

Client

npm install
npm start

• 구글 파이어베이스 API
• 구글 캘린더 API
• tmap 지도 API
• tmap 길찾기 API

• 캘린더에 일정을 등록할 때 ⏰시간과 📍장소 를 꼭 등록해주세요!

• 메인페이지에 접속했을 시, 로그인되어있지 않을 경우 로그인 페이지로 이동하게 됩니다.
• Continue with google 버튼을 눌러 나오는 팝업창에서 로그인을 하면 자동으로 메인페이지로 이동합니다.

🗒️ 일정 확인 기능

• 오늘을 기준으로 구글 캘린더 상에 등록되어 있는 일정을 한눈에 볼 수 있습니다.
• 설정페이지에서 유저가 등록한 home에서부터 구글 캘린더에 등록된 장소까지의 길찾기 시간과 준비시간을 확인할 수 있습니다.
• 일정 카드의 하단에는 목적지에 도착하기 위해 요구되는 시간과 알림을 제공할 시간을 확인할 수 있습니다.
• 일정 카드를 클릭하면 해당하는 일정 상세페이지로 이동합니다.

🔔 알림 기능

• 각 일정 카드에 있는 토글 버튼의 활성화 여부에 따라 알림 기능 제공 여부를 선택할 수 있습니다.
• 일정 카드 하단에 있는 출발 권고 시간이 다가오면, 알림이 오게 됩니다.

☠️ 메인페이지 스켈레톤 UI	오늘 일정이 없을 경우

길찾기 정보를 포함한 유저 시나리오 제시

• 출발 준비부터 정시에 목적지에 도착하기까지의 여정이 담겨 있는 페이지입니다.
• tmap 지도에 표시된 마커를 통하여 내가 찾아가야 할 경로를 확인할 수 있습니다.

• 길찾기의 기준점이 되는 집 주소, 외출 준비 시간, 달력 종류을 선택할 수 있는 페이지입니다.
• 설정페이지에 적용한 값은 메인페이지와 상세 페이지에 바로 반영됩니다.

집 주소 설정 모달	외출 준비시간 설정 모달	달력 선택 모달
다음 postcode 서비스를 통하여 주소 설정	외출 준비 시간은 일정의 알림 제공 시간에 반영	구글 캘린더에 저장된 캘린더 리스트들 중 메인 화면에 보일 캘린더를 선택

📦src
 ┣ 📂api
 ┣ 📂assets
 ┃ ┣ 📂fonts
 ┃ ┣ 📂images
 ┣ 📂components
 ┃ ┣ 📂getDirections
 ┃ ┣ 📂modal
 ┣ 📂hooks
 ┣ 📂pages
 ┣ 📂state
 ┣ 📂style
 ┣ 📂test
 ┣ 📂utils
⚒️ index.js
⚒️ tsconfig.json
⚒️ package.json
⚒️ package-lock.json