주요 기능 소개
✔️ 자체 회원가입
이메일 인증 완료 -> 닉네임 및 비밀번호 입력 -> 회원가입 완료 -> 유저 정보 수집(선택)
Funnel 패턴을 이용해 사용자가 각 단계를 한 눈에 들어오게 보고 집중적으로 수행할 수 있도록 구현했습니다.
- 가짜 계정을 방지하고 비밀번호 찾기시 유저 본인의 이메일이 필수이므로 회원가입시 SMTP을 사용하여 이메일 인증을 합니다.
- 각 단계 검증을 통과해야 버튼이 활성화되고 오류 메세지를 표시해줍니다.
- 회원가입 완료시 바로 로그인이 됩니다.
- 농구앱 서비스 이용시 중요한 포지션, 실력 정보를 회원가입시 빠르게 수집하기 위한 페이지입니다.
- Kakao, Naver, Google 3개의 소셜 로그인이 가능합니다.
- 소셜 로그인시 '/social-login'으로 리다이렉트 해주고 이 페이지에서 token 발급 요청을 보내 accessToken과 refreshToken을 발급받습니다.
- 유저가 첫 소셜 로그인시 백엔드에서 DB를 조회해 해당 유저가 가입했는지 판별하고 '/social-login?loginSuccess=true&firstLoginCheck=true' params을 넘겨주면 프론트단에서 회원가입으로 판별해 '/user-info' 정보 수집 페이지로 라우팅합니다. 첫 로그인이 아니라면 메인 페이지로 라우팅합니다.
- 이메일, 비밀번호를 통해 로그인이 가능합니다.
- 비밀번호 찾기는 가입된 이메일로 재설정된 비밀번호를 보내 해당 비밀번호로 로그인이 가능합니다. 이후 마이페이지 비밀번호 변경에서 추가로 수정 가능합니다.
- JWT 토큰 방식으로 보안을 위해 accessToken은 메모리에 저장하고, refreshToken은 HTTP Only secure Cookie에 저장합니다.
- accessToken은 1시간, refreshToken은 7일의 유효 시간입니다.
- 로그인 유지를 위해 새로고침시나 401 에러를 받았을 때 토큰 재발급 요청을 보내 로그인을 유지합니다.
- 로그인 여부(true or false)를 localStorage에 저장해 로그인이 필요한 서비스에 로그인하지 않고 접근할 시 로그인 페이지로 라우팅하거나 알림 모달을 띄웁니다.
- 마이페이지 프로필에서 내 프로필을 보고 바로 수정 가능합니다. (프로필 사진, 닉네임, 자기소개, 포지션/실력 정보 수정 가능)
- 사진 데이터 전송을 위해 formData를 사용했습니다.
- 활동 내역: 출석하기, 활동 내역 바탕으로 유저마다 level을 부여하는 방식으로 게이미피케이션(Gamification) 요소를 도입해 유저 참여율을 높이고자 했습니다.
- 다른 페이지에서 유저 아바타 클릭시 이메일 정보를 제외한 상대방 프로필이 표시됩니다. 어느 페이지에서든 확인 가능하게 모달로 구현했습니다.
- 다른 사용자에게 1:1 채팅 걸기가 가능합니다.
- 화면 모드 설정: 다크/라이트 화면 테마 설정이 가능합니다. 다크/라이트 테마 정보를 localStorage에 저장해 같은 브라우저로 재접속시 설정한 화면 테마로 접속됩니다.
- 문의: 카카오 채널 문의하기로 이어집니다.
- 설정에서 '로그아웃, 비밀번호 변경, 탈퇴하기'가 가능합니다.
-
헤더와 푸터
헤더에는 제품 로고와 간략한 유저 정보를 표시했습니다. 로고 클릭 시 홈 화면으로, 유저 프로필 클릭시 마이페이지로 이동합니다.
-
임박한 매칭 표시
만약 성사된 매칭(상대팀 찾기/메이트 찾기)이 있으면, 성사된 매칭 중 가장 날짜가 임박한 매칭을 최상단에 알려 줍니다.
-
농구장 찾기 기능 홍보
유저들이 가장 쉽게 이용할 수 있고, 가장 많이 이용할 것으로 기대되는 농구장 지도 페이지를 홍보하는 필드입니다.
-
매칭(상대팀 찾기/메이트 찾기) 최신글 표시
매칭 최신 모집글 3개씩 표시해줍니다.
📌 농구장 지도
- 커스텀 오버레이를 이용해 농구공을 이용한 custom marker와 농구장명이 표시됩니다.
- 처음 지도 접속시 빠른 데이터 표시를 위해 모든 농구장에 대한 간단 정보(위치 정보, 농구장명)만 불러와 마커를 표시해주고, 농구장 마커 클릭시 해당 농구장 id로 농구장 상세 정보 보기 api 요청을 보내 상세 정보를 표시합니다.
- 농구장 마커를 클릭시 해당 농구장의 자세한 농구장 특화 정보가 표시됩니다. (사진, 개방 시간, 코트 종류, 코트 사이즈, 골대 수, 야간 조명, 주차 가능 여부, 편의시설 등)
- 길찾기를 누르면 카카오맵으로 연결되며 해당 농구장으로 도착이 설정되어 바로 길찾기가 가능합니다.
- 공유하기를 누르면 해당 농구장 정보를 공유할 수 있는 url이 복사됩니다.
- 시설 채팅 버튼을 누르면 해당 농구장 시설 채팅에 입장합니다.
- 지도 접속시 현재 유저 위치 정보가 있다면 그 위치로 처음 위치를 설정합니다. 유저가 위치 정보 수집을 거부하면 서울로 기본 설정됩니다.
- location Icon을 클릭하면 유저의 현재 위치로 이동합니다.
- Geolocation API을 이용해 유저 위치 정보를 수집합니다. 유저 위치 정보(위도, 경도)를 가져오는 함수와 위도, 경도로 주소를 가져오는 함수를 유틸 함수로 분리했습니다.
- 검색을 하면 현재 DB에 있는 농구장 정보 안에서 먼저 검색을 하고 검색 결과가 있다면 그 검색 결과 위치로 이동합니다. DB 안에 없는 정보를 검색한다면 kakao maps api를 이용해 검색하고 그 결과에 따라 이동합니다.
- 마우스, 모바일(터치)를 통해 지도 이동이 가능하고, 마우스 Wheel Event, +/- Control로 확대, 축소가 가능합니다.
- 지도 축소로 너무 많은 농구장 마커가 보이면 일정 map level(8)에서 마커 클러스트를 적용합니다.
- 지도에 표시되지 않는 농구장을 유저가 직접 제보할 수 있는 기능입니다.
- 제보하기 버튼을 누르면 지도 클릭시 마커 생성 이벤트가 발생하고 해당 마커를 클릭하면 위도, 경도, 주소 정보가 자동으로 채워져 해당 위치에 제보가 가능합니다.
- 제보시 주소, 농구장명만 필수값이고 나머지 정보들은 자유롭게 채울 수 있습니다.
- 해당 데이터에 맞는 Input, Radio, Select, Textarea 요소들을 이용해 제보 컴포넌트를 구성하였고, react-hook-form을 이용해 유효성 검사 진행, 에러 메세지 표시를 합니다.
✏️ react-hook-form 사용 이유
- 많은 useState를 사용하는 것보다 간단하게 코드 표현 가능
- 실시간 유효성 검사 및 동기화 가능
- 리렌더링 최소화
- 농구장 제보 컴포넌트, 프로필 수정에서는 필수값이 많지 않아 인풋 전체가 danger color로 표시되는 Next UI 에러 메세지보다 react-hook-form 에러 메세지를 이용해 표시했습니다.
(에러 메세지는 항상 고정된 div 높이 안에 표시해 에러 메세지 존재 여부에 따라 UI가 변동되지 않도록 고정했습니다.)
- 제보 완료 후 해당 위치에 제보 검토 중인 마커가 표시되고 클릭시 자신이 제보한 정보를 확인할 수 있습니다.
- 관리자 검토 후 해당 농구장이 수락된다면 해당 유저는 30점의 점수를 받고, 제보 검토 중 마커는 실제 농구장 마커로 표시됩니다.
default.mp4
-
상대팀 찾기 새 모집글 작성
제목, 팀명, 장소, 날짜와 시간, 규모, 원하는 실력대를 필수 입력 필드로 하고, 필드 값을 넣어 '모집 완료' 버튼을 누르면 새 모집글이 생성됩니다.
주소 선택시 카카오 지도 API를 활용하여 검색한 곳 또는 마우스 클릭으로 표시한 지점에 마커를 찍어주고, 확인 버튼을 눌렀을 때 해당 마커가 있는 곳의 주소가 주소 입력필드로 넘어가게 됩니다.
default.mp4
-
상대팀 찾기 모집글 지원하기
유저가 해당 모집글의 작성자와 다른 사람일 경우 모집글 상세페이지 하단에 '지원하기' 버튼이 표시되고, 팀명과 실력 필드 값을 넣어 '지원하기' 버튼을 누르면 해당 모집글의 지원자로 등록됩니다.
본인이 지원한 리스트는 '취소' 버튼을 통해 취소할 수 있습니다.
default.mp4
-
상대팀 찾기 모집글 지원자 수락 및 모집완료
유저가 해당 모집글의 작성자와 동일한 경우 모집글 상세페이지 하단에는 '모집 완료' 버튼과 '수정' 버튼이 표시되고, 대기중인 지원자 리스트에는 '수락'과 '거절' 버튼이 표시됩니다.
'수락' 버튼을 눌러 지원자의 신청을 수락할 수 있고, '모집 완료' 버튼을 통해 모집중인 글을 마감할 수 있습니다.
'모집 완료' 버튼을 누르면 해당 모집글은 모집 완료 상태로 변경되고, ACCEPTED된 지원자와 팀채팅(MM)이 생성됩니다.
default.mp4
-
메이트 찾기 새 모집글 작성
제목, 장소, 날짜와 시간, 포지션 별 인원 수, 원하는 실력대를 필수 입력 필드로 하고, 필드 값을 넣어 '모집 완료' 버튼을 누르면 새 모집글이 생성됩니다.
포지션 별 인원 수의 경우 각각의 모집 인원을 다 더한 값이 0인 경우에 예외처리를 해주어서 어떤 포지션이든 1명 이상 모집해야 글을 작성할 수 있도록 했습니다.
주소 선택시 카카오 지도 API를 활용하여 검색한 곳 또는 마우스 클릭으로 표시한 지점에 마커를 찍어주고, 확인 버튼을 눌렀을 때 해당 마커가 있는 곳의 주소가 주소 입력필드로 넘어가게 됩니다.
default.mp4
-
메이트 찾기 모집글 지원하기
유저가 해당 모집글의 작성자와 다른 사람일 경우 모집글 상세페이지 하단에 '지원하기' 버튼이 표시되고, 포지션과 실력 필드 값을 넣어 '지원하기' 버튼을 누르면 해당 모집글의 지원자로 등록됩니다.
본인이 지원한 리스트는 '취소' 버튼을 통해 취소할 수 있습니다.
default.mp4
-
메이트 찾기 모집글 지원자 수락 및 모집완료
유저가 해당 모집글의 작성자와 동일한 경우 모집글 상세페이지 하단에는 '모집 완료' 버튼과 '수정' 버튼이 표시되고, 대기중인 지원자 리스트에는 '수락'과 '거절' 버튼이 표시됩니다.
'수락' 버튼을 눌러 지원자의 신청을 수락할 수 있고, '모집 완료' 버튼을 통해 모집중인 글을 마감할 수 있습니다.
'모집 완료' 버튼을 누르면 해당 모집글은 모집 완료 상태로 변경되고, ACCEPTED된 지원자들과 메이트 채팅(TM)이 생성됩니다.
인증된 유저만 글 작성 댓글 작성이 가능합니다.(비회원은 게시글 열람만 가능)
커뮤니티는 자유/질문/중고거래/대관양도 4개의 주제로 분류하고, 전체 내용을 분류없이 확인할 수 있습니다.
현재 보이는 게시글 목록에서 검색하여 원하는 제목을 가진 글을 찾을 수 있습니다.
인증된 유저 끼리 실시간으로 채팅을 이용할 수 있습니다.
채팅방 타입은 1:1 채팅방 / 농구장 채팅방 / 같이하기 채팅방 / 팀 매칭 채팅방 이렇게 4가지 종류가 있으며,
각 타입에 따라 채팅방 이름이 결정됩니다.
채팅방 첫 입장시 입장안내 메시지,퇴장시에는 퇴장안내 메시지를 채팅방에 보여줍니다.
유저가 좌측 상단에있는 나가기 버튼을 누르면 다른 페이지로 이동을 합니다.(완전한 퇴장 x)
→ 유저가 채팅방에서 마지막으로 본 메시지를 기록하고, 재입장시에는 그 이후의 메시지만 보여줍니다.
또한 채팅방에서 과거 메세지를 조회하고 싶다면 more 버튼을 눌러서 과거 메세지 내역을 조회할 수 있습니다.
- stompJs를 사용한 이유: 백엔드 파트에서 소켓 통신을 위해 spring-stomp 통신 환경을 구축하였기 때문에, 그에 호환등의 문제나 동일한 프로토콜을 가져 소통이 원활하고, 기존의 커뮤니티 형성이 잘되어 참고 자료가 많은 점을 장점으로 판단하여 stompJs를 사용하였습니다.
