EasyQ 프론트 데모

기능 명세서 v1의 청중 · 강연자 화면을 목업 데이터로 구현한 Next.js 데모입니다. 관리자 웹(F8 · F9 · F12)은 범위에서 뺐습니다. 실제 API 연동은 없고, 실시간 동작은 타이머로 흉내 냅니다.

npm install
npm run dev   # http://localhost:3000

화면 ↔ 기능 ID

경로	화면	기능
/	시작	—
/signup · /login	회원가입 · 로그인	F1-1, F1-2, F7-2
/home	홈 (보관함 · 내 강의 요약)	F1-2
/join	QR · 코드 입장 → 동의 → 회원/게스트 선택	F1-7, F7-2
/s/[code]	청중 실시간 화면	F5-1 ~ F5-6, F4-4 결과 표시
/archive · /archive/[id]	내 보관함 · 상세	F5-7 ~ F5-9, F10-2
/lectures	내 강의 목록 + 무료 사용 한도	F6-1, F1-5
/lectures/new	강의 생성	F1-4, F1-5
/lectures/[id]	강의 준비 (교안 · 용어 사전 · QR)	F2-1, F2-4, F2-5, F1-6, F1-8
/lectures/[id]/live	라이브 대시보드 (노트북 화면)	F6-2 ~ F6-4, F3-1, F3-4, F1-6, F1-8
/lectures/[id]/report	리포트 · 요약 노트 · 질문 기록 · 삭제	F11-1, F10-1/2, F6-5, F7-4
/me	내 정보 · 공지 · 문의 · 탈퇴	F1-3, F13-1, F7-6

화면 확인 방법

데스크톱 브라우저에서는 폰 틀 안에 보입니다. 실제 폰 크기로 보려면 개발자 도구(⌥⌘I)에서 기기 모드(⇧⌘M)를 켜세요. 상태는 페이지를 이동하는 동안만 유지되고, 새로고침하면 처음으로 돌아갑니다.

입장 코드

코드	강의	상태
QX7K2	인공지능 개론 7주차 · 트랜스포머	진행 중 (입장 가능)
DB4M8	데이터베이스 설계 특강	시작 전 (입장 불가 안내)
WB6R3	웹 프로그래밍 6주차	종료 (입장 불가 안내)

청중 화면

들어가는 방법

• 바로 열기: /s/QX7K2
• 입장 흐름대로:
  1. /join을 엽니다. 하단 내비게이션의 QR 아이콘을 눌러도 됩니다.
  2. 검정 스캔 상자를 누르거나(가짜 QR 스캔) 코드 QX7K2를 입력하고 입장을 누릅니다.
  3. 동의 두 개를 체크하고 동의하고 계속을 누릅니다.
  4. 주혜님으로 입장을 고르거나, 닉네임을 넣고 게스트로 입장을 누릅니다.
• 홈(/home)의 빨간 QR 찍고 질문하러 가기 카드를 눌러도 위 흐름으로 이어집니다.

확인할 것

탭 · 위치	해 볼 것	결과
질문하기	어텐션 · 마스킹 · 인코더 · 포지셔널이 들어간 질문 보내기	약 2초 뒤 AI 답변이 근거 칩(교안 페이지 · 발화 시각)과 함께 내 질문 탭에 표시
질문하기	그 밖의 질문 보내기	강연자에게 전달되고 모두의 질문에 올라감
질문하기	보낸 직후 다시 보내기	10초 동안 제출 제한
질문하기	포지셔널, 과제 등 입력하기	비슷한 질문이 먼저 뜨고, 같아요를 누르면 공감으로 합쳐짐
모두의 질문	정렬 바꾸기, 오른쪽 원 누르기	공감순 · 페이지순 정렬, 공감 +1 (중복 공감 막힘). 다른 청중의 공감 수도 저절로 오름
내 질문	근거 칩 누르기, 피드백 버튼 누르기	인용 문장이 펼쳐지고, 도움 됐어요 / 아쉬워요 표시
알림 (오른쪽 위 종)	들어간 뒤 기다리기	12초 뒤 "강연자가 답했어요", 24초 뒤 "AI 답변 철회" 알림
화면 맨 아래	데모: 강의 종료 상태 보기 누르기	종료 상태로 바뀌고 질문 제출 막힘

예외 화면

• 입장 화면에 DB4M8 또는 WB6R3를 입력하면 시작 전 · 종료 안내가 나옵니다.
• 없는 코드로 바로 열면(예: /s/ZZZZZ) "입장 코드를 찾을 수 없어요" 화면이 나옵니다.

보관함

• /archive: 참여한 강의가 폴더 카드로 보입니다. 오른쪽 위 돋보기로 검색할 수 있습니다.
• 폴더를 누르면 요약 노트 · 내 질문 · 공감한 질문 탭을 볼 수 있습니다. 휴지통으로 질문 하나 또는 강의 기록 전체를 지울 수 있습니다.
• 「창업 세미나」는 요약 노트가 없는 경우의 화면입니다.

강연자 화면

경로	해 볼 것
/lectures	진행 중 · 예정 · 지난 강의 탭과 무료 사용 한도(4/5)를 봅니다. **+**로 새 강의를 하나 만들면 한도(5/5)가 차서 생성이 막힙니다.
/lectures/l2	교안 처리 실패 상태에서 다시 시도를 누르면 진행률이 단계별로 올라갑니다. 용어 사전에서 용어를 추가 · 삭제하고, QR 크게 보기를 눌러 봅니다. 처리가 끝나기 전에 강의 시작하기를 누르면 경고가 나옵니다.
/lectures/l1/live	노트북 크기 화면에서 보는 것이 좋습니다. 12초마다 새 질문이 들어오고, 답변 완료 · 완료 취소를 눌러 볼 수 있습니다. 마이크 연결을 누르면 자막이 흐르고, 다섯 번째 자막에서 재연결 상태가 한 번 나옵니다. AI 답변을 펼쳐 답변 철회를 누를 수 있고, 강의 종료를 누르면 리포트로 넘어갑니다.
/lectures/l1/report	대시보드에서 종료하고 오면 요약 노트가 "만드는 중"이었다가 약 3.5초 뒤 완성됩니다.
/lectures/l3/report	통계 · 페이지별 질문 차트 · 질문 기록을 보고, 세션 데이터 삭제를 눌러 봅니다.

공통

• /login: 아무 비밀번호(4자 이상)나 입력하면 로그인됩니다. 이메일을 new로 시작하게 쓰면 미인증 계정 안내가 나옵니다.
• /signup: [email protected]로 가입하면 이메일 중복 안내가 나옵니다.
• /me: 비밀번호 변경에서는 현재 비밀번호 1234가 맞는 값입니다. 진행 중인 강의가 있어서 회원 탈퇴는 막혀 있습니다.

구조

• lib/mock.ts: 목업 데이터 (API가 붙으면 이 파일을 대체)
• lib/store.ts: 페이지 이동 사이에 유지되는 데모 상태
• components/Brand.tsx: 로고 · 아바타 · 스티커 · 말풍선 · 폴더 (디자인 요소)
• components/: 그 밖의 아이콘 · UI 기본 요소 · QR · 요약 노트