checkflow/AGENTS.md

CheckFlow — Agent Handbook & Project History

이 문서는 CheckFlow 프로젝트의 전체 개발 내역, 사용자 요구사항, 의사결정 기록, 기술 아키텍처 및 트러블슈팅을 보존하여 향후 작업하는 모든 AI 에이전트와 개발자가 일관되게 작업을 이어갈 수 있도록 작성되었습니다.

---

1. 프로젝트 개요 & 핵심 요구사항

사용자의 핵심 요구사항:

1. TickTick 스타일 To-Do 리스트 독립 웹앱:
   • 체크리스트는 메인 - 하위(Sub-task) 계층 구조를 갖춤.
   • 적응형(Adaptive) 와이드 메모장: 우측 패널의 대부분을 메모장이 차지하며, 작성한 마크다운이 실제 웹 문서처럼 미려한 GUI 형태로 렌더링(Preview & Live Checkbox)되어야 함.
2. 셀프호스팅 & 프라이버시 중심 멀티유저:
   • SNS 형태가 아닌 개인별 프라이버시가 완벽히 보장되는 독립 멀티유저 플랫폼.
   • Docker 배포 지원 (PostgreSQL 포함).
3. 외부 플랫폼 연동 & Import:
   • TickTick 등 외부 플랫폼에서 내보내기한 CSV 및 ICS(iCalendar) 파일 Import 지원.
   • Galaxy(Android) 폰 연동: DAVx⁵ 앱을 통한 CalDAV/CardDAV (/api/dav) 동기화 지원.
4. PWA (Progressive Web App):
   • 모바일/데스크톱 설치 가능 및 오프라인 캐싱 지원.
5. 디자인 시스템:
   • TickTick 급의 심플함 + OneUI / Material You / Vercel 스타일의 직관적이고 미려한 UI.
   • 3-Panel 반응형 레이아웃 (사이드바 - 태스크 목록 - 와이드 상세 메모 패널).
6. 추가 요구사항 (Phase 2 & Phase 3):
   • 다국어 (i18n): 영어(기본) → 한국어 → 일본어 순서 지원 (커스텀 팝오버 UI 탑재).
   • 테마 모드: 시스템(System) / 라이트(Light) / 다크(Dark) 3-Way 토글.
   • DB 없는 데모/미리보기 모드: 로컬 환경에서 DB 구동 없이도 UI/UX 및 모든 기능을 즉시 시연 및 확인할 수 있는 Demo 모드 (/demo, LocalStorage 연동).
   • 인프라: Nginx Proxy Manager (NPM)로 역방향 프록시할 예정이므로 자체 SSL/Nginx 없이 포트 3000 컨테이너로 동작.

---

2. 주요 컴포넌트 구조

src/
├── app/
│   ├── layout.tsx / page.tsx / providers.tsx
│   ├── demo/page.tsx                  ← DB 연결 없이 LocalStorage 기반으로 구동되는 완전한 데모 페이지
│   ├── login/page.tsx / register/page.tsx
│   └── api/ (auth, lists, tasks, import, dav)
├── components/
│   ├── layout/
│   │   ├── AppShell.tsx               ← 3-Panel 메인 컨테이너
│   │   └── Sidebar.tsx                ← 프로젝트 목록, 언어 셀렉터, 테마 토글, 유저 메뉴
│   ├── tasks/
│   │   ├── TaskList.tsx               ← 중앙 체크리스트 (하위 태스크 아코디언, 빠른 추가)
│   │   ├── TaskDetail.tsx             ← 우측 상세 패널 (컴팩트 메타바 + 와이드 메모장 + 하단 하위할일)
│   │   └── MarkdownNoteEditor.tsx     ← 👁️ Preview / ✏️ Edit 탭, 마크다운 툴바, 인터랙티브 체크박스
│   └── ui/
│       └── LanguageSelector.tsx       ← OneUI/Vercel 스타일 커스텀 글래스모피즘 언어 팝오버
└── lib/
    ├── i18n/ (en, ko, ja 사전 및 useI18n 훅)
    ├── mockData.ts                    ← Demo 모드용 LocalStorage Store
    ├── auth.ts / prisma.ts

---

3. 롤백 포인트 (Checkpoints)

• checkpoint-v1.0 (backup-v1.0): 기본 Next.js 16 + Prisma + NextAuth + CardDAV 기반 구조.
• checkpoint-v2.0: i18n(EN/KO/JA), 3-Way Theme(System/Light/Dark), Demo Mode 탑재.
• checkpoint-v2.1: (현재 최신) 리치 마크다운 GUI 렌더러(MarkdownNoteEditor), 적응형 와이드 메모장 레이아웃, 커스텀 LanguageSelector 팝오버 적용.

---

4. 향후 작업 가이드 (For Next Agents)

1. 메모장 우선 원칙: 메모장은 항상 상세 패널의 메인 공간(flex: 1)을 차지하도록 유지할 것.
2. 마크다운 상호작용: Preview 모드에서 - [ ] 체크박스 클릭 시 원본 텍스트의 체크 상태가 토글되는 기능을 유지할 것.
3. i18n & 테마 무결성: 새로운 텍스트는 src/lib/i18n의 en, ko, ja 사전에 모두 추가할 것.