게시물 모듈 구현 계획

본 문서에서는 http://localhost/xzine.kr/admin/webzine/editor?id=3의 웹진 편집기 프레임워크 내에 게시물 모듈을 구현하기 위한 계획을 정리합니다.

User Review Required

Proposed Changes

[Controller]

WebzineAdminController.php 내의 API를 수정하여 게시물 데이터와 함께 유튜브 링크 및 오디오 첨부 여부를 반환하도록 합니다.

[MODIFY] WebzineAdminController.php

• apiGetPosts() 메서드 수정
• SELECT 쿼리에 youtube_url 필드 추가
• 각 게시물(post_id)에 대해 post_files 테이블을 조회하여 확장자가 오디오 파일인지 확인 후 has_audio 플래그를 추가.

[Editor Core / Views]

_webzine_editor_core.php를 수정하여 다양한 표시형태(UI)와 무한스크롤, 썸네일 아이콘을 구현합니다.

[MODIFY] _webzine_editor_core.php

• 속성 패널 업데이트 (prop-module-panel)
  • "게시물 모듈" 선택 시 보여지는 패널에 "표시 갯수(PC)" 및 "표시 갯수(모바일)" 입력 컨트롤 추가
• 데이터 로딩 및 속성 저장 업데이트 (fetchPostsForBoard, applyPostStyle)
  • 선택된 표시 갯수를 data-pc-count, data-mob-count 등의 속성으로 layer-element에 저장
• 렌더링 로직 업데이트 (renderPostElement)
  • 공통 썸네일 및 아이콘 로직:
    • youtube_url이 있으면 썸네일 중앙에 빨간색 플레이 아이콘 (ph-fill ph-play-circle) 표시
    • has_audio가 참이면 제목 앞에 파란색 스피커 아이콘 (ph-fill ph-speaker-high) 표시
  • 리스트형: 제목과 [작성일]을 한 줄씩 표시. (게시물이 표시 갯수보다 많으면 세로 무한 스크롤 스와이퍼 적용)
  • 웹진#1형: 좌측 50% 썸네일, 우측 50% 텍스트. slidesPerView: 1 설정으로 1건씩 좌우 무한 슬라이드 및 하단 도트(Pagination) 추가.
  • 웹진#2형: 좌측 썸네일, 우측 텍스트로 구성되며 스크롤 없이 표시갯수만큼 세로로 나열.
  • 웹진#3형: 좌측 텍스트, 우측 썸네일로 구성되며 스크롤 없이 표시갯수만큼 세로로 나열.
  • 카드#1형: 썸네일 / 제목 / 내용 3줄 구성. Swiper를 사용해 PC/모바일에 맞춰 표시 갯수 설정, 개수 초과 시 무한 루프 및 스와이프 기능 활성화.
  • 카드#2형: 썸네일 / 제목 구성. Swiper를 사용해 PC/모바일에 맞춰 표시 갯수 설정, 개수 초과 시 무한 루프 및 스와이프 기능 활성화.

Verification Plan

Automated Tests

• 없음

Manual Verification

1. 관리자 페이지로 로그인 후 웹진 편집기(id=3)에 접속합니다.
2. 모듈을 추가하고 "게시물 모듈"로 변경합니다.
3. 게시판을 선택하고 속성 창에서 각 스타일(리스트형, 웹진형 1/2/3, 카드형 1/2)을 차례대로 변경해 봅니다.
4. 표시 갯수보다 많이 체크하여 스크롤(상하/좌우 무한 스크롤)이 정상적으로 동작하는지 확인합니다.
5. 유튜브 링크가 있거나 오디오 파일이 첨부된 게시물에 대해 올바른 아이콘(빨강/파랑)이 표시되는지 확인합니다.