284 lines
6.5 KiB
Markdown
284 lines
6.5 KiB
Markdown
# 새로운 레이아웃 시스템 가이드
|
|
|
|
## 🎉 개요
|
|
|
|
화면관리 시스템의 레이아웃 구조가 크게 개선되었습니다. 새로운 시스템은 **자동 디스커버리**, **CLI 도구**, **Hot Reload**, **개발자 도구**를 제공하여 개발 경험을 혁신적으로 향상시킵니다.
|
|
|
|
## 📊 Before vs After
|
|
|
|
### Before (기존 구조)
|
|
|
|
```
|
|
❌ 수동 등록 (5개 파일 수정)
|
|
❌ 50줄+ 보일러플레이트 코드
|
|
❌ Git 충돌 위험
|
|
❌ 30분-1시간 소요
|
|
❌ 타입 안전성 부족
|
|
```
|
|
|
|
### After (새 구조)
|
|
|
|
```
|
|
✅ 1개 명령어로 완전 자동화
|
|
✅ 자동 생성된 템플릿
|
|
✅ 독립적 개발 (충돌 없음)
|
|
✅ 10-15분 소요
|
|
✅ 완전한 타입 안전성
|
|
```
|
|
|
|
## 🚀 새 레이아웃 생성
|
|
|
|
### 1. CLI 도구 사용
|
|
|
|
```bash
|
|
cd frontend
|
|
npm run create-layout <name> [options]
|
|
```
|
|
|
|
### 2. 실제 예시
|
|
|
|
```bash
|
|
# 기본 아코디언 레이아웃
|
|
npm run create-layout accordion --category=navigation --zones=3
|
|
|
|
# 대시보드 레이아웃
|
|
npm run create-layout dashboard --category=business --zones=4
|
|
|
|
# 사이드바 레이아웃
|
|
npm run create-layout sidebar --category=navigation --zones=2
|
|
```
|
|
|
|
### 3. 생성되는 파일들
|
|
|
|
```
|
|
layouts/myLayout/
|
|
├── index.ts # 레이아웃 정의 및 메타데이터
|
|
├── MyLayoutLayout.tsx # React 컴포넌트 (비즈니스 로직)
|
|
├── MyLayoutRenderer.tsx # 렌더러 (자동 등록)
|
|
├── config.ts # 기본 설정
|
|
├── types.ts # 타입 정의
|
|
└── README.md # 문서
|
|
```
|
|
|
|
## 🔧 개발 과정
|
|
|
|
### 1단계: 스캐폴딩
|
|
|
|
```bash
|
|
npm run create-layout sidebar --category=navigation --zones=2
|
|
```
|
|
|
|
### 2단계: 비즈니스 로직 구현
|
|
|
|
`SidebarLayout.tsx`에서 렌더링 로직 구현:
|
|
|
|
```typescript
|
|
export const SidebarLayout: React.FC<SidebarLayoutProps> = ({
|
|
layout, isDesignMode, renderer, ...props
|
|
}) => {
|
|
const sidebarConfig = layout.layoutConfig.sidebar;
|
|
|
|
// 사이드바 전용 로직 구현
|
|
const sidebarStyle = {
|
|
display: "flex",
|
|
flexDirection: sidebarConfig.position === "left" ? "row" : "row-reverse",
|
|
width: "100%",
|
|
height: "100%"
|
|
};
|
|
|
|
return (
|
|
<div className="sidebar-layout" style={sidebarStyle}>
|
|
{/* 사이드바와 메인 콘텐츠 영역 렌더링 */}
|
|
</div>
|
|
);
|
|
};
|
|
```
|
|
|
|
### 3단계: 자동 등록 및 테스트
|
|
|
|
- 파일 저장 시 **자동으로 화면편집기에서 사용 가능**
|
|
- Hot Reload로 실시간 업데이트
|
|
- 브라우저 DevTools에서 확인 가능
|
|
|
|
## 🛠️ 개발자 도구
|
|
|
|
### 브라우저 콘솔에서 사용 가능한 명령어들:
|
|
|
|
```javascript
|
|
// 모든 레이아웃 목록 보기
|
|
__LAYOUT_REGISTRY__.list();
|
|
|
|
// 특정 레이아웃 상세 정보
|
|
__LAYOUT_REGISTRY__.get("grid");
|
|
|
|
// 레지스트리 통계
|
|
__LAYOUT_REGISTRY__.stats();
|
|
|
|
// 레이아웃 검색
|
|
__LAYOUT_REGISTRY__.search("flex");
|
|
|
|
// 카테고리별 레이아웃
|
|
__LAYOUT_REGISTRY__.categories();
|
|
|
|
// 도움말
|
|
__LAYOUT_REGISTRY__.help();
|
|
```
|
|
|
|
## 📁 새 구조 특징
|
|
|
|
### 1. 자동 등록
|
|
|
|
```typescript
|
|
// 클래스 로드 시 자동 등록
|
|
export class MyLayoutRenderer extends AutoRegisteringLayoutRenderer {
|
|
static readonly layoutDefinition = MyLayoutDefinition;
|
|
|
|
static {
|
|
this.registerSelf(); // 자동 실행
|
|
}
|
|
}
|
|
```
|
|
|
|
### 2. 타입 안전성
|
|
|
|
```typescript
|
|
// 완전한 타입 정의
|
|
export const MyLayoutDefinition = createLayoutDefinition({
|
|
id: "myLayout",
|
|
name: "내 레이아웃",
|
|
component: MyLayout,
|
|
defaultConfig: {
|
|
myLayout: {
|
|
setting1: "value1",
|
|
setting2: true,
|
|
},
|
|
},
|
|
});
|
|
```
|
|
|
|
### 3. 메타데이터 관리
|
|
|
|
```typescript
|
|
{
|
|
version: "1.0.0",
|
|
author: "Developer Name",
|
|
documentation: "레이아웃 설명",
|
|
tags: ["tag1", "tag2"],
|
|
createdAt: "2025-01-10T..."
|
|
}
|
|
```
|
|
|
|
## 🔥 Hot Reload 지원
|
|
|
|
### 개발 모드에서 자동 업데이트
|
|
|
|
```typescript
|
|
// 개발 모드에서 Hot Reload 지원
|
|
if (process.env.NODE_ENV === "development") {
|
|
if ((module as any).hot) {
|
|
(module as any).hot.accept();
|
|
(module as any).hot.dispose(() => {
|
|
MyLayoutRenderer.unregisterSelf();
|
|
});
|
|
}
|
|
}
|
|
```
|
|
|
|
## 📋 현재 상태
|
|
|
|
### ✅ 완료된 기능들
|
|
|
|
- [x] 자동 디스커버리 시스템
|
|
- [x] CLI 스캐폴딩 도구
|
|
- [x] 자동 등록 베이스 클래스
|
|
- [x] 브라우저 개발자 도구
|
|
- [x] Hot Reload 지원
|
|
- [x] 타입 안전성
|
|
- [x] 메타데이터 관리
|
|
|
|
### 🔄 마이그레이션 현황
|
|
|
|
- [x] **Grid 레이아웃** → 새 구조 완료
|
|
- [x] **Flexbox 레이아웃** → 새 구조 완료
|
|
- [x] **Accordion 레이아웃** → 새 구조 완료 (신규)
|
|
- [ ] Split 레이아웃 → 예정
|
|
- [ ] Tabs 레이아웃 → 예정
|
|
|
|
## 🎯 마이그레이션 가이드
|
|
|
|
### 기존 레이아웃을 새 구조로 변환하기:
|
|
|
|
1. **CLI로 스캐폴딩 생성**
|
|
|
|
```bash
|
|
npm run create-layout myExistingLayout --category=basic
|
|
```
|
|
|
|
2. **기존 로직 복사**
|
|
- 기존 `MyLayoutRenderer.tsx`의 로직을 새 `MyLayout.tsx`로 복사
|
|
- 렌더링 로직 적응
|
|
|
|
3. **설정 정의**
|
|
- `index.ts`에서 `defaultConfig` 정의
|
|
- 기존 설정과 호환성 유지
|
|
|
|
4. **자동 등록 활성화**
|
|
- `layouts/index.ts`에 새 import 추가
|
|
- 기존 수동 등록 제거
|
|
|
|
## 🚦 마이그레이션 체크리스트
|
|
|
|
### 레이아웃 개발자용:
|
|
|
|
- [ ] CLI 도구로 새 레이아웃 생성
|
|
- [ ] 비즈니스 로직 구현
|
|
- [ ] 브라우저에서 `__LAYOUT_REGISTRY__.list()` 확인
|
|
- [ ] 화면편집기에서 레이아웃 선택 가능 확인
|
|
- [ ] Hot Reload 동작 확인
|
|
|
|
### 시스템 관리자용:
|
|
|
|
- [ ] 모든 기존 레이아웃 새 구조로 마이그레이션
|
|
- [ ] 기존 수동 등록 코드 제거
|
|
- [ ] 개발자 가이드 업데이트
|
|
- [ ] 팀 교육 실시
|
|
|
|
## 💡 개발 팁
|
|
|
|
### 1. 브라우저 DevTools 활용
|
|
|
|
```javascript
|
|
// 개발 중 레이아웃 확인
|
|
__LAYOUT_REGISTRY__.get("myLayout");
|
|
|
|
// 카테고리별 현황 파악
|
|
__LAYOUT_REGISTRY__.categories();
|
|
```
|
|
|
|
### 2. Hot Reload 최대한 활용
|
|
|
|
- 파일 저장 시 즉시 반영
|
|
- 브라우저 새로고침 불필요
|
|
- 실시간 디버깅 가능
|
|
|
|
### 3. 타입 안전성 확보
|
|
|
|
```typescript
|
|
// 설정 타입 정의로 IDE 지원
|
|
interface MyLayoutConfig {
|
|
orientation: "vertical" | "horizontal";
|
|
spacing: number;
|
|
collapsible: boolean;
|
|
}
|
|
```
|
|
|
|
## 🎉 결론
|
|
|
|
새로운 레이아웃 시스템으로 **개발 속도 3-4배 향상**, **충돌 위험 제거**, **타입 안전성 확보**가 가능해졌습니다.
|
|
|
|
**5분이면 새 레이아웃 생성부터 화면편집기 등록까지 완료!**
|
|
|
|
---
|
|
|
|
📞 **문의사항이나 문제가 있으면 언제든 연락주세요!**
|