스터디룸 소개(프리뷰) 디자인¶

비로그인 사용자가 스터디룸을 둘러보는 프리뷰의 화면과 인터랙션을 정의한다. 성격 카드, 활성감을 드러내는 상태 문구, 그리고 아직 준비 중인 문의 예고 UI로 구성한다. 모달로 띄울지 별도 페이지로 둘지는 탐색 흐름·모바일·문의 확장을 더 보고 정한다. 상위 기획은 prd에 있다.

사용자 플로우¶

스터디룸 목록 → 룸 클릭 → 프리뷰(소개) → [스터디룸 더 둘러보기]
   ├─ PUBLIC: 읽기 전용 내부 구조 확인
   └─ PRIVATE: 접근 제한 안내

화면 · 컴포넌트 (Figma 링크)¶

성격 카드: 생성 시 수집 정보(과목·대상학년·온/오프라인·1:1/1:N·설명)의 구조화 조합으로 표현(한 줄 소개 ❌).
활성감 표시: 학생/노트/질문 수 → 경쟁용 숫자 ❌, 상태 중심 문구 ⭕("학생 관리 중", "수업 노트가 기록되고 있어요", "질문과 피드백이 오가고 있어요").
문의하기: 초기 미제공 — 선택 불가 예고 UI("문의하기 (준비 중)").
벤치마킹 — 상세 페이지 구성(원본 §벤치마킹):
라이브클래스: 요약·타겟(이런 분께 좋아요)·진행방식·유의사항·후기·커리큘럼·강사 소개·Q&A·평점 좋은 클래스.
에어클래스: 설명·커리큘럼·수강권·강사 소개·Q&A.
인프런: 강의소개·커리큘럼·수강평·수강 전 문의·커뮤니티·새소식.
→ 프리뷰는 위 구성을 참고하되 판매가 아닌 '운영 흔적 소개'로 재해석(성격 카드 + 활성감 + 문의 예고).
토큰·컴포넌트 → design-system. (전용 Figma 미확보 — 확보 시 추가.)

인터랙션 · 상태¶

[스터디룸 더 둘러보기] → 공개 옵션에 따라 접근 또는 제한 안내. 비공개 룸 진입 시 선생님 설정 옵션 명시 안내.
상태: PUBLIC 읽기전용 / PRIVATE 접근제한 안내 / 빈 데이터(운영 0건 → 카운트 미노출, 상태 문구 fallback).

접근성¶

모바일 우선(비회원 탐색 다수 모바일), 성격 카드·활성감 문구 텍스트 기반(색상만으로 상태 구분 금지). 카드 키보드 포커스·대체텍스트. 공통 규칙은 responsive.

개발 핸드오프 노트¶

공개범위 분기(PUBLIC/PRIVATE)·활성감 워딩 규칙·문의 예고 UI는 prd / frd. 핸드오프 규약 → dev-handoff.