레이아웃 컴포넌트 단순화
This commit is contained in:
kjs
@@ -8,7 +8,7 @@
|
||||
2. [CLI를 이용한 자동 생성](#cli를-이용한-자동-생성)
|
||||
3. [생성된 파일 구조](#생성된-파일-구조)
|
||||
4. [레이아웃 커스터마이징](#레이아웃-커스터마이징)
|
||||
5. [카드 레이아웃 상세 가이드](#카드-레이아웃-상세-가이드)웃
|
||||
5. [카드 레이아웃 상세 가이드](#카드-레이아웃-상세-가이드)
|
||||
6. [고급 설정](#고급-설정)
|
||||
7. [문제 해결](#문제-해결)
|
||||
|
||||
@@ -846,6 +846,62 @@ const getColumnLabel = (columnName: string) => {
|
||||
<span>{getColumnLabel(columnName)}:</span>
|
||||
```
|
||||
|
||||
#### 9. 레이아웃 드롭 시 오류 발생 문제 (9월 11일 해결됨)
|
||||
|
||||
```typescript
|
||||
// ❌ 문제: 복잡한 존별 드롭 로직으로 인한 오류
|
||||
- Runtime TypeError: Cannot read properties of undefined (reading 'width')
|
||||
- 다중선택 기능 중단
|
||||
- 존별 드롭 이벤트 충돌
|
||||
|
||||
// ✅ 해결: 드롭 시스템 완전 단순화
|
||||
- 모든 존별 드롭 로직 제거
|
||||
- 일반 캔버스 드롭만 사용
|
||||
- 레이아웃은 시각적 가이드 역할만
|
||||
- z-index 기반 레이어 분리 (레이아웃=1, 컴포넌트=2+)
|
||||
```
|
||||
|
||||
##### 드롭 시스템 단순화 후 장점
|
||||
|
||||
- ✅ **안정성**: 복잡한 이벤트 체인 제거로 오류 가능성 감소
|
||||
- ✅ **일관성**: 모든 영역에서 동일한 드롭 동작
|
||||
- ✅ **성능**: 불필요한 prop 전달 및 매핑 로직 제거
|
||||
- ✅ **유지보수**: 단순한 구조로 디버깅 및 수정 용이
|
||||
|
||||
##### 새로운 레이아웃 개발 시 주의사항
|
||||
|
||||
```typescript
|
||||
// ✅ 올바른 레이아웃 구현
|
||||
export const YourLayoutLayout: React.FC<YourLayoutProps> = ({ layout, isDesignMode, ...props }) => {
|
||||
// 🚫 존별 드롭 이벤트 구현 금지
|
||||
// onDrop, onDragOver 등 드롭 관련 이벤트 추가하지 않음
|
||||
|
||||
return (
|
||||
<div className="your-layout">
|
||||
{layout.zones.map((zone) => (
|
||||
<div
|
||||
key={zone.id}
|
||||
className="zone-area"
|
||||
// 🚫 드롭 이벤트 추가 금지
|
||||
// onDrop={...} ❌
|
||||
// onDragOver={...} ❌
|
||||
>
|
||||
{/* 존 내용 */}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<style jsx>{`
|
||||
.your-layout {
|
||||
/* z-index는 1로 고정 (레이아웃 레이어) */
|
||||
z-index: 1;
|
||||
height: 100% !important;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 디버깅 도구
|
||||
|
||||
#### 브라우저 개발자 도구
|
||||
@@ -1025,6 +1081,53 @@ node scripts/create-layout.js form-layout --category=form --zones=3 --descriptio
|
||||
- ✅ **시각적 피드백**: 모든 레이아웃에서 존 경계 명확히 표시
|
||||
- ✅ **React 경고 해결**: Key prop, DOM prop 전달 등 모든 경고 해결
|
||||
|
||||
#### 🔧 드롭 시스템 대폭 단순화 (9월 11일 추가)
|
||||
|
||||
기존의 복잡한 존별 드롭 시스템을 완전히 제거하고 단순한 캔버스 드롭 방식으로 통일했습니다:
|
||||
|
||||
##### 변경 사항
|
||||
|
||||
- ✅ **복잡한 드롭 로직 제거**: `onZoneComponentDrop`, `handleZoneComponentDrop` 등 모든 존별 드롭 이벤트 제거
|
||||
- ✅ **일반 캔버스 드롭만 사용**: 모든 드롭이 `handleComponentDrop`으로 통일
|
||||
- ✅ **레이아웃은 시각적 가이드 역할**: 레이아웃 존은 배치 가이드라인 역할만 수행
|
||||
- ✅ **z-index 기반 레이어링**: 레이아웃 z-index=1, 컴포넌트 z-index=2+로 설정
|
||||
- ✅ **prop 전달 체인 단순화**: 불필요한 prop 매핑 및 전달 로직 제거
|
||||
|
||||
##### 새로운 동작 방식
|
||||
|
||||
**이전 (복잡한 방식)**:
|
||||
```
|
||||
컴포넌트 드래그 → 레이아웃 존 감지 → 존별 드롭 이벤트 → 복잡한 매핑 → 오류 발생
|
||||
```
|
||||
|
||||
**현재 (단순한 방식)**:
|
||||
```
|
||||
컴포넌트 드래그 → 캔버스에 드롭 → 일반 handleComponentDrop만 실행 → 안정적 동작
|
||||
```
|
||||
|
||||
##### 해결된 문제들
|
||||
|
||||
- ✅ **Runtime TypeError 해결**: `selectedComponent.size.width` undefined 오류 완전 해결
|
||||
- ✅ **다중선택 복구**: 드래그로 다중선택 기능 정상화
|
||||
- ✅ **안정적 드롭**: 레이아웃 위든 어디든 일관된 드롭 동작
|
||||
- ✅ **코드 단순화**: 복잡한 존별 로직 제거로 유지보수성 향상
|
||||
|
||||
##### 기술적 변경점
|
||||
|
||||
1. **GridLayout, FlexboxLayout**: `onDragOver`, `onDrop` 이벤트 핸들러 제거
|
||||
2. **ScreenDesigner**: `onZoneComponentDrop` prop 전달 제거
|
||||
3. **DynamicComponentRenderer**: `onComponentDrop` 매핑 로직 제거
|
||||
4. **DynamicLayoutRenderer**: 존별 prop 전달 제거
|
||||
5. **RealtimePreviewDynamic**: z-index 기반 레이어링 적용
|
||||
|
||||
##### 개발자 가이드
|
||||
|
||||
새로운 시스템에서는:
|
||||
- 🚫 **존별 드롭 로직 구현 금지**: 모든 드롭은 캔버스 레벨에서 처리
|
||||
- ✅ **시각적 가이드만 제공**: 레이아웃은 배치 가이드라인 역할만
|
||||
- ✅ **z-index로 레이어 관리**: 레이아웃=1, 컴포넌트=2+ 설정
|
||||
- ✅ **단순한 이벤트 처리**: 복잡한 이벤트 체인 대신 직접적인 핸들링
|
||||
|
||||
#### 개발자 도구 강화
|
||||
|
||||
- ✅ **디버깅 로그**: 카드 설정 로드, 데이터 가져오기 등 상세 로깅
|
||||
@@ -1042,9 +1145,38 @@ node scripts/create-layout.js form-layout --category=form --zones=3 --descriptio
|
||||
|
||||
### 🔮 향후 계획
|
||||
|
||||
#### 새로운 레이아웃 타입
|
||||
- **Table Layout**: 데이터 테이블 전용 레이아웃
|
||||
- **Form Layout**: 폼 입력에 최적화된 레이아웃
|
||||
- **Dashboard Layout**: 위젯 배치에 특화된 레이아웃
|
||||
- **Mobile Responsive**: 모바일 대응 반응형 레이아웃
|
||||
|
||||
#### 시스템 개선
|
||||
- **레이아웃 테마 시스템**: 다크/라이트 모드 지원
|
||||
- **레이아웃 스타일 프리셋**: 미리 정의된 스타일 템플릿
|
||||
- **레이아웃 애니메이션**: 전환 효과 및 인터랙션 개선
|
||||
- **성능 최적화**: 가상화 및 지연 로딩 적용
|
||||
|
||||
#### 개발자 도구
|
||||
- **레이아웃 빌더 GUI**: 코드 없이 레이아웃 생성 도구
|
||||
- **실시간 프리뷰**: 레이아웃 편집 중 실시간 미리보기
|
||||
- **레이아웃 디버거**: 시각적 디버깅 도구
|
||||
- **성능 모니터링**: 레이아웃 렌더링 성능 분석
|
||||
|
||||
### 🎯 중요한 변화: 단순화된 드롭 시스템
|
||||
|
||||
**2025년 9월 11일**부터 모든 레이아웃에서 **복잡한 존별 드롭 로직이 완전히 제거**되었습니다.
|
||||
|
||||
새로운 시스템의 핵심 원칙:
|
||||
- 🎯 **레이아웃 = 시각적 가이드**: 배치 참고용으로만 사용
|
||||
- 🎯 **캔버스 = 실제 배치**: 모든 컴포넌트는 캔버스에 자유롭게 배치
|
||||
- 🎯 **z-index = 레이어 분리**: 레이아웃(1) 위에 컴포넌트(2+) 배치
|
||||
- 🎯 **단순함 = 안정성**: 복잡한 로직 제거로 오류 최소화
|
||||
|
||||
이 변화로 인해:
|
||||
- ✅ 모든 드롭 관련 오류 해결
|
||||
- ✅ 다중선택 기능 정상화
|
||||
- ✅ 레이아웃 개발이 더욱 단순해짐
|
||||
- ✅ 시스템 전체 안정성 크게 향상
|
||||
|
||||
더 자세한 정보가 필요하면 각 레이아웃의 `README.md` 파일을 참고하거나, 브라우저 개발자 도구에서 `window.__LAYOUT_REGISTRY__.help()`를 실행해보세요! 🚀
|
||||
|
||||
Reference in New Issue
Block a user