cskim/iotdoor_boot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

팝업관리 기능 추가

Browse Source
This commit is contained in:
CSKIM
2026-06-01 16:49:09 +09:00
parent 6acb13c165
commit c9855a7196
17 changed files with 1352 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
00.word/popup-management-work.md
+52
View File
@@ -0,0 +1,52 @@
# 팝업관리 기능 작업내용
## 작업 개요
- 관리자에 `팝업관리` 메뉴를 추가했습니다.
- 배너관리와 동일한 목록, 등록, 수정, 삭제, 순서 변경 흐름으로 구성했습니다.
- 팝업 등록/수정 화면에는 기존 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`
src/main/frontend/iotdoor.js
+36 -12
View File
@@ -277,9 +277,14 @@ function syncToolbar(editor, toolbar) {
});
}
// 에디터 HTML과 대표 이미지 hidden 값을 폼 제출 전에 동기화합니다.
function syncHiddenFields(editor, hiddenInput, representativeIdInput, representativeSnInput) {
hiddenInput.value = editor.getHTML();
if (!representativeIdInput || !representativeSnInput) {
return;
}
const representative = getRepresentativeImage(editor);
representativeIdInput.value = representative?.atchFileIdntfNo || "";
representativeSnInput.value = representative?.fileSn ? String(representative.fileSn) : "";
@@ -380,6 +385,7 @@ function insertImageNodes(editor, imageNodes, insertAt) {
chain.insertContent(imageNodes).run();
}
// 이미지 업로드 후 에디터 커서 위치에 이미지 노드를 삽입합니다.
async function uploadAndInsertImages(files, editor, options, form, insertAt, editorElement) {
const imageFiles = getImageFiles(files);
@@ -392,7 +398,7 @@ async function uploadAndInsertImages(files, editor, options, form, insertAt, edi
try {
const imageNodes = [];
let shouldBeRepresentative = !getRepresentativeImage(editor);
let shouldBeRepresentative = options.requireRepresentative !== false && !getRepresentativeImage(editor);
for (const file of imageFiles) {
const payload = await uploadImage(file, options, form);
@@ -452,6 +458,7 @@ function ensureLegacyRepresentative(editor, form) {
});
}
// 툴바 버튼 클릭을 TipTap 에디터 명령으로 연결합니다.
function attachToolbarActions(editor, toolbar, fileInput) {
toolbar.addEventListener("mousedown", (event) => {
if (event.target.closest("button[data-editor-action]")) {
@@ -529,6 +536,10 @@ function attachToolbarActions(editor, toolbar, fileInput) {
}
if (action === "setRepresentative") {
if (!fileInput.dataset.requireRepresentative) {
return;
}
const selectedPosition = getSelectedImagePosition(editor);
if (selectedPosition === null) {
window.alert("대표 이미지로 지정할 이미지를 먼저 선택해주세요.");
@@ -604,18 +615,20 @@ function attachImageDropUpload(editor, editorElement, options, form) {
editorElement.addEventListener("drop", handleDrop, true);
}
// 관리자 콘텐츠 에디터를 초기화하고 폼 hidden 값과 업로드 동작을 연결합니다.
function initPortfolioEditor(options) {
const requireRepresentative = options.requireRepresentative !== false;
const form = document.querySelector(options.formSelector);
const editorElement = document.querySelector(options.editorSelector);
const toolbar = document.querySelector(options.toolbarSelector);
const hiddenInput = document.querySelector(options.hiddenInputSelector);
const fileInput = document.querySelector(options.fileInputSelector);
const representativeIdInput = document.querySelector(
options.representativeIdSelector,
);
const representativeSnInput = document.querySelector(
options.representativeSnSelector,
);
const representativeIdInput = requireRepresentative
? document.querySelector(options.representativeIdSelector)
: null;
const representativeSnInput = requireRepresentative
? document.querySelector(options.representativeSnSelector)
: null;
if (
!form ||
@@ -623,12 +636,13 @@ function initPortfolioEditor(options) {
!toolbar ||
!hiddenInput ||
!fileInput ||
!representativeIdInput ||
!representativeSnInput
(requireRepresentative && (!representativeIdInput || !representativeSnInput))
) {
return null;
}
fileInput.dataset.requireRepresentative = requireRepresentative ? "Y" : "";
const editor = new Editor({
element: editorElement,
extensions: [StarterKit, PortfolioImage],
@@ -639,7 +653,9 @@ function initPortfolioEditor(options) {
},
},
onCreate({ editor: createdEditor }) {
ensureLegacyRepresentative(createdEditor, form);
if (requireRepresentative) {
ensureLegacyRepresentative(createdEditor, form);
}
syncHiddenFields(
createdEditor,
hiddenInput,
@@ -686,7 +702,7 @@ function initPortfolioEditor(options) {
form.addEventListener("submit", (event) => {
syncHiddenFields(editor, hiddenInput, representativeIdInput, representativeSnInput);
if (!representativeIdInput.value || !representativeSnInput.value) {
if (requireRepresentative && (!representativeIdInput.value || !representativeSnInput.value)) {
event.preventDefault();
window.alert("대표 이미지로 지정할 본문 이미지를 선택해주세요.");
}
@@ -695,4 +711,12 @@ function initPortfolioEditor(options) {
return editor;
}
export { initPortfolioEditor };
// 대표 이미지 없이 본문 HTML만 저장하는 에디터를 초기화합니다.
function initContentEditor(options) {
return initPortfolioEditor({
...options,
requireRepresentative: false,
});
}
export { initPortfolioEditor, initContentEditor };
src/main/java/kr/iotdoor/boot/mapper/MainPopupMapper.java
+190
View File
@@ -0,0 +1,190 @@
package kr.iotdoor.boot.mapper;
import kr.iotdoor.boot.model.popup.MainPopup;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import java.util.List;
@Mapper
public interface MainPopupMapper {
/** 관리자 팝업 목록을 정렬 순서대로 조회합니다. */
@Select("""
SELECT
p.POPUP_IDNTF_NO,
p.TTL AS TITLE,
p.CN AS CONTENT,
p.SORT_ORDR AS SORT_ORDER,
p.USE_YN,
p.DEL_YN,
p.REG_DT AS REGISTERED_AT,
p.REG_USER_IDNTF_NO AS REGISTERED_BY_USER_IDNTF_NO,
u.USER_NM AS REGISTERED_BY_NAME,
p.UPD_DT AS UPDATED_AT
FROM TN_MAIN_POPUP p
JOIN TN_USER u ON u.USER_IDNTF_NO = p.REG_USER_IDNTF_NO
WHERE p.DEL_YN = 'N'
ORDER BY p.SORT_ORDR ASC, p.REG_DT ASC
""")
List<MainPopup> selectAdminPopups();
/** 공개 사이트에 노출할 팝업 목록을 조회합니다. */
@Select("""
SELECT
p.POPUP_IDNTF_NO,
p.TTL AS TITLE,
p.CN AS CONTENT,
p.SORT_ORDR AS SORT_ORDER,
p.USE_YN,
p.DEL_YN,
p.REG_DT AS REGISTERED_AT,
p.REG_USER_IDNTF_NO AS REGISTERED_BY_USER_IDNTF_NO,
u.USER_NM AS REGISTERED_BY_NAME,
p.UPD_DT AS UPDATED_AT
FROM TN_MAIN_POPUP p
JOIN TN_USER u ON u.USER_IDNTF_NO = p.REG_USER_IDNTF_NO
WHERE p.DEL_YN = 'N'
AND p.USE_YN = 'Y'
ORDER BY p.SORT_ORDR ASC, p.REG_DT ASC
""")
List<MainPopup> selectPublicPopups();
/** 식별번호로 팝업 단건을 조회합니다. */
@Select("""
SELECT
p.POPUP_IDNTF_NO,
p.TTL AS TITLE,
p.CN AS CONTENT,
p.SORT_ORDR AS SORT_ORDER,
p.USE_YN,
p.DEL_YN,
p.REG_DT AS REGISTERED_AT,
p.REG_USER_IDNTF_NO AS REGISTERED_BY_USER_IDNTF_NO,
u.USER_NM AS REGISTERED_BY_NAME,
p.UPD_DT AS UPDATED_AT
FROM TN_MAIN_POPUP p
JOIN TN_USER u ON u.USER_IDNTF_NO = p.REG_USER_IDNTF_NO
WHERE p.POPUP_IDNTF_NO = #{popupIdntfNo}
AND p.DEL_YN = 'N'
""")
MainPopup selectPopup(@Param("popupIdntfNo") String popupIdntfNo);
/** 현재 팝업보다 앞선 순서의 팝업을 조회합니다. */
@Select("""
SELECT
p.POPUP_IDNTF_NO,
p.TTL AS TITLE,
p.CN AS CONTENT,
p.SORT_ORDR AS SORT_ORDER,
p.USE_YN,
p.DEL_YN,
p.REG_DT AS REGISTERED_AT,
p.REG_USER_IDNTF_NO AS REGISTERED_BY_USER_IDNTF_NO,
u.USER_NM AS REGISTERED_BY_NAME,
p.UPD_DT AS UPDATED_AT
FROM TN_MAIN_POPUP p
JOIN TN_USER u ON u.USER_IDNTF_NO = p.REG_USER_IDNTF_NO
WHERE p.DEL_YN = 'N'
AND p.SORT_ORDR < #{sortOrder}
ORDER BY p.SORT_ORDR DESC, p.REG_DT DESC
LIMIT 1
""")
MainPopup selectPreviousPopup(@Param("sortOrder") int sortOrder);
/** 현재 팝업보다 뒤선 순서의 팝업을 조회합니다. */
@Select("""
SELECT
p.POPUP_IDNTF_NO,
p.TTL AS TITLE,
p.CN AS CONTENT,
p.SORT_ORDR AS SORT_ORDER,
p.USE_YN,
p.DEL_YN,
p.REG_DT AS REGISTERED_AT,
p.REG_USER_IDNTF_NO AS REGISTERED_BY_USER_IDNTF_NO,
u.USER_NM AS REGISTERED_BY_NAME,
p.UPD_DT AS UPDATED_AT
FROM TN_MAIN_POPUP p
JOIN TN_USER u ON u.USER_IDNTF_NO = p.REG_USER_IDNTF_NO
WHERE p.DEL_YN = 'N'
AND p.SORT_ORDR > #{sortOrder}
ORDER BY p.SORT_ORDR ASC, p.REG_DT ASC
LIMIT 1
""")
MainPopup selectNextPopup(@Param("sortOrder") int sortOrder);
/** 등록된 팝업의 최대 정렬 순서를 조회합니다. */
@Select("""
SELECT COALESCE(MAX(SORT_ORDR), 0)
FROM TN_MAIN_POPUP
WHERE DEL_YN = 'N'
""")
int selectMaxSortOrder();
/** 신규 팝업을 등록합니다. */
@Insert("""
INSERT INTO TN_MAIN_POPUP (
POPUP_IDNTF_NO,
TTL,
CN,
SORT_ORDR,
USE_YN,
DEL_YN,
REG_DT,
REG_USER_IDNTF_NO,
UPD_DT
) VALUES (
#{popupIdntfNo},
#{title},
#{content},
#{sortOrder},
#{useYn},
'N',
CURRENT_TIMESTAMP,
#{registeredByUserIdntfNo},
NULL
)
""")
int insertPopup(MainPopup mainPopup);
/** 기존 팝업의 제목, 내용, 노출 여부를 수정합니다. */
@Update("""
UPDATE TN_MAIN_POPUP
SET
TTL = #{title},
CN = #{content},
USE_YN = #{useYn},
UPD_DT = CURRENT_TIMESTAMP
WHERE POPUP_IDNTF_NO = #{popupIdntfNo}
AND DEL_YN = 'N'
""")
int updatePopup(MainPopup mainPopup);
/** 팝업 정렬 순서를 수정합니다. */
@Update("""
UPDATE TN_MAIN_POPUP
SET
SORT_ORDR = #{sortOrder},
UPD_DT = CURRENT_TIMESTAMP
WHERE POPUP_IDNTF_NO = #{popupIdntfNo}
AND DEL_YN = 'N'
""")
int updateSortOrder(
@Param("popupIdntfNo") String popupIdntfNo,
@Param("sortOrder") int sortOrder
);
/** 팝업을 논리 삭제합니다. */
@Update("""
UPDATE TN_MAIN_POPUP
SET
DEL_YN = 'Y',
UPD_DT = CURRENT_TIMESTAMP
WHERE POPUP_IDNTF_NO = #{popupIdntfNo}
""")
int deletePopup(@Param("popupIdntfNo") String popupIdntfNo);
}
src/main/java/kr/iotdoor/boot/model/popup/MainPopup.java
+117
View File
@@ -0,0 +1,117 @@
package kr.iotdoor.boot.model.popup;
import java.time.LocalDateTime;
public class MainPopup {
private String popupIdntfNo;
private String title;
private String content;
private int sortOrder;
private String useYn;
private String delYn;
private LocalDateTime registeredAt;
private String registeredByUserIdntfNo;
private String registeredByName;
private LocalDateTime updatedAt;
/** 팝업 식별번호를 반환합니다. */
public String getPopupIdntfNo() {
return popupIdntfNo;
}
/** 팝업 식별번호를 설정합니다. */
public void setPopupIdntfNo(String popupIdntfNo) {
this.popupIdntfNo = popupIdntfNo;
}
/** 팝업 제목을 반환합니다. */
public String getTitle() {
return title;
}
/** 팝업 제목을 설정합니다. */
public void setTitle(String title) {
this.title = title;
}
/** 팝업 본문 HTML을 반환합니다. */
public String getContent() {
return content;
}
/** 팝업 본문 HTML을 설정합니다. */
public void setContent(String content) {
this.content = content;
}
/** 팝업 정렬 순서를 반환합니다. */
public int getSortOrder() {
return sortOrder;
}
/** 팝업 정렬 순서를 설정합니다. */
public void setSortOrder(int sortOrder) {
this.sortOrder = sortOrder;
}
/** 노출 여부를 반환합니다. */
public String getUseYn() {
return useYn;
}
/** 노출 여부를 설정합니다. */
public void setUseYn(String useYn) {
this.useYn = useYn;
}
/** 삭제 여부를 반환합니다. */
public String getDelYn() {
return delYn;
}
/** 삭제 여부를 설정합니다. */
public void setDelYn(String delYn) {
this.delYn = delYn;
}
/** 등록 일시를 반환합니다. */
public LocalDateTime getRegisteredAt() {
return registeredAt;
}
/** 등록 일시를 설정합니다. */
public void setRegisteredAt(LocalDateTime registeredAt) {
this.registeredAt = registeredAt;
}
/** 작성자 식별번호를 반환합니다. */
public String getRegisteredByUserIdntfNo() {
return registeredByUserIdntfNo;
}
/** 작성자 식별번호를 설정합니다. */
public void setRegisteredByUserIdntfNo(String registeredByUserIdntfNo) {
this.registeredByUserIdntfNo = registeredByUserIdntfNo;
}
/** 작성자 이름을 반환합니다. */
public String getRegisteredByName() {
return registeredByName;
}
/** 작성자 이름을 설정합니다. */
public void setRegisteredByName(String registeredByName) {
this.registeredByName = registeredByName;
}
/** 수정 일시를 반환합니다. */
public LocalDateTime getUpdatedAt() {
return updatedAt;
}
/** 수정 일시를 설정합니다. */
public void setUpdatedAt(LocalDateTime updatedAt) {
this.updatedAt = updatedAt;
}
}
src/main/java/kr/iotdoor/boot/model/popup/MainPopupForm.java
+58
View File
@@ -0,0 +1,58 @@
package kr.iotdoor.boot.model.popup;
import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.Size;
public class MainPopupForm {
private String popupIdntfNo;
@NotBlank(message = "제목을 입력해주세요.")
@Size(max = 200, message = "제목은 200자 이하로 입력해주세요.")
private String title;
@NotBlank(message = "내용을 입력해주세요.")
private String content;
private String useYn = "Y";
/** 팝업 식별번호를 반환합니다. */
public String getPopupIdntfNo() {
return popupIdntfNo;
}
/** 팝업 식별번호를 설정합니다. */
public void setPopupIdntfNo(String popupIdntfNo) {
this.popupIdntfNo = popupIdntfNo;
}
/** 제목을 반환합니다. */
public String getTitle() {
return title;
}
/** 제목을 설정합니다. */
public void setTitle(String title) {
this.title = title;
}
/** 본문 HTML을 반환합니다. */
public String getContent() {
return content;
}
/** 본문 HTML을 설정합니다. */
public void setContent(String content) {
this.content = content;
}
/** 노출 여부를 반환합니다. */
public String getUseYn() {
return useYn;
}
/** 노출 여부를 설정합니다. */
public void setUseYn(String useYn) {
this.useYn = useYn;
}
}
src/main/java/kr/iotdoor/boot/service/MainPopupService.java
+121
View File
@@ -0,0 +1,121 @@
package kr.iotdoor.boot.service;
import kr.iotdoor.boot.mapper.MainPopupMapper;
import kr.iotdoor.boot.model.popup.MainPopup;
import kr.iotdoor.boot.model.popup.MainPopupForm;
import kr.iotdoor.boot.model.user.AdminUserPrincipal;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.StringUtils;
import java.util.List;
import java.util.UUID;
@Service
public class MainPopupService {
private final MainPopupMapper mainPopupMapper;
public MainPopupService(MainPopupMapper mainPopupMapper) {
this.mainPopupMapper = mainPopupMapper;
}
/** 공개 사이트에 노출할 팝업 목록을 반환합니다. */
@Transactional(readOnly = true)
public List<MainPopup> getPublicPopups() {
return mainPopupMapper.selectPublicPopups();
}
/** 관리자 팝업 목록을 반환합니다. */
@Transactional(readOnly = true)
public List<MainPopup> getAdminPopups() {
return mainPopupMapper.selectAdminPopups();
}
/** 등록 또는 수정 화면에 사용할 폼 값을 반환합니다. */
@Transactional(readOnly = true)
public MainPopupForm getForm(String popupIdntfNo) {
MainPopupForm form = new MainPopupForm();
form.setUseYn("Y");
if (!StringUtils.hasText(popupIdntfNo)) {
return form;
}
MainPopup popup = mainPopupMapper.selectPopup(popupIdntfNo);
if (popup == null) {
return form;
}
form.setPopupIdntfNo(popup.getPopupIdntfNo());
form.setTitle(popup.getTitle());
form.setContent(popup.getContent());
form.setUseYn("Y".equals(popup.getUseYn()) ? "Y" : "N");
return form;
}
/** 팝업 등록 또는 수정을 저장합니다. */
@Transactional
public String save(MainPopupForm form, AdminUserPrincipal principal) {
if (StringUtils.hasText(form.getPopupIdntfNo())) {
MainPopup existing = mainPopupMapper.selectPopup(form.getPopupIdntfNo());
if (existing == null) {
throw new IllegalArgumentException("수정할 팝업을 찾을 수 없습니다.");
}
MainPopup popup = toPopup(form);
popup.setPopupIdntfNo(existing.getPopupIdntfNo());
popup.setSortOrder(existing.getSortOrder());
popup.setRegisteredByUserIdntfNo(existing.getRegisteredByUserIdntfNo());
mainPopupMapper.updatePopup(popup);
return existing.getPopupIdntfNo();
}
MainPopup popup = toPopup(form);
popup.setPopupIdntfNo(newIdentifier());
popup.setSortOrder(mainPopupMapper.selectMaxSortOrder() + 10);
popup.setRegisteredByUserIdntfNo(principal.getUserIdntfNo());
mainPopupMapper.insertPopup(popup);
return popup.getPopupIdntfNo();
}
/** 팝업을 삭제 처리합니다. */
@Transactional
public void delete(String popupIdntfNo) {
mainPopupMapper.deletePopup(popupIdntfNo);
}
/** 팝업 노출 순서를 위 또는 아래로 이동합니다. */
@Transactional
public void move(String popupIdntfNo, String direction) {
MainPopup current = mainPopupMapper.selectPopup(popupIdntfNo);
if (current == null) {
return;
}
MainPopup target = "up".equals(direction)
? mainPopupMapper.selectPreviousPopup(current.getSortOrder())
: mainPopupMapper.selectNextPopup(current.getSortOrder());
if (target == null) {
return;
}
mainPopupMapper.updateSortOrder(current.getPopupIdntfNo(), target.getSortOrder());
mainPopupMapper.updateSortOrder(target.getPopupIdntfNo(), current.getSortOrder());
}
/** 폼 값을 DB 저장 모델로 변환합니다. */
private MainPopup toPopup(MainPopupForm form) {
MainPopup popup = new MainPopup();
popup.setTitle(form.getTitle().trim());
popup.setContent(form.getContent().trim());
popup.setUseYn("Y".equals(form.getUseYn()) ? "Y" : "N");
return popup;
}
/** 하이픈 없는 UUID 식별번호를 생성합니다. */
private String newIdentifier() {
return UUID.randomUUID().toString().replace("-", "");
}
}
src/main/java/kr/iotdoor/boot/web/AdminMainPopupController.java
+97
View File
@@ -0,0 +1,97 @@
package kr.iotdoor.boot.web;
import jakarta.validation.Valid;
import kr.iotdoor.boot.model.popup.MainPopupForm;
import kr.iotdoor.boot.model.user.AdminUserPrincipal;
import kr.iotdoor.boot.service.MainPopupService;
import org.springframework.security.core.Authentication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.StringUtils;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class AdminMainPopupController {
private final MainPopupService mainPopupService;
public AdminMainPopupController(MainPopupService mainPopupService) {
this.mainPopupService = mainPopupService;
}
/** 팝업관리 목록 화면을 표시합니다. */
@GetMapping("/mfuc/popup/list.do")
public String popupList(Model model) {
model.addAttribute("popups", mainPopupService.getAdminPopups());
model.addAttribute("adminMenu", "popup");
model.addAttribute("pageTitle", "팝업 관리");
model.addAttribute("pageDescription", "메인 진입 시 노출할 팝업의 내용, 노출 여부, 순서를 관리합니다.");
return "kr/iotdoor/boot/admin/popup/list";
}
/** 팝업 등록 또는 수정 화면을 표시합니다. */
@GetMapping("/mfuc/popup/form.do")
public String popupForm(
@RequestParam(name = "popupIdntfNo", required = false) String popupIdntfNo,
Model model
) {
MainPopupForm form = mainPopupService.getForm(popupIdntfNo);
model.addAttribute("form", form);
applyFormPage(model, form);
return "kr/iotdoor/boot/admin/popup/form";
}
/** 팝업 등록 또는 수정 요청을 저장합니다. */
@PostMapping("/mfuc/popup/save.do")
public String savePopup(
@Valid @ModelAttribute("form") MainPopupForm form,
BindingResult bindingResult,
@RequestParam(name = "useYn", required = false) String useYn,
Authentication authentication,
Model model
) {
form.setUseYn("Y".equals(useYn) ? "Y" : "N");
if (bindingResult.hasErrors()) {
applyFormPage(model, form);
return "kr/iotdoor/boot/admin/popup/form";
}
try {
mainPopupService.save(form, (AdminUserPrincipal) authentication.getPrincipal());
return "redirect:/mfuc/popup/list.do?saved=1";
} catch (IllegalArgumentException exception) {
bindingResult.reject("saveError", exception.getMessage());
applyFormPage(model, form);
return "kr/iotdoor/boot/admin/popup/form";
}
}
/** 팝업 삭제 요청을 처리합니다. */
@PostMapping("/mfuc/popup/delete.do")
public String deletePopup(@RequestParam("popupIdntfNo") String popupIdntfNo) {
mainPopupService.delete(popupIdntfNo);
return "redirect:/mfuc/popup/list.do?deleted=1";
}
/** 팝업 정렬 순서 변경 요청을 처리합니다. */
@PostMapping("/mfuc/popup/move.do")
public String movePopup(
@RequestParam("popupIdntfNo") String popupIdntfNo,
@RequestParam("direction") String direction
) {
mainPopupService.move(popupIdntfNo, direction);
return "redirect:/mfuc/popup/list.do?ordered=1";
}
/** 폼 화면에 공통 페이지 속성을 추가합니다. */
private void applyFormPage(Model model, MainPopupForm form) {
model.addAttribute("adminMenu", "popup");
model.addAttribute("pageTitle", StringUtils.hasText(form.getPopupIdntfNo()) ? "팝업 수정" : "팝업 등록");
model.addAttribute("pageDescription", "메인 진입 시 모달로 노출할 팝업 내용을 작성합니다.");
}
}
src/main/java/kr/iotdoor/boot/web/PublicPageController.java
+5 -1
View File
@@ -2,6 +2,7 @@ package kr.iotdoor.boot.web;
import kr.iotdoor.boot.service.PortfolioService;
import kr.iotdoor.boot.service.MainBannerService;
import kr.iotdoor.boot.service.MainPopupService;
import java.time.LocalDateTime;
import java.util.List;
import org.springframework.stereotype.Controller;
@@ -13,10 +14,12 @@ import org.springframework.web.bind.annotation.ResponseBody;
public class PublicPageController {
private final MainBannerService mainBannerService;
private final MainPopupService mainPopupService;
private final PortfolioService portfolioService;
public PublicPageController(MainBannerService mainBannerService, PortfolioService portfolioService) {
public PublicPageController(MainBannerService mainBannerService, MainPopupService mainPopupService, PortfolioService portfolioService) {
this.mainBannerService = mainBannerService;
this.mainPopupService = mainPopupService;
this.portfolioService = portfolioService;
}
@@ -28,6 +31,7 @@ public class PublicPageController {
model.addAttribute("pageOgDescription", "대전·세종 자동문 설치와 자동문 수리, 산업용자동문, 슬라이딩자동문, 내풍압셔터, 오버헤드도어, 고속셔터 시공 및 유지보수 전문업체입니다.");
model.addAttribute("canonicalUrl", "https://iotdoor.kr/");
model.addAttribute("mainBanners", mainBannerService.getPublicBanners());
model.addAttribute("mainPopups", mainPopupService.getPublicPopups());
return "kr/iotdoor/comn/site/mainPge";
}
src/main/resources/application.yml
+1 -1
View File
@@ -76,7 +76,7 @@ iotdoor:
map-client-id: ${IOTDOOR_NAVER_MAP_CLIENT_ID:xkb35c3i3k}
security:
admin-username: ${IOTDOOR_ADMIN_USERNAME:admin}
admin-password: ${IOTDOOR_ADMIN_PASSWORD:qlrxhfl1}
admin-password: ${IOTDOOR_ADMIN_PASSWORD:epdlxkdldma}
admin-display-name: ${IOTDOOR_ADMIN_DISPLAY_NAME:관리자}
file:
upload-path: ${IOTDOOR_FILE_UPLOAD_PATH:./uploads}
src/main/resources/schema.sql
+17
View File
@@ -97,6 +97,21 @@ CREATE TABLE IF NOT EXISTS TN_MAIN_BANNER (
REFERENCES TN_ATCH_FILE (ATCH_FILE_IDNTF_NO)
);
CREATE TABLE IF NOT EXISTS TN_MAIN_POPUP (
POPUP_IDNTF_NO VARCHAR(32) NOT NULL,
TTL VARCHAR(200) NOT NULL,
CN TEXT NOT NULL,
SORT_ORDR INT NOT NULL DEFAULT 0,
USE_YN CHAR(1) NOT NULL DEFAULT 'Y',
DEL_YN CHAR(1) NOT NULL DEFAULT 'N',
REG_DT DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
REG_USER_IDNTF_NO VARCHAR(32) NOT NULL,
UPD_DT DATETIME NULL,
PRIMARY KEY (POPUP_IDNTF_NO),
CONSTRAINT FK_TN_MAIN_POPUP__USER FOREIGN KEY (REG_USER_IDNTF_NO)
REFERENCES TN_USER (USER_IDNTF_NO)
);
CREATE INDEX IF NOT EXISTS IDX_TN_ATCH_FILE_DTL__PATH ON TN_ATCH_FILE_DTL (FILE_STRG_PATH_NM);
CREATE INDEX IF NOT EXISTS IDX_TN_PORTFOLIO__REG_DT ON TN_PORTFOLIO (REG_DT);
CREATE INDEX IF NOT EXISTS IDX_TN_CONTACT_INQRY__SUBMIT_DT ON TN_CONTACT_INQRY (SUBMIT_DT);
@@ -106,6 +121,8 @@ CREATE INDEX IF NOT EXISTS IDX_TN_ACCESS_LOG__SESSION_ID ON TN_ACCESS_LOG (SESSI
CREATE INDEX IF NOT EXISTS IDX_TN_ACCESS_LOG__REQUEST_URI ON TN_ACCESS_LOG (REQUEST_URI);
CREATE INDEX IF NOT EXISTS IDX_TN_MAIN_BANNER__SORT ON TN_MAIN_BANNER (SORT_ORDR);
CREATE INDEX IF NOT EXISTS IDX_TN_MAIN_BANNER__USE_DEL ON TN_MAIN_BANNER (USE_YN, DEL_YN);
CREATE INDEX IF NOT EXISTS IDX_TN_MAIN_POPUP__SORT ON TN_MAIN_POPUP (SORT_ORDR);
CREATE INDEX IF NOT EXISTS IDX_TN_MAIN_POPUP__USE_DEL ON TN_MAIN_POPUP (USE_YN, DEL_YN);
INSERT INTO TN_MAIN_BANNER (
BANNER_IDNTF_NO, TTL, CN, IMAGE_URL, SORT_ORDR, USE_YN, DEL_YN, REG_DT
src/main/resources/static/resources/kr/iotdoor/boot/admin/css/admin-custom.css
+16
View File
@@ -250,10 +250,26 @@ body {
min-width: 980px;
}
.iotdoor-popup-table {
width: 100%;
min-width: 1080px;
}
.iotdoor-banner-list-content {
max-width: 520px;
}
.iotdoor-popup-list-content {
max-width: 600px;
max-height: 110px;
overflow: hidden;
}
.iotdoor-popup-list-content img {
max-width: 140px;
height: auto;
}
.iotdoor-banner-form-grid {
display: grid;
gap: 1.5rem;
src/main/resources/static/resources/kr/iotdoor/boot/admin/js/iotdoor.js
+29 -29
View File
File diff suppressed because one or more lines are too long
src/main/resources/templates/kr/iotdoor/boot/admin/layout/adminLayout.html
+15
View File
@@ -81,6 +81,21 @@
<span class="menu-item-text">배너관리</span>
</a>
</li>
<li>
<a class="menu-item group"
th:classappend="${adminMenu == 'popup'} ? ' menu-item-active' : ' menu-item-inactive'"
th:href="@{/mfuc/popup/list.do}">
<span class="menu-item-icon-size"
th:classappend="${adminMenu == 'popup'} ? ' menu-item-icon-active' : ' menu-item-icon-inactive'">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 6.6h12A1.8 1.8 0 0 1 19.8 8.4v7.2A1.8 1.8 0 0 1 18 17.4H6A1.8 1.8 0 0 1 4.2 15.6V8.4A1.8 1.8 0 0 1 6 6.6Z" stroke="currentColor" stroke-width="1.5"/>
<path d="M8.4 10.2h7.2M8.4 13.2h4.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M8.4 19.8h7.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</span>
<span class="menu-item-text">팝업관리</span>
</a>
</li>
<li>
<a class="menu-item group"
th:classappend="${adminMenu == 'contact'} ? ' menu-item-active' : ' menu-item-inactive'"
src/main/resources/templates/kr/iotdoor/boot/admin/popup/form.html
+125
View File
@@ -0,0 +1,125 @@
<!doctype html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{kr/iotdoor/boot/admin/layout/adminLayout}">
<body>
<div layout:fragment="content" class="space-y-6">
<div class="flex flex-wrap items-center justify-between gap-3">
<div>
<h2 class="text-xl font-semibold text-gray-800"
th:text="${form.popupIdntfNo != null and !#strings.isEmpty(form.popupIdntfNo) ? '팝업 수정' : '팝업 등록'}">팝업 등록</h2>
<p class="mt-1 text-sm text-gray-500">메인 진입 시 모달로 노출할 제목과 내용을 입력합니다.</p>
</div>
<a class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
th:href="@{/mfuc/popup/list.do}">
목록으로
</a>
</div>
<section class="rounded-2xl border border-gray-200 bg-white">
<div class="border-b border-gray-100 px-6 py-5">
<h3 class="text-base font-medium text-gray-800">팝업 정보</h3>
</div>
<div class="p-4 sm:p-6">
<form id="mainPopupForm"
method="post"
th:action="@{/mfuc/popup/save.do}"
th:object="${form}"
th:attr="data-csrf-header=${_csrf.headerName},
data-csrf-token=${_csrf.token}">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
<input type="hidden" th:field="*{popupIdntfNo}">
<textarea hidden th:field="*{content}" id="content"></textarea>
<div class="space-y-6">
<div>
<label class="mb-2 block text-sm font-medium text-gray-700" for="title">제목</label>
<input class="h-11 w-full rounded-lg border border-gray-300 bg-white px-4 text-sm text-gray-800 outline-none transition focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10"
id="title"
th:field="*{title}"
placeholder="팝업 제목을 입력해주세요.">
<div class="mt-2 text-sm text-error-600" th:if="${#fields.hasErrors('title')}" th:errors="*{title}">제목 오류</div>
</div>
<div>
<div class="mb-3 flex flex-wrap items-center justify-between gap-3">
<div>
<label class="block text-sm font-medium text-gray-700">본문 에디터</label>
<p class="mt-1 text-sm text-gray-500">이미지와 텍스트를 함께 작성할 수 있으며, 작성 내용은 메인 팝업에 그대로 표시됩니다.</p>
</div>
</div>
<div id="popupToolbar" class="iotdoor-editor-toolbar">
<button type="button" data-editor-action="paragraph">본문</button>
<button type="button" data-editor-action="heading" data-level="1">H1</button>
<button type="button" data-editor-action="heading" data-level="2">H2</button>
<button type="button" data-editor-action="heading" data-level="3">H3</button>
<button type="button" data-editor-action="bold">굵게</button>
<button type="button" data-editor-action="italic">기울임</button>
<button type="button" data-editor-action="strike">취소선</button>
<button type="button" data-editor-action="bulletList">목록</button>
<button type="button" data-editor-action="orderedList">번호</button>
<button type="button" data-editor-action="blockquote">인용</button>
<button type="button" data-editor-action="horizontalRule">구분선</button>
<button type="button" data-editor-action="undo">되돌리기</button>
<button type="button" data-editor-action="redo">다시하기</button>
<button type="button" data-editor-action="imageUpload">이미지 업로드</button>
</div>
<div id="popupEditor" class="iotdoor-editor-surface"></div>
<input id="popupImageFile" type="file" accept="image/*" hidden>
<div class="mt-2 text-sm text-error-600" th:if="${#fields.hasErrors('content')}" th:errors="*{content}">내용 오류</div>
<div class="mt-2 text-sm text-error-600" th:if="${#fields.hasGlobalErrors()}">
<span th:each="error : ${#fields.globalErrors()}" th:text="${error}">오류 메시지</span>
</div>
</div>
<div>
<label class="inline-flex items-center gap-3 text-sm font-medium text-gray-700">
<input class="size-5 rounded border-gray-300 text-brand-500"
type="checkbox"
th:field="*{useYn}"
value="Y">
메인에 노출
</label>
</div>
<div class="flex flex-wrap gap-3">
<button class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600"
type="submit">
저장
</button>
<a class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
th:href="@{/mfuc/popup/list.do}">
취소
</a>
</div>
</div>
</form>
</div>
</section>
</div>
<th:block layout:fragment="pageScripts">
<script>
document.addEventListener('DOMContentLoaded', function () {
if (!window.IotdoorAdmin) {
return;
}
window.IotdoorAdmin.initContentEditor({
formSelector: '#mainPopupForm',
editorSelector: '#popupEditor',
toolbarSelector: '#popupToolbar',
hiddenInputSelector: '#content',
fileInputSelector: '#popupImageFile',
uploadUrl: '/mfuc/file/upload.do',
uploadDirectory: 'popup/editor',
uploadDescription: 'popup-editor-image'
});
});
</script>
</th:block>
</body>
</html>
src/main/resources/templates/kr/iotdoor/boot/admin/popup/list.html
+114
View File
@@ -0,0 +1,114 @@
<!doctype html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{kr/iotdoor/boot/admin/layout/adminLayout}">
<body>
<div layout:fragment="content" class="space-y-6">
<div class="flex flex-wrap items-center justify-between gap-3">
<div>
<h2 class="text-xl font-semibold text-gray-800">팝업관리</h2>
<p class="mt-1 text-sm text-gray-500">메인 진입 팝업의 노출 순서와 내용을 관리합니다.</p>
</div>
<a class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600"
th:href="@{/mfuc/popup/form.do}">
새 팝업 등록
</a>
</div>
<div class="rounded-xl border border-success-100 bg-success-50 px-4 py-3 text-sm text-success-700" th:if="${param.saved}">
팝업이 저장되었습니다.
</div>
<div class="rounded-xl border border-success-100 bg-success-50 px-4 py-3 text-sm text-success-700" th:if="${param.deleted}">
팝업이 삭제되었습니다.
</div>
<div class="rounded-xl border border-success-100 bg-success-50 px-4 py-3 text-sm text-success-700" th:if="${param.ordered}">
팝업 순서가 변경되었습니다.
</div>
<section class="rounded-2xl border border-gray-200 bg-white">
<div class="border-b border-gray-100 px-6 py-5">
<h3 class="text-base font-medium text-gray-800">등록 목록</h3>
<p class="mt-1 text-sm text-gray-500">위/아래 버튼으로 메인 팝업 캐러셀 노출 순서를 변경할 수 있습니다.</p>
</div>
<div class="p-4 sm:p-6">
<div th:if="${#lists.isEmpty(popups)}" class="rounded-xl bg-gray-50 px-4 py-6 text-sm text-gray-500">
아직 등록된 팝업이 없습니다.
</div>
<div th:unless="${#lists.isEmpty(popups)}" class="overflow-x-auto">
<table class="iotdoor-popup-table text-sm">
<thead>
<tr class="border-b border-gray-100 text-left text-gray-500">
<th class="px-3 py-3">순서</th>
<th class="px-3 py-3">제목/내용</th>
<th class="px-3 py-3">작성자</th>
<th class="px-3 py-3">작성일시</th>
<th class="px-3 py-3">노출</th>
<th class="px-3 py-3">관리</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100 align-top last:border-0"
th:each="popup, stat : ${popups}">
<td class="px-3 py-4" style="width: 92px;">
<div class="flex flex-col gap-2">
<form method="post" th:action="@{/mfuc/popup/move.do}">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
<input type="hidden" name="popupIdntfNo" th:value="${popup.popupIdntfNo}">
<input type="hidden" name="direction" value="up">
<button class="inline-flex w-full items-center justify-center rounded-lg border border-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40"
type="submit"
th:disabled="${stat.first}">
위
</button>
</form>
<form method="post" th:action="@{/mfuc/popup/move.do}">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
<input type="hidden" name="popupIdntfNo" th:value="${popup.popupIdntfNo}">
<input type="hidden" name="direction" value="down">
<button class="inline-flex w-full items-center justify-center rounded-lg border border-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40"
type="submit"
th:disabled="${stat.last}">
아래
</button>
</form>
</div>
</td>
<td class="px-3 py-4">
<div class="font-semibold text-gray-900" th:text="${popup.title}">팝업 제목</div>
<div class="iotdoor-popup-list-content mt-2 text-sm leading-6 text-gray-500" th:utext="${popup.content}">팝업 내용</div>
</td>
<td class="whitespace-nowrap px-3 py-4 text-gray-500" th:text="${popup.registeredByName}">관리자</td>
<td class="whitespace-nowrap px-3 py-4 text-gray-500"
th:text="${#temporals.format(popup.registeredAt, 'yyyy-MM-dd HH:mm')}">2026-04-21 09:00</td>
<td class="px-3 py-4">
<span class="inline-flex rounded-full px-3 py-1 text-xs font-medium"
th:classappend="${popup.useYn == 'Y'} ? ' bg-success-50 text-success-700' : ' bg-gray-100 text-gray-500'"
th:text="${popup.useYn == 'Y'} ? '노출' : '미노출'">노출</span>
</td>
<td class="px-3 py-4">
<div class="flex flex-col gap-2">
<a class="inline-flex items-center justify-center rounded-lg border border-brand-200 px-3 py-2 text-sm font-medium text-brand-600 hover:bg-brand-25"
th:href="@{/mfuc/popup/form.do(popupIdntfNo=${popup.popupIdntfNo})}">
수정
</a>
<form method="post" th:action="@{/mfuc/popup/delete.do}">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
<input type="hidden" name="popupIdntfNo" th:value="${popup.popupIdntfNo}">
<button class="inline-flex w-full items-center justify-center rounded-lg border border-error-200 px-3 py-2 text-sm font-medium text-error-600 hover:bg-error-25"
type="submit"
onclick="return confirm('해당 팝업을 삭제하시겠습니까?');">
삭제
</button>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
</body>
</html>
src/main/resources/templates/kr/iotdoor/comn/site/mainPge.html
+358
View File
@@ -5,8 +5,225 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{kr/iotdoor/comn/site/layout/cmmnSiteLayout.html}" >
<th:block layout:fragment="pageStyles">
<style>
.iotdoor-popup-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.55);
}
.iotdoor-popup-modal.is-open {
display: flex;
}
.iotdoor-popup-dialog {
width: min(760px, 92vw);
max-height: 78vh;
overflow: hidden;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3);
}
.iotdoor-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
border-bottom: 1px solid #e5e7eb;
}
.iotdoor-popup-title {
margin: 0;
color: #111827;
font-size: 22px;
font-weight: 700;
line-height: 1.35;
}
.iotdoor-popup-close {
flex: 0 0 auto;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: #f3f4f6;
color: #111827;
font-size: 24px;
line-height: 1;
}
.iotdoor-popup-body {
position: relative;
max-height: calc(78vh - 150px);
overflow-y: auto;
}
.iotdoor-popup-track {
display: flex;
transition: transform 0.35s ease;
}
.iotdoor-popup-slide {
flex: 0 0 100%;
padding: 26px 30px;
color: #374151;
line-height: 1.75;
}
.iotdoor-popup-slide img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
.iotdoor-popup-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: rgba(17, 24, 39, 0.72);
color: #ffffff;
font-size: 22px;
line-height: 1;
}
.iotdoor-popup-nav-prev {
left: 12px;
}
.iotdoor-popup-nav-next {
right: 12px;
}
.iotdoor-popup-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
padding: 16px 24px 20px;
border-top: 1px solid #e5e7eb;
}
.iotdoor-popup-bullets {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
padding: 0 24px 18px;
}
.iotdoor-popup-bullet {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
background: #cbd5e1;
}
.iotdoor-popup-bullet.is-active {
background: #1f5aa0;
}
.iotdoor-popup-hide-today {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
color: #4b5563;
font-size: 14px;
white-space: nowrap;
}
@media (max-width: 575.98px) {
.iotdoor-popup-modal {
align-items: flex-start;
padding: 16px 12px;
}
.iotdoor-popup-dialog {
width: 100%;
max-height: 84vh;
border-radius: 14px;
}
.iotdoor-popup-header {
padding: 16px 18px;
}
.iotdoor-popup-title {
font-size: 18px;
}
.iotdoor-popup-body {
max-height: calc(84vh - 142px);
}
.iotdoor-popup-slide {
padding: 22px 18px;
}
.iotdoor-popup-nav {
display: none;
}
.iotdoor-popup-footer {
justify-content: flex-start;
padding: 14px 18px 18px;
}
.iotdoor-popup-bullets {
padding: 0 18px 14px;
}
}
</style>
</th:block>
<th:block layout:fragment="content">
<div id="mainPopupModal"
class="iotdoor-popup-modal"
role="dialog"
aria-modal="true"
aria-labelledby="mainPopupTitle"
th:if="${!#lists.isEmpty(mainPopups)}">
<div class="iotdoor-popup-dialog">
<div class="iotdoor-popup-header">
<h2 id="mainPopupTitle" class="iotdoor-popup-title">알림</h2>
<button id="mainPopupClose" class="iotdoor-popup-close" type="button" aria-label="팝업 닫기">×</button>
</div>
<div class="iotdoor-popup-body">
<div id="mainPopupTrack" class="iotdoor-popup-track">
<article class="iotdoor-popup-slide"
th:each="popup : ${mainPopups}"
th:attr="data-title=${popup.title}">
<div th:utext="${popup.content}">팝업 내용</div>
</article>
</div>
<button id="mainPopupPrev" class="iotdoor-popup-nav iotdoor-popup-nav-prev" type="button" aria-label="이전 팝업">‹</button>
<button id="mainPopupNext" class="iotdoor-popup-nav iotdoor-popup-nav-next" type="button" aria-label="다음 팝업">›</button>
</div>
<div id="mainPopupBullets" class="iotdoor-popup-bullets" aria-label="팝업 목록"></div>
<div class="iotdoor-popup-footer">
<label class="iotdoor-popup-hide-today">
<input id="mainPopupHideToday" type="checkbox">
오늘 하루 표시하지않기
</label>
</div>
</div>
</div>
<!-- About Start -->
<div class="container-fluid bg-light overflow-hidden my-5 px-lg-0">
<div class="container about px-lg-0">
@@ -313,6 +530,147 @@
initMap();
});
</script>
<script th:if="${!#lists.isEmpty(mainPopups)}">
// 메인 팝업 캐러셀 전체 초기화를 캡슐화합니다.
(function () {
const storageKey = 'iotdoor.mainPopup.hiddenDate';
const intervalMs = 5000;
let activeIndex = 0;
let timerId = null;
// 오늘 날짜를 로컬스토리지 비교용 문자열로 반환합니다.
function getTodayKey() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
return year + '-' + month + '-' + day;
}
// 오늘 하루 숨김 설정 여부를 확인합니다.
function isHiddenToday() {
return localStorage.getItem(storageKey) === getTodayKey();
}
// 오늘 하루 숨김 값을 저장합니다.
function saveHiddenToday() {
localStorage.setItem(storageKey, getTodayKey());
}
// 지정한 인덱스로 팝업 슬라이드를 이동합니다.
function goToSlide(index, state) {
activeIndex = (index + state.slides.length) % state.slides.length;
state.track.style.transform = 'translateX(-' + (activeIndex * 100) + '%)';
state.title.textContent = state.slides[activeIndex].dataset.title || '알림';
state.bullets.forEach(function (bullet, bulletIndex) {
bullet.classList.toggle('is-active', bulletIndex === activeIndex);
bullet.setAttribute('aria-current', bulletIndex === activeIndex ? 'true' : 'false');
});
}
// 자동 넘김 타이머를 다시 시작합니다.
function restartTimer(state) {
if (timerId) {
window.clearInterval(timerId);
}
if (state.slides.length <= 1) {
return;
}
timerId = window.setInterval(function () {
goToSlide(activeIndex + 1, state);
}, intervalMs);
}
// 사용자가 선택한 슬라이드로 이동하고 자동 넘김 시간을 초기화합니다.
function moveTo(index, state) {
goToSlide(index, state);
restartTimer(state);
}
// 하단 불릿 버튼을 생성합니다.
function createBullets(state) {
state.slides.forEach(function (slide, index) {
const bullet = document.createElement('button');
bullet.type = 'button';
bullet.className = 'iotdoor-popup-bullet';
bullet.setAttribute('aria-label', (index + 1) + '번 팝업 보기');
bullet.addEventListener('click', function () {
moveTo(index, state);
});
state.bulletContainer.appendChild(bullet);
state.bullets.push(bullet);
});
}
// 팝업을 닫고 필요 시 오늘 하루 숨김 값을 저장합니다.
function closePopup(state) {
if (state.hideToday.checked) {
saveHiddenToday();
}
state.modal.classList.remove('is-open');
if (timerId) {
window.clearInterval(timerId);
}
}
// DOM 준비 후 팝업 모달과 캐러셀 이벤트를 연결합니다.
function handleDomReady() {
if (isHiddenToday()) {
return;
}
const modal = document.getElementById('mainPopupModal');
const track = document.getElementById('mainPopupTrack');
const title = document.getElementById('mainPopupTitle');
const closeButton = document.getElementById('mainPopupClose');
const prevButton = document.getElementById('mainPopupPrev');
const nextButton = document.getElementById('mainPopupNext');
const bulletContainer = document.getElementById('mainPopupBullets');
const hideToday = document.getElementById('mainPopupHideToday');
if (!modal || !track || !title || !closeButton || !prevButton || !nextButton || !bulletContainer || !hideToday) {
return;
}
const state = {
modal,
track,
title,
closeButton,
prevButton,
nextButton,
bulletContainer,
hideToday,
slides: Array.from(track.querySelectorAll('.iotdoor-popup-slide')),
bullets: []
};
if (!state.slides.length) {
return;
}
createBullets(state);
goToSlide(0, state);
restartTimer(state);
modal.classList.add('is-open');
closeButton.addEventListener('click', function () {
closePopup(state);
});
prevButton.addEventListener('click', function () {
moveTo(activeIndex - 1, state);
});
nextButton.addEventListener('click', function () {
moveTo(activeIndex + 1, state);
});
}
document.addEventListener('DOMContentLoaded', handleDomReady);
}());
</script>
<script th:src="@{/resources/kr/iotdoor/boot/contact/contact.js}"></script>
</th:block>
</html>
src/test/resources/application.yml
+1 -1
View File
@@ -10,5 +10,5 @@ iotdoor:
upload-path: ./build/test-uploads
security:
admin-username: admin
admin-password: ChangeMe123!
admin-password: epdlxkdldma
admin-display-name: 관리자