Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rmdnps10/eta
구글 캘린더에 일정을 등록하면, 목적지까지의 소요시간에 따라 적절한 시간에 출발 알림을 주는 웹서비스
https://github.com/rmdnps10/eta
Last synced: about 2 months ago
JSON representation
구글 캘린더에 일정을 등록하면, 목적지까지의 소요시간에 따라 적절한 시간에 출발 알림을 주는 웹서비스
- Host: GitHub
- URL: https://github.com/rmdnps10/eta
- Owner: rmdnps10
- Created: 2023-11-15T07:07:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-13T07:59:51.000Z (about 1 year ago)
- Last Synced: 2024-11-01T21:08:38.881Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 12.9 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project ETA
**구글 캘린더에 일정을 등록하면, 목적지까지의 소요시간에 따라 적절한 시간에 출발 알림을 주는 웹서비스**
## 📚 프로젝트 소개
우리는 종종 약속에 늦지 않기 위해 일정 시작 시간과, 집에서 목적지까지의 이동 시간, 준비시간등을 어림잡아 지정한 출발 시간에 알람을 맞추곤 합니다.
그러나 항상 일이 예상대로 흘러가지는 않습니다 😅 알람을 맞추는 것을 잊어버리거나, 일정이 있다는 사실조차 잊어버리는 경우가 종종 있기 때문이죠.
**ETA는 정해진 시간에 일정 개최지에 도착할 수 있도록 사용자가 캘린더에 일정을 저장하는 것에서부터 첫 대중교통을 탑승하기 전까지의 시나리오 안에서 최적의 사용자 경험을 제공하고자 합니다.**
## ✨ Published URL
[ETA](https://web-eta-react-71t02clq29h4hj.sel4.cloudtype.app/main)
## ☑ Installation
Server
```
npm install
node index
```
Client
```
npm install
npm start
```
## 🚀 Tech Stacks
### Server
### Client
### API
- 구글 파이어베이스 API
- 구글 캘린더 API
- tmap 지도 API
- tmap 길찾기 API
# ETA 사용 가이드
### 0. 구글 캘린더에 일정 올리기
- 캘린더에 일정을 등록할 때 **⏰시간**과 **📍장소** 를 꼭 등록해주세요!
### 1. 첫 메인페이지 접속 (->로그인페이지)
- 메인페이지에 접속했을 시, 로그인되어있지 않을 경우 로그인 페이지로 이동하게 됩니다.
- `Continue with google` 버튼을 눌러 나오는 팝업창에서 로그인을 하면 자동으로 메인페이지로 이동합니다.
### 2. 메인페이지
**🗒️ 일정 확인 기능**
- **오늘**을 기준으로 구글 캘린더 상에 등록되어 있는 일정을 한눈에 볼 수 있습니다.
- `설정페이지`에서 유저가 등록한 home에서부터 구글 캘린더에 등록된 장소까지의 길찾기 시간과 준비시간을 확인할 수 있습니다.
- 일정 카드의 하단에는 목적지에 도착하기 위해 요구되는 시간과 알림을 제공할 시간을 확인할 수 있습니다.
- 일정 카드를 클릭하면 해당하는 `일정 상세페이지`로 이동합니다.
**🔔 알림 기능**
- 각 일정 카드에 있는 토글 버튼의 활성화 여부에 따라 알림 기능 제공 여부를 선택할 수 있습니다.
- 일정 카드 하단에 있는 출발 권고 시간이 다가오면, 알림이 오게 됩니다.
| ☠️ 메인페이지 스켈레톤 UI | 오늘 일정이 없을 경우 |
|------|------|
| 
| 
|
### 3. 일정 상세페이지
**길찾기 정보를 포함한 유저 시나리오 제시**
- 출발 준비부터 정시에 목적지에 도착하기까지의 여정이 담겨 있는 페이지입니다.
- `tmap` 지도에 표시된 마커를 통하여 내가 찾아가야 할 경로를 확인할 수 있습니다.
### 4. 설정페이지
- 길찾기의 기준점이 되는 **집 주소**, **외출 준비 시간**, **달력 종류**을 선택할 수 있는 페이지입니다.
- 설정페이지에 적용한 값은 메인페이지와 상세 페이지에 바로 반영됩니다.
| 집 주소 설정 모달 | 외출 준비시간 설정 모달 | 달력 선택 모달 |
|------|------| ----- |
| 
|
| 
|
| 다음 postcode 서비스를 통하여 주소 설정 | 외출 준비 시간은 일정의 알림 제공 시간에 반영 | 구글 캘린더에 저장된 캘린더 리스트들 중 메인 화면에 보일 캘린더를 선택 |
## 디렉토리 구조
```
📦src
┣ 📂api
┣ 📂assets
┃ ┣ 📂fonts
┃ ┣ 📂images
┣ 📂components
┃ ┣ 📂getDirections
┃ ┣ 📂modal
┣ 📂hooks
┣ 📂pages
┣ 📂state
┣ 📂style
┣ 📂test
┣ 📂utils
⚒️ index.js
⚒️ tsconfig.json
⚒️ package.json
⚒️ package-lock.json
```