Empty State 컴포넌트의 높이가 유독 크다면

특정 페이지의 Empty State가 다른 곳보다 크게 보인다면, 화면만 봐서는 원인을 모를 수 있다. 로그와 HTML 구조를 확인해야 한다.

공개 URL로 실제 HTML 확인하기

# 배포된 페이지의 구조 확인
curl -s https://example.com/empty-page > page.html
grep -A 20 -B 5 'empty\|no-data' page.html

HTML에 실제 레이아웃 정보가 있는가? CSS 클래스가 제대로 적용되는가?

컴포넌트 props 로깅

// EmptyState 컴포넌트
function EmptyState({ height, message }: Props) {
  console.log('EmptyState rendered:', { height, message })

  return (
    <div style={{ minHeight: height }}>
      {message}
    </div>
  )
}

Props로 받은 height 값이 예상과 다를 수 있다.

빌드 결과 확인

npm run build

# CSS가 제대로 번들된 여부 확인
grep -r 'empty.*state\|no.*data' .next/static/

CSS 인라인 방식이나 외부 CSS 파일 경로가 잘못됐을 수 있다.

HTML head 비교

# 정상인 페이지
curl -s https://example.com/normal-page | head -c 500

# 문제있는 페이지
curl -s https://example.com/empty-page | head -c 500

Metadata나 viewport 설정이 다른가?

진단 순서

1. 실제 배포 URL에서 개발자 도구로 DOM 구조 확인
2. 브라우저 콘솔에서 컴포넌트 props 확인
3. 빌드 로그에서 경고나 누락된 파일 확인
4. CSS가 제대로 적용됐는지 Computed Styles 확인

결과가 화면만으로는 판단 불가능할 때는 항상 데이터와 로그를 함께 본다.