슬라이드 에디터(lab.xslide.kr)와 메인 사이트(xslide.kr) 간의 템플릿 연동 기능을 구현하기 위한 계획입니다.

User Review Required

IMPORTANT

 

  • 슬라이드 템플릿 데이터를 저장할 때, 각 장의 슬라이드 데이터(애니메이션 포함) 및 썸네일 정보가 상당히 클 수 있습니다. 이를 효율적으로 저장하기 위해 slide_templates라는 새로운 DB 테이블을 추가하고, 상세 정보는 JSON 형태로 저장할 계획입니다.
  • https://xslide.kr/board/templates 경로 요청을 기존 PostController 게시판 로직이 아닌 새로운 SlideTemplateController로 연결하여 템플릿 전용 UI를 구현하겠습니다.

Proposed Changes

[Database 변경]

새로운 슬라이드 템플릿용 테이블(slide_templates)과 찜하기 기능용 테이블(slide_template_likes)을 생성합니다.

  • slide_templates: 템플릿 기본 정보(제목, 설명, 카테고리, Color Style, Screen Mode) 및 슬라이드 전체 데이터(JSON) 보관
  • slide_template_likes: 사용자별 찜하기 데이터 저장용

[Frontend - 슬라이드 에디터 (lab.xslide.kr / htdocs)]

[MODIFY] 

  • 우측 상단 메뉴(btn-export-html 옆)에 "템플릿 내보내기" 버튼 추가 (최고관리자만 노출되도록 기존 JS 활용).
  • 템플릿 내보내기 클릭 시 뜨는 모달(Modal) HTML 팝업 마크업 추가.
    • 카테고리(Select), 제목(Input), Color Style(Checkbox 다중선택), Screen Mode(Select/Radio), 설명(Textarea).

[NEW]  (또는 기존 메인 스크립트 파일 내 작성)

  • 모달 열기/닫기 처리 및 폼 제출 이벤트 바인딩.
  • 에디터 상의 현재 슬라이드 상태(JSON 형태의 데이터 및 각 장의 썸네일)를 추출하여 xslide.kr의 새로운 API 엔드포인트(api/templates/export)로 POST 전송.
  • 전송 성공 시 템플릿 등록 완료 알림 추가.

[Backend - 메인 사이트 (xslide.kr)]

[MODIFY] 

  • 라우터 로직에 아래 엔드포인트 추가:
    • api/templates/export : 에디터에서 전송된 템플릿 저장 (POST)
    • board/templates : 템플릿 목록 페이지
    • board/templates/view/(\d+) : 템플릿 상세 페이지
    • api/templates/like : 찜하기 처리 API

[NEW] 

  • export(): 모달에서 넘겨받은 데이터(카테고리, 메타정보, 슬라이드 데이터)를 DB에 삽입.
  • index(): 카테고리, Color Style, Screen Mode에 따른 검색/필터링을 포함하여 템플릿 목록 렌더링.
  • view($id): 템플릿 상세 정보 및 슬라이드 뷰어 렌더링. 찜하기 기능 및 '내 슬라이드 적용' 액션 제공.
  • toggleLike(): 사용자의 찜하기 설정/해제 처리.

[NEW] 

  • DB의 slide_templates와 slide_template_likes 테이블 접근을 위한 모델 클래스. 목록 가져오기, 저장, 필터링 로직 포함.

[NEW]  (경로는 설정에 맞게 변경)

  • /board/templates 진입 시 보여질 템플릿 목록 마크업.
  • 검색 필터 (Color Style, Screen Mode) UI 제공.
  • 썸네일 목록 렌더링.

[NEW] 

  • 선택된 템플릿의 상세 페이지.
  • 상단에 메인 슬라이드 뷰어 (가로모드 100%, 세로/정사각형 정비율), 애니메이션 적용 프리뷰.
  • 하단에 가로 스크롤형 썸네일 리스트, 클릭 시 상단 메인 뷰어 갱신.
  • "내 슬라이드 적용", "찜하기" 버튼 추가 및 동작 JS 구현.
    • 내 슬라이드 적용 시 lab.xslide.kr로 템플릿 ID와 함께 리다이렉트(window.open 또는 location.href).

Verification Plan

Manual Verification

  1. lab.xslide.kr 편집기에서 최고관리자로 로그인된 상태인지 확인하고 우측 상단 "템플릿 내보내기" 버튼이 보이는지 확인.
  2. 버튼 클릭 시 모달이 제대로 뜨고 폼 입력 후 전송이 성공적으로 이루어지는지(Network 탭 확인) 테스트.
  3. xslide.kr/board/templates 접속 시 방금 등록한 템플릿이 필터와 함께 리스트에 노출되는지 확인.
  4. 상세 보기 페이지에서 썸네일 클릭 시 슬라이드가 잘 변경되고 비율이 정상적으로 유지되는지(가로/세로) 확인.
  5. "내 슬라이드 적용" 버튼 클릭 시 Confirm 창 후 에디터로 리다이렉트 되는지 확인.
  6. "찜하기" 버튼 클릭 시 정상적으로 DB에 반영되는지 확인.