목표
기존 템플릿 관리 시스템에 메인 레이아웃 관리 기능을 추가하여, 관리자가 여러 메인 레이아웃 스타일을 생성하고 템플릿별로 선택할 수 있도록 구현합니다.
배경
현재 시스템에는
main_design.php에서 라이브 캔버스 기반의 메인 디자인 기능이 있지만, 사용자가 요청한 기능은 다음과 같은 차이점이 있습니다:
- 여러 스타일 관리: 다양한 메인 레이아웃을 만들고 관리
- 템플릿 연동: 템플릿마다 원하는 메인 레이아웃을 선택
- 그리드 기반: 12칼럼 그리드와 100% 너비 프레임을 혼합
- 숏코드 조합: 슬라이드, 최근글, 배너를 간단히 조합
- 요소 다양성: 타이틀(링크), 텍스트, 버튼, 배경이미지, 유튜브 링크 지원
User Review Required
IMPORTANT
기존 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
-
관리자 메뉴 확인
- 디자인관리 > 메인레이아웃 관리 메뉴 표시 확인
-
레이아웃 생성
- 새 레이아웃 생성
- 섹션 추가 (grid, full)
- 요소 배치 (슬라이드, 위젯, 배너, 텍스트 등)
- 그리드 조정 확인
-
템플릿 연동
- 템플릿 설정에서 메인레이아웃 선택
- 홈페이지에서 레이아웃 렌더링 확인
-
반응형 확인
- PC, 태블릿, 모바일에서 그리드 레이아웃 확인
-
숏코드 렌더링
- 슬라이드, 최근글, 배너가 정상 출력되는지 확인
댓글 0개