목표

기존 템플릿 관리 시스템에 메인 레이아웃 관리 기능을 추가하여, 관리자가 여러 메인 레이아웃 스타일을 생성하고 템플릿별로 선택할 수 있도록 구현합니다.

배경

현재 시스템에는 

main_design.php에서 라이브 캔버스 기반의 메인 디자인 기능이 있지만, 사용자가 요청한 기능은 다음과 같은 차이점이 있습니다:

 

  1. 여러 스타일 관리: 다양한 메인 레이아웃을 만들고 관리
  2. 템플릿 연동: 템플릿마다 원하는 메인 레이아웃을 선택
  3. 그리드 기반: 12칼럼 그리드와 100% 너비 프레임을 혼합
  4. 숏코드 조합: 슬라이드, 최근글, 배너를 간단히 조합
  5. 요소 다양성: 타이틀(링크), 텍스트, 버튼, 배경이미지, 유튜브 링크 지원

User Review Required

IMPORTANT

기존 main_design.php와의 관계

현재 

 
main_design.php는 라이브 캔버스 기반으로 메인 페이지를 자유롭게 구성하는 기능을 제공합니다. 새로운 메인 레이아웃 관리 시스템과 병행할 수 있도록 구현하거나, 완전히 대체할 수 있습니다.

 

제안: 두 시스템을 병행하되, 템플릿 설정에서 다음 중 하나를 선택할 수 있도록:

  • 라이브 캔버스 방식 (기존)
  • 메인 레이아웃 선택 방식 (신규)

Proposed Changes

Database Schema

[NEW] cms_main_layouts

메인 레이아웃 정보를 저장하는 테이블

CREATE TABLE cms_main_layouts (
id INT AUTO_INCREMENT PRIMARY KEY,
layout_name VARCHAR(100) NOT NULL COMMENT '레이아웃 이름',
layout_description TEXT COMMENT '레이아웃 설명',
thumbnail VARCHAR(255) COMMENT '썸네일 이미지',
is_system TINYINT(1) DEFAULT 0 COMMENT '시스템 기본 레이아웃',
is_active TINYINT(1) DEFAULT 1 COMMENT '활성 상태',
sort_order INT DEFAULT 0 COMMENT '정렬 순서',
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

[NEW] cms_main_layout_sections

메인 레이아웃의 섹션(행) 정보

CREATE TABLE cms_main_layout_sections (
id INT AUTO_INCREMENT PRIMARY KEY,
layout_id INT NOT NULL COMMENT '레이아웃 ID',
section_name VARCHAR(100) COMMENT '섹션 이름',
section_type ENUM('grid', 'full') DEFAULT 'grid' COMMENT '섹션 타입: grid=12칼럼, full=100%',
padding_top INT DEFAULT 0 COMMENT '상단 패딩 (px)',
padding_bottom INT DEFAULT 0 COMMENT '하단 패딩 (px)',
padding_left INT DEFAULT 0 COMMENT '좌측 패딩 (px)',
padding_right INT DEFAULT 0 COMMENT '우측 패딩 (px)',
bg_color VARCHAR(20) COMMENT '배경색',
bg_image VARCHAR(255) COMMENT '배경 이미지',
elements JSON COMMENT '섹션 내 요소 배열 (JSON)',
sort_order INT DEFAULT 0 COMMENT '정렬 순서',
is_active TINYINT(1) DEFAULT 1,
FOREIGN KEY (layout_id) REFERENCES cms_main_layouts(id) ON DELETE CASCADE,
INDEX idx_layout_order (layout_id, sort_order)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

elements JSON 구조 예시:

[
{
"type": "slider",
"shortcode": "main_hero",
"col_start": 1,
"col_span": 12,
"margin": {"top": 0, "right": 0, "bottom": 20, "left": 0}
},
{
"type": "widget",
"shortcode": "recent_news",
"col_start": 1,
"col_span": 8,
"margin": {"top": 0, "right": 10, "bottom": 0, "left": 0}
},
{
"type": "banner",
"shortcode": "sidebar_banner",
"col_start": 9,
"col_span": 4,
"margin": {"top": 0, "right": 0, "bottom": 0, "left": 10}
}
]

[MODIFY] cms_templates

템플릿 테이블에 main_layout_id 컬럼 추가

ALTER TABLE cms_templates
ADD COLUMN main_layout_id INT DEFAULT NULL COMMENT '메인 레이아웃 ID',
ADD COLUMN main_render_mode ENUM('canvas', 'layout') DEFAULT 'canvas' COMMENT '메인 렌더링 모드',
ADD FOREIGN KEY (main_layout_id) REFERENCES cms_main_layouts(id) ON DELETE SET NULL;

Models

[NEW] models/MainLayoutModel.php

메인 레이아웃 CRUD 작업을 처리하는 모델

주요 메서드:

  • getAllLayouts() : 모든 레이아웃 조회
  • getLayoutById($id) : 특정 레이아웃 조회 (섹션 포함)
  • createLayout($data) : 새 레이아웃 생성
  • updateLayout($id, $data) : 레이아웃 수정
  • deleteLayout($id) : 레이아웃 삭제
  • duplicateLayout($id) : 레이아웃 복제
  • getSections($layoutId) : 레이아웃의 섹션 조회
  •  
    createSection($layoutId, $data): 섹션 생성
  •  
    updateSection($sectionId, $data): 섹션 수정
  • deleteSection($sectionId) : 섹션 삭제
  • updateSectionOrder($sections) : 섹션 순서 변경

Admin Pages

[MODIFY] 

 

admin/index.php

디자인관리 서브메뉴에 "메인레이아웃 관리" 추가

현재 구조:

<ul class="submenu">
<li><a href=".../?page=templates">템플릿 관리</a></li>
<li><a href=".../?page=sublayout_sets">서브레이아웃 관리</a></li>
<li><a href=".../?page=main_slides">메인슬라이드 관리</a></li>
<li><a href=".../?page=banners">배너관리</a></li>
</ul>

추가할 항목:

<li><a href=".../?page=main_layouts">메인레이아웃 관리</a></li>

그리고 page routing에  main_layouts  케이스 추가

[NEW] admin/pages/main_layouts.php

메인 레이아웃 목록 및 관리 페이지

기능:

  • 레이아웃 목록 표시 (카드 그리드 형식)
  • 레이아웃 생성/수정/삭제/복제
  • 레이아웃 활성화/비활성화
  • 썸네일 표시
  • "섹션 편집" 버튼 → 레이아웃 빌더로 이동

[NEW] admin/pages/main_layout_builder.php

메인 레이아웃 빌더 (그리드 에디터)

기능:

  • 섹션 추가 (grid 12칼럼 / full 100%)
  • 각 섹션에 요소 배치:
    • 숏코드: 슬라이드, 최근글, 배너 (드롭다운으로 선택)
    • 타이틀: 링크 설정 가능
    • 텍스트: 일반 텍스트 또는 HTML
    • 버튼: 텍스트, 링크, 스타일
    • 배경 이미지: 업로드 또는 URL
    • 유튜브: 유튜브 URL 또는 ID
    • 여백: 빈 공간
  • 그리드 12칼럼 시스템:
    • col_start : 시작 컬럼 (1-12)
    • col_span : 너비 (1-12)
  • 패딩 설정: top, bottom, left, right
  • 드래그앤드롭으로 순서 변경
  • 실시간 미리보기 (선택사항)

UI 구조:

[섹션 1: grid 타입]
├─ 패딩: top(20px), bottom(20px), left(0), right(0)
├─ 배경색: #f5f5f5
└─ 요소:
├─ 슬라이드 (col: 1-12, 전체 너비)
 
[섹션 2: grid 타입]
└─ 요소:
├─ 최근글 위젯 (col: 1-8)
└─ 배너 (col: 9-12)
 
[섹션 추가 버튼]

[MODIFY] 

 

admin/pages/template_settings.php

템플릿 설정 페이지에 메인 레이아웃 선택 옵션 추가

추가할 필드:

  • 메인 렌더링 모드: 라디오 버튼
    • 라이브 캔버스 (기존 방식)
    • 메인 레이아웃 (신규 방식)
  • 메인 레이아웃 선택: 드롭다운 (mode가 'layout'일 때만 표시)

위치: 서브레이아웃 설정 위에 추가

Frontend Rendering

[MODIFY] 

 

controllers/HomeController.php

템플릿의 main_render_mode를 확인하여 렌더링 방식 결정

// 템플릿 정보 조회
$templateInfo = $this->getTemplateInfo();
 
if ($templateInfo['main_render_mode'] === 'layout' && $templateInfo['main_layout_id']) {
// 메인 레이아웃 방식
$mainLayoutRenderer = new MainLayoutRenderer($this->pdo);
$mainContent = $mainLayoutRenderer->render($templateInfo['main_layout_id']);
} else {
// 라이브 캔버스 방식 (기존)
$mainContent = $this->renderLiveCanvas();
}

[NEW] includes/MainLayoutRenderer.php

메인 레이아웃 렌더링 클래스

주요 메서드:

  • render($layoutId) : 레이아웃 전체 렌더링
  • renderSection($section) : 개별 섹션 렌더링
  • renderElement($element) : 개별 요소 렌더링
  • renderShortcode($type, $id) : 숏코드 렌더링 (슬라이드, 위젯, 배너)
  • renderTitle($data) : 타이틀 렌더링
  • renderText($data) : 텍스트 렌더링
  • renderButton($data) : 버튼 렌더링
  • renderBgImage($data) : 배경 이미지 렌더링
  • renderYoutube($data) : 유튜브 렌더링

렌더링 구조:

<div class="main-layout" data-layout-id="1">
<section class="layout-section section-grid" style="padding: 20px 0;">
<div class="container">
<div class="grid-12">
<div class="col-1-12">
<!-- 슬라이드 -->
</div>
</div>
</div>
</section>
 
<section class="layout-section section-grid" style="padding: 30px 0;">
<div class="container">
<div class="grid-12">
<div class="col-1-8">
<!-- 최근글 위젯 -->
</div>
<div class="col-9-12">
<!-- 배너 -->
</div>
</div>
</div>
</section>
</div>

CSS/JavaScript

[NEW] assets/css/main-layout-grid.css

12칼럼 그리드 시스템 및 반응형 스타일

.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
 
.col-1-12 { grid-column: 1 / 13; }
.col-1-8 { grid-column: 1 / 9; }
.col-9-12 { grid-column: 9 / 13; }
/* ... 모든 조합 */
 
@media (max-width: 768px) {
.grid-12 {
grid-template-columns: 1fr;
}
.col-1-12, .col-1-8, .col-9-12 {
grid-column: 1 / -1;
}
}

[NEW] admin/assets/js/main-layout-builder.js

레이아웃 빌더 JavaScript

기능:

  • 섹션 추가/삭제
  • 요소 추가/삭제/이동
  • 그리드 컬럼 조정
  • 드래그앤드롭 (Sortable.js)
  • AJAX 저장

Proposed File Structure

admin/
├── pages/
│ ├── main_layouts.php (NEW - 목록)
│ ├── main_layout_builder.php (NEW - 빌더)
│ └── template_settings.php (MODIFY - 메인레이아웃 선택 추가)
└── assets/
└── js/
└── main-layout-builder.js (NEW)
 
assets/css/
└── main-layout-grid.css (NEW)
 
controllers/
└── HomeController.php (MODIFY - 렌더링 로직 추가)
 
includes/
└── MainLayoutRenderer.php (NEW)
 
models/
└── MainLayoutModel.php (NEW)
 
migrations/
├── create_main_layouts_table.php (NEW)
└── add_main_layout_to_templates.php (NEW)

Verification Plan

Automated Tests

# 마이그레이션 실행
php admin/migrations/create_main_layouts_table.php
php admin/migrations/add_main_layout_to_templates.php
 
# 데이터베이스 확인
mysql> SHOW TABLES LIKE '%main_layout%';
mysql> DESCRIBE cms_main_layouts;
mysql> DESCRIBE cms_main_layout_sections;

Manual Verification

  1. 관리자 메뉴 확인

    • 디자인관리 > 메인레이아웃 관리 메뉴 표시 확인

  2. 레이아웃 생성

    • 새 레이아웃 생성
    • 섹션 추가 (grid, full)
    • 요소 배치 (슬라이드, 위젯, 배너, 텍스트 등)
    • 그리드 조정 확인

  3. 템플릿 연동

    • 템플릿 설정에서 메인레이아웃 선택
    • 홈페이지에서 레이아웃 렌더링 확인

  4. 반응형 확인

    • PC, 태블릿, 모바일에서 그리드 레이아웃 확인

  5. 숏코드 렌더링

    • 슬라이드, 최근글, 배너가 정상 출력되는지 확인