게시판 시스템에 일정관리 캘린더 스킨을 추가합니다. 월별 캘린더 뷰로 일정을 표시하고, 시작일/종료일을 설정하여 여러날 일정을 지원하며, 일정별로 배경색과 텍스트색을 선택할 수 있도록 구현합니다.

User Review Required

IMPORTANT

이 작업은 데이터베이스 스키마를 변경합니다. cms_skins 테이블과 cms_posts 테이블에 새로운 컬럼을 추가해야 하므로, 프로덕션 환경에 적용하기 전에 백업을 권장합니다.

WARNING

기존 게시판 데이터에는 일정 관련 필드가 NULL로 설정되므로, 캘린더 스킨으로 설정된 게시판에서는 기존 게시물이 표시되지 않을 수 있습니다.

Proposed Changes

Database Schema

[MODIFY] cms_skins 테이블

  • skin_type ENUM에 'calendar' 값 추가
  • 현재: ENUM('list','gallery','webzine','faq','product','custom')
  • 변경 후: ENUM('list','gallery','webzine','faq','product','calendar','custom')

[MODIFY] cms_posts 테이블

다음 4개의 컬럼을 추가합니다:

  • event_start_date DATE NULL - 일정 시작일
  • event_end_date DATE NULL - 일정 종료일
  • event_bg_color VARCHAR(20) NULL DEFAULT '#3788d8' - 일정 배경색
  • event_text_color VARCHAR(20) NULL DEFAULT '#ffffff' - 일정 텍스트색

Backend (PHP)

[NEW] 

 

CalendarSkin.php

BaseSkin을 상속받는 캘린더 스킨 클래스를 생성합니다.

  •  
    renderContent(): 월별 캘린더 그리드 렌더링
  • renderCalendarGrid(): 날짜별 셀 생성 및 일정 표시
  • renderEventBar(): 색상이 적용된 일정바 렌더링
  • getEventsForMonth(): 해당 월의 일정 데이터 조회
  •  
    renderAssets(): 캘린더 전용 CSS/JS 포함

[MODIFY] 

 

SkinModel.php

  •  
    getSkinTypes(): 'calendar' => '캘린더형' 추가
  •  
    getDefaultOptions(): calendar 타입 기본 옵션 추가
    'calendar' => [
    'default_view' => 'month',
    'first_day_of_week' => 0, // 0=일요일
    'show_weekends' => true,
    'default_event_duration' => 60,
    'event_colors' => ['#3788d8', '#e74c3c', '#2ecc71', ...]
    ]

Frontend Templates

[NEW] 

 

includes/skins/calendar/list.php

캘린더 목록 뷰 템플릿

  • 월 선택 네비게이션 (이전/다음 월)
  • 월별 캘린더 그리드 (7열 x 5~6행)
  • 일정 클릭 시 상세보기 모달
  • 일정 추가 버튼

[NEW] 

 

includes/skins/calendar/write.php

일정 등록/수정 폼 템플릿

  • 제목, 내용 입력 필드
  • 시작일/종료일 Date Picker
  • 배경색 선택 Color Picker
  • 텍스트색 선택 Color Picker
  • 저장 버튼

CSS & JavaScript

[NEW] board-calendar.css

  • .calendar-grid: 캘린더 그리드 레이아웃
  • .calendar-day: 날짜 셀 스타일
  • .event-bar: 일정바 스타일 (배경색, 텍스트색 동적 적용)
  • .event-multi-day: 여러날 일정 연속 표시 스타일

JavaScript (CalendarSkin.php의 renderAssets()에 포함)

  • 월 이동 기능
  • 일정 추가/수정 모달
  • Color Picker 연동
  • 여러날 일정 렌더링 로직

System Skin Registration

[NEW] SQL 스크립트

cms_skins 테이블에 시스템 스킨 등록:

INSERT INTO cms_skins
(skin_id, skin_name, skin_type, is_system, description, options, created_at)
VALUES (
'calendar',
'캘린더형(기본)',
'calendar',
1,
'월별 캘린더 형태의 일정 관리 게시판. 시작일/종료일 설정으로 여러날 일정 지원. 일정별 색상 커스터마이징 가능.',
'{"default_view":"month","first_day_of_week":0,"show_weekends":true,"event_colors":["#3788d8","#e74c3c","#2ecc71","#f39c12","#9b59b6"]}',
NOW()
);

Verification Plan

Automated Tests

현재 이 프로젝트에는 자동화된 테스트 프레임워크가 설정되어 있지 않으므로, 자동화 테스트는 건너뜁니다.

Manual Verification

1. 데이터베이스 변경 확인

  • phpMyAdmin 또는 MySQL 클라이언트로 접속
  • cms_skins 테이블의 skin_type ENUM 값에 'calendar' 포함 확인
  • cms_posts 테이블에 4개의 새 컬럼 추가 확인

2. 스킨 등록 확인

  1. https://qminmom.co.kr/admin/?page=skins 접속
  2. 스킨 목록에 "캘린더형(기본)" 표시 확인
  3. "시스템" 배지 표시 확인
  4. 스킨 타입이 "캘린더형"으로 표시되는지 확인

3. 게시판 생성 및 캘린더 뷰 확인

  1. 관리자 페이지에서 새 게시판 생성
  2. 스킨 선택 드롭다운에서 "캘린더형(기본)" 선택
  3. 게시판 저장
  4. 해당 게시판으로 이동하여 월별 캘린더 그리드 표시 확인

4. 일정 등록 및 표시 확인

  1. "일정 추가" 버튼 클릭
  2. 제목, 내용, 시작일, 종료일 입력
  3. 배경색, 텍스트색 선택
  4. 저장 후 캘린더에 일정바 표시 확인
  5. 선택한 색상이 올바르게 적용되었는지 확인
  6. 여러날 일정인 경우 시작일부터 종료일까지 연속으로 표시되는지 확인

5. 일정 수정 및 삭제 확인

  1. 일정 클릭하여 상세보기
  2. 수정 버튼 클릭하여 내용 수정
  3. 색상 변경 후 저장
  4. 변경사항이 캘린더에 반영되는지 확인
  5. 삭제 기능 테스트

 

ALTER TABLE cms_skins
MODIFY COLUMN skin_type ENUM('list','gallery','webzine','faq','product','calendar','custom')
NOT NULL DEFAULT 'list';

-- 2. cms_posts 테이블에 일정 관련 컬럼 추가
ALTER TABLE cms_posts
ADD COLUMN event_start_date DATE NULL COMMENT '일정 시작일' AFTER magazine_title_left,
ADD COLUMN event_end_date DATE NULL COMMENT '일정 종료일' AFTER event_start_date,
ADD COLUMN event_bg_color VARCHAR(20) NULL DEFAULT '#3788d8' COMMENT '일정 배경색' AFTER event_end_date,
ADD COLUMN event_text_color VARCHAR(20) NULL DEFAULT '#ffffff' COMMENT '일정 텍스트색' AFTER event_bg_color;

-- 3. 캘린더형 시스템 스킨 등록
INSERT INTO cms_skins
(skin_id, skin_name, skin_type, base_skin_id, is_system, description, options, is_active, created_at)
VALUES (
    'calendar',
    '캘린더형(기본)',
    'calendar',
    NULL,
    1,
    '월별 캘린더 형태의 일정 관리 게시판. 시작일/종료일 설정으로 여러날 일정 지원. 일정별 색상 커스터마이징 가능.',
    '{"default_view":"month","first_day_of_week":0,"show_weekends":true,"posts_per_page":100,"event_colors":["#3788d8","#e74c3c","#2ecc71","#f39c12","#9b59b6","#1abc9c","#e67e22","#34495e"]}',
    1,
    NOW()
);