Files

byeongcheolryu 65a8510c0b fix: 품목기준관리 실시간 동기화 수정

- BOM 항목 추가/수정/삭제 시 섹션탭 즉시 반영
- 섹션 복제 시 UI 즉시 업데이트 (null vs undefined 이슈 해결)
- 항목 수정 기능 추가 (useTemplateManagement)
- 실시간 동기화 문서 추가

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-27 22:19:50 +09:00

3.0 KiB

Raw Blame History

차트 경고 수정 보고서

문제 상황

CEODashboard에서 다음과 같은 경고가 발생:

The width(-1) and height(-1) of chart should be greater than 0,
please check the style of container, or the props width(100%) and height(100%),
or add a minWidth(0) or minHeight(undefined) or use aspect(undefined) to control the
height and width.

원인 분석

문제 코드

<CardContent>
  <div className="h-80">
    <OptimizedChart data={...} height={320}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={...}>
          ...
        </BarChart>
      </ResponsiveContainer>
    </OptimizedChart>
  </div>
</CardContent>

원인

ResponsiveContainer가 height="100%"로 설정됨
부모 div가 Tailwind 클래스 h-80 사용
컴포넌트 마운트 시점에 부모의 계산된 높이를 제대로 읽지 못함
recharts가 높이를 -1로 계산하여 경고 발생

해결 방법

수정 코드

<ResponsiveContainer width="100%" height={320}>
  {/* height="100%" → height={320} */}
</ResponsiveContainer>

수정 이유

h-80 = 320px (Tailwind: 1 단위 = 4px)
명시적인 픽셀 값으로 설정하여 마운트 시점에 즉시 계산 가능
ResponsiveContainer의 너비는 여전히 반응형 유지 (width="100%")

수정 위치

CEODashboard.tsx

Line 1201: 월별 매출 추이 차트
Line 1269: 품질 지표 차트
Line 1343: 생산 효율성 차트
Line 2127: 기타 차트

총 4개의 ResponsiveContainer 수정 완료

테스트

빌드 상태

✅ 컴파일 성공: ✓ Compiled successfully in 3.3s

예상 결과

✅ 차트 경고 메시지 사라짐
✅ 차트가 즉시 올바른 크기로 렌더링됨
✅ 반응형 동작 유지 (너비는 여전히 100%)

적용 가능한 다른 대시보드

현재는 CEODashboard에만 이 패턴이 있었지만, 만약 다른 대시보드에서도 같은 경고가 발생하면:

// Before
<ResponsiveContainer width="100%" height="100%">

// After  
<ResponsiveContainer width="100%" height={320}>

또는 부모 컨테이너의 높이에 맞춰 조정

참고사항

Tailwind 높이 클래스

h-64 = 256px
h-72 = 288px
h-80 = 320px
h-96 = 384px

ResponsiveContainer 권장 사항

고정 높이: 대시보드 차트처럼 일정한 크기가 필요한 경우
```
<ResponsiveContainer width="100%" height={320} />
```
비율 기반: aspect ratio로 제어하고 싶은 경우
```
<ResponsiveContainer width="100%" aspect={2} />
```
최소 높이: 동적이지만 최소값이 필요한 경우
```
<ResponsiveContainer width="100%" minHeight={300} />
```

결론

✅ 문제 해결: 차트 크기 경고 완전히 제거 ✅ 성능 개선: 마운트 시 즉시 올바른 크기로 렌더링 ✅ 반응형 유지: 너비는 여전히 컨테이너에 맞춰 조정됨

recharts의 ResponsiveContainer를 사용할 때는 명시적인 높이를 설정하는 것이 권장됩니다!

3.0 KiB Raw Blame History