planner.sori.studio/TODO.md

# 할 일 목록

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

## 현재 방향

- 기본 레이아웃은 `1페이지 + 우측 정보 패널`을 유지한다.
- `2페이지 펼침 보기`는 비교용 보조 모드로 유지한다.
- 스타일은 Vue + TailwindCSS 기준으로 구현한다.
- D-DAY는 목표 관리 패널과 연결하는 구조로 전환했고, 세부 확장은 계속 진행한다.

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

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

## 2단계: 달력과 이동 기능

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

## 추가 반영 메모

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

## 3단계: 목표와 회고 기능

- [x] 목표 관리 패널 기본 구조를 설계한다.
- [x] 선택한 목표 기준으로 `D-DAY`가 자동 계산되게 한다.
- [x] 우측 요약 패널의 `PREV SNAPSHOT`, `READ NEXT`를 실제 데이터 기반으로 연결한다.
- [ ] 다음날 할 일 자동 제안 규칙을 정리한다.
- [x] 오른쪽 패널에 `D-DAY 사용` 토글과 목표 검색/선택 UI를 추가한다.
- [x] 목표를 여러 개 생성하고 날짜별 대표 목표를 선택할 수 있게 한다.
- [x] 목표 관리 화면을 별도로 분리하고, 플래너에서는 D-DAY 표시 ON/OFF만 제어한다.
- [x] 목표별로 D-DAY 표시 시작일과 종료일을 설정할 수 있게 한다.
- [x] 목표 표시 기간이 서로 겹치면 저장되지 않도록 막는다.
- [ ] 목표 완료 처리와 보관 상태를 구분한다.
- [x] 목표 편집/삭제 UI를 추가한다.
- [ ] 목표 목록 정렬 규칙과 검색 UX를 다듬는다.

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

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

## 추가 반영 메모

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

## 5단계: 확장 화면

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

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

- [x] 회원 가입 / 로그인 방식 후보를 정리한다.
- [x] 사용자 설정 화면에서 닉네임 / 이메일 / 비밀번호 수정 흐름을 분리한다.
- [x] 상단 헤더를 왼쪽 사이드 내비게이션 구조로 재배치한다.
- [x] 본문과 오른쪽 패널이 각각 독립 스크롤되도록 조정한다.
- [x] 사용자별 문서 분리 저장 구조를 설계한다.
- [x] 공유가 아닌 개인 보관용 서비스 흐름으로 요구사항을 정리한다.
- [x] 향후 출력 기능을 위한 인쇄 레이아웃 요구사항을 정리한다.
- [x] A4 가로 기준 2장 출력 모드를 지원한다.
- [x] `1-UP` 세로 인쇄 / `2-UP` 가로 인쇄 기준을 분리한다.
- [ ] 공유를 위한 이미지 저장 기능을 추가한다.
- [x] Docker 배포 구조를 정리한다.
- [x] UGREEN NAS 기준 `docker-compose.yml` 초안을 작성한다.
- [x] 백엔드 기본 스캐폴딩을 추가한다.
- [x] PostgreSQL 전환 초안을 적용한다.
- [x] 로그인 화면 문구와 관리자 정보 노출 지점을 일반 사용자 기준으로 정리한다.
- [x] 비로그인 사용자가 저장 없이 볼 수 있는 3일치 샘플 데모 화면을 추가한다.
- [x] 미완료 항목을 다음 날짜 빈칸으로 이월하는 버튼을 추가한다.
- [x] 이월된 할 일에 배지를 표시하고 원래 시작 날짜를 확인할 수 있게 한다.
- [x] 이월된 할 일을 체크할 때 이전 날짜까지 함께 완료할지 선택하는 정책을 추가한다.
- [x] 이메일 인증 플로우를 설계하고 구현한다.
- [x] 비밀번호 찾기 / 재설정 토큰 흐름을 추가한다.
- [ ] 로그인 및 인증 관련 rate limit / 잠금 정책을 추가한다.
- [x] 로그인 유지 여부를 사용자가 선택할 수 있게 한다.
- [ ] 일정 시간 미사용 시 자동 로그아웃 옵션을 추가한다.
- [ ] 설정 화면에서 현재 기기 로그인 상태와 저장 방식을 안내한다.
- [ ] 서버 세션을 명시적으로 폐기하는 로그아웃 API를 추가한다.
- [ ] 메일 발송 인프라와 발신 도메인 정책을 확정한다.
- [ ] Resend 무료 플랜 대체 수단으로 SES 또는 일반 SMTP 연동 방식을 확정한다.
- [ ] 관리자 페이지에서 계정 비활성화 / 강제 로그아웃 / 삭제 기능을 추가한다.
- [ ] 관리자 페이지에서 사용자별 문서 상세 조회 기능을 추가한다.
- [ ] 관리자 페이지에서 검색 / 정렬 / 필터 UX를 추가한다.

## 메모

- D-DAY는 본문에 직접 입력하는 방식보다, 별도 목표 목록에서 선택한 대표 목표를 보여주는 구조가 더 적합하다.
- 목표가 없는 경우 본문 D-DAY 영역은 숨기고, 오른쪽 패널의 `D-DAY 사용` 메뉴에서 검색/선택하도록 유도한다.
- `TIME TABLE` 드래그는 단순 사각형 선택이 아니라 시간 셀 단위의 연속 선택으로 해석한다.
- 로컬 저장은 비로그인/데모 보조 용도로만 남기고, 로그인 상태에서는 사용자별 서버 저장을 우선한다.
- 최종적으로는 회원 가입 후 각자 자신의 문서를 작성/관리하고, 개인 통계를 확인하며, 특정 날짜 문서를 출력할 수 있어야 한다.
- 실제 인쇄는 HTML/CSS 기반 프린트 레이아웃으로 유지하고, 공유용으로는 별도의 이미지 저장 기능을 추가하는 방향이 적합하다.
- 최종 배포는 UGREEN NAS에서 Docker 기반으로 동작할 예정이며, 포트와 실제 서비스 구성은 추후 확정한다.
- 백엔드는 빠른 목업이면 PocketBase도 가능하지만, 현재 방향상 커스텀 로직과 확장성을 생각하면 전용 Node.js API + DB 조합을 우선 검토한다.
- 현재 백엔드는 `backend/` 폴더에 `Fastify + Drizzle + PostgreSQL` 기준으로 전환 중이다.
- 현재 백엔드는 회원가입, 로그인, 현재 사용자 확인용 기본 인증 API까지 포함한다.
- 현재 백엔드는 사용자별 플래너 단건 저장/조회와 범위 조회 API까지 포함한다.
- 현재 백엔드는 사용자별 목표 목록 조회와 목표 생성 API까지 포함한다.
- 현재는 `docker-compose.yml`로 `postgres + backend + frontend(nginx)` 초안을 올릴 수 있게 정리했다.
- 현재 환경에서는 Docker 데몬이 꺼져 있어 `docker compose build` 실검증은 아직 완료하지 못했다.
- 프론트에는 로그인/회원가입 모달과 현재 사용자 상태 표시가 추가되었다.
- 로그인 상태일 때는 서버 저장을 우선 사용하는 흐름으로 전환 중이다.
- 로그인 전에는 플래너 본문을 사용하지 못하도록 막고, 인증 후 사용 흐름으로 정리했다.
- 현재는 각 날짜 플래너가 대표 목표 하나를 선택해 `D-DAY`에 연결하는 구조다.
- 목표는 별도 GOALS 화면에서 검색/생성/기간 설정을 관리하고, 플래너에서는 표시 ON/OFF만 다룬다.
- 목표가 현재 날짜에 적용되지 않았거나 `D-DAY 사용`이 꺼져 있으면 본문 `D-DAY` 영역은 숨긴다.
- 현재 날짜에 적용된 목표가 있으면 D-DAY는 기본적으로 보이고, 사용자가 해당 날짜에서만 OFF로 끌 수 있다.
- 목표 생성 시 표시 시작일 기본값은 오늘, 표시 종료일 기본값은 목표일로 맞춘다.
- 표시 기간이 다른 진행 중 목표와 겹치면 프론트와 백엔드 모두 저장을 막는다.
- 앱을 새로 열면 마지막 열람 날짜가 아니라 항상 오늘 날짜부터 시작하고, Docker/NAS 컨테이너 시간대는 `Asia/Seoul` 기준으로 맞춘다.
- TASK LABELS는 버튼 묶음 대신 동일한 토글 패턴으로 단순화했다.
- 구현할 때마다 완료된 항목은 체크하고, 큰 결정사항은 `HANDOFF.md`에도 함께 반영한다.
- Resend 무료 플랜은 도메인 수 제약이 있으므로, 실제 인증 메일은 AWS SES 또는 별도 SMTP 서비스 전환을 전제로 설계하는 편이 안전하다.
- 관리자 기능은 읽기 전용 대시보드부터 시작하고, 실제 정리 액션은 권한/감사 로그 정책을 정한 뒤 추가하는 편이 안전하다.
- 관리자 아이디/비밀번호는 README나 HANDOFF에 실제 값으로 남기지 않고, Docker 배포용 비공개 `.env`에서만 관리한다.