레이아웃 추가기능
This commit is contained in:
kjs
@@ -0,0 +1,283 @@
|
||||
# 새로운 레이아웃 시스템 가이드
|
||||
|
||||
## 🎉 개요
|
||||
|
||||
화면관리 시스템의 레이아웃 구조가 크게 개선되었습니다. 새로운 시스템은 **자동 디스커버리**, **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분이면 새 레이아웃 생성부터 화면편집기 등록까지 완료!**
|
||||
|
||||
---
|
||||
|
||||
📞 **문의사항이나 문제가 있으면 언제든 연락주세요!**
|
||||
@@ -0,0 +1,701 @@
|
||||
# 화면관리 시스템 레이아웃 기능 설계서
|
||||
|
||||
## 1. 개요
|
||||
|
||||
### 1.1 목적
|
||||
|
||||
화면관리 시스템에 동적 레이아웃 기능을 추가하여 다양한 화면 구조를 효율적으로 설계할 수 있도록 한다. 레이아웃은 컴포넌트들을 구조화된 영역으로 배치할 수 있는 컨테이너 역할을 하며, 동적으로 생성하고 관리할 수 있도록 설계한다.
|
||||
|
||||
### 1.2 범위
|
||||
|
||||
- 레이아웃 관리 메뉴 및 기능 개발
|
||||
- 다양한 레이아웃 타입 및 설정 기능
|
||||
- 레지스트리 기반 동적 레이아웃 컴포넌트 시스템
|
||||
- 기존 화면관리 시스템과의 통합
|
||||
|
||||
## 2. 현재 시스템 분석
|
||||
|
||||
### 2.1 기존 데이터베이스 구조
|
||||
|
||||
```sql
|
||||
-- 현재 화면관리 관련 테이블들
|
||||
screen_definitions -- 화면 정의
|
||||
screen_layouts -- 화면 레이아웃 (컴포넌트 배치)
|
||||
screen_widgets -- 위젯 설정
|
||||
screen_templates -- 화면 템플릿
|
||||
template_standards -- 템플릿 표준
|
||||
component_standards -- 컴포넌트 표준
|
||||
```
|
||||
|
||||
### 2.2 기존 컴포넌트 타입
|
||||
|
||||
```typescript
|
||||
type ComponentType = "container" | "row" | "column" | "widget" | "group" | "datatable" | "file" | "area";
|
||||
```
|
||||
|
||||
### 2.3 현재 레지스트리 시스템
|
||||
|
||||
- `ComponentRegistry`: 컴포넌트 동적 등록 및 관리
|
||||
- `WebTypeRegistry`: 웹타입 동적 등록 및 관리
|
||||
- `DynamicComponentRenderer`: 동적 컴포넌트 렌더링
|
||||
|
||||
## 3. 레이아웃 기능 설계
|
||||
|
||||
### 3.1 레이아웃 타입 정의
|
||||
|
||||
#### 3.1.1 기본 레이아웃 타입
|
||||
|
||||
```typescript
|
||||
export type LayoutType =
|
||||
| "grid" // 그리드 레이아웃 (n x m 격자)
|
||||
| "flexbox" // 플렉스박스 레이아웃
|
||||
| "split" // 분할 레이아웃 (수직/수평)
|
||||
| "card" // 카드 레이아웃
|
||||
| "tabs" // 탭 레이아웃
|
||||
| "accordion" // 아코디언 레이아웃
|
||||
| "sidebar" // 사이드바 레이아웃
|
||||
| "header-footer" // 헤더-푸터 레이아웃
|
||||
| "three-column" // 3단 레이아웃
|
||||
| "dashboard" // 대시보드 레이아웃
|
||||
| "form" // 폼 레이아웃
|
||||
| "table" // 테이블 레이아웃
|
||||
| "custom"; // 커스텀 레이아웃
|
||||
```
|
||||
|
||||
#### 3.1.2 레이아웃 컴포넌트 인터페이스
|
||||
|
||||
```typescript
|
||||
export interface LayoutComponent extends BaseComponent {
|
||||
type: "layout";
|
||||
layoutType: LayoutType;
|
||||
layoutConfig: LayoutConfig;
|
||||
children: ComponentData[];
|
||||
zones: LayoutZone[]; // 레이아웃 영역 정의
|
||||
allowedComponentTypes?: ComponentType[]; // 허용된 자식 컴포넌트 타입
|
||||
dropZoneConfig?: DropZoneConfig; // 드롭존 설정
|
||||
}
|
||||
|
||||
export interface LayoutZone {
|
||||
id: string;
|
||||
name: string;
|
||||
position: {
|
||||
row?: number;
|
||||
column?: number;
|
||||
x?: number;
|
||||
y?: number;
|
||||
};
|
||||
size: {
|
||||
width: number | string;
|
||||
height: number | string;
|
||||
minWidth?: number;
|
||||
minHeight?: number;
|
||||
maxWidth?: number;
|
||||
maxHeight?: number;
|
||||
};
|
||||
style?: ComponentStyle;
|
||||
allowedComponents?: ComponentType[];
|
||||
isResizable?: boolean;
|
||||
isRequired?: boolean; // 필수 영역 여부
|
||||
}
|
||||
|
||||
export interface LayoutConfig {
|
||||
// 그리드 레이아웃 설정
|
||||
grid?: {
|
||||
rows: number;
|
||||
columns: number;
|
||||
gap: number;
|
||||
rowGap?: number;
|
||||
columnGap?: number;
|
||||
autoRows?: string;
|
||||
autoColumns?: string;
|
||||
};
|
||||
|
||||
// 플렉스박스 설정
|
||||
flexbox?: {
|
||||
direction: "row" | "column" | "row-reverse" | "column-reverse";
|
||||
justify: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
|
||||
align: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
|
||||
wrap: "nowrap" | "wrap" | "wrap-reverse";
|
||||
gap: number;
|
||||
};
|
||||
|
||||
// 분할 레이아웃 설정
|
||||
split?: {
|
||||
direction: "horizontal" | "vertical";
|
||||
ratio: number[]; // 각 영역의 비율 [30, 70]
|
||||
minSize: number[]; // 각 영역의 최소 크기
|
||||
resizable: boolean; // 크기 조절 가능 여부
|
||||
splitterSize: number; // 분할선 두께
|
||||
};
|
||||
|
||||
// 탭 레이아웃 설정
|
||||
tabs?: {
|
||||
position: "top" | "bottom" | "left" | "right";
|
||||
variant: "default" | "pills" | "underline";
|
||||
size: "sm" | "md" | "lg";
|
||||
defaultTab: string; // 기본 선택 탭
|
||||
closable: boolean; // 탭 닫기 가능 여부
|
||||
};
|
||||
|
||||
// 아코디언 설정
|
||||
accordion?: {
|
||||
multiple: boolean; // 다중 확장 허용
|
||||
defaultExpanded: string[]; // 기본 확장 항목
|
||||
collapsible: boolean; // 모두 닫기 허용
|
||||
};
|
||||
|
||||
// 사이드바 설정
|
||||
sidebar?: {
|
||||
position: "left" | "right";
|
||||
width: number | string;
|
||||
collapsible: boolean;
|
||||
collapsed: boolean;
|
||||
overlay: boolean; // 오버레이 모드
|
||||
};
|
||||
|
||||
// 헤더-푸터 설정
|
||||
headerFooter?: {
|
||||
headerHeight: number | string;
|
||||
footerHeight: number | string;
|
||||
stickyHeader: boolean;
|
||||
stickyFooter: boolean;
|
||||
};
|
||||
|
||||
// 대시보드 설정
|
||||
dashboard?: {
|
||||
columns: number;
|
||||
rowHeight: number;
|
||||
margin: [number, number];
|
||||
padding: [number, number];
|
||||
isDraggable: boolean;
|
||||
isResizable: boolean;
|
||||
};
|
||||
|
||||
// 커스텀 설정
|
||||
custom?: {
|
||||
cssProperties: Record<string, string>;
|
||||
className: string;
|
||||
template: string; // HTML 템플릿
|
||||
};
|
||||
}
|
||||
|
||||
export interface DropZoneConfig {
|
||||
showDropZones: boolean;
|
||||
dropZoneStyle?: ComponentStyle;
|
||||
highlightOnDragOver: boolean;
|
||||
allowedTypes?: ComponentType[];
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2 데이터베이스 스키마 확장
|
||||
|
||||
#### 3.2.1 레이아웃 표준 관리 테이블
|
||||
|
||||
```sql
|
||||
-- 레이아웃 표준 관리 테이블
|
||||
CREATE TABLE layout_standards (
|
||||
layout_code VARCHAR(50) PRIMARY KEY,
|
||||
layout_name VARCHAR(100) NOT NULL,
|
||||
layout_name_eng VARCHAR(100),
|
||||
description TEXT,
|
||||
layout_type VARCHAR(50) NOT NULL,
|
||||
category VARCHAR(50) NOT NULL,
|
||||
icon_name VARCHAR(50),
|
||||
default_size JSON,
|
||||
layout_config JSON NOT NULL,
|
||||
zones_config JSON NOT NULL,
|
||||
preview_image VARCHAR(255),
|
||||
sort_order INTEGER DEFAULT 0,
|
||||
is_active CHAR(1) DEFAULT 'Y',
|
||||
is_public CHAR(1) DEFAULT 'Y',
|
||||
company_code VARCHAR(50) NOT NULL,
|
||||
created_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
created_by VARCHAR(50),
|
||||
updated_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_by VARCHAR(50)
|
||||
);
|
||||
|
||||
-- 인덱스 생성
|
||||
CREATE INDEX idx_layout_standards_type ON layout_standards(layout_type);
|
||||
CREATE INDEX idx_layout_standards_category ON layout_standards(category);
|
||||
CREATE INDEX idx_layout_standards_company ON layout_standards(company_code);
|
||||
```
|
||||
|
||||
#### 3.2.2 기존 테이블 확장
|
||||
|
||||
```sql
|
||||
-- screen_layouts 테이블에 레이아웃 관련 컬럼 추가
|
||||
ALTER TABLE screen_layouts ADD COLUMN layout_type VARCHAR(50);
|
||||
ALTER TABLE screen_layouts ADD COLUMN layout_config JSON;
|
||||
ALTER TABLE screen_layouts ADD COLUMN zones_config JSON;
|
||||
ALTER TABLE screen_layouts ADD COLUMN zone_id VARCHAR(100);
|
||||
|
||||
-- component_standards 테이블에서 레이아웃 타입 지원
|
||||
-- category에 'layout' 추가
|
||||
```
|
||||
|
||||
### 3.3 레이아웃 카테고리 및 사전 정의 레이아웃
|
||||
|
||||
#### 3.3.1 레이아웃 카테고리
|
||||
|
||||
```typescript
|
||||
export const LAYOUT_CATEGORIES = {
|
||||
BASIC: "basic", // 기본 레이아웃
|
||||
FORM: "form", // 폼 레이아웃
|
||||
TABLE: "table", // 테이블 레이아웃
|
||||
DASHBOARD: "dashboard", // 대시보드 레이아웃
|
||||
NAVIGATION: "navigation", // 네비게이션 레이아웃
|
||||
CONTENT: "content", // 컨텐츠 레이아웃
|
||||
BUSINESS: "business", // 업무용 레이아웃
|
||||
};
|
||||
```
|
||||
|
||||
#### 3.3.2 사전 정의 레이아웃 템플릿
|
||||
|
||||
```typescript
|
||||
export const PREDEFINED_LAYOUTS = [
|
||||
// 기본 레이아웃
|
||||
{
|
||||
code: "GRID_2X2",
|
||||
name: "2x2 그리드",
|
||||
type: "grid",
|
||||
category: "basic",
|
||||
config: {
|
||||
grid: { rows: 2, columns: 2, gap: 16 },
|
||||
},
|
||||
zones: [
|
||||
{ id: "zone1", name: "상단 좌측", position: { row: 0, column: 0 } },
|
||||
{ id: "zone2", name: "상단 우측", position: { row: 0, column: 1 } },
|
||||
{ id: "zone3", name: "하단 좌측", position: { row: 1, column: 0 } },
|
||||
{ id: "zone4", name: "하단 우측", position: { row: 1, column: 1 } },
|
||||
],
|
||||
},
|
||||
|
||||
// 폼 레이아웃
|
||||
{
|
||||
code: "FORM_TWO_COLUMN",
|
||||
name: "2단 폼 레이아웃",
|
||||
type: "grid",
|
||||
category: "form",
|
||||
config: {
|
||||
grid: { rows: 1, columns: 2, gap: 24 },
|
||||
},
|
||||
zones: [
|
||||
{ id: "left", name: "좌측 입력 영역", position: { row: 0, column: 0 } },
|
||||
{ id: "right", name: "우측 입력 영역", position: { row: 0, column: 1 } },
|
||||
],
|
||||
},
|
||||
|
||||
// 대시보드 레이아웃
|
||||
{
|
||||
code: "DASHBOARD_MAIN",
|
||||
name: "메인 대시보드",
|
||||
type: "grid",
|
||||
category: "dashboard",
|
||||
config: {
|
||||
grid: { rows: 3, columns: 4, gap: 16 },
|
||||
},
|
||||
zones: [
|
||||
{ id: "header", name: "헤더", position: { row: 0, column: 0 }, size: { width: "100%", height: "80px" } },
|
||||
{ id: "sidebar", name: "사이드바", position: { row: 1, column: 0 }, size: { width: "250px", height: "100%" } },
|
||||
{
|
||||
id: "main",
|
||||
name: "메인 컨텐츠",
|
||||
position: { row: 1, column: 1 },
|
||||
size: { width: "calc(100% - 250px)", height: "100%" },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 테이블 레이아웃
|
||||
{
|
||||
code: "TABLE_WITH_FILTERS",
|
||||
name: "필터가 있는 테이블",
|
||||
type: "flexbox",
|
||||
category: "table",
|
||||
config: {
|
||||
flexbox: { direction: "column", gap: 16 },
|
||||
},
|
||||
zones: [
|
||||
{ id: "filters", name: "검색 필터", size: { width: "100%", height: "auto" } },
|
||||
{ id: "table", name: "데이터 테이블", size: { width: "100%", height: "1fr" } },
|
||||
],
|
||||
},
|
||||
|
||||
// 분할 레이아웃
|
||||
{
|
||||
code: "SPLIT_HORIZONTAL",
|
||||
name: "수평 분할",
|
||||
type: "split",
|
||||
category: "basic",
|
||||
config: {
|
||||
split: { direction: "horizontal", ratio: [50, 50], resizable: true },
|
||||
},
|
||||
zones: [
|
||||
{ id: "left", name: "좌측 영역", isResizable: true },
|
||||
{ id: "right", name: "우측 영역", isResizable: true },
|
||||
],
|
||||
},
|
||||
|
||||
// 탭 레이아웃
|
||||
{
|
||||
code: "TABS_HORIZONTAL",
|
||||
name: "수평 탭",
|
||||
type: "tabs",
|
||||
category: "navigation",
|
||||
config: {
|
||||
tabs: { position: "top", variant: "default", defaultTab: "tab1" },
|
||||
},
|
||||
zones: [
|
||||
{ id: "tab1", name: "첫 번째 탭" },
|
||||
{ id: "tab2", name: "두 번째 탭" },
|
||||
{ id: "tab3", name: "세 번째 탭" },
|
||||
],
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
## 4. 구현 계획
|
||||
|
||||
### 4.1 Phase 1: 기본 인프라 구축
|
||||
|
||||
#### 4.1.1 데이터베이스 스키마 생성
|
||||
|
||||
- `layout_standards` 테이블 생성
|
||||
- 기존 테이블 확장
|
||||
- 기본 레이아웃 데이터 삽입
|
||||
|
||||
#### 4.1.2 타입 정의 및 인터페이스
|
||||
|
||||
- `frontend/types/layout.ts` 생성
|
||||
- 기존 `screen.ts` 확장
|
||||
|
||||
#### 4.1.3 레이아웃 레지스트리 시스템
|
||||
|
||||
```typescript
|
||||
// frontend/lib/registry/LayoutRegistry.ts
|
||||
export class LayoutRegistry {
|
||||
private static layouts = new Map<string, LayoutDefinition>();
|
||||
|
||||
static registerLayout(definition: LayoutDefinition): void;
|
||||
static getLayout(layoutType: string): LayoutDefinition | undefined;
|
||||
static getLayoutsByCategory(category: string): LayoutDefinition[];
|
||||
static getAllLayouts(): LayoutDefinition[];
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2 Phase 2: 레이아웃 관리 기능
|
||||
|
||||
#### 4.2.1 레이아웃 관리 메뉴
|
||||
|
||||
```typescript
|
||||
// frontend/app/(main)/admin/layouts/page.tsx
|
||||
- 레이아웃 목록 조회
|
||||
- 레이아웃 생성/수정/삭제
|
||||
- 레이아웃 미리보기
|
||||
- 레이아웃 내보내기/가져오기
|
||||
```
|
||||
|
||||
#### 4.2.2 레이아웃 편집기
|
||||
|
||||
```typescript
|
||||
// frontend/components/layout/LayoutDesigner.tsx
|
||||
- 드래그앤드롭 레이아웃 편집
|
||||
- 실시간 미리보기
|
||||
- 존 설정 편집
|
||||
- 레이아웃 설정 편집
|
||||
```
|
||||
|
||||
#### 4.2.3 백엔드 API
|
||||
|
||||
```typescript
|
||||
// backend-node/src/routes/layoutRoutes.ts
|
||||
GET /api/layouts // 레이아웃 목록 조회
|
||||
GET /api/layouts/:id // 레이아웃 상세 조회
|
||||
POST /api/layouts // 레이아웃 생성
|
||||
PUT /api/layouts/:id // 레이아웃 수정
|
||||
DELETE /api/layouts/:id // 레이아웃 삭제
|
||||
POST /api/layouts/:id/duplicate // 레이아웃 복제
|
||||
```
|
||||
|
||||
### 4.3 Phase 3: 레이아웃 컴포넌트 구현
|
||||
|
||||
#### 4.3.1 기본 레이아웃 컴포넌트들
|
||||
|
||||
```typescript
|
||||
// frontend/lib/registry/layouts/
|
||||
├── GridLayoutRenderer.tsx // 그리드 레이아웃
|
||||
├── FlexboxLayoutRenderer.tsx // 플렉스박스 레이아웃
|
||||
├── SplitLayoutRenderer.tsx // 분할 레이아웃
|
||||
├── TabsLayoutRenderer.tsx // 탭 레이아웃
|
||||
├── AccordionLayoutRenderer.tsx // 아코디언 레이아웃
|
||||
├── SidebarLayoutRenderer.tsx // 사이드바 레이아웃
|
||||
├── HeaderFooterLayoutRenderer.tsx // 헤더-푸터 레이아웃
|
||||
└── CustomLayoutRenderer.tsx // 커스텀 레이아웃
|
||||
```
|
||||
|
||||
#### 4.3.2 레이아웃 설정 패널
|
||||
|
||||
```typescript
|
||||
// frontend/components/layout/config-panels/
|
||||
├── GridConfigPanel.tsx
|
||||
├── FlexboxConfigPanel.tsx
|
||||
├── SplitConfigPanel.tsx
|
||||
├── TabsConfigPanel.tsx
|
||||
└── ...
|
||||
```
|
||||
|
||||
### 4.4 Phase 4: 화면관리 시스템 통합
|
||||
|
||||
#### 4.4.1 화면 디자이너 확장
|
||||
|
||||
- 레이아웃 팔레트 추가
|
||||
- 레이아웃 드래그앤드롭 지원
|
||||
- 레이아웃 존에 컴포넌트 배치
|
||||
|
||||
#### 4.4.2 실시간 미리보기 지원
|
||||
|
||||
- 레이아웃 렌더링 지원
|
||||
- 존별 컴포넌트 렌더링
|
||||
- 레이아웃 상호작용 지원
|
||||
|
||||
## 5. 기술적 구현 세부사항
|
||||
|
||||
### 5.1 레이아웃 렌더러 기본 구조
|
||||
|
||||
```typescript
|
||||
// frontend/lib/registry/layouts/BaseLayoutRenderer.tsx
|
||||
interface LayoutRendererProps {
|
||||
layout: LayoutComponent;
|
||||
children: ComponentData[];
|
||||
isDesignMode?: boolean;
|
||||
onZoneClick?: (zoneId: string) => void;
|
||||
onComponentDrop?: (zoneId: string, component: ComponentData) => void;
|
||||
}
|
||||
|
||||
export abstract class BaseLayoutRenderer extends React.Component<LayoutRendererProps> {
|
||||
abstract render(): React.ReactElement;
|
||||
|
||||
protected renderZone(zone: LayoutZone, children: ComponentData[]): React.ReactElement {
|
||||
return (
|
||||
<div
|
||||
className={`layout-zone ${this.props.isDesignMode ? 'design-mode' : ''}`}
|
||||
data-zone-id={zone.id}
|
||||
onClick={() => this.props.onZoneClick?.(zone.id)}
|
||||
onDrop={this.handleDrop}
|
||||
onDragOver={this.handleDragOver}
|
||||
>
|
||||
{children.map(child => (
|
||||
<DynamicComponentRenderer key={child.id} component={child} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
private handleDrop = (e: React.DragEvent) => {
|
||||
// 드롭 처리 로직
|
||||
};
|
||||
|
||||
private handleDragOver = (e: React.DragEvent) => {
|
||||
// 드래그오버 처리 로직
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 5.2 동적 레이아웃 등록 시스템
|
||||
|
||||
```typescript
|
||||
// frontend/lib/registry/layouts/index.ts
|
||||
import { LayoutRegistry } from "../LayoutRegistry";
|
||||
import GridLayoutRenderer from "./GridLayoutRenderer";
|
||||
import FlexboxLayoutRenderer from "./FlexboxLayoutRenderer";
|
||||
// ... 다른 레이아웃 import
|
||||
|
||||
// 레이아웃 컴포넌트들을 레지스트리에 등록
|
||||
LayoutRegistry.registerLayout({
|
||||
id: "grid",
|
||||
name: "그리드 레이아웃",
|
||||
component: GridLayoutRenderer,
|
||||
category: "basic",
|
||||
icon: "grid",
|
||||
defaultConfig: {
|
||||
grid: { rows: 2, columns: 2, gap: 16 },
|
||||
},
|
||||
});
|
||||
|
||||
LayoutRegistry.registerLayout({
|
||||
id: "flexbox",
|
||||
name: "플렉스박스 레이아웃",
|
||||
component: FlexboxLayoutRenderer,
|
||||
category: "basic",
|
||||
icon: "flex",
|
||||
defaultConfig: {
|
||||
flexbox: { direction: "row", justify: "flex-start", align: "stretch" },
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 5.3 레이아웃 팔레트 컴포넌트
|
||||
|
||||
```typescript
|
||||
// frontend/components/screen/panels/LayoutsPanel.tsx
|
||||
export default function LayoutsPanel({ onDragStart }: LayoutsPanelProps) {
|
||||
const [layouts] = useState(() => LayoutRegistry.getAllLayouts());
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('all');
|
||||
|
||||
const filteredLayouts = useMemo(() => {
|
||||
if (selectedCategory === 'all') return layouts;
|
||||
return layouts.filter(layout => layout.category === selectedCategory);
|
||||
}, [layouts, selectedCategory]);
|
||||
|
||||
return (
|
||||
<div className="layouts-panel">
|
||||
<div className="category-tabs">
|
||||
{LAYOUT_CATEGORIES.map(category => (
|
||||
<Button
|
||||
key={category.id}
|
||||
variant={selectedCategory === category.id ? 'default' : 'ghost'}
|
||||
onClick={() => setSelectedCategory(category.id)}
|
||||
>
|
||||
{category.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="layout-grid">
|
||||
{filteredLayouts.map(layout => (
|
||||
<div
|
||||
key={layout.id}
|
||||
className="layout-item"
|
||||
draggable
|
||||
onDragStart={(e) => onDragStart(e, layout)}
|
||||
>
|
||||
<div className="layout-preview">
|
||||
<layout.icon />
|
||||
</div>
|
||||
<div className="layout-info">
|
||||
<h4>{layout.name}</h4>
|
||||
<p>{layout.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 6. 사용자 인터페이스 설계
|
||||
|
||||
### 6.1 레이아웃 관리 화면
|
||||
|
||||
- **레이아웃 목록**: 그리드 형태로 레이아웃 목록 표시
|
||||
- **카테고리 필터**: 카테고리별 레이아웃 필터링
|
||||
- **검색 기능**: 레이아웃 이름/설명으로 검색
|
||||
- **미리보기**: 레이아웃 구조 미리보기
|
||||
- **편집 버튼**: 레이아웃 편집 모드 진입
|
||||
|
||||
### 6.2 레이아웃 편집기
|
||||
|
||||
- **캔버스 영역**: 레이아웃 시각적 편집
|
||||
- **존 편집**: 각 존의 크기/위치 조정
|
||||
- **속성 패널**: 레이아웃 설정 편집
|
||||
- **미리보기 모드**: 실제 렌더링 미리보기
|
||||
|
||||
### 6.3 화면 디자이너 확장
|
||||
|
||||
- **레이아웃 팔레트**: 사용 가능한 레이아웃 목록
|
||||
- **드래그앤드롭**: 레이아웃을 캔버스에 배치
|
||||
- **존 하이라이트**: 컴포넌트 드롭 가능한 존 표시
|
||||
|
||||
## 7. 보안 및 권한 관리
|
||||
|
||||
### 7.1 레이아웃 접근 권한
|
||||
|
||||
- **생성 권한**: 레이아웃 생성 권한
|
||||
- **수정 권한**: 레이아웃 수정 권한
|
||||
- **삭제 권한**: 레이아웃 삭제 권한
|
||||
- **공개 설정**: 다른 사용자와 레이아웃 공유
|
||||
|
||||
### 7.2 회사별 레이아웃 관리
|
||||
|
||||
- **회사 코드**: 레이아웃의 회사 소속 관리
|
||||
- **공개 레이아웃**: 모든 회사에서 사용 가능한 레이아웃
|
||||
- **비공개 레이아웃**: 특정 회사에서만 사용 가능한 레이아웃
|
||||
|
||||
## 8. 성능 최적화
|
||||
|
||||
### 8.1 레이아웃 렌더링 최적화
|
||||
|
||||
- **지연 로딩**: 필요한 레이아웃 컴포넌트만 로딩
|
||||
- **메모이제이션**: 레이아웃 설정 변경 시에만 리렌더링
|
||||
- **가상화**: 대량의 레이아웃 목록 가상화
|
||||
|
||||
### 8.2 캐싱 전략
|
||||
|
||||
- **레이아웃 정의 캐싱**: 자주 사용되는 레이아웃 정의 캐싱
|
||||
- **렌더링 결과 캐싱**: 동일한 설정의 레이아웃 렌더링 결과 캐싱
|
||||
|
||||
## 9. 테스트 계획
|
||||
|
||||
### 9.1 단위 테스트
|
||||
|
||||
- 레이아웃 컴포넌트 렌더링 테스트
|
||||
- 레이아웃 설정 변경 테스트
|
||||
- 드래그앤드롭 기능 테스트
|
||||
|
||||
### 9.2 통합 테스트
|
||||
|
||||
- 화면관리 시스템과의 통합 테스트
|
||||
- 데이터베이스 연동 테스트
|
||||
- API 엔드포인트 테스트
|
||||
|
||||
### 9.3 사용자 테스트
|
||||
|
||||
- 레이아웃 생성/편집 시나리오 테스트
|
||||
- 다양한 브라우저 호환성 테스트
|
||||
|
||||
## 10. 마이그레이션 계획
|
||||
|
||||
### 10.1 기존 화면 마이그레이션
|
||||
|
||||
- 기존 컨테이너 컴포넌트를 레이아웃으로 변환
|
||||
- 기존 화면 구조를 레이아웃 기반으로 재구성
|
||||
|
||||
### 10.2 단계별 배포
|
||||
|
||||
1. **Phase 1**: 레이아웃 관리 기능 배포
|
||||
2. **Phase 2**: 기본 레이아웃 컴포넌트 배포
|
||||
3. **Phase 3**: 화면관리 시스템 통합
|
||||
4. **Phase 4**: 기존 화면 마이그레이션
|
||||
|
||||
## 11. 향후 확장 계획
|
||||
|
||||
### 11.1 고급 레이아웃 기능
|
||||
|
||||
- **반응형 레이아웃**: 화면 크기에 따른 레이아웃 변경
|
||||
- **애니메이션**: 레이아웃 전환 애니메이션
|
||||
- **테마 지원**: 레이아웃별 테마 설정
|
||||
|
||||
### 11.2 AI 기반 레이아웃 추천
|
||||
|
||||
- 데이터 타입에 따른 레이아웃 자동 추천
|
||||
- 사용 패턴 분석을 통한 최적 레이아웃 제안
|
||||
|
||||
### 11.3 협업 기능
|
||||
|
||||
- **실시간 편집**: 여러 사용자가 동시에 레이아웃 편집
|
||||
- **버전 관리**: 레이아웃 변경 이력 관리
|
||||
- **댓글 시스템**: 레이아웃에 대한 피드백 시스템
|
||||
|
||||
## 12. 결론
|
||||
|
||||
이 설계서에 따라 레이아웃 기능을 구현하면, 화면관리 시스템의 유연성과 확장성이 크게 향상될 것입니다. 동적 레지스트리 시스템을 통해 새로운 레이아웃 타입을 쉽게 추가할 수 있으며, 사용자는 다양한 화면 구조를 효율적으로 설계할 수 있게 됩니다.
|
||||
|
||||
주요 장점:
|
||||
|
||||
- **확장성**: 새로운 레이아웃 타입 쉽게 추가
|
||||
- **재사용성**: 레이아웃 템플릿 재사용으로 개발 효율성 향상
|
||||
- **유연성**: 다양한 화면 요구사항에 대응 가능
|
||||
- **일관성**: 표준화된 레이아웃을 통한 UI 일관성 확보
|
||||
|
||||
@@ -0,0 +1,416 @@
|
||||
# 레이아웃 추가 가이드
|
||||
|
||||
화면관리 시스템에서 새로운 레이아웃을 추가하는 방법을 설명합니다.
|
||||
|
||||
## 📋 목차
|
||||
|
||||
1. [CLI를 이용한 자동 생성](#cli를-이용한-자동-생성)
|
||||
2. [생성된 파일 구조](#생성된-파일-구조)
|
||||
3. [레이아웃 커스터마이징](#레이아웃-커스터마이징)
|
||||
4. [고급 설정](#고급-설정)
|
||||
5. [문제 해결](#문제-해결)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 CLI를 이용한 자동 생성
|
||||
|
||||
### 기본 사용법
|
||||
|
||||
```bash
|
||||
# 기본 형태
|
||||
node scripts/create-layout.js <레이아웃이름> [옵션]
|
||||
|
||||
# 예시
|
||||
node scripts/create-layout.js card-grid --category=dashboard --zones=6 --description="카드 형태의 그리드 레이아웃"
|
||||
```
|
||||
|
||||
### 📝 사용 가능한 옵션
|
||||
|
||||
| 옵션 | 필수 여부 | 기본값 | 설명 | 예시 |
|
||||
| --------------- | --------- | ----------- | ----------------- | ----------------------------------- |
|
||||
| `--category` | 선택 | `basic` | 레이아웃 카테고리 | `--category=dashboard` |
|
||||
| `--zones` | 선택 | `2` | 영역 개수 | `--zones=4` |
|
||||
| `--description` | 선택 | 자동 생성 | 레이아웃 설명 | `--description="사이드바 레이아웃"` |
|
||||
| `--author` | 선택 | `Developer` | 작성자 이름 | `--author="김개발"` |
|
||||
|
||||
### 🏷️ 카테고리 종류
|
||||
|
||||
| 카테고리 | 설명 | 예시 레이아웃 |
|
||||
| ------------ | ------------- | ------------------------ |
|
||||
| `basic` | 기본 레이아웃 | 그리드, 플렉스박스, 분할 |
|
||||
| `navigation` | 네비게이션 | 탭, 아코디언, 메뉴 |
|
||||
| `dashboard` | 대시보드 | 카드, 위젯, 차트 |
|
||||
| `content` | 콘텐츠 | 헤더-본문, 영웅 섹션 |
|
||||
| `form` | 폼 | 입력 폼, 설정 패널 |
|
||||
| `table` | 테이블 | 데이터 테이블, 목록 |
|
||||
|
||||
### 💡 이름 규칙
|
||||
|
||||
레이아웃 이름은 **하이픈(`-`)을 사용한 kebab-case**로 입력하면 자동으로 변환됩니다:
|
||||
|
||||
```bash
|
||||
# 입력: hero-section
|
||||
📁 디렉토리: hero-section/
|
||||
🔖 ID: hero-section
|
||||
📄 클래스명: HeroSection
|
||||
🔧 변수명: heroSection
|
||||
```
|
||||
|
||||
#### ✅ 올바른 이름 예시
|
||||
|
||||
- `card-grid`
|
||||
- `side-navigation`
|
||||
- `data-table`
|
||||
- `hero-section`
|
||||
- `my-awesome-layout`
|
||||
|
||||
#### ❌ 피해야 할 이름
|
||||
|
||||
- `CardGrid` (파스칼케이스)
|
||||
- `card_grid` (스네이크케이스)
|
||||
- `cardGrid` (카멜케이스)
|
||||
|
||||
---
|
||||
|
||||
## 📂 생성된 파일 구조
|
||||
|
||||
CLI로 레이아웃을 생성하면 다음과 같은 파일들이 자동으로 생성됩니다:
|
||||
|
||||
```
|
||||
lib/registry/layouts/your-layout/
|
||||
├── index.ts # 레이아웃 정의 및 등록
|
||||
├── YourLayoutLayout.tsx # React 컴포넌트
|
||||
├── YourLayoutRenderer.tsx # 렌더링 로직
|
||||
├── config.ts # 기본 설정
|
||||
├── types.ts # 타입 정의
|
||||
└── README.md # 문서
|
||||
```
|
||||
|
||||
### 🔧 각 파일의 역할
|
||||
|
||||
#### 1. `index.ts` - 레이아웃 정의
|
||||
|
||||
```typescript
|
||||
export const YourLayoutDefinition = createLayoutDefinition({
|
||||
id: "your-layout",
|
||||
name: "yourLayout",
|
||||
nameEng: "Your Layout",
|
||||
description: "사용자 정의 레이아웃입니다",
|
||||
category: "basic",
|
||||
component: YourLayoutWrapper,
|
||||
defaultConfig: {
|
||||
/* 기본 설정 */
|
||||
},
|
||||
defaultZones: [
|
||||
/* 기본 영역들 */
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
#### 2. `YourLayoutLayout.tsx` - React 컴포넌트
|
||||
|
||||
```typescript
|
||||
export const YourLayoutLayout: React.FC<YourLayoutProps> = ({ layout, isDesignMode, renderer, ...props }) => {
|
||||
// 레이아웃 UI 구현
|
||||
};
|
||||
```
|
||||
|
||||
#### 3. `YourLayoutRenderer.tsx` - 렌더링 로직
|
||||
|
||||
```typescript
|
||||
export class YourLayoutRenderer extends AutoRegisteringLayoutRenderer {
|
||||
static layoutDefinition = YourLayoutDefinition;
|
||||
|
||||
render(): React.ReactElement {
|
||||
return <YourLayoutLayout {...this.props} renderer={this} />;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 레이아웃 커스터마이징
|
||||
|
||||
### 1. 기본 구조 수정
|
||||
|
||||
생성된 `YourLayoutLayout.tsx`에서 레이아웃 구조를 정의합니다:
|
||||
|
||||
```typescript
|
||||
export const YourLayoutLayout: React.FC<YourLayoutProps> = ({
|
||||
layout,
|
||||
isDesignMode = false,
|
||||
renderer,
|
||||
}) => {
|
||||
const yourLayoutConfig = layout.layoutConfig.yourLayout;
|
||||
const containerStyle = renderer.getLayoutContainerStyle();
|
||||
|
||||
// 레이아웃별 커스텀 스타일
|
||||
const yourLayoutStyle: React.CSSProperties = {
|
||||
...containerStyle,
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(3, 1fr)",
|
||||
gridTemplateRows: "repeat(2, 200px)",
|
||||
gap: "16px",
|
||||
padding: "16px",
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={yourLayoutStyle}>
|
||||
{layout.zones.map((zone) => {
|
||||
const zoneChildren = renderer.getZoneChildren(zone.id);
|
||||
|
||||
return (
|
||||
<div key={zone.id} className="zone-area">
|
||||
{/* 존 렌더링 */}
|
||||
{renderer.renderZone(zone, zoneChildren)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 2. 설정 옵션 추가
|
||||
|
||||
`config.ts`에서 레이아웃별 설정을 정의합니다:
|
||||
|
||||
```typescript
|
||||
export const YourLayoutConfig = {
|
||||
defaultConfig: {
|
||||
yourLayout: {
|
||||
columns: 3, // 열 개수
|
||||
rows: 2, // 행 개수
|
||||
gap: 16, // 간격
|
||||
aspectRatio: "16:9", // 비율
|
||||
backgroundColor: "#ffffff",
|
||||
borderRadius: "8px",
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 3. 타입 정의
|
||||
|
||||
`types.ts`에서 설정 타입을 정의합니다:
|
||||
|
||||
```typescript
|
||||
export interface YourLayoutConfig {
|
||||
columns?: number;
|
||||
rows?: number;
|
||||
gap?: number;
|
||||
aspectRatio?: string;
|
||||
backgroundColor?: string;
|
||||
borderRadius?: string;
|
||||
}
|
||||
|
||||
export interface YourLayoutProps extends LayoutRendererProps {
|
||||
renderer: YourLayoutRenderer;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 고급 설정
|
||||
|
||||
### 영역(Zone) 커스터마이징
|
||||
|
||||
영역별로 다른 스타일을 적용하려면:
|
||||
|
||||
```typescript
|
||||
// 영역별 스타일 계산
|
||||
const getZoneStyle = (zone: LayoutZone, index: number): React.CSSProperties => {
|
||||
const baseStyle = {
|
||||
backgroundColor: "#f8f9fa",
|
||||
border: "1px solid #e9ecef",
|
||||
borderRadius: "4px",
|
||||
padding: "12px",
|
||||
};
|
||||
|
||||
// 첫 번째 영역은 다른 스타일
|
||||
if (index === 0) {
|
||||
return {
|
||||
...baseStyle,
|
||||
backgroundColor: "#e3f2fd",
|
||||
gridColumn: "1 / -1", // 전체 너비
|
||||
};
|
||||
}
|
||||
|
||||
return baseStyle;
|
||||
};
|
||||
```
|
||||
|
||||
### 반응형 레이아웃
|
||||
|
||||
미디어 쿼리를 사용한 반응형 구현:
|
||||
|
||||
```typescript
|
||||
const getResponsiveStyle = (): React.CSSProperties => {
|
||||
return {
|
||||
display: "grid",
|
||||
gridTemplateColumns: `repeat(auto-fit, minmax(300px, 1fr))`,
|
||||
gap: "16px",
|
||||
// CSS-in-JS에서는 미디어 쿼리를 직접 사용할 수 없으므로
|
||||
// CSS 클래스나 컨테이너 쿼리 사용 권장
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
### 애니메이션 추가
|
||||
|
||||
CSS 애니메이션을 포함한 레이아웃:
|
||||
|
||||
```typescript
|
||||
const animatedStyle: React.CSSProperties = {
|
||||
transition: "all 0.3s ease-in-out",
|
||||
opacity: isDesignMode ? 0.9 : 1,
|
||||
transform: isDesignMode ? "scale(0.98)" : "scale(1)",
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 자동 등록 시스템
|
||||
|
||||
### Hot Reload 지원
|
||||
|
||||
새 레이아웃은 다음과 같이 자동으로 등록됩니다:
|
||||
|
||||
1. **파일 저장 시**: Hot Reload로 즉시 반영
|
||||
2. **자동 등록**: `AutoRegisteringLayoutRenderer` 상속으로 자동 등록
|
||||
3. **즉시 사용**: 화면편집기에서 바로 사용 가능
|
||||
|
||||
### 수동 등록 (필요한 경우)
|
||||
|
||||
`lib/registry/layouts/index.ts`에 직접 추가:
|
||||
|
||||
```typescript
|
||||
// 새 구조 레이아웃들 (자동 등록)
|
||||
import "./your-layout/YourLayoutRenderer";
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ 문제 해결
|
||||
|
||||
### 자주 발생하는 오류
|
||||
|
||||
#### 1. "Cannot read properties of undefined" 오류
|
||||
|
||||
```typescript
|
||||
// ❌ 문제: 설정이 없을 때 오류
|
||||
const config = layout.layoutConfig.yourLayout.someProperty;
|
||||
|
||||
// ✅ 해결: 안전한 접근
|
||||
const config = layout.layoutConfig.yourLayout?.someProperty || defaultValue;
|
||||
```
|
||||
|
||||
#### 2. "React does not recognize prop" 경고
|
||||
|
||||
```typescript
|
||||
// ❌ 문제: 모든 props를 DOM에 전달
|
||||
<div {...props}>
|
||||
|
||||
// ✅ 해결: DOM props만 전달
|
||||
const { layout, isDesignMode, renderer, ...domProps } = props;
|
||||
<div {...domProps}>
|
||||
```
|
||||
|
||||
#### 3. 레이아웃이 화면편집기에 나타나지 않음
|
||||
|
||||
1. **파일 저장 확인**: 모든 파일이 저장되었는지 확인
|
||||
2. **자동 등록 확인**: `YourLayoutRenderer.registerSelf()` 호출 여부
|
||||
3. **브라우저 새로고침**: 캐시 문제일 수 있음
|
||||
4. **개발자 도구**: `window.__LAYOUT_REGISTRY__.list()` 로 등록 상태 확인
|
||||
|
||||
### 디버깅 도구
|
||||
|
||||
#### 브라우저 개발자 도구
|
||||
|
||||
```javascript
|
||||
// 등록된 레이아웃 목록 확인
|
||||
window.__LAYOUT_REGISTRY__.list();
|
||||
|
||||
// 특정 레이아웃 정보 확인
|
||||
window.__LAYOUT_REGISTRY__.get("your-layout");
|
||||
|
||||
// 레지스트리 통계
|
||||
window.__LAYOUT_REGISTRY__.stats();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📖 예시: 완전한 레이아웃 생성
|
||||
|
||||
### 1. CLI로 생성
|
||||
|
||||
```bash
|
||||
node scripts/create-layout.js pricing-table --category=content --zones=4 --description="가격표 레이아웃" --author="개발팀"
|
||||
```
|
||||
|
||||
### 2. 생성 결과
|
||||
|
||||
```
|
||||
✅ 레이아웃 생성 완료!
|
||||
📁 이름: pricingTable
|
||||
🔖 ID: pricing-table
|
||||
📂 카테고리: content
|
||||
🎯 존 개수: 4
|
||||
```
|
||||
|
||||
### 3. 커스터마이징
|
||||
|
||||
```typescript
|
||||
// PricingTableLayout.tsx
|
||||
export const PricingTableLayout: React.FC<PricingTableLayoutProps> = ({
|
||||
layout,
|
||||
isDesignMode,
|
||||
renderer,
|
||||
}) => {
|
||||
const pricingTableStyle: React.CSSProperties = {
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
|
||||
gap: "24px",
|
||||
padding: "32px",
|
||||
backgroundColor: "#f8f9fa",
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={pricingTableStyle}>
|
||||
{layout.zones.map((zone, index) => (
|
||||
<div
|
||||
key={zone.id}
|
||||
className={`pricing-card ${index === 1 ? 'featured' : ''}`}
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
borderRadius: "12px",
|
||||
padding: "24px",
|
||||
boxShadow: index === 1 ? "0 8px 32px rgba(0,0,0,0.1)" : "0 2px 8px rgba(0,0,0,0.1)",
|
||||
border: index === 1 ? "2px solid #3b82f6" : "1px solid #e5e7eb",
|
||||
transform: index === 1 ? "scale(1.05)" : "scale(1)",
|
||||
}}
|
||||
>
|
||||
{renderer.renderZone(zone, renderer.getZoneChildren(zone.id))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 4. 즉시 사용 가능
|
||||
|
||||
레이아웃이 자동으로 등록되어 화면편집기에서 바로 사용할 수 있습니다!
|
||||
|
||||
---
|
||||
|
||||
## 🎯 마무리
|
||||
|
||||
새로운 CLI 방식으로 레이아웃 추가가 매우 간단해졌습니다:
|
||||
|
||||
1. **한 줄 명령어**로 모든 파일 자동 생성
|
||||
2. **타입 안전성** 보장
|
||||
3. **자동 등록**으로 즉시 사용 가능
|
||||
4. **Hot Reload** 지원으로 빠른 개발
|
||||
|
||||
더 자세한 정보가 필요하면 각 레이아웃의 `README.md` 파일을 참고하세요! 🚀
|
||||
Reference in New Issue
Block a user