🔗 숨코다
BoardBuddy는 보드게임을 좋아하는 사람들이 주변에서 보드게임을 함께할 친구들을 쉽게 모집하고 참여할 수 있도록 돕는 커뮤니티 플랫폼입니다.
 |
 |
|---|---|
| 채유빈 | 마혜준 |
| 이름 | 채유빈 | 마혜준 |
|---|---|---|
| 역할 | 팀장, 프로젝트 PM | 팀원 |
| 기능 |
|
|
- 레포지토리를 클론합니다.
git clone https://github.com/Board-Buddy/front-end.git
cd front-endfront-end디렉토리의 최상위에.env.local파일 생성 후 아래와 같이 작성합니다.
NEXT_PUBLIC_API_MOCKING=enabled
NEXT_PUBLIC_API_SERVER_URL=http://localhost:3000- 터미널에서 아래 명령어를 차례대로 입력합니다.
npm install
npm run dev- 브라우저에서 http://localhost:3000 페이지에 접속합니다.
일반 회원가입, 로그인 기능 제공과 동시에 소셜 로그인 기능을 제공하여 사용자는 별도의 회원가입과 로그인 과정을 거치지 않고도 카카오, 네이버, 구글 계정을 통해 서비스를 이용할 수 있습니다.
react-hook-form과 zod를 이용하여 유효성 검사를 진행하며, 인증된 사용자의 상태는 세션을 통해 유지합니다.
동네를 선택하고, 가까운 동네부터 먼 동네까지 사용자가 원하는 범위(반경)를 선택할 수 있습니다. kakao 지도 API를 사용해 선택한 동네의 범위만큼 반경을 그려 보여줍니다.
사용자는 설정한 동네와 반경을 기반으로 주변 동네의 모집글 리스트를 조회하며, 현재 모집 중인 글로 필터링 하거나 모임 시간이 빠른 글 순으로 정렬할 수 있습니다.
React-Query의 useInfiniteQuery를 이용하여 페이지 하단에 도달할 때마다 API가 호출함으로써 모집글이 끊김 없이 계속 로드되는 무한 스크롤 방식의 사용자 경험을 제공합니다.
모집글을 작성한 유저는 다른 유저들이 모임에 대해 참가 신청을 했을 때, 승인 또는 거절할 수 있습니다.
사용자는 내 동네 기반 새로운 모집글이 작성되었을 때 알림을 받을 수 있습니다.
또한 자신이 작성한 모집글에 새로운 댓글이 달리거나 자신이 작성한 댓글에 대댓글이 달리면 알림을 받으며, 참가 신청과 승인/거절에 대해 알림을 받을 수 있습니다.
EventSource 객체를 통해 서버의 이벤트를 구독 및 수신합니다. react-hot-toast를 사용해 토스트 메시지 형태로 알림을 보여줍니다.
모집글 작성자가 모임 예상 종료시간을 입력하면 그 시간에 맞춰 각 참가자들에게 리뷰 작성 요청 알림이 발송됩니다. 최고예요/좋아요/별로예요/노쇼 리뷰를 보낼 수 있습니다. 각 리뷰는 랭킹 및 버디 지수(보드버디 서비스 내에서의 매너점수)에 반영됩니다.
모임에 참가하는 사용자들이 단체 채팅을 할 수 있도록 작성된 모집글마다 단체 채팅방이 자동으로 생성됩니다. 웹소켓을 활용하여 실시간 단체 채팅이 가능합니다.
Geolocation, Kakao 지도 API를 통해 사용자의 현재 위치에 따라 주변 보드게임 카페를 찾을 수 있습니다. 보드게임 카페의 위치와 정보를 마커를 통해 제공합니다.
매월 1일에 사용자의 월별 서비스 이용 내역, 받은 후기에 따라 TOP3를 선정하며, 프로필에 특별한 뱃지(1~3등)를 함께 표시합니다. 또한 해당하는 월의 뱃지(1~12월)를 얻을 수 있습니다.
