fix(frontend): 좁은 화면 면접 진입 안내 + 헤더 축소 방어

[i3months]

UI/UX 점검

면접 스테이지(InterviewStage.tsx)의 반응형 클래스를 세어 보니 sm:bottom-28 하나뿐이었다. 그리고 docs/ui-patterns.md §9 에 이렇게 적혀 있는데:

면접 세션은 데스크탑 우선. 모바일 진입 시 "데스크탑 환경 권장" 배너 (dismissable)

구현은 없었다. 좁은 화면 사용자는 요소가 겹치는 화면을 아무 설명 없이 만난다.

수정

SmallScreenNotice — 768px 미만 진입 시 1회성 안내. 진행을 막지 않고 기대치만 맞춘다. 좁은 화면에서 뭔가 어긋나 보일 때 이유를 모르면 사용자는 제품이 고장난 줄 안다.

• dismiss 상태는 localStorage 에 영속 — 매 진입마다 같은 안내가 뜨면 그게 더 방해다
• 마운트 시점 폭만 판정한다. 리사이즈에 반응하지 않는 건 의도다(한 번 안내하는 힌트이지 창을 줄일 때마다 끼어들 이유가 없다)
• 이펙트가 아니라 lazy 초기값으로 계산한다 — 이펙트에서 setState 하면 렌더가 한 번 더 돌고 react-hooks/set-state-in-effect 에도 걸린다

헤더 축소 방어 — 우측에 모드 토글·연결 배지·기록·종료 4개가 shrink-0 없이 들어 있었다. 좁은 화면에서 버튼 글자가 눌려 읽히지 않는다.

연결 배지를 좁은 화면에서 숨김 — ConnectionBanner 가 이미 같은 내용을 알린다(연결 끊김 시 상단 배너). 좁은 폭에서 중복으로 자리만 차지했다.

작업 중 발견

hover:bg-info-100 을 쓰려다 알았는데 info 토큰은 50/500/700 만 있다(tokens.css). 없는 토큰은 Tailwind 가 조용히 무효 처리하므로 눈치채기 어렵다. 있는 것으로 바꿨다.

테스트

SmallScreenNotice.test.tsx (3) — 좁은 화면 노출, 넓은 화면 미노출, 닫으면 재노출 안 함.

vitest 121/121 · eslint 0 · tsc · build 통과.

한계 — 솔직히

렌더 결과를 눈으로 확인하지 못했다. 면접 화면은 로그인이 필요해 배포본에서 열어볼 수 없었고, 판단은 전부 클래스 분석 기반이다. 그래서 이번 변경은 보수적인 것만 담았다(안내 추가 + 축소 방어 + 중복 제거). 질문 카드·셀프뷰·컴포저의 실제 겹침 여부와 레이아웃 재설계는 실기기 확인 후에 하는 게 맞다.

특히 확인이 필요한 지점:

• 웹캠 셀프뷰가 absolute bottom-24 right-4 인데, 컴포저 높이가 96px 을 넘으면 겹친다(녹음 바·에러 문구가 붙을 때)
• 헤더 좌측 제목이 좁은 화면에서 어디까지 잘리는지

영향 범위

• DB 마이그레이션: 없음 / API 변경: 없음 / 환경변수: 없음