TRipTo

2024.12

UI/UX 및 반응형 디자인, Next.JS의 API Routes를 공부하는 목적으로 진행하였습니다.

사용자의 GPS 정보를 받아와 Naver 지도 API의 Reverse Geocoding 모듈을 이용해 사용자가 위치한 곳의 정보를 취득해 해당 지역의 관광지를 소개합니다.

관광지를 총 10개의 태그로 분류하였으며 페이지에 접속할 때마다 랜덤으로 10개의 태그 중 1개를 선택해 해당 태그에 해당하는 관광지를 소개하며, 사용자는 검색을 통해 관광지 정보를 얻을 수 있습니다.

MySQL을 이용해 DB를 구축하였으며 현재 등록되어 있는 관광지 정보는 더미 데이터로 구성하였습니다.

주요 기능

  • API Routes를 활용해 별도의 웹 서버 없이 DB와 통신
  • React-Query를 활용해 무한 스크롤 구현
  • PC와 모바일 모두 호환되는 반응형 디자인

사용 기술

  • Next.JS , TypeScript
  • Zustand , React-Query
  • Tailwind , Shadcn-UI
  • MySQL

상세 이미지

이미지를 클릭하시면 자세히 확인하실 수 있습니다.

project_image
project_image
project_image
project_image