Task 관리와 집중 모드를 결합한 생산성 향상 애플리케이션
- 외부 연동: 외부 서비스(Notion, Todoist 등)와 연동하여 task 가져오기
- 내부 작성: 앱 내에서 직접 task 작성 및 표시
- 작성된 task를 캘린더에 배치
- "집중 시작" 버튼을 통해 task를 캘린더에 추가
- 시간 단위로 task 스케줄링
- Lo-fi 음악 재생 기능
- 커버 이미지 표시
- 타이머 기능 (00:20 형식)
- 야간 도시 배경 등 집중을 돕는 시각적 요소
- 시각화 탭 (메인 페이지)
- 작업 관리 탭 (All Tasks)
-
시간별 뷰 (Hourly)
- 타임라인 형식 (00:00 ~ 23:59)
- 각 시간대별 task 배치
- 드래그 앤 드롭으로 시간 조정
- 현재 시간 표시:
- 현재 시간대에 수평선(막대) 표시
- 예: 14:30이면 14:00 시간대에 빨간색 또는 파란색 선
- 시간이 지남에 따라 선 위치 업데이트
- 집중 진행 중 표시:
- 현재 집중 중인 task가 있으면 해당 시간대에 특별 표시
- 진행 중 아이콘 또는 색상 강조
-
주간 뷰 (Weekly - 원래 "일별 뷰")
- 세로 레이아웃: 요일을 가로로, 시간을 세로로 배치
월 화 수 목 금 토 일
00
01
02
...
23
- 각 셀에 해당 요일/시간대의 task 표시
- 현재 요일 및 시간 하이라이트
- 집중 중인 task 강조 표시
- 드래그로 task 이동 가능
-
월별 뷰 (Monthly)
- 캘린더 그리드 형식 (7x5 또는 7x6)
- 일요일
토요일 또는 월요일일요일 선택 가능
- 각 날짜 셀 구성:
- 날짜 숫자 (우측 상단)
- task 개수 표시 (점, 숫자 등)
- task 밀도에 따른 배경 색상 강도
- 오늘 날짜 하이라이트 (테두리 또는 배경색)
- 날짜 클릭 시 해당 일의 주간 뷰로 이동
- 이전/다음 달 버튼
좌측: 캘린더 뷰 + 시간대별 작업
- 월간 캘린더 (날짜 선택)
- 선택된 날짜의 시간대별 작업 리스트
- 시간이 배정된 작업만 표시
- 드래그로 시간 조정 가능
우측: 미분류 작업 (Backlog)
- 시간대가 지정되지 않은 모든 작업
- 내부 앱 작업 + 외부 연동 작업 구분 표시
- 출처 태그 (내부/Notion/Todoist 등)
- 드래그로 좌측 캘린더로 이동 가능
- 우측 하단 FAB (Floating Action Button)
- "+ 새 작업" 버튼
- 클릭 시 작업 생성 모달 열림
필수 필드:
- 제목 (텍스트 입력)
- placeholder: "작업 제목을 입력하세요"
본문 에디터 (WYSIWYG):
-
추천 에디터:
- Novel - https://novel.sh/ (Notion 스타일 에디터, Next.js 최적화)
- Tiptap - https://tiptap.dev/ (커스터마이징 가능, 가볍고 유연)
- BlockNote - https://www.blocknotejs.org/ (블록 기반, Notion 스타일)
-
에디터 기능:
- 블록 기반 편집 (헤딩, 리스트, 체크박스 등)
- 슬래시 커맨드 (/ 입력으로 블록 추가)
- 마크다운 단축키 지원
- 이미지 업로드 (향후)
- 코드 블록 (향후)
추가 옵션:
- 날짜/시간 선택 (옵션)
- 우선순위 설정 (낮음/보통/높음)
- 태그 추가
버튼:
브라우저 탭 방식 (Multi-Tab Interface)
-
고정 탭 (닫기 불가):
- 시각화 탭 (홈 아이콘) - 항상 첫 번째
- 작업 관리 탭 (리스트 아이콘) - 항상 두 번째
-
동적 탭 (사용자 생성, 닫기 가능):
- 집중 모드 탭 - "집중 시작" 버튼 클릭 시 새 탭 생성
- Task 이름을 탭 제목으로 표시
- 닫기 버튼(X) 표시
- 여러 개의 집중 모드 탭 동시 열기 가능
[🏠 시각화] [📋 작업] [⏱️ 프로젝트 기획 회의 ✕] [⏱️ 디자인 작업 ✕]
-
탭 스타일:
- 활성 탭: 밝은 배경, 하단 테두리
- 비활성 탭: 어두운 배경
- 고정 탭: 닫기 버튼 없음
- 동적 탭: 우측에 X 버튼
-
탭 동작:
- 클릭: 해당 탭으로 전환
- X 버튼 클릭: 집중 모드 종료 및 탭 닫기
- 탭 드래그로 순서 변경 (향후)
- 최대 탭 개수 제한: 10개 (성능 고려)
-
상태 관리:
- 각 탭의 상태 독립적으로 유지
- 탭 전환 시 이전 상태 복원 (스크롤 위치, 타이머 등)
- 새로고침 시 열린 탭 목록 복원 (LocalStorage)
- 시각화 탭 또는 작업 관리 탭에서 "집중 시작" 버튼 클릭
모달 구성 요소:
-
Task 검색바
- 실시간 검색 기능
- 내부 추가 task + 외부 연동 task 모두 검색
- 자동완성 지원
-
Task 리스트
- 검색 결과 표시
- 최근 작업한 task 우선 표시
- Task 출처 표시 (내부/Notion/Todoist 등)
-
타이머 설정
- 타이머 모드: 25분, 50분, 커스텀 설정
- 스톱워치 모드: 무제한 측정
- 라디오 버튼 또는 토글로 선택
-
시작 버튼
- Task + 타이머/스톱워치 선택 후 집중 모드 시작
세션 제약:
- 한 번에 하나의 집중 세션만 실행 가능
- 이미 진행 중인 세션이 있으면 경고 메시지 표시
- 기존 세션을 종료해야만 새 세션 시작 가능
일반 모드:
- 배경: 야간 도시 풍경 (달과 별)
- 중앙: 큰 타이머/스톱워치 표시
- 상단: 현재 진행 중인 task 이름
- 하단: 음악 플레이어 컨트롤 (Lo-fi)
- 컨트롤 버튼:
- 종료 (세션 종료 및 저장)
- 전체화면 버튼 - 클릭 시 전체화면 모드 진입
전체화면 모드 (Fullscreen API):
document.documentElement.requestFullscreen()
실행- 브라우저 UI 완전히 숨김 (주소창, 탭 바 등)
- ESC 키 또는 전체화면 종료 버튼으로 일반 모드로 복귀
종료 방식:
- 종료 버튼 클릭: 타이머 정지 및 세션 저장
- 확인 다이얼로그: "진행 중인 타이머를 종료하시겠습니까?"
- 세션 데이터는 자동으로 저장됨 (시작 시간, 종료 시간, 실제 소요 시간)
- Next.js (이미 설정됨)
- TypeScript
- PWA 설정 (manifest.json, service worker)
- WYSIWYG 에디터: Novel / Tiptap / BlockNote 중 선택
- Fullscreen API (집중 모드)
- 향후 추가: 외부 API 연동 (Notion API, Todoist API), 인증 시스템
- Fullscreen API: 집중 모드 전체화면 지원
- Web Audio API (향후): Lo-fi 음악 재생
- Service Worker: 오프라인 지원, 백그라운드 동기화
- IndexedDB / LocalStorage: 로컬 데이터 저장
- 타이머 백그라운드 실행 전략:
- Web Worker: 타이머 로직을 별도 스레드에서 실행
- Page Visibility API: 탭 비활성화 감지 및 시간 보정
- Wake Lock API: 화면 꺼짐 방지 (모바일 집중 모드)
- Background Sync API (향후): 백그라운드 데이터 동기화
- 브라우저 탭이 백그라운드로 가면
setTimeout
/setInterval
이 throttling됨 (최대 1초 간격)
- 화면이 꺼지거나 다른 앱으로 전환 시 타이머가 부정확해짐
- Service Worker는 타이머 용도로 적합하지 않음 (이벤트 기반, 지속적 실행 불가)
1. Web Worker + 시간 기록 방식 (추천)
- Web Worker에서 타이머 로직 실행 (별도 스레드, throttling 영향 적음)
- 메인 스레드와 메시지로 통신
- 시작 시간을 기록하고, 현재 시간과 비교하여 경과 시간 계산
- setInterval 대신 requestAnimationFrame (화면 업데이트) + Date.now() (실제 시간) 조합
2. Page Visibility API
// 탭 활성화 상태 감지
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
// 백그라운드 진입 시 시간 기록
backgroundStartTime = Date.now()
} else {
// 포그라운드 복귀 시 경과 시간 계산 및 보정
const elapsed = Date.now() - backgroundStartTime
adjustTimer(elapsed)
}
})
3. Wake Lock API (모바일)
// 집중 모드에서 화면 꺼짐 방지
let wakeLock = null
async function requestWakeLock() {
try {
wakeLock = await navigator.wakeLock.request('screen')
} catch (err) {
console.error('Wake Lock failed:', err)
}
}
4. 시간 저장 방식
- 타이머 시작 시간, 목표 시간을 IndexedDB/LocalStorage에 저장
- 앱 재진입 시 저장된 시간 기준으로 현재 진행 상황 복원
- 브라우저 종료 후 재시작해도 타이머 상태 유지
- Phase 1: Date.now() 기반 시간 계산 (기본)
- Phase 2: Page Visibility API로 백그라운드 보정
- Phase 3: Web Worker로 타이머 로직 분리
- Phase 4: Wake Lock API 추가 (PWA 최적화)
- Phase 1: 기본 Task 작성 및 표시
- Phase 2: 캘린더 통합 및 스케줄링
- Phase 3: 집중 모드 구현 (음악, 타이머, UI)
- Phase 4: 외부 연동 기능
- Phase 5: 로그인 및 사용자 관리
- 집중 세션 음악 관리:
- 집중 세션 종료 시 음악도 자동 종료
- 집중 세션 진입 시 음악 자동 재생
- 전역 Audio 객체 사용
- 작업 목록에서 블록 색상 지정 기능:
- 각 작업마다 고유한 색상 지정 가능
- 시각화 탭의 캘린더에서 색상으로 작업 구분
- 기본 색상 팔레트 제공 (8-10가지)
- 커스텀 색상 선택 옵션
결정: 한 번에 하나의 집중 세션만 실행
이유:
- 진정한 집중을 위해서는 하나의 작업에만 몰입해야 함
- 멀티태스킹 방지로 생산성 향상
- 명확한 작업 추적 및 통계
- UI/UX 단순화
구현:
- 집중 모드 진입 시 기존 세션 체크
- 진행 중인 세션이 있으면 경고 메시지
- 기존 세션 종료 후 새 세션 시작 가능
결정: 일시정지 기능 제거
이유:
- 진정한 집중을 위해서는 중단 없이 작업에 몰입해야 함
- 일시정지 남용 방지 (계속 멈췄다 재개하면 집중 효과 감소)
- 긴급 상황 발생 시 세션 종료 후 새 세션 시작 가능
- 명확한 통계 데이터 수집 (순수한 집중 시간만 기록)
- Progressive Web App 구현:
- manifest.json 설정
- Service Worker 구현
- 오프라인 지원
- 홈 화면에 추가 기능
- 푸시 알림 (타이머 종료 시)
- 앱 아이콘 및 스플래시 스크린
- 시스템 레벨 단축키 설정:
- 앱 열기 단축키 (예: Cmd+Shift+F)
- 집중 시작 단축키 (예: Cmd+Shift+S)
- 현재 세션 종료 단축키
- 단축키 커스터마이징 설정
- 브라우저 내 단축키와 구분
-
기본 언어: 영어
- 모든 UI 텍스트 기본적으로 영어
- next-i18next 또는 next-intl 사용
-
지원 언어:
- 영어 (en) - 기본
- 한국어 (ko)
- 일본어 (ja) - 향후
- 중국어 간체 (zh-CN) - 향후
-
번역 범위:
- UI 텍스트 (버튼, 레이블, 메뉴)
- 에러 메시지
- 알림 메시지
- 날짜/시간 포맷
- 숫자 포맷
문제: 23시 ~ 익일 0시까지의 작업 블록이 시각화 탭에서 제대로 표시되지 않음
해결 방안:
- 날짜 경계를 넘어가는 세션을 2개의 블록으로 분리하여 표시
- 오늘 23:XX ~ 23:59 블록 (오늘 일자에 표시)
- 00:00 ~ 종료 시간 블록 (다음날 일자에 표시, "전날부터 계속" 표시)
구현 내용:
- 세션 필터링 개선: 오늘 시작한 세션 + 어제 밤 시작해서 오늘까지 이어지는 세션 모두 포함
- 날짜 경계 감지:
crossesMidnight
플래그로 날짜를 넘어가는 세션 식별
- 블록 분리 로직:
- 오늘 시작 → 내일 종료: 23:XX ~ 23:59까지만 오늘 표시
- 어제 시작 → 오늘 종료: 00:00 ~ 종료시간까지 오늘 표시
- 시간 정보 표시: 0시 블록에 "00:00 - XX:XX (전날부터 계속)" 메시지 표시
변경된 파일:
components/views/HourlyView.tsx
:
todaySessions
필터: 어제→오늘 세션 포함하도록 수정getSessionBlocksForHour
: 날짜 경계 처리 로직 추가- 시간 정보 표시: 0시 블록에 특별 메시지 추가
개선 사항:
- 색상 갯수 단순화: 18개 → 8개 (red, orange, yellow, green, blue, purple, pink, gray)
- 컬러 피커 아이콘 변경: 페인트 통 아이콘 → 팔레트 아이콘 (더 직관적)
- 커서 스타일:
cursor-pointer
추가
- 컬러 픽커 그리드:
grid-cols-6
→ grid-cols-4
(8개 색상에 맞게 조정)
- 컬러 픽커 박스 크기 증가:
p-3
→ p-4
, gap-2
→ gap-3
, min-w-[200px]
추가
- 색상 버튼 크기 증가:
w-8 h-8
→ w-10 h-10
, rounded-md
→ rounded-lg
- 외부 클릭 감지: 컬러피커 외부 클릭 시 자동으로 닫힘
- 다크모드 호환:
bg-white dark:bg-zinc-900
→ bg-surface
테마 시스템 사용
변경된 파일:
lib/colors.ts
: TASK_COLORS 배열 18개 → 8개로 축소, COLOR_BG_LIGHT_MAP 및 COLOR_TEXT_LIGHT_MAP 업데이트components/TaskList.tsx
:
- 컬러 피커 아이콘 변경 (paint bucket → palette)
cursor-pointer
클래스 추가- 그리드 레이아웃
grid-cols-4
로 조정
- 박스 크기 및 버튼 크기 증가
useEffect
+ useRef
로 외부 클릭 감지 구현- 배경색 테마 시스템 적용
변경 사항:
Task Queue → Today's TODO (영어: Today's TODO, 한글: 오늘의 할 일)- "Task List" 제목 제거 (TaskList.tsx 헤더에서 제거)
변경된 파일:
messages/en.json
: taskQueue, queueEmpty, addToQueue 키 변경messages/ko.json
: 한글 번역 업데이트components/TaskList.tsx
: 헤더에서 제목 제거, 버튼만 우측 정렬