모각고
사이드 프로젝트 | 24년 2월 - 24년 3월 | 3분 읽기
- Next.js
- Typescript
- tailwind
-
지도(메인) 페이지 구현
- 여러 오픈 지도 svg 컴포넌트를 찾아보았으나 서비스에 맞도록 지역을 제어하기에는 적합하지 않아 지도 svg 컴포넌트를 직접 구현했습니다. (관련 PR 링크)
- svg를 구성하는 각 지역 태그들을 클릭했을 때, 클릭 이벤트에 위치 정보가 나오지 않아
getBoundingClientRect메서드를 사용하여 뷰포트를 기준으로 요소의 상대적인 위치를 구하여 유저 인터렉션에 따른 애니메이션을 구현했습니다. - 유저의 위치를 전역 상태로 관리하기 위해 위치를 저장하는 setter 함수에 Geolocation API를 이용하여 위치 수집하는 훅을 만들어 유저의 위치를 전역에 저장할 수 있도록 구현했습니다. (관련 PR 링크)
- 지역별 프로젝트 밀도 순위 조회, 카드 조회 & 페이지네이션, 프로필 카드 찜하기를 구현했습니다. (각 기능별 PR 링크를 첨부했습니다.)
-
게이미피케이션 컨셉을 살리기 위한 shadcn/ui 라이브러리의 컴포넌트를 커스텀 작업
-
sonner 토스트 컴포넌트는 외부 라이브러리에 디자인 템플릿이 저장되어 있기 때문에 다른 내장된 shadcn 컴포넌트처럼 스타일만 바꾸는 것이 불가능했습니다. 따라서 커스텀 컴포넌트를 새로 만들어 sonner 토스트를 호출해 커스텀 컴포넌트를 항상 넣어줘야 하는 번거로움이 있었습니다.
커스텀 후에도 팀원들에게 평소 sonner 토스트 컴포넌트를 쓸 때와 동일한 경험을 주기 위해 커스텀 유틸을 추가로 만들었습니다. (관련 PR 링크)
-
-
PR을 최대한 자세하게 올리려고 노력하며 문서화 능력과 쉽게 풀어쓸 수 있는 능력을 향상했습니다. (관련 PR 링크)
-
팀원들의 작업을 팔로업하기 위해 코드 리뷰에 많은 시간을 할애하려고 노력했고, 저를 제외한 팀원들이 올린 140개의 PR 중 93개의 코드 리뷰를 담당했습니다. 이를 통해 코드 이해 능력이 향상되었습니다.