선생님 목록 디자인 스펙¶

공개 쇼케이스 페이지 /teachers의 화면과 인터랙션을 정의한다. 로그인 없이 들어올 수 있고, 신규 강사와 공개 스터디룸을 카드 목록으로 보여 준 뒤 카드를 누르면 상세로 넘어간다. UX/UI는 일단 임시 구성으로 띄우고 모바일·사용성을 보며 다듬기로 했기에, 여기 담은 건 와이어프레임 이전의 1차 골격이다. 상위 기획은 prd에 있다.

사용자 플로우¶

GNB(헤더) "선생님" → /teachers (비로그인 접근 가능)
  페이지 구성(상→하): 헤더 영역 → 신규 강사 프로필 목록 → 공개 스터디룸 목록
  ├─ 강사 카드 클릭 → 강사 프로필 상세
  └─ 스터디룸 카드 클릭 → 스터디룸 상세

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

강사 카드: 이름·닉네임·가입일, 신규(30일 이내) NEW 배지(P1). PII(이메일·전화) 미표시.
스터디룸 카드: 이름·설명·강사명·정원(capacity)·수업형태(modality/classForm)·과목(subjectType)·학교정보(schoolInfo). visibility=PUBLIC만 노출.
정렬 드롭다운(P1): 최신순/오래된순/가나다순 → NEWEST/OLDEST/ALPHABETICAL.
와이어프레임 미확정(원본 §6 "임시 구성"). 토큰·컴포넌트는 design-system을 따른다. (전용 Figma 미확보 — 확보 시 추가.)

인터랙션 · 상태¶

카드 hover·클릭 피드백. 강사 카드 → 강사 프로필 상세, 스터디룸 카드 → 스터디룸 상세.
정렬 드롭다운(P1) 선택 시 목록 재정렬. 필터(P1+): 신규 강사·강사별 스터디룸. 검색·세부 필터는 Phase 3.
상태: 로딩(스켈레톤) / 빈 목록(엠프티, 200 empty list) / 정상 / 더보기·페이지네이션.

접근성¶

모바일 우선 — 카드 그리드 1열(모바일)↔다열(데스크탑) 가변.
카드 키보드 포커스·Enter 활성, NEW 배지·정원 등 상태는 색상만이 아닌 텍스트 병행, 카드 이미지 대체텍스트. 공통 규칙은 responsive.

개발 핸드오프 노트¶

목록/카드 컴포넌트·상태 정의·로딩/엠프티 처리는 dev-handoff 규약을 따른다.
API·응답 필드 매핑(PII 미노출 화이트리스트)·정렬 파라미터는 frd §API/§예외·검증.