📝 PRD: 업무 일정 기록 타이머

1. 제품 개요

핵심 목적: 업무 몰입도를 높이고, 실시간 타이머와 간트 차트(Gantt Chart)를 결합하여 정교한 시간 추적 및 시각적 피드백 제공.
해결하고자 하는 페인 포인트:
내가 오늘 무엇을 했는지 한눈에 파악하기 어려움.
작업 시간이 겹치거나 누락되는 경우 수동 수정이 번거로움.
반복되는 작업(프로젝트 코드, 작업명 등)을 매번 입력해야 하는 비효율.

2. 사용자 시나리오 (User Flow)

작업 시작: 왼쪽의 ‘작업 프리셋’을 클릭하거나 F8 단축키를 눌러 새 작업을 생성하고 타이머를 시작합니다.
모니터링: 상단의 일간 타임라인(간트 차트)에서 현재 진행 중인 작업의 비중을 실시간으로 확인합니다.
상태 변경: 작업 중 휴식이 필요하면 ‘일시정지’를, 작업이 끝나면 ‘완료’ 버튼을 누릅니다.
시간 수정: 간트 차트의 막대(Bar) 양 끝을 드래그하여 실제 작업 시간과 기록된 시간의 오차를 수정합니다.
기록 검토: 하단의 작업 기록 목록에서 오늘 하루의 총 작업 시간 및 카테고리별 통계를 확인합니다.

3. 상세 기능 요구사항

3.1. 일간 타임라인 (Gantt Chart UI)

시각화: 00:00~24:00 기준의 시간축에 작업별로 랜덤 컬러 막대 표시.
중첩 관리: 동일 시간대에 작업이 겹칠 경우, 자동으로 줄을 나누어 분리 표시(Overlap handling).
인터랙션:
Hover: 작업명, 비고, 시간, 세션 횟수, 누적 시간을 툴팁으로 노출.
Resize: 막대의 좌우 끝을 드래그하여 시작/종료 시간 변경.
Add: 빈 공간을 드래그하여 해당 시간대의 새 작업 추가 팝업 호출.
Edit/Delete: 더블 클릭 시 수정 팝업, 우클릭 시 삭제/수정 메뉴 노출.

3.2. 타이머 및 기록 로직

기록 방식: * 자동: 타이머 실행 시 초 단위로 기록 저장.
수동: 간트 차트 드래그 또는 목록에서 직접 시간 입력.
유효성 검사 (핵심 개선 포인트):
시간 수정 시 기존 작업 세션과 시간이 겹치면 ‘시간 충돌 알림’ 노출.
자동 조정 기능: 충돌 발생 시 기존 기록의 끝에 붙이거나, 5분 내외의 오차는 자동으로 인접 기록에 스냅(Snap)되는 옵션 제공.

3.3. 작업 입력 및 프리셋

입력 항목: 프로젝트 코드, 작업명, 거래처(상세 작업), 업무명, 카테고리(개발, 회의, 분석 등), 비고.
데이터 연동: * 프로젝트 코드 입력 시 로컬 스토리지에 저장된 관련 작업명 자동 완성.
최근 1주일간 사용된 거래처 및 업무명 리스트 제공.
단축키: F8(작업 추가), Enter(목록에서 즉시 입력 및 시작).

4. UI/UX 개선 및 참고사항

유지할 패턴: 영상의 직관적인 3단 구성(프리셋 간트 차트 리스트).
수정 및 보완:
자동 시간 조정: 시간 충돌 시 사용자가 일일이 수정하지 않도록 ‘자동 밀어내기’ 또는 ‘겹침 허용 안 함’ 로직 강화.
목록 직접 입력: ‘새 작업 시작’ 버튼을 누르지 않고도 리스트 최상단 빈칸에서 바로 텍스트 입력 후 엔터를 치면 타이머가 시작되는 UX.
상태 관리: 휴지통(삭제된 작업)과 완료된 작업 목록을 별도 모달로 분리하여 메인 화면의 복잡도 감소.

5. 데이터 구조 (Technical Considerations)

필드명	데이터 타입	설명
`id`	UUID	작업 고유 식별자
`project_code`	String	프로젝트 관리 코드 (A24_… 등)
`task_name`	String	작업의 큰 제목
`sub_task`	String	상세 거래처 또는 세부 업무명
`category`	Enum	개발, 회의, 문서, 분석, 설계 등
`sessions`	Array	`[{start, end}]` 형태의 실제 작업 시간 세그먼트
`total_duration`	Number	총 소요 시간 (분 단위 계산)
`status`	String	active, paused, completed, deleted
`created_at`	Date	기록 날짜

💡 Edge Case 및 추가 고려사항

자정을 넘기는 작업: 밤 11시에 시작해 다음 날 새벽 1시에 끝나는 경우, 데이터를 어떻게 분할하여 보여줄 것인가? (일간 통계 합산 로직)
브라우저 종료/새로고침: 타이머가 돌아가는 중에 브라우저가 꺼지면 기록이 손실되지 않도록 IndexedDB 또는 LocalStorage에 실시간 자동 저장(Autosave) 로직이 필요합니다.
동시 실행 방지: 실수로 두 개 이상의 타이머를 동시에 실행할 경우, 기존 타이머를 자동으로 일시정지 시킬 것인지 아니면 병렬 기록을 허용할 것인지 결정이 필요합니다.
오프라인 모드: 네트워크 연결이 끊긴 상태에서도 기록이 가능하고, 나중에 서버와 동기화하는 로직이 필요한가요?

6. 주간 일정 및 보고서 (Weekly Report)

데이터 그룹화 로직: * 동일한 작업 코드, 작업명, 거래처를 가진 항목들을 하나의 그룹으로 묶어 표시합니다.
각 그룹별로 누적 작업 시간, 시작 일자, 진행 상태를 요약하여 보여줍니다.
주간 스프린트 시각화:
날짜별로 각 작업에 투입된 시간을 한눈에 확인할 수 있는 스프린트 뷰를 제공합니다.
누적 시간 계산 (중요):
작업 프리셋을 통해 추가된 작업은 전체 누적 시간과 별개로, 해당 날짜에 프리셋으로 수행한 시간만 별도로 계산하여 보여주는 로직이 필요합니다.
복사 템플릿:
형식 1 (상세형): 날짜, 작업명, 시작/종료 시간, 비고를 포함한 상세 리스트.
형식 2 (요약형): 작업 코드 및 작업명 중심의 주간 업무 요약.
클립보드 복사 기능을 통해 보고서 작성을 간소화합니다.

7. 건의사항 게시판 (Feedback Board)

익명성 및 접근성:
별도의 복잡한 회원가입이나 로그인 절차 없이 이용 가능한 익명 게시판 형태입니다.
작성 및 수정 로직:
작성: 닉네임, 제목, 내용을 입력하여 게시글을 등록합니다.
수정/삭제: 게시글 작성 시 입력한 비밀번호를 통해 본인 확인 후 수정 및 삭제가 가능하도록 설계합니다.
소통 기능:
각 게시글에 댓글을 달 수 있는 기능을 포함하여 사용자 간 혹은 개발자와의 피드백 루프를 형성합니다.

8. 개인화 설정 및 시스템 관리 (Settings)

테마 커스터마이징:
메인 테마: 기본 검정색 외에 초록, 보라, 빨강, 주황, 청록 등 다양한 프리셋 제공.
색상 세부 설정: 사용자가 직접 RGB 값을 입력하여 상단 바 및 주요 위젯의 색상을 변경할 수 있는 기능을 제공합니다.
버튼 디자인: Vercel의 디자인 철학을 참고하여 깔끔하고 직관적인 파란색 계열의 버튼 디자인을 적용합니다.
사용자 환경 설정:
점심시간 설정: 사용자의 업무 패턴에 맞춰 점심시간을 설정하고 타임라인에 반영합니다.
자동 완성 및 단축키: 작업명 자동 완성 활성화 여부 및 단축키 목록 확인/설정 기능을 제공합니다.
데이터 관리:
작업 기록을 JSON 파일 등으로 내보내기(Export)하거나 가져오기(Import) 할 수 있는 기능을 포함합니다.

9. UI/UX 및 모바일 반응형 요구사항

반응형 디자인:
데스크톱뿐만 아니라 모바일 환경에서도 최적화된 레이아웃을 제공합니다.
모바일 타임라인 특화 UX:
완료된 작업은 회색 글씨와 취소선 처리를 통해 진행 중인 작업과 명확히 구분합니다.
좁은 화면에서도 간트 차트의 흐름을 파악할 수 있도록 가로 스크롤 또는 요약 뷰를 지원합니다.
작업 목록 필터링:
완료된 작업을 목록에서 숨기거나 보여줄 수 있는 토글(Toggle) 기능을 추가하여 리스트의 가독성을 높입니다.

10. 기술적 고려사항 (업데이트)

데이터 저장소 확장:
기본적으로는 로컬 스토리지(LocalStorage)에 약 한 달간의 데이터를 저장합니다.
저장 용량이 한계에 도달할 경우, 사용자에게 별도의 데이터베이스(DB) 연결을 권장하거나 데이터를 백업하도록 안내하는 알림 로직이 필요합니다.
PWA(Progressive Web App):
모바일에서 앱처럼 설치하여 사용할 수 있도록 PWA 기능을 지원하여 접근성을 높입니다.

💡 추가 고려사항 및 질문 (Edge Cases)

데이터 충돌 및 동기화: 로컬 스토리지 기반일 때, 여러 브라우저나 기기에서 동시에 접속할 경우 데이터 동기화를 어떻게 처리할 것인가요? (Firebase 등을 활용한 실시간 동기화 고려 여부)
게시판 보안: 익명 게시판의 경우 스팸이나 부적절한 게시글을 필터링하기 위한 최소한의 방어 기제(예: CAPTCHA, 금칙어 설정)가 필요한가요?
다국어 지원: 현재는 한국어 중심이나, 향후 글로벌 사용자를 위해 언어 설정을 분리할 계획이 있으신가요?
백업 알림 기준: 로컬 스토리지 용량의 몇 % 이상 사용 시 사용자에게 DB 전환 권고 알림을 띄울 것인지에 대한 기준 설정이 필요합니다.