스프링 부트(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. 잡담/질문 게시판
- 글 보기 기능: 비회원도 가능
- 글 작성 기능: 구글 소셜 로그인을 통해 회원가입한 자만 가능
- 삭제 기능: 삭제는 본인 게시글만 가능
동작 내용
로그인 전 메인 화면
컨텐츠 검색 기능
로그인 성공 화면
프로필 보기 화면
프로필 편집 화면 (회원만 접근 가능)
소문(게임 컨텐츠) 등록 기능
커뮤니티 게시판
글 등록
삭제 전에 확인 창 띄움
0개의 댓글