docs: Sync documentation from private repository

PROJECT_STRUCTURE.md

@@ -1,10 +1,14 @@
 # 라온누리 - 프로젝트 구조
 
-> 최종 업데이트: 2025-11-10 (5단계 보안 레벨 시스템, User 타입 최소화)
+> 최종 업데이트: 2025-11-10 (다중 글조각 관리, 테마 레시피 추가)
 
 초등학생을 위한 창작 글쓰기 교육 플랫폼
 
 **주요 업데이트** (2025-11-10):
+- 📝 다중 글조각 관리 시스템 (DraftManager, SavedDraftsDialog)
+- 💾 강화된 자동 저장 (2초 debounce, 저장 상태 표시)
+- 🎨 테마 슬롯 레시피 추가 (Dialog, Select 자동 배경색)
+- 📋 TopicSelector 그룹핑 (자유/팀/개인 주제 구분, 팀 이름 표시)
 - 🔐 5단계 보안 레벨 시스템 (팀별 보안 정책 선택)
 - 📦 User 타입 분리 (FirestoreUser / User)
 - 🏷️ 닉네임 저장 위치 변경 (team.members[uid].nickname)
@@ -20,7 +24,7 @@
 |-------|------|------|---------|
 | **랜딩 페이지** | `/` | 서비스 소개 및 홍보 (비로그인 전용) | Hero, Features, How It Works, CTA, Footer<br>로그인 시 `/home`으로 자동 리다이렉트 |
 | **유저 홈** | `/home` | 인증된 사용자 대시보드 | 환영 메시지, 빠른 시작 대시보드, 최근 활동<br>비로그인 시 `/`로 자동 리다이렉트<br>정식 계정은 "내 팀" 카드 추가 표시 |
-| **글쓰기** | `/write` | Tiptap 기반 순수 텍스트 에디터 + 주제 선택 | 주제 선택 (자유 주제/개인 주제)<br>제목 입력 (Editable), 순수 텍스트 에디터 (포맷팅 없음)<br>실시간 글자수/단어수, 자동 저장 (LocalStorage 3초마다)<br>템플릿 미리채우기 (제목/내용), Firestore 저장<br>비로그인도 접근 가능 (저장 시 로그인 유도) |
+| **글쓰기** | `/write` | Tiptap 기반 순수 텍스트 에디터 + 주제 선택 | 주제 선택 (자유 주제/개인 주제/팀 주제)<br>제목 입력 (Editable), 순수 텍스트 에디터 (포맷팅 없음)<br>🆕 **다중 글조각 관리** (최대 10개), "새 글쓰기" / "저장된 글조각" 버튼<br>🆕 **강화된 자동 저장** (2초 debounce, 저장 상태 표시: 저장 중/저장됨)<br>템플릿 미리채우기 (제목/내용), Firestore 저장<br>비로그인도 접근 가능 (저장 시 로그인 유도) |
 | **테스트** | `/test` | 팀 코드 시스템 테스트 페이지 | 팀 코드 생성/검증 테스트<br>팀/학생 생성 테스트<br>학생 로그인 테스트<br>authStore 상태 확인 |
 | **팀 목록** | `/team` | 내가 만든 팀 목록 (정식 계정 전용) | 팀 카드 그리드, 팀 정보 (코드, 멤버 수, 보안 설정)<br>"새 팀 만들기" 버튼 |
 | **팀 생성** | `/team/create` | 새 팀 만들기 (정식 계정 전용) | 팀 이름 입력, 팀 코드 자동 생성<br>🆕 **5단계 보안 레벨 선택** (RadioCard, 애니메이션)<br>🆕 **명단 관리 (Level 2/4)**: TagsInput으로 Enter/쉼표 입력<br>생성 후 `/team/[teamId]`로 이동 |
@@ -122,18 +126,24 @@
 | 컴포넌트 | 파일명 | 설명 | 상태 |
 |---------|--------|------|------|
 | **WritingEditor** | `WritingEditor.tsx` | Tiptap 기반 순수 텍스트 에디터 | ✅ 완료 |
-| **TopicSelector** | `TopicSelector.tsx` | 주제 선택 드롭다운, 팀/개인 주제 배지 표시 | ✅ 완료 |
+| **TopicSelector** | `TopicSelector.tsx` | 🆕 주제 선택 드롭다운 (그룹핑, 팀 이름 표시) | ✅ 완료 |
 | **CreateTopicDialog** | `CreateTopicDialog.tsx` | 개인 주제 생성 다이얼로그 (태그 입력 UI) | ✅ 완료 |
 | **CreateTeamTopicDialog** | `CreateTeamTopicDialog.tsx` | 팀 주제 생성 다이얼로그 (템플릿 지원) | ✅ 완료 |
+| **SavedDraftsDialog** | `SavedDraftsDialog.tsx` | 🆕 저장된 글조각 목록 다이얼로그 (불러오기/삭제) | ✅ 완료 |
 
 **주요 기능**:
 - ✅ 순수 텍스트 입력 (포맷팅 없음)
 - ✅ 초등학생 친화적 단순 인터페이스
 - ✅ 실시간 글자 수/단어 수 카운터
-- ✅ 자동 저장 (LocalStorage)
+- ✅ 🆕 **다중 글조각 관리** (최대 10개, FIFO 방식)
+- ✅ 🆕 **강화된 자동 저장** (2초 debounce, localStorage)
+- ✅ 🆕 **저장 상태 표시** (저장 중 → 저장됨 → 시간 표시)
+- ✅ 🆕 "새 글쓰기" 버튼 (현재 글 초기화)
+- ✅ 🆕 "저장된 글조각" Dialog (목록, 미리보기, 불러오기/삭제)
+- ✅ 🆕 **주제 선택 그룹핑** (자유/팀/개인 주제 구분, ItemGroup 사용)
+- ✅ 🆕 **팀 주제에 팀 이름 표시** (어느 팀의 주제인지 명확히 표시)
 - ✅ 주제 선택 (자유 주제/팀 주제/개인 주제)
 - ✅ 주제 정보 표시 (설명, 키워드, 예시 질문)
-- ✅ 팀/개인 주제 배지 표시 (teal/pink)
 - ✅ 템플릿 미리채우기 (제목/내용)
 - ✅ 개인 주제 생성 (카테고리, 난이도, 키워드, 템플릿 설정)
 - ✅ 팀 주제 생성 (팀 소유자 전용, 팀 관리 페이지)
@@ -182,6 +192,7 @@
 | **ManagerBase** | `ManagerBase.ts` | 공통 기능 (authenticatedFetch, API 호출, 캐싱) | ✅ 완료 |
 | **TeamManager** | `TeamManager.ts` | 팀 관련 API 호출 (생성, 조회, 수정, 삭제, 멤버 관리) | ✅ 완료 |
 | **UserManager** | `UserManager.ts` | 사용자 관련 API 호출 (생성, 조회, 수정, 닉네임 관리) **[NEW]** | ✅ 완료 |
+| **DraftManager** | `DraftManager.ts` | 🆕 글조각 관리 (localStorage 기반, 최대 10개, CRUD) | ✅ 완료 |
 | ~~**StudentManager**~~ | ~~`StudentManager.ts`~~ | ~~학생 관련 API 호출~~ | ⚠️ Deprecated (UserManager로 대체) |
 | **WritingManager** | `WritingManager.ts` | 글쓰기 관련 비즈니스 로직 (CRUD, 통계) | ✅ 완료 |
 | **TopicManager** | `TopicManager.ts` | 주제 관련 비즈니스 로직 (CRUD, 템플릿 처리) | ✅ 완료 |
@@ -222,6 +233,7 @@
 |------|--------|------|------|
 | **Team 타입** | `team.ts` | 🆕 팀 데이터 모델 (members Map), **TeamSecurityLevel Enum (1-5)** | ✅ 완료 |
 | **FirestoreUser 타입** | `firestoreUser.ts` | 🆕 **FirestoreUser** (DB 저장용), **User** (UI용) 분리 | ✅ 완료 |
+| **Draft 타입** | `draft.ts` | 🆕 글조각 데이터 모델 (Draft, DraftListItem) | ✅ 완료 |
 | ~~**User 타입**~~ | ~~`user.ts`~~ | ~~사용자 데이터 모델~~ | ⚠️ Deprecated (firestoreUser.ts로 변경) |
 | ~~**Student 타입**~~ | ~~`student.ts`~~ | ~~학생 데이터 모델~~ | ⚠️ Deprecated (user.ts로 대체) |
 | **Topic 타입** | `topic.ts` | 주제 데이터 모델, TopicCategory/Difficulty/OwnerType Enum, 팀 주제 유틸 함수 | ✅ 완료 |

ROADMAP.md

@@ -63,6 +63,10 @@
 | **API Routes 구현** | **보안 레벨 변경, 명단 관리 API (RESTful 원칙), POST/DELETE 메서드 구분** | **2025-11-10** |
 | **lib/server/team 확장** | **updateTeamSecurityLevel, add/removeAllowedName/Email, 자동 명단 생성** | **2025-11-10** |
 | **react-icons 전환** | **이모티콘 → react-icons/lu로 전환 (LuGlobe, LuClipboardList 등)** | **2025-11-10** |
+| **다중 글조각 관리** | **DraftManager (localStorage, 최대 10개), SavedDraftsDialog, 2초 debounce 자동 저장, 저장 상태 표시** | **2025-11-10** |
+| **테마 슬롯 레시피** | **Dialog, Select slot recipe 추가 (자동 배경색, border, shadow)** | **2025-11-10** |
+| **TopicSelector 그룹핑** | **ItemGroup으로 자유/팀/개인 주제 구분, 팀 주제에 팀 이름 표시, Separator 추가** | **2025-11-10** |
+| **TopicOption 확장** | **teamName 필드 추가, TopicManager에서 팀 정보 조회 (동적 import)** | **2025-11-10** |
 
 ### 🚧 진행 중
 

TECH_STACK.md

@@ -243,6 +243,15 @@ const firebaseConfig = {
 - **브랜드 컬러**: 핑크(#FF6B9D), 오렌지(#FFA07A), 청록(#4ECDC4)
 - **다크모드**: 시맨틱 토큰으로 자동 전환
 - **반응형 타이포그래피**: hero, heading, body 등 텍스트 스타일 정의
+- **🆕 슬롯 레시피** (2025-11-10):
+  - `menu`: 커스텀 메뉴 스타일 (애니메이션, hover 효과)
+  - `dialog`: Dialog 자동 배경색, border, shadow
+  - `select`: Select 드롭다운 자동 배경색, hover 효과
+- **시맨틱 토큰**:
+  - `bg`, `fg`, `border`: 전역 배경/전경/테두리 색상
+  - `brand.*`: 브랜드 컬러 시맨틱 토큰
+  - `navbar.*`, `menu.*`: 컴포넌트별 시맨틱 토큰
+  - `landing.*`: 랜딩 페이지 전용 토큰
 
 ---