BoBHuB

성수낙낙에 방문한 레이서들을 위한 밥메이트 매칭 서비스

목차

• 1️. 서비스 개요
  • 주제
  • 서비스명
  • 목적
  • 목표
  • 타겟 유저
• 2️. 서비스 소개
  • 서비스 도메인
  • 테스트 계정
  • 주요기능
  • 페이지별 화면
  • 본 프로젝트의 차별점
  • 기대효과
• 3️. 서비스 구성
  • 서비스 흐름도
  • 기술스택
    • FE
    • BE
    • 공통)
  • 인프라 구조도
  • ERD
  • API 문서(Notion)
• 4️. 프로젝트 역할 분담
  • 멤버별 Responsibility
• 5️. 실행 방법
• 6️. Version

1️⃣ 서비스 개요

📌 주제

• 성수낙낙에 방문한 레이서들을 위한 혼밥 탈출 프로젝트

📌 서비스명

• BoBHuB(밥허브)

📌 목적

• 새로운 맛집 탐방
• 타 트랙/기수 레이서 간 친목 도모(네트워킹)

📌 목표

• 실시간 사용자 트래픽 받아와서 처리하기
• 추가 작성 예정

📌 타겟 유저

• 성수낙낙에서 집중이 잘 돼서 왔는데,
  밥은 먹어야겠고
  혼밥은 하기 싫은
  엘리스 레이서

2️⃣ 서비스 소개

🔗 서비스 도메인

http://kdt-sw3-team17.elicecoding.com/

⚠ 서버가 내려간 상태입니다.(AWS 재배포 예정)

👥 테스트 계정

Role	ID	PW
Admin	admin@bobhub.com	11qq
User	elicer@bobhub.com	11qq

⚠ 실제 서비스는 이메일 인증을 위해 실제 이메일로 가입하셔야 합니다.

📌 주요기능

• 회원가입 페이지: 이메일 인증 기능
• 로그인 기능
• 식당 목록 카테고리별 조회 및 검색 기능
• 선택한 식당 방에서 일대다 실시간 채팅 기능
• 식당 상세페이지: 댓글(후기) CRUD 기능
• 마이페이지: 사용자 정보 수정 기능
• 관리자페이지: 식당 CRUD, 사용자 권한 변경 기능

📌 페이지별 화면

메인 페이지	메인페이지 하단 - 맛집 모임 참여 슬라이더
회원가입 페이지	로그인 페이지
카테고리별 식당 목록 페이지	식당 상세 정보 페이지
채팅방	유저 가이드 모달창
마이페이지	관리자페이지

📌 본 프로젝트의 차별점

• 식당 상세페이지에서 모집인원수 옵션을 선택 후 모임생성을 누르면 2~4명의 인원 모집 가능
• 활성화된 모임은 메인페이지 슬라이더에 등장, 참여를 원하는 타인이 좋아요(하트 아이콘)를 누를 수 있음
• 초기에 설정한 모집인원이 다 차면 해당 식당을 선택한 사람들이 채팅방에 접속하여 실시간 채팅(다대다) 가능

📌 기대효과

• 성수낙낙 근처 맛집을 한눈에 확인할 수 있으므로 실제로 성수낙낙을 방문하는 레이서들의 적극적인 이용 예상
• 성수낙낙 방문 시 함께 식사를 할 사람이 없을 때 새로운 레이서와의 만남의 기회 제공
• 식당을 골랐어도 메뉴 선정이 고민 될 때 메뉴판 이미지를 통해 보다 빠른 메뉴 선택 가능

3️⃣ 서비스 구성

📌 서비스 흐름도

• User(Racer)
  
  
• Admin
  

📌 기술스택

◾ FE

• 타입 명시를 통한 생산성 향상 목적으로 TypeScript 사용
• 전역상태관리: Redux를 통해 유저 로그인 정보와 채팅 로그 관리

◾ BE

• 복잡한 SQL 쿼리문 작성 및 연습을 위해 ORM 미사용

◾ 공통

• 일대다 채팅서비스 구현: Socket.io를 활용한 실시간 통신 구현

📌 인프라 구조도

📌 ERD

🔗 API 문서

https://giant-painter-76a.notion.site/api-8a9d3abf185e40b78a0871db3ee334f9

4️⃣ 프로젝트 역할 분담

이름	담당 업무
이수빈	팀장 프론트엔드
김유정	프론트엔드
김찬수	프론트엔드
윤동주	프론트엔드
장은영	프론트엔드
김동준	백엔드
안상준	백엔드

멤버별 Responsibility

1. 이수빈: 팀장 프론트엔드

• 기획 단계: 회의진행, 아이디어 도출, 역할분배
• 개발 단계: 상세페이지, 채팅컴포넌트 개발
• 수정 단계: 발표준비, 발표

2. 김동준: 백엔드

• 기획 단계: Restful API 주소 설정
• 개발 단계: CRUD 라우팅, 서비스 로직, 에러 정리
• 수정 단계: 에러 관련 수정 및 디버깅

3. 김유정: 프론트엔드

• 기획 단계: 메인 페이지 와이어 프레임 작성
• 개발 단계: 메인 페이지, 유저가이드
• 수정 단계: 피드백 반영하여 코드 수정

4. 김찬수: 프론트엔드

• 기획 단계: 관리자 페이지 와이어 프레임 작성
• 개발 단계: 관리자 페이지, 페이지 별 실시간 액션, 전역 상태 관리
• 수정 단계: 피드백 반영하여 코드 수정

5. 안상준: 백엔드

• 기획 단계: DB 설계, ERD 구조화, MySQL 및 EC2, S3 개발 환경 설정
• 개발 단계: CRUD 모델 SQL쿼리 및 트리거, 캐싱, Multer, 배포
• 수정 단계: 피드백 반영해서 백엔드 설계 수정

6. 윤동주: 프론트엔드

• 기획 단계: 로그인·회원가입 페이지 와이어 프레임 작성, Discord·Notion·Jira 팀 스페이스 생성 및 정리
• 개발 단계: 로그인·회원가입 페이지 구현, 로고·톤앤매너 구상
• 수정 단계: API 요청 에러 수정, 피드백 반영하여 코드 수정, 디자인 개선

7. 장은영: 프론트엔드

• 기획 단계: 식당목록 페이지 와이어 프레임 작성
• 개발 단계: 식당목록·사용자 페이지, Theme 이용한 전체 테마 color 정의, 공통 API 작성
• 수정 단계: 피드백 반영하여 코드 수정

5️⃣ 실행 방법

1. git clone ${repo address}
2. SQL DDL 코드 실행 (bobhub/BE/src/seeder)
3. 백엔드와 프론트엔드 폴더에서 필요한 패키지 설치

yarn (혹은 npm install)

4. 실행

yarn run (혹은 npm start )

• BE 디렉토리에서 .env 생성

NODE_ENV=<local 혹은 ec2>
PORT= <포트번호>
#setupProxy.js에서 target값 SERVER PORT로 설정 요망

COOKIE_SECRET= <랜덤 문자열>

LOCAL_MYSQL_PASSWORD = <local 비밀번호>
EC2_MYSQL_PASSWORD = <ec2 비밀번호>
EC2_MYSQL_USER = <ec2 계정>
EC2_MYSQL_HOST = <ec2 storage URL>

S3_BUCKET_NAME = <계정>
S3_ACCESS_KEY_ID = <ID>
S3_ACCESS_KEY_PASSWORD = <비밀번호>

#NodeMailer
MAIL_ID = <google developer 아이디>
MAIL_PASSWORD = <google developer 비밀번호>

6️⃣ Version

• 1.0.0