게이미케이션 요소를 접목한 자기주도형 학습 플랫폼 'Stuv'

📌 OverView

✏️ 개요
혼자 공부하는 사람들이 겪는 꾸준함의 어려움을 해결하고, 동기를 부여하기 위해 게이미피케이션 요소를 결합한 학습 플랫폼입니다.
핵심 기능 외에도 반응형 디자인, 스켈레톤 UI, 페이지네이션 등을 구현하여 사용자 편의성을 높이고자 했습니다.

🧷 배포 링크
https://stuv.netlify.app/

📅 개발 기간
2025.02.11 - 03.12 (총 28일)

🧑🏻‍💻Developers👩🏻‍💻

Frontend	Frontend	Frontend
이수빈	현용재	김수현
@ddongguri-bing	@Huze	@Soorangmanju

🚀 Tech Stack

🏗️ Framework

👓 Package Manager

💄 Styling

⏰ Real Time

🎨 Design

⚙️ Deploy

✅ Feature Overview by Page

회원가입 및 로그인

• SNS를 활용한 소셜 로그인(회원가입/로그인/로그아웃)
• 이메일 인증
• 비밀번호 검증
• 닉네임 중복 확인

관리자

• 팟 인증 관리
• 이벤트 팟 생성
• 아이템 등록 및 수정 및 삭제

팟

• 팟 생성 및 참여
• 팟 미션 인증 및 보상 받기 (일일미션 포함)

상점

• 토스 API 기반의 간편 결제 기능
• 랜덤 아이템 뽑기
• 보유포인트를 사용한 아이템 구매

실시간 채팅

• 웹소켓 기반의 일대일 채팅 및 그룹 채팅
• 읽음 처리 기능/채팅 목록 안읽음 알림 뱃지 구현
• 새로온 메시지 미리보기 및 최신 메시지로 이동

실시간 알림

• 전체 및 개별 읽음
• SSE 기반의 실시간 애니메이션 적용
• 알림내역 미리보기 및 이동

게시판

• CRUD
• 다중이미지 업로드 및 수정/삭제
• 댓글 작성/삭제 및 질문 게시글 댓글 채택 기능

타이머

• 생성 카테고리별 시간 측정 기능
• 시간 자동저장 및 반영
• 페이지 이동 시에도 타이머 유지 기능

투두리스트

• 오늘의 할일 생성 및 수정, 삭제
• 00시 오늘의 투두리스트 초기화 기능

랭킹

• 나의 랭킹 및 전체 상위 랭킹 조회

마이페이지

• 프로필 수정
• 타이머 기반 공부시간 그래프
• 나의 옷장에서 코스튬 조회 및 변경
• 친구 및 내가 작성한 게시글 목록 조회

친구

• 기존 친구 관리
• 신규 친구 요청 수락 및 거절
• 친구 검색 추천

🎞️ Preview (Click to 👀)

로그인/홈	회원가입	관리자	타이머/투두리스트
게시판	게시글 작성	게시글 수정/삭제	댓글 작성/채택
상점 랜덤뽑기/구매	팟 전체	팟 작성	팟 참여
실시간 알림	실시간 채팅	마이 프로필/옷장	친구 목록