WP-8 콘텐츠 관리 시스템 - 구현 계획서 (Phase 1-2)

# WP-8: 콘텐츠 관리 시스템 구현 계획 > 사용자가 생성한 테마의 콘텐츠를 직접 편집할 수 있는 시스템 --- ## ? 목표 사용자가 빌드한 테마의 HTML 콘텐츠(텍스트, 이미지, 링크)를 웹에서 편집하여 자신만의 웹사이트를 만들 수 있도록 지원 --- ## ? 사전 분석: 영카트 시스템 ### 참고용 영카트 파일 (분석만, 직접 사용하지 않음) ``` /shop/cart.php - 장바구니 메인 /shop/cartupdate.php - 장바구니 업데이트 /shop/orderform.php - 주문서 작성 /shop/orderformupdate.php - 주문 처리 ``` **분석 결과:** - 영카트는 세션(`$_SESSION['ss_cart_id']`) 기반 장바구니 사용 - 주문 정보는 `g5_shop_order`, `g5_shop_cart` 테이블에 저장 - 결제 PG는 플러그인 구조 (`/shop/kcp`, `/shop/inicis` 등) **우리 시스템 적용:** - 당장 결제/장바구니는 구현하지 않음 - 추후 WP-6/7 구현 시 영카트 구조를 참고 --- ## ? 시스템 아키텍처 ### 콘텐츠 편집 플로우 ``` 1. 사용자가 빌드한 테마 선택 ↓ 2. HTML 파싱하여 편집 가능한 콘텐츠 추출 ↓ 3. 콘텐츠 블록 단위로 DB 저장 ↓ 4. 웹 에디터로 편집 ↓ 5. 변경 사항 저장 및 이력 관리 ↓ 6. 실시간 미리보기 / 테마 재빌드 ``` --- ## ?️ 데이터베이스 설계 ### 1. g5_theme_content (콘텐츠 블록) ```sql CREATE TABLE IF NOT EXISTS `g5_theme_content` ( `tc_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '콘텐츠 ID', `mb_id` varchar(20) NOT NULL COMMENT '회원 ID', `theme_id` int(11) NOT NULL COMMENT '테마 ID (사용자가 빌드한 테마)', `page_path` varchar(255) NOT NULL COMMENT '페이지 경로 (예: index.html, about.html)', `block_type` enum('text','image','link','html') NOT NULL COMMENT '블록 타입', `block_identifier` varchar(255) NOT NULL COMMENT '블록 식별자 (CSS selector 또는 ID)', `original_content` longtext COMMENT '원본 콘텐츠', `current_content` longtext COMMENT '현재 콘텐츠 (사용자가 편집한 내용)', `block_order` int(11) DEFAULT '0' COMMENT '블록 순서', `created_at` datetime NOT NULL COMMENT '생성일', `updated_at` datetime NOT NULL COMMENT '수정일', PRIMARY KEY (`tc_id`), KEY `mb_id` (`mb_id`), KEY `theme_id` (`theme_id`), KEY `page_path` (`page_path`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='테마 콘텐츠 블록'; ``` ### 2. g5_theme_content_history (버전 관리) ```sql CREATE TABLE IF NOT EXISTS `g5_theme_content_history` ( `th_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '이력 ID', `tc_id` int(11) NOT NULL COMMENT '콘텐츠 ID', `content_snapshot` longtext NOT NULL COMMENT '콘텐츠 스냅샷', `changed_by` varchar(20) NOT NULL COMMENT '변경자 ID', `change_note` varchar(255) DEFAULT NULL COMMENT '변경 메모', `created_at` datetime NOT NULL COMMENT '생성일', PRIMARY KEY (`th_id`), KEY `tc_id` (`tc_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='콘텐츠 변경 이력'; ``` --- ## ?️ 구현 계획 ### Phase 1: HTML 콘텐츠 파싱 및 추출 #### 파일: `/user/ajax.parse_content.php` **기능:** - 사용자가 빌드한 테마의 HTML 파일들을 스캔 - PHP Simple HTML DOM Parser 사용하여 DOM 파싱 - 편집 가능한 영역 자동 감지: - ``, ``, ``, `` 등 텍스트 요소 - `` 태그 → 이미지 블록 - `` 태그 → 링크 블록 - 각 요소에 고유 식별자 부여 (CSS selector 생성) - DB에 `g5_theme_content` 레코드 생성 **예시 코드:** ```php include_once('simplehtmldom/simple_html_dom.php'); $html = file_get_html($theme_path . '/index.html'); // 텍스트 블록 추출 foreach($html->find('h1, h2, h3, p') as $index => $elem) { $selector = generate_unique_selector($elem); // 예: "section.hero h1" $content = $elem->innertext; // DB 저장 insert_content_block([ 'block_type' => 'text', 'block_identifier' => $selector, 'original_content' => $content, 'current_content' => $content ]); } // 이미지 블록 추출 foreach($html->find('img') as $img) { // 이미지 src, alt 저장 } ``` --- ### Phase 2: 콘텐츠 목록 및 편집 UI #### 파일: `/user/content_manager.php` **기능:** - 사용자가 빌드한 테마 목록 표시 - 테마 선택 시 → 페이지별 콘텐츠 블록 목록 - 각 블록을 카드 형태로 표시: ``` ┌─────────────────────────────────┐ │ [Text] section.hero h1 │ │ "Welcome to My Website" │ │ [편집] [미리보기] [원본 복원] │ └─────────────────────────────────┘ ``` **UI 구조:** ``` 1. 테마 선택 드롭다운 2. 페이지 탭 (index.html, about.html, contact.html...) 3. 콘텐츠 블록 리스트 - 블록 타입 아이콘 - 현재 콘텐츠 미리보기 - 편집 버튼 → 모달 팝업 ``` --- ### Phase 3: 인라인 편집 모달 #### 파일: `/user/ajax.update_content.php` **기능:** - 편집 버튼 클릭 시 모달 팝업 - 블록 타입별 편집 UI: - **텍스트**: TinyMCE 에디터 (간단한 포맷팅) - **이미지**: 이미지 업로드 + URL 입력 - **링크**: URL + 텍스트 입력 - 저장 시 `g5_theme_content.current_content` 업데이트 - 변경 이력 자동 저장 (`g5_theme_content_history`) **모달 예시:** ```html 콘텐츠 편집: section.hero h1 저장 원본 복원 ``` --- ### Phase 4: WYSIWYG 에디터 통합 **선택: TinyMCE 6 (MIT License)** - 이유: 가볍고, 설정 간단, 이미지 업로드 플러그인 지원 - CDN 사용: ```html ``` **설정:** ```javascript tinymce.init({ selector: '#tinymce-editor', plugins: 'link image lists', toolbar: 'undo redo | bold italic | bullist numlist | link image', images_upload_handler: function(blobInfo, success, failure) { // AJAX로 이미지 업로드 uploadImage(blobInfo.blob()).then(url => success(url)); } }); ``` --- ### Phase 5: 버전 관리 및 복원 #### 파일: `/user/ajax.restore_version.php` **기능:** - 각 저장 시 스냅샷 생성 (`g5_theme_content_history`) - 이력 조회 UI: ``` 버전 3 - 2026-01-04 10:30 (현재) 버전 2 - 2026-01-04 09:15 [복원] 버전 1 - 2026-01-03 (원본) [복원] ``` - "복원" 버튼 클릭 시: - 해당 버전의 `content_snapshot` 가져오기 - `current_content` 업데이트 - 새로운 이력 생성 (복원 기록) --- ### Phase 6: 실시간 미리보기 #### 파일: `/user/preview_with_content.php` **기능:** - 기존 `preview.php`를 확장 - DB에서 `current_content` 가져와서 HTML에 주입 - JavaScript로 DOM 조작: ```javascript // 콘텐츠 적용 contentBlocks.forEach(block => { const elem = document.querySelector(block.selector); if (elem) { elem.innerHTML = block.current_content; } }); ``` --- ## ? 검증 계획 ### 1. 단위 테스트 (수동) **테스트 1: HTML 파싱** 1. 테스트용 HTML 파일 준비 (`test_template.html`) 2. `ajax.parse_content.php` 실행 3. DB에 콘텐츠 블록 정확히 저장되는지 확인 **테스트 2: 콘텐츠 편집** 1. `content_manager.php` 접속 2. 텍스트 블록 편집 → 저장 3. DB `current_content` 업데이트 확인 **테스트 3: 버전 복원** 1. 콘텐츠 3번 수정 2. 이력 조회 → 버전 1 복원 3. 내용이 원래대로 돌아가는지 확인 ### 2. 통합 테스트 **시나리오: 사용자 워크플로우** 1. 사용자 로그인 2. 테마 빌드 완료 3. 콘텐츠 관리 페이지 접속 4. 텍스트 5개, 이미지 2개 편집 5. 실시간 미리보기에서 변경사항 확인 6. 테마 재빌드 → 최종 HTML에 반영 확인 ### 3. 성능 테스트 - 100개 블록 로딩 시간 < 2초 - 편집 저장 응답 시간 < 500ms --- ## ? 예상 일정 | Phase | 작업 | 예상 시간 | |-------|------|-----------| | Phase 1 | HTML 파싱 및 추출 | 2일 | | Phase 2 | 콘텐츠 목록 UI | 1일 | | Phase 3 | 편집 모달 | 1일 | | Phase 4 | TinyMCE 통합 | 1일 | | Phase 5 | 버전 관리 | 1일 | | Phase 6 | 미리보기 통합 | 1일 | | **합계** | | **7일** | --- ## ⚠️ 리스크 및 대응 ### 리스크 1: HTML 구조가 일관되지 않음 **문제:** 템플릿마다 HTML 구조가 달라 자동 파싱 실패 가능 **대응:** - 사용자가 직접 편집 영역 지정할 수 있는 옵션 추가 - 일반적인 태그(h1, p, img) 우선 지원 ### 리스크 2: 대용량 HTML 파싱 성능 **문제:** 큰 템플릿 파싱 시 시간 초과 **대응:** - 페이지 단위 파싱 (전체 사이트 한번에 X) - 백그라운드 작업으로 분리 --- ## ? 최소 기능 (MVP) **Phase 1 완료 시 테스트 가능:** - HTML 파싱 및 DB 저장 - 간단한 텍스트 편집 (TinyMCE 없이 textarea) - 저장 및 미리보기 **권장 완전 버전:** - Phase 1-6 전체 완료 --- ## ? 참고 자료 - [PHP Simple HTML DOM Parser](http://simplehtmldom.sourceforge.net/) - [TinyMCE Documentation](https://www.tiny.cloud/docs/) - 기존 구현: `ajax.build_theme.php` (테마 빌드 로직 참고)