스프링 부트 + Vue.js 예제: 게임 정보 제공 사이트 (스타라이트 스테이지)

스프링 부트(Spring Boot) + Vue.js 예제: 게임 정보 제공 사이트 (스타라이트 스테이지)

 

About this site

아이돌마스터 신데렐라 걸즈 스타라이트 스테이지(데레스테) 게임 정보 제공 사이트입니다.

 

Link

http://dere.yoonbumtae.com

사이트는 AWS 프리티어 기간이 만료되어 폐쇄했습니다. 서비스 당시 모습을 영상으로 볼 수 있습니다.

Github

https://github.com/ayaysir/deretopic

 

기술 스택

 

구현 내용

구현 공통 사항

• AWS + Travis-CI를 이용하여 무중단 자동 배포가 되도록 구성하였으며 외부 인터넷에서 접근 가능
• 백엔드 구현에 Spring Boot 및 JPA, Security 사용
• 단위 테스트 적용 (JUnit)
• 프론트엔드 구현에 Vue.js + Vue Router + Vuex 사용
• SPA에서 작동하는 소셜 로그인(OAuth2) 구현
• Restful API를 이용한 CRUD 구현

 

메뉴별 주요 기능

1. 소문 목록

• 일본어/한국어 컨텐츠 제공
• 전체정렬 오름차순/내림차순
• 컨텐츠, 캐릭터 이름 검색 기능
• 무한 스크롤(Infinite scroll 기능)
• 캐릭터별 개별 프로필, 외부(나무위키) 링크 기능
• 일본어 컨텐츠 Text-to-Speech 재생 기능
• 컨텐츠 업로드 기능: 회원만 가능, 업로드시 오디오 파일을 BASE64로 업로드하도록 구현

 

2. 아이돌(게임 등장 캐릭터) 리스트

• 캐릭터 목록 표시
• 개별 캐릭터의 프로필 보기/편집 기능
• 프로필 편집은 로그인한 사람만 가능
• 캐릭터 정보 편집시 메인 사진 업로드 기능
• 개별 프로필 보기 페이지에서 다음 캐릭터/이전 캐릭터 페이지 이동

 

3. 잡담/질문 게시판

• 글 보기 기능: 비회원도 가능
• 글 작성 기능: 구글 소셜 로그인을 통해 회원가입한 자만 가능
• 삭제 기능: 삭제는 본인 게시글만 가능

 

동작 내용

로그인 전 메인 화면

컨텐츠 검색 기능

로그인 성공 화면

프로필 보기 화면

프로필 편집 화면 (회원만 접근 가능)

소문(게임 컨텐츠) 등록 기능

커뮤니티 게시판

글 등록

삭제 전에 확인 창 띄움