{Array.from({ length: 12 }).map((_, i) => (

))}

6 / 12 컬럼

``` ### 2. 행(Row) 관리 UI (신규) ```tsx { /* 각 행에 설정 가능한 옵션 */ } 행 높이 컴포넌트 간격 정렬 ; ``` ### 3. 드래그앤드롭 경험 개선 ```tsx { /* 빈 행 */ }

컴포넌트를 여기에 드래그하세요 {/* 빠른 패턴 버튼 */}

; { /* 드롭 시 그리드 가이드라인 표시 */ }

{/* 12개 컬럼 구분선 */} {Array.from({ length: 12 }).map((_, i) => (

))}

; ``` --- ## 🔍 마이그레이션 상세 전략 ### 1. 자동 변환 알고리즘 ```typescript // 기존 컴포넌트 변환 프로세스 function migrateComponent(oldComponent: OldComponentData): ComponentData { // Step 1: 픽셀 width → 컬럼 스팬 const gridColumnSpan = convertWidthToColumnSpan( oldComponent.size.width, 1920 // 기준 캔버스 너비 ); // Step 2: Y 좌표 → 행 인덱스 const gridRowIndex = calculateRowIndex( oldComponent.position.y, allComponents ); // Step 3: X 좌표 → 시작 컬럼 (같은 행 내) const gridColumnStart = calculateColumnStart( oldComponent.position.x, rowComponents ); return { ...oldComponent, gridColumnSpan, gridRowIndex, gridColumnStart, size: { height: oldComponent.size.height, // 높이만 유지 // width 제거 }, }; } ``` ### 2. 변환 정확도 보장 ```typescript // 변환 전후 비교 const before = { position: { x: 100, y: 50 }, size: { width: 960, height: 40 }, // 50% 너비 }; const after = { gridRowIndex: 0, gridColumnSpan: "half", // 정확히 50% gridColumnStart: 1, // 자동 계산 size: { height: 40 }, }; // 시각적으로 동일한 결과 보장 ``` ### 3. 예외 처리 ```typescript // 변환 불가능한 경우 처리 function migrateWithFallback(component: OldComponentData): ComponentData { try { return migrateComponent(component); } catch (error) { console.error("마이그레이션 실패:", error); // Fallback: 기본값 사용 return { ...component, gridColumnSpan: "half", // 안전한 기본값 gridRowIndex: 0, size: { height: component.size.height }, }; } } ``` --- ## ⚠️ 주의사항 및 제약 ### 1. 제거되는 기능 - ❌ 픽셀 단위 정밀 너비 조정 - ❌ 자유로운 width 숫자 입력 - ❌ 커스텀 width 값 ### 2. 유지되는 기능 - ✅ 높이(height) 픽셀 입력 - ✅ 위치(Y 좌표) 조정 - ✅ 모든 스타일 옵션 (width 제외) ### 3. 특수 케이스 처리 #### 3.1 모달/팝업 ```typescript // 모달은 컬럼 스팬 사용 안 함 interface ModalConfig { width: "sm" | "md" | "lg" | "xl" | "2xl" | "full"; // 기존 유지 } ``` #### 3.2 FloatingPanel ```typescript // 편집 패널 자체는 픽셀 width 유지 ``` #### 3.3 사이드바 ```typescript // 사이드바도 컬럼 스팬으로 변경 interface SidebarConfig { sidebarSpan: ColumnSpanPreset; // "quarter" | "third" | "half" } ``` --- ## 🎯 완료 기준 ### 기능 완성도 - [ ] 모든 기존 화면이 새 시스템에서 정상 표시 - [ ] 새 컴포넌트 생성 및 배치 정상 동작 - [ ] 템플릿 적용 정상 동작 - [ ] 드래그앤드롭 정상 동작 ### 코드 품질 - [ ] TypeScript 에러 0개 - [ ] Linter 경고 0개 - [ ] 불필요한 width 관련 코드 완전 제거 - [ ] 주석 및 문서화 완료 ### 성능 - [ ] 렌더링 성능 저하 없음 - [ ] 마이그레이션 속도 < 1초 (화면당) - [ ] 메모리 사용량 증가 없음 ### 사용자 경험 - [ ] 직관적인 UI - [ ] 시각적 프리뷰 제공 - [ ] 빠른 패턴 적용 - [ ] 에러 메시지 명확 --- ## 📊 예상 효과 ### 정량적 효과 - 코드 라인 감소: ~500줄 (width 계산 로직 제거) - 버그 감소: width 관련 버그 100% 제거 - 개발 속도: 화면 구성 시간 30% 단축 - 유지보수: width 관련 이슈 0건 ### 정성적 효과 - ✅ 일관된 디자인 시스템 - ✅ 학습 곡선 감소 - ✅ Tailwind 표준 준수 - ✅ 반응형 자동 대응 (추후) - ✅ 디자인 품질 향상 --- ## 🚀 다음 단계 ### 즉시 시작 가능 1. Phase 1 타입 정의 작성 2. PropertiesPanel UI 목업 3. 마이그레이션 유틸리티 스켈레톤 ### 추후 확장 1. 반응형 브레이크포인트 2. 커스텀 레이아웃 패턴 저장 3. AI 기반 레이아웃 추천 4. 컴포넌트 자동 정렬 --- ## 📚 관련 문서 - [전체 그리드 시스템 설계](./GRID_SYSTEM_REDESIGN_PLAN.md) - [Width 제거 상세 계획](./WIDTH_REMOVAL_MIGRATION_PLAN.md) - Tailwind CSS 그리드 문서 - 사용자 가이드 (작성 예정) --- 이 로드맵을 따라 진행하면 **4주 내에 완전히 새로운 그리드 시스템**을 구축할 수 있습니다! 🎉 **준비되셨나요? 어디서부터 시작하시겠습니까?** 💪