번개 지향 볼링 모집 커뮤니티 "번개볼링"의 프론트엔드 레포지토리입니다.
카카오 테크 캠퍼스 1기 부산대 3조 프로젝트입니다.
Frontend
Backend
기존의 볼링 관련 서비스에서는 볼링 한판을 치기 위해서 동호회, 소모임에 가입을 해야하는 번거로운 과정이 필요합니다. 소모임, 밴드 앱 또한 일회성의 가벼운 만남이 아닌 주기적으로 참여를 할 회원을 모집하고 있습니다.
번개 볼링은 기존의 소모임, 스포츠 모임 서비스와 다른 번개모임, 빠른 매칭을 목표로 하고 있습니다.
- “빠른 페이지 렌더링”과 “검색 엔진 최적화”를 위해 SSR(서버 사이드 렌더링)을 지원하도록 구현했습니다.
- 서버에서 가져온 HTML파일에서 SSR이 된것을 볼 수 있습니다.
- Lighthouse로 성능 분석을 실시한 결과, 성능 점수는 98점으로 높은 점수를 획득할 수 있었습니다.
- 또한, Next js에서 지원하는 Link 태그를 통한 페이지의 prefetch를 이용하여 다른 페이지 이동 시 빠른 화면 전환 효과를 얻을 수 있었습니다.
- Next.js 13 App router는 loading.tsx, error.tsx를 이용한 선언적 로딩, 에러 처리를 지원합니다.
- 이를 이용하여 코드의 가독성 및 유지보수성을 향상시킬 수 있었습니다.
- 추가적으로 컴포넌트 단위에서의 로딩, 에러 처리는 suspense와 react-error-boundary를 이용하여 처리했습니다.
ERD(ER - Diagram) - ERD 협업 링크
ERD(ER - Diagram) - ERD 협업 링크
-
참여신청 테이블(applicant_tb)
승인 상태가 false 인 경우 프론트에서 수락 / 거절 처리합니다. 거절 시 참여 신청 테이블에서 delete 됩니다. 수락 시 status가 true가 되면서 수락 / 거절 처리됩니다. 게시글이 모집완료되면 평가하기 활성화됨 status가 True인 사람들은 게시글에 달려있는 status True인 사람들을 서로 평가할 수 있습니다. -
모집글 테이블(comment_tb)
마감 계산은 아래와 같습니다. 마감 = is_close || (now due_time) -
댓글 테이블(comment_tb)
일반 댓글의 경우 부모 댓글id가 NULL입니다. 대댓글 일 시 부모 댓글id가 존재합니다. 게시글에 달린 댓글을 전체 조회해서 부모 id에 맞게 조합하여 계층형으로 전달 가능합니다. 댓글 데이터 삭제 시, delete하지 않고 작성자 id와 내용만 null 처리합니다. (부모id를 참조해야하므로 row를 삭제해서는 안됩니다.)
- Node.js 16.14.0 이상
-
프로젝트 클론
$ git clone https://github.com/Step3-kakao-tech-campus/Team3_FE.git
-
프로젝트 의존성 설치
$ npm install # 또는 $ npm i
-
환경변수 파일(.env)을 생성한 후 API URL을 설정
// 백엔드 레포지토리로 가서 설정 후 적용 NEXT_PUBLIC_API_URL= ~~~ -
개발 서버 실행
$ npm run dev
- 사용 가능한 스크립트
$ npm run dev : 개발 서버 실행 $ npm run build : 프로젝트 빌드 $ npm run start : 프로덕션 서버 실행
- 웹페이지에 회원가입이 가능합니다.
- 이메일과 닉네임, 비밀번호를 입력하고 지역을 선택한 후 회원가입을 진행합니다.
- 회원가입을 완료한 후 이메일 인증을 합니다.
- 이메일 인증을 하지 않으면 여러가지 기능을 이용하지 못합니다.
- 회원가입을한 메일로 로그인이 가능합니다.
- 모임을 희망하는 지역과 모집 여부를 선택하여 검색이 가능합니다.
- 게시글 카드를 클릭하여 모집글 상세 페이지로 이동할 수 있습니다.
- Infinity scroll을 적용하여 끊임 없이 새로운 게시글을 확인할 수 있습니다.
- 글쓰기 버튼을 클릭하여 글쓰기 페이지로 이동할 수 있습니다.
- 모집 상세 내용을 조회할 수 있습니다.
- 모임에 대한 신청 및 취소가 가능합니다.
- 모집자는 신청자 확인 및 수락, 거절이 가능합니다.
- 댓글을 확인 및 작성할 수 있습니다.
- 제목, 모집 지역, 모임 일시, 마감 일시, 내용을 입력하여 모집글 작성 및 수정이 가능합니다.
- 유저 검색 모달을 통해 닉네임으로 대화를 원하는 유저를 검색할 수 있습니다.
- 대화방을 더블 클릭하여 개별 쪽지 페이지로 이동 가능합니다.
- 생성된 대화방을 선택하여 삭제할 수 있습니다.
- 상대에게 쪽지를 전송할 수 있습니다.
- 보낸 쪽지를 선택하여 삭제할 수 있습니다.
- Infinity scroll을 적용하여 끊임 없이 지난 대화를 확인할 수 있습니다.
- 유저의 상세 기록을 확인할 수 있습니다.
- 모집 지역, 기간, 글의 상태에 따른 기록을 조회할 수 있습니다.
- 참여한 기록에 대한 점수, 이미지를 등록 및 수정할 수 있습니다.
- 유저가 등록한 점수와 이미지를 확인할 수 있습니다.
- 함께 참여한 유저에 대한 별점 등록이 가능합니다.
- Infinity scroll을 적용하여 끊임 없이 기록을 확인할 수 있습니다.
- 검색어를 통해 볼링장을 검색할 수 있습니다.
- 검색 결과를 클릭하여 볼링장 정보 페이지로 이동할 수 있습니다.
- 자신의 닉네임, 지역, 프로필 이미지를 변경할 수 있습니다.
- 자신의 매너점수와 average를 확인할 수 있습니다.