ERP-node/스크롤_문제_해결_가이드.md

속성 패널 스크롤 문제 해결 가이드

적용된 수정사항

1. PropertiesPanel.tsx

// 최상위 컨테이너
<div className="flex h-full w-full flex-col">

// 헤더 (고정 높이)
<div className="flex h-16 shrink-0 items-center justify-between border-b bg-white p-4">

// 스크롤 영역 (중요!)
<div 
  className="flex-1 overflow-y-scroll bg-gray-50"
  style={{ 
    maxHeight: 'calc(100vh - 64px)',
    overflowY: 'scroll',
    WebkitOverflowScrolling: 'touch'
  }}
>

2. FlowEditor.tsx

// 속성 패널 컨테이너 단순화
<div className="h-full w-[350px] border-l bg-white">
  <PropertiesPanel />
</div>

3. TableSourceProperties.tsx / ExternalDBSourceProperties.tsx

// ScrollArea 제거, 일반 div 사용
<div className="min-h-full space-y-4 p-4">
  {/* 컨텐츠 */}
</div>

테스트 방법

1. 브라우저 강제 새로고침

   • Windows: Ctrl + Shift + R 또는 Ctrl + F5
   • Mac: Cmd + Shift + R

2. 노드 플로우 편집기 열기

   • 관리자 메뉴 > 플로우 관리

3. 테스트 노드 추가

   • 테이블 소스 노드를 캔버스에 드래그

4. 속성 패널 확인

   • 노드 클릭
   • 우측에 속성 패널 열림
   • 회색 배경 확인 (스크롤 영역)

5. 스크롤 테스트

   • 마우스 휠로 스크롤
   • 또는 스크롤바 드래그
   • 빨간 박스 → 중간 지점
   • 파란 박스 → 맨 아래 (스크롤 성공!)

스크롤이 여전히 안 되는 경우

체크리스트

1. ✅ 브라우저 캐시 완전 삭제

   F12 > Network 탭 > "Disable cache" 체크
   

2. ✅ 개발자 도구로 HTML 구조 확인

   F12 > Elements 탭
   속성 패널의 div 찾기
   → "overflow-y: scroll" 스타일 확인
   

3. ✅ 콘솔 에러 확인

   F12 > Console 탭
   에러 메시지 확인
   

4. ✅ 브라우저 호환성

   • Chrome/Edge: 권장
   • Firefox: 지원
   • Safari: 일부 스타일 이슈 가능

디버깅 가이드

단계 1: HTML 구조 확인

<!-- 올바른 구조 -->
<div class="flex h-full w-full flex-col"> <!-- PropertiesPanel -->
  <div class="flex h-16 shrink-0...">      <!-- 헤더 -->
  <div class="flex-1 overflow-y-scroll..."> <!-- 스크롤 영역 -->
    <div class="min-h-full space-y-4 p-4"> <!-- 속성 컴포넌트 -->
      <!-- 긴 컨텐츠 -->
    </div>
  </div>
</div>

단계 2: CSS 스타일 확인

/* 스크롤 영역에 있어야 할 스타일 */
overflow-y: scroll;
max-height: calc(100vh - 64px);
flex: 1 1 0%;

단계 3: 컨텐츠 높이 확인

스크롤이 생기려면:
컨텐츠 높이 > 컨테이너 높이

시각적 표시

현재 테스트용으로 추가된 표시들:

1. 노란색 박스 (맨 위)

   • "📏 스크롤 테스트: 이 패널은 스크롤 가능해야 합니다"

2. 회색 배경 (전체 스크롤 영역)

   • bg-gray-50 클래스

3. 빨간색 박스 (중간)

   • "🚨 스크롤 테스트: 이 빨간 박스가 보이면 스크롤이 작동하는 것입니다!"

4. 20개 테스트 항목 (중간 ~ 아래)

   • "테스트 항목 1" ~ "테스트 항목 20"

5. 파란색 박스 (맨 아래)

   • "🎉 맨 아래 도착! 이 파란 박스가 보이면 스크롤이 완벽하게 작동합니다!"

제거할 테스트 코드

스크롤이 확인되면 다음 코드를 제거하세요:

TableSourceProperties.tsx

// 제거할 부분 1 (줄 172-174)
<div className="rounded bg-yellow-50 p-2 text-xs text-yellow-700">
  📏 스크롤 테스트: 이 패널은 스크롤 가능해야 합니다
</div>

// 제거할 부분 2 (줄 340-357)
<div className="space-y-2">
  <div className="rounded bg-red-50 p-4 text-red-700">
    {/* ... */}
  </div>
  {[...Array(20)].map((_, i) => (/* ... */))}
  <div className="rounded bg-blue-50 p-4 text-blue-700">
    {/* ... */}
  </div>
</div>

PropertiesPanel.tsx

// bg-gray-50 제거 (줄 47)
// 변경 전: className="flex-1 overflow-y-scroll bg-gray-50"
// 변경 후: className="flex-1 overflow-y-scroll"

핵심 원리

┌─────────────────────────────────┐
│ FlowEditor (h-full)             │
│ ┌─────────────────────────────┐ │
│ │ PropertiesPanel (h-full)    │ │
│ │ ┌─────────────────────────┐ │ │
│ │ │ 헤더 (h-16, shrink-0)   │ │ │ ← 고정 64px
│ │ └─────────────────────────┘ │ │
│ │ ┌─────────────────────────┐ │ │
│ │ │ 스크롤 영역             │ │ │
│ │ │ (flex-1, overflow-y)    │ │ │
│ │ │                         │ │ │
│ │ │ ↓ 컨텐츠가 넘치면       │ │ │
│ │ │ ↓ 스크롤바 생성!        │ │ │
│ │ │                         │ │ │
│ │ └─────────────────────────┘ │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘

flex-1 = 남은 공간을 모두 차지
overflow-y: scroll = 세로 스크롤 강제 표시
maxHeight = 넘칠 경우를 대비한 최대 높이

마지막 체크포인트

스크롤이 작동하는지 확인하는 3가지 방법:

1. ✅ 마우스 휠: 속성 패널 위에서 휠 스크롤
2. ✅ 스크롤바: 우측에 스크롤바가 보이면 드래그
3. ✅ 키보드: Page Up/Down 키 또는 방향키

하나라도 작동하면 성공입니다!