Table of Contents

• 개요
• 팀원
• 주요 기능
• 기술 스택
• 개발 & 트러블슈팅 로그
• 실행 방법
• 개발 환경

English | 한국어

개요

The Pong은 채팅과 1:1 게임 서비스를 제공하는 애플리케이션입니다.

• 개발 기간: 2023.3 ~ 2023.5 (10주)
• Notion 문서

팀원

• 최사랑 @srngch: 팀 리더, 프론트엔드, 백엔드
• 김희현 @hhkim0729: 프론트엔드
• 박찬울 @PCHANUL: 백엔드

주요 기능 및 사용 기술

회원

• OAuth 로그인
• Two-Factor Authentication
• 닉네임 및 프로필 이미지 설정 및 변경
• 프로필 페이지
• 팔로우와 언팔로우, 차단과 차단 해제
• 회원 상태 표시: 온라인, 오프라인, 게임 중

채팅

• 채널 설정: 채널 이름, 타입 및 비밀번호 변경
• 채널 타입:
  • 공개 채널: 모든 사용자와 채팅할 수 있는 채널
  • 비밀번호 채널: 비밀번호를 입력해야 입장할 수 있는 공개 채널
  • 비공개 채널: 초대된 사용자와의 채팅
  • DM: 다른 사용자와 1:1 채팅할 수 있는 채널
• 채널 관리: 채널 생성, 채널 삭제, 채널에 사용자 초대, 채널 나가기
• 채널 참여자 관리:
  • 관리자 지정/해제
  • 음소거: 30초 동안 메시지를 보낼 수 없음
  • 내보내기: 채널에서 제거되지만 다시 입장할 수 있음
  • 차단하기: 채널에서 차단되어 다시 입장할 수 없음

1:1 게임

• 실시간 게임 플레이
• 랜덤 플레이어 매칭
• 게임 커스터마이징: 모드, 맵
• 게임 결과 히스토리
• 레벨 시스템

기술 스택

프론트엔드

백엔드

개발

데브옵스

협업

개발 & 트러블슈팅 로그

• [FE 개발 로그] 무한 스크롤 구현하기 - 김희현(@hhkim0729) 👉 자세히 보러가기

실행 방법

실행 환경 설정

실행에 필요한 의존성을 설치합니다.

• Node.js(^18)
• Yarn Berry(^3.4)
• Docker Compose
• Make

$ node -v
v18.14.2
$ yarn set version stable
$ yarn --version
3.4.1

외부 API 서비스 키 발급 받기

Google OAuth

1. Google 개발자 문서를 참고하여 OAuth 2.0 클라이언트를 생성합니다.
2. 양식을 작성하는 단계에서 리디렉션 URI의 내용은 http://localhost/api/v1/auth/google/return로 작성합니다.
3. .env 혹은 .env.example 파일에 각 내용을 복사합니다.
   • GOOGLE_ID: OAuth 클라이언트 ID
   • GOOGLE_SECRET: OAuth 보안 비밀번호
   • GOOGLE_CB: 리디렉션 URI (http://localhost/api/v1/auth/google/return)

설치 및 실행

$ git clone https://github.com/team-noir/the-pong
$ cd the-pong

# env 파일을 작성합니다.
$ cp .env.example .env
$ vi .env

# Docker Compose로 컨테이너를 빌드하고 실행합니다.
$ docker compose build --no-cache
$ docker compose up -d

# Docker Compose 대신 Makefile을 사용할 수도 있습니다.
$ make up

개발 환경

$ git clone https://github.com/team-noir/the-pong
$ cd the-pong

# Set and edit env file
$ cp .env.development.example .env.development
$ vi .env.development

#
$ docker compose -f docker-compose-dev.yml --env-file .env.development build --no-cache
$ docker compose -f docker-compose-dev.yml --env-file .env.development up -d

Project Structure

/
├── .github    # Github 설정 파일
├── .vscode    # vscode 설정 파일
├── backend
│   ├── prisma # 데이터베이스 스키마
│   ├── src    # 소스 코드
│   └── test   # 테스트 파일
├── frontend
│   ├── public # 정적 파일
│   └── src    # 소스 코드
└── nginx      # Nginx 설정 파일

커밋 메시지 컨벤션

.gitmessage

개발 포트 & URLs

• Frontend: http://localhost:8080
• Backend API: http://localhost:8080/api
• Backend API Docs(Swagger): http://localhost:8080/api/docs
• Backend socket.io API: http://localhost:8080/socket.io
• Database GUI(Prisma studio): http://localhost:5555