---
name: ui-debugging
description: 리포트 UI/UX 문제 디버깅 가이드. 리포트 화면의 레이아웃, 스크롤, 스타일 문제 진단과 해결. 리포트 UI 버그, 레이아웃, CSS 관련 이슈 시 사용.
---

# 리포트 UI/UX 디버깅 가이드

## 수정 범위 제약

`frontend/components/report/` 내 파일만 수정. 공통 레이아웃(AppLayout 등)은 수정하지 않는다.

## 디버깅 공통 절차

1. 브라우저 개발자 도구로 문제 요소 식별
2. Computed Style 확인
3. 부모-자식 관계 추적
4. 리포트 컴포넌트 내에서 최소한의 수정
5. 반응형/다크모드에서도 검증

## 문제 유형별 진단

### 레이아웃 깨짐
- [ ] Flexbox 부모에 `display: flex` 확인
- [ ] 부모 체인에 명시적 높이/너비 확인
- [ ] `overflow: hidden` 누락 여부

### 스크롤 문제
- [ ] 부모 높이 확정
- [ ] 스크롤 영역: `flex: 1, minHeight: 0, overflowY: auto`
- [ ] 중간 컨테이너: `overflow-hidden`
- 상세 패턴: [reference.md](reference.md) 참조

### 스타일 불일치
- [ ] CSS 변수 사용 (하드코딩 색상 금지)
- [ ] shadcn/ui 컴포넌트 우선
- [ ] 다크모드 호환 (`bg-background`)

### 테이블 고정 헤더 (Sticky Header)

```tsx
<div className="relative overflow-auto" style={{ height: "450px" }}>
  <Table noWrapper>
    <TableHeader>
      <TableRow>
        <TableHead className="bg-background sticky top-0 z-10 border-b shadow-[0_1px_0_0_rgb(0,0,0,0.1)]">
          헤더
        </TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>{/* 데이터 행들 */}</TableBody>
  </Table>
</div>
```

필수: `noWrapper`, `bg-background sticky top-0 z-10`, 고정 높이
