미션 기반 목표 달성 및 시간 관리 웹 어플리케이션
React 기반으로 개발되어, 플래너·미션·그룹 활동을 통해 동기부여와 성취감을 제공하는 시간 관리 서비스
- 프로젝트명: TimeChallenge
- 개발환경: Visual Studio Code (VSCode)
- 사용 기술: React (UI Library), Redux (State Management)
- 팀명: 굿프레임 (GoodFrame)
- 팀원: 정웅, 옥지윤, 안예찬, 김은비
TimeChallenge는 단순한 일정 관리 도구를 넘어,
미션 기반 목표 달성과 시간 관리를 동시에 지원하는 웹 애플리케이션입니다.
사용자는 하루 계획을 세우고 미션을 인증하며 동기를 얻고,
그룹 활동을 통해 다른 사람들과 협력과 경쟁을 경험할 수 있습니다.
특히, 성공 시 보상·실패 시 벌금이라는 규칙을 통해 몰입도를 높이고 성취감을 제공하며,
장기적으로는 꾸준한 참여와 높은 리텐션을 기대할 수 있습니다.
'계획 → 실행 → 인증 → 보상 → 피드백'의 선순환을 제공하는 종합 시간 관리 서비스**입니다.
- 플래너, 타이머, 할 일 관리 기능 제공
- Drag & Drop 기반 UI로 직관적인 일정 관리
- 미션 설정 및 참여
- 카메라 + 타임스탬프 기반 인증
- 100% 달성 시 축하 애니메이션과 보상 제공
- 예치금/상금 시스템 (성공 시 상금, 실패 시 벌금)
- 미션 참여 시 예치금 설정
- 환급 규칙 확인 후 참여 가능
- 참여한 미션은 Mission 탭에서 확인 가능
- 그룹 생성 및 참여
- 그룹 랭킹, 채팅, 그룹 미션 제공
- 협력과 경쟁을 통한 지속적 동기부여
- 월별 공부 시간 통계
- 미션 달성률 시각화
react-circular-progressbar,react-calendar활용
- 챌린지 현황 확인
- 예치금 관리
- 완료된 미션 기록 확인
- 즉각적인 성취감 & 지속적인 동기부여
개인 목표와 그룹 미션을 통해 높은 리텐션 제공 - 자본 확보 및 자연스러운 보상 시스템
미션 실패 시 벌금, 성공 시 상금 지급 - 확장성 있는 서비스 구조
자유로운 챌린지 개설 및 다양한 주제 확장 가능
👉 클릭하면 시연 영상을 볼 수 있습니다.
- Frontend: React, Redux
- UI/UX: Drag & Drop, Responsive Design
- Libraries:
react-circular-progressbar(통계 차트)react-calendar(월별 기록 관리)navigator.mediaDevices.getUserMedia(웹캠 인증)react-html2canvas(캡처 기능)
src/
├── components/ # 공통 UI 컴포넌트
├── pages/ # Home, Mission, Group, Stats, MyPage
├── redux/ # 상태 관리 (store, slice)
├── hooks/ # 커스텀 훅
├── utils/ # 헬퍼 함수
└── assets/ # 아이콘, 이미지, 스타일
-
저장소 클론
git clone https://github.com/username/timechallenge.git cd timechallenge -
패키지 설치
npm install
-
실행
npm start
브라우저에서 http://localhost:3000 접속
- 협업 경험: Git/GitHub를 통한 버전 관리, 충돌 해결, 원활한 분업과 의사소통
- 기술적 성장: React·Redux 상태 관리, 새로운 라이브러리 적용, 디버깅 능력 향상
- UX 설계 역량: 사용자 관점에서 편리한 UI/UX 설계의 중요성 학습
- 모바일 반응형 최적화
- 개인 맞춤형 미션 추천 기능
- AI 기반 학습/시간 관리 코치 기능
- 소셜 기능 강화 (그룹 간 경쟁, 오픈 챌린지)