716 lines
26 KiB
Markdown
716 lines
26 KiB
Markdown
# PAGE_FEATURES.md - 페이지별 기능 명세
|
||
|
||
> 와이어프레임 작성을 위한 페이지별 기능 설명 문서
|
||
> 모든 경로는 `/{locale}` 접두어 생략 (예: `/student/home` → 실제 `/ko/student/home`)
|
||
|
||
---
|
||
|
||
## 1. 전체 페이지 맵
|
||
|
||
| # | 카테고리 | 경로 | 페이지명 | 접근 권한 |
|
||
|---|---------|------|---------|----------|
|
||
| 1 | 랜딩 | `/` | 루트 리다이렉트 | 전체 |
|
||
| 2 | 랜딩 | `/[locale]` | 랜딩 페이지 | 전체 |
|
||
| 3 | 리다이렉트 | `/home` | 역할별 홈 리다이렉트 | 로그인 |
|
||
| 4 | 학생 | `/student/home` | 학생 홈 | 학생 |
|
||
| 5 | 교사 | `/teacher/home` | 교사 홈 | 교사 |
|
||
| 6 | 교사 | `/teacher/pending-approval` | 교사 승인 대기 | 교사(미승인) |
|
||
| 7 | 관리자 | `/admin/teacher-approvals` | 교사 승인 관리 | 관리자 |
|
||
| 8 | 관리자 | `/admin/ip-whitelist` | IP 화이트리스트 | 관리자 |
|
||
| 9 | 팀 | `/team` | 내 팀 목록 | 로그인 |
|
||
| 10 | 팀 | `/team/all` | 공개 팀 탐색 | 로그인 |
|
||
| 11 | 팀 | `/team/create` | 팀 생성 | 교사 |
|
||
| 12 | 팀 | `/team/[teamId]` | 팀 상세 | 조건부 |
|
||
| 13 | 팀 | `/team/[teamId]/manage` | 팀 관리 | 팀 소유자 |
|
||
| 14 | 팀 | `/invite/[inviteId]` | 초대 수락 | 전체 |
|
||
| 15 | 글쓰기 | `/write` | 글쓰기 모드 선택 | 로그인 |
|
||
| 16 | 글쓰기 | `/write/text` | 텍스트 글쓰기 | 로그인 |
|
||
| 17 | 글쓰기 | `/write/image` | 이미지 글쓰기 | 로그인 |
|
||
| 18 | 글쓰기 | `/write/easy` | 쉬운 글쓰기 | 로그인 |
|
||
| 19 | 글쓰기 | `/write/fill-in-blank` | 빈칸 채우기 | 로그인 |
|
||
| 20 | 글쓰기 | `/write/edit/[id]` | 글 수정 | 작성자 |
|
||
| 21 | 이미지 | `/imageUpload` | 이미지 업로드 | 로그인 |
|
||
| 22 | 인터랙션 | `/interaction` | 인터랙티브 뷰어 | 로그인 |
|
||
| 23 | 커리큘럼 | `/curriculum` | 커리큘럼 목록 | 로그인 |
|
||
| 24 | 커리큘럼 | `/curriculum/[curriculumId]` | 커리큘럼 상세 | 로그인 |
|
||
| 25 | 커리큘럼 | `/lesson/[lessonId]` | 수업 상세 | 로그인 |
|
||
| 26 | 커리큘럼 | `/my-curriculums` | 내 커리큘럼 | 로그인 |
|
||
| 27 | 사용자 | `/my` | 마이페이지 | 로그인 |
|
||
| 28 | 사용자 | `/writing` | 내 글 목록 | 로그인 |
|
||
| 29 | 사용자 | `/writing/[writingId]` | 글 상세 보기 | 로그인 |
|
||
| 30 | 요금제 | `/pricing` | 요금제 안내 | 전체 |
|
||
|
||
---
|
||
|
||
## 2. 카테고리별 상세 설명
|
||
|
||
---
|
||
|
||
### 2.1 랜딩/인증
|
||
|
||
#### `/` - 루트 리다이렉트
|
||
- 브라우저 언어에 따라 `/{locale}`으로 자동 리다이렉트
|
||
- UI 없음
|
||
|
||
---
|
||
|
||
#### `/[locale]` - 랜딩 페이지
|
||
|
||
**접근 권한**: 전체 (로그인 사용자는 역할별 홈으로 자동 리다이렉트)
|
||
|
||
**조건부 동작**:
|
||
- 로그인 + 교사 → `/teacher/home` 자동 이동
|
||
- 로그인 + 학생 → `/student/home` 자동 이동
|
||
- 비로그인 → 랜딩 페이지 표시
|
||
|
||
**주요 기능**:
|
||
- 서비스 소개 (사이트명, 태그라인, 부제목)
|
||
- **"시작하기" 버튼** → Google 로그인 모달 다이얼로그 오픈
|
||
- "이렇게 사용해요" 3단계 안내:
|
||
1. 회원가입
|
||
2. 만들기
|
||
3. 글쓰기
|
||
- 하단 CTA 섹션: 캐릭터 이미지(`hello.png`) + CTA 버튼
|
||
|
||
**이동 경로**: "시작하기" 버튼 → 로그인 다이얼로그 → 로그인 후 역할별 홈
|
||
|
||
---
|
||
|
||
#### `/home` - 역할별 홈 리다이렉트
|
||
|
||
**접근 권한**: 로그인 필수
|
||
|
||
**동작**: 교사 → `/teacher/home`, 학생 → `/student/home` 자동 리다이렉트
|
||
|
||
> **인증 방식**: 별도 로그인 페이지 없이 모달 다이얼로그로 Google 로그인 처리
|
||
|
||
---
|
||
|
||
### 2.2 학생 영역
|
||
|
||
#### `/student/home` - 학생 홈
|
||
|
||
**접근 권한**: 학생 역할 필수
|
||
|
||
**주요 기능**:
|
||
|
||
1. **환영 메시지**: 사용자 이름(또는 이메일 앞부분) + 부제목 표시
|
||
|
||
2. **빠른 액션 그리드** (3개 카드):
|
||
- "새 글쓰기" → `/write` 이동
|
||
- "내 팀" → `/team` 이동
|
||
- "팀 참가" → `/team/all` 이동
|
||
- 미구현 카드는 클릭 불가 + "개발 중" 오버레이
|
||
|
||
3. **팀 초대 알림** (대기 초대 있을 때만 표시):
|
||
- 각 초대: 팀 이름, 초대자 이름 표시
|
||
- **"수락"** / **"거절"** 버튼
|
||
|
||
4. **글쓰기 패턴 분석 바**: 클릭 시 WritingPatternDialog 오픈
|
||
|
||
5. **최근 활동 섹션**:
|
||
- 최근 작성 글 카드 그리드 표시
|
||
- **"전체 보기"** 버튼 → `/writing` 이동
|
||
- 글 삭제 가능
|
||
- **빈 상태**: "아직 작성한 글이 없어요" + **"글쓰기 시작"** 버튼 → `/write`
|
||
|
||
**다이얼로그**: 글쓰기 패턴 분석 결과
|
||
|
||
---
|
||
|
||
### 2.3 교사 영역
|
||
|
||
#### `/teacher/home` - 교사 홈
|
||
|
||
**접근 권한**: 교사 역할 필수
|
||
|
||
**주요 기능**:
|
||
- 환영 메시지 (사용자 이름 표시)
|
||
- **"내 팀 보기"** 버튼 → `/team` 이동
|
||
- **"팀 만들기"** 버튼 → `/team/create` 이동
|
||
|
||
**이동 경로**: `/team`, `/team/create`
|
||
|
||
---
|
||
|
||
#### `/teacher/pending-approval` - 교사 승인 대기
|
||
|
||
**접근 권한**: 로그인 필수 (교사 승인 전 상태)
|
||
|
||
**조건부 동작** (2가지 상태):
|
||
|
||
**승인 대기 상태** (기본):
|
||
- 시계 아이콘 + "승인 대기 중" 제목 + 설명 메시지
|
||
- **"상태 확인"** 버튼 → 서버에서 최신 승인 상태 조회 (승인되면 자동 반영)
|
||
- **"로그아웃"** 버튼
|
||
|
||
**거부 상태**:
|
||
- X 아이콘 + "거부됨" 제목 + 설명 메시지
|
||
- 거부 사유 표시 (사유가 있는 경우)
|
||
- "상태 확인" 버튼 없음 (로그아웃만 가능)
|
||
- **"로그아웃"** 버튼
|
||
|
||
---
|
||
|
||
### 2.4 관리자 영역
|
||
|
||
#### `/admin/teacher-approvals` - 교사 승인 관리
|
||
|
||
**접근 권한**: 관리자 전용 (403 시 "접근 권한 없음" 화면)
|
||
|
||
**데이터**: 승인 대기 중인 교사 목록
|
||
|
||
**주요 기능**:
|
||
- 대기 교사 테이블: 이름, 이메일, 액션 열
|
||
- 대기 교사 수 배지 표시
|
||
- **"승인"** 버튼 → 교사 승인 처리
|
||
- **"거부"** 버튼 → 거부 사유 입력 다이얼로그 → 거부 처리
|
||
|
||
---
|
||
|
||
#### `/admin/ip-whitelist` - IP 화이트리스트 관리
|
||
|
||
**접근 권한**: 관리자 전용 (403 시 "접근 권한 없음" 화면)
|
||
|
||
**주요 기능**:
|
||
- 활성화/비활성화 토글 스위치
|
||
- 현재 접속 IP 표시 + **"현재 IP 추가"** 버튼
|
||
- IP 목록 관리 (줄 단위 텍스트 입력, IP 개수 표시)
|
||
- **"저장"** 버튼
|
||
|
||
---
|
||
|
||
### 2.5 팀 관리
|
||
|
||
#### `/team` - 내 팀 목록
|
||
|
||
**접근 권한**: 로그인 필수
|
||
|
||
**데이터**: 사용자의 모든 팀 목록 → "소유 팀"과 "참여 팀"으로 분류
|
||
|
||
**주요 기능**:
|
||
- 헤더에 통계 표시: "총 {n}개, 소유 {n}, 참여 {n}"
|
||
- **"팀 만들기"** 버튼 → `/team/create` 이동
|
||
- **소유 팀 섹션** (FaCrown 아이콘): 내가 만든 팀 카드 그리드
|
||
- 팀 카드 클릭 → `/team/{teamId}/manage` (관리 페이지)
|
||
- **참여 팀 섹션** (FaUserFriends 아이콘): 참여 중인 팀 카드 그리드
|
||
- 팀 카드 클릭 → `/team/{teamId}` (상세 페이지)
|
||
|
||
**팀 카드 표시 정보**: 팀 이름, 커버 이미지, 멤버 수, AI 활성화 여부
|
||
|
||
---
|
||
|
||
#### `/team/all` - 공개 팀 탐색
|
||
|
||
**접근 권한**: 전체 (로그인 불필요)
|
||
|
||
**데이터**: 공개 팀 목록 (10개씩 페이지네이션)
|
||
|
||
**주요 기능**:
|
||
- 공개 팀 카드 그리드 표시
|
||
- **"새로고침"** 버튼 → 목록 다시 로드
|
||
- **"더 보기"** 버튼 → 다음 페이지 로드 (커서 기반 페이지네이션)
|
||
- 팀 카드 클릭 → `/team/{teamId}` 이동
|
||
|
||
---
|
||
|
||
#### `/team/create` - 팀 생성
|
||
|
||
**접근 권한**: 로그인 필수
|
||
|
||
**폼 필드**:
|
||
- **팀 이름** (필수): 50자 제한
|
||
- **커버 이미지** (선택): 드래그 앤 드롭 업로드, 16:9 비율
|
||
|
||
**버튼**: **"취소"** / **"만들기"**
|
||
|
||
**생성 완료 다이얼로그**:
|
||
- **"초대 링크 만들기"** → 초대 URL + **"복사"** 버튼 + QR 코드 + **"QR 다운로드"**
|
||
- **"팀 관리로 이동"** → `/team/{teamId}/manage`
|
||
|
||
#### `/team/[teamId]` - 팀 상세
|
||
|
||
**접근 권한**: 조건부 (멤버/공개팀/비공개팀에 따라 다른 뷰)
|
||
|
||
**3가지 뷰:**
|
||
|
||
**뷰 A - 멤버 뷰** (팀 멤버일 때):
|
||
- 팀 정보 헤더: 팀 이름, 멤버 수, 소유자 배지, 팀 설명
|
||
- 소유자: **"팀 관리"** 버튼 → `/team/{teamId}/manage`
|
||
- 멤버: **"팀 나가기"** 버튼 → 탈퇴 확인 다이얼로그 (소유자는 나가기 불가)
|
||
- 4개 탭:
|
||
1. **개요**: 커리큘럼 진행 카드 + 통계 4개 (전체/주간/월간/최근 활동) + 최근 글 3개
|
||
2. **주제**: 주제별 아코디언 (주제당 글 목록)
|
||
3. **활동**: 내 글 현황 + 멤버 리더보드 + 팀 최근 글
|
||
4. **멤버**: 멤버 카드 그리드
|
||
|
||
**뷰 B - 공개 뷰** (비멤버 + 공개 팀):
|
||
- 팀 정보 + **"팀 참가"** 버튼
|
||
- 공개 글 목록 (허용 시) 또는 "글이 공개되지 않습니다" 안내
|
||
|
||
**뷰 C - 비공개 뷰** (비멤버 + 비공개 팀):
|
||
- "접근 권한 없음" 메시지
|
||
|
||
#### `/team/[teamId]/manage` - 팀 관리
|
||
|
||
**접근 권한**: 팀 소유자 전용
|
||
|
||
**"뒤로가기"** → `/team`, **"멤버 페이지 보기"** → `/team/{teamId}`
|
||
|
||
**6개 탭:**
|
||
|
||
1. **개요** (LuInfo): TeamInfoCard 컴포넌트
|
||
- 팀 기본 정보 표시/수정
|
||
|
||
**초대 링크 관리 (InviteLinkManager)**:
|
||
- 기존 초대 링크 목록 표시: 각 초대마다 사용 횟수, 최대 사용 횟수(설정 시), 만료일 배지
|
||
- 각 초대: QR 코드 미리보기(클릭 시 확대 다이얼로그) + URL 표시 + **"복사"** 버튼 + **"취소"** 버튼
|
||
- **"+ 만들기"** 버튼 → 초대 생성 폼 토글:
|
||
- **최대 사용 횟수**: NumberInput (0 = 무제한)
|
||
- **만료일**: DatePicker (프리셋: 없음/내일/1주/2주/4주, 또는 캘린더에서 직접 선택)
|
||
- **"취소"** / **"만들기"** 버튼
|
||
- 빈 상태: "아직 초대 링크가 없습니다"
|
||
|
||
**이메일 초대 (EmailInviteSection)**
|
||
|
||
**대량 멤버 생성 (BulkMemberCreator)** - 4단계 플로우:
|
||
- 스텝 인디케이터 (입력 → 미리보기 → 생성 중 → 결과)
|
||
- **Step 1 - 입력**:
|
||
- 학생 이름 목록: 행 단위 입력 (추가/삭제 가능), 또는 CSV 파일 업로드 (드래그 앤 드롭 지원)
|
||
- 아이디 템플릿: 기본값 `{이름}_{랜덤}` (플레이스홀더: `{이름}`, `{번호}`, `{랜덤}` 칩 클릭으로 삽입)
|
||
- 비밀번호 템플릿: 기본값 `raon{번호}!!` (동일 플레이스홀더)
|
||
- 라이브 미리보기: 첫 번째 학생 기준으로 생성될 아이디/비밀번호 실시간 표시
|
||
- **"미리보기"** 버튼 (유효한 행 1개 이상일 때 활성)
|
||
- **Step 2 - 미리보기**: 전체 학생의 생성될 아이디/비밀번호 테이블 확인 → **"돌아가기"** / **"생성"** 버튼
|
||
- **Step 3 - 생성 중**: 진행 애니메이션
|
||
- **Step 4 - 결과**:
|
||
- 성공/실패 결과 테이블 (이름, 아이디, 비밀번호, 상태)
|
||
- **"카드 출력"** 버튼 → 새 창에서 학생 로그인 카드 3열 그리드로 출력 (이름/아이디/비밀번호/팀명 포함)
|
||
- 성공 수/실패 수 토스트 알림
|
||
|
||
2. **AI 설정** (LuBrain):
|
||
- AI 기능 설정 (TeamAISettings)
|
||
- 채점 설정 (TeamScoringSettings)
|
||
- 평가 기준 설정 (TeamRubricSettings)
|
||
|
||
3. **커리큘럼** (LuBookMarked):
|
||
- 팀 커리큘럼 관리 (TeamCurriculumManager)
|
||
|
||
4. **주제** (LuBookOpen):
|
||
- 글쓰기 주제 CRUD 관리 (TeamTopicManager)
|
||
|
||
5. **모니터링** (LuActivity):
|
||
- 실시간 글쓰기 모니터링 (LiveWritingMonitor)
|
||
- 주제별/멤버별 분석 (TopicMemberAnalysisSection)
|
||
|
||
6. **멤버** (LuUsers):
|
||
- 멤버 편집기 (TeamMemberEditor): 멤버 목록, 닉네임 수정, 소유권 이전, 멤버 제거, 글쓰기 분석, 트렌드 보기
|
||
- **위험 구역**: 팀 삭제
|
||
- **"팀 삭제"** 버튼 → 삭제 확인 다이얼로그
|
||
|
||
**팀 삭제 다이얼로그**:
|
||
- 경고 메시지 ("이 작업은 되돌릴 수 없습니다")
|
||
- 팀 이름 표시
|
||
- **팀 이름 확인 입력**: 정확히 일치해야 삭제 버튼 활성화
|
||
- **"취소"** / **"삭제"** 버튼 → 삭제 성공 시 `/team`으로 이동
|
||
|
||
#### `/invite/[inviteId]` - 초대 수락
|
||
|
||
**접근 권한**: 전체 (비로그인도 접근 가능)
|
||
|
||
**데이터**: 초대 정보 (팀 이름, 설명, 유효 여부, 이미 참가 여부)
|
||
|
||
**5가지 상태별 화면:**
|
||
|
||
1. **로딩**: 스피너 + "로딩 중"
|
||
|
||
2. **이미 참가한 팀**: "이미 멤버입니다" + **"팀으로 이동"** 버튼 → `/team/{teamId}`
|
||
|
||
3. **참가 완료**: "참가 완료!" + **"팀으로 이동"** 버튼 → `/team/{teamId}`
|
||
|
||
4. **유효하지 않은 초대**: "유효하지 않은 초대" + 사유 표시 + **"홈으로"** 버튼 → `/home`
|
||
|
||
5. **참가 준비** (유효한 초대):
|
||
- 팀 이름, 설명 (있으면) 표시
|
||
- 에러 발생 시 에러 메시지 표시
|
||
- **로그인 상태**: **"팀 참가"** 버튼 → 참가 처리 (로딩 표시)
|
||
- **비로그인 상태**: "로그인하여 참가하세요" + **"로그인 & 참가"** 버튼 → 로그인 다이얼로그 오픈 → 로그인 완료 후 자동 참가
|
||
|
||
---
|
||
|
||
### 2.6 글쓰기
|
||
|
||
#### `/write` - 글쓰기 모드 선택
|
||
|
||
**접근 권한**: 로그인 필수
|
||
|
||
**URL 파라미터에 의한 자동 리다이렉트**:
|
||
- `lessonId` → `/write/text` (수업 파라미터 포함)
|
||
- `topicId` + `helpLevel=ai-draft` → `/write/fill-in-blank`
|
||
- `topicId` + `helpLevel=ai-hint` → `/write/easy`
|
||
- `topicId` + `startType=image` → `/write/image`
|
||
- `topicId` (기본) → `/write/text`
|
||
- `id` → `/write/edit/{id}`
|
||
- `mode=wrt` → `/write/text`
|
||
- `mode=img` → `/write/image`
|
||
|
||
**주요 기능** (파라미터 없이 직접 진입 시):
|
||
|
||
1. **헤더 텍스트**: "모드를 선택해주세요"
|
||
|
||
2. **컴팩트 카드 행 (CompactCardsRow)**: 사용자가 속한 팀의 최근 글 3개 미리보기
|
||
|
||
3. **2단계 모드 선택 (WritingModeSelector)**:
|
||
- **Step 1 - 시작 유형 선택** (2개 카드):
|
||
- "그림부터 시작" (LuImage)
|
||
- "글부터 시작" (LuFileText)
|
||
- **Step 2 - 도움 수준 선택** (3개 카드, 뒤로가기 버튼 포함):
|
||
- "AI 초안" (LuBot, "추천" 배지) → `/write/fill-in-blank` (IP 제한 시 비활성)
|
||
- "AI 힌트" (LuSparkles) → `/write/easy`
|
||
- "혼자서" (LuPenLine, "기본" 배지) → `/write/text`
|
||
- 이미지 시작 선택 시 → `/write/image`
|
||
|
||
4. **추천 영감 섹션 (InspirationSection)**: 가로 배치 2개 영감 아이템
|
||
|
||
**이동 경로**: `/write/text`, `/write/image`, `/write/easy`, `/write/fill-in-blank`, `/write/edit/{id}`
|
||
|
||
#### `/write/text` - 텍스트 글쓰기
|
||
|
||
**접근 권한**: 로그인 필수
|
||
|
||
**입력 필드**: 주제 선택 드롭다운, 제목 입력, 리치 텍스트 에디터
|
||
|
||
**버튼**: **"저장된 초안"**, **"맞춤법 검사"**, **"AI 힌트"** (조건부), **"뒤로"**, **"저장"**
|
||
|
||
**AI 기능**:
|
||
- **실시간 텍스트 분석**: 점수, 감각어/감정어/의성어 탐지, 개선 제안
|
||
- **AI 힌트**: 4단계 진행형 힌트 (팀 설정으로 제한 가능)
|
||
- **맞춤법 검사**: 오류 단어 + 교정 제안
|
||
|
||
**자동 저장**: 작성 중 자동 저장 + 상태 표시
|
||
|
||
**특수 모드**:
|
||
- **수업 모드** (`lessonId`): 수업 프롬프트 표시, 자동 저장 비활성
|
||
- **팀 모드**: 팀 이름 + 주제 헤더
|
||
- **영감 모드** (`inspirationId`): 제목/주제 자동 채움
|
||
|
||
**다이얼로그**: 저장된 초안 목록, 주제 변경 경고, AI 힌트 드로어
|
||
|
||
**이동**: 저장 시 → `/imageUpload?writingId={id}`
|
||
|
||
---
|
||
|
||
#### `/write/image` - 이미지 글쓰기
|
||
|
||
**접근 권한**: 로그인 필수
|
||
|
||
**텍스트 글쓰기와 동일한 기능** (AI 분석, 힌트, 맞춤법, 자동 저장, 다이얼로그) + 아래 차이점:
|
||
|
||
**차이점**:
|
||
- **순차적 잠금 해제**: 주제 선택 → 제목 입력 → 이미지 업로드 + 에디터 활성화
|
||
- **이미지 업로드**: 드래그 앤 드롭, **"이미지 변경"** 으로 재업로드 가능
|
||
- 수업 모드/영감 모드 미지원
|
||
|
||
**이동**: 이미지 있으면 → `/interaction`, 없으면 → `/imageUpload`
|
||
|
||
#### `/write/easy` - 쉬운 글쓰기
|
||
|
||
**접근 권한**: 로그인 필수
|
||
|
||
**2가지 모드**: 텍스트 모드 (기본) / 이미지 모드
|
||
|
||
**입력**: 주제 선택, 제목 입력, 줄 단위 텍스트 입력 (Enter로 제출, 편집/삭제 가능), 이미지 모드 시 이미지 업로드
|
||
|
||
**버튼**: **"저장된 초안"**, **"뒤로"**, **"저장"**
|
||
|
||
**AI 기능**:
|
||
- **줄별 AI 제안**: 줄 제출 후 자동 생성 (줄당 최대 3개)
|
||
- **이미지 분석** (이미지 모드): 이미지에서 추천 키워드 추출
|
||
|
||
**자동 저장**: 작성 중 자동 저장 + 상태 표시
|
||
|
||
**이미지 모드 순차 잠금**: 주제 → 제목 → 이미지 + 글쓰기
|
||
|
||
**이동**: 이미지 있으면 → `/interaction`, 없으면 → `/imageUpload`
|
||
|
||
#### `/write/fill-in-blank` - 빈칸 채우기 글쓰기
|
||
|
||
**접근 권한**: 로그인 필수, AI 기능은 IP 화이트리스트 확인
|
||
|
||
**2가지 모드**: 이미지 우선 (기본) / 텍스트 우선
|
||
|
||
**Step 1 - 입력**:
|
||
- 주제 선택 → 제목 입력 → 콘텐츠 입력 (순차 잠금)
|
||
- 이미지 모드: 이미지 업로드 / 추천 이미지 선택 / 팀 글 이미지 선택
|
||
- 텍스트 모드: 텍스트 입력 (최소 20자)
|
||
- **"생성"** 버튼 → AI 초안 생성 (진행률 표시)
|
||
|
||
**Step 2 - 빈칸 채우기**:
|
||
- AI 초안의 빈칸을 순차적으로 채움 (원본/직접 입력/AI 제안 선택)
|
||
- 진행률 바 + 참여 보상 점수 표시
|
||
- **"다시 시작"** / **"저장"** 버튼
|
||
|
||
**이동**: 이미지 있으면 → `/interaction`, 없으면 → `/imageUpload`
|
||
|
||
#### `/write/edit/[id]` - 글 수정
|
||
|
||
**접근 권한**: 로그인 필수 (글 작성자)
|
||
|
||
**입력**: 제목 (편집 가능), 주제 (읽기 전용), 리치 텍스트 에디터, 이미지 변경 (선택)
|
||
|
||
**버튼**: **"뒤로"**, **"맞춤법 검사"**, **"AI 힌트"** (팀 AI 활성화 시), **"저장"**
|
||
|
||
**AI 기능**: `/write/text`와 동일 (실시간 분석, 맞춤법, AI 힌트)
|
||
|
||
**자동 저장**: 없음 (명시적 저장만)
|
||
|
||
**이동**: 이미지 있으면 → `/interaction`, 없으면 → `/imageUpload`
|
||
|
||
---
|
||
|
||
### 2.7 이미지 업로드 & 인터랙션
|
||
|
||
#### `/imageUpload` - 이미지 업로드
|
||
|
||
**접근 권한**: 로그인 필수
|
||
|
||
**파라미터**: `writingId` (필수)
|
||
|
||
**모드 선택 화면**: **"AI 이미지 생성"** / **"직접 업로드"** 버튼
|
||
|
||
**AI 모드 (4단계 플로우)**:
|
||
1. **추출 중**: 글 내용에서 장면 자동 추출
|
||
2. **장면 선택**: 추출된 장면 카드 목록 → 하나 선택 → **"생성"** 버튼
|
||
3. **생성 중**: 진행률 표시
|
||
4. **완료**: 생성 이미지 미리보기 + **"장면 변경"** / **"계속"** 버튼
|
||
|
||
**업로드 모드**:
|
||
- 파일 업로드 (드래그 앤 드롭) → 미리보기 + **"파일 변경"** / **"업로드"** 버튼
|
||
|
||
**수정 모드** (이미 이미지가 있는 글):
|
||
- 기존 이미지 표시 + **"이미지 변경"** / **"현재 유지"** 버튼
|
||
|
||
**AI 생성 비활성 조건**: 플랜 미지원, IP 제한, 일일 한도 초과, 팀 AI 비활성
|
||
|
||
**이동**: 완료 시 → `/interaction?writingId={id}`
|
||
|
||
---
|
||
|
||
#### `/interaction` - 인터랙티브 이미지 뷰어
|
||
|
||
**접근 권한**: 로그인 필수
|
||
|
||
**파라미터**: `writingId` (필수)
|
||
|
||
**주요 기능**:
|
||
- 생성된 이미지를 인터랙티브 캔버스로 표시
|
||
- 기존 왜곡 영역 및 효과 표시
|
||
|
||
**보기/편집 모드 토글**:
|
||
|
||
**보기 모드**: 클릭/터치로 왜곡 효과 활성화
|
||
|
||
**편집 모드** (소유자만):
|
||
- 왜곡 영역 추가/삭제/편집
|
||
- 물리/모션/이징/속도/강도 등 파라미터 조정 (프리셋 또는 커스텀)
|
||
- 스프라이트 효과 설정
|
||
- 전체 화면 토글
|
||
- **"저장"** 버튼
|
||
|
||
**분석 섹션**: 점수 (0~100), 영역 해금 배지, 개선 힌트
|
||
|
||
**댓글 섹션**: 댓글 목록 + 작성
|
||
|
||
---
|
||
|
||
### 2.8 커리큘럼 & 수업
|
||
|
||
#### `/curriculum` - 커리큘럼 목록
|
||
|
||
**접근 권한**: 로그인 필수 (미인증 시 홈으로 리다이렉트)
|
||
|
||
**기능**: 사용 가능한 커리큘럼 대시보드 표시
|
||
|
||
**이동**: 커리큘럼 클릭 → `/curriculum/{curriculumId}`
|
||
|
||
---
|
||
|
||
#### `/curriculum/[curriculumId]` - 커리큘럼 상세
|
||
|
||
**접근 권한**: 로그인 필수
|
||
|
||
**데이터**: 커리큘럼 정보 + 수업 목록 (병렬 로드)
|
||
|
||
**기능**: 커리큘럼 제목/설명 + 수업 목록 (순서대로) + 수업 뷰어
|
||
|
||
**상태별 화면**: 로딩 (스피너), 에러 (토스트 "커리큘럼 로드 실패")
|
||
|
||
**이동**: 수업 클릭 → `/lesson/{lessonId}`
|
||
|
||
---
|
||
|
||
#### `/lesson/[lessonId]` - 수업 상세
|
||
|
||
**접근 권한**: 로그인 필수
|
||
|
||
**파라미터**: `lessonId` (필수), `teamId`, `curriculumId`, `step` (선택)
|
||
|
||
**기능**:
|
||
- 수업 콘텐츠 표시 (마크다운, 비디오, 글쓰기 프롬프트 등)
|
||
- **"뒤로가기"** 버튼: teamId 있으면 → `/team/{teamId}`, 없으면 → 이전 페이지
|
||
- **"수업 완료"** 버튼: teamId + curriculumId + step 있을 때 → 수업 완료 처리 + 토스트 "레슨을 완료했어요!" + 팀 페이지로 이동
|
||
|
||
**상태별 화면**: 로딩 (스피너), 에러 (에러 메시지 + 뒤로가기), 권한 없음
|
||
|
||
---
|
||
|
||
#### `/my-curriculums` - 내 커리큘럼
|
||
|
||
**접근 권한**: 로그인 필수 (미인증 시 홈으로 리다이렉트)
|
||
|
||
**기능**: 사용자가 등록한 커리큘럼 대시보드 표시
|
||
|
||
---
|
||
|
||
### 2.9 마이페이지 & 글 관리
|
||
|
||
#### `/my` - 마이페이지
|
||
|
||
**접근 권한**: 로그인 필수 (미인증 시 홈으로 리다이렉트)
|
||
|
||
**주요 기능**:
|
||
|
||
1. **프로필**: 아바타 변경, 이름 편집, 나이/학년 편집, 플랜 배지
|
||
2. **통계** (4개 카드): 글 수, 팀 수, AI 크레딧, 주간 목표 진행률
|
||
3. **최근 글 미리보기**: 최대 3개 + **"전체 보기"** → `/writing`
|
||
4. **팀 미리보기**: 최대 3개 + **"전체 보기"** → `/team`
|
||
5. **커리큘럼 미리보기**: **"전체 보기"** → `/my-curriculums`
|
||
6. **환경 설정**: 언어, 테마 등
|
||
7. **계정 정보**: 현재 플랜 + 제한 사항 (AI 팀 수, 분석 사용량, 이미지 생성 한도) + AI 크레딧
|
||
- FREE 플랜: **"업그레이드"** 버튼 → `/pricing`
|
||
- **"계정 삭제"** → 확인 다이얼로그
|
||
|
||
#### `/writing` - 내 글 목록
|
||
|
||
**접근 권한**: 로그인 필수
|
||
|
||
**데이터**: 사용자의 모든 글 목록
|
||
|
||
**주요 기능**:
|
||
- 제목 + "총 {n}개의 글을 작성했어요" 통계
|
||
- **정렬 드롭다운**: "최신순" / "오래된순"
|
||
- 글 카드 그리드: 이미지 미리보기, 제목, 날짜, 삭제 버튼
|
||
- 글 카드 클릭 → `/writing/{writingId}`
|
||
- 글 삭제 (삭제 확인 후 목록에서 제거, 애니메이션)
|
||
|
||
**상태별 화면**:
|
||
- **로딩**: 스켈레톤
|
||
- **빈 상태**: "아직 작성한 글이 없어요" + **"글 쓰기 시작하기"** 버튼 → `/write`
|
||
|
||
---
|
||
|
||
#### `/writing/[writingId]` - 글 상세 보기
|
||
|
||
**접근 권한**: 전체 (공개 페이지, 로그인 불필요)
|
||
|
||
**데이터**: 글 상세 정보 (서버 사이드 렌더링)
|
||
|
||
**주요 기능**:
|
||
- **헤더** (스티키): 글 제목, 작성자 정보, 메타데이터
|
||
- **인터랙티브 이미지** (generatedImage 존재 시): 저장된 왜곡 영역 + 스프라이트 효과로 인터랙티브 뷰어 표시
|
||
- **원본 글**: HTML 포맷 텍스트 표시
|
||
- **댓글 섹션**: 댓글 목록 + 댓글 작성 + 답글
|
||
|
||
**상태별 화면**: 로딩, 에러 (글 없음 / 로드 실패 → 홈으로 이동)
|
||
|
||
---
|
||
|
||
### 2.10 요금제
|
||
|
||
#### `/pricing` - 요금제 안내
|
||
|
||
**접근 권한**: 전체 (공개 페이지)
|
||
|
||
**주요 기능**:
|
||
|
||
1. **결제 주기 토글**: 월간/연간 전환 (연간 할인 배지 표시)
|
||
|
||
2. **요금제 카드 4개**:
|
||
- **Free**: 무료, 기본 기능, CTA → 로그인 다이얼로그
|
||
- **Classroom** (하이라이트, "가장 인기" 배지): 유료, 교실 기능
|
||
- **Academy**: 유료, 고급 기능
|
||
- **School**: "문의" → 이메일 (`contact@bluenovalab.com`)
|
||
- 각 카드: 플랜명, 설명, 가격, 기능 목록, CTA 버튼
|
||
- 현재 플랜이면 버튼 비활성
|
||
|
||
3. **CTA 버튼 동작** (로그인 상태 + 유료 플랜):
|
||
- 동일 플랜+주기 → 비활성
|
||
- 무료→유료 → 구매 확인 다이얼로그
|
||
- 업그레이드 → 업그레이드 다이얼로그 (즉시/예약, 예상 환불 크레딧)
|
||
- 다운그레이드 → 다운그레이드 다이얼로그 (즉시/예약, 예상 크레딧+유효기간)
|
||
- 주기 변경 → 주기 변경 다이얼로그
|
||
|
||
4. **기능 비교 테이블**: 9개 기능 × 4개 플랜 매트릭스 (팀 AI, 멤버, 글, AI 분석, AI 어시스턴트, 이미지 생성, 실시간 모니터링, 패턴 분석, 우선 지원)
|
||
|
||
5. **FAQ 섹션**: 4개 Q&A
|
||
|
||
**다이얼로그 4종**: 구매 확인, 업그레이드 옵션, 다운그레이드 옵션, 결제 주기 변경
|
||
|
||
---
|
||
|
||
## 3. 주요 유저 플로우
|
||
|
||
### 3.1 학생 글쓰기 플로우
|
||
```
|
||
랜딩 → 로그인 → /student/home → /write (모드 선택)
|
||
├── /write/text → /imageUpload → /interaction → 완료
|
||
├── /write/image → /interaction → 완료
|
||
├── /write/easy → 완료
|
||
└── /write/fill-in-blank → 완료
|
||
```
|
||
|
||
### 3.2 교사 팀 관리 플로우
|
||
```
|
||
랜딩 → 로그인 → /teacher/home → /team/create → (초대 링크 생성)
|
||
→ /team → /team/[teamId] → /team/[teamId]/manage
|
||
```
|
||
|
||
### 3.3 학생 팀 참가 플로우
|
||
```
|
||
초대 링크 클릭 → /invite/[inviteId] → 로그인 → 팀 참가 → /team/[teamId]
|
||
또는
|
||
/student/home → /team/all → 팀 선택 → /team/[teamId] → 참가
|
||
```
|
||
|
||
### 3.4 커리큘럼 학습 플로우
|
||
```
|
||
/curriculum → /curriculum/[curriculumId] → /lesson/[lessonId] → 수업 완료
|
||
→ /write (연계 글쓰기)
|
||
```
|
||
|
||
### 3.5 교사 승인 플로우
|
||
```
|
||
교사 회원가입 → /teacher/pending-approval (대기)
|
||
관리자: /admin/teacher-approvals → 승인/거부
|
||
승인 후: /teacher/home
|
||
```
|
||
|
||
### 3.6 글 수정 플로우
|
||
```
|
||
/writing → /writing/[writingId] → /write/edit/[id] → 저장 → /writing/[writingId]
|
||
```
|
||
|
||
---
|
||
|
||
## 4. 공통 UI 요소 (모든 페이지)
|
||
|
||
- **인증 모달**: Google 로그인 다이얼로그 (별도 로그인 페이지 없음)
|
||
- **네비게이션**: 상단 헤더 (로고, 메뉴, 프로필)
|
||
- **로케일**: 한국어/영어/일본어 전환
|
||
- **토스트**: 성공/오류 알림
|
||
- **로딩**: 페이지별 스피너/스켈레톤
|
||
|
||
---
|
||
|
||
© 2024 BlueNovaLab. All rights reserved.
|