Project Linnaeus - Fotion2

프로젝트 개요

Task 관리와 집중 모드를 결합한 생산성 향상 애플리케이션

유즈케이스

1. Task 작성

• 외부 연동: 외부 서비스(Notion, Todoist 등)와 연동하여 task 가져오기
• 내부 작성: 앱 내에서 직접 task 작성 및 표시

2. 캘린더 통합

• 작성된 task를 캘린더에 배치
• "집중 시작" 버튼을 통해 task를 캘린더에 추가
• 시간 단위로 task 스케줄링

3. 집중 모드

• Lo-fi 음악 재생 기능
• 커버 이미지 표시
• 타이머 기능 (00:20 형식)
• 야간 도시 배경 등 집중을 돕는 시각적 요소

4. 로그인 기능

• 향후 구현 예정
• 현재는 로컬 사용 가능

UI/UX 구조 (PWA 전체화면 기반)

앱 전체 탭 구조

1. 시각화 탭 (메인 페이지)
2. 작업 관리 탭 (All Tasks)

---

1. 시각화 탭 (메인 페이지)

3가지 뷰 모드 (내부 탭 전환)

1. 시간별 뷰 (Hourly)

   • 타임라인 형식 (00:00 ~ 23:59)
   • 각 시간대별 task 배치
   • 드래그 앤 드롭으로 시간 조정
   • 현재 시간 표시:
     • 현재 시간대에 수평선(막대) 표시
     • 예: 14:30이면 14:00 시간대에 빨간색 또는 파란색 선
     • 시간이 지남에 따라 선 위치 업데이트
   • 집중 진행 중 표시:
     • 현재 집중 중인 task가 있으면 해당 시간대에 특별 표시
     • 진행 중 아이콘 또는 색상 강조

2. 주간 뷰 (Weekly - 원래 "일별 뷰")

   • 세로 레이아웃: 요일을 가로로, 시간을 세로로 배치

   월   화   수   목   금   토   일
   00
   01
   02
   ...
   23
   

   • 각 셀에 해당 요일/시간대의 task 표시
   • 현재 요일 및 시간 하이라이트
   • 집중 중인 task 강조 표시
   • 드래그로 task 이동 가능

3. 월별 뷰 (Monthly)

   • 캘린더 그리드 형식 (7x5 또는 7x6)
   • 일요일토요일 또는 월요일일요일 선택 가능
   • 각 날짜 셀 구성:
     • 날짜 숫자 (우측 상단)
     • task 개수 표시 (점, 숫자 등)
     • task 밀도에 따른 배경 색상 강도
   • 오늘 날짜 하이라이트 (테두리 또는 배경색)
   • 날짜 클릭 시 해당 일의 주간 뷰로 이동
   • 이전/다음 달 버튼

---

2. 작업 관리 탭 (All Tasks)

화면 레이아웃 (2분할)

좌측: 캘린더 뷰 + 시간대별 작업

• 월간 캘린더 (날짜 선택)
• 선택된 날짜의 시간대별 작업 리스트
• 시간이 배정된 작업만 표시
• 드래그로 시간 조정 가능

우측: 미분류 작업 (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) 표시
  • 여러 개의 집중 모드 탭 동시 열기 가능

탭 UI 구성

[🏠 시각화] [📋 작업] [⏱️ 프로젝트 기획 회의 ✕] [⏱️ 디자인 작업 ✕]

• 탭 스타일:

  • 활성 탭: 밝은 배경, 하단 테두리
  • 비활성 탭: 어두운 배경
  • 고정 탭: 닫기 버튼 없음
  • 동적 탭: 우측에 X 버튼

• 탭 동작:

  • 클릭: 해당 탭으로 전환
  • X 버튼 클릭: 집중 모드 종료 및 탭 닫기
  • 탭 드래그로 순서 변경 (향후)
  • 최대 탭 개수 제한: 10개 (성능 고려)

• 상태 관리:

  • 각 탭의 상태 독립적으로 유지
  • 탭 전환 시 이전 상태 복원 (스크롤 위치, 타이머 등)
  • 새로고침 시 열린 탭 목록 복원 (LocalStorage)

---

집중 모드 진입 플로우

1. 집중 시작 버튼 클릭

• 시각화 탭 또는 작업 관리 탭에서 "집중 시작" 버튼 클릭

2. Task 선택 모달 (중앙 표시 - 현재 탭 위에 오버레이)

모달 구성 요소:

• Task 검색바

  • 실시간 검색 기능
  • 내부 추가 task + 외부 연동 task 모두 검색
  • 자동완성 지원

• Task 리스트

  • 검색 결과 표시
  • 최근 작업한 task 우선 표시
  • Task 출처 표시 (내부/Notion/Todoist 등)

• 타이머 설정

  • 타이머 모드: 25분, 50분, 커스텀 설정
  • 스톱워치 모드: 무제한 측정
  • 라디오 버튼 또는 토글로 선택

• 시작 버튼

  • Task + 타이머/스톱워치 선택 후 집중 모드 시작

3. 집중 모드 진입

세션 제약:

• 한 번에 하나의 집중 세션만 실행 가능
• 이미 진행 중인 세션이 있으면 경고 메시지 표시
• 기존 세션을 종료해야만 새 세션 시작 가능

4. 집중 모드 화면

일반 모드:

• 배경: 야간 도시 풍경 (달과 별)
• 중앙: 큰 타이머/스톱워치 표시
• 상단: 현재 진행 중인 task 이름
• 하단: 음악 플레이어 컨트롤 (Lo-fi)
• 컨트롤 버튼:
  • 종료 (세션 종료 및 저장)
  • 전체화면 버튼 - 클릭 시 전체화면 모드 진입

전체화면 모드 (Fullscreen API):

• document.documentElement.requestFullscreen() 실행
• 브라우저 UI 완전히 숨김 (주소창, 탭 바 등)
• ESC 키 또는 전체화면 종료 버튼으로 일반 모드로 복귀

5. 세션 종료

종료 방식:

• 종료 버튼 클릭: 타이머 정지 및 세션 저장
• 확인 다이얼로그: "진행 중인 타이머를 종료하시겠습니까?"
• 세션 데이터는 자동으로 저장됨 (시작 시간, 종료 시간, 실제 소요 시간)

기술 스택

• Next.js (이미 설정됨)
• TypeScript
• PWA 설정 (manifest.json, service worker)
• WYSIWYG 에디터: Novel / Tiptap / BlockNote 중 선택
• Fullscreen API (집중 모드)
• 향후 추가: 외부 API 연동 (Notion API, Todoist API), 인증 시스템

주요 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에 저장
• 앱 재진입 시 저장된 시간 기준으로 현재 진행 상황 복원
• 브라우저 종료 후 재시작해도 타이머 상태 유지

구현 우선순위

1. Phase 1: Date.now() 기반 시간 계산 (기본)
2. Phase 2: Page Visibility API로 백그라운드 보정
3. Phase 3: Web Worker로 타이머 로직 분리
4. Phase 4: Wake Lock API 추가 (PWA 최적화)

개발 우선순위

1. Phase 1: 기본 Task 작성 및 표시
2. Phase 2: 캘린더 통합 및 스케줄링
3. Phase 3: 집중 모드 구현 (음악, 타이머, UI)
4. Phase 4: 외부 연동 기능
5. Phase 5: 로그인 및 사용자 관리

---

추가 기능 요구사항

음악 재생 정책

• 집중 세션 음악 관리:
  • 집중 세션 종료 시 음악도 자동 종료
  • 집중 세션 진입 시 음악 자동 재생
  • 전역 Audio 객체 사용

작업 블록 색상

• 작업 목록에서 블록 색상 지정 기능:
  • 각 작업마다 고유한 색상 지정 가능
  • 시각화 탭의 캘린더에서 색상으로 작업 구분
  • 기본 색상 팔레트 제공 (8-10가지)
  • 커스텀 색상 선택 옵션

집중 세션 정책

단일 세션 정책

결정: 한 번에 하나의 집중 세션만 실행

이유:

• 진정한 집중을 위해서는 하나의 작업에만 몰입해야 함
• 멀티태스킹 방지로 생산성 향상
• 명확한 작업 추적 및 통계
• UI/UX 단순화

구현:

• 집중 모드 진입 시 기존 세션 체크
• 진행 중인 세션이 있으면 경고 메시지
• 기존 세션 종료 후 새 세션 시작 가능

일시정지 기능

결정: 일시정지 기능 제거

이유:

• 진정한 집중을 위해서는 중단 없이 작업에 몰입해야 함
• 일시정지 남용 방지 (계속 멈췄다 재개하면 집중 효과 감소)
• 긴급 상황 발생 시 세션 종료 후 새 세션 시작 가능
• 명확한 통계 데이터 수집 (순수한 집중 시간만 기록)

PWA 기능

• Progressive Web App 구현:
  • manifest.json 설정
  • Service Worker 구현
  • 오프라인 지원
  • 홈 화면에 추가 기능
  • 푸시 알림 (타이머 종료 시)
  • 앱 아이콘 및 스플래시 스크린

글로벌 단축키

• 시스템 레벨 단축키 설정:
  • 앱 열기 단축키 (예: Cmd+Shift+F)
  • 집중 시작 단축키 (예: Cmd+Shift+S)
  • 현재 세션 종료 단축키
  • 단축키 커스터마이징 설정
  • 브라우저 내 단축키와 구분

다국어 지원 (i18n)

• 기본 언어: 영어

  • 모든 UI 텍스트 기본적으로 영어
  • next-i18next 또는 next-intl 사용

• 지원 언어:

  • 영어 (en) - 기본
  • 한국어 (ko)
  • 일본어 (ja) - 향후
  • 중국어 간체 (zh-CN) - 향후

• 번역 범위:

  • UI 텍스트 (버튼, 레이블, 메뉴)
  • 에러 메시지
  • 알림 메시지
  • 날짜/시간 포맷
  • 숫자 포맷

---

개선 사항 및 이슈

1. Home 탭 - 시간대 표시 이슈 ✅ 완료

문제: 23시 ~ 익일 0시까지의 작업 블록이 시각화 탭에서 제대로 표시되지 않음

해결 방안:

• 날짜 경계를 넘어가는 세션을 2개의 블록으로 분리하여 표시
• 오늘 23:XX ~ 23:59 블록 (오늘 일자에 표시)
• 00:00 ~ 종료 시간 블록 (다음날 일자에 표시, "전날부터 계속" 표시)

구현 내용:

1. 세션 필터링 개선: 오늘 시작한 세션 + 어제 밤 시작해서 오늘까지 이어지는 세션 모두 포함
2. 날짜 경계 감지: crossesMidnight 플래그로 날짜를 넘어가는 세션 식별
3. 블록 분리 로직:
   • 오늘 시작 → 내일 종료: 23:XX ~ 23:59까지만 오늘 표시
   • 어제 시작 → 오늘 종료: 00:00 ~ 종료시간까지 오늘 표시
4. 시간 정보 표시: 0시 블록에 "00:00 - XX:XX (전날부터 계속)" 메시지 표시

변경된 파일:

• components/views/HourlyView.tsx:
  • todaySessions 필터: 어제→오늘 세션 포함하도록 수정
  • getSessionBlocksForHour: 날짜 경계 처리 로직 추가
  • 시간 정보 표시: 0시 블록에 특별 메시지 추가

2. Task List - 컬러 피커 개선 ✅ 완료

개선 사항:

• 색상 갯수 단순화: 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로 외부 클릭 감지 구현
  • 배경색 테마 시스템 적용

3. Task Queue 명칭 변경 ✅ 완료

변경 사항:

• Task Queue → Today's TODO (영어: Today's TODO, 한글: 오늘의 할 일)
• "Task List" 제목 제거 (TaskList.tsx 헤더에서 제거)

변경된 파일:

• messages/en.json: taskQueue, queueEmpty, addToQueue 키 변경
• messages/ko.json: 한글 번역 업데이트
• components/TaskList.tsx: 헤더에서 제목 제거, 버튼만 우측 정렬