기능 정리 🧹

Mongo AI 앱 화면별 기능 정리

1. 소개 화면 - 랜딩페이지

• 앱의 주요 기능 및 장점 소개
  • Mongo AI는 하나의 지문으로 여러 유형의 문제를 손쉽게 만들어냅니다.
• "무료로 시작하기" 버튼 (클릭 시 로그인 화면으로 이동)

2. 로그인 화면

• 이메일 입력 필드
• 비밀번호 입력 필드
• 로그인 버튼
• 회원가입 링크
• 비밀번호 재설정 링크

3. 회원가입 - 이메일 입력 화면

• 이메일 입력 필드
• 이메일 형식 유효성 검사
• 다음 단계 버튼
• 로그인 화면으로 돌아가는 링크

4. 회원가입 - 비밀번호 입력 화면

• 비밀번호 입력 필드
• 비밀번호 확인 필드
• 비밀번호 강도 표시기
• 개인정보보호 동의 체크박스
• 회원가입 완료 버튼
• 로그인 화면으로 돌아가는 링크

5. 회원가입 - 이메일 인증

• 이메일 인증 otp입력 창
• 확인 버튼 클릭 시 회원가입 완료 화면으로 이동

6. 회원가입 완료 화면

• 회원가입 성공 메시지 표시
• 대시보드로 이동 버튼

7. 비밀번호 재설정 - 이메일 기입 화면

• 이메일 입력 필드
• 재설정 링크 발송 버튼
• 이메일이 존재하지 않을 시 없다고 표시
• 로그인 화면으로 돌아가는 링크

7. 비밀번호 재설정 - OTP 기입 화면

• 이메일 인증 otp입력 창
• 확인 버튼

8. 비밀번호 재설정 - 비밀번호 재설정 화면

• 새 비밀번호 입력 필드

• 새 비밀번호 확인 필드

• 비밀번호 변경 버튼

• 로그인 화면으로 이동 버튼

9. 비밀번호 재설정 - 완료 화면

• 이메일 재설정 성공 메시지 표시
• 로그인 후 대시보드로 이동 버튼

10. 첫 로그인 시 팀 선택 또는 생성 안내

• 팀을 선택하거나 생성하는 화면을 간략하게
• 확인 누르면 대시보드로 이동

11. 대시보드 화면

• 왼쪽 사이드바 (고정 요소)
  • 최상단에 팀 목록 드롭다운 (추가: 팀 선택 시 해당 팀의 폴더/문제만 표시)
  • 폴더 리스트
  • 폴더 생성 버튼
  • 하단에 휴지통 아이콘
• 상단 정렬 도구 (고정 요소)
  • 드롭다운으로
    • 제목 기준 정렬
    • 생성일 기준 정렬
    • 수정일 기준 정렬
  • 그리드/리스트 보기 전환 토글
  • 나의 즐겨찾기만 보여주는 버튼
  • 문제집 생성 버튼
  • 우측 상단 프로필 아이콘/이름 - 클릭 시 프로필 화면 이동

11-1. 문제집 그리드/리스트 표시(기본, 대시보드 화면)

• 문제집 그리드/리스트 표시
  • 문제집별로 다음 정보가 표시됨
    • 문제집 제목
    • 만든 사람 이름
    • 팀 이름
    • 폴더 이름
    • 즐겨찾기 표시/토글
  • 클릭 시 문제집 확인 화면으로 이동
• 폴더 조작 기능
  • 폴더 클릭 시 해당 폴더의 문제만 표시
  • (추가: 폴더 우클릭 시 컨텍스트 메뉴 - 이름 변경, 삭제)

11-2. 폴더 관리 기능(대시보드 화면)

• 폴더 생성 팝업
  • 폴더 이름 입력 필드
  • 생성 확인 버튼
  • 취소 버튼

11-3. 휴지통 관리 기능(대시보드 화면)

• 삭제된 파일 표시 (deleted_at 기준)
• 복원 버튼
• 영구 삭제 버튼 및 확인 팝업
• 30일 자동 삭제됨을 알리는 문구 (Supabase 지원)
• (추가: 휴지통 비우기 기능)

11-4 문제 합치기 기능(대시보드 화면)

• 여러 문제집을 하나의 문제집으로 만들기
• 여러 문제들을 선택할 수 있어야 하고, 선택할 시 문제집 합치기 버튼이 생김

11-5 빈 폴더 표시

• '이 폴더에 문제집이 없습니다' 표시

12. 문제집 생성 - step1 파일 업로드 화면

• 텍스트, 이미지 업로드, PDF 업로드 세 개의 버튼이 있는 소스 선택
• 다음 단계 버튼
• 취소 버튼

12-1 텍스트 입력 영역

• 붙여넣기하는 텍스트 필드가 아래에

12-2 이미지 업로드 영역

• 버튼 클릭 시 이미지를 불러오고(png, jpg, jpeg 지원) 불러오면 파일이름이 적히고 밑에 미리보기로 보여짐

12-3 PDF 업로드 영역

• 버튼 클릭 시 pdf를 불러오고 불러오면 파일이름이 적히고 밑에 미리보기로 보여짐

13. 문제집 생성 - step2 문제 유형 선택 화면

• 문제 유형 선택 옵션
  • 다양한 문제 유형 버튼
    • (추가: 각 유형 선택 시 간단한 설명 표시)
• 다음 단계 버튼
• 이전 단계 버튼
• 취소 버튼 (대시보드로 이동)

14. 문제집 생성 - step3 PDF 템플릿 선택 화면

• pdf 템플릿 레이아웃 선택(왼쪽 상단)
  • 한 단 레이아웃
  • 두 단 레이아웃
• 문제 리스트(왼쪽 중간부터 하단까지, 문제가 많으면 스크롤러블 가능)
• 오른쪽은 문제를 드래그하여 추가할 텍스트 필드. 추가된 텍스트는 수정도 가능
• 다음 단계 버튼
• 이전 단계 버튼
• 취소 버튼

15. 문제집 생성 - step 4 생성된 문제집 확인 화면

• 생성된 문제 미리보기(PDF 형식)
• 문제 수정 버튼 (문제집 생성 - step3 PDF 템플릿 선택 화면 으로 이동)
• 문제 저장(또는 완료) 버튼
• PDF 다운로드 버튼

16. 프로필 화면

• 사용자 정보 섹션
  • 사용자 이름 표시
  • 이름 수정 입력 필드
  • 저장 버튼
• 계정 관리 섹션
  • 로그아웃 버튼
  • 회원탈퇴 버튼 및 확인 팝업

그 외 추가 기능 (추후 구현)

• 검색 기능
  • 전체 폴더에서 문제 검색
  • 검색 결과 필터링 옵션
• 포트원