📚 SURL Study

멘토-멘티 스터디 관리 플랫폼

멘토와 멘티를 연결하고, 체계적인 학습 관리와 피드백으로 함께 성장하는 스터디 플랫폼

🌐 Live Demo · 🐛 Bug Report · 💡 Feature Request

---

🎯 프로젝트 소개

SURL Study는 멘토-멘티 간 체계적인 학습 관리를 위한 풀스택 웹 플랫폼입니다.

멘토는 멘티에게 과제를 배정하고 피드백을 제공하며, 멘티는 일일 학습 계획을 세우고 과제를 제출하며 자신의 성장을 추적할 수 있습니다. 캘린더 기반 인터페이스와 학습 시간 통계를 통해 효율적인 학습 관리가 가능합니다.

✨ 주요 기능

🧑‍🏫 멘토

기능	설명
멘티 관리	멘티 계정 생성, 목록 조회, 미작성 피드백 현황 확인
과제 배정	날짜 범위 / 요일 단위 일괄 과제 생성, 학습자료 첨부
피드백 작성	날짜별 피드백 대기 목록 조회, 피드백 작성·수정·삭제
학습 콘텐츠	스터디 칼럼(학습 글) 작성, 멘티별 메모 관리

👨‍🎓 멘티

기능	설명
일일 학습 관리	데일리 할 일 목록 조회, 과제 추가·완료 체크
캘린더 & 통계	주간 캘린더 뷰, 일별·주별 진척도 시각화 (차트)
학습 시간 기록	과목별 공부 시간 기록·수정·삭제, 시간 통계 확인
과제 제출	파일 업로드를 통한 과제 제출, 멘토 피드백 확인
소통	과제별 댓글을 통한 멘토와의 실시간 소통

🏗️ 시스템 아키텍처

┌──────────────────┐         ┌──────────────────┐         ┌──────────────────┐
│                  │         │                  │         │                  │
│   React + Vite   │◄───────►│   Spring Boot    │◄───────►│   TiDB Cloud     │
│   (Cloudflare    │  REST   │   (Docker)       │   JPA   │   (MySQL)        │
│    Pages)        │  API    │                  │         │                  │
│                  │         │                  │         │                  │
└──────────────────┘         └────────┬─────────┘         └──────────────────┘
                                      │
                                      │ S3 SDK
                                      ▼
                             ┌──────────────────┐
                             │                  │
                             │  Cloudflare R2   │
                             │  (File Storage)  │
                             │                  │
                             └──────────────────┘

🛠️ 기술 스택

Backend

기술	버전	용도
Spring Boot	4.0.2	웹 프레임워크
Spring Security	-	인증 & 인가
JPA / Hibernate	-	ORM
JWT (jjwt)	0.11.5	토큰 기반 인증
AWS S3 SDK	-	Cloudflare R2 파일 스토리지
Gradle	-	빌드 도구
Docker	-	컨테이너 배포

Frontend

기술	버전	용도
React	19.2	UI 라이브러리
Vite	7.2	빌드 도구
Tailwind CSS	4.1	스타일링
React Router	7.13	클라이언트 라우팅
Recharts	3.7	학습 통계 차트
MSW	2.12	Mock API (개발용)

Infra

기술	용도
TiDB Cloud	MySQL 호환 클라우드 DB
Cloudflare R2	S3 호환 오브젝트 스토리지
Cloudflare Pages	프론트엔드 호스팅
Docker	백엔드 컨테이너화

📂 프로젝트 구조

blaybus/
├── BE/backend/                          # Spring Boot 백엔드
│   └── src/main/java/com/blaybus/backend/
│       ├── domain/
│       │   ├── user/                    # 사용자 (멘토/멘티 프로필)
│       │   ├── match/                   # 멘토-멘티 매칭
│       │   ├── content/                 # 칼럼, 피드백, 메모, 댓글
│       │   ├── planner/                 # 학습 계획, 과제, 제출
│       │   └── notification/            # 알림
│       └── global/                      # JWT, Security, 공통 설정
│
└── FE/frontend/surl_study/              # React 프론트엔드
    └── src/
        ├── api/                         # API 클라이언트
        ├── components/
        │   ├── common/                  # 공통 컴포넌트
        │   ├── mentee/                  # 멘티 전용 컴포넌트
        │   └── mentor/                  # 멘토 전용 컴포넌트
        ├── pages/                       # 페이지 컴포넌트
        ├── context/                     # Auth Context
        └── mocks/                       # MSW Mock 핸들러

🚀 시작하기

사전 요구 사항

• Java 17+
• Node.js 18+
• Docker (선택)

Backend 실행

cd BE/backend

# 로컬 실행
./gradlew bootRun

# 또는 Docker
docker build -t blaybus-backend .
docker run -p 8080:8080 blaybus-backend

Frontend 실행

cd FE/frontend/surl_study

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

개발 서버: http://localhost:5173

빌드 & 배포

# Backend
./gradlew build

# Frontend
npm run build
npm run preview   # 빌드 결과 미리보기

📡 API 엔드포인트 (주요)

인증

Method	Endpoint	설명
POST	/api/v1/auth/login	로그인

멘토 API

Method	Endpoint	설명
GET	/api/v1/matchings?date={date}	멘티 목록 + 피드백 현황
GET	/api/v1/matchings/daily-tasks?date={date}	날짜별 피드백 대기
POST	/api/v1/mentors/me/mentees	멘티 계정 생성
POST	/api/v1/mentor/tasks/batch	과제 일괄 생성
POST	/api/v1/mentor/worksheets	학습자료 업로드
GET/POST/PUT	/api/v1/assignments/{id}/feedback	피드백 CRUD

멘티 API

Method	Endpoint	설명
GET	/api/v1/study/daily?menteeId={id}&date={date}	일일 과제 조회
GET	/api/v1/study/progress	학습 진척도
POST	/api/v1/mentee/tasks/batch	과제 생성
PATCH	/api/v1/study/tasks/{id}	과제 상태 업데이트
POST	/api/v1/study/time-records	학습 시간 기록
POST	/api/v1/mentee/study/tasks/{id}/submissions	과제 제출

🔐 인증 & 보안

• JWT 기반 Stateless 인증 (Access Token 1시간)
• 역할 기반 접근 제어 (MENTOR / MENTEE)
• Spring Security 기반 API 보호
• Presigned URL 을 통한 안전한 파일 업로드

🎨 디자인 시스템

요소	값
Primary	#6D87ED
Light	#8CA3FF
Lighter	#DAE1FF
Gradient	#ADBCF7 → #6D87ED
Font	System Default

👥 팀 소개

런타임 - 설스터디

---

Made with ❤️ by 런타임