✈️ Travel Guard

TravelGuard 는 전 세계 여행객들의 안전 여행을 위해 국가별 여행 경보 단계, 대사관 연락처, 여권 정보 등을 활용하여, 여행 시 필요한 정보를 쉽게 확인하고 안전한 여행을 돕기 위한 서비스입니다.

🌐 배포 링크

Travel Guard 배포 링크

#️⃣ 목차

• 주요 기능
• 기술 스택
• 구성 요소
• API

🔍 주요 기능

🌏 국가별 여행 경보 레벨 표시

react-globe.gl을 사용하여 3D 지구본을 구현하고, 국가별로 5단계의 색상으로 위험 경보 레벨을 시각화하여 한눈에 위험 단계를 확인할 수 있습니다.

☎️ 국가별 대사관 정보 조회

선택한 국가의 대사관 정보를 조회할 수 있습니다.	대사관의 주소, 전화번호, 긴급 연락처 등의 정보를 제공합니다.

🛂 입국 허가 요건 조회

국가별로 여권 관련 정보를 제공하여, 국가별 입국 가능 기간, 입국 가능 여부, 입국 시 소지 여부 등 필요한 정보를 쉽게 확인할 수 있습니다.

📰 여행 안전 뉴스 제공

선택한 국가와 관련된 최신 여행 안전 뉴스를 제공하여, 관련 뉴스 정보를 빠르게 확인할 수 있습니다.

🛠️ 기술 스택

API:

• 외교부_국가·지역별 재외공관 정보
• 외교부_국가∙지역별 안전공지
• 외교부_국가·지역별 여행경보 목록 조회(0404 대륙정보)

☑️ 진행상황

• API 데이터 SET & 공통 Component 생성

---

• [Main] globe.gl 연동 & 대륙 입히기
• [Main] 배경 Color + 별 추가
• [Main] 위험 경보 API - 3D 지구본 연동
• [Main] Mobile & Web UI 최적화

---

• [국가별 정보] API 연동
• [국가별 정보] 국가 별 정보 (전체 / 디테일)페이지 제작
• [국가별 정보] 검색 및 단계 별 정렬 구현
• [국가별 정보] Mobile & Web UI 최적화

---

• [국가별 대사관 정보] API 연동
• [국가별 대사관 정보] 국가 별 정보 (전체 / 디테일)페이지 제작
• [국가별 대사관 정보] 검색 및 단계 별 정렬 구현
• [국가별 대사관 정보] Mobile & Web UI 최적화
• Encountered two children with the same key ``에러 해결 . . .

---

⚠️ ERROR / 최적화

• [입국 허가요건 & 국가별 대사관 정보] 모바일 표 사이즈 최적화
• [전체] 기존 화면 비율 (75% 기준) -> 현재 화면 비율 (100% 기준) 최적화
• API 데이터 fetch 성능 높이기 (router 분리 / lazy load)