사이트 바로가기 : http://playhost.shop
이번 23년 11월 15일부터 12월 8일 대략 3주간 팀 프로젝트를 진행하였습니다.
팀원은 총 6명이 진행하였으며 팀당 2명씩 역할 분담을 나누어 사이트를 제작하였습니다.
📝 프로젝트 선정배경
프로젝트 선정배경은 프로젝트 주제 선정과정에서 강의 시간에 배웠던 API를 활용한 사이트을 제작하기로 회의 때 이야기를 하였고, 그 중 게임 소프트웨어 유통망 사이트인 Steam(스팀)의 API를 활용한 게임 판매 사이트를 제작하기로 결정하였습니다.
📝 프로젝트 목표
저희 playhost 사이트의 목표는 다음과 같습니다.
- 직관적이고 한눈에 보기 쉬운 사이트 일 것
- 스팀 API를 활용한 다양한 게임 조회 기능 구현
- 사이트 관리자가 직접 판매할 게임을 추가/삭제할 수 있는 기능 구현
- 포인트 구매 기능 구현
제작 기간은 23년 11월 15일 ~ 12월 08일 약 3주간 진행되었습니다.
📝 담당 역할
저는 사이트 프론트 + 백엔드 부분을 담당하였고 상세 기능은 아래와 같이 기능을 구현하였습니다.
- 구매한 게임을 담을 수 있는 장바구니 기능 구현
- 토스페이먼츠 API를 활용한 결제 시스템 구현
- 게임 뉴스를 게시할 수 있는 News 페이지 기능 구현
- 팀원 소개 및 사이트 소개 페이지 구현
📝 프로젝트에 사용한 기술
프로젝트에서 사용한 기술은 다음과 같습니다.
🔶 개발 툴
1) intellij IDEA - 백앤드 부분
2) VSCode - 프론트앤드 부분
3) Github - 형상관리
4) Oracle DB - DB
5) 배포 - 아마존 AWS
📝 시스템 구성도
📝 ERD Table
📝 로그인 기능
먼저 사이트 로그인 기능입니다.
로그인은 이메일, 비밀번호를 입력하여 로그인을 할 수 있습니다.
회원가입의 경우 이름, 이메일, 비밀번호, 비밀번호 재입력을 통해 회원가입을 합니다.
회원가입을 진행하면 회원가입시 입력한 이메일로 인증번호가 전송되며 전송된 인증번호를 입력하여 회원가입을 진행합니다.
비밀번호 찾기 기능은 가입시 입력한 이메일을 입력하면 이메일 주소로 인증번호가 전송됩니다.
그 인증번호를 입력하여 일치하면 비밀번호 변경 부분으로 넘어가게 되고, 새로운 비밀번호로 변경이 가능합니다.
소셜로그인 부분입니다.
소셜로그인은 구글, 카카오로 로그인이 가능하며 별도 회원가입 없이 구글과 카카오에 로그인이 되어있으면 다이렉트로 로그인이 진행됩니다.
📝 메인페이지
메인페이지는 사이트 처음 접속시 보이는 페이지입니다.
- 추천게임 목록 부분은 관리자 페이지에서 해당 상품에 이미지를 업로드 한 경우 메인 화면에 표시가 됩니다.
- 금주의 할인 게임은 관리자 페이지에서 판매 제품에 할인율을 적용할 경우 할인 게임 탭 부분에 표시가 됩니다.
📝 상세 조회
상세 조회 페이지부분은 게임 태그별(액션, 어드벤처 등...) 게임 목록들을 보여주는 페이지입니다.
쇼핑몰로 치면 카테고리별로 상품을 보여주는 부분이라 생각하시면 됩니다.
📝 게임 상세조회
게임 목록에서 해당 게임을 선택하면 보이는 페이지 입니다.
화면 상단에는 썸네일 이미지 + 타이틀이름 + 리뷰 상태를 표시하며
화면 중간 부분에는 게임 스크린샷, 게임 트레일러 영상 등이 표시됩니다.
스크롤을 내리면 게임 설명부분과 사이드바 부분으로 나누어져 있으며 장바구니 추가 버튼이 존재합니다.
해당 게임에 대한 리뷰도 작성이 가능합니다. 단, 게임을 구매한 경우에만 리뷰 작성이 가능하도록 설정되어 있습니다.
📝 장바구니 기능
장바구니 부분은 게임 상세조회에서 장바구니 탭 부분에 금액이 적힌 버튼을 누르게 되면 장바구니에 추가가 됩니다.
장바구니 페이지로 넘어가게 되면 해당 장바구니에 담긴 개수 표시와 장바구니에 담긴 제품 상세 표시, 주문하기 버튼으로 구성되어 있습니다.
📝 결제 페이지
위의 장바구니 페이지에서 결제하기 버튼을 누르면 결제 페이지로 넘어가게 됩니다.
결제 페이지부분은
유저의 주문내역 부분과 포인트 영역, 토스페이먼츠 API를 이용한 결제 선택창이 표시됩니다.
토스페이먼츠 API를 이용하여 실제 결제는 되지 않고 테스트 결제가 되어 결제가 진행됩니다.
구매완료시 해당 계정 이메일로 구매내역을 전송합니다.
다음시간에는 그 외 기능을 포스팅하겠습니다~🙋♂️
'Project > Team Project' 카테고리의 다른 글
| 웹 개발 프로젝트 (3) 학사관리시스템 개발 (0) | 2024.03.28 |
|---|---|
| 웹 개발 팀 프로젝트 (2) 도서관 플랫폼 BookHub (2) | 2024.03.16 |
