1-blue / blegg

🔥 리그오브레전드 전적 검색 프로젝트 🔥

도메인은 가지고 있던 것 중에서 아무거나 사용했기 때문에 사이트와 맞지 않습니다... 🥲
무료 Riot Api를 사용하기 때문에 요청 수의 제한이 있어 정상적으로 동작하지 않을 수 있습니다.
또한 매일 새로운 키로 업데이트해줘야 하기 때문에 메인 / 소환사 검색 페이지가 정상적으로 작동하지 않을 수 있습니다.

📱 blegg

• ✏️ 개인 프로젝트 - 리그오브레전드 전적 검색 프로젝트
• ⏱️ 프로젝트 기간: 2023/06/19 ~ 2023/08/01
• ⛓️ 배포 링크: 프로젝트 결과물
• 가짜 계정들
  1. 아이디: ( 브론즈 ~ 챌린저 영문 ) + "1"
  2. 비밀번호: 123456789a!

📝 문서

1. API 명세서
2. GitHub Projects
3. Storybook

🧑‍💻 구현 기능

1. 챔피언
2. 소환사 전적
3. 인증
4. 커뮤니티
5. 프로필
6. 리그

🎩 Tech Stack

🛠️ Tools

Git	Github	SourceTree	Window 11

📤 FrontEnd

TypeScript	React.js	Vite	Storybook	TailwindCss	React-Query	Framer-Motion	React-Hook-Form

📥 BackEnd

TypeScript	Nest.js	Passport	JWT	Prisma	Swagger	S3	EC2

💡 가이드 라인

📤 FrontEnd

0️⃣ 환경 변수 등록

• .env.development

# 테스트용 서버 URL
VITE_SERVER_URL=http://localhost:3050

• .env.production

# 배포용 서버 URL
VITE_SERVER_URL=https://bleshop.shop

1️⃣ 종속성 설치

$ cd frontend
$ npm install

2️⃣ 개발 모드 실행

$ npm run dev

3️⃣ 배포 모드 빌드

$ npm run build

📥 BackEnd

0️⃣ 환경 변수 등록

• .env

PORT=3050
NODE_ENV=development
# NODE_ENV=production

# db
DATABASE_URL=

# auth
JWT_SECRET=

# riot
RIOT_API_KEY=
RIOT_VERSION=13.14.1
RIOT_LANGUAGE=ko_KR

# aws ( s3-full-access )
AWS_S3_BUCKET=blegg
AWS_S3_REGION=ap-northeast-2
AWS_S3_ACCESS_KEY=
AWS_S3_ACCESS_SECRET_KEY=

# oauth
FRONT_CALLBACK_URL=http://localhost:5173/oauth
# FRONT_CALLBACK_URL=https://bleshop.shop/oauth

# google oauth
GOOGLE_CLIENT_ID=
GOOGLE_SECRET=
GOOGLE_OAUTH_CALLBACK_URL=http://localhost:3050/auth/google/redirect
# GOOGLE_OAUTH_CALLBACK_URL=https://bleshop.shop/auth/google/redirect

# kakao oauth
KAKAO_CLIENT_ID=
KAKAO_SECRET=
KAKAO_OAUTH_CALLBACK_URL=http://localhost:3050/auth/kakao/redirect
# KAKAO_OAUTH_CALLBACK_URL=https://bleshop.shop/auth/kakao/redirect

# naver oauth
NAVER_CLIENT_ID=
NAVER_SECRET=
NAVER_OAUTH_CALLBACK_URL=http://localhost:3050/auth/naver/redirect
# NAVER_OAUTH_CALLBACK_URL=https://bleshop.shop/auth/naver/redirect

1️⃣ 종속성 설치

$ cd backend
$ npm install
$ npm install pm2 -g

2️⃣ DB 세팅 및 시드 데이터

$ npx prisma db push
$ npx prisma db seed

3️⃣ 개발 모드 실행

$ npm run start:dev

4️⃣ 배포 모드 빌드 및 실행

# 빌드
$ npm run build

# 실행
$ npm run start:prod

# pm2로 실행
$ pm2 start npm -- run start:prod

🎥 실행 영상

0️⃣ 모든 챔피언 Carousel

1️⃣ 특정 챔피언

2️⃣ 소환사 전적

3️⃣ 소환사 전적 반응형

4️⃣ 회원가입/로그인

5️⃣ OAuth 로그인

6️⃣ 게시글 생성

7️⃣ 게시글 조회

8️⃣ 게시글 수정

9️⃣ 게시글 제거

1️⃣0️⃣ 게시글 검색

1️⃣1️⃣ 게시글 평가 ( 좋아요/싫어요 )

1️⃣2️⃣ 댓글 CRUD

1️⃣3️⃣ 답글 CRUD

1️⃣4️⃣ 프로필 페이지 게시글들 ( 작성/좋아요/싫어요한 )

1️⃣5️⃣ 프로필 수정

1️⃣6️⃣ 상위 리그 유저들 렌더링