Fix: Full N-depth recursive subtask tree rendering in main list, universal custom context menu on all subtask levels, and bidirectional realtime sync

AGENTS.md

@@ -8,24 +8,21 @@
 
 사용자의 핵심 요구사항:
 1. **TickTick 스타일 To-Do 리스트 독립 웹앱**:
-   - 체크리스트는 **메인 - 하위(Sub-task)** 계층 구조를 갖춤.
-   - **적응형(Adaptive) 와이드 메모장**: 우측 패널의 대부분을 메모장이 차지하며, 작성한 마크다운이 실제 웹 문서처럼 미려한 GUI 형태로 렌더링(Preview & Live Checkbox)되어야 함.
+   - 체크리스트는 **메인 - 하위(Sub-task)** 2단계 계층 구조를 갖추며, 양쪽 패널 간 1:1 실시간 동기화.
+   - **적응형(Adaptive) 와이드 메모장**: 우측 패널의 대부분을 메모장이 차지하며, 작성한 마크다운이 실제 웹 문서처럼 미려한 GUI 형태로 렌더링(Preview & Interactive Checkbox) 지원.
+   - **인라인 즉시 수정 UX**: 상단 프로젝트 제목 및 태스크 제목을 더블클릭/클릭으로 즉시 수정 가능.
 2. **셀프호스팅 & 프라이버시 중심 멀티유저**:
    - SNS 형태가 아닌 개인별 프라이버시가 완벽히 보장되는 독립 멀티유저 플랫폼.
-   - Docker 배포 지원 (PostgreSQL 포함).
+   - Docker 배포 지원 (PostgreSQL 16 포함, Dockerfile & docker-compose.yml 완비).
 3. **외부 플랫폼 연동 & Import**:
-   - TickTick 등 외부 플랫폼에서 내보내기한 CSV 및 ICS(iCalendar) 파일 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 컨테이너로 동작.
+5. **디자인 시스템 & 반응형 웹앱 UX**:
+   - TickTick / OneUI / Vercel 디자인 언어.
+   - **네이티브 웹앱 느낌의 커스텀 우클릭 컨텍스트 메뉴(ContextMenu)** 지원.
+   - 부드러운 사이드바 애니메이션 및 화면 테마/언어 컨트롤 잘림 방지.
 
 ---
 
@@ -40,14 +37,15 @@ src/
 │   └── api/ (auth, lists, tasks, import, dav)
 ├── components/
 │   ├── layout/
-│   │   ├── AppShell.tsx               ← 3-Panel 메인 컨테이너
-│   │   └── Sidebar.tsx                ← 프로젝트 목록, 언어 셀렉터, 테마 토글, 유저 메뉴
+│   │   ├── AppShell.tsx               ← 3-Panel 메인 컨테이너 (실시간 하위 태스크 & 인라인 동기화)
+│   │   └── Sidebar.tsx                ← 프로젝트 목록, 언어 셀렉터, 테마 토글, 유저 프로필 팝오버(Import 내장)
 │   ├── tasks/
-│   │   ├── TaskList.tsx               ← 중앙 체크리스트 (하위 태스크 아코디언, 빠른 추가)
-│   │   ├── TaskDetail.tsx             ← 우측 상세 패널 (컴팩트 메타바 + 와이드 메모장 + 하단 하위할일)
+│   │   ├── TaskList.tsx               ← 중앙 체크리스트 (인라인 제목 수정, 하위 태스크 추가, 우클릭 메뉴)
+│   │   ├── TaskDetail.tsx             ← 우측 상세 패널 (TickTick 스타일 메타바 + 와이드 메모장 + 하단 하위할일)
 │   │   └── MarkdownNoteEditor.tsx     ← 👁️ Preview / ✏️ Edit 탭, 마크다운 툴바, 인터랙티브 체크박스
 │   └── ui/
-│       └── LanguageSelector.tsx       ← OneUI/Vercel 스타일 커스텀 글래스모피즘 언어 팝오버
+│       ├── LanguageSelector.tsx       ← OneUI/Vercel 스타일 커스텀 글래스모피즘 언어 팝오버
+│       └── ContextMenu.tsx            ← 네이티브 웹앱 커스텀 우클릭 컨텍스트 메뉴
 └── lib/
     ├── i18n/ (en, ko, ja 사전 및 useI18n 훅)
     ├── mockData.ts                    ← Demo 모드용 LocalStorage Store
@@ -58,14 +56,16 @@ src/
 
 ## 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 팝오버 적용.
+- **`checkpoint-v1.0`**: 기본 Full-Stack 기반 시점
+- **`checkpoint-v2.0`**: i18n(EN/KO/JA), 3-Way Theme(System/Light/Dark), Demo Mode 탑재
+- **`checkpoint-v2.1`**: 리치 마크다운 GUI 렌더러(MarkdownNoteEditor), 적응형 와이드 메모장
+- **`checkpoint-v2.2`**: 하위 태스크 실시간 동기화 & 인라인 즉시 수정 UX
+- **`checkpoint-v3.0`**: **(현재 최신)** 부드러운 사이드바 애니메이션, 테마 버튼 잘림 완벽 해결, Import 기능 프로필 메뉴 이동, 커스텀 웹앱 우클릭 컨텍스트 메뉴, TickTick 스타일 우측 상세 탭 완비
 
 ---
 
-## 4. 향후 작업 가이드 (For Next Agents)
+## 4. 개발 규칙 및 주의사항
 
-1. **메모장 우선 원칙**: 메모장은 항상 상세 패널의 메인 공간(`flex: 1`)을 차지하도록 유지할 것.
-2. **마크다운 상호작용**: Preview 모드에서 `- [ ]` 체크박스 클릭 시 원본 텍스트의 체크 상태가 토글되는 기능을 유지할 것.
-3. **i18n & 테마 무결성**: 새로운 텍스트는 `src/lib/i18n`의 en, ko, ja 사전에 모두 추가할 것.
+1. **메모장 우선 원칙**: 우측 상세 탭에서 메모장은 항상 메인 영역(`flex: 1`)을 차지하도록 유지할 것.
+2. **웹앱 인터랙션**: 브라우저 기본 컨텍스트 메뉴 대신 `ContextMenu.tsx`를 통해 앱스러운 UX를 유지할 것.
+3. **i18n 무결성**: 텍스트 추가 시 `src/lib/i18n`의 en, ko, ja 사전에 모두 추가할 것.