planner.sori.studio/TODO.md

할 일 목록

10 Minute Planner를 단계적으로 구현하기 위한 작업 체크리스트다.

현재 방향

• 기본 레이아웃은 1페이지 + 우측 정보 패널을 유지한다.
• 2페이지 펼침 보기는 비교용 보조 모드로 유지한다.
• 스타일은 Vue + TailwindCSS 기준으로 구현한다.
• D-DAY는 목표 관리 패널과 연결되는 기능으로 추후 구현한다.

1단계: 플래너 핵심 상호작용

• 상단 날짜를 시스템 날짜 기준으로 자동 표시한다.
• COMMENT를 자유 입력 가능한 입력 필드로 바꾼다.
• TASKS 각 줄을 텍스트 입력 + 체크박스 토글 가능하게 만든다.
• MEMO 각 줄을 텍스트 입력 가능하게 만든다.
• TIME TABLE을 마우스 드래그로 칠할 수 있게 만든다.
• TIME TABLE 드래그가 여러 줄을 지나가더라도 시간 흐름 기준으로 연속 선택되도록 처리한다.
• 선택된 TIME TABLE 구간을 기준으로 TOTAL TIME을 자동 계산한다.

2단계: 달력과 이동 기능

• 달력에 연/월 이동 기능을 추가한다.
• 선택 날짜를 클릭하면 해당 날짜 플래너 데이터로 이동되게 한다.
• 입력값이 하나라도 있는 날짜에는 달력 하단에 빨간 점 표시를 추가한다.
• PREV DAY / NEXT DAY 이동 시 현재 편집 중 데이터와 연결되도록 정리한다.

추가 반영 메모

• TASKS 왼쪽 라벨은 자유 입력 가능해야 한다.
• 우측 패널에서 TASKS 번호를 한 번에 채우는 빠른 액션이 있어야 한다.
• 달력 상단은 좌우 화살표로 월 이동하는 구조가 더 적합하다.
• 연도 클릭 시 연도 선택 UI가 열려야 한다.
• 오늘 날짜로 즉시 돌아가는 버튼이 필요하다.

3단계: 목표와 회고 기능

• 목표 관리 패널을 설계한다.
• 선택한 목표 기준으로 D-DAY가 자동 계산되게 한다.
• 우측 요약 패널의 PREV SNAPSHOT, READ NEXT를 실제 데이터 기반으로 연결한다.
• 다음날 할 일 자동 제안 규칙을 정리한다.

4단계: 데이터 구조와 저장

• 플래너 데이터 구조를 날짜별 상태 중심으로 정리한다.
• 입력 데이터의 저장 위치를 결정한다.
• 로컬 저장 또는 외부 저장 방식 중 우선 구현 방식을 정한다.
• 입력 상태가 새로고침 후에도 유지되도록 만든다.
• DB 전환 시점을 잡을 수 있도록 저장 레이어를 분리한다.
• 회원 가입 및 로그인 구조를 고려한 사용자별 데이터 모델을 설계한다.
• 회원 가입 및 로그인 구조를 고려한 사용자별 데이터 모델을 설계한다.
• 사용자별 문서 저장/조회 흐름을 정리한다.
• 사용자별 문서 저장/조회 흐름을 정리한다.
• 출력용 문서 포맷과 프린트 흐름을 고려한 데이터 구조를 정리한다.

추가 반영 메모

• 상단 날짜 표시에서 토요일 요일 텍스트만 파란색으로 표시한다.
• 상단 날짜 표시에서 일요일 요일 텍스트만 빨간색으로 표시한다.

5단계: 확장 화면

• 통계 페이지 요구사항을 정리한다.
• 통계 페이지 라우팅 또는 화면 전환 구조를 설계한다.
• 집중 시간, 완료율, 연속 기록 같은 핵심 지표를 정의한다.
• 사용자가 시작일과 종료일을 선택해서 기간별 통계를 볼 수 있게 한다.
• 사용자 개인 통계 화면 기준을 정리한다.

6단계: 계정 및 서비스 확장

• 회원 가입 / 로그인 방식 후보를 정리한다.
• 회원 가입 / 로그인 방식 후보를 정리한다.
• 사용자별 문서 분리 저장 구조를 설계한다.
• 공유가 아닌 개인 보관용 서비스 흐름으로 요구사항을 정리한다.
• 향후 출력 기능을 위한 인쇄 레이아웃 요구사항을 정리한다.
• A4 가로 기준 2장 출력 모드를 지원한다.
• 1-UP 세로 인쇄 / 2-UP 가로 인쇄 기준을 분리한다.
• 공유를 위한 이미지 저장 기능을 추가한다.
• Docker 배포 구조를 정리한다.
• UGREEN NAS 기준 docker-compose.yml 초안을 작성한다.
• 백엔드 기본 스캐폴딩을 추가한다.

메모

• D-DAY는 현재 보류 상태다. 목표 패널 설계 후 연결한다.
• TIME TABLE 드래그는 단순 사각형 선택이 아니라 시간 셀 단위의 연속 선택으로 해석한다.
• 현재는 localStorage로 개발을 진행하지만, 적절한 시점에 DB를 붙여 사용자별 저장 구조로 확장해야 한다.
• 현재 localStorage 저장 로직은 분리 가능한 형태로 정리 중이며, 이후 API/DB adapter로 교체하기 쉽게 유지한다.
• 최종적으로는 회원 가입 후 각자 자신의 문서를 작성/관리하고, 개인 통계를 확인하며, 특정 날짜 문서를 출력할 수 있어야 한다.
• 실제 인쇄는 HTML/CSS 기반 프린트 레이아웃으로 유지하고, 공유용으로는 별도의 이미지 저장 기능을 추가하는 방향이 적합하다.
• 최종 배포는 UGREEN NAS에서 Docker 기반으로 동작할 예정이며, 포트와 실제 서비스 구성은 추후 확정한다.
• 백엔드는 빠른 목업이면 PocketBase도 가능하지만, 현재 방향상 커스텀 로직과 확장성을 생각하면 전용 Node.js API + DB 조합을 우선 검토한다.
• 현재 백엔드는 backend/ 폴더에 Fastify + Drizzle + SQLite 기준 초안이 추가되었다.
• 현재 백엔드는 회원가입, 로그인, 현재 사용자 확인용 기본 인증 API까지 포함한다.
• 현재 백엔드는 사용자별 플래너 단건 저장/조회와 범위 조회 API까지 포함한다.
• 구현할 때마다 완료된 항목은 체크하고, 큰 결정사항은 HANDOFF.md에도 함께 반영한다.