Documentation Bot 34cc84462e docs: Sync documentation from private repository

2026-03-31 00:23:09 +00:00

26 KiB

Raw Blame History

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` - 학생 홈

접근 권한: 학생 역할 필수

주요 기능:

환영 메시지: 사용자 이름(또는 이메일 앞부분) + 부제목 표시
빠른 액션 그리드 (3개 카드):
- "새 글쓰기" → /write 이동
- "내 팀" → /team 이동
- "팀 참가" → /team/all 이동
- 미구현 카드는 클릭 불가 + "개발 중" 오버레이
팀 초대 알림 (대기 초대 있을 때만 표시):
- 각 초대: 팀 이름, 초대자 이름 표시
- "수락" / "거절" 버튼
글쓰기 패턴 분석 바: 클릭 시 WritingPatternDialog 오픈
최근 활동 섹션:
- 최근 작성 글 카드 그리드 표시
- "전체 보기" 버튼 → /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개 탭:

개요 (LuInfo): TeamInfoCard 컴포넌트
- 팀 기본 정보 표시/수정
초대 링크 관리 (InviteLinkManager):
- 기존 초대 링크 목록 표시: 각 초대마다 사용 횟수, 최대 사용 횟수(설정 시), 만료일 배지
- 각 초대: QR 코드 미리보기(클릭 시 확대 다이얼로그) + URL 표시 + "복사" 버튼 + "취소" 버튼
- "+ 만들기" 버튼 → 초대 생성 폼 토글:
  - 최대 사용 횟수: NumberInput (0 = 무제한)
  - 만료일: DatePicker (프리셋: 없음/내일/1주/2주/4주, 또는 캘린더에서 직접 선택)
  - "취소" / "만들기" 버튼
- 빈 상태: "아직 초대 링크가 없습니다"
이메일/아이디 초대:
- 이메일 또는 loginId 입력 → "초대" 버튼
- @ 포함 시 이메일로 처리, 미포함 시 loginId로 사용자 조회 후 초대
- 대기 중인 초대 목록 표시 + 각 초대 "취소" 버튼
대량 멤버 생성 (BulkMemberCreator) - 4단계 플로우:
- 스텝 인디케이터 (입력 → 미리보기 → 생성 중 → 결과)
- Step 1 - 입력:
  - 학생 이름 목록: 행 단위 입력 (추가/삭제 가능), 또는 CSV 파일 업로드 (드래그 앤 드롭 지원)
  - 아이디 템플릿: 기본값 {이름}_{랜덤} (플레이스홀더: {이름}, {번호}, {랜덤} 칩 클릭으로 삽입)
  - 비밀번호 템플릿: 기본값 raon{번호}!! (동일 플레이스홀더)
  - 라이브 미리보기: 첫 번째 학생 기준으로 생성될 아이디/비밀번호 실시간 표시
  - "미리보기" 버튼 (유효한 행 1개 이상일 때 활성)
- Step 2 - 미리보기: 전체 학생의 생성될 아이디/비밀번호 테이블 확인 → "돌아가기" / "생성" 버튼
- Step 3 - 생성 중: 진행 애니메이션
- Step 4 - 결과:
  - 성공/실패 결과 테이블 (이름, 아이디, 비밀번호, 상태)
  - "카드 출력" 버튼 → 새 창에서 학생 로그인 카드 3열 그리드로 출력 (이름/아이디/비밀번호/팀명 포함)
  - 성공 수/실패 수 토스트 알림
AI 설정 (LuBrain):
- AI 기능 설정 (TeamAISettings)
- 채점 설정 (TeamScoringSettings)
- 평가 기준 설정 (TeamRubricSettings)
커리큘럼 (LuBookMarked):
- 팀 커리큘럼 관리 (TeamCurriculumManager)
주제 (LuBookOpen):
- 글쓰기 주제 CRUD 관리 (TeamTopicManager)
모니터링 (LuActivity):
- 실시간 글쓰기 모니터링 (LiveWritingMonitor)
- 주제별/멤버별 분석 (TopicMemberAnalysisSection)
멤버 (LuUsers):
- 멤버 편집기 (TeamMemberEditor): 멤버 목록, 닉네임 수정, 소유권 이전, 멤버 제거, 글쓰기 분석, 트렌드 보기
- 위험 구역: 팀 삭제
  - "팀 삭제" 버튼 → 삭제 확인 다이얼로그

팀 삭제 다이얼로그:

경고 메시지 ("이 작업은 되돌릴 수 없습니다")
팀 이름 표시
팀 이름 확인 입력: 정확히 일치해야 삭제 버튼 활성화
"취소" / "삭제" 버튼 → 삭제 성공 시 /team으로 이동

`/invite/[inviteId]` - 초대 수락

접근 권한: 전체 (비로그인도 접근 가능)

데이터: 초대 정보 (팀 이름, 설명, 유효 여부, 이미 참가 여부)

5가지 상태별 화면:

로딩: 스피너 + "로딩 중"
이미 참가한 팀: "이미 멤버입니다" + "팀으로 이동" 버튼 → /team/{teamId}
참가 완료: "참가 완료!" + "팀으로 이동" 버튼 → /team/{teamId}
유효하지 않은 초대: "유효하지 않은 초대" + 사유 표시 + "홈으로" 버튼 → /home
참가 준비 (유효한 초대):
- 팀 이름, 설명 (있으면) 표시
- 에러 발생 시 에러 메시지 표시
- 로그인 상태: "팀 참가" 버튼 → 참가 처리 (로딩 표시)
- 비로그인 상태: "로그인하여 참가하세요" + "로그인 & 참가" 버튼 → 로그인 다이얼로그 오픈 → 로그인 완료 후 자동 참가

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

주요 기능 (파라미터 없이 직접 진입 시):

헤더 텍스트: "모드를 선택해주세요"
컴팩트 카드 행 (CompactCardsRow): 사용자가 속한 팀의 최근 글 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
추천 영감 섹션 (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단계 플로우):

추출 중: 글 내용에서 장면 자동 추출
장면 선택: 추출된 장면 카드 목록 → 하나 선택 → "생성" 버튼
생성 중: 진행률 표시
완료: 생성 이미지 미리보기 + "장면 변경" / "계속" 버튼

업로드 모드:

파일 업로드 (드래그 앤 드롭) → 미리보기 + "파일 변경" / "업로드" 버튼

수정 모드 (이미 이미지가 있는 글):

기존 이미지 표시 + "이미지 변경" / "현재 유지" 버튼

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` - 마이페이지

접근 권한: 로그인 필수 (미인증 시 홈으로 리다이렉트)

주요 기능:

프로필: 아바타 변경, 이름 편집, 나이/학년 편집, 플랜 배지
통계 (4개 카드): 글 수, 팀 수, AI 크레딧, 주간 목표 진행률
최근 글 미리보기: 최대 3개 + "전체 보기" → /writing
팀 미리보기: 최대 3개 + "전체 보기" → /team
커리큘럼 미리보기: "전체 보기" → /my-curriculums
환경 설정: 언어, 테마 등
계정 정보: 현재 플랜 + 제한 사항 (AI 팀 수, 분석 사용량, 이미지 생성 한도) + AI 크레딧
- FREE 플랜: "업그레이드" 버튼 → /pricing
- "계정 삭제" → 확인 다이얼로그

`/writing` - 내 글 목록

접근 권한: 로그인 필수

데이터: 사용자의 모든 글 목록

주요 기능:

제목 + "총 {n}개의 글을 작성했어요" 통계
정렬 드롭다운: "최신순" / "오래된순"
글 카드 그리드: 이미지 미리보기, 제목, 날짜, 삭제 버튼
글 카드 클릭 → /writing/{writingId}
글 삭제 (삭제 확인 후 목록에서 제거, 애니메이션)

상태별 화면:

로딩: 스켈레톤
빈 상태: "아직 작성한 글이 없어요" + "글 쓰기 시작하기" 버튼 → /write

`/writing/[writingId]` - 글 상세 보기

접근 권한: 전체 (공개 페이지, 로그인 불필요)

데이터: 글 상세 정보 (서버 사이드 렌더링)

주요 기능:

헤더 (스티키): 글 제목, 작성자 정보, 메타데이터
인터랙티브 이미지 (generatedImage 존재 시): 저장된 왜곡 영역 + 스프라이트 효과로 인터랙티브 뷰어 표시
원본 글: HTML 포맷 텍스트 표시
댓글 섹션: 댓글 목록 + 댓글 작성 + 답글

상태별 화면: 로딩, 에러 (글 없음 / 로드 실패 → 홈으로 이동)

2.10 요금제

`/pricing` - 요금제 안내

접근 권한: 전체 (공개 페이지)

주요 기능:

결제 주기 토글: 월간/연간 전환 (연간 할인 배지 표시)
요금제 카드 4개:
- Free: 무료, 기본 기능, CTA → 로그인 다이얼로그
- Classroom (하이라이트, "가장 인기" 배지): 유료, 교실 기능
- Academy: 유료, 고급 기능
- School: "문의" → 이메일 (contact@bluenovalab.com)
- 각 카드: 플랜명, 설명, 가격, 기능 목록, CTA 버튼
- 현재 플랜이면 버튼 비활성
CTA 버튼 동작 (로그인 상태 + 유료 플랜):
- 동일 플랜+주기 → 비활성
- 무료→유료 → 구매 확인 다이얼로그
- 업그레이드 → 업그레이드 다이얼로그 (즉시/예약, 예상 환불 크레딧)
- 다운그레이드 → 다운그레이드 다이얼로그 (즉시/예약, 예상 크레딧+유효기간)
- 주기 변경 → 주기 변경 다이얼로그
기능 비교 테이블: 9개 기능 × 4개 플랜 매트릭스 (팀 AI, 멤버, 글, AI 분석, AI 어시스턴트, 이미지 생성, 실시간 모니터링, 패턴 분석, 우선 지원)
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 로그인 다이얼로그 (별도 로그인 페이지 없음)
네비게이션: 상단 헤더 (로고, 메뉴, 프로필)
로케일: 한국어/영어/일본어 전환
토스트: 성공/오류 알림
로딩: 페이지별 스피너/스켈레톤

26 KiB Raw Blame History Unescape Escape

PAGE_FEATURES.md - 페이지별 기능 명세

1. 전체 페이지 맵

2. 카테고리별 상세 설명

2.1 랜딩/인증

/ - 루트 리다이렉트

/[locale] - 랜딩 페이지

/home - 역할별 홈 리다이렉트

2.2 학생 영역

/student/home - 학생 홈

2.3 교사 영역

/teacher/home - 교사 홈

/teacher/pending-approval - 교사 승인 대기

2.4 관리자 영역

/admin/teacher-approvals - 교사 승인 관리

/admin/ip-whitelist - IP 화이트리스트 관리

2.5 팀 관리

/team - 내 팀 목록

/team/all - 공개 팀 탐색

/team/create - 팀 생성

/team/[teamId] - 팀 상세

/team/[teamId]/manage - 팀 관리

/invite/[inviteId] - 초대 수락

2.6 글쓰기

/write - 글쓰기 모드 선택

/write/text - 텍스트 글쓰기

/write/image - 이미지 글쓰기

/write/easy - 쉬운 글쓰기

/write/fill-in-blank - 빈칸 채우기 글쓰기

/write/edit/[id] - 글 수정

2.7 이미지 업로드 & 인터랙션

/imageUpload - 이미지 업로드

/interaction - 인터랙티브 이미지 뷰어

2.8 커리큘럼 & 수업

/curriculum - 커리큘럼 목록

/curriculum/[curriculumId] - 커리큘럼 상세

/lesson/[lessonId] - 수업 상세

/my-curriculums - 내 커리큘럼

2.9 마이페이지 & 글 관리

/my - 마이페이지

/writing - 내 글 목록

/writing/[writingId] - 글 상세 보기

2.10 요금제

/pricing - 요금제 안내

3. 주요 유저 플로우

3.1 학생 글쓰기 플로우

3.2 교사 팀 관리 플로우

3.3 학생 팀 참가 플로우

3.4 커리큘럼 학습 플로우

3.5 교사 승인 플로우

3.6 글 수정 플로우

4. 공통 UI 요소 (모든 페이지)

26 KiB

Raw Blame History

`/` - 루트 리다이렉트

`/[locale]` - 랜딩 페이지

`/home` - 역할별 홈 리다이렉트

`/student/home` - 학생 홈

`/teacher/home` - 교사 홈

`/teacher/pending-approval` - 교사 승인 대기

`/admin/teacher-approvals` - 교사 승인 관리

`/admin/ip-whitelist` - IP 화이트리스트 관리

`/team` - 내 팀 목록

`/team/all` - 공개 팀 탐색

`/team/create` - 팀 생성

`/team/[teamId]` - 팀 상세

`/team/[teamId]/manage` - 팀 관리

`/invite/[inviteId]` - 초대 수락

`/write` - 글쓰기 모드 선택

`/write/text` - 텍스트 글쓰기

`/write/image` - 이미지 글쓰기

`/write/easy` - 쉬운 글쓰기

`/write/fill-in-blank` - 빈칸 채우기 글쓰기

`/write/edit/[id]` - 글 수정

`/imageUpload` - 이미지 업로드

`/interaction` - 인터랙티브 이미지 뷰어

`/curriculum` - 커리큘럼 목록

`/curriculum/[curriculumId]` - 커리큘럼 상세

`/lesson/[lessonId]` - 수업 상세

`/my-curriculums` - 내 커리큘럼

`/my` - 마이페이지

`/writing` - 내 글 목록

`/writing/[writingId]` - 글 상세 보기

`/pricing` - 요금제 안내