🚀 개발 로드맵 및 단계별 프롬프트

Step 1: 프로젝트 기초 설정 및 전체 레이아웃 (Layout & Theme)

이 단계에서는 프로젝트의 뼈대를 잡고, PRD에서 정의한 3단 구성(프리셋

간트 차트

리스트) UI를 구현합니다.

Prompt: > “React와 Tailwind CSS를 사용하여 ‘업무 시간 관리 타이머’ 앱의 기본 레이아웃을 작성해줘.

1. 화면은 크게 3단 구성으로 나눈다: 왼쪽(작업 프리셋), 중앙(일간 타임라인/간트 차트), 하단(작업 기록 리스트).
2. 전체적인 UI는 Vercel 디자인 스타일을 참고하여 깔끔하고 미니멀하게 설계해줘.
3. 상단에는 ‘주간 일정’, ‘건의사항’, ‘설정’ 메뉴로 이동할 수 있는 네비게이션 바를 만든다.
4. 테마 색상을 변경할 수 있는 구조(CSS 변수 사용)로 설계해줘.

[결정 필요 사항] 개발을 시작하기 전에 다음 사항을 나에게 물어보고 확인해줘:

• 상태 관리를 위해 Context API, Zustand, Redux 중 어떤 것을 선호하는가?
• 아이콘 라이브러리는 Lucide-React와 FontAwesome 중 무엇을 사용할까?”

---

Step 2: 핵심 타이머 로직 및 데이터 구조 (Core Logic & Data)

실제 타이머가 작동하고 작업 기록이 로컬 스토리지에 저장되는 엔진 부분을 개발합니다.

Prompt: > “앞서 만든 레이아웃에 실제 타이머 로직과 데이터 구조를 입혀줘.

1. 작업 데이터 구조는 id, project_code, task_name, category, sessions(start/end), status 등을 포함한다.
2. 타이머 시작, 일시정지, 완료 기능을 구현하고, 완료 시 하단 리스트에 자동으로 추가되게 해줘.
3. 모든 데이터는 localStorage에 저장되어 페이지를 새로고침해도 유지되어야 해.
4. F8 단축키를 누르면 새 작업을 추가하는 팝업이 뜨도록 구현해줘.

[결정 필요 사항] 다음 사항에 대해 의견을 물어봐줘:

• 데이터 저장 시 LocalStorage 외에 IndexedDB를 고려할 필요가 있을까?
• 프로젝트 코드 입력 시 자동 완성 기능을 위한 더미 데이터를 미리 넣어둘까?”

---

Step 3: 일간 간트 차트 시각화 및 인터랙션 (Gantt Chart)

가장 난이도가 높은 시간축 시각화와 드래그 기능을 구현합니다.

Prompt: > “중앙 영역에 00:00부터 24:00까지 표시되는 ‘일간 타임라인(간트 차트)’을 구현해줘.

1. 저장된 작업 세션들을 시간축에 맞춰 컬러 막대(Bar)로 표시해줘.
2. 핵심 기능: 막대의 양 끝을 드래그하여 작업 시작/종료 시간을 수정할 수 있어야 해.
3. 동일한 시간대에 작업이 겹칠 경우, 자동으로 줄을 나누어 중첩 표시해줘.
4. 시간 수정 시 기존 작업과 겹치면 ‘시간 충돌 알림’을 띄우거나 자동으로 시간을 조정하는 로직을 고려해줘.

[결정 필요 사항] 다음 사항을 확인해줘:

• 드래그 인터랙션을 위해 dnd-kit이나 react-draggable 같은 라이브러리를 사용할까, 아니면 순수 JS로 구현할까?
• 시간축의 최소 단위(Snap)를 1분, 5분, 15분 중 무엇으로 설정할까?”

---

Step 4: 주간 보고서 및 복사 템플릿 (Weekly Report)

데이터를 그룹화하여 주간 업무 내용을 요약하고 복사하는 기능을 개발합니다.

Prompt: > “주간 일정 페이지를 개발해줘.

1. 로컬 스토리지의 데이터를 분석하여 작업 코드 + 작업명 + 거래처가 동일한 항목들을 그룹화해줘.
2. 각 그룹별로 주간 누적 작업 시간과 진행 상태를 요약해서 리스트로 보여줘.
3. PRD에 명시된 ‘형식 1(상세)’과 ‘형식 2(요약)’ 템플릿으로 텍스트를 복사할 수 있는 기능을 만들어줘.
4. 프리셋으로 추가된 작업은 해당 날짜의 누적 시간만 별도로 계산하는 로직을 적용해줘.

[결정 필요 사항] 다음을 물어봐줘:

• 주간 보고서의 데이터를 차트(예: Recharts)로 시각화하는 기능도 추가할까?
• 복사 템플릿의 형식을 사용자가 직접 커스텀할 수 있게 할까?”

---

Step 5: 개인화 설정 및 게시판 (Settings & Board)

익명 게시판과 상세 테마 설정, 모바일 최적화를 마무리합니다.

Prompt: > “마지막으로 설정 페이지와 건의사항 게시판을 완성해줘.

1. 설정: 사용자가 RGB 값을 입력해 상단 바 색상을 변경하고 점심시간을 설정할 수 있게 해줘.
2. 게시판: 익명으로 글을 쓰고 댓글을 달 수 있는 기능을 구현해. 수정/삭제 시에는 비밀번호 확인 절차를 넣어줘.
3. 반응형: 모바일 화면에서는 타임라인이 요약 뷰로 보이고, 완료된 작업은 회색 취소선으로 표시되게 해줘.
4. 전체 앱을 PWA로 설정해서 모바일에서도 설치 가능하게 해줘.

[결정 필요 사항] 다음을 확인해줘:

• 건의사항 데이터를 저장할 간단한 백엔드(예: Firebase) 연동을 지금 진행할까?
• 앱 전체에 적용할 다국어(i18n) 지원이 필요한가?”