Cognisle

기억력 테스트를 통한 섬 꾸미기 웹 어플리케이션

사이트 주소

https://cognisle.vercel.app

주요 기능

1. 기억력 테스트 (4x4 카드 뒤집기 게임)을 통해 아이템 획득
2. 보유한 아이템으로 나의 섬 꾸미기
3. 친구의 섬 놀러가기
4. 보유한 아이템에 한해서 나와 친구들의 공부 데이터 분석 데이터 담긴 아이템 카드 열람 가능

사이트 맵

기술 스택

언어
프레임워크 및 라이브러리
상태관리
패키지관리
Formatter
배포
IDE
협업툴

페이지 소개

1. 나의 섬 꾸미기

로딩	보기 모드	편집 (꾸미기) 모드

아이템 추가 및 드래깅	섬 테마 선택하기

아이템 삭제하기	저장하기	초대 코드 복사 붙여넣기

2. 게임하기

시작로딩	짝 맞추기 성공	짝 맞추기 실패

게임 종료 후 결과 전환	게임 종료 안내	게임 결과 발표

3. 방문하기

방문하기	친구 섬 로딩

3. 나의 아이템 열람하기

획득 & 미획득 아이템 목록	획득한 아이템 클릭 시 상세 정보 모달	나만의 아이템 획득 유저를 위한 상세 모달

4. 로그인 및 회원가입

로그인	로그인 오류	로그인 성공

회원 가입	회원 가입 오류

5. 메인 메뉴

메뉴

디렉토리 구조

├── 📑.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 설정-->

❤️ 친구들의 귀여운 섬 꾸미기 ㅎㅎ