서비스 아키텍쳐
이번 프로젝트를 하면서 처음으로 작성해 본 저희팀의 프로젝트 서비스 아키텍쳐입니다
행정안전부의 착한가격업소 API와 카카오 위치 API를 이용하여 서비스를 제공합니다
next.js를 사용하여 페이지의 초기 로딩 속도를 향상 시키며, 타입스크립트 예측 가능하고 안정적인 코드 작성하고자 했습니다
리덕스 툴킷으로 전역 상태 관리를 하면서, Tanstack React Query로 비동기 관련 로직과 상태를 관리 하였고
사용자 인증과 데이터베이스 등의 서버 기능 제공하는 Firebase를 사용했습니다
반응형 웹 디자인에 유용한 클래스를 제공하는 테일윈드로 스타일링을 했습니다
MVP 기능
- 로그인 / 회원가입
- 일반, 소셜(구글, 카카오)
- 메인 페이지
- 전역 레이아웃 설정
- 유저의 현재 지역 확인 → 맵으로 자세히 보기 → 그 지역의 착한가게를 지도에 마커 → 마커를 클릭 시 상세페이지로
- 지역별 필터 검색 → 착한 가게를 카드 리스트로 정렬 → 리스트 클릭 시 상세페이지로
- 이달의 착한 가게 랭킹 (평가 카테고리별 세 음식점)
- 카테고리별 전국의 모음 - 가격별, 업종별 // 더보기 or 무한스크롤
- 상세 페이지
- 가게의 간략한 정보 및 위치
- 해당 페이지 클립보드
- 정보 수정 요청 기능
- 태그로 남길 수 있는 간편 리뷰
- 로그인 하지 않은 사람은 비활성화
- 커뮤니티 페이지
- 게시글 및 댓글 CRUD
- 이달의 베스트 게시글
- 카테고리별 게시글 모아보기
- 게시글 좋아요, 클립보드 공유
- 마이 페이지
- 내가 남긴 게시글 및 댓글
- 내가 누른 “추천해요”
- 프로필 수정 (닉네임, 사진) 및 탈퇴하기
기술적 의사 결정 & 트러블 슈팅
zustand는 간결하고 직관적 문법을 제공하여 가벼운 라이브러리지만,
불변성 관리 및 비동기 작업을 더 효율적이고 안정적으로 다루기 위해
비교적 익숙한 Toolkit으로 채택
사용자의 편의를 위해 소셜 로그인은 구글, 카카오를 채택
하지만 구글과 달리 카카오는 파이어베이스에 연동하는 것에 어려움을 겪고 있고
next-auth 라이브러리를 활용하여 구현 중
puppeteer를 활용해야 하는 카카오맵의 리뷰 사진과,
cherrio로 크롤링이 가능한 행정안전부의 착한가격업소 사이트 중
배포 시 문제가 없을 가능성이 높은 cherrio로 결정함에 따라
착한가격업소 사진 크롤링으로 정함
추후 개발 및 기술적인 도전 계획
next-auth 라이브러리를 이용하여 카카오 소셜 로그인을 최종 프로젝트까지 구현
사이트 특성 상 모바일 환경으로 접속할 이용자들이 많을 것으로 예상되어
pc, 모바일 웹 모두 대응할 수 있도록 반응형 웹 디자인을 구현
사용자들에게 더욱 자세한 정보 전달을 위해
행정안전부의 착한가격업소 이미지를 크롤링 하여 업소 상세 페이지에 추가할 예정
