[UX/UI] 포스트 상세 — TOC 비활성·모바일 코드블록·복사 버튼

[Malloc72P]

포스트 상세(읽기 경험)를 대표 6개 글에서 검증한 UX/UI 리뷰입니다. 이전/다음·추천 영역은 정상, 런타임 에러는 없었습니다.

🔴 높음

• TOC(목차)가 전 구간에서 죽어 있음 — MdxWrapper가 toc={[]}를 하드코딩해 스크롤 추적·클릭 이동·active 하이라이트가 한 번도 동작하지 않음. 게다가 노출 기준이 2xl(≥1536px)뿐. MDX 헤딩에서 실제 toc 주입 + 노출을 lg(≥1024px)로 하향 + 모바일 접이식.
  • 근거: apps/blog/src/components/mdx-wrapper.tsx:28(toc={[]}), post-detail/post-detail.tsx:104(hidden 2xl:flex)
• 모바일 코드블록 가로 잘림 + 복사 버튼 숨김 — 긴 코드가 잘리는데 복사 버튼이 display:none이라 읽지도 복사도 못함. 모바일 복사 버튼 복원(44px) + 본문 12→14px로 1줄 노출량 확대.
  • 근거: apps/blog/src/components/post-detail/post-detail.module.scss:164-166
• 복사 버튼 성공 피드백·포커스 링·aria-label 없음 — 클립보드 복사는 되나 아이콘 불변(성공 알 수 없음), outline:none, 라벨 없음. 클릭 후 IconCheck 토글 + aria-live, aria-label="코드 복사", focus-visible:ring.
  • 근거: apps/blog/src/components/post-detail/copy-button.tsx:26-39

🟡 중간

• 본문 H1 중복(헤더 + MDX #) — ArticleHeader H1과 본문 첫 #가 동일 문구로 두 번 표시, 페이지 h1 다중. MDX 최상단 # 제거(시스템이 metadata.title로 헤더 H1 렌더). 작성 가이드의 "H1 1회" 규칙과도 충돌.
  • 근거: components/article/article-header.tsx:35, 각 page.mdx의 # 제목
• 데스크톱 본문 측정폭 ~97ch — 권장 가독 폭(60~80자) 초과로 장문 줄 추적 어려움. 본문 단락 max-w-[68ch] 제한(코드/이미지는 풀폭), 비는 우측을 TOC로 활용.
  • 근거: article-container.tsx:13 (max-w-[1024px])
• 헤딩에 id/앵커 없음 — 섹션 직접 링크 불가, TOC 클릭 이동 대상도 없음. rehype-slug로 id 자동 부여 + 호버 앵커. (TOC 주입과 한 묶음.)
  • 근거: 본문 헤딩 전부 id:null, post-detail.tsx:109(getElementById)

⚪ 낮음

• Next/Image 종횡비 경고 — PostImage가 width=600 height=400 고정인데 CSS 표시폭이 달라 경고. style={{ width:'100%', height:'auto' }} 또는 sizes 지정.
  • 근거: apps/blog/src/components/post-detail/post-image.tsx:15-22
• 긴 글용 플로팅 "상단 이동" 버튼 부재 — Back to top이 전역 푸터에만 있음(긴 글에서 아쉬움).

---

Playwright(인터랙션 포함) 브라우저 검증 + 소스 확인 기반 자동 리뷰. 좌하단 "N"은 Next.js dev 인디케이터로 프로덕션엔 없음.