개발 기간: 2023.06.08 ~ 2023.08.09
개발 인원: 1인
배포 주소: https://www.moncol.kr/
온라인 게임 '메이플스토리'의 컨텐츠인 '몬스터 컬렉션' 이용자들에게 몬스터 등록 정보 및 편의 기능을 제공하는 사이트입니다.
- 몬스터 등록 정보 제공
- 정보 북마크 기능
- 몬스터 리젠 타이머 기능
- 엘리트 몬스터 등록 관리 기능
HTML, CSS, JavaScript로 만들어진 Monster Collection v1.0 프로젝트를 새로운 기술 스택을 이용하여 v2.0 프로젝트를 만들었습니다.
NextAuth 라이브러리를 이용하여 로그인 기능 구현
- 로그인
- 구글 로그인
- 비회원 로그인
- 로그인 시, 사용자가 보고있던 이전 페이지로 이동
| 로그인 |
|---|
 |
- 검색어와 일치하는 몬스터 목록 생성
- 몬스터를 검색하여 해당 페이지의 위치로 이동
- 위, 아래 키보드를 이용하여 검색 목록 이동
| 몬스터 검색 |
|---|
 |
- 북마크 버튼 클릭 시, 북마크를 등록/해제 할 수 있습니다.
- 북마크 정보는 bookmark 페이지에서 확인할 수 있습니다.
| 북마크 |
|---|
 |
- 몬스터 리젠 타이머 등록/삭제/시간 초기화
| 타이머 |
|---|
 |
- 엘리트 몬스터 카드를 클릭하여 사용자의 등록 여부 설정
- 드래그 앤 드랍으로 카드 위치 변경 (React-DnD 라이브러리 이용)
- 등록 여부 및 위치 변경 발생 시, 저장 버튼 활성화
| 엘리트 몬스터 등록 관리 |
|---|
 |
- 화면 테마 설정
| 화면 테마 설정 |
|---|
 |
| 메인 페이지 | 카테고리 페이지 | 북마크 페이지 |
|---|---|---|
 |
 |
 |
| 엘몬 페이지 | 검색창 | 타이머창 | 카테고리창 |
|---|---|---|---|
 |
 |
 |
 |