🧠 BrainBuddy - 뇌친구, 내친구

당신의 집중을 실시간으로 측정하고, 데이터로 완성하는 똑똑한 학습 동반자

---

📌 프로젝트 소개

BrainBuddy는 웹캠을 통해 사용자의 얼굴을 인식하고, 집중도를 실시간으로 분석하여 학습자의 효율적인 학습을 돕는 웹 애플리케이션입니다.
사용자는 학습 계획을 세우고, 학습 중 집중 상태를 그래프 및 게이지로 확인하며, 데이터 기반의 학습 개선 효과를 경험할 수 있습니다.

---

⚙️ Tech Stack

🎨 Front-end

---

💻 개발 환경

---

📂 폴더 구조

BrainBuddy_FE/
├── README.md           # 프로젝트 설명 문서
├── public/             # 정적 리소스
│   ├── mediapipe/      # Mediapipe 관련 리소스
│   └── vite.svg
├── src/                # 소스 코드
│   ├── api/            # API 통신 모듈 (Auth 등)
│   │   ├── AuthApi.jsx
│   │   └── AuthApi2.jsx
│   ├── assets/         # 아이콘, 이미지 등 에셋
│   ├── components/     # 공통 컴포넌트 (모달 등)
│   │   ├── AuthModal.jsx
│   │   ├── EndModal.jsx
│   │   ├── ReportModal.jsx
│   │   ├── ResultModal.jsx
│   │   ├── StartModal.jsx
│   │   ├── TestModal.jsx
│   │   ├── TutorialModal.jsx
│   │   └── UserModal.jsx
│   ├── pages/          # 주요 페이지
│   │   ├── AccountDeletion.jsx
│   │   ├── LandingPage.jsx
│   │   ├── MainPage.jsx
│   │   └── WebcamPage.jsx
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── package.json        # 의존성 관리
├── index.html          # SPA 진입점
└── 기타 설정 파일       # eslint, postcss, gitignore 등

🖥 주요 기능

🔑 회원 인증

• 회원가입 / 로그인 API 연동
• JWT Access & Refresh Token 발급 및 브라우저 쿠키 저장

🏠 메인 페이지

• 학습 계획 설정 (언제 / 어디서 / 무엇을)
• 학습 시작 버튼 클릭 시 웹캠 페이지 이동

📷 웹캠 페이지

• Mediapipe Face Detection 기반 얼굴 인식
• Crop된 얼굴 데이터를 WebSocket을 통해 초저지연 전송
• 실시간 집중도 게이지 및 트렌드 그래프 제공