iotdoor_boot/00.word/popup-management-work.md

팝업관리 기능 작업내용

작업 개요

• 관리자에 팝업관리 메뉴를 추가했습니다.
• 배너관리와 동일한 목록, 등록, 수정, 삭제, 순서 변경 흐름으로 구성했습니다.
• 팝업 등록/수정 화면에는 기존 TipTap 에디터를 재사용해 텍스트와 이미지를 함께 입력할 수 있도록 적용했습니다.
• 사용자 메인 index 진입 시 노출 대상 팝업이 있으면 모달 캐러셀로 표시되도록 추가했습니다.

DB 스키마

• TN_MAIN_POPUP 테이블을 추가했습니다.
• 주요 컬럼은 다음과 같습니다.
  • POPUP_IDNTF_NO: 팝업 식별번호
  • TTL: 제목
  • CN: 에디터 본문 HTML
  • SORT_ORDR: 노출 순서
  • USE_YN: 노출 여부
  • REG_DT: 작성일시
  • REG_USER_IDNTF_NO: 작성자
  • DEL_YN: 삭제 여부
  • UPD_DT: 수정일시
• 정렬 및 노출 조회용 인덱스를 추가했습니다.

관리자 기능

• 신규 URL
  • 목록: /mfuc/popup/list.do
  • 등록/수정: /mfuc/popup/form.do
  • 저장: /mfuc/popup/save.do
  • 삭제: /mfuc/popup/delete.do
  • 순서 변경: /mfuc/popup/move.do
• 목록 화면에 작성자, 작성일시, 노출여부를 표시했습니다.
• 게시기간을 선택 입력할 수 있으며, 미입력 시 기간 제한 없이 노출됩니다.
• 등록 시 로그인한 관리자 식별번호를 작성자로 저장합니다.
• 수정 시 기존 작성자 정보는 유지합니다.

사용자 메인 팝업

• 메인 페이지 진입 시 USE_YN = 'Y', DEL_YN = 'N' 팝업만 노출합니다.
• 게시 시작일시와 종료일시가 설정된 경우 현재 일시가 게시기간 안에 있는 팝업만 노출합니다.
• 게시기간이 비어 있는 팝업은 기간 제한 없이 계속 노출합니다.
• 여러 팝업이 있으면 5초 간격으로 자동 이동합니다.
• 마지막 팝업 이후에는 첫 번째 팝업으로 돌아갑니다.
• 좌우 이동 버튼과 하단 불릿 이동을 지원합니다.
• 우측 상단 닫기 버튼을 추가했습니다.
• 우측 하단 오늘 하루 표시하지않기 체크 후 닫으면 로컬스토리지에 오늘 날짜를 저장합니다.
• 로컬스토리지 키는 iotdoor.mainPopup.hiddenDate입니다.
• 팝업 창은 고정 폭 기반으로 구성했고, 본문 영역만 세로 스크롤되도록 처리했습니다.
• 모바일에서는 화면 폭에 맞춰 좁혀지고 좌우 버튼은 숨기도록 적용했습니다.

검증

• npm run build:admin-js
• .\gradlew.bat test