반응형 개발 명세 (FRD)¶

프론트엔드만 손대는 작업이라 백엔드 변경은 없다. 기존 화면을 디바이스 폭에 따라 분기 렌더링하는 게 전부다. 브레이크포인트·전환 규칙 같은 값은 responsive에 있고, 이 문서는 그 값을 실제 프론트 구현으로 옮길 때의 골격을 담는다. 기획 배경은 prd, 아키텍처 맥락은 frontend-architecture를 참고한다.

기술 접근 · 아키텍처¶

대상: Next.js 15 / App Router 프론트엔드(mvp-front:src/app). 백엔드/도메인 변경 없음 — 응답 데이터 동일, 렌더링만 분기.
작업 순서(정책): 기획 → 디자인 → 개발 순차.

브레이크포인트·SSR/CSR (구현 골격)¶

브레이크포인트: 1200(PC) / 768(태블릿) / 360(모바일). CSS 미디어쿼리/컨테이너 쿼리 + 디자인 토큰으로 분기.
1200 이상: 내부 콘텐츠 폭 유지 + 좌우 여백 확대(레이아웃 max-width 고정).
768 태블릿: LNB(사이드바) → 탭 컴포넌트 전환. LNB의 원래 목적(하위 스터디룸 리스트 표시)을 폭 축소 시 탭으로 보존(2열 컬럼 → 탭).
360 모바일: 3열 카드 → 1열 스택.
SSR/CSR 영향: 서버는 디바이스 폭을 모르므로 초기 HTML은 디바이스 무관(레이아웃 시프트 주의). 분기는 CSS 우선(SSR 안전), JS 기반 분기는 hydration 후 CSR에서만 — first paint 깜빡임/CLS 방지 위해 matchMedia 의존 최소화. SEO 대상(로그인 전 소개·강사 목록)은 SSR 유지.

API · 데이터 모델¶

신규 API 없음. 디바이스별로 응답 형태가 달라지지 않는다(서버는 디바이스 미인지).
도메인 모델 변경 없음. 반응형은 표현 계층 한정. 회원/스터디룸 데이터는 member·studyroom 도메인 그대로 사용.

의존성 · 영향 범위¶

표현 계층(레이아웃·CSS·일부 클라이언트 분기)만 영향. 백엔드·도메인 무영향.
스터디룸 화면 미해결 분기: LNB 삭제(헤더 접근) 채택 시 네비게이션 구조·라우팅 변경 범위 큼 → 개발 검토 후 확정(출처 반응형 논의 2차).

예외·검증¶

브레이크포인트 경계에서 레이아웃 깨짐·CLS·LNB↔탭 전환 시 포커스 유실 방지.

테스트 계획¶

디바이스 폭별(1200/768/360) 시각 회귀·CLS·핵심 플로우 동작 검증. E2E/디바이스 매트릭스 → qa-playbook.

작업 분해 (이슈 링크)¶

레이아웃 max-width·여백(1200+) / LNB→탭 전환(768) / 카드 스택(360) / SSR 안전 분기 / 스터디룸 네비 결정 반영.