집중 관리가 필요한 모든 순간, PeakTime

Overview

File

PeakTime 프로그램 다운로드
PeakTime 확장프로그램

PeakTime 서비스 화면

■ 메인 페이지

• 루트계정 메인
  

• 서브계정 메인
  

■ 하이킹 시작, 종료

• 하이킹 시작 후 사이트, 프로그램 차단 기능
  

• 종료
  

■ 월간 하이킹 내역 페이지

• 캘린더 - 일자 클릭 - 상세
  

■ 전체 통계 페이지

• root 전체 통계
  

■ 메모 및 요약 페이지

• 메모 작성 및 확인
  

• 요약 작성 및 확인
  

■ 차단 프리셋 설정 페이지

• 사이트, 프로그램 추가 입력
  

■ 서브계정 관리 페이지

• 서브계정 생성 및 차단 예약 타이머
  

• 서브계정 타이머 예약 기반 자동 차단
  

주요 기능

서비스 소개

• 웹 사이트 및 프로그램 차단으로 PC 사용자의 사용 목적에 집중하도록 하는 서비스

프로젝트 주요 기능

• 웹 사이트 및 프로그램 차단
  • 타이머에 시간과 사전에 지정한 차단 목록을 선택해 콘텐츠 차단 기능을 실행할 수 있습니다.
  • 차단 기능 실행 중에는 이용한 콘텐츠를 기록하고, Chrome 웹 사이트와 실행 프로그램을 감지해 사전에 지정한 콘텐츠를 차단합니다.
• 차단 프리셋 관리
  • 사전에 차단하고 싶은 웹 사이트와 프로그램 목록을 지정할 수 있습니다.
  • 자신이 직접 차단 기능을 사용하거나, 서브유저 그룹에 차단 목록을 지정하는 데 사용됩니다.
  • 차단 기능 실행 도중, 원하는 웹 사이트를 차단 웹 사이트 목록에 등록할 수 있습니다.
• 활동 내역 확인
  • 이번 달 이용 내역을 이용 시간에 따른 히트맵 방식으로 캘린더를 제공합니다.
  • 이용 건당 실제 시작 및 종료 시각, 가장 많이 이용한 콘텐츠 등을 확인할 수 있습니다.
• 사용자의 전체 활동에 대한 통계 제공
  • 전체 이용 시간 및 이용 중 차단 콘텐츠 접근에 대한 정보에 관한 통계를 제공합니다.
  • 프로그램 실행 중 가장 많이 이용한 콘텐츠와, 하루 중 프로그램 실행 시작 시각 분포를 시각화된 자료로 제공합니다.
• 서브계정 차단 관리
  • 한 계정에 종속된 다수의 서브계정을 생성하고 관리하는 기능을 제공합니다.
  • 그룹 단위로 지정된 서브계정에게 차단 일정을 부여해, 지정된 시간 동안 콘텐츠 실행을 차단하도록 합니다.
  • 서브 계정은 자동으로 시작되는 하이킹을 종료할 수 없으며, 일반적인 방법으로는 프로그램 종료가 불가능합니다.
• 메모 및 요약
  • Chrome Extension을 통해 원하는 내용을 입력해 저장하는 메모 기능을 제공합니다.
  • 저장한 메모를 포함해 입력한 내용을, 키워드를 지정해 생성형 AI가 요약하는 기능을 제공합니다.
  • 요약한 내용을 pdf, markdown 형식의 파일로 내보내는 기능을 제공합니다.

개발 환경

• OS
  • Local : Windows 10
  • AWS : Ubuntu 20.04.6 LTS
• IDE
  • IntelliJ IDE 2024.1.4
  • Visual Studio Code 1.90.2
• UI / UX
  • Figma
• Database
  • PostgreSQL 15
  • Redis 7.4
• CI/CD
  • Jenkins
  • Docker
  • Docker-Compose
• API
  • Openai API

상세 스택

• Backend(Spring Boot)
  • JAVA - openjdk 17.0.12
  • Gradle: 8.8
  • Spring Boot: 3.3.3 (Spring Data JPA, Spring Data Redis, Spring Security)
  • Spring Mail: 3.2.2
  • Spring retry
  • Spring Aspects
  • PostgreSql: 42.7.3
  • Swagger: 2.2.22
  • Lombok: 1.18.34
  • QueryDSL: 5.0.0
  • jjwt: 0.11.2
  • Junit: 5.10.3
• FrontEnd(React)
  • React: 18.3.1
  • Vite: 5.4.10
  • JavaScript: 5.5.3
  • tailwindcss: 3.4.14
  • react-icons: 5.3.0
  • react-router-dom: 6.27.0
  • react-spinner: 0.14.1
  • d3.js: 7.9.0
  • react-chartjs-2: 5.2.0
  • axios: 1.7.7
  • dayjs: 1.11.13
  • flowbite-react: 0.12.0
  • html2pdf.js: 0.10.2
  • sweetalert2: 11.14.4
  • three.js: 0.170.0
  • ws: 8.18.0
  • zustand: 5.0.1
• Frontend(Electron)
  • Electron: 33.0.2
  • Electron-stroe: 10.0.0
• Extension(Chrome Extension)
  • tailwindcss: 3.4.14
  • Html, JavaScript, CSS

협업 툴

• 일정 관리 : Notion, Onedrive.live(Microsoft 365)
• 이슈 및 형상 관리 : Gitlab, Git
• 커뮤니케이션 : MatterMost, KakaoTalk

유저 플로우

시스템 아키텍처

기능 명세서

API 연동규격서

화면 설계서

시퀀스 다이어그램 (Sequence Diagram)

• 홈페이지

  

• 하이킹 내역

  

• 전체 통계

  

• 차단 관리

  

• 서브계정 관리

  

• 유저정보 수정

  

일정관리 (Gantt Chart)

• 10월17일~11월 17일 일간 일정 정리 Excel

Git Commit 컨벤션

• feat : 새로운 기능 추가
• fix : 버그 수정
• docs : 문서 내용 변경
• style : 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 등
• design : 디자인 추가 및 수정
• refactor : 코드 리팩토링
• test : 테스트 코드 작성
• chore : 빌드 수정, 패키지 매니저 설정, 운영 코드 변경이 없는 경우 등

[type][FE/BE][developer] subject

ex) 백엔드 회원가입 기능

- [FEAT][BE][석범] 회원가입 기능 추가

---

Git Branch 전략

git-flow전략

• master
• develop-EL : 일렉트론 개발 브랜치
• develop-BE : BE 배포 브랜치
• develop-EX: 크롬 익스텐션 개발 브랜치
• feature/EL/{issue-num}-function: 일렉트론 기능 브랜치
• feature/BE/{issue-num}-function: BE 기능 브랜치
• feature/EX/{issue-num}-function : 크롬 익스텐션 기능 브랜치

ERD

EC2 포트 정리

Port	Main Server
80	Nginx HTTP 기본 포트
443	Nginx HTTPS
5173	React
5432	PostgreSql
6379	Redis
8080	Spring boot
9090	Jenkins
12345	WebSocket

역할 분배