911 lines
56 KiB
Markdown
911 lines
56 KiB
Markdown
# 라온누리 - 프로젝트 구조
|
||
|
||
> 최종 업데이트: 2025-11-21 (수정 모드 UX 개선 + 주제 변경 차단)
|
||
|
||
초등학생을 위한 창작 글쓰기 교육 플랫폼
|
||
|
||
**최신 업데이트** (2025-11-21):
|
||
- 🎨 **수정 모드 UX 대폭 개선**
|
||
- **Sticky 헤더바**: 오렌지/앰버 그라데이션 배경, 상단 고정 (z-index: 100)
|
||
- **강조된 테두리**: 주제 선택 + 글쓰기 영역에 오렌지 테두리 (2px solid)
|
||
- **섀도우 효과**: 글쓰기 영역에 오렌지 글로우 (라이트/다크 모드 대응)
|
||
- **Writing ID 표시**: 어떤 글을 수정 중인지 명확하게 표시
|
||
- **색상 시스템**: Light(#FFB366, #FF9800, #E65100) / Dark(#8B6B47, #C4A572)
|
||
- 기존 단순 배지 → 전체 UI 테마로 업그레이드
|
||
- 🔒 **수정 모드 주제 변경 차단**
|
||
- TopicSelector에 `readonly` prop 추가
|
||
- 수정 모드에서는 Select 드롭다운 숨김, "현재 주제" 라벨만 표시
|
||
- 데이터 무결성 보장 (템플릿 덮어쓰기 방지)
|
||
- AI 설정/실시간 모니터링 혼선 방지
|
||
- 다국어 지원: `readonlyNote`, `currentTopic` (ko, en, ja)
|
||
- 🧹 **UI 정리**
|
||
- "새 글쓰기" 버튼 제거 (불필요한 기능, 실수 방지)
|
||
- 상단 버튼 영역 단순화 ("저장된 글조각" 버튼만 유지)
|
||
- 미사용 i18n 키 정리 (`newWriting`, `discardConfirm`)
|
||
|
||
**이전 업데이트** (2025-11-20):
|
||
- 🎨 **AI 이미지 생성 스타일 일관성 개선**
|
||
- **Vertex AI Imagen 4.0 Fast**: 글 내용 기반 자동 이미지 생성 (모델 업그레이드)
|
||
- **일관된 스타일 가이드**: 모든 이미지에 동일한 화풍 적용
|
||
- 화풍: 따뜻한 디지털 일러스트, 애니메이션/만화 스타일
|
||
- 색감: 부드럽고 따뜻한 톤, 자연스러운 채도
|
||
- 분위기: 친근하고 밝은, 초등학생 눈높이
|
||
- **강화된 Negative Prompt**: 과도한 사실주의, 어두운 분위기, 유치한 캐릭터 차단
|
||
- **한국 문화권 고려**: "Korean elementary student" 명시로 아시아권 얼굴 특징 반영
|
||
- **AI 프롬프트 최적화**: Gemini Flash가 원문 → 핵심 키워드 추출 (6-12개) → 스타일 키워드 자동 추가
|
||
- **폴백 안전성**: AI 최적화 실패 시에도 일관된 스타일 적용
|
||
|
||
**이전 업데이트** (2025-11-17):
|
||
- 🎨 **AI 이미지 생성 시스템 + 장면 분리 + 프롬프트 최적화**
|
||
- **AI 장면 분리**: Gemini가 글에서 3~5개 주요 장면 자동 추출
|
||
- **4단계 플로우**: 장면 추출 → 장면 선택 → 프롬프트 최적화 → 이미지 생성 → 결과 표시
|
||
- **사용자 선택권**: 여러 장면 중 원하는 장면만 이미지로 생성
|
||
- **구조화된 프롬프트**: 피사체/행동/배경/디테일/분위기/스타일 구분하여 추출
|
||
- **재선택 가능**: 이미지 생성 후 "다른 장면 선택"으로 여러 이미지 생성
|
||
- **Firebase Storage 저장**: base64 이미지 → Storage 업로드 → 공개 URL 생성
|
||
- **Writing 문서 업데이트**: generatedImage 필드에 이미지 정보 저장
|
||
- **안전 필터링**: 부적절한 콘텐츠 자동 차단
|
||
- **다국어 지원**: 한국어/영어/일본어 프롬프트 및 UI
|
||
- **타입**: Scene, SceneExtractionResponse
|
||
- **서비스**: sceneExtractionService.ts (장면 추출), imagenService.ts (프롬프트 최적화)
|
||
- **프롬프트**: sceneExtraction.ts (장면 분리), promptOptimization.ts (키워드 추출)
|
||
- **UI**: SceneSelector (장면 선택), GenerateImageDialog (4단계 플로우)
|
||
- **API**: POST /api/extract-scenes (장면 추출), POST /api/generate-image (프롬프트 최적화 + 이미지 생성)
|
||
|
||
**이전 업데이트** (2025-11-14 PM):
|
||
- 🤖 **AI 글쓰기 도우미 시스템**
|
||
- **4단계 점진적 힌트**: 질문 → 방향 → 선택지 → 예시 문장
|
||
- **작성 멈춤 감지**: 5분간 입력 없으면 자동 제안 (useWritingInactivityDetection 훅)
|
||
- **주제 맥락 활용**: 주제 정보(title, keywords, category)를 프롬프트에 포함
|
||
- **팀별 설정**: 선생님이 팀 관리 페이지에서 On/Off 가능
|
||
- **서버 검증**: AI 힌트 요청 시 팀 설정 확인 (enabled, allowedHintLevels)
|
||
- **사용 제한**: 글당 최대 5회, 힌트 간 3분 쿨다운
|
||
- **다국어 프롬프트**: 한국어/영어/일본어 지원
|
||
- **UI 컴포넌트**: InactivityPrompt (플로팅 버튼), HintDisplay (Dialog), AIAssistancePanel
|
||
- **API**: POST /api/writing-assistance, GET/PUT /api/team/[teamId]/ai-config
|
||
- **Firestore**: Team.aiAssistanceConfig 필드 추가
|
||
|
||
**최신 업데이트** (2025-11-14 AM):
|
||
- 💾 **개별 글 분석 결과 저장 시스템**
|
||
- Writing 타입에 WritingAnalysis 필드 추가
|
||
- 글쓰기 페이지 실시간 분석 제거 (저장 시에만 분석)
|
||
- AI 분석 + 맞춤법 검사를 DB에 저장
|
||
- 패턴 분석 시 저장된 결과 재사용 (90% 비용 절감)
|
||
- contentHash 기반 변경 감지
|
||
- 맞춤법 에러 히스토리 기능 완성
|
||
|
||
**이전 업데이트** (2025-11-13):
|
||
- 🌏 **다국어 지원 시스템 (i18n)**
|
||
- next-intl 라이브러리 기반
|
||
- **3개 언어 지원**: 한국어(ko), 영어(en), 일본어(ja)
|
||
- **[locale] 라우팅**: URL에 언어 코드 표시 (`/ko/home`, `/en/home`, `/ja/home`)
|
||
- **브라우저 언어 자동 감지**: `Accept-Language` 헤더 기반 자동 리다이렉트
|
||
- **개선된 언어 전환**: LocaleSwitcher 드롭다운 메뉴 (국기 이모지 🇰🇷 🇺🇸 🇯🇵, 현재 언어 체크 표시)
|
||
- **번역 파일**: `messages/ko.json`, `messages/en.json`, `messages/ja.json` (각 407줄, 220+ 키)
|
||
- **완성된 페이지**: Navbar, Landing, Home, Team(전체), Write 페이지 번역 완료
|
||
- **완성된 컴포넌트**: LoginDialog, LoginForm, SignupForm, UserProfileButton, StudentLoginFlow, SavedDraftsDialog, SecurityLevelSelector 번역 완료
|
||
- **어린이 친화적**: 일본어는 한자 최소화, ひらがな 우선 사용
|
||
- **타입 안전**: useTranslations 훅으로 타입 체크
|
||
- **쿠키 저장**: 사용자가 선택한 언어 기억 (`NEXT_LOCALE`)
|
||
- **site.ts 텍스트 이동**: 사이트 메타데이터도 번역 파일로 관리
|
||
|
||
**최신 업데이트** (2025-11-12 PM):
|
||
- 📡 **실시간 글쓰기 모니터링 시스템**
|
||
- Firebase Realtime Database 기반 실시간 통신 (Redis Pub/Sub 방식)
|
||
- **모든 팀 멤버 표시** (getUsersByTeam)
|
||
- **3가지 상태 관리 및 자동 정렬**:
|
||
- 🟢 작성 중 (isActive: true, lastUpdated < 30초) - 초록 배지, 핑크 테두리
|
||
- 🟠 나감 (isActive: false, 마지막 통계 유지) - 주황 배지, 주황 테두리
|
||
- ⚪ 대기 중 (한 번도 작성 안 함) - 회색 배지, 투명도 60%
|
||
- 5초 주기 자동 업데이트 (글자 수, 단어 수, lastUpdated 타임스탬프)
|
||
- **작성 속도 계산** (클라이언트 측, charDiff * 12 = 글자/분)
|
||
- **Sparkline 그래프** (Area Chart, 최근 10개 데이터 포인트, 0 표시)
|
||
- **인터랙티브 툴팁** (마우스 오버 시 속도 + 몇 초 전 데이터)
|
||
- 미리보기 요청-응답 (관리자 클릭 → 학생 응답 → Dialog, 작성 중만)
|
||
- **30초 타임아웃**: 업데이트 없으면 "나감" 처리
|
||
- **마지막 통계 유지**: Firebase 삭제되어도 클라이언트 상태 유지
|
||
- onDisconnect() 자동 정리 (페이지 이탈 시 세션 삭제)
|
||
- LiveWritingMonitor 컴포넌트 (주제 Select, StudentMonitorCard)
|
||
- WritingSessionManager (Realtime DB 작업, 상세 디버그 로그)
|
||
- 완전 무료 (동시 접속 100명까지, 1GB/day)
|
||
- Security Rules (본인 쓰기, 인증된 사용자 읽기)
|
||
|
||
**최신 업데이트** (2025-11-12 AM):
|
||
- ✅ **Writing API 구현 완료**
|
||
- POST /api/writing - 글 생성 (서버에서 wordCount/charCount 자동 계산, 🆕 **analysis 저장**)
|
||
- GET /api/writing/[id] - 글 조회 (작성자만 접근)
|
||
- PUT /api/writing/[id] - 글 수정 (작성자만 접근)
|
||
- DELETE /api/writing/[id] - 글 삭제 (작성자만 접근)
|
||
- POST /api/writing/user - 사용자 글 목록
|
||
- POST /api/writing/recent - 최근 글 (limit 파라미터)
|
||
- 서버 레이어: `src/lib/server/writing.ts` (Firestore CRUD)
|
||
- WritingManager: 기존 클라이언트 캐싱 유지 (1분~5분)
|
||
- 📊 **글 작성 패턴 분석 - 3가지 분석 타입 지원**
|
||
- **self**: 본인의 모든 published 글 분석 (기존)
|
||
- **by-team**: 팀 소유자가 팀원의 팀 내 전체 글 분석 (신규)
|
||
- **by-topic**: 팀 소유자가 특정 주제로 작성된 팀원 글 분석 (신규 - UI만)
|
||
- 권한 체크: 팀 소유자만 팀원 분석 가능, 프라이버시 보호
|
||
- API 파라미터 확장: `analysisType`, `targetUserId`, `topicId`, `teamId`
|
||
- 🎯 **WritingPatternDialog 개선**
|
||
- Props 확장: 분석 타입별 파라미터 지원
|
||
- 제목 동적 변경: "OOO 학생의 'XXX' 주제 분석" 등
|
||
- 분석 정보 안내: "이 팀에서 작성된 N개 글 분석" 등
|
||
- 🏫 **팀 관리 페이지 UI 추가**
|
||
- 멤버 카드 메뉴에 "팀 내 글 분석" 버튼 (by-team)
|
||
- TopicMemberAnalysisSection 컴포넌트 (by-topic - 추후 구현)
|
||
- 🔒 **보안**: 팀 외 글(자유 주제, 다른 팀)은 분석에서 제외
|
||
- ⚡ **Content Hash 기반 3단계 스마트 캐싱**
|
||
- L1 캐시: localStorage (영구, LRU 10개) ~1ms
|
||
- L2 캐시: Firestore `patternAnalyses` 컬렉션 (영구) ~100ms
|
||
- L3 캐시: Server in-memory (5분, 50개) ~50ms
|
||
- 해시 생성: `id:updatedAt` 조합 (SHA-256)
|
||
- 변경 자동 감지: 글 추가/수정 시 해시 변경 → 재분석
|
||
- AI 비용 절감: 동일 글 세트는 전체 사용자 기준 1회만 분석
|
||
- 서버 레이어: `src/lib/server/patternAnalysis.ts` (Firestore CRUD)
|
||
- 유틸리티: `contentHash.ts`, `patternCacheManager.ts`
|
||
|
||
**2025-11-11 (PM) 업데이트**:
|
||
- 📊 **글 작성 패턴 분석 시스템**
|
||
- 최근 10개 글을 분석하여 작성 스타일, 강점/약점, 발전 추이 파악
|
||
- AI 기반 종합 평가 및 맞춤형 추천 사항 제공
|
||
- 자주 사용하는 표현, 맞춤법 경향 분석
|
||
- WritingPatternDialog + WritingPatternDisplay 컴포넌트
|
||
- `/api/analyze-pattern` API 엔드포인트 (5분 캐싱)
|
||
- ✨ **실시간 하이라이트 시스템** (Tiptap Extensions)
|
||
- SpellingHighlight: 맞춤법 오류를 빨간 물결 밑줄로 표시
|
||
- SensoryWordHighlight: 감각 단어를 색상별 하이라이트 (초록/파랑/보라)
|
||
- 기존 ScoreDisplay/SpellingErrorDisplay 제거 (하이라이트로 대체)
|
||
- 💬 **인터랙티브 툴팁 시스템**
|
||
- EditorTooltip: 하이라이트된 단어 클릭 시 상세 정보 표시
|
||
- 맞춤법 오류: 원본 → 수정, 이유 설명
|
||
- 감각 단어: 단어 타입, 격려 메시지
|
||
- Portal + 외부 클릭/ESC 키로 닫기
|
||
- 🔔 **Toast 알림 추가** (write 페이지)
|
||
- 텍스트 분석 시작/완료/실패 알림 (점수 표시)
|
||
- 맞춤법 검사 시작/완료/실패 알림 (에러 개수 표시)
|
||
- 로딩 상태 표시 (duration: Infinity)
|
||
|
||
**2025-11-11 (AM) 업데이트**:
|
||
- 🔄 **Google AI SDK 마이그레이션**
|
||
- `@google-cloud/vertexai` → `@google/genai` (최신 SDK)
|
||
- Response Schema 지원 (JSON 응답 강제)
|
||
- Vertex AI 모드 지원 (`vertexai: true`)
|
||
- 📊 **텍스트 분석 개편**
|
||
- 평가 기준 재설계: 오감(4점) + 감정(2점) + 대화(2점) + 의성어(2점)
|
||
- `descriptive` → `emotion` 필드 변경
|
||
- 프롬프트 최적화 (칭찬 강화, 제안 0~1개로 제한)
|
||
- 📜 **분석 히스토리 시스템**
|
||
- Draft에 `analysisHistory` 추가 (최대 5개)
|
||
- AI가 수정 과정 인식하여 격려
|
||
- 이전 버전 비교 피드백
|
||
- ✍️ **맞춤법 검사 서비스** (독립적)
|
||
- Gemini 기반 맞춤법 검사
|
||
- 텍스트 분석과 별도 debounce (5초)
|
||
- 🤖 **실시간 피드백 시스템** (Vertex AI 기반)
|
||
- Delta 전송 (토큰 40% 절감)
|
||
- 서버 캐싱 (중복 제거)
|
||
- 🌏 **Multi-Region Failover** (가용성 99.9%)
|
||
- 3개 region 자동 전환 (도쿄, 싱가포르, 미국)
|
||
- Region health tracking
|
||
- RPM 3배 증가 (15 → 45)
|
||
|
||
**2025-11-10 업데이트**:
|
||
- ⚠️ 주제 변경 경고 Dialog (내용 초기화 알림, 임시 저장 안내)
|
||
- 📝 다중 글조각 관리 시스템 (DraftManager, SavedDraftsDialog)
|
||
- 💾 강화된 자동 저장 (2초 debounce, 저장 상태 표시)
|
||
- 🎨 테마 슬롯 레시피 추가 (Dialog, Select 자동 배경색)
|
||
- 📋 TopicSelector 그룹핑 (자유/팀/개인 주제 구분, 팀 이름 표시)
|
||
- 🔐 5단계 보안 레벨 시스템 (팀별 보안 정책 선택)
|
||
- 📦 User 타입 분리 (FirestoreUser / User)
|
||
- 🏷️ 닉네임 저장 위치 변경 (team.members[uid].nickname)
|
||
- 🗑️ memberUids optional (Object.keys(members) 사용)
|
||
|
||
---
|
||
|
||
## 페이지 구조
|
||
|
||
### 🌏 다국어 라우팅 (2025-11-13)
|
||
|
||
모든 페이지는 `[locale]` 세그먼트를 통해 다국어를 지원합니다:
|
||
- **한국어**: `/ko/*` (기본값)
|
||
- **영어**: `/en/*`
|
||
- **일본어**: `/ja/*` 🆕
|
||
- **자동 감지**: 브라우저 언어 설정에 따라 첫 방문 시 자동 리다이렉트
|
||
- **언어 전환**: Navbar 우측 🌐 버튼 → 드롭다운 메뉴 (🇰🇷 🇺🇸 🇯🇵)
|
||
|
||
**URL 예시**:
|
||
- 랜딩: `/ko`, `/en`, `/ja`
|
||
- 홈: `/ko/home`, `/en/home`, `/ja/home`
|
||
- 글쓰기: `/ko/write`, `/en/write`, `/ja/write`
|
||
- 팀: `/ko/team`, `/en/team`, `/ja/team`
|
||
|
||
### ✅ 구현 완료
|
||
|
||
| 페이지 | 경로 | 설명 | 주요 기능 | 다국어 |
|
||
|-------|------|------|---------|--------|
|
||
| **랜딩 페이지** | `/[locale]` | 서비스 소개 및 홍보 (비로그인 전용) | Hero, Features, How It Works, CTA, Footer<br>로그인 시 `/home`으로 자동 리다이렉트<br>🆕 **전체 번역 완료** (사이트명, 태그라인, 모든 섹션) | ✅ 완료 |
|
||
| **유저 홈** | `/[locale]/home` | 인증된 사용자 대시보드 | 환영 메시지, 빠른 시작 대시보드, **최근 활동 (최근 글 3개 표시)**<br>비로그인 시 `/`로 자동 리다이렉트<br>정식 계정은 "내 팀" 카드 추가 표시<br>🆕 **WritingCard Grid, "모두 보기" 버튼**<br>🆕 **전체 번역 완료** (웰컴 메시지, 모든 액션 카드) | ✅ 완료 |
|
||
| **내 글 모음** | `/[locale]/writings` | 🆕 **전체 글 목록 페이지** | 🆕 **사용자의 모든 글 표시 (Grid)**<br>🆕 **정렬 Select (최신순/오래된순)**<br>🆕 **WritingCard 컴포넌트 사용**<br>🆕 **Empty state 처리**<br>🆕 **전체 번역 완료** (ko/en/ja) | ✅ 완료 |
|
||
| **글쓰기** | `/[locale]/write` | Tiptap 기반 순수 텍스트 에디터 + 주제 선택 | 주제 선택 (자유 주제/개인 주제/팀 주제)<br>🆕 **글 수정 기능 (URL params ?id=xxx)**<br>🆕 **수정 모드 배지 표시**<br>🆕 **주제 변경 경고** (작성 중 내용 초기화 알림, 임시 저장 안내)<br>제목 입력 (Editable), 순수 텍스트 에디터 (포맷팅 없음)<br>🆕 **다중 글조각 관리** (최대 10개), "새 글쓰기" / "저장된 글조각" 버튼<br>🆕 **강화된 자동 저장** (2초 debounce, 저장 상태 표시: 저장 중/저장됨)<br>🆕 **저장 시 AI 분석** (실시간 분석 제거, 저장 버튼 클릭 시 분석 수행)<br>🆕 **분석 결과 DB 저장** (WritingAnalysis + spellingErrors + contentHash)<br>템플릿 미리채우기 (제목/내용), Firestore 저장<br>비로그인도 접근 가능 (저장 시 로그인 유도) | ✅ 완료 |
|
||
| **테스트** | `/[locale]/test` | 팀 코드 시스템 테스트 페이지 | 팀 코드 생성/검증 테스트<br>팀/학생 생성 테스트<br>학생 로그인 테스트<br>authStore 상태 확인 | 🔜 예정 |
|
||
| **팀 목록** | `/[locale]/team` | 내가 만든 팀 목록 (정식 계정 전용) | 팀 카드 그리드, 팀 정보 (코드, 멤버 수, 보안 설정)<br>"새 팀 만들기" 버튼 | 🔜 예정 |
|
||
| **팀 생성** | `/[locale]/team/create` | 새 팀 만들기 (정식 계정 전용) | 팀 이름 입력, 팀 코드 자동 생성<br>🆕 **5단계 보안 레벨 선택** (RadioCard, 애니메이션)<br>🆕 **명단 관리 (Level 2/4)**: TagsInput으로 Enter/쉼표 입력<br>생성 후 `/team/[teamId]`로 이동 | 🔜 예정 |
|
||
| **팀 멤버 페이지** | `/[locale]/team/[teamId]` | 팀 멤버용 페이지 (멤버/소유자 모두 접근) | 팀 정보, 팀 코드 복사, 멤버 목록<br>소유자는 "팀 관리" 버튼 표시<br>팀 코드 로그인 후 기본 이동 페이지 | 🔜 예정 |
|
||
| **팀 관리** | `/[locale]/team/[teamId]/manage` | 팀 관리 페이지 (소유자 전용) | 팀 정보 및 코드, 보안 설정 표시<br>**팀 주제 관리 (생성/삭제)**<br>🆕 **주제별 학생 분석** (TopicMemberAnalysisSection)<br>멤버 목록 및 관리<br>🆕 **멤버 메뉴 - 팀 내 글 분석** (by-team)<br>"멤버 페이지 보기" 버튼 | 🔜 예정 |
|
||
|
||
### 🚧 구현 예정
|
||
|
||
| 페이지 | 경로 | 설명 | 상태 |
|
||
|-------|------|------|------|
|
||
| **학습하기** | `/[locale]/learn` | 레슨/코스 학습 | ❌ 미구현 (Navbar 링크만 존재) |
|
||
| **스티커** | `/[locale]/stickers` | 스티커 컬렉션 | ❌ 미구현 (Navbar 링크만 존재) |
|
||
| **마이페이지** | Dialog (별도 페이지 없음) | 사용자 대시보드 다이얼로그 | 🔜 계획 중 (UserProfileButton에서 열림) |
|
||
|
||
---
|
||
|
||
## 컴포넌트 구조
|
||
|
||
### 📁 `src/components/auth/` - 인증 관련
|
||
|
||
| 컴포넌트 | 파일명 | 설명 | 상태 |
|
||
|---------|--------|------|------|
|
||
| **AuthInitializer** | `AuthInitializer.tsx` | Firebase 인증 상태 초기화 | ✅ 완료 |
|
||
| **LoginDialog** | `LoginDialog.tsx` | 로그인/회원가입 다이얼로그 (일반/팀 코드 모드 전환) | ✅ 완료 |
|
||
| **StudentLoginFlow** | `StudentLoginFlow.tsx` | 팀 코드 학생 로그인 플로우 (3단계) | ✅ 완료 |
|
||
| **LoginForm** | `LoginForm.tsx` | 로그인 폼 컴포넌트 | ✅ 완료 |
|
||
| **SignupForm** | `SignupForm.tsx` | 회원가입 폼 컴포넌트 | ✅ 완료 |
|
||
| **SocialLoginButton** | `SocialLoginButton.tsx` | 소셜 로그인 버튼 | ✅ 완료 |
|
||
| **UserProfileButton** | `UserProfileButton.tsx` | 사용자 프로필/메뉴 버튼 | ✅ 완료 |
|
||
|
||
**주요 기능**:
|
||
- ✅ 이메일/비밀번호 로그인
|
||
- ✅ 이메일/비밀번호 회원가입
|
||
- ✅ 이름, 이메일, 비밀번호, 비밀번호 확인 입력
|
||
- ✅ 실시간 비밀번호 강도 게이지
|
||
- ✅ HIBP API 연동 (유출된 비밀번호 차단)
|
||
- ✅ 폼 검증 및 에러 애니메이션
|
||
- ✅ Google OAuth 로그인
|
||
- ✅ 팀 코드 기반 사용자 로그인 (Anonymous Auth - 단순화됨)
|
||
- ✅ 한글 팀 코드 ("춤추는 파란 사자" 형식)
|
||
- ✅ 사용자 이름 입력 (2단계)
|
||
- ❌ PIN 인증 제거 (복잡도 감소)
|
||
- ✅ UID 기반 통합 인증 (currentStudent 제거)
|
||
- ✅ 팀별 닉네임 시스템
|
||
- ✅ 로그인/회원가입 페이드 전환 애니메이션
|
||
- ✅ Anonymous ↔ 정식 계정 연결 (UID 유지)
|
||
- 🔜 네이버 로그인 (준비 중)
|
||
- 🔜 카카오 로그인 (준비 중)
|
||
|
||
---
|
||
|
||
### 📁 `src/components/landing/` - 랜딩 페이지
|
||
|
||
| 컴포넌트 | 파일명 | 설명 | 상태 |
|
||
|---------|--------|------|------|
|
||
| **FeatureCard** | `FeatureCard.tsx` | 특징 카드 | ✅ 완료 |
|
||
| **StepCard** | `StepCard.tsx` | 단계 카드 | ✅ 완료 |
|
||
| **SectionHeader** | `SectionHeader.tsx` | 섹션 헤더 | ✅ 완료 |
|
||
|
||
---
|
||
|
||
### 📁 `src/components/navigation/` - 네비게이션
|
||
|
||
| 컴포넌트 | 파일명 | 설명 | 상태 |
|
||
|---------|--------|------|------|
|
||
| **Navbar** | `Navbar.tsx` | 상단 네비게이션 바 (다국어 지원) | ✅ 완료 |
|
||
| **LocaleSwitcher** | `LocaleSwitcher.tsx` | 🆕 **언어 선택 메뉴** (KO/EN/JA, 드롭다운, 국기 이모지, 체크 표시) | ✅ 완료 |
|
||
|
||
**네비게이션 링크** (다국어 지원):
|
||
- 홈 (`/[locale]` 또는 `/[locale]/home`) - 인증 상태에 따라 동적 변경
|
||
- 비로그인: `/[locale]` (랜딩 페이지)
|
||
- 로그인: `/[locale]/home` (유저 대시보드)
|
||
- 글쓰기 (`/[locale]/write`) - 미구현
|
||
- 학습하기 (`/[locale]/learn`) - 미구현
|
||
- 스티커 (`/[locale]/stickers`) - 미구현
|
||
|
||
**주요 기능** (2025-11-13):
|
||
- ✅ 3개 언어 지원 (ko, en, ja)
|
||
- ✅ next-intl 타입 안전 Link 사용
|
||
- ✅ useTranslations 훅으로 번역 텍스트 관리
|
||
- ✅ LocaleSwitcher 드롭다운 메뉴 (국기, 언어명, 체크 표시)
|
||
- ✅ 어린이 친화적 표현 (일본어 ひらがな 우선)
|
||
|
||
---
|
||
|
||
### 📁 `src/components/ui/` - UI 기본 컴포넌트
|
||
|
||
| 컴포넌트 | 파일명 | 설명 | 상태 |
|
||
|---------|--------|------|------|
|
||
| **Provider** | `provider.tsx` | Chakra UI Provider | ✅ 완료 |
|
||
| **ColorMode** | `color-mode.tsx` | 다크모드 토글 | ✅ 완료 |
|
||
| **Toaster** | `toaster.tsx` | 토스트 알림 | ✅ 완료 |
|
||
| **Tooltip** | `tooltip.tsx` | 툴팁 | ✅ 완료 |
|
||
|
||
---
|
||
|
||
### 📁 `src/components/seo/` - SEO
|
||
|
||
| 컴포넌트 | 파일명 | 설명 | 상태 |
|
||
|---------|--------|------|------|
|
||
| **StructuredData** | `StructuredData.tsx` | JSON-LD 구조화 데이터 | ✅ 완료 |
|
||
|
||
---
|
||
|
||
### 📁 `src/components/writing/` - 글쓰기 에디터
|
||
|
||
| 컴포넌트 | 파일명 | 설명 | 상태 |
|
||
|---------|--------|------|------|
|
||
| **WritingEditor** | `WritingEditor.tsx` | Tiptap 기반 순수 텍스트 에디터 (하이라이트 통합) | ✅ 완료 |
|
||
| **TopicSelector** | `TopicSelector.tsx` | 주제 선택 드롭다운 (그룹핑, 팀 이름 표시) | ✅ 완료 |
|
||
| **EditorTooltip** | `EditorTooltip.tsx` | 🆕 **인터랙티브 툴팁** (맞춤법/감각 단어 클릭 시 표시) | ✅ 완료 |
|
||
| **WritingPatternDialog** | `WritingPatternDialog.tsx` | 🆕 **글 작성 패턴 분석 다이얼로그** (최근 10개 글 분석) | ✅ 완료 |
|
||
| **WritingPatternDisplay** | `WritingPatternDisplay.tsx` | 🆕 **패턴 분석 결과 표시** (종합 평가, 발전 추이, 강점/약점, 추천) | ✅ 완료 |
|
||
| **InactivityPrompt** | `InactivityPrompt.tsx` | 🆕 **작성 멈춤 프롬프트** (5분 입력 없을 시 플로팅 버튼) | ✅ 완료 |
|
||
| **HintDisplay** | `HintDisplay.tsx` | 🆕 **AI 힌트 표시** (4단계 힌트 Dialog, RadioCard 선택지) | ✅ 완료 |
|
||
| **AIAssistancePanel** | `AIAssistancePanel.tsx` | 🆕 **AI 도움 패널** (레벨 선택, 남은 횟수, 쿨다운) | ✅ 완료 |
|
||
| **GenerateImageDialog** | `GenerateImageDialog.tsx` | 🆕 **AI 이미지 생성 Dialog** (4단계 플로우: 장면 추출 → 장면 선택 → 이미지 생성 → 결과 표시) | ✅ 완료 |
|
||
| **SceneSelector** | `SceneSelector.tsx` | 🆕 **장면 선택 컴포넌트** (RadioCard 기반, 이모지 표시, 원문 미리보기) | ✅ 완료 |
|
||
| **WritingCard** | `WritingCard.tsx` | 🆕 **글 카드 컴포넌트** (제목, 날짜, 미리보기, 주제/점수/이미지 배지, 메뉴, 삭제) | ✅ 완료 |
|
||
| ~~**ScoreDisplay**~~ | ~~`ScoreDisplay.tsx`~~ | ~~실시간 피드백 점수 표시~~ | ❌ 삭제됨 (하이라이트로 대체) |
|
||
| ~~**SpellingErrorDisplay**~~ | ~~`SpellingErrorDisplay.tsx`~~ | ~~맞춤법 오류 표시~~ | ❌ 삭제됨 (하이라이트로 대체) |
|
||
| **CreateTopicDialog** | `CreateTopicDialog.tsx` | 개인 주제 생성 다이얼로그 (태그 입력 UI) | ✅ 완료 |
|
||
| **CreateTeamTopicDialog** | `CreateTeamTopicDialog.tsx` | 팀 주제 생성 다이얼로그 (템플릿 지원) | ✅ 완료 |
|
||
| **SavedDraftsDialog** | `SavedDraftsDialog.tsx` | 저장된 글조각 목록 다이얼로그 (불러오기/삭제, **동기화 상태 배지** 🟢synced/🟡syncing/⚪local) | ✅ 완료 |
|
||
|
||
**주요 기능**:
|
||
- ✅ 순수 텍스트 입력 (포맷팅 없음)
|
||
- ✅ 초등학생 친화적 단순 인터페이스
|
||
- ✅ 실시간 글자 수/단어 수 카운터
|
||
- ✅ 🆕 **실시간 하이라이트 시스템** (Tiptap Extensions)
|
||
- ✅ SpellingHighlight: 맞춤법 오류를 빨간 물결 밑줄로 표시
|
||
- ✅ SensoryWordHighlight: 감각 단어를 색상별 하이라이트 (초록/파랑/보라)
|
||
- ✅ 클릭 시 툴팁 표시 (맞춤법: 원본→수정+이유, 감각 단어: 단어 타입+격려)
|
||
- ✅ 브라우저 기본 맞춤법 검사 비활성화 (spellcheck="false")
|
||
- ✅ 🆕 **글 작성 패턴 분석** (AI 기반)
|
||
- ✅ 최근 10개 글 종합 분석 (작성 스타일, 표현력, 발전 추이)
|
||
- ✅ 강점/약점 파악, 자주 쓰는 표현 분석
|
||
- ✅ AI 종합 평가 및 맞춤형 추천 사항 3가지
|
||
- ✅ 5분 캐싱 (성능 최적화)
|
||
- ✅ **실시간 피드백 시스템** (Gemini 2.5 Flash-Lite)
|
||
- ✅ 텍스트 분석 (오감/감정/대화/의성어 평가)
|
||
- ✅ 5초 debounce + Delta 전송 (토큰 40% 절감)
|
||
- ✅ Toast 알림 (시작/완료/실패, 점수 표시)
|
||
- ✅ Multi-region failover (가용성 99.9%)
|
||
- ✅ **맞춤법 검사** (독립적, Gemini 기반)
|
||
- ✅ 초등학생 눈높이 설명
|
||
- ✅ 5초 debounce (텍스트 분석과 별도)
|
||
- ✅ Toast 알림 (에러 개수 표시)
|
||
- ✅ **주제 변경 경고 Dialog** (작성 중 내용 초기화 알림 + 임시 저장 안내)
|
||
- ✅ **다중 글조각 관리** (최대 10개, FIFO 방식)
|
||
- ✅ **강화된 자동 저장** (2초 debounce, localStorage)
|
||
- ✅ **저장 상태 표시** (저장 중 → 저장됨 → 시간 표시)
|
||
- ✅ "새 글쓰기" 버튼 (현재 글 초기화)
|
||
- ✅ "저장된 글조각" Dialog (목록, 미리보기, 불러오기/삭제)
|
||
- ✅ **주제 선택 그룹핑** (자유/팀/개인 주제 구분, ItemGroup 사용)
|
||
- ✅ **팀 주제에 팀 이름 표시** (어느 팀의 주제인지 명확히 표시)
|
||
- ✅ 주제 선택 (자유 주제/팀 주제/개인 주제)
|
||
- ✅ 주제 정보 표시 (설명, 키워드, 예시 질문)
|
||
- ✅ 템플릿 미리채우기 (제목/내용)
|
||
- ✅ 개인 주제 생성 (카테고리, 난이도, 키워드, 템플릿 설정)
|
||
- ✅ 팀 주제 생성 (팀 소유자 전용, 팀 관리 페이지)
|
||
- ✅ 태그 입력 필드 UI (제목 템플릿: 방향키 네비게이션, Backspace/Delete 삭제)
|
||
|
||
---
|
||
|
||
### 📁 `src/extensions/` - Tiptap Extensions
|
||
|
||
| Extension | 파일명 | 설명 | 상태 |
|
||
|-----------|--------|------|------|
|
||
| **SpellingHighlight** | `spelling-highlight.ts` | 🆕 **맞춤법 오류 하이라이트** (빨간 물결 밑줄, data attributes) | ✅ 완료 |
|
||
| **SensoryWordHighlight** | `sensory-word-highlight.ts` | 🆕 **감각 단어 하이라이트** (색상별 표시: 초록/파랑/보라) | ✅ 완료 |
|
||
|
||
**주요 기능**:
|
||
- ✅ Tiptap ProseMirror Plugin 기반
|
||
- ✅ DecorationSet을 사용한 효율적인 하이라이트
|
||
- ✅ Meta를 통한 강제 업데이트 지원
|
||
- ✅ data attributes로 툴팁 정보 전달
|
||
- ✅ 실시간 텍스트 변경 추적
|
||
|
||
**하이라이트 종류**:
|
||
- **SpellingHighlight**: 맞춤법 오류 (빨간 물결 밑줄)
|
||
- `spelling-error` 클래스
|
||
- data-original, data-correction, data-reason 속성
|
||
- **SensoryWordHighlight**: 감각 단어 (색상별)
|
||
- `sensory-word` (감각 동사, 초록색)
|
||
- `emotion-word` (감각 형용사, 파란색)
|
||
- `onomatopoeia-word` (의성어/의태어, 보라색)
|
||
- data-word, data-type 속성
|
||
|
||
---
|
||
|
||
### 📁 `src/components/team/` - 팀 관리
|
||
|
||
| 컴포넌트 | 파일명 | 설명 | 상태 |
|
||
|---------|--------|------|------|
|
||
| **TeamTopicManager** | `TeamTopicManager.tsx` | 팀 주제 목록 및 생성/삭제 UI | ✅ 완료 |
|
||
| **AIConfigDialog** | `AIConfigDialog.tsx` | 🆕 **AI 도우미 고급 설정 Dialog** (Slider, 커스텀 CheckboxCard) | ✅ 완료 |
|
||
| **SecurityLevelSelector** | `SecurityLevelSelector.tsx` | 5단계 보안 레벨 선택 (RadioCard, framer-motion 애니메이션) | ✅ 완료 |
|
||
| **AllowListManager** | `AllowListManager.tsx` | 명단 관리 (이름/이메일 추가/제거, TagsInput) | ✅ 완료 |
|
||
| **TopicMemberAnalysisSection** | `TopicMemberAnalysisSection.tsx` | 🆕 **주제별 학생 글쓰기 분석** (Accordion, 주제별 학생 목록, 글 개수, by-topic 분석 연동) | ✅ 완료 |
|
||
| **LiveWritingMonitor** | `LiveWritingMonitor.tsx` | 🆕 **실시간 글쓰기 모니터링** (Firebase Realtime DB, 5초 주기) | ✅ 완료 |
|
||
|
||
**주요 기능**:
|
||
- ✅ **AIConfigDialog** (2025-11-17):
|
||
- **Slider 설정**: 멈춤 감지 시간 (1-60분), 최대 힌트 횟수 (1-20회), 쿨다운 (0-30분)
|
||
- **커스텀 힌트 레벨 카드** (직접 onClick 처리, CheckboxCard 미사용):
|
||
- 반투명 배경 레벨 번호 (opacity: 0.12, 80px 폰트)
|
||
- 우상단 접힌 페이지 인디케이터 (CSS border trick 삼각형)
|
||
- 체크 시 브랜드 컬러 삼각형 + 배경 변경
|
||
- 2x2 그리드 레이아웃 (SimpleGrid columns={2})
|
||
- **AI 제안 그대로 사용 금지** (Switch)
|
||
- 다국어 지원 (한국어/영어/일본어)
|
||
- 함수형 상태 업데이트로 클로저 문제 해결
|
||
- ✅ **LiveWritingMonitor** (2025-11-12):
|
||
- 주제 선택 드롭다운 (Chakra UI Select)
|
||
- **모든 팀 멤버 표시** (getUsersByTeam)
|
||
- **3가지 상태 관리 및 정렬**:
|
||
- 🟢 작성 중 (isActive: true, lastUpdated < 30초)
|
||
- 🟠 나감 (isActive: false, 마지막 통계 유지)
|
||
- ⚪ 대기 중 (한 번도 작성 안 함)
|
||
- StudentMonitorCard 컴포넌트 (개별 학생 카드)
|
||
- 실시간 통계: 글자 수, 단어 수, 마지막 업데이트 시간 ("N초 전")
|
||
- **작성 속도 계산** (클라이언트 측, charDiff * 12 = 글자/분)
|
||
- **Sparkline 그래프** (@chakra-ui/charts, Area Chart)
|
||
- 최근 10개 데이터 포인트 (speedHistory)
|
||
- 0도 표시 (작성 멈춤 시각화)
|
||
- Teal 색상, 투명도 30%
|
||
- **인터랙티브 툴팁** (Recharts Tooltip)
|
||
- 속도 값 ("N자/분")
|
||
- 시간 정보 ("N초 전")
|
||
- 미리보기 버튼 (작성 중인 학생만)
|
||
- **30초 타임아웃**: 업데이트 없으면 "나감" 처리
|
||
- **마지막 통계 유지**: 나간 학생도 통계 표시
|
||
- 실시간 구독/구독 해제 (useEffect cleanup)
|
||
- 시각적 구분 (색상별 테두리, 아바타, 배지)
|
||
- ✅ SecurityLevelSelector: RadioCard 기반, 선택 시 추가 UI 애니메이션으로 표시
|
||
- ✅ AllowListManager: Level 2/4용 명단 관리, Enter/쉼표로 구분 입력
|
||
- ✅ 그라데이션 배경 (RadioCard와 자연스럽게 연결)
|
||
- ✅ react-icons/lu 사용 (이모티콘 제거)
|
||
|
||
---
|
||
|
||
### 📁 예정된 컴포넌트 디렉토리
|
||
|
||
| 디렉토리 | 설명 | 컴포넌트 |
|
||
|---------|------|--------------|
|
||
| `lesson/` | 학습 관련 | LessonCard, LessonContent, QuizSection, ProgressBar, LevelBadge |
|
||
| `sticker/` | 스티커 관련 | StickerGrid, StickerCard, StickerDetail, StickerStats, LockedSticker |
|
||
| `level/` | 레벨 시스템 | LevelBadge, LevelUpModal, ExperienceBar |
|
||
| `profile/` | **프로필 Dialog** | **ProfileDialog (탭: 내정보, 내글, 통계, 설정)**, ProfileCard, StatsWidget, WritingHistory |
|
||
| `notification/` | 알림 시스템 | NotificationBell, NotificationList, NotificationItem |
|
||
| `admin/` | 관리자 | TopicManager, UserManager, ContentEditor |
|
||
|
||
**Notes**:
|
||
- `profile/` 디렉토리는 Dialog 기반으로 구현됩니다. UserProfileButton 클릭 시 ProfileDialog가 열립니다.
|
||
|
||
---
|
||
|
||
## 비즈니스 로직 레이어
|
||
|
||
### 📁 `src/managers/` - Manager 패턴 (API 호출 + 클라이언트 캐싱)
|
||
|
||
| Manager | 파일명 | 설명 | 상태 |
|
||
|---------|--------|------|------|
|
||
| **ManagerBase** | `ManagerBase.ts` | 공통 기능 (authenticatedFetch, API 호출, 캐싱) | ✅ 완료 |
|
||
| **TeamManager** | `TeamManager.ts` | 팀 관련 API 호출 (생성, 조회, 수정, 삭제, 멤버 관리) | ✅ 완료 |
|
||
| **UserManager** | `UserManager.ts` | 사용자 관련 API 호출 (생성, 조회, 수정, 닉네임 관리) **[NEW]** | ✅ 완료 |
|
||
| **DraftManager** | `DraftManager.ts` | 글조각 관리 (**localStorage + Realtime DB 하이브리드**, 기기 간 동기화, 최대 10개, CRUD, syncStatus) | ✅ 완료 |
|
||
| **WritingSessionManager** | `WritingSessionManager.ts` | 🆕 **실시간 글쓰기 세션 관리** (Firebase Realtime DB 작업) | ✅ 완료 |
|
||
| ~~**StudentManager**~~ | ~~`StudentManager.ts`~~ | ~~학생 관련 API 호출~~ | ⚠️ Deprecated (UserManager로 대체) |
|
||
| **WritingManager** | `WritingManager.ts` | 글쓰기 관련 비즈니스 로직 (CRUD, 통계) | ✅ 완료 |
|
||
| **TopicManager** | `TopicManager.ts` | 주제 관련 비즈니스 로직 (CRUD, 템플릿 처리) | ✅ 완료 |
|
||
| **index.ts** | `index.ts` | 모든 매니저 export | ✅ 완료 |
|
||
| **LevelManager** | `LevelManager.ts` | 레벨/경험치 관리 | ❌ 미구현 |
|
||
| **StickerManager** | `StickerManager.ts` | 스티커 획득/관리 | ❌ 미구현 |
|
||
|
||
**주요 기능**:
|
||
- ✅ **싱글톤 패턴**으로 전역 인스턴스 관리
|
||
- ✅ **HTTP API 호출**: Next.js API Routes로 서버 로직 분리
|
||
- ✅ **클라이언트 사이드 캐싱**: in-memory 캐싱 (TTL 기반)
|
||
- ✅ **자동 캐시 무효화**: 변경 작업 시 관련 캐시 삭제
|
||
- ✅ **인증 자동 처리**: ID Token 자동 헤더 추가
|
||
- ✅ **타입 안전성**: Request/Response 타입 완전 정의
|
||
- ✅ **비즈니스 로직과 UI 레이어 분리**
|
||
|
||
**WritingSessionManager 주요 메서드** (2025-11-12):
|
||
- `startMonitoring(teamId, topicId, getStatsCallback)`: 5초 주기 통계 전송 시작
|
||
- `stopMonitoring()`: 통계 전송 중지 (페이지 이탈 시)
|
||
- `subscribeToTopic(teamId, topicId, callback)`: 실시간 구독 (관리자용)
|
||
- `requestPreview(targetUserId)`: 미리보기 요청 (Promise 반환)
|
||
- `listenForPreviewRequests(onRequestCallback)`: 미리보기 요청 리스너 (학생용)
|
||
|
||
---
|
||
|
||
### 🆕 `functions/` - Firebase Cloud Functions (서버리스 백엔드)
|
||
|
||
Firebase Cloud Functions로 구현된 백그라운드 작업 및 자동화 로직입니다.
|
||
|
||
| Function | 파일 | 타입 | 스케줄/Trigger | 설명 | 상태 |
|
||
|----------|------|------|----------------|------|------|
|
||
| **cleanupExpiredReservations** | `cleanup.ts` | Scheduled | 매 시간 0분 | 만료된 팀 코드 예약 정리 (expiresAt < now) | ✅ 배포됨 |
|
||
| **cleanupExpiredDrafts** | `triggers/drafts.ts` | Scheduled | 매일 새벽 3시 | 180일 이상 오래된 drafts 정리 (Realtime DB) | ✅ 배포됨 |
|
||
| **onTeamDeleted** | `triggers/team.ts` | Firestore Trigger | teams/{teamId} 삭제 | 팀 주제, 모니터링 데이터 cascade 삭제 | ✅ 배포됨 |
|
||
| **onWritingCreated** | `triggers/writing.ts` | Firestore Trigger | writings/{writingId} 생성 | 글 생성 감지 (추후 백그라운드 분석) | ✅ 배포됨 |
|
||
|
||
**주요 특징**:
|
||
- ✅ **서버리스**: 별도 서버 관리 불필요, 자동 스케일링
|
||
- ✅ **한글 로그**: 모든 logger 메시지 한글 작성
|
||
- ✅ **리전**: asia-northeast1 (도쿄, 한국과 가장 가까움)
|
||
- ✅ **파일 분리**: index.ts에서는 export만, 로직은 별도 파일
|
||
- ✅ **에러 처리**: 일부 실패해도 전체 작업 계속 진행
|
||
|
||
**배포 명령어**:
|
||
```bash
|
||
cd functions
|
||
npm run build
|
||
npm run deploy
|
||
```
|
||
|
||
**로그 확인**:
|
||
```bash
|
||
firebase functions:log
|
||
firebase functions:log --only cleanupExpiredReservations
|
||
```
|
||
|
||
---
|
||
|
||
### 📁 `src/services/` - 데이터 레이어 (일부 deprecated)
|
||
|
||
| 서비스 | 파일명 | 설명 | 상태 |
|
||
|-------|--------|------|------|
|
||
| **Firebase Auth** | `firebaseAuth.ts` | 인증 서비스 (로그인, 회원가입, 소셜, Anonymous, 계정 연결) | ✅ 완료 (단순화됨) |
|
||
| **Firestore** | `firestore.ts` | Firestore CRUD 헬퍼 함수 (WritingManager에서 사용) | ✅ 완료 |
|
||
| **Vertex AI** | `vertexAI.ts` | **Gemini API 범용 래퍼** (`@google/genai`, Multi-region failover, Response Schema, 🆕 **Imagen 이미지 생성**) | ✅ 완료 |
|
||
| **Imagen Service** | `imagenService.ts` | 🆕 **AI 이미지 생성 서비스** (글 → 프롬프트 변환, 장면 기반 이미지 생성, 🆕 **AI 프롬프트 최적화**) | ✅ 완료 |
|
||
| **Scene Extraction** | `sceneExtractionService.ts` | 🆕 **AI 장면 분리 서비스** (글 → 3~5개 주요 장면 추출, 장면별 프롬프트 생성) | ✅ 완료 |
|
||
| **Text Analysis** | `textAnalysisService.ts` | **텍스트 분석 서비스** (평가 기준 개편, 히스토리 기반 분석) | ✅ 완료 |
|
||
| **Pattern Analysis** | `patternAnalysisService.ts` | 🆕 **글 작성 패턴 분석 서비스** (10개 글 종합 분석, AI 평가) | ✅ 완료 |
|
||
| **Spelling Check** | `spellingService.ts` | **맞춤법 검사 서비스** (Gemini 기반, 초등학생 눈높이) | ✅ 완료 |
|
||
| **Writing Assistance** | `writingAssistanceService.ts` | 🆕 **AI 글쓰기 도우미 서비스** (4단계 힌트 생성, 주제 맥락 활용, 서버 캐싱) | ✅ 완료 |
|
||
| **Region Health** | `regionHealthManager.ts` | **Region 과부하 상태 추적** (자동 복구, 1분 TTL) | ✅ 완료 |
|
||
| ~~**Team Service**~~ | ~~`teamService.ts`~~ | ~~팀 CRUD, 팀 코드 생성~~ | ⚠️ Deprecated (TeamManager로 이동) |
|
||
| ~~**Student Service**~~ | ~~`studentService.ts`~~ | ~~학생 CRUD, PIN 해시/검증~~ | ⚠️ Deprecated (UserManager로 대체) |
|
||
| **Level System** | `levelSystem.ts` | 레벨/경험치 계산 로직 | ❌ 미구현 |
|
||
| **Sticker System** | `stickerSystem.ts` | 스티커 획득 조건 엔진 | ❌ 미구현 |
|
||
|
||
**마이그레이션 완료**:
|
||
- ✅ **teamService.ts** → **TeamManager** (API 호출 방식)
|
||
- ✅ **studentService.ts** → **UserManager** (UID 기반 단순화)
|
||
- ✅ **students 컬렉션** → **users 컬렉션** (UID 기반)
|
||
- ✅ Firestore 직접 접근 → HTTP API 호출로 전환
|
||
- ✅ PIN 기능 제거, 팀별 닉네임 시스템 추가
|
||
|
||
### 📁 `src/types/` - 타입 정의
|
||
|
||
| 타입 | 파일명 | 설명 | 상태 |
|
||
|------|--------|------|------|
|
||
| **Team 타입** | `team.ts` | 팀 데이터 모델 (members Map), **TeamSecurityLevel Enum (1-5)**, 🆕 **AIAssistanceConfig** (AI 도우미 설정) | ✅ 완료 |
|
||
| **FirestoreUser 타입** | `firestoreUser.ts` | **FirestoreUser** (DB 저장용), **User** (UI용) 분리 | ✅ 완료 |
|
||
| **Writing 타입** | `writing.ts` | 글 데이터 모델, 🆕 **WritingAnalysis** (AI 분석 결과, contentHash 기반 재사용), **SpellingError** (맞춤법 오류), 🆕 **AIAssistanceRecord** (AI 도움 이력), 🆕 **GeneratedImage** (AI 생성 이미지) | ✅ 완료 |
|
||
| **Scene 타입** | `scene.ts` | 🆕 **장면 데이터 모델** (Scene, SceneExtractionResponse) | ✅ 완료 |
|
||
| **Draft 타입** | `draft.ts` | 글조각 데이터 모델 (Draft, DraftListItem, **AnalysisHistoryItem**, **syncStatus**: 'local'\|'synced'\|'syncing') | ✅ 완료 |
|
||
| **WritingPattern 타입** | `writingPattern.ts` | **글 작성 패턴 분석** 데이터 모델 (WritingPatternAnalysis) | ✅ 완료 |
|
||
| **WritingSession 타입** | `writingSession.ts` | 🆕 **실시간 모니터링** 데이터 모델 (WritingStats, PreviewRequest/Response, MonitoringData) | ✅ 완료 |
|
||
| ~~**User 타입**~~ | ~~`user.ts`~~ | ~~사용자 데이터 모델~~ | ⚠️ Deprecated (firestoreUser.ts로 변경) |
|
||
| ~~**Student 타입**~~ | ~~`student.ts`~~ | ~~학생 데이터 모델~~ | ⚠️ Deprecated (user.ts로 대체) |
|
||
| **Topic 타입** | `topic.ts` | 주제 데이터 모델, TopicCategory/Difficulty/OwnerType Enum, 팀 주제 유틸 함수 | ✅ 완료 |
|
||
| **API 공통 타입** | `api.ts` | ApiResponse, ApiError, HttpMethod Enum | ✅ 완료 |
|
||
| **Team API 타입** | `api/team.ts` | 팀 API Request/Response (add/removeMember 추가, requirePin 제거), 🆕 **AI 설정 API 타입** (GetAIConfig, UpdateAIConfig, GetAIStats) | ✅ 완료 |
|
||
| **User API 타입** | `api/user.ts` | 사용자 API Request/Response (닉네임 관리 포함) | ✅ 완료 |
|
||
| **Writing API 타입** | `api/writing.ts` | 글 API Request/Response, 🆕 **CreateWritingRequest.analysis** (AI 분석 결과 포함) | ✅ 완료 |
|
||
| ~~**Student API 타입**~~ | ~~`api/student.ts`~~ | ~~학생 API Request/Response~~ | ⚠️ Deprecated (api/user.ts로 대체) |
|
||
| **Topic API 타입** | `api/topic.ts` | 주제 API Request/Response (9개 엔드포인트, 팀 주제 포함) | ✅ 완료 |
|
||
|
||
---
|
||
|
||
### 📁 `src/utils/` - 유틸리티 함수
|
||
|
||
| 유틸리티 | 파일명 | 설명 | 상태 |
|
||
|---------|--------|------|------|
|
||
| **Korean Word List** | `koreanWordList.ts` | 한글 감각 동사/형용사 목록 (점수 가중치, 영역 변환 함수) | ✅ 완료 |
|
||
| **Team Code Generator** | `teamCodeGenerator.ts` | 한글/영어/일본어 팀 코드 생성 (형용사 + 색깔 + 동물, locale 파라미터) | ✅ 완료 |
|
||
| **🆕 i18n 유틸리티** | `i18n.ts` | 서비스 레이어용 번역 함수 (detectLocale, t), nested key 지원, 파라미터 치환 | ✅ 완료 |
|
||
| **Password Security** | `passwordSecurity.ts` | HIBP API 연동 (유출된 비밀번호 차단) | ✅ 완료 |
|
||
| **Password Strength** | `passwordStrength.ts` | 비밀번호 강도 계산 | ✅ 완료 |
|
||
| **Content Hash** | `contentHash.ts` | 🆕 **SHA-256 해시 생성** (글 목록 → 해시, id+updatedAt 조합), 🆕 **generateWritingContentHash** (개별 글 content 해시), 서버/클라이언트 지원 | ✅ 완료 |
|
||
| **Pattern Cache Manager** | `patternCacheManager.ts` | 🆕 **패턴 분석 localStorage 캐싱** (LRU 최대 10개, 캐시 통계) | ✅ 완료 |
|
||
| **Image Storage** | `imageStorage.ts` | 🆕 **Firebase Storage 이미지 업로드** (base64 → Storage, 공개 URL 반환) | ✅ 완료 |
|
||
|
||
---
|
||
|
||
### 📁 `src/hooks/` - Custom Hooks
|
||
|
||
| Hook | 파일명 | 설명 | 상태 |
|
||
|------|--------|------|------|
|
||
| **useWritingInactivityDetection** | `useWritingInactivityDetection.ts` | 🆕 **작성 멈춤 감지 훅** (N분 입력 없을 시 콜백, 타이머 리셋, 남은 시간) | ✅ 완료 |
|
||
|
||
---
|
||
|
||
### 📁 `src/prompts/` - AI 프롬프트
|
||
|
||
| 프롬프트 | 파일명 | 설명 | 상태 |
|
||
|---------|--------|------|------|
|
||
| **Text Analysis** | `textAnalysis.ts` | 텍스트 분석 프롬프트 (다국어, 히스토리 기반) | ✅ 완료 |
|
||
| **Pattern Analysis** | `patternAnalysis.ts` | 패턴 분석 프롬프트 (10개 글 종합 평가) | ✅ 완료 |
|
||
| **Writing Assistance** | `writingAssistance.ts` | 🆕 **AI 글쓰기 도우미 프롬프트** (4단계 × 3개 언어, 주제 맥락 활용) | ✅ 완료 |
|
||
| **Scene Extraction** | `sceneExtraction.ts` | 🆕 **AI 장면 추출 프롬프트** (3~5개 장면 분리, Response Schema, ko/en/ja) | ✅ 완료 |
|
||
| **Prompt Optimization** | `promptOptimization.ts` | 🆕 **프롬프트 최적화 프롬프트** (원문 → 핵심 키워드 배열 추출, Imagen 최적화) | ✅ 완료 |
|
||
|
||
---
|
||
|
||
### 📁 `src/app/api/` - API Routes
|
||
|
||
| API | 경로 | 메서드 | 설명 | 상태 |
|
||
|-----|------|--------|------|------|
|
||
| **텍스트 분석** | `/api/analyze-text` | POST | **Gemini 기반 텍스트 분석** (Delta 지원, 캐싱, 히스토리 인식) | ✅ 완료 |
|
||
| **패턴 분석** | `/api/analyze-pattern` | POST | **글 작성 패턴 분석** (3가지 타입, contentHash 기반 3단계 캐싱, 변경 감지) | ✅ 완료 |
|
||
| **맞춤법 검사** | `/api/spelling/check` | POST | **Gemini 기반 맞춤법 검사** (초등학생 눈높이) | ✅ 완료 |
|
||
| **AI 글쓰기 도우미** | `/api/writing-assistance` | POST | 🆕 **AI 힌트 생성** (4단계, 주제 맥락, 팀 설정 검증) | ✅ 완료 |
|
||
| **글 생성** | `/api/writing` | POST | 🆕 **글 생성** (wordCount/charCount 자동 계산, 🆕 **analysis 저장**) | ✅ 완료 |
|
||
| **글 조회** | `/api/writing/[id]` | GET | 🆕 **글 조회** (작성자만 접근) | ✅ 완료 |
|
||
| **글 수정** | `/api/writing/[id]` | PUT | 🆕 **글 수정** (작성자만 접근, 통계 재계산) | ✅ 완료 |
|
||
| **글 삭제** | `/api/writing/[id]` | DELETE | 🆕 **글 삭제** (작성자만 접근) | ✅ 완료 |
|
||
| **사용자 글 목록** | `/api/writing/user` | POST | 🆕 **사용자 글 목록** (userId 선택적, 본인 글만) | ✅ 완료 |
|
||
| **최근 글** | `/api/writing/recent` | POST | 🆕 **최근 글** (limit 파라미터, 기본 5개) | ✅ 완료 |
|
||
| **팀 CRUD** | `/api/team` | GET, POST, PUT, DELETE | 팀 생성/조회/수정/삭제 | ✅ 완료 |
|
||
| **팀 보안 레벨** | `/api/team/[teamId]/security-level` | POST | 보안 레벨 변경 | ✅ 완료 |
|
||
| **명단 관리** | `/api/team/[teamId]/allowed-names` | POST, DELETE | 허용 이름 추가/제거 | ✅ 완료 |
|
||
| **이메일 관리** | `/api/team/[teamId]/allowed-emails` | POST, DELETE | 허용 이메일 추가/제거 | ✅ 완료 |
|
||
| **팀 AI 설정** | `/api/team/[teamId]/ai-config` | GET, PUT | 🆕 **AI 도우미 설정 조회/업데이트** | ✅ 완료 |
|
||
| **AI 장면 추출** | `/api/extract-scenes` | POST | 🆕 **글에서 주요 장면 추출** (Gemini Flash, 3~5개 장면, 각 장면별 이미지 프롬프트 자동 생성) | ✅ 완료 |
|
||
| **AI 이미지 생성** | `/api/generate-image` | POST | 🆕 **장면 기반 이미지 생성** (🆕 **AI 프롬프트 최적화**, Imagen 3.0, Firebase Storage 저장, Writing 업데이트) | ✅ 완료 |
|
||
| **주제 CRUD** | `/api/topic` | GET, POST, PUT, DELETE | 주제 생성/조회/수정/삭제 (9개 엔드포인트) | ✅ 완료 |
|
||
| **주제별 작성자** | `/api/topic/[topicId]/writers` | GET | 🆕 **주제로 글 쓴 학생 목록** (글 개수, Firebase Auth 결합, 글 개수 내림차순) | ✅ 완료 |
|
||
| **사용자 관리** | `/api/user` | GET, POST, PUT | 사용자 조회/생성/업데이트 | ✅ 완료 |
|
||
|
||
**서버 레이어** (`src/lib/server/`):
|
||
- `team.ts` - 팀 Firestore CRUD, 🆕 **getTeamAIConfig/updateTeamAIConfig** (AI 설정 관리), 🆕 **generateUniqueTeamCode(locale)** (언어별 코드 생성)
|
||
- `user.ts` - 사용자 Firestore CRUD
|
||
- `topic.ts` - 주제 Firestore CRUD
|
||
- 🆕 `writing.ts` - 글 Firestore CRUD (createWriting, getWriting, updateWriting, deleteWriting, getUserWritings, getRecentWritings, isWritingOwner, 🆕 **getTopicWriters**)
|
||
- 🆕 `patternAnalysis.ts` - 패턴 분석 결과 Firestore 저장/조회 (contentHash 키, 영구 저장)
|
||
- 🆕 `teamCodeReservation.ts` - **팀 코드 예약 시스템** (Realtime DB transaction, atomic 예약, 5분 TTL, race condition 방지)
|
||
|
||
---
|
||
|
||
## 상태 관리 (Zustand)
|
||
|
||
### 📁 `src/store/`
|
||
|
||
| 스토어 | 파일명 | 설명 | 상태 |
|
||
|-------|--------|------|------|
|
||
| **Auth Store** | `authStore.ts` | 인증 상태 및 로그인 다이얼로그 (단순화됨) | ✅ 완료 |
|
||
| **User Progress Store** | `userProgressStore.ts` | 사용자 진행 상황 (레벨, XP) | ❌ 미구현 |
|
||
| **Notification Store** | `notificationStore.ts` | 알림 상태 | ❌ 미구현 |
|
||
|
||
**Auth Store 아키텍처 (2025-11-07 단순화)**:
|
||
- ✅ **user** - Firebase Auth 기반 통합 사용자 (익명 + 정식 계정)
|
||
- ✅ **isAuthenticated** - 로그인 여부 (익명 포함)
|
||
- ✅ **user.isAnonymous** - 익명/정식 계정 구분
|
||
- ✅ **loginAsUser()** - 팀 코드 로그인 (PIN 제거)
|
||
- ✅ **linkWithEmail()** - 이메일 계정 연결
|
||
- ✅ **linkWithGoogle()** - Google 계정 연결
|
||
- ❌ ~~currentStudent~~, ~~ownedStudents~~, ~~switchStudent()~~ 제거 (복잡도 감소)
|
||
|
||
---
|
||
|
||
## 설정 파일
|
||
|
||
### 📁 `src/config/`
|
||
|
||
| 파일 | 설명 | 상태 |
|
||
|------|------|------|
|
||
| `firebase.ts` | Firebase 초기화 및 설정 (Auth, Firestore, **Realtime DB**) | ✅ 완료 |
|
||
| `site.ts` | 사이트 메타데이터 및 설정 | ✅ 완료 |
|
||
|
||
**Firebase 서비스** (2025-11-17):
|
||
- ✅ Firebase Authentication (Email/Password, Google OAuth, Anonymous)
|
||
- ✅ Cloud Firestore (데이터베이스)
|
||
- ✅ Firebase Realtime Database (실시간 모니터링)
|
||
- ✅ Firebase Storage (이미지 저장)
|
||
- ✅ Firebase Analytics (분석)
|
||
|
||
**Firebase Config**:
|
||
- Firebase 설정은 `src/config/firebase.ts`에 하드코딩되어 있습니다
|
||
- Public API Key는 Firebase 프로젝트 설정에서 제한 가능
|
||
- 환경변수 대신 코드에 직접 포함 (클라이언트 SDK 표준 방식)
|
||
|
||
---
|
||
|
||
## 디렉토리 구조 요약
|
||
|
||
```
|
||
project_w/
|
||
├── database.rules.json # 🆕 Firebase Realtime DB Security Rules
|
||
│
|
||
├── functions/ # 🆕 Firebase Cloud Functions (서버리스 백엔드)
|
||
│ ├── src/
|
||
│ │ ├── index.ts # Entry point (export만)
|
||
│ │ ├── cleanup.ts # cleanupExpiredReservations (매 시간)
|
||
│ │ └── triggers/
|
||
│ │ ├── drafts.ts # cleanupExpiredDrafts (매일 새벽 3시)
|
||
│ │ ├── team.ts # onTeamDeleted (Firestore Trigger)
|
||
│ │ └── writing.ts # onWritingCreated (Firestore Trigger)
|
||
│ ├── lib/ # 빌드 결과 (tsc)
|
||
│ ├── package.json
|
||
│ └── tsconfig.json
|
||
│
|
||
├── messages/ # 🆕 다국어 번역 파일
|
||
│ ├── ko.json # 한국어 번역
|
||
│ └── en.json # 영어 번역
|
||
│
|
||
├── src/
|
||
├── i18n/ # 🆕 다국어 설정
|
||
│ ├── routing.ts # 라우팅 설정 (locales, defaultLocale)
|
||
│ └── request.ts # 번역 메시지 로더
|
||
│
|
||
├── middleware.ts # 🆕 next-intl 미들웨어 (언어 감지, 리다이렉트)
|
||
│
|
||
├── app/ # Next.js App Router
|
||
│ ├── layout.tsx # 루트 레이아웃 (메타데이터만)
|
||
│ ├── [locale]/ # 🆕 다국어 라우팅
|
||
│ │ ├── layout.tsx # locale별 레이아웃 (Provider, Navbar, Auth)
|
||
│ │ ├── page.tsx # ✅ 랜딩 페이지 (/[locale]) - 🆕 전체 번역 완료
|
||
│ │ ├── home/
|
||
│ │ │ └── page.tsx # ✅ 유저 홈 페이지 (/[locale]/home) - 🆕 전체 번역 완료
|
||
│ │ ├── write/
|
||
│ │ │ └── page.tsx # ✅ 글쓰기 페이지 (/[locale]/write) - 🆕 실시간 모니터링
|
||
│ │ ├── test/
|
||
│ │ │ └── page.tsx # ✅ 테스트 페이지 (/[locale]/test)
|
||
│ │ └── team/ # ✅ 팀 관리 페이지들
|
||
│ │ ├── page.tsx # ✅ 팀 목록 (/[locale]/team)
|
||
│ │ ├── create/
|
||
│ │ │ └── page.tsx # ✅ 팀 생성 (/[locale]/team/create)
|
||
│ │ └── [teamId]/
|
||
│ │ ├── page.tsx # ✅ 팀 멤버 페이지 (/[locale]/team/[teamId])
|
||
│ │ └── manage/
|
||
│ │ └── page.tsx # ✅ 팀 관리 페이지 (/[locale]/team/[teamId]/manage)
|
||
│ ├── globals.css
|
||
│ └── favicon.ico
|
||
│
|
||
├── components/ # React 컴포넌트
|
||
│ ├── auth/ # ✅ 인증 (로그인, 프로필, 팀 코드)
|
||
│ ├── landing/ # ✅ 랜딩 페이지 카드들 (다국어 지원)
|
||
│ ├── navigation/ # ✅ 네비게이션 바 (다국어 지원)
|
||
│ │ ├── Navbar.tsx # 다국어 링크 텍스트
|
||
│ │ └── LocaleSwitcher.tsx # 🆕 언어 전환 버튼
|
||
│ ├── seo/ # ✅ SEO 컴포넌트
|
||
│ ├── ui/ # ✅ Chakra UI 기본
|
||
│ ├── writing/ # ✅ 글쓰기 에디터
|
||
│ │ ├── WritingEditor.tsx # 순수 텍스트 에디터 (포맷팅 없음)
|
||
│ │ ├── TopicSelector.tsx # ✅ 주제 선택 컴포넌트 (팀/개인 배지)
|
||
│ │ ├── CreateTopicDialog.tsx # ✅ 개인 주제 생성
|
||
│ │ └── CreateTeamTopicDialog.tsx # ✅ 팀 주제 생성
|
||
│ ├── team/ # ✅ 팀 관련
|
||
│ │ ├── TeamTopicManager.tsx # ✅ 팀 주제 관리
|
||
│ │ ├── SecurityLevelSelector.tsx # 보안 레벨 선택 (RadioCard, 애니메이션)
|
||
│ │ ├── AllowListManager.tsx # 명단 관리 (TagsInput)
|
||
│ │ ├── TopicMemberAnalysisSection.tsx # 주제별 학생 분석 (UI만)
|
||
│ │ └── LiveWritingMonitor.tsx # 🆕 실시간 글쓰기 모니터링 (Realtime DB)
|
||
│ └── [미구현]
|
||
│ ├── lesson/ # 학습 컴포넌트
|
||
│ ├── sticker/ # 스티커 컴포넌트
|
||
│ ├── level/ # 레벨 시스템
|
||
│ ├── profile/ # 프로필 컴포넌트
|
||
│ ├── notification/ # 알림 컴포넌트
|
||
│ └── admin/ # 관리자 컴포넌트
|
||
│
|
||
├── config/ # ✅ 설정
|
||
│ ├── firebase.ts
|
||
│ └── site.ts
|
||
│
|
||
├── managers/ # ✅ 비즈니스 로직 (Manager 패턴)
|
||
│ ├── ManagerBase.ts # 기본 Manager 클래스
|
||
│ ├── WritingManager.ts # 글쓰기 관리
|
||
│ ├── WritingSessionManager.ts # 🆕 실시간 세션 관리 (Realtime DB)
|
||
│ ├── TopicManager.ts # 주제 관리
|
||
│ ├── TeamManager.ts # 팀 관리
|
||
│ ├── UserManager.ts # 사용자 관리
|
||
│ ├── DraftManager.ts # 글조각 관리 (localStorage + Realtime DB 하이브리드)
|
||
│ └── [미구현]
|
||
│ ├── LevelManager.ts
|
||
│ └── StickerManager.ts
|
||
│
|
||
├── data/ # ✅ 정적 데이터
|
||
│ └── classCodeWords.ts # ✅ 한글 팀 코드 단어 (형용사, 색상, 동물)
|
||
│
|
||
├── services/ # 데이터 레이어 (Firestore/API 호출)
|
||
│ ├── firebaseAuth.ts # ✅ 인증 (이메일, Google, Anonymous)
|
||
│ ├── classroomService.ts # ✅ 클래스룸 CRUD
|
||
│ ├── studentService.ts # ✅ 학생 CRUD, PIN 관리
|
||
│ ├── firestore.ts # ✅ Firestore CRUD
|
||
│ └── [미구현]
|
||
│ ├── levelSystem.ts
|
||
│ └── stickerSystem.ts
|
||
│
|
||
├── store/ # Zustand 상태 관리
|
||
│ ├── authStore.ts # ✅ 인증 상태 (currentStudent 중심)
|
||
│ └── [미구현]
|
||
│ ├── userProgressStore.ts
|
||
│ └── notificationStore.ts
|
||
│
|
||
├── theme/ # ✅ Chakra UI 테마
|
||
│ └── system.ts
|
||
│
|
||
├── types/ # TypeScript 타입
|
||
│ ├── topic.ts # ✅ 주제 관련 타입 (Enum + 유틸 함수)
|
||
│ ├── team.ts # ✅ 팀 관련 타입 (Enum)
|
||
│ ├── firestoreUser.ts # ✅ 사용자 타입 (FirestoreUser, User)
|
||
│ ├── draft.ts # ✅ 글조각 타입
|
||
│ ├── writingPattern.ts # ✅ 패턴 분석 타입
|
||
│ ├── writingSession.ts # 🆕 실시간 모니터링 타입 (WritingStats, PreviewRequest/Response)
|
||
│ ├── api/ # ✅ API Request/Response 타입
|
||
│ │ ├── topic.ts # ✅ 주제 API (팀/개인 주제)
|
||
│ │ ├── team.ts # ✅ 팀 API
|
||
│ │ ├── user.ts # ✅ 사용자 API
|
||
│ │ └── writing.ts # ✅ 글쓰기 API
|
||
│ └── [미구현]
|
||
│
|
||
└── utils/ # 유틸리티 함수
|
||
├── passwordStrength.ts # ✅ 비밀번호 강도 계산
|
||
├── passwordSecurity.ts # ✅ HIBP API 연동
|
||
└── classCodeGenerator.ts # ✅ 팀 코드 생성/검증/정규화
|
||
```
|
||
|
||
---
|
||
|
||
## 다음 구현 단계
|
||
|
||
### Phase 1: 핵심 기능 (현재)
|
||
1. ✅ 프로젝트 설정 및 인프라
|
||
2. ✅ 인증 시스템 (로그인)
|
||
3. ✅ 랜딩 페이지
|
||
4. ✅ 회원가입 기능 (페이드 전환 + HIBP 보안 검증)
|
||
5. ✅ 인증 기반 라우팅 (`/`와 `/home` 분리)
|
||
6. ✅ 글쓰기 페이지 (Tiptap 에디터, 저장 시 AI 분석, 분석 결과 DB 저장)
|
||
7. ✅ 주제 선택 및 관리 (자유/개인 주제, 템플릿)
|
||
8. ✅ **팀 코드 시스템** (완료)
|
||
- ✅ 한글 팀 코드 생성 ("춤추는 파란 사자")
|
||
- ✅ Anonymous Auth 학생 로그인
|
||
- ✅ 팀/학생 관리 서비스 (ownerId 기반)
|
||
- ✅ PIN 인증 (SHA-256)
|
||
- ✅ 정식 계정 연결 (linkWithCredential)
|
||
- ✅ currentStudent 중심 authStore 재설계
|
||
- ✅ 학생 로그인 UI (3단계 플로우, 이름 입력, 완료 화면)
|
||
- ✅ 팀 관리 UI (목록/생성/멤버 페이지/관리 페이지)
|
||
- ✅ 용어 변경: "클래스" → "팀", "교사" → "소유자"
|
||
9. 🚧 **다음**: 내가 쓴 글 목록
|
||
|
||
### Phase 2: 팀 코드 UI 완성
|
||
- 학생 로그인 UI (팀 코드 입력 → 이름 선택 → PIN)
|
||
- 팀 관리 (팀 생성, 멤버 관리)
|
||
- LoginDialog에 학생 탭 추가
|
||
|
||
### Phase 3: 학습 시스템
|
||
- `/learn` 학습 페이지
|
||
- 레슨 콘텐츠 및 진행 상황
|
||
|
||
### Phase 4: 게임화
|
||
- 레벨업 시스템
|
||
- `/stickers` 스티커 페이지
|
||
|
||
### Phase 5: 사용자 경험
|
||
- ProfileDialog 마이페이지 (Dialog 형식)
|
||
- 검색 및 알림
|
||
|
||
### Phase 6: 고급 기능
|
||
- 부모님 모드 (계정 연결)
|
||
- 관리자 패널
|
||
|
||
---
|
||
|
||
## 관련 문서
|
||
|
||
- [TECH_STACK.md](./TECH_STACK.md) - 기술 스택 및 개발 환경 설정
|
||
- [DATA_MODELS.md](./DATA_MODELS.md) - 데이터베이스 스키마 및 타입 정의
|
||
- [ROADMAP.md](./ROADMAP.md) - 개발 우선순위 및 로드맵
|
||
- [CLAUDE.md](./CLAUDE.md) - Claude Code 작업 가이드
|
||
|
||
---
|
||
|
||
© 2024 BlueNovaLab. All rights reserved. |