docs: Sync documentation from private repository

PROJECT_STRUCTURE.md

@@ -1,10 +1,21 @@
 # 라온누리 - 프로젝트 구조
 
-> 최종 업데이트: 2025-11-28 (가격정책 페이지 추가)
+> 최종 업데이트: 2025-12-01 (글쓰기 모드 선택 기능)
 
 초등학생을 위한 창작 글쓰기 교육 플랫폼
 
-**최신 업데이트** (2025-11-28):
+**최신 업데이트** (2025-12-01):
+- ✍️ **글쓰기 모드 선택 기능** (`/write`)
+  - **모드 선택 화면**: 글부터 쓰기 / 그림부터 올리기 선택
+  - **URL 파라미터**: `?mode=wrt` (글부터), `?mode=img` (그림부터)
+  - **ImageDropzone 컴포넌트**: 드래그앤드롭 이미지 업로드, 미리보기
+  - **ImageFirstLayout 컴포넌트**: 이미지+에디터 2컬럼 레이아웃
+  - **pendingImageStore 유틸리티**: IndexedDB 기반 이미지 임시 저장 (새로고침 유지)
+  - **캐릭터 이미지**: startWriting.png, uploadImage.png
+  - **카드 디자인**: 그라데이션 배경, 상단 장식 바, 호버 애니메이션
+  - **다국어 지원**: modeSelection namespace (ko/en/ja)
+
+**업데이트** (2025-11-28):
 - 💰 **가격정책 페이지 추가** (`/pricing`)
   - **4개 플랜**: Free, Classroom, Academy, School
   - **월간/연간 토글**: 연간 결제 시 20% 할인
@@ -467,6 +478,8 @@
 | **VisibilitySelector** | `VisibilitySelector.tsx` | 🆕 **공개 범위 선택** (PUBLIC/TEAM/PRIVATE, RadioCard 기반) | ✅ 완료 |
 | **VisibilityBadge** | `VisibilityBadge.tsx` | 🆕 **공개 범위 배지** (아이콘 + 라벨, 색상별 구분) | ✅ 완료 |
 | **InteractiveImageViewer** | `InteractiveImageViewer.tsx` | 🆕 **인터랙티브 이미지 뷰어** (왜곡 효과, 애니메이션, 오디오 반응) | ✅ 완료 |
+| **ImageDropzone** | `ImageDropzone.tsx` | 🆕 **이미지 드롭존** (드래그앤드롭 업로드, 미리보기, IndexedDB 저장) | ✅ 완료 |
+| **ImageFirstLayout** | `ImageFirstLayout.tsx` | 🆕 **이미지 우선 레이아웃** (이미지+에디터 2컬럼, 반응형) | ✅ 완료 |
 | **GenerateImageDialog** | `GenerateImageDialog.tsx` | 🆕 **AI 이미지 생성 Dialog** (4단계 플로우: 장면 추출 → 장면 선택 → 이미지 생성 → 결과 표시) | ✅ 완료 |
 | ~~**ScoreDisplay**~~ | ~~`ScoreDisplay.tsx`~~ | ~~실시간 피드백 점수 표시~~ | ❌ 삭제됨 (하이라이트로 대체) |
 | ~~**SpellingErrorDisplay**~~ | ~~`SpellingErrorDisplay.tsx`~~ | ~~맞춤법 오류 표시~~ | ❌ 삭제됨 (하이라이트로 대체) |
@@ -787,6 +800,7 @@ firebase functions:log --only cleanupExpiredReservations
 | **Pattern Cache Manager** | `patternCacheManager.ts` | 🆕 **패턴 분석 localStorage 캐싱** (LRU 최대 10개, 캐시 통계) | ✅ 완료 |
 | **Image Storage** | `imageStorage.ts` | 🆕 **Firebase Storage 이미지 업로드** (base64 → Storage, 공개 URL 반환) | ✅ 완료 |
 | **Area Limit** | `areaLimit.ts` | 🆕 **이미지 왜곡 영역 제한** (점수 기반 해금 로직, 좌표 계산) | ✅ 완료 |
+| **Pending Image Store** | `pendingImageStore.ts` | 🆕 **이미지 임시 저장** (IndexedDB 기반, 새로고침해도 유지, CRUD 메서드) | ✅ 완료 |
 
 ---
 

ROADMAP.md

@@ -1,6 +1,6 @@
 # 라온누리 - 개발 로드맵
 
-> 최종 업데이트: 2025-11-28 (댓글 시스템 구현 완료)
+> 최종 업데이트: 2025-12-01 (글쓰기 모드 선택 기능 추가)
 
 초등학생을 위한 창작 글쓰기 교육 플랫폼 개발 계획
 
@@ -126,6 +126,7 @@
 | **이미지 업로드/선택 플로우 개편** | **/imageUpload 페이지 신규 생성 (AI 생성/직접 업로드 선택), WritingManager.uploadUserImage() 메서드 추가 (클라이언트 사이드 Canvas API 리사이즈, 1920x1080 최대, 85% 품질, Firebase Storage 업로드), WritingManager.analyzeWritingBackground() 메서드 추가 (fire-and-forget 패턴), Write 페이지 저장 플로우 변경 (저장 → 백그라운드 분석 → /imageUpload 리다이렉트, GenerateImageDialog 제거), Interaction 페이지 리다이렉트 로직 추가 (이미지 없으면 /imageUpload로 자동 이동), authStore.isLoading 초기값 변경 (false → true, auth 초기화 완료 전 리다이렉트 방지), 드래그앤드롭 파일 업로드 지원, 파일 검증 (JPEG/PNG/WebP, 5MB 제한), 다국어 지원 (imageUpload namespace, ko/en/ja 15개 키)** | **2025-11-28** |
 | **가격정책 페이지** | **/pricing 페이지 신규 생성 (4개 플랜: Free, Classroom, Academy, School), 월간/연간 결제 토글 (20% 할인), 기능 비교 테이블, FAQ 섹션, 다국어 지원 (pricing namespace, ko/en/ja 40개 키), PricingCard 컴포넌트, Navbar "요금제" 메뉴 추가** | **2025-11-28** |
 | **댓글 시스템** | **Comment 데이터 모델 (계층 구조, 반응형), CommentList 컴포넌트 (댓글/답글 표시, 작성/수정/삭제, 낙관적 업데이트), CommentItem (아바타, 시간, 메뉴), CommentInput (자동 높이 조절), API Routes 구현 (GET/POST/PUT/DELETE), 서버 권한 체크 (작성자/글작성자/팀소유자), 실시간 업데이트 (SWR 또는 리패치)** | **2025-11-28** |
+| **글쓰기 모드 선택 기능** | **모드 선택 화면 추가 (글부터 쓰기 / 그림부터 올리기), URL 파라미터로 모드 관리 (?mode=wrt\|img), ImageDropzone 컴포넌트 (드래그앤드롭 이미지 업로드, 미리보기), ImageFirstLayout 컴포넌트 (이미지+에디터 2컬럼 레이아웃), pendingImageStore 유틸리티 (IndexedDB 기반 이미지 임시 저장, 새로고침해도 유지), 캐릭터 이미지 추가 (startWriting.png, uploadImage.png), 카드 디자인 개선 (그라데이션 배경, 상단 장식 바, 제목 배지, 호버 애니메이션, 이미지 크기 증가 180→240px), 다크 모드 지원, 다국어 지원 (modeSelection namespace, ko/en/ja)** | **2025-12-01** |
 
 ### 🚧 진행 중