-
여행 경로에 따른 날씨 추적 웹사이트
- 여행 목적지의 날씨는 바로 확인할 수 있지만, 가는 경로의 날씨는 일일이 확인하기 어렵다.
- 경로 중간의 날씨를 하나하나 확인하기 번거롭다.
- 목적지의 날씨가 맑더라도 가는 도중에 갑자기 비가 오는 등 예상치 못한 상황이 있을 수 있다.
⇒ 여행 경로에 따른 날씨를 알려주는 서비스를 통해, 중간 경유지들의 날씨를 시간대별로 알려주고 날씨 상황에 맞게 준비물이나 대책을 알려주는 서비스 구현하기로 결정
| 역할 | 이름 | 담당 내용 |
|---|---|---|
| Front-End | 안지유 | 전체 프론트엔드 구조 설계, UI 구현, 지도·날씨 API 연동 |
| Back-End | 윤채원 | 서버 구축, 외부 API 데이터 가공 및 프론트엔드 제공 |
- 프론트엔드: TypeScript
- 백엔드: JavaScript
- 프론트엔드: React
- 백엔드: Express
- 카카오맵 라이브러리 & API: 지도 구현 및 장소 검색, 경로 표시
- 기상청 초단기예보 API: 기온, 하늘상태, 강수량 등 날씨 정보 제공
- 에어코리아 대기오염 정보 API: 통합대기 환경지수 정보 제공
- Vercel: 웹 서비스 배포
- 한국도로공사 API: 휴게소 위치 정보 제공 (가공 후 프론트엔드에게 전달)
- Koyeb: 서버 배포
- 출발지, 도착지를 검색하여 설정할 수 있다.
- 키워드 입력 후 돋보기 아이콘을 클릭하거나 엔터키로 검색
- 모바일 버전에서는 돋보기 아이콘 없이 엔터키로만 검색 가능
- 로그인 없이 사용할 수 있으며, 브라우저에 검색 기록을 저장하여 이전 검색 키워드를 통해 손쉽게 재검색할 수 있다.
- 출발지와 도착지를 모두 설정하면 자동으로 지도 페이지로 이동한다.
- 기본 화면 구성:
- 좌측: 도착지명과 도착지의 날씨 정보 (현재 기온, 강수량, 하늘상태(아이콘), 대기질 등급)
- 우측: 지도 (출발지, 도착지, 경유지(1/3, 2/3 지점 인근의 휴게소 정보) 및 경로 표시
- 모바일: 위쪽에 날씨 정보, 아래쪽에 지도
- 날씨와 경로 정보를 불러오는 동안에는
Loading…메세지가 표시된다. - 헤더 우측 홈 버튼을 클릭하여 메인페이지로 이동할 수 있다.
- 지도 위의 장소 라벨 클릭시, 해당 장소의 장소명과 날씨 정보가 업데이트된다.
- 출발지와 도착지의 장소명 및 라벨에는 각각
(출발지)와(도착지)가 추가로 표시된다. - 장소명이 너무 긴 경우, 말줄임표(…) 처리된다.
- 날씨 정보 아래 버튼 중 우측 버튼(달력) 클릭시 뜨는 모달창이 열리며, 해당 장소의 시간별 날씨 정보를 확인할 수 있다.
- 모달 닫기: X 버튼 클릭 또는 모달 바깥 화면 클릭
- 시간별로 하늘상태(아이콘)와 기온 정보를 확인할 수 있다.
- 낮, 밤 아이콘 상이(해, 달)
- 좌측 버튼(Tips) 클릭 시 날씨 조건에 따라 적합한 준비물과 대책을 제안받는다.
- 조건: 우천예보, 기온(Hot/Cold), 대기질 상태
- 추천 아이템: 우산, 썬크림, 목도리/장갑, 핫팩, 마스크
- 제안 내용은 5시간 이내의 시간별 날씨 정보를 기반으로 제공 받는다.
- 준비물이 필요 없는 경우,
‘여행가기 좋은 날씨네요! 즐거운 여행이 되시길 바랄게요!’라는 기본 문구를 표시한다.