기억력 테스트를 통한 섬 꾸미기 웹 어플리케이션
- 기억력 테스트 (4x4 카드 뒤집기 게임)을 통해 아이템 획득
- 보유한 아이템으로 나의 섬 꾸미기
- 친구의 섬 놀러가기
- 보유한 아이템에 한해서 나와 친구들의 공부 데이터 분석 데이터 담긴 아이템 카드 열람 가능
| 언어 |
|
| 프레임워크 및 라이브러리 |
 |
| 상태관리 |
|
| 패키지관리 |
|
| Formatter |
|
| 배포 |  |
| IDE |
 |
| 협업툴 |
|
| 로딩 | 보기 모드 | 편집 (꾸미기) 모드 |
|
|
|
| 아이템 추가 및 드래깅 | 섬 테마 선택하기 |
|
|
| 아이템 삭제하기 | 저장하기 | 초대 코드 복사 붙여넣기 |
|
|
|
| 시작로딩 | 짝 맞추기 성공 | 짝 맞추기 실패 |
|
|
|
| 게임 종료 후 결과 전환 | 게임 종료 안내 | 게임 결과 발표 |
|
|
|
| 방문하기 | 친구 섬 로딩 |
|
|
| 획득 & 미획득 아이템 목록 | 획득한 아이템 클릭 시 상세 정보 모달 | 나만의 아이템 획득 유저를 위한 상세 모달 |
|
|
|
| 로그인 | 로그인 오류 | 로그인 성공 |
|
|
|
| 회원 가입 | 회원 가입 오류 |
|
|
| 메뉴 |
|
├── 📑.github/workflows <!--깃 액션 플로우->
├── 📁apis <!--Api 호출-->
├── 📁components <!-- atom, 드래그, 폼, 레이아웃, 모달 등 컴포넌트-->
├── 📁constants <!-- 각종 상수 값 관리 -->
├── 📁hooks <!--custiom hooks-->
├── 📁pages <!-- 페이지 -->
├── 📁public <!-- assets과 fonts -->
├── 📁redux <!-- 리덕스 slice와 store -->
├── 📁styles <!-- 공용 스타일 설정 -->
├── 📁types <!-- 타입 -->
├── 📁utils <!-- 각종 유틸 함수 -->
├── 📑middleware.ts <!--페이지 랜더링 전 인증 여부에 따른 라우팅-->
└── 📑next.config.js <!--Image, rewrites, redirects, SVG config, bundle-analyzer 설정-->
|
|
|
|
|
|