서울특별시 2030 세대들이 건강한 라이프스타일을 만들어 나갈 수 있도록 장려하는 서비스

Github

기간

인원

사용기술

https://github.com/JJongsKim/Seoul-Walk

2023.09 - 2023.12 (3개월)

FE 1명, BE/ML 1명, ML 1명

Typescript React styled-components

Redux-toolkit React-Query

Github actions AWS S3/EC2/Code Deploy

역할

피그마 기반 UXUI 설계 및 퍼블리싱

클라이언트 아키텍처 설계 및 개발

• 재사용 가능한 공통 컴포넌트, Custom Hook, HOC 구현
• Axios Instance를 통한 API 통신 계층 추상화
  • 서울산책에서 사용할 rest API인 GET•POST•PUT•DELETE에 대한 인스턴스를 생성했습니다.
  • custom hook API 폴더에 사용할 API를 정리하여 필요한 곳에 불러와 효율적으로 사용했습니다.
  • 헤더값 여부에 따라 찜 관련 기능 사용 여부가 나뉩니다.

인증/인가 시스템

카카오, 네이버 소셜 로그인 구현

Tanstack Query v5 useInfiniteQuery를 활용한 무한스크롤 구현

대량의 데이터를 감당하기 위해 콘텐츠 목록 조회 시 페이지네이션 혹은 무한스크롤이 필요하다고 느꼈으며, 모바일을 주로 사용하는 현대인들에게 무한스크롤이 적합하다고 판단했습니다.

지도 관련 기능

• 현 위치 파악 기능 구현

  navigator의 geolocation 객체가 가지고 있는 getCurrentPosition 메소드를 사용하여 현 디바이스의 위도, 경도를 파악 후 마커로 표시합니다.

• 거리별 추천 페이지 마커와 커스텀 오버레이 기능 구현

  KAKAO map API를 활용하여 거리별 추천 API로 넘겨주는 응답 리스트를 배열에 담아 관리하며 마커로 표시합니다.

  마커 클릭 시 보이는 커스텀 오버레이는 하나의 객체 값에 담아 관리하기 때문에, 클릭 시 이미 보이는 커스텀 오버레이가 있다면 닫히고, 새로 누른 값으로 업데이트됩니다.

• 미래유산코스 페이지 코스 표시 기능 구현

  코스를 나타내는 직선은 KAKAO map polyline 메소드를 활용하여 구현했습니다.

성장 경험