Team3_FE

번개 지향 볼링 모집 커뮤니티 "번개볼링"의 프론트엔드 레포지토리입니다.

카카오 테크 캠퍼스 1기 부산대 3조 프로젝트입니다.

Collaborators

Frontend

리마인더	타임 키퍼
강주호	허동혁

Backend

조장	테크 리더	기획 리더	리액셔너
박소현	안혜준	김기해	김윤재

Introduction

기존의 볼링 관련 서비스에서는 볼링 한판을 치기 위해서 동호회, 소모임에 가입을 해야하는 번거로운 과정이 필요합니다. 소모임, 밴드 앱 또한 일회성의 가벼운 만남이 아닌 주기적으로 참여를 할 회원을 모집하고 있습니다.

번개 볼링은 기존의 소모임, 스포츠 모임 서비스와 다른 번개모임, 빠른 매칭을 목표로 하고 있습니다.

---

Focus

Next.js13, SSR,SEO

• “빠른 페이지 렌더링”과 “검색 엔진 최적화”를 위해 SSR(서버 사이드 렌더링)을 지원하도록 구현했습니다.

• 서버에서 가져온 HTML파일에서 SSR이 된것을 볼 수 있습니다.

• Lighthouse로 성능 분석을 실시한 결과, 성능 점수는 98점으로 높은 점수를 획득할 수 있었습니다.
• 또한, Next js에서 지원하는 Link 태그를 통한 페이지의 prefetch를 이용하여 다른 페이지 이동 시 빠른 화면 전환 효과를 얻을 수 있었습니다.

Suspense와 EerrorBoundary를 이용한 선언적 로딩, 에러 처리

• Next.js 13 App router는 loading.tsx, error.tsx를 이용한 선언적 로딩, 에러 처리를 지원합니다.
• 이를 이용하여 코드의 가독성 및 유지보수성을 향상시킬 수 있었습니다.
• 추가적으로 컴포넌트 단위에서의 로딩, 에러 처리는 suspense와 react-error-boundary를 이용하여 처리했습니다.

---

기획

5Whys

1Pager 기획

Figma

• FigJam 기획
• Figma Wireframe 서비스 디자인

둘러보기

• 실제 배포 링크 - 카테캠 수료로 인한 크램폴린 배포 중단
• api문서

깃헙 레포지토리

• FrontEnd Repository
• BackEnd Repository

System Structure

전체 구성도

FrontEnd 구성도

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를 삭제해서는 안됩니다.)
  

Tech Stack

How to Start

Requirement

• Node.js 16.14.0 이상

시작하기

1. 프로젝트 클론

   $ git clone https://github.com/Step3-kakao-tech-campus/Team3_FE.git

2. 프로젝트 의존성 설치

   $ npm install
   # 또는
   $ npm i

3. 환경변수 파일(.env)을 생성한 후 API URL을 설정

   // 백엔드 레포지토리로 가서 설정 후 적용
   NEXT_PUBLIC_API_URL= ~~~
   

4. 개발 서버 실행

   $ npm run dev

• 사용 가능한 스크립트

  $ npm run dev : 개발 서버 실행
  $ npm run build : 프로젝트 빌드
  $ npm run start : 프로덕션 서버 실행

FEATURES

회원가입 / 로그인 플로우

• 웹페이지에 회원가입이 가능합니다.
• 이메일과 닉네임, 비밀번호를 입력하고 지역을 선택한 후 회원가입을 진행합니다.

• 회원가입을 완료한 후 이메일 인증을 합니다.
• 이메일 인증을 하지 않으면 여러가지 기능을 이용하지 못합니다.

• 회원가입을한 메일로 로그인이 가능합니다.

---

메인 페이지

• 모임을 희망하는 지역과 모집 여부를 선택하여 검색이 가능합니다.
• 게시글 카드를 클릭하여 모집글 상세 페이지로 이동할 수 있습니다.
• Infinity scroll을 적용하여 끊임 없이 새로운 게시글을 확인할 수 있습니다.
• 글쓰기 버튼을 클릭하여 글쓰기 페이지로 이동할 수 있습니다.

---

게시글 상세 페이지

• 모집 상세 내용을 조회할 수 있습니다.
• 모임에 대한 신청 및 취소가 가능합니다.
• 모집자는 신청자 확인 및 수락, 거절이 가능합니다.
• 댓글을 확인 및 작성할 수 있습니다.

---

게시글 작성, 수정 페이지

• 제목, 모집 지역, 모임 일시, 마감 일시, 내용을 입력하여 모집글 작성 및 수정이 가능합니다.

---

내 쪽지함

• 유저 검색 모달을 통해 닉네임으로 대화를 원하는 유저를 검색할 수 있습니다.
• 대화방을 더블 클릭하여 개별 쪽지 페이지로 이동 가능합니다.
• 생성된 대화방을 선택하여 삭제할 수 있습니다.

---

일대일 대화방

• 상대에게 쪽지를 전송할 수 있습니다.
• 보낸 쪽지를 선택하여 삭제할 수 있습니다.
• Infinity scroll을 적용하여 끊임 없이 지난 대화를 확인할 수 있습니다.

---

스코어보드 페이지

• 유저의 상세 기록을 확인할 수 있습니다.
• 모집 지역, 기간, 글의 상태에 따른 기록을 조회할 수 있습니다.
• 참여한 기록에 대한 점수, 이미지를 등록 및 수정할 수 있습니다.
• 유저가 등록한 점수와 이미지를 확인할 수 있습니다.
• 함께 참여한 유저에 대한 별점 등록이 가능합니다.
• Infinity scroll을 적용하여 끊임 없이 기록을 확인할 수 있습니다.

---

볼링장 검색 페이지

• 검색어를 통해 볼링장을 검색할 수 있습니다.
• 검색 결과를 클릭하여 볼링장 정보 페이지로 이동할 수 있습니다.

---

마이페이지

• 자신의 닉네임, 지역, 프로필 이미지를 변경할 수 있습니다.
• 자신의 매너점수와 average를 확인할 수 있습니다.