359 lines
14 KiB
Markdown
359 lines
14 KiB
Markdown
# 라온누리 - 개발 로드맵
|
|
|
|
> 최종 업데이트: 2025-11-10 (5단계 보안 레벨 시스템, User 타입 최소화)
|
|
|
|
초등학생을 위한 창작 글쓰기 교육 플랫폼 개발 계획
|
|
|
|
---
|
|
|
|
## 현재 개발 단계
|
|
|
|
**Phase 1: 핵심 기능** (진행 중 - 95% 완료)
|
|
|
|
---
|
|
|
|
## Phase 1: 핵심 기능 (현재)
|
|
|
|
**목표**: 사용자가 가입하고 글을 작성할 수 있는 기본 기능 완성
|
|
|
|
### ✅ 완료된 작업
|
|
|
|
| 항목 | 설명 | 완료일 |
|
|
|-----|------|-------|
|
|
| 프로젝트 설정 | Next.js 16, React 19, TypeScript 설정 | 2025-10-25 |
|
|
| Firebase 연동 | Firebase Auth 설정 및 초기화 | 2025-10-26 |
|
|
| 로그인 기능 | 이메일/비밀번호 로그인 | 2025-10-27 |
|
|
| Google OAuth | Google 소셜 로그인 | 2025-10-27 |
|
|
| 상태 관리 | Zustand 인증 스토어 구현 | 2025-10-27 |
|
|
| 랜딩 페이지 | Hero, Features, How It Works, CTA 섹션 | 2025-10-28 |
|
|
| 네비게이션 | Navbar 및 다크모드 지원 | 2025-10-28 |
|
|
| SEO 최적화 | 메타데이터, OpenGraph, StructuredData | 2025-10-28 |
|
|
| 커스텀 테마 | Chakra UI v3 테마 시스템 구축 | 2025-10-28 |
|
|
| **회원가입 기능** | **LoginDialog 페이드 전환, 비밀번호 강도 게이지, HIBP API 연동** | **2025-10-28** |
|
|
| **인증 기반 라우팅** | **`/`와 `/home` 분리, 자동 리다이렉트 구현** | **2025-10-29** |
|
|
| **글쓰기 페이지** | **Tiptap 순수 텍스트 에디터 (포맷팅 없음), Editable 제목, LocalStorage 자동 저장, 하단 고정 버튼** | **2025-10-30** |
|
|
| **Firestore 연동** | **글 저장/불러오기/삭제 서비스 함수 구현** | **2025-10-30** |
|
|
| **Manager 패턴 도입** | **WritingManager 구현 (싱글톤), Firestore 호출 레이어 분리, Firebase Functions 전환 대비** | **2025-10-30** |
|
|
| **주제 선택 기능** | **TopicManager, TopicSelector 컴포넌트, 개인 주제 시스템, 템플릿 미리채우기 (제목/내용)** | **2025-10-30** |
|
|
| **개인 주제 생성 UI** | **CreateTopicDialog 구현, 태그 입력 필드 (키보드 네비게이션, 방향키 선택, Backspace/Delete 삭제)** | **2025-10-31** |
|
|
| **팀 코드 시스템 (백엔드)** | **한글 팀 코드 생성 ("춤추는 파란 사자"), Anonymous Auth, teamService/studentService, PIN SHA-256, currentStudent 중심 authStore 재설계, 정식 계정 연결 (linkWithCredential)** | **2025-11-06** |
|
|
| **팀 관리 UI** | **팀 목록(/team), 팀 생성(/team/create), 멤버 페이지(/team/[teamId]), 관리 페이지(/team/[teamId]/manage), 학생 로그인 플로우 개선 (이름 입력, 완료 화면)** | **2025-11-06** |
|
|
| **용어 변경** | **"클래스" → "팀", "교사" → "소유자", ownerId 기반 시스템, 누구나 팀 생성 가능** | **2025-11-06** |
|
|
| **Semantic 토큰 적용** | **브랜드 컬러 우선 사용, fg/bg/border 토큰, 다크 모드 대응** | **2025-11-06** |
|
|
| **학생 관리 기능** | **팀 관리 페이지에 학생별 관리 메뉴 (이름 수정, 강퇴), Menu + Dialog UI** | **2025-11-07** |
|
|
| **매니저 패턴 API 전환** | **TeamManager, StudentManager를 API 호출 방식으로 전환, Firestore 직접 호출 제거** | **2025-11-07** |
|
|
| **API 타입 시스템 구축** | **ApiResponse, HttpMethod Enum, Team/Student API 타입 정의 (23개 엔드포인트)** | **2025-11-07** |
|
|
| **클라이언트 캐싱 구현** | **BaseManager에 in-memory 캐싱 (TTL, 자동 무효화), callApiWithCache 메서드** | **2025-11-07** |
|
|
| **API 명세서 작성** | **API_SPEC.md 작성 (전체 엔드포인트, 권한, 캐싱 전략)** | **2025-11-07** |
|
|
| **타입 Enum화** | **TeamSecurityMode, TopicCategory/Difficulty/OwnerType을 Enum으로 전환** | **2025-11-07** |
|
|
| **팀 주제 시스템** | **팀 소유자가 팀 주제 생성 가능, ownerId = teamId 방식, TopicSelector에 배지 표시** | **2025-11-07** |
|
|
| **아키텍처 단순화** | **students → users 컬렉션 전환, PIN 제거, UID 기반 통합, 팀별 닉네임 시스템, authStore 단순화** | **2025-11-07** |
|
|
| **그룹 기능 완전 제거** | **Group 관련 타입/API/UI 제거, 팀(Team) 기능만 사용** | **2025-11-07** |
|
|
| **팀 목록 조회 개선** | **getMyTeams() 소유+참여 팀 모두 반환, getAllUserTeams() 서버 함수 추가, 중복 제거** | **2025-11-07** |
|
|
| **UserManager 개선** | **getUser() 404 시 null 반환, 팀 코드 로그인 시 신규 사용자 생성 플로우 개선** | **2025-11-07** |
|
|
| **TopicSelector UI 개선** | **드롭다운 메뉴에 팀/개인 주제 배지 표시, 선택 전에도 주제 타입 확인 가능** | **2025-11-07** |
|
|
| **T_ prefix 제거** | **팀 주제 ownerId에서 T_ prefix 제거, ownerId = teamId 직접 사용** | **2025-11-07** |
|
|
| **5단계 보안 레벨 시스템** | **TeamSecurityLevel enum (1-5), 팀별 보안 정책 선택, 명단 관리 API** | **2025-11-10** |
|
|
| **User 타입 최소화** | **FirestoreUser/User 분리, Firebase Auth를 Single Source of Truth로, 데이터 중복 제거** | **2025-11-10** |
|
|
| **닉네임 저장 위치 변경** | **users.nicknames → team.members[uid].nickname 이동, TeamMember 타입 확장** | **2025-11-10** |
|
|
| **authStore DB 연동** | **combineUserData로 Firebase Auth + Firestore 자동 결합, userManager.getUser() 활용** | **2025-11-10** |
|
|
|
|
### 🚧 진행 중
|
|
|
|
| 항목 | 설명 | 진행률 |
|
|
|-----|------|-------|
|
|
|
|
### 📋 예정 작업
|
|
|
|
| 항목 | 설명 | 우선순위 | 예상 일정 |
|
|
|-----|------|---------|---------|
|
|
| **Next.js API Routes 구현** | **Team/User API 엔드포인트 구현, ID Token 검증, 권한 체크** | 🔴 **긴급** | **2025-11-08** |
|
|
| **서버 사이드 Redis 캐싱** | **API Routes에 Redis 캐싱, Rate Limiting 추가** | 🟡 중간 | 2025-11-09 |
|
|
| 내가 쓴 글 목록 | `/home`에 최근 글 표시, 글 목록 페이지 | 🔴 높음 | 2025-11-10 |
|
|
| 글 수정 기능 | 기존 글 불러와서 수정 | 🔴 높음 | 2025-11-11 |
|
|
| ~~firestore.ts userId→studentId 변경~~ | ~~글쓰기 기능과 팀 코드 시스템 통합~~ | ~~🟡 중간~~ | ✅ **완료 (2025-11-07)** |
|
|
| 이미지 업로드 | Firebase Storage 연동 | 🟡 중간 | 2025-11-13 |
|
|
|
|
**Phase 1 완료 목표**: 2025년 11월 15일
|
|
|
|
---
|
|
|
|
## Phase 2: 학습 시스템
|
|
|
|
**목표**: 체계적인 학습 콘텐츠 제공
|
|
|
|
**예상 기간**: 2025년 11월 16일 ~ 12월 15일
|
|
|
|
### 주요 기능
|
|
|
|
| 항목 | 설명 | 우선순위 |
|
|
|-----|------|---------|
|
|
| 학습 페이지 UI | `/learn` 페이지 레이아웃 | 🔴 높음 |
|
|
| 레슨 목록 | 카테고리별 레슨 표시 | 🔴 높음 |
|
|
| 레슨 상세 페이지 | 이론, 예시, 연습문제 표시 | 🔴 높음 |
|
|
| 진행 상황 트래킹 | 완료한 레슨 체크 및 진행률 | 🔴 높음 |
|
|
| 퀴즈/연습 문제 | 객관식, 주관식 문제 시스템 | 🟡 중간 |
|
|
| 레슨 검색/필터 | 난이도, 카테고리별 필터링 | 🟢 낮음 |
|
|
|
|
### 데이터 준비
|
|
|
|
- [ ] 초급 레슨 콘텐츠 작성 (10개)
|
|
- [ ] 중급 레슨 콘텐츠 작성 (10개)
|
|
- [ ] 연습 문제 제작 (각 레슨당 3-5개)
|
|
|
|
**Phase 2 완료 목표**: 2025년 12월 15일
|
|
|
|
---
|
|
|
|
## Phase 3: 게임화 요소
|
|
|
|
**목표**: 학습 동기 부여를 위한 게임화 시스템
|
|
|
|
**예상 기간**: 2025년 12월 16일 ~ 2026년 1월 31일
|
|
|
|
### 주요 기능
|
|
|
|
| 항목 | 설명 | 우선순위 |
|
|
|-----|------|---------|
|
|
| 레벨 시스템 | 경험치 계산 및 레벨업 로직 | 🔴 높음 |
|
|
| 레벨업 애니메이션 | 축하 모달 및 이펙트 | 🟡 중간 |
|
|
| 스티커 페이지 UI | `/stickers` 갤러리 레이아웃 | 🔴 높음 |
|
|
| 스티커 획득 시스템 | 조건 확인 및 자동 부여 | 🔴 높음 |
|
|
| 스티커 알림 | 획득 시 축하 애니메이션 | 🟡 중간 |
|
|
| 경험치 표시 | 네비게이션 또는 프로필에 XP바 | 🟢 낮음 |
|
|
| 연속 출석 시스템 | Streak 계산 및 보상 | 🟡 중간 |
|
|
|
|
### 데이터 준비
|
|
|
|
- [ ] 스티커 디자인 제작 (50개)
|
|
- [ ] 스티커 획득 조건 정의
|
|
- [ ] 레벨별 경험치 테이블 설계
|
|
|
|
**Phase 3 완료 목표**: 2026년 1월 31일
|
|
|
|
---
|
|
|
|
## Phase 4: 사용자 경험 강화
|
|
|
|
**목표**: 사용자 편의성 및 관리 기능 개선
|
|
|
|
**예상 기간**: 2026년 2월 1일 ~ 3월 15일
|
|
|
|
### 주요 기능
|
|
|
|
| 항목 | 설명 | 우선순위 |
|
|
|-----|------|---------|
|
|
| **ProfileDialog (마이페이지)** | **Dialog 형식 대시보드 (탭 기반)** | 🔴 높음 |
|
|
| ├─ 내정보 탭 | 프로필 정보, 레벨, XP 표시 | 🔴 높음 |
|
|
| ├─ 내글 탭 | 작성한 글 목록 (페이지네이션) | 🔴 높음 |
|
|
| ├─ 통계 탭 | 글 수, 레벨, 스티커 통계 차트 | 🟡 중간 |
|
|
| └─ 설정 탭 | 프로필 편집, 비밀번호 변경, 계정 설정 | 🟡 중간 |
|
|
| 글 검색 | 제목/내용 기반 검색 | 🟡 중간 |
|
|
| 알림 시스템 | 인앱 알림 (스티커, 레벨업) | 🟢 낮음 |
|
|
| 알림 센터 | 알림 목록 및 설정 | 🟢 낮음 |
|
|
|
|
**Dialog 구조**:
|
|
```
|
|
ProfileDialog (UserProfileButton 클릭 시 열림)
|
|
├─ Tabs: 내정보 | 내글 | 통계 | 설정
|
|
├─ 내정보: ProfileCard, LevelBadge, ExperienceBar
|
|
├─ 내글: WritingHistory (목록 + 페이지네이션)
|
|
├─ 통계: StatsWidget, 차트
|
|
└─ 설정: ProfileEditForm, PasswordChangeForm
|
|
```
|
|
|
|
**Phase 4 완료 목표**: 2026년 3월 15일
|
|
|
|
---
|
|
|
|
## Phase 5: 고급 기능
|
|
|
|
**목표**: 부모님 참여 및 관리자 기능
|
|
|
|
**예상 기간**: 2026년 3월 16일 ~ 5월 31일
|
|
|
|
### 주요 기능
|
|
|
|
| 항목 | 설명 | 우선순위 | 상태 |
|
|
|-----|------|---------|------|
|
|
| ~~팀 관리 기능~~ | ~~팀 생성, 멤버 관리~~ | ~~🔴 높음~~ | ✅ **백엔드 완료 (Phase 1)** |
|
|
| ~~팀 코드 시스템~~ | ~~한글 코드, Anonymous Auth~~ | ~~🔴 높음~~ | ✅ **백엔드 완료 (Phase 1)** |
|
|
| 부모님 모드 | 자녀 진행 상황 대시보드 (정식 계정 연결 활용) | 🔴 높음 | ⏳ 예정 |
|
|
| 피드백 시스템 | 글에 댓글/평점 작성 | 🔴 높음 | ⏳ 예정 |
|
|
| 학습 리포트 | 주간/월간 활동 리포트 | 🟡 중간 | ⏳ 예정 |
|
|
| 목표 설정 | 일일/주간 목표 설정 | 🟢 낮음 | ⏳ 예정 |
|
|
| 관리자 패널 | 주제/레슨 관리 UI | 🔴 높음 | ⏳ 예정 |
|
|
| 사용자 관리 | 사용자 목록, 통계 | 🟡 중간 | ⏳ 예정 |
|
|
| 콘텐츠 에디터 | 주제/레슨 CRUD | 🔴 높음 | ⏳ 예정 |
|
|
| 스티커 에디터 | 스티커 업로드 및 관리 | 🟡 중간 | ⏳ 예정 |
|
|
|
|
### 역할 시스템
|
|
|
|
```typescript
|
|
enum UserRole {
|
|
STUDENT = 'student', // 학생
|
|
PARENT = 'parent', // 부모님
|
|
TEAM_OWNER = 'team_owner', // 팀 소유자
|
|
ADMIN = 'admin', // 관리자
|
|
}
|
|
```
|
|
|
|
**Phase 5 완료 목표**: 2026년 5월 31일
|
|
|
|
---
|
|
|
|
## Phase 6: 최적화 및 확장 (향후 계획)
|
|
|
|
**예상 기간**: 2026년 6월 이후
|
|
|
|
### 성능 최적화
|
|
|
|
- [ ] 이미지 최적화 (Next.js Image)
|
|
- [ ] 번들 크기 최적화
|
|
- [ ] 코드 스플리팅 개선
|
|
- [ ] Lighthouse 점수 개선 (목표: 95+)
|
|
|
|
### 추가 기능 (검토 중)
|
|
|
|
- [ ] 네이버/카카오 소셜 로그인
|
|
- [ ] 글 공유 기능 (SNS, 링크)
|
|
- [ ] 친구 시스템 (팔로우, 친구 추가)
|
|
- [ ] 글쓰기 대회/챌린지
|
|
- [ ] AI 글쓰기 도우미 (맞춤법, 문법 제안)
|
|
- [ ] 음성 녹음 기능
|
|
- [ ] 그림 그리기 도구 통합
|
|
- [ ] 모바일 앱 (React Native)
|
|
|
|
---
|
|
|
|
## 우선순위 정의
|
|
|
|
| 기호 | 우선순위 | 설명 |
|
|
|-----|---------|------|
|
|
| 🔴 | 높음 | 핵심 기능, 빠른 개발 필요 |
|
|
| 🟡 | 중간 | 중요하지만 유연한 일정 |
|
|
| 🟢 | 낮음 | 추가 개선 사항, 여유 있을 때 |
|
|
|
|
---
|
|
|
|
## 마일스톤
|
|
|
|
### M1: MVP 출시 (2025년 11월 15일)
|
|
- 회원가입/로그인
|
|
- 글쓰기 기본 기능
|
|
- 주제 선택 및 저장
|
|
|
|
### M2: 학습 시스템 추가 (2025년 12월 15일)
|
|
- 레슨 콘텐츠 제공
|
|
- 진행 상황 트래킹
|
|
|
|
### M3: 게임화 완성 (2026년 1월 31일)
|
|
- 레벨 시스템
|
|
- 스티커 컬렉션
|
|
|
|
### M4: 베타 출시 (2026년 3월 15일)
|
|
- ProfileDialog (마이페이지) 및 통계
|
|
- 알림 시스템
|
|
|
|
### M5: 정식 출시 (2026년 5월 31일)
|
|
- 부모님 모드
|
|
- 관리자 패널
|
|
|
|
---
|
|
|
|
## 개발 원칙
|
|
|
|
### 1. 사용자 중심 설계
|
|
- 초등학생이 쉽게 사용할 수 있는 직관적 UI
|
|
- 읽기 쉬운 큰 글씨와 명확한 아이콘
|
|
- 복잡한 기능은 단계적으로 안내
|
|
|
|
### 2. 성능 최적화
|
|
- 빠른 페이지 로딩 (목표: < 2초)
|
|
- 부드러운 애니메이션 (60fps)
|
|
- 효율적인 데이터 로딩 (페이지네이션, 캐싱)
|
|
|
|
### 3. 접근성 (Accessibility)
|
|
- 키보드 네비게이션 지원
|
|
- 스크린 리더 호환
|
|
- WCAG 2.1 AA 준수
|
|
|
|
### 4. 보안 및 개인정보
|
|
- 학생 개인정보 보호
|
|
- Firestore 보안 규칙 철저히 적용
|
|
- HTTPS 통신 필수
|
|
|
|
### 5. 확장 가능성
|
|
- 모듈화된 컴포넌트 구조
|
|
- 타입 안전성 (TypeScript)
|
|
- 명확한 데이터 모델
|
|
|
|
---
|
|
|
|
## 기술 부채 관리
|
|
|
|
### 현재 기술 부채
|
|
|
|
| 항목 | 설명 | 해결 계획 |
|
|
|-----|------|---------|
|
|
| ~~Firestore 미연동~~ | ~~DB 미구축~~ | ✅ 해결됨 (2025-10-30) |
|
|
| 테스트 부재 | 단위/통합 테스트 없음 | Phase 4에서 추가 예정 |
|
|
| 에러 바운더리 | 전역 에러 처리 미흡 | Phase 4에서 개선 예정 |
|
|
| minH 스크롤 이슈 | write 페이지 불필요한 스크롤 | 검토 필요 |
|
|
|
|
---
|
|
|
|
## 팀 구성 (현재)
|
|
|
|
| 역할 | 담당자 | 주요 업무 |
|
|
|-----|--------|---------|
|
|
| Full Stack Developer | - | 전체 개발 |
|
|
| UI/UX Designer | - | 디자인 및 사용자 경험 |
|
|
| Content Creator | - | 레슨/주제 콘텐츠 작성 |
|
|
|
|
---
|
|
|
|
## 성공 지표 (KPI)
|
|
|
|
### MVP 단계 (M1)
|
|
|
|
- [ ] 회원가입 사용자 50명
|
|
- [ ] 작성된 글 100개 이상
|
|
- [ ] 평균 세션 시간 5분 이상
|
|
|
|
### 베타 단계 (M4)
|
|
|
|
- [ ] 활성 사용자 200명
|
|
- [ ] 일일 활성 사용자(DAU) 50명
|
|
- [ ] 레슨 완료율 70% 이상
|
|
|
|
### 정식 출시 (M5)
|
|
|
|
- [ ] 활성 사용자 1,000명
|
|
- [ ] 일일 활성 사용자(DAU) 200명
|
|
- [ ] 사용자 만족도 4.5/5.0 이상
|
|
- [ ] 평균 재방문율 60% 이상
|
|
|
|
---
|
|
|
|
## 리스크 관리
|
|
|
|
| 리스크 | 발생 가능성 | 영향도 | 대응 방안 |
|
|
|-------|-----------|-------|---------|
|
|
| 개발 일정 지연 | 중간 | 높음 | 기능 우선순위 재조정, MVP 먼저 출시 |
|
|
| 사용자 이탈 | 낮음 | 높음 | 게임화 요소 강화, 정기적 콘텐츠 업데이트 |
|
|
| Firebase 비용 초과 | 낮음 | 중간 | 사용량 모니터링, 쿼리 최적화 |
|
|
| 콘텐츠 부족 | 중간 | 중간 | 외부 작가 섭외, 사용자 제작 콘텐츠 |
|
|
|
|
---
|
|
|
|
## 관련 문서
|
|
|
|
- [PROJECT_STRUCTURE.md](./PROJECT_STRUCTURE.md) - 프로젝트 구조
|
|
- [TECH_STACK.md](./TECH_STACK.md) - 기술 스택
|
|
- [DATA_MODELS.md](./DATA_MODELS.md) - 데이터 모델
|
|
- [CLAUDE.md](./CLAUDE.md) - Claude Code 가이드
|
|
|
|
---
|
|
|
|
© 2024 BlueNovaLab. All rights reserved. |