서울특별시 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 모듈화를 통해 API 코드 재사용성을 높이며 개발 진행

• 서울산책에서 사용할 rest API인 GET/POST/PUT/DELETE에 대한 인스턴스를 생성했습니다.
• custom hook API 폴더에 사용할 API를 정리하여 필요한 곳에 불러와 효율적으로 사용했습니다.
• 헤더값 여부에 따라 찜 관련 기능 사용 여부가 나뉩니다.

✔️ 서울산책 자체 회원가입/로그인 기능 구현

✔️ 카카오, 네이버 소셜로그인 기능 구현

✔️ tanstack query v5 useInfiniteQuery를 활용하여 무한스크롤 구현

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

[무한스크롤 구현 과정]

1. 첫 페이지는 1로 고정, 총 아이템 개수를 이용해 올림한 총 페이지수를 구합니다.
2. 현재 페이지가 총 페이지 수보다 작다면 +1, 아니라면 undefined로 호출 X
3. UI에 관찰객체를 등록하여 tanstack query의 hasNextPage와 fetchNextPage 메소드를 활용하여 페이지가 남았다면, 해당 객체 인식 시 다음 page API를 호출하며, 최종페이지라면 해당 객체가 보이지 않도록 설정했습니다.

✔️ 지도 관련 기능