https://github.com/prgrms-fullcycle-devcourse/webfull_9_10_ddt
DDT(디지털 디톡스 타이머) 통합 레포지토리 입니다.
https://github.com/prgrms-fullcycle-devcourse/webfull_9_10_ddt
Last synced: 1 day ago
JSON representation
DDT(디지털 디톡스 타이머) 통합 레포지토리 입니다.
- Host: GitHub
- URL: https://github.com/prgrms-fullcycle-devcourse/webfull_9_10_ddt
- Owner: prgrms-fullcycle-devcourse
- Created: 2026-05-19T05:44:27.000Z (about 1 month ago)
- Default Branch: develop
- Last Pushed: 2026-06-18T02:54:59.000Z (13 days ago)
- Last Synced: 2026-06-18T04:09:55.357Z (13 days ago)
- Language: TypeScript
- Homepage: https://webfull-9-10-ddt-frontend.vercel.app
- Size: 8.15 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📱 감옥 (디지털 디톡스 스페이스)
남들이 딴짓할 때, 우리는 서로를 감시하고 집중한다.
**감옥** 프로젝트는 스마트폰과 딴짓으로부터 벗어나 팀원들과 함께 온전히 몰입할 수 있도록 돕는 협업형 집중 타이머 서비스입니다.
---
## 📝 프로젝트 소개
스마트폰 중독과 집중력 저하를 해결하기 위해 기획된 서비스 입니다.
방장이 방을 생성하면 팀원들이 모여 집중 시간과 휴식 시간 그리고 벌칙을 정합니다.
목표를 달성하지 못하고 화면을 이탈하는 경우 룰렛을 통해 사전에 정해둔 벌칙을 받게 됩니다.
---
## ✨ 주요 기능
- **실시간 방 참여** : 방 코드를 통해 게스트 및 로그인 유저가 실시간으로 모일 수 있습니다.
- **계약서 동시 편집** : 팀원들이 실시간으로 목표 시간과 벌칙을 함께 작성하고 수정할 수 있습니다.
- **디지털 디톡스 타이머** : 설정된 집중 시간 동안 기기 화면을 이탈하면 이탈 시간이 실시간으로 누적됩니다.
- **벌칙 룰렛** : 세션 종료 후 이탈자가 발생하면 룰렛을 통해 벌칙을 공정하게 추첨합니다.
- **푸시 알림** : 집중 시간 및 휴식 시간 종료 전 브라우저 및 앱 푸시 알림을 제공하여 참여를 유도합니다.
---
## 🛠 기술 스택
- **Frontend** : Next.js, React, Tailwind CSS, Zustand, React Query
- **Backend** : NestJS, Prisma, PostgreSQL, Redis, BullMQ
- **Realtime** : Socket.io, Yjs, y-websocket
- **Infra & Tooling** : Turborepo, pnpm, AWS SNS, Sentry
---
## 💡 주요 기술적 성과 및 구현 포인트
- **CRDT 기반 실시간 동시 편집 (Yjs)** : 팀원들이 동시에 규칙(시간, 벌칙 등)을 작성할 때 충돌이 발생하지 않도록 **Yjs** 와 **WebSocket** 을 결합하여 구글 문서와 같은 원활한 동시 편집 환경을 구현했습니다.
- **안정적인 타이머 및 비동기 작업 처리 (BullMQ)** : 타이머의 정확도 향상과 세션 종료, 알림 발송의 안정성을 보장하기 위해 **Redis** 기반의 **BullMQ** 를 도입하여 무거운 로직을 백그라운드 큐(Queue) 작업으로 분리했습니다.
- **실시간 소켓 통신 및 스케일아웃 고려 (Socket.io)** : 실시간 방 상태 동기화 및 룰렛 이벤트를 위해 **Socket.io** 를 적용했으며, 향후 다중 서버 환경을 대비해 **Redis Adapter** 를 사용하여 소켓 세션을 안전하게 동기화하고 관리합니다.
- **크로스 플랫폼 푸시 알림 (Web Push + AWS SNS)** : 웹과 모바일 환경 모두에서 사용자가 화면을 벗어나더라도 경고 및 종료 알림을 받을 수 있도록 **Web Push API** 와 **AWS SNS** 를 연동한 하이브리드 푸시 알림 시스템을 구축했습니다.
- **모노레포 기반의 타입 안정성 확보 (Turborepo)** : 프론트엔드와 백엔드 간의 소켓 이벤트 이름 및 데이터 타입(DTO)을 **packages/shared** 로 분리하여 타입 불일치로 인한 런타임 에러를 방지하고, **Turborepo** 를 통해 빌드 효율성을 크게 높였습니다.
- **에러 모니터링 체계 구축 (Sentry)** : 프론트엔드와 백엔드 양측에 **Sentry** 를 연동하여, 배포 환경에서 발생하는 예상치 못한 예외 상황을 실시간으로 추적하고 신속하게 대응할 수 있는 기반을 마련했습니다.
---
## 📂 프로젝트 구조
- **apps/frontend** : 웹 프론트엔드 애플리케이션 (Next.js)
- **apps/backend** : API 및 웹소켓 메인 서버 (NestJS)
- **packages/shared** : 프론트엔드와 백엔드가 공유하는 소켓 이벤트 및 인터페이스 타입
---
## 🚀 시작하기
프로젝트 루트 경로에서 아래 가이드에 따라 전체 패키지를 설치하고 실행할 수 있습니다.
1. **패키지 설치** : `pnpm install` 명령어로 전체 의존성을 설치합니다.
2. **환경 변수 설정** : 프론트엔드와 백엔드 디렉토리의 `.env.example` 파일을 참고하여 각각 `.env` 파일을 생성합니다.
3. **데이터베이스 세팅** : 백엔드 디렉토리에서 `pnpm --filter backend exec prisma generate` 및 DB 마이그레이션 명령어를 실행하여 테이블을 생성합니다.
4. **개발 서버 실행** : 루트 디렉토리에서 `pnpm dev` 명령어를 입력하여 프론트엔드와 백엔드 서버를 동시에 구동합니다.