목차
-
기술 스택 및 아키텍처
3.1 기술 스택
3.2 아키텍처 -
ERD & API 명세
4.1 ERD
4.2 API 명세 -
서버 실행
5.1 공통 사전 준비
5.2 프론트엔드 실행 요약
5.3 백엔드 실행 요약 -
팀 구성 및 역할분담
6.1 프론트엔드
6.2 백엔드
스포츠 경기를 중계해주는 식당, 펍을 찾아본 경험이 있으신가요?
원하는 경기를 중계하는지 물어본 경험이 있으신가요?
대중적인 지도 서비스에는 스포츠 중계 필터가 존재하지 않습니다.
스포츠 팬들은 경기를 함께 즐길 수 있는 장소를 원하지만, 정보를 얻기 어렵습니다.
식당 또한 대형 스크린을 구비하고 경기를 중계해도 이를 알릴 방법이 없습니다.
PLAYS + PLACE = PLAYCE
PLAYCE는 PLAY(스포츠 경기)와 PLACE(장소)의 합성어로
사용자 주변의 스포츠 중계 식당을 쉽게 탐색할 수 있도록 돕는 지도 서비스입니다.
식당 위치, 경기 종목, 팀 등을 바탕으로 최적의 장소를 검색할 수 있도록 지원하며
기존의 지도, 맛집 서비스에는 없던 스포츠 경기 중계 일정을 확인할 수 있습니다.
-
스포츠 팬의 장소 검색 도구로 활용
- 스포츠를 시청할 수 있는 장소를 찾는 개인 또는 소모임이 경기 일정과 위치를 기반으로 편리하게 장소 탐색 가능
- 스포츠 팬들은 원하는 팀의 경기를 원하는 분위기에서 관람 가능
-
식당의 마케팅으로 활용
- 스포츠 중계를 제공하는 식당은 중계 일정을 등록하여 새로운 고객 유입 가능
- 평일 저녁 또는 경기 시간에 맞춘 운영을 통해 고객의 방문율을 향상시킬 수 있으며 스포츠 관련 메뉴, 서비스 등을 통하여 매출 극대화 가능
-
스포츠 문화 활성화 및 스포츠 커뮤니티 플랫폼으로 확장
- 집에서 혼자 보는 경기에서 벗어나, 식당에서 함께 응원하며 경기를 시청하는 문화를 활성화할 수 있음
- 특정 구단 팬을 위한 정기 응원 모임, 단체 관람 등의 다양한 스포츠 문화를 창출할 수 있으며, 지역 기반 스포츠 커뮤니티 플랫폼으로 확장 가능
|
|
|
| 지도 | 사이드바 | 사이드바 - 검색 |
|---|---|---|
|
- 카카오맵 API로 지도 서비스 제공 - 마커를 클릭 시 식당 기본 정보 확인 가능 |
- 검색 - 즐겨찾기 목록 - 오늘의 중계 일정 목록 - 식당 상세정보 확인 |
- 필터링 : 식당 이름, 지역, 경기(종목, 리그) - 정렬 : 거리순, 날짜순 - 클릭 시 상세 정보 확인 및 지도 중심 이동 |
|
|
|
| 사이드바 - 식당 상세 정보 | 마이페이지 | 마이페이지 - 식당 관리 |
|
- 지도 마커 또는 검색 결과 클릭 시 진입 - 기본 정보 : 업종, 위치, 영업 시간 등 - 상세 정보 : 메뉴, 사진, 중계 일정 등 |
- 로그인 시 접근 가능 - 즐겨찾기 : 목록 조회, 삭제 - 내 정보 : 이메일, 이름 등 개인 정보 조회 - 식당 관리 : 식당/중계 일정의 목록 조회, 등록, 수정, 삭제 |
- 우측 하단의 (+) 버튼으로 새로운 식당 등록 - 기존에 등록한 식당 관리 가능 : 중계 일정 관리, 식당 수정/삭제 |
|
|
|
| 마이페이지 - 식당 등록/수정 | 마이페이지 - 중계 일정 관리 | 마이페이지 - 중계 일정 등록/수정 |
|
- 등록 시 입력 정보 : 가게명, 사업자등록번호, 주소, 전화번호, 영업시간, 업종, 메뉴, (소개), 사진 - 사업자등록번호, 주소 : 유효성 검사 진행, 존재하지 않는 정보를 입력할 수 없음 - 수정 시 기존 입력값 자동 불러오기 |
- 탭리스트 : 날짜별 중계 정보 확인 가능 - 캘린더 : 한눈에 중계 일정 확인 가능 |
- 등록 시 입력 정보 : 날짜, 시간, 종목, 리그, (팀, 기타) - 수정 시 기존 입력값 자동 불러오기 |
| 프론트엔드 | 백엔드 | 주요 컴포넌트 및 서비스 |
|---|---|---|
|
- 언어 : TypeScript - 프레임워크 : React - 상태 관리 : Zustand - 스타일링 : Tailwind CSS |
- 언어 : TypeScript - 서버 : Node.js + Express - DB : MySQL - ORM : TypeORM |
- 지도 API : 카카오맵 API - 이미지 서버 : AWS S3 - 성능 테스트 : k6 - 모니터링 : AWS CloudWatch - 캐싱/세션 관리 : Redis - 배포 : AWS EC2 Instance |
프로젝트의 모든 API 목록은 'backend' 폴더 내 README 파일에서 상세히 확인할 수 있습니다.
Swagger UI도 지원하며, 백엔드 서버 실행 후 http://localhost:3000/api-docs 에서 전체 명세를 확인할 수 있습니다.
프로젝트를 로컬에서 실행하려면 프론트엔드와 백엔드 서버를 각각 실행해야 합니다.
아래는 전체적인 실행 흐름이며, 세부 설정은 각 리드미에서 확인해주세요.
클론, 설치 등
git clone https://github.com/Dev-Playce/Playce.git
cd Playce- .env 파일 설정
- 의존성 설치 및 실행
cd frontend
npm install
npm run dev-> 상세 가이드는 'frontend' 폴더 내 README 파일에서 확인
- .env 파일 설정
- 의존성 설치
- Redis 서버 연결 확인
- DB 연결 확인
- 서버 실행
cd backend # 새 터미널에서
npm install
npm run dev-> 상세 가이드는 'backend' 폴더 내 README 파일에서 확인
- 공동 작업 : 기능 구체화, 피그마 UI 설계, API 명세서 작성
| 양시은 | 김민제 | 심우현 |
|---|---|---|
| 팀장 | 부팀장 | 팀원 |
|
- 중계 일정 관리 - 통합 검색 기능 - 마이페이지 |
- 회원가입/로그인 - 식당 관련 기능 - 지도 관련 기능 |
- 즐겨찾기 관련 기능 - 비밀번호 초기화 관련 기능 - 중계 일정 관련 부가 기능 |
| 조은채 | 황가연 | 황지은 |
|---|---|---|
| 팀원 | 팀원 | 팀원 |
|
- 더미데이터 생성 - 식당 관련 API - K6 부하테스트 코드 작성 - Redis 캐싱 |
- 더미데이터 생성 - 중계 일정 / 검색 관련 API - K6 부하테스트 / Redis 캐싱 - AWS EC2 배포 |
- DB 셋팅 / S3 이미지 서버 - 유저 / 즐겨찾기 관련 API - K6 부하테스트 / Redis 캐싱 |
기타 상세는 프론트엔드 README 파일, 백엔드 README 파일을 참고하세요