공적 마스크 api를 이용한 주변 마스크 판매 정보 제공 맵
Link: https://www.mask-up.me
마스크 API 제공 중지로 현재 서비스 중지 상태
- Express
- pug Template
- VanilaJS
- Scss
- Kakao Map API
- 기본 셋팅 및 라우트 셋팅 및 기본 UI 틀 작성 ✅
- Kakao Map API 등록 및 연동 ✅
- 마스크 api 연동 및 데이터 활용 표시 작업 ✅
- 녹색(100개 이상) / 노랑색(30 ~ 99개) / 빨강색(2 ~ 29개) / 회색(0 ~ 1개) / 하얀색(판매중지) 표시 ✅
- map overlay 커스터마이징 및 클릭시 정보 표시 ✅
- 현재 요일 표시 ✅
- Toggle버튼 이용 제고 있는 곳만 표시 ✅
- modal활용 공지사항 알림 ✅
- loading 표시 ✅
마스크 재고 현황은 4단계 구간 정보로 제공, 혼돈을 방지하기 위해 단계별 색상은 요청 색상으로 지정
-
100개 이상 : 충분 * 녹색
-
100개 미만(99개~30개) : 보통 * 노랑색
-
30개 미만(29개~2개) : 부족 * 빨강색
-
1개~0개 : 없음 또는 판매전 : * 회색
-
판매 중지: * 하얀색
