6.5 KiB

Raw Blame History

새로운 레이아웃 시스템 가이드

🎉 개요

화면관리 시스템의 레이아웃 구조가 크게 개선되었습니다. 새로운 시스템은 자동 디스커버리, CLI 도구, Hot Reload, 개발자 도구를 제공하여 개발 경험을 혁신적으로 향상시킵니다.

📊 Before vs After

Before (기존 구조)

❌ 수동 등록 (5개 파일 수정)
❌ 50줄+ 보일러플레이트 코드
❌ Git 충돌 위험
❌ 30분-1시간 소요
❌ 타입 안전성 부족

After (새 구조)

✅ 1개 명령어로 완전 자동화
✅ 자동 생성된 템플릿
✅ 독립적 개발 (충돌 없음)
✅ 10-15분 소요
✅ 완전한 타입 안전성

🚀 새 레이아웃 생성

1. CLI 도구 사용

cd frontend
npm run create-layout <name> [options]

2. 실제 예시

# 기본 아코디언 레이아웃
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단계: 스캐폴딩

npm run create-layout sidebar --category=navigation --zones=2

2단계: 비즈니스 로직 구현

SidebarLayout.tsx에서 렌더링 로직 구현:

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에서 확인 가능

🛠️ 개발자 도구

브라우저 콘솔에서 사용 가능한 명령어들:

// 모든 레이아웃 목록 보기
__LAYOUT_REGISTRY__.list();

// 특정 레이아웃 상세 정보
__LAYOUT_REGISTRY__.get("grid");

// 레지스트리 통계
__LAYOUT_REGISTRY__.stats();

// 레이아웃 검색
__LAYOUT_REGISTRY__.search("flex");

// 카테고리별 레이아웃
__LAYOUT_REGISTRY__.categories();

// 도움말
__LAYOUT_REGISTRY__.help();

📁 새 구조 특징

1. 자동 등록

// 클래스 로드 시 자동 등록
export class MyLayoutRenderer extends AutoRegisteringLayoutRenderer {
  static readonly layoutDefinition = MyLayoutDefinition;

  static {
    this.registerSelf(); // 자동 실행
  }
}

2. 타입 안전성

// 완전한 타입 정의
export const MyLayoutDefinition = createLayoutDefinition({
  id: "myLayout",
  name: "내 레이아웃",
  component: MyLayout,
  defaultConfig: {
    myLayout: {
      setting1: "value1",
      setting2: true,
    },
  },
});

3. 메타데이터 관리

{
  version: "1.0.0",
  author: "Developer Name",
  documentation: "레이아웃 설명",
  tags: ["tag1", "tag2"],
  createdAt: "2025-01-10T..."
}

🔥 Hot Reload 지원

개발 모드에서 자동 업데이트

// 개발 모드에서 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();
    });
  }
}

📋 현재 상태

✅ 완료된 기능들

자동 디스커버리 시스템
CLI 스캐폴딩 도구
자동 등록 베이스 클래스
브라우저 개발자 도구
Hot Reload 지원
타입 안전성
메타데이터 관리

🔄 마이그레이션 현황

Grid 레이아웃 → 새 구조 완료
Flexbox 레이아웃 → 새 구조 완료
Accordion 레이아웃 → 새 구조 완료 (신규)
Split 레이아웃 → 예정
Tabs 레이아웃 → 예정

🎯 마이그레이션 가이드

기존 레이아웃을 새 구조로 변환하기:

CLI로 스캐폴딩 생성

npm run create-layout myExistingLayout --category=basic

기존 로직 복사
- 기존 MyLayoutRenderer.tsx의 로직을 새 MyLayout.tsx로 복사
- 렌더링 로직 적응
설정 정의
- index.ts에서 defaultConfig 정의
- 기존 설정과 호환성 유지
자동 등록 활성화
- layouts/index.ts에 새 import 추가
- 기존 수동 등록 제거

🚦 마이그레이션 체크리스트

레이아웃 개발자용:

CLI 도구로 새 레이아웃 생성
비즈니스 로직 구현
브라우저에서 __LAYOUT_REGISTRY__.list() 확인
화면편집기에서 레이아웃 선택 가능 확인
Hot Reload 동작 확인

시스템 관리자용:

모든 기존 레이아웃 새 구조로 마이그레이션
기존 수동 등록 코드 제거
개발자 가이드 업데이트
팀 교육 실시

💡 개발 팁

1. 브라우저 DevTools 활용

// 개발 중 레이아웃 확인
__LAYOUT_REGISTRY__.get("myLayout");

// 카테고리별 현황 파악
__LAYOUT_REGISTRY__.categories();

2. Hot Reload 최대한 활용

파일 저장 시 즉시 반영
브라우저 새로고침 불필요
실시간 디버깅 가능

3. 타입 안전성 확보

// 설정 타입 정의로 IDE 지원
interface MyLayoutConfig {
  orientation: "vertical" | "horizontal";
  spacing: number;
  collapsible: boolean;
}

🎉 결론

새로운 레이아웃 시스템으로 개발 속도 3-4배 향상, 충돌 위험 제거, 타입 안전성 확보가 가능해졌습니다.

5분이면 새 레이아웃 생성부터 화면편집기 등록까지 완료!

📞 문의사항이나 문제가 있으면 언제든 연락주세요!

6.5 KiB Raw Blame History