[jyuuuuu0]

개요

시안이 데스크톱 화면뿐이라 대부분의 화면이 고정 폭(본문 700px + 사이드바 260px 등)으로 되어 있어, 휴대폰에서는 가로로 넘치거나 상단 바가 한 줄에 들어가지 않았습니다.
넓은 화면(lg, 1024px 이상)은 지금 모습 그대로 두고, 좁은 화면에서만 sm · md · lg 분기로 배치를 바꿨습니다.

#52

변경 사항

공통

• 본문과 상단 바의 좌우 여백을 휴대폰에서 px-8 → px-4로 줄이고, 위쪽 여백과 큰 제목 크기도 줄였습니다.

헤더 · 상단 바

• 작은 검색창이 좁으면 줄어들고, 휴대폰에서는 / 단축키 표시를 숨깁니다. 검색 화면은 휴대폰에서 로고 글자를 숨겨 입력칸에 자리를 줍니다.
• 문서 상단 바는 768px 미만에서 '분류 › 제목' 경로를, 640px 미만에서 검색창을 뺍니다. '편집 중' 표시는 휴대폰에서 이름 없이 '편집 중'만 보입니다(이름은 title에 남습니다).
• 편집 상단 바는 좁으면 ← 화살표만 남기고(문서 제목은 화면 낭독기에 남김), 휴대폰에서 '편집 중' 표시와 '취소' 버튼(화살표와 같은 곳으로 감)을 숨깁니다. 마지막 저장 시각은 1024px 미만에서 숨깁니다.
• 편집 역사 상단 바는 긴 문서 제목을 말줄임합니다.

화면

• 문서: 1024px 미만에서 목차 · 최근 편집 역사가 본문 아래로 내려갑니다.
• 편집 · 새 문서: 대표 이미지 · 도움말이 본문 칸 아래로 내려가고, 본문 칸 높이가 화면에 맞춰 바뀌며, 편집 요약이 좁으면 줄을 바꿉니다.
  다른 사람 커서를 그리는 거울(MIRROR_TEXT)과 맞춰야 해서 textarea의 여백과 글꼴은 바꾸지 않았습니다.
• 마이페이지: 즐겨찾기가 최근 기여 아래로 내려가고, 긴 이메일은 줄바꿈됩니다.
• 홈: 인기 문서가 420px 미만에서 1열로 나옵니다.
• 편집 역사: 통계 카드의 간격을 줄였습니다.
• 검색: '이 문서 새로 만들기' 안내가 휴대폰에서 세로로 쌓입니다.
• 404 · 문서 없음 · 오류: 버튼이 줄바꿈되고 한글 제목이 단어 중간에서 끊기지 않습니다.

문서

• CLAUDE.md 스타일 규칙에 반응형 분기 규칙을 적었습니다.

확인 사항

• npm run lint, npm run typecheck, npm run build가 통과합니다.
• 360px 폭에서 홈 · 로그인 · 검색 · 문서 없음 · 404를 열어 가로 넘침이 없는 것을 확인했습니다.
• 문서 · 편집 · 편집 역사 · 마이페이지는 백엔드의 문서 상세 조회가 빈 응답을 줘서([Bug] 문서 상세 조회(GET /api/v1/articles/{id})가 30초 뒤 빈 본문으로 200을 반환 gikipedia-server#46) 브라우저로 확인하지 못했습니다. 그 이슈가 고쳐진 뒤 좁은 폭에서 확인이 필요합니다.
• 라이트 모드는 확인하지 않았습니다(색은 바꾸지 않았습니다).

체크리스트

• CLAUDE.md의 구조·스타일 규칙을 지켰습니다.
• npm run lint, npm run typecheck, npm run build가 통과합니다.
• 화면이 바뀌었다면 라이트 · 다크 모드를 모두 확인했습니다.
• 구조나 규칙이 바뀌었다면 CLAUDE.md와 README.md를 고쳤습니다.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
frontend	Error		Nov 1, 2026 11:39pm UTC

[claude]

요약: 시안 그대로인 넓은 화면(lg 이상)은 두고, 좁은 화면에만 sm·md·lg 분기를 덧붙여 반응형으로 바꿉니다. 바뀐 것은 여백, 사이드바를 본문 아래로 내리는 배치, 상단 바 요소 숨김, 제목 크기입니다.

지적: 버그 3 · 제안 1

• 머지 전에 고칠 것
  • CollaborationStatus: lg 미만에서 저장 결과(저장함 · 리비전 N 등)를 숨겨, 기존 문서를 저장해도 성공했는지 알 수 없습니다. 화면 읽기 프로그램으로도 들을 수 없습니다.
  • EditorTopBar: 360px 폭에서 재연결 중이거나 다른 편집자가 여럿이면 상단 바가 넘쳐 저장 버튼이 화면 밖으로 밀립니다.
• 그 밖
  • DocumentTopNav: 640px 미만에서 숨긴 검색창이 / 키를 가로챕니다(작은 버그).
  • PopularDocuments: 주석이 바뀐 열 수와 맞지 않습니다(제안).

[확인 필요]

• EditorTopBar 넘침은 글꼴 크기로 폭을 어림해 계산한 것입니다. 이 환경에서는 백엔드 없이 편집 화면을 띄울 수 없어 실제 렌더링으로 확인하지 못했습니다.

리뷰 범위: 바뀐 파일 28개를 모두 읽었고, 건너뛴 파일은 없습니다.