chpark/vexplor

Fork 0

Files

kjs 8d1f0e7098 제어관리 개선판

2025-10-24 14:11:12 +09:00

5.8 KiB

Raw Blame History

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

적용된 수정사항

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>

테스트 방법

브라우저 강제 새로고침
- Windows: Ctrl + Shift + R 또는 Ctrl + F5
- Mac: Cmd + Shift + R
노드 플로우 편집기 열기
- 관리자 메뉴 > 플로우 관리
테스트 노드 추가
- 테이블 소스 노드를 캔버스에 드래그
속성 패널 확인
- 노드 클릭
- 우측에 속성 패널 열림
- 회색 배경 확인 (스크롤 영역)
스크롤 테스트
- 마우스 휠로 스크롤
- 또는 스크롤바 드래그
- 빨간 박스 → 중간 지점
- 파란 박스 → 맨 아래 (스크롤 성공!)

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

체크리스트

✅ 브라우저 캐시 완전 삭제

F12 > Network 탭 > "Disable cache" 체크

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

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

✅ 콘솔 에러 확인

F12 > Console 탭
에러 메시지 확인

✅ 브라우저 호환성
- 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: 컨텐츠 높이 확인

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

시각적 표시

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

노란색 박스 (맨 위)
- "📏 스크롤 테스트: 이 패널은 스크롤 가능해야 합니다"
회색 배경 (전체 스크롤 영역)
- bg-gray-50 클래스
빨간색 박스 (중간)
- "🚨 스크롤 테스트: 이 빨간 박스가 보이면 스크롤이 작동하는 것입니다!"
20개 테스트 항목 (중간 ~ 아래)
- "테스트 항목 1" ~ "테스트 항목 20"
파란색 박스 (맨 아래)
- "🎉 맨 아래 도착! 이 파란 박스가 보이면 스크롤이 완벽하게 작동합니다!"

제거할 테스트 코드

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

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가지 방법:

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

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

5.8 KiB Raw Blame History