내 컴퓨터 안의 작은 독서실, 캠투디
- 학생들은 자신의 이름을 입력하고 스터디룸에 입장합니다.
- 들어갈 스터디룸이 없다면 스터디룸을 생성할 수 있으며, 공개/비공개 여부를 직접 설정할 수 있습니다.
- 스터디룸에 입장하면 집중한 시간이 카운트되기 시작합니다.
- 화면에서 시야가 크게 틀어졌거나, 눈을 감거나, 화면에 얼굴이 비치지 않을 경우 공부 집중 시간에 카운트되지 않습니다.
- 위의 경우 지속 미집중 시간이 카운트되며, 지속 미집중 시간이 30분 이상일 경우 스터디룸에서 강제 퇴장당합니다.
- 집중 시간이 60분씩 추가될 때마다 캠투디 친구들이 레벨업합니다. 이 친구들은 수료증에서 만날 수 있습니다.
- 집중력을 유지하며 공부를 모두 수행하고 방을 나가면 수료증을 얻을 수 있으며, 자신의 점수를 전체 랭킹에 등록할 수 있습니다.
친구들과 함께 공부
점수를 채워 레벨업
졸다가 강제 퇴장
.
├── 📁 api 🏷 백엔드 API 작업
│ ├── ✡️ controller.js 🏷 요청 처리 로직
│ ├── ✡️ dao.js 🏷 DB CRUD 쿼리
│ └── ✡️ router.js 🏷 라우팅 작업
├── 📁 config 🏷 백엔드 기본 세팅
├── ✡️ index.js 🏷 서버 소켓 작업 및 서버 실행
├── 📁 utils 🏷 백엔드 소켓 작업에 쓰이는 모듈들이 있는 디렉터리
│ ├── ✡️ messages.js
│ └── ✡️ users.js
├── 📋 package.json 🏷 npm 패키지 관리
├── 📁 public 🏷 프론트 작업
│ ├── 📁 css
│ ├── 📁 js
│ │ ├── 📁 dist 🏷 빌드된 eye-detactor.js 파일이 포함된 곳
│ │ ├── ✡️ eye-detactor.js 🏷 눈 깜빡임 검사하는 js파일
│ │ └── ✡️ socket.js 🏷 클라이언트 소켓 통신을 위한 js파일
│ ├── 📄 index.html
│ ├── 📄 result.html
│ ├── 📄 room.html
│ └── 📄 select-room.html
└── 📋 webpack.config.js 🏷 웹팩 설정 파일
| reference | purpose |
|---|---|
| socket.io | for real-time interaction |
| tensorflow.js | for in-browser machine learning |
| @mirrory-dev/eyeblink | for detecting students' attention metric |
| slidesgo | for design and presentation |