메인 레이아웃 관리 시스템을 데이터베이스 기반의 유연한 구조로 전환하고, 요청하신 그리드 및 요소별 상세 설정 기능을 모두 구현했습니다.

주요 작업 내용

1. 데이터베이스 스키마 확장

  • cms_main_layout_sections  테이블에 다음 필드를 추가했습니다:
    • container_width : 섹션의 가로 박스 너비 (1200px, 1400px, 100% 등 선택 및 직접 입력 가능)
    • margin_top ,  margin_bottom : 섹션 상하 외부 여백
    • bg_gradient : 단색 배경 외에 그라데이션 배경 지원
  • 마이그레이션 파일: 
    update_main_layout_sections_table.php를 생성했습니다. (관리자 페이지나 터미널에서 실행 필요)

2. 레이아웃 렌더러 고도화 ( MainLayoutRenderer.php )

  • 그리드 제어: 각 섹션별로 설정된 배경색, 그라데이션, 마진, 박스 너비를 실제 프론트엔드에 반영하도록 수정했습니다.
  • 요소별 상세 설정: 위젯(최근글 등) 배치 시 노출 갯수, 추출 갯수, 제목/내용 글자수 제한, 썸네일 비율 등을 PC와 모바일 각각 다르게 설정할 수 있도록 로직을 구현했습니다.
  • 모바일 스와이프 강제: 모든 슬라이더 요소에  data-is-mobile="1"  속성을 부여하고, 터미널/모바일 환경에서 무조건 스와이프가 작동하도록 CSS와 JS 연동 구조를 개선했습니다.

3. 관리자 UI 개선 ( main_layout_builder.php )

  • 섹션 설정 모달: 섹션 편집 시 너비(Full/Boxed), 상하 마진, 배경 그라데이션을 직관적으로 설정할 수 있는 UI를 추가했습니다.
  • 요소 상세 설정 모달: 배치된 각 요소 옆의 설정(톱니바퀴) 아이콘을 클릭하여 노출 개수 및 글자 수 제한 등의 상세 옵션을 실시간으로 수정할 수 있게 했습니다.
  • 빌더 미리보기: 빌더 화면에서도 설정된 배경색과 마진이 시각적으로 반영되어 관리자가 미리 파악하기 쉽도록 개선했습니다.