feat: 상품배지설정관리 프로그램 추가

src/main/java/com/wb/domainserver/domain/gcone/goods/badge/mapper/BOGoodsBadgeMapper.java

@@ -0,0 +1,17 @@
+package com.wb.domainserver.domain.gcone.goods.badge.mapper;
+
+import com.wb.domainserver.domain.gcone.goods.badge.vo.BOGoodsBadgeVO;
+import com.wb.domainserver.util.dataaccess.DataMap;
+import org.apache.ibatis.annotations.Mapper;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+
+@Mapper
+@Repository
+public interface BOGoodsBadgeMapper {
+	List<DataMap> selectBOGoodsBadgeList(BOGoodsBadgeVO vo);
+	int selectBOGoodsBadgeCount(BOGoodsBadgeVO vo);
+	int insertBOGoodsBadge(BOGoodsBadgeVO vo);
+	int updateBOGoodsBadge(BOGoodsBadgeVO vo);
+}

src/main/java/com/wb/domainserver/domain/gcone/goods/badge/service/BOGoodsBadgeService.java

@@ -0,0 +1,113 @@
+package com.wb.domainserver.domain.gcone.goods.badge.service;
+
+import com.wb.domainserver.domain.gcone.goods.badge.mapper.BOGoodsBadgeMapper;
+import com.wb.domainserver.domain.gcone.goods.badge.vo.BOGoodsBadgeVO;
+import com.wb.domainserver.exception.WnbtRestException;
+import com.wb.domainserver.util.dataaccess.DataMap;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.util.StringUtils;
+
+import java.util.HashSet;
+import java.util.List;
+import java.util.Set;
+import java.util.regex.Pattern;
+
+@Service
+public class BOGoodsBadgeService {
+	private static final Pattern COLOR_PATTERN = Pattern.compile("^#[0-9A-Fa-f]{6}$");
+	private static final Pattern BADGE_CODE_PATTERN = Pattern.compile("^[A-Za-z0-9_-]+$");
+
+	@Autowired
+	private BOGoodsBadgeMapper mapper;
+
+	public List<DataMap> selectBOGoodsBadgeList(BOGoodsBadgeVO vo) {
+		return mapper.selectBOGoodsBadgeList(vo);
+	}
+
+	@Transactional
+	public DataMap updateBOGoodsBadgeSetup(BOGoodsBadgeVO request) {
+		DataMap message = new DataMap();
+		String[] badgeCdArr = request.getBadgeCdArr();
+		if (badgeCdArr == null || badgeCdArr.length == 0) {
+			message.put("result", "success");
+			return message;
+		}
+
+		validateArrayLengths(request, badgeCdArr.length);
+		Set<String> newBadgeCodes = new HashSet<>();
+		for (int i = 0; i < badgeCdArr.length; i++) {
+			BOGoodsBadgeVO badge = createBadge(request, i);
+			validateBadge(badge);
+			if ("Y".equals(badge.getNewAt())) {
+				if (!newBadgeCodes.add(badge.getBadgeCd()) || mapper.selectBOGoodsBadgeCount(badge) > 0) {
+					throw new WnbtRestException("이미 등록된 배지코드입니다.");
+				}
+				mapper.insertBOGoodsBadge(badge);
+			} else {
+				if (!badge.getBadgeCd().equals(trim(request.getOriginalBadgeCdArr()[i]))) {
+					throw new WnbtRestException("기존 배지코드는 변경할 수 없습니다.");
+				}
+				if (mapper.selectBOGoodsBadgeCount(badge) == 0) {
+					throw new WnbtRestException("존재하지 않는 배지코드입니다.");
+				}
+				mapper.updateBOGoodsBadge(badge);
+			}
+		}
+
+		message.put("result", "success");
+		return message;
+	}
+
+	private void validateArrayLengths(BOGoodsBadgeVO vo, int size) {
+		if (vo.getOriginalBadgeCdArr() == null || vo.getBadgeNmArr() == null || vo.getFontColorArr() == null || vo.getBgColorArr() == null
+				|| vo.getBorderColorArr() == null || vo.getSortOrdrArr() == null || vo.getUseAtArr() == null
+				|| vo.getNewAtArr() == null || vo.getOriginalBadgeCdArr().length != size || vo.getBadgeNmArr().length != size || vo.getFontColorArr().length != size
+				|| vo.getBgColorArr().length != size || vo.getBorderColorArr().length != size
+				|| vo.getSortOrdrArr().length != size || vo.getUseAtArr().length != size || vo.getNewAtArr().length != size) {
+			throw new WnbtRestException("배지 저장 요청 값이 올바르지 않습니다.");
+		}
+	}
+
+	private BOGoodsBadgeVO createBadge(BOGoodsBadgeVO request, int index) {
+		BOGoodsBadgeVO badge = new BOGoodsBadgeVO();
+		badge.setSopmalCd(request.getSopmalCd());
+		badge.setRegusr(request.getRegusr());
+		badge.setUpdusr(request.getUpdusr());
+		badge.setBadgeCd(trim(request.getBadgeCdArr()[index]));
+		badge.setBadgeNm(trim(request.getBadgeNmArr()[index]));
+		badge.setFontColor(trim(request.getFontColorArr()[index]));
+		badge.setBgColor(trim(request.getBgColorArr()[index]));
+		badge.setBorderColor(trim(request.getBorderColorArr()[index]));
+		badge.setSortOrdr(trim(request.getSortOrdrArr()[index]));
+		badge.setUseAt(trim(request.getUseAtArr()[index]));
+		badge.setNewAt(trim(request.getNewAtArr()[index]));
+		return badge;
+	}
+
+	private void validateBadge(BOGoodsBadgeVO badge) {
+		if (!StringUtils.hasText(badge.getBadgeCd()) || ("Y".equals(badge.getNewAt()) && !BADGE_CODE_PATTERN.matcher(badge.getBadgeCd()).matches())) {
+			throw new WnbtRestException("배지코드는 영문, 숫자, 밑줄, 하이픈만 입력할 수 있습니다.");
+		}
+		if (!StringUtils.hasText(badge.getBadgeNm()) || !COLOR_PATTERN.matcher(badge.getFontColor()).matches()
+				|| !COLOR_PATTERN.matcher(badge.getBgColor()).matches() || !COLOR_PATTERN.matcher(badge.getBorderColor()).matches()) {
+			throw new WnbtRestException("배지명과 색상값을 확인해 주세요.");
+		}
+		try {
+			if (Integer.parseInt(badge.getSortOrdr()) < 0) {
+				throw new NumberFormatException();
+			}
+		} catch (NumberFormatException e) {
+			throw new WnbtRestException("노출순서는 0 이상의 정수만 입력할 수 있습니다.");
+		}
+		if (!("Y".equals(badge.getUseAt()) || "N".equals(badge.getUseAt()))
+				|| !("Y".equals(badge.getNewAt()) || "N".equals(badge.getNewAt()))) {
+			throw new WnbtRestException("배지 저장 요청 값이 올바르지 않습니다.");
+		}
+	}
+
+	private String trim(String value) {
+		return value == null ? "" : value.trim();
+	}
+}

src/main/java/com/wb/domainserver/domain/gcone/goods/badge/vo/BOGoodsBadgeVO.java

@@ -0,0 +1,28 @@
+package com.wb.domainserver.domain.gcone.goods.badge.vo;
+
+import com.wb.domainserver.domain.comm.vo.AbstractVO;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+
+@Data
+@EqualsAndHashCode(callSuper = false)
+public class BOGoodsBadgeVO extends AbstractVO {
+
+	private String sopmalCd;
+	private String badgeCd;
+	private String badgeNm;
+	private String fontColor;
+	private String bgColor;
+	private String borderColor;
+	private String sortOrdr;
+	private String newAt;
+	private String[] badgeCdArr;
+	private String[] originalBadgeCdArr;
+	private String[] badgeNmArr;
+	private String[] fontColorArr;
+	private String[] bgColorArr;
+	private String[] borderColorArr;
+	private String[] sortOrdrArr;
+	private String[] useAtArr;
+	private String[] newAtArr;
+}

src/main/java/com/wb/domainserver/domain/gcone/goods/goods/mapper/BOGoodsMapper.java

@@ -34,6 +34,8 @@ public interface BOGoodsMapper {
 	public Integer selectBOGoodsCount(BOGoodsVO vo);
 	// 일반 상품 목록 리스트
 	public List<DataMap> selectBOGoodsList(BOGoodsVO vo);
+	// 관리자 상품 배지 목록
+	public List<DataMap> selectBOGoodsBadgeList(BOGoodsVO vo);
 	// 카테고리별 상품 목록 수정
 	public void updateBOCtgryGoodsList(BOGoodsVO vo);
 	// 관리자 > 일반 상품 상세

src/main/java/com/wb/domainserver/domain/gcone/goods/goods/service/BOGoodsService.java

@@ -76,6 +76,15 @@ public class BOGoodsService {
 		return resultList;
 	}
 
+	/**
+	 * 관리자 상품 배지 목록 조회
+	 * @param vo
+	 * @return
+	 */
+	public List<DataMap> selectBOGoodsBadgeList(BOGoodsVO vo) {
+		return mapper.selectBOGoodsBadgeList(vo);
+	}
+
 	/**
 	 * 사용자 > 상품 목록 조회
 	 * @param vo

src/main/java/com/wb/domainserver/domain/mngr/goods/badge/controller/GoodsBadgeController.java

@@ -0,0 +1,54 @@
+package com.wb.domainserver.domain.mngr.goods.badge.controller;
+
+import com.wb.domainserver.domain.gcone.goods.badge.service.BOGoodsBadgeService;
+import com.wb.domainserver.domain.gcone.goods.badge.vo.BOGoodsBadgeVO;
+import com.wb.domainserver.response.WnbtResponse;
+import com.wb.domainserver.response.WnbtResponseBody;
+import com.wb.domainserver.security.authentication.AnonymousUser;
+import com.wb.domainserver.security.authentication.MemberJwtContextHolder;
+import com.wb.domainserver.security.authorization.annotation.AuthPolicy;
+import com.wb.domainserver.security.authorization.annotation.Policy;
+import com.wb.domainserver.util.dataaccess.DataMap;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.ModelMap;
+import org.springframework.web.bind.annotation.CookieValue;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller
+@RequestMapping("/mngr/goods/badge")
+public class GoodsBadgeController {
+
+	@Autowired
+	private BOGoodsBadgeService service;
+
+	@Policy(AuthPolicy.RESTRICTED)
+	@RequestMapping("/selectGoodsBadgeSetup")
+	public String selectGoodsBadgeSetup(BOGoodsBadgeVO vo, ModelMap model,
+			@CookieValue(value = "authSopmalCd") String authSopmalCd) {
+		vo.setSopmalCd(authSopmalCd);
+		DataMap content = new DataMap();
+		content.put("badgeList", service.selectBOGoodsBadgeList(vo));
+		model.addAttribute("resultMap", content);
+		return "mngr/goods/badge/GoodsBadgeSetupU";
+	}
+
+	@Policy(AuthPolicy.RESTRICTED)
+	@PostMapping(value = "/updateGoodsBadgeSetup", produces = MediaType.APPLICATION_JSON_VALUE)
+	public ResponseEntity<WnbtResponse> updateGoodsBadgeSetup(BOGoodsBadgeVO vo,
+			@CookieValue(value = "authSopmalCd") String authSopmalCd) {
+		AnonymousUser user = MemberJwtContextHolder.getMemberInfo();
+		vo.setSopmalCd(authSopmalCd);
+		if ("01".equals(user.getSysDvCd())) {
+			vo.setSopmalCd(user.getSopmalCd());
+		}
+		vo.setRegusr(user.getUserInnb());
+		vo.setUpdusr(user.getUserInnb());
+
+		DataMap message = service.updateBOGoodsBadgeSetup(vo);
+		return ResponseEntity.ok(WnbtResponse.builder().resBody(new WnbtResponseBody(message)).build());
+	}
+}

src/main/java/com/wb/domainserver/domain/mngr/goods/goodsmngr/controller/GoodsmngrController.java

@@ -479,10 +479,8 @@ public class GoodsmngrController {
 		List<?> cgo134List = bOMaComncdService.selectBOCommcdDetailList(maComncdVO);
 		content.put("goodsDftinfoInvntryPolicyList", cgo134List);
 
-		// 상품아이콘
+		// 상품 배지
-		maComncdVO = new BOMaComncdVO();
+		List<DataMap> iconList = service.selectBOGoodsBadgeList(vo);
-		maComncdVO.setGroupCd("GOODS_ICON");
-		List<?> iconList = bOMaComncdService.selectBOCommcdDetailList(maComncdVO);
 		content.put("iconList", iconList);
 
 		// 실시간수량배너구분코드
@@ -664,10 +662,7 @@ public class GoodsmngrController {
 
 		content.put("goodsDftinfoInvntryPolicyList", cgo134List); // 재고에 따른 판매
 
-		maComncdVO = new BOMaComncdVO();
+		List<DataMap> iconList = service.selectBOGoodsBadgeList(vo);
-		maComncdVO.setGroupCd("GOODS_ICON");
-
-		List<?> iconList = bOMaComncdService.selectBOCommcdDetailList(maComncdVO);
 
 		//브랜드 목록조회
 
@@ -1466,10 +1461,7 @@ public class GoodsmngrController {
 
 		content.put("goodsDftinfoInvntryPolicyList", cgo134List); // 재고에 따른 판매
 
-		maComncdVO = new BOMaComncdVO();
+		List<DataMap> iconList = service.selectBOGoodsBadgeList(vo);
-		maComncdVO.setGroupCd("GOODS_ICON");
-
-		List<?> iconList = bOMaComncdService.selectBOCommcdDetailList(maComncdVO);
 
 		//브랜드 목록조회
 

src/main/java/com/wb/domainserver/domain/sopmal/goods/controller/GoodsController.java

@@ -190,6 +190,23 @@ public class GoodsController {
 		return Util.getDeviceType(request)+"/goods/GoodsSrchRForm";
 	}
 
+	/**
+	 * 사용자 화면 상품 배지 목록 조회
+	 * @return
+	 */
+	@Policy(AuthPolicy.PUBLIC)
+	@RequestMapping(value = "/selectGoodsBadgeList", produces = MediaType.APPLICATION_JSON_VALUE)
+	public ResponseEntity<List<DataMap>> selectGoodsBadgeList() {
+		BOGoodsVO vo = new BOGoodsVO();
+		AnonymousUser user = MemberJwtContextHolder.getMemberInfo();
+
+		if ("01".equals(user.getSysDvCd())) {
+			vo.setSopmalCd(user.getSopmalCd());
+		}
+
+		return ResponseEntity.ok(service.selectBOGoodsBadgeList(vo));
+	}
+
 	/**
 	 * 상품 검색 리스트
 	 * @param vo
@@ -462,6 +479,7 @@ public class GoodsController {
 
 		// 상세 조회
 		DataMap goodsDtl = service.selectBOGoodsDtlInfo(vo);
+		List<DataMap> goodsBadgeList = service.selectBOGoodsBadgeList(vo);
 
 		//상품 옵션 조회
 		DataMap goodsOptList = service.selectBOGoodsOptionList(vo);
@@ -513,6 +531,7 @@ public class GoodsController {
 		//담기
 		Map<String, Object> content = new HashMap<>();
 		content.put("goodsDtl", goodsDtl);
+		content.put("goodsBadgeList", goodsBadgeList);
 		content.put("evtBannerList", evtBannerList);
 		content.put("goodsOptList", goodsOptList);
 		content.put("GoodsRelateInfo", goodsReleateInfo);

src/main/resources/mybatis/xml/mapper/gcone/goods/badge/BOGoodsBadgeMapper.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.wb.domainserver.domain.gcone.goods.badge.mapper.BOGoodsBadgeMapper">
+	<select id="selectBOGoodsBadgeList" parameterType="com.wb.domainserver.domain.gcone.goods.badge.vo.BOGoodsBadgeVO" resultType="dataMap">
+		SELECT BADGE_CD, BADGE_NM, FONT_COLOR, BG_COLOR, BORDER_COLOR, SORT_ORDR, USE_AT
+		FROM GC_GOODS_BADGE
+		WHERE SOPMAL_CD = #{sopmalCd}
+		ORDER BY SORT_ORDR ASC, BADGE_CD ASC
+	</select>
+
+	<select id="selectBOGoodsBadgeCount" parameterType="com.wb.domainserver.domain.gcone.goods.badge.vo.BOGoodsBadgeVO" resultType="int">
+		SELECT COUNT(1) FROM GC_GOODS_BADGE WHERE SOPMAL_CD = #{sopmalCd} AND BADGE_CD = #{badgeCd}
+	</select>
+
+	<insert id="insertBOGoodsBadge" parameterType="com.wb.domainserver.domain.gcone.goods.badge.vo.BOGoodsBadgeVO">
+		INSERT INTO GC_GOODS_BADGE (
+			SOPMAL_CD, BADGE_CD, BADGE_NM, FONT_COLOR, BG_COLOR, BORDER_COLOR, SORT_ORDR, USE_AT, REGUSR, REGIST_DT, UPDUSR, UPDT_DT
+		) VALUES (
+			#{sopmalCd}, #{badgeCd}, #{badgeNm}, #{fontColor}, #{bgColor}, #{borderColor}, #{sortOrdr}, #{useAt}, #{regusr}, SYSDATE(), #{updusr}, SYSDATE()
+		)
+	</insert>
+
+	<update id="updateBOGoodsBadge" parameterType="com.wb.domainserver.domain.gcone.goods.badge.vo.BOGoodsBadgeVO">
+		UPDATE GC_GOODS_BADGE
+		SET BADGE_NM = #{badgeNm}, FONT_COLOR = #{fontColor}, BG_COLOR = #{bgColor}, BORDER_COLOR = #{borderColor},
+			SORT_ORDR = #{sortOrdr}, USE_AT = #{useAt}, UPDUSR = #{updusr}, UPDT_DT = SYSDATE()
+		WHERE SOPMAL_CD = #{sopmalCd} AND BADGE_CD = #{badgeCd}
+	</update>
+</mapper>

src/main/resources/mybatis/xml/mapper/gcone/goods/goods/BOGoodsMapper.xml

@@ -5,6 +5,20 @@
      상품/사은품 START
     ############################-->
 
+    <!-- 관리자 상품 배지 목록 -->
+    <select id="selectBOGoodsBadgeList" parameterType="com.wb.domainserver.domain.gcone.goods.goods.vo.BOGoodsVO" resultType="dataMap">
+        SELECT BADGE_CD AS cd
+             , BADGE_NM AS cdNm
+             , FONT_COLOR AS fontColor
+             , BG_COLOR AS bgColor
+             , BORDER_COLOR AS borderColor
+             , SORT_ORDR AS sortOrdr
+        FROM GC_GOODS_BADGE
+        WHERE SOPMAL_CD = #{sopmalCd}
+          AND USE_AT = 'Y'
+        ORDER BY SORT_ORDR ASC, BADGE_CD ASC
+    </select>
+
     <sql id="goodsWhere">
         <!-- 검색조건 별 검색 -->
         <if test="@com.wb.domainserver.util.dataaccess.MybaitsUtil@isNotEmpty(srchStr)">

src/main/webapp/WEB-INF/views/comm/Include.jsp

@@ -53,6 +53,42 @@
 <!-- 스크립트 -->
 <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
 <script src="<c:url value='/js/sopmal/common.js'/>"></script>
+<script>
+    (function () {
+        var badgeMap = {};
+
+        function applyBadge(element) {
+            var badge = badgeMap[element.dataset.badgeCd.toLowerCase()];
+            if (!badge) { return; }
+            element.textContent = badge.cdNm || element.textContent;
+            if (badge.fontColor) { element.style.setProperty('color', badge.fontColor, 'important'); }
+            if (badge.bgColor) { element.style.setProperty('background-color', badge.bgColor, 'important'); }
+            if (badge.borderColor) { element.style.setProperty('border-color', badge.borderColor, 'important'); }
+        }
+
+        function applyBadges(root) {
+            if (root.nodeType === Node.ELEMENT_NODE && root.matches('.product-badge[data-badge-cd]')) {
+                applyBadge(root);
+            }
+            if (root.querySelectorAll) {
+                root.querySelectorAll('.product-badge[data-badge-cd]').forEach(applyBadge);
+            }
+        }
+
+        function initialize() {
+            fetch('/sopmal/goods/selectGoodsBadgeList')
+                .then(function (response) { return response.ok ? response.json() : []; })
+                .then(function (badgeList) {
+                    badgeList.forEach(function (badge) { badgeMap[badge.cd.toLowerCase()] = badge; });
+                    applyBadges(document);
+                    new MutationObserver(function (mutations) {
+                        mutations.forEach(function (mutation) { mutation.addedNodes.forEach(applyBadges); });
+                    }).observe(document.documentElement, { childList: true, subtree: true });
+                });
+        }
+        document.addEventListener('DOMContentLoaded', initialize);
+    }());
+</script>
 <script src="<c:url value='/pc/js/script.js'/>" defer></script>
 <script src="<c:url value='/js/sopmal/gcone.js'/>"></script>
 

src/main/webapp/WEB-INF/views/comm/mobile/Include.jsp

@@ -32,6 +32,42 @@
 <!-- 스크립트 -->
 <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
 <script src="/mobile/js/script.js" defer=""></script>
+<script>
+    (function () {
+        var badgeMap = {};
+
+        function applyBadge(element) {
+            var badge = badgeMap[element.dataset.badgeCd.toLowerCase()];
+            if (!badge) { return; }
+            element.textContent = badge.cdNm || element.textContent;
+            if (badge.fontColor) { element.style.setProperty('color', badge.fontColor, 'important'); }
+            if (badge.bgColor) { element.style.setProperty('background-color', badge.bgColor, 'important'); }
+            if (badge.borderColor) { element.style.setProperty('border-color', badge.borderColor, 'important'); }
+        }
+
+        function applyBadges(root) {
+            if (root.nodeType === Node.ELEMENT_NODE && root.matches('.product-badge[data-badge-cd]')) {
+                applyBadge(root);
+            }
+            if (root.querySelectorAll) {
+                root.querySelectorAll('.product-badge[data-badge-cd]').forEach(applyBadge);
+            }
+        }
+
+        function initialize() {
+            fetch('/sopmal/goods/selectGoodsBadgeList')
+                .then(function (response) { return response.ok ? response.json() : []; })
+                .then(function (badgeList) {
+                    badgeList.forEach(function (badge) { badgeMap[badge.cd.toLowerCase()] = badge; });
+                    applyBadges(document);
+                    new MutationObserver(function (mutations) {
+                        mutations.forEach(function (mutation) { mutation.addedNodes.forEach(applyBadges); });
+                    }).observe(document.documentElement, { childList: true, subtree: true });
+                });
+        }
+        document.addEventListener('DOMContentLoaded', initialize);
+    }());
+</script>
 <script src="<c:url value='/js/gcone.js'/>"></script>
 
 <script src="/mobile/js/bottom-sheet.js" defer=""></script>

src/main/webapp/WEB-INF/views/index.jsp

@@ -104,10 +104,10 @@
         										                                	<c:forEach items="${fn:split(case02.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
         								                                                <c:choose>
         								                                                    <c:when test="${fn:contains(iconCdNm, '-')}">
-        								                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+        								                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
         								                                                    </c:when>
         								                                                    <c:otherwise>
-        								                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+        								                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
         								                                                    </c:otherwise>
         								                                                </c:choose>
         					                                            			</c:forEach>
@@ -282,10 +282,10 @@
         								                                            	<c:forEach items="${fn:split(case04.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
         									                                                <c:choose>
         									                                                    <c:when test="${fn:contains(iconCdNm, '-')}">
-        									                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+        									                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
         									                                                    </c:when>
         									                                                    <c:otherwise>
-        									                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+        									                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
         									                                                    </c:otherwise>
         									                                                </c:choose>
         						                                            			</c:forEach>
@@ -414,10 +414,10 @@
         								                                            	<c:forEach items="${fn:split(case05.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
         									                                                <c:choose>
         									                                                    <c:when test="${fn:contains(iconCdNm, '-')}">
-        									                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+        									                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
         									                                                    </c:when>
         									                                                    <c:otherwise>
-        									                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+        									                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
         									                                                    </c:otherwise>
         									                                                </c:choose>
         						                                            			</c:forEach>
@@ -521,10 +521,10 @@
         									                                            	<c:forEach items="${fn:split(case04.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
         										                                                <c:choose>
         										                                                    <c:when test="${fn:contains(iconCdNm, '-')}">
-        										                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+        										                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
         										                                                    </c:when>
         										                                                    <c:otherwise>
-        										                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+        										                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
         										                                                    </c:otherwise>
         										                                                </c:choose>
         							                                            			</c:forEach>
@@ -614,10 +614,10 @@
         									                                            	<c:forEach items="${fn:split(case06.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
         										                                                <c:choose>
         										                                                    <c:when test="${fn:contains(iconCdNm, '-')}">
-        										                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+        										                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
         										                                                    </c:when>
         										                                                    <c:otherwise>
-        										                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+        										                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
         										                                                    </c:otherwise>
         										                                                </c:choose>
         							                                            			</c:forEach>
@@ -727,10 +727,10 @@
         						                                            	<c:forEach items="${fn:split(case07.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
         							                                                <c:choose>
         							                                                    <c:when test="${fn:contains(iconCdNm, '-')}">
-        							                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+        							                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
         							                                                    </c:when>
         							                                                    <c:otherwise>
-        							                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+        							                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
         							                                                    </c:otherwise>
         							                                                </c:choose>
         				                                            			</c:forEach>
@@ -863,10 +863,10 @@
         							                                            	<c:forEach items="${fn:split(case08.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
         								                                                <c:choose>
         								                                                    <c:when test="${fn:contains(iconCdNm, '-')}">
-        								                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+        								                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
         								                                                    </c:when>
         								                                                    <c:otherwise>
-        								                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+        								                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
         								                                                    </c:otherwise>
         								                                                </c:choose>
         					                                            			</c:forEach>
@@ -1532,10 +1532,10 @@
 																	<c:forEach items="${fn:split(case02.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 																		<c:choose>
 																			<c:when test="${fn:contains(iconCdNm, '-')}">
-																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 																			</c:when>
 																			<c:otherwise>
-																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 																			</c:otherwise>
 																		</c:choose>
 																	</c:forEach>
@@ -1710,10 +1710,10 @@
 																		<c:forEach items="${fn:split(case04.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 																			<c:choose>
 																				<c:when test="${fn:contains(iconCdNm, '-')}">
-																					<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+																					<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 																				</c:when>
 																				<c:otherwise>
-																					<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+																					<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 																				</c:otherwise>
 																			</c:choose>
 																		</c:forEach>
@@ -1842,10 +1842,10 @@
 																		<c:forEach items="${fn:split(case05.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 																			<c:choose>
 																				<c:when test="${fn:contains(iconCdNm, '-')}">
-																					<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+																					<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 																				</c:when>
 																				<c:otherwise>
-																					<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+																					<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 																				</c:otherwise>
 																			</c:choose>
 																		</c:forEach>
@@ -1949,10 +1949,10 @@
 																			<c:forEach items="${fn:split(case04.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 																				<c:choose>
 																					<c:when test="${fn:contains(iconCdNm, '-')}">
-																						<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+																						<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 																					</c:when>
 																					<c:otherwise>
-																						<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+																						<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 																					</c:otherwise>
 																				</c:choose>
 																			</c:forEach>
@@ -2042,10 +2042,10 @@
 																			<c:forEach items="${fn:split(case06.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 																				<c:choose>
 																					<c:when test="${fn:contains(iconCdNm, '-')}">
-																						<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+																						<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 																					</c:when>
 																					<c:otherwise>
-																						<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+																						<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 																					</c:otherwise>
 																				</c:choose>
 																			</c:forEach>
@@ -2155,10 +2155,10 @@
 																<c:forEach items="${fn:split(case07.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 																	<c:choose>
 																		<c:when test="${fn:contains(iconCdNm, '-')}">
-																			<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+																			<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 																		</c:when>
 																		<c:otherwise>
-																			<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+																			<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 																		</c:otherwise>
 																	</c:choose>
 																</c:forEach>
@@ -2291,10 +2291,10 @@
 																	<c:forEach items="${fn:split(case08.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 																		<c:choose>
 																			<c:when test="${fn:contains(iconCdNm, '-')}">
-																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 																			</c:when>
 																			<c:otherwise>
-																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 																			</c:otherwise>
 																		</c:choose>
 																	</c:forEach>
@@ -3055,9 +3055,9 @@
 
 						if (iconCdNm.includes('-')) {
 							let temp = upper.replace(/-/g, ' ');
-							str += '<span class="product-badge ' + lower + '">' + temp + '</span>';
+							str += '<span class="product-badge ' + lower + '" data-badge-cd="' + iconCdNm + '">' + temp + '</span>';
 						} else {
-							str += '<span class="product-badge ' + lower + '">' + upper + '</span>';
+							str += '<span class="product-badge ' + lower + '" data-badge-cd="' + iconCdNm + '">' + upper + '</span>';
 						}
 					});
 				}

src/main/webapp/WEB-INF/views/mngr/goods/badge/GoodsBadgeSetupU.jsp

@@ -0,0 +1,79 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+	<meta charset="UTF-8">
+	<%@include file ="/WEB-INF/views/comm/mngr/Include.jsp" %>
+	<style>
+		.badge-preview { display: inline-block; min-width: 70px; padding: 4px 8px; border: 1px solid; border-radius: 3px; text-align: center; }
+		.color-field { display: flex; align-items: center; gap: 6px; position: relative; }
+		.color-palette-toggle { width: 32px; min-width: 32px; height: 32px; padding: 3px; border: 1px solid #bbb; background: #fff; cursor: pointer; }
+		.color-swatch { display: block; width: 100%; height: 100%; border: 1px solid rgba(0, 0, 0, .15); }
+		.color-palette { display: none; position: absolute; z-index: 10; top: 36px; left: 0; width: 260px; padding: 8px; background: #fff; border: 1px solid #aaa; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); grid-template-columns: repeat(12, 1fr); gap: 4px; }
+		.color-palette.is-open { display: grid; }
+		.color-choice { width: 16px; height: 16px; padding: 0; border: 1px solid rgba(0, 0, 0, .18); cursor: pointer; }
+	</style>
+</head>
+<body>
+<%@include file ="/WEB-INF/views/comm/mngr/Header.jsp" %>
+<main class="main">
+	<%@include file ="/WEB-INF/views/comm/mngr/Left.jsp" %>
+	<div class="content"><div class="content__inner">
+		<button class="side-nav__fold"><span class="visually-hidden">좌측메뉴 펼치기/닫기</span></button>
+		<div class="page-title">
+			<h2 class="page-title__title">상품배지설정관리</h2>
+			<div class="page-title__btn-container"><button type="button" class="btn primary" onclick="fn_save_badges()">저장하기</button></div>
+		</div>
+		<form id="badgeForm">
+			<section class="content-section">
+				<div class="form-control-container mb-8"><div class="left"><h3 class="content-section__inner-title">상품 배지</h3></div><div class="center"></div><div class="right"><button type="button" class="btn primary outline xsm" onclick="fn_add_badge()">추가</button><button type="button" class="btn dark xsm" onclick="fn_remove_badge()">선택 행 제거</button></div></div>
+				<div class="table-wrapper"><table class="table vertical"><caption>상품 배지 설정</caption><thead><tr><th><label class="b-checkbox checkbox is-medium check-all"><input type="checkbox" id="badgeAll"><span class="check"></span></label></th><th>배지코드</th><th>배지명</th><th>글자색</th><th>배경색</th><th>테두리색</th><th>노출순서</th><th>사용여부</th><th>미리보기</th></tr></thead>
+					<tbody id="badgeBody">
+					<c:forEach var="badge" items="${resultMap.badgeList}">
+						<tr data-new-at="N"><td><label class="b-checkbox checkbox is-medium"><input type="checkbox" name="badgeChk"><span class="check"></span></label></td><td><input type="text" class="input-text xl badge-cd" name="badgeCdArr" value="<c:out value='${badge.badgeCd}'/>" readonly><input type="hidden" name="originalBadgeCdArr" value="<c:out value='${badge.badgeCd}'/>"></td><td><input type="text" class="input-text xl badge-nm" name="badgeNmArr" value="<c:out value='${badge.badgeNm}'/>"></td><td><div class="color-field"><button type="button" class="color-palette-toggle" aria-label="글자색 선택"><span class="color-swatch" style="background-color:<c:out value='${badge.fontColor}'/>"></span></button><div class="color-palette"></div><input type="text" class="input-text xl color-input" name="fontColorArr" maxlength="7" value="<c:out value='${badge.fontColor}'/>"></div></td><td><div class="color-field"><button type="button" class="color-palette-toggle" aria-label="배경색 선택"><span class="color-swatch" style="background-color:<c:out value='${badge.bgColor}'/>"></span></button><div class="color-palette"></div><input type="text" class="input-text xl color-input" name="bgColorArr" maxlength="7" value="<c:out value='${badge.bgColor}'/>"></div></td><td><div class="color-field"><button type="button" class="color-palette-toggle" aria-label="테두리색 선택"><span class="color-swatch" style="background-color:<c:out value='${badge.borderColor}'/>"></span></button><div class="color-palette"></div><input type="text" class="input-text xl color-input" name="borderColorArr" maxlength="7" value="<c:out value='${badge.borderColor}'/>"></div></td><td><input type="text" class="input-text xl sort-ordr" name="sortOrdrArr" value="<c:out value='${badge.sortOrdr}'/>"></td><td><select class="select" name="useAtArr"><option value="Y" ${badge.useAt eq 'Y' ? 'selected' : ''}>사용</option><option value="N" ${badge.useAt eq 'N' ? 'selected' : ''}>미사용</option></select><input type="hidden" name="newAtArr" value="N"></td><td><span class="badge-preview"></span></td></tr>
+					</c:forEach>
+					<tr id="noData" ${not empty resultMap.badgeList ? 'style="display:none"' : ''}><td class="row-no-data" colspan="9">등록된 배지가 없습니다.</td></tr>
+					</tbody></table></div>
+			</section>
+		</form>
+	</div></div>
+</main>
+<script>
+	function fn_add_badge() {
+		$('#noData').hide();
+		$('#badgeBody').append('<tr data-new-at="Y"><td><label class="b-checkbox checkbox is-medium"><input type="checkbox" name="badgeChk"><span class="check"></span></label></td><td><input type="text" class="input-text xl badge-cd" name="badgeCdArr" maxlength="30"><input type="hidden" name="originalBadgeCdArr" value=""></td><td><input type="text" class="input-text xl badge-nm" name="badgeNmArr" maxlength="100"></td><td><div class="color-field"><button type="button" class="color-palette-toggle" aria-label="글자색 선택"><span class="color-swatch" style="background-color:#000000"></span></button><div class="color-palette"></div><input type="text" class="input-text xl color-input" name="fontColorArr" maxlength="7" value="#000000"></div></td><td><div class="color-field"><button type="button" class="color-palette-toggle" aria-label="배경색 선택"><span class="color-swatch" style="background-color:#FFFFFF"></span></button><div class="color-palette"></div><input type="text" class="input-text xl color-input" name="bgColorArr" maxlength="7" value="#FFFFFF"></div></td><td><div class="color-field"><button type="button" class="color-palette-toggle" aria-label="테두리색 선택"><span class="color-swatch" style="background-color:#000000"></span></button><div class="color-palette"></div><input type="text" class="input-text xl color-input" name="borderColorArr" maxlength="7" value="#000000"></div></td><td><input type="text" class="input-text xl sort-ordr" name="sortOrdrArr" value="0" maxlength="5"></td><td><select class="select" name="useAtArr"><option value="Y">사용</option><option value="N">미사용</option></select><input type="hidden" name="newAtArr" value="Y"></td><td><span class="badge-preview"></span></td></tr>');
+		fn_init_color_palettes();
+		fn_render_preview();
+	}
+	function fn_remove_badge() {
+		const selected = $('[name=badgeChk]:checked');
+		if (!selected.length) { alert('항목을 선택해 주세요.'); return; }
+		selected.each(function () { const row = $(this).closest('tr'); if (row.data('new-at') === 'Y') { row.remove(); } else { alert('기존 배지는 삭제할 수 없습니다. 사용여부를 미사용으로 변경해 주세요.'); } });
+		$('#badgeAll').prop('checked', false);
+		if ($('#badgeBody tr:not(#noData)').length === 0) { $('#noData').show(); }
+	}
+	function fn_render_preview() {
+		$('#badgeBody tr:not(#noData)').each(function () { const row = $(this); row.find('.badge-preview').text(row.find('.badge-nm').val() || '배지명').css({color: row.find('[name=fontColorArr]').val(), backgroundColor: row.find('[name=bgColorArr]').val(), borderColor: row.find('[name=borderColorArr]').val()}); });
+	}
+	function fn_normalize_colors() {
+		$('#badgeBody tr:not(#noData)').each(function () { const row = $(this); row.find('.color-input').each(function () { const input = $(this); if (!/^#[0-9A-Fa-f]{6}$/.test(input.val().trim())) { input.val(input.attr('name') === 'borderColorArr' ? (row.find('[name=bgColorArr]').val() || '#000000') : '#000000'); } }); });
+	}
+	function fn_validate_badges() {
+		let valid = true; const colorPattern = /^#[0-9A-Fa-f]{6}$/; const codePattern = /^[A-Za-z0-9_-]+$/; const codes = {};
+		$('#badgeBody tr:not(#noData)').each(function () { const row = $(this); const code = row.find('.badge-cd').val().trim(); const isNew = row.data('new-at') === 'Y'; if ((!code || (isNew && !codePattern.test(code))) || !row.find('.badge-nm').val().trim() || !colorPattern.test(row.find('[name=fontColorArr]').val().trim()) || !colorPattern.test(row.find('[name=bgColorArr]').val().trim()) || !colorPattern.test(row.find('[name=borderColorArr]').val().trim()) || !/^\d+$/.test(row.find('.sort-ordr').val().trim())) { valid = false; return false; } if (isNew && codes[code]) { valid = false; return false; } if (isNew) { codes[code] = true; } });
+		if (!valid) { alert('배지코드, 배지명, 색상(#RRGGBB), 노출순서를 확인해 주세요.'); } return valid;
+	}
+	function fn_save_badges() { if (!fn_validate_badges() || !confirm('상품 배지 설정을 저장하시겠습니까?')) { return; } $.ajax({ type: 'post', url: '<c:url value="/mngr/goods/badge/updateGoodsBadgeSetup"/>', data: $('#badgeForm').serialize(), success: function () { alert('저장되었습니다.'); location.reload(); } }); }
+	function fn_hsl_to_hex(h, s, l) { s /= 100; l /= 100; const c = (1 - Math.abs(2 * l - 1)) * s; const x = c * (1 - Math.abs((h / 60) % 2 - 1)); const m = l - c / 2; let r = 0, g = 0, b = 0; if (h < 60) { r = c; g = x; } else if (h < 120) { r = x; g = c; } else if (h < 180) { g = c; b = x; } else if (h < 240) { g = x; b = c; } else if (h < 300) { r = x; b = c; } else { r = c; b = x; } return '#' + [r, g, b].map(function (v) { return Math.round((v + m) * 255).toString(16).padStart(2, '0'); }).join('').toUpperCase(); }
+	const paletteColors = (function () { const colors = ['#000000','#202020','#404040','#606060','#808080','#A0A0A0','#C0C0C0','#D9D9D9','#EFEFEF','#FFFFFF']; const lightnesses = [92, 82, 72, 62, 52, 42, 32, 22]; for (let lightnessIndex = 0; lightnessIndex < lightnesses.length; lightnessIndex++) { for (let hue = 0; hue < 360; hue += 30) { colors.push(fn_hsl_to_hex(hue, 78, lightnesses[lightnessIndex])); } } return colors; })();
+	function fn_init_color_palettes() { $('.color-palette').each(function () { const palette = $(this); if (palette.children().length) { return; } $.each(paletteColors, function (_, color) { palette.append('<button type="button" class="color-choice" data-color="' + color + '" title="' + color + '" style="background-color:' + color + '"></button>'); }); }); }
+	$(document).on('input change', '.badge-nm, .color-input', function () { const input = $(this); if (input.hasClass('color-input') && /^#[0-9A-Fa-f]{6}$/.test(input.val())) { input.siblings('.color-palette-toggle').find('.color-swatch').css('background-color', input.val()); } fn_render_preview(); });
+	$(document).on('click', '.color-palette-toggle', function (e) { e.stopPropagation(); $('.color-palette').not($(this).siblings('.color-palette')).removeClass('is-open'); $(this).siblings('.color-palette').toggleClass('is-open'); });
+	$(document).on('click', '.color-choice', function () { const field = $(this).closest('.color-field'); field.find('.color-input').val($(this).data('color')).trigger('change'); field.find('.color-palette').removeClass('is-open'); });
+	$(document).on('click', function () { $('.color-palette').removeClass('is-open'); });
+	$('#badgeAll').on('change', function () { $('[name=badgeChk]').prop('checked', this.checked); });
+	$(function () { fn_init_color_palettes(); fn_normalize_colors(); $('.color-input').trigger('change'); fn_render_preview(); });
+</script>
+</body>
+</html>

src/main/webapp/WEB-INF/views/mngr/goods/goodsmngr/GoodsC.jsp

@@ -2661,7 +2661,7 @@
                                                         <input type="checkbox" value="${ iconList.cd }" name="iconCd">
                                                         <span class="check"></span>
                                                         <span class="control-label">
-                                                            <span class="product-badge ${fn:toLowerCase(iconList.cd)}">${ iconList.cdNm }</span>
+                                                            <span class="product-badge ${fn:toLowerCase(iconList.cd)}" style="color: ${iconList.fontColor} !important; background-color: ${iconList.bgColor} !important; border-color: ${iconList.borderColor} !important;">${ iconList.cdNm }</span>
                                                         </span>
                                                     </label>
                                                 </c:forEach>

src/main/webapp/WEB-INF/views/mngr/goods/goodsmngr/GoodsCopyC.jsp

@@ -2832,7 +2832,7 @@
                                                         <input type="checkbox" value="${iconList.cd}" name="iconCd" ${isChecked}/>
                                                         <span class="check"></span>
                                                         <span class="control-label">
-                                                            <span class="product-badge ${fn:toLowerCase(iconList.cd)}">${iconList.cdNm}</span>
+                                                            <span class="product-badge ${fn:toLowerCase(iconList.cd)}" style="color: ${iconList.fontColor} !important; background-color: ${iconList.bgColor} !important; border-color: ${iconList.borderColor} !important;">${iconList.cdNm}</span>
                                                         </span>
                                                     </label>
 

src/main/webapp/WEB-INF/views/mngr/goods/goodsmngr/GoodsDtlU.jsp

@@ -3283,7 +3283,7 @@
                                                         <input type="checkbox" value="${iconList.cd}" name="iconCd" ${isChecked}/>
                                                         <span class="check"></span>
                                                         <span class="control-label">
-                                                            <span class="product-badge ${fn:toLowerCase(iconList.cd)}">${iconList.cdNm}</span>
+                                                            <span class="product-badge ${fn:toLowerCase(iconList.cd)}" style="color: ${iconList.fontColor} !important; background-color: ${iconList.bgColor} !important; border-color: ${iconList.borderColor} !important;">${iconList.cdNm}</span>
                                                         </span>
                                                     </label>
 

src/main/webapp/WEB-INF/views/mobileMain.jsp

@@ -180,10 +180,10 @@
 															                                	<c:forEach items="${fn:split(case02.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 													                                                <c:choose>
 													                                                    <c:when test="${fn:contains(iconCdNm, '-')}">
-													                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+													                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 													                                                    </c:when>
 													                                                    <c:otherwise>
-													                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+													                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 													                                                    </c:otherwise>
 													                                                </c:choose>
 										                                            			</c:forEach>
@@ -355,10 +355,10 @@
 											                                            	<c:forEach items="${fn:split(case04.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 												                                                <c:choose>
 												                                                    <c:when test="${fn:contains(iconCdNm, '-')}">
-												                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+												                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 												                                                    </c:when>
 												                                                    <c:otherwise>
-												                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+												                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 												                                                    </c:otherwise>
 												                                                </c:choose>
 									                                            			</c:forEach>
@@ -507,10 +507,10 @@
 													                                	<c:forEach items="${fn:split(case05.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 											                                                <c:choose>
 											                                                    <c:when test="${fn:contains(iconCdNm, '-')}">
-											                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+											                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 											                                                    </c:when>
 											                                                    <c:otherwise>
-											                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+											                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 											                                                    </c:otherwise>
 											                                                </c:choose>
 								                                            			</c:forEach>
@@ -622,10 +622,10 @@
 											                                            	<c:forEach items="${fn:split(case07.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 												                                                <c:choose>
 												                                                    <c:when test="${fn:contains(iconCdNm, '-')}">
-												                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+												                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 												                                                    </c:when>
 												                                                    <c:otherwise>
-												                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+												                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 												                                                    </c:otherwise>
 												                                                </c:choose>
 									                                            			</c:forEach>
@@ -754,10 +754,10 @@
 											                                            	<c:forEach items="${fn:split(case08.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 												                                                <c:choose>
 												                                                    <c:when test="${fn:contains(iconCdNm, '-')}">
-												                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+												                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 												                                                    </c:when>
 												                                                    <c:otherwise>
-												                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+												                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 												                                                    </c:otherwise>
 												                                                </c:choose>
 									                                            			</c:forEach>
@@ -1220,10 +1220,10 @@
 																		<c:forEach items="${fn:split(case02.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 																			<c:choose>
 																				<c:when test="${fn:contains(iconCdNm, '-')}">
-																					<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+																					<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 																				</c:when>
 																				<c:otherwise>
-																					<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+																					<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 																				</c:otherwise>
 																			</c:choose>
 																		</c:forEach>
@@ -1403,10 +1403,10 @@
 																			   var="iconCdNm" varStatus="iconStatus">
 																		<c:choose>
 																			<c:when test="${fn:contains(iconCdNm, '-')}">
-																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 																			</c:when>
 																			<c:otherwise>
-																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 																			</c:otherwise>
 																		</c:choose>
 																	</c:forEach>
@@ -1566,10 +1566,10 @@
 																<c:forEach items="${fn:split(case05.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 																	<c:choose>
 																		<c:when test="${fn:contains(iconCdNm, '-')}">
-																			<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+																			<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 																		</c:when>
 																		<c:otherwise>
-																			<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+																			<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 																		</c:otherwise>
 																	</c:choose>
 																</c:forEach>
@@ -1681,10 +1681,10 @@
 																	<c:forEach items="${fn:split(case07.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 																		<c:choose>
 																			<c:when test="${fn:contains(iconCdNm, '-')}">
-																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 																			</c:when>
 																			<c:otherwise>
-																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 																			</c:otherwise>
 																		</c:choose>
 																	</c:forEach>
@@ -1813,10 +1813,10 @@
 																	<c:forEach items="${fn:split(case08.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
 																		<c:choose>
 																			<c:when test="${fn:contains(iconCdNm, '-')}">
-																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
 																			</c:when>
 																			<c:otherwise>
-																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+																				<span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
 																			</c:otherwise>
 																		</c:choose>
 																	</c:forEach>
@@ -2156,9 +2156,9 @@
 
 						if (iconCdNm.includes('-')) {
 							let temp = upper.replace(/-/g, ' ');
-							str += '<span class="product-badge ' + lower + '">' + temp + '</span>';
+							str += '<span class="product-badge ' + lower + '" data-badge-cd="' + iconCdNm + '">' + temp + '</span>';
 						} else {
-							str += '<span class="product-badge ' + lower + '">' + upper + '</span>';
+							str += '<span class="product-badge ' + lower + '" data-badge-cd="' + iconCdNm + '">' + upper + '</span>';
 						}
 					});
 				}

src/main/webapp/WEB-INF/views/sopmal/csc/BbscttDtlR.jsp

@@ -972,19 +972,19 @@
                                                             <c:if test = "${not empty item.goodsIconCd}">
                                                                 <c:forEach items="${fn:split(item.goodsIconCd, ',')}" var="icon">
                                                                     <c:if test="${icon eq 'new'}">
-                                                                        <span class="product-badge new">NEW</span>
+                                                                        <span class="product-badge new" data-badge-cd="new">NEW</span>
                                                                     </c:if>
                                                                     <c:if test="${icon eq 'hot'}">
-                                                                        <span class="product-badge hot">HOT</span>
+                                                                        <span class="product-badge hot" data-badge-cd="hot">HOT</span>
                                                                     </c:if>
                                                                     <c:if test="${icon eq 'best'}">
-                                                                        <span class="product-badge best">BEST</span>
+                                                                        <span class="product-badge best" data-badge-cd="best">BEST</span>
                                                                     </c:if>
                                                                     <c:if test="${icon eq 'md-pick'}">
-                                                                        <span class="product-badge md-pick">MD PICK</span>
+                                                                        <span class="product-badge md-pick" data-badge-cd="md-pick">MD PICK</span>
                                                                     </c:if>
                                                                     <c:if test="${icon eq 'hot-deal'}">
-                                                                        <span class="product-badge four-row">HOT DEAL</span>
+                                                                        <span class="product-badge four-row" data-badge-cd="four-row">HOT DEAL</span>
                                                                     </c:if>
                                                                 </c:forEach>
                                                             </c:if>

src/main/webapp/WEB-INF/views/sopmal/goods/GoodsDtlR.jsp

@@ -3922,14 +3922,16 @@
                                 <c:if test="${not empty resultMap.goodsDtl.goodsIconCd}">
                                     <div class="product-badge-container">
                                         <c:forTokens var="iconNm" items="${resultMap.goodsDtl.goodsIconCd}" delims=",">
-                                            <c:choose>
+                                            <c:set var="badgeMatched" value="false"/>
-                                                <c:when test="${fn:contains(iconNm,'-')}">
+                                            <c:forEach items="${resultMap.goodsBadgeList}" var="badge">
-                                                    <span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(fn:replace(iconNm, '-', ' '))}</span>
+                                                <c:if test="${badge.cd eq iconNm}">
-                                                </c:when>
+                                                    <span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}" data-badge-cd="${iconNm}" style="color: ${badge.fontColor} !important; background-color: ${badge.bgColor} !important; border-color: ${badge.borderColor} !important;">${badge.cdNm}</span>
-                                                <c:otherwise>
+                                                    <c:set var="badgeMatched" value="true"/>
-                                                    <span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(iconNm)}</span>
+                                                </c:if>
-                                                </c:otherwise>
+                                            </c:forEach>
-                                            </c:choose>
+                                            <c:if test="${not badgeMatched}">
+                                                <span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}" data-badge-cd="${iconNm}">${fn:toUpperCase(fn:replace(iconNm, '-', ' '))}</span>
+                                            </c:if>
                                         </c:forTokens>
                                     </div>
                                 </c:if>

src/main/webapp/WEB-INF/views/sopmal/goods/GoodsListR.jsp

@@ -84,10 +84,10 @@
                                             <c:forEach items="${fn:split(list.iconCdNmList, ',')}" var="iconCdNm" varStatus="iconStatus">
                                                 <c:choose>
                                                     <c:when test="${fn:contains(iconCdNm, '-')}">
-                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
                                                     </c:when>
                                                     <c:otherwise>
-                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
                                                     </c:otherwise>
                                                 </c:choose>
                                             </c:forEach>

src/main/webapp/WEB-INF/views/sopmal/goods/GoodsSrchR.jsp

@@ -78,10 +78,10 @@
                                             <c:forEach items="${fn:split(list.iconCdNmList, ',')}" var="iconCdNm" varStatus="iconStatus">
                                                 <c:choose>
                                                     <c:when test="${fn:contains(iconCdNm, '-')}">
-                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
                                                     </c:when>
                                                     <c:otherwise>
-                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+                                                        <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
                                                     </c:otherwise>
                                                 </c:choose>
                                             </c:forEach>

src/main/webapp/WEB-INF/views/sopmal/mpage/main/MpageMainR.jsp

@@ -1002,10 +1002,10 @@
                                                                         <c:forEach items="${fn:split(case02.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
                                                                             <c:choose>
                                                                                 <c:when test="${fn:contains(iconCdNm, '-')}">
-                                                                                    <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+                                                                                    <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
                                                                                 </c:when>
                                                                                 <c:otherwise>
-                                                                                    <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+                                                                                    <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
                                                                                 </c:otherwise>
                                                                             </c:choose>
                                                                         </c:forEach>

src/main/webapp/WEB-INF/views/sopmal/ordr/SpbkPtinR.jsp

@@ -1564,10 +1564,10 @@
                                                             <c:forEach var="iconNm" items="${fn:split(goodsInfo.iconCdNmList,',')}">
                                                                 <c:choose>
                                                                     <c:when test="${fn:contains(iconNm,'-')}">
-                                                                        <span class="product-badge ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(fn:replace(iconNm, '-', ' '))}</span>
+                                                                        <span class="product-badge ${fn:toLowerCase(iconNm)}" data-badge-cd="${iconNm}"> ${fn:toUpperCase(fn:replace(iconNm, '-', ' '))}</span>
                                                                     </c:when>
                                                                     <c:otherwise>
-                                                                        <span class="product-badge ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(iconNm)}</span>
+                                                                        <span class="product-badge ${fn:toLowerCase(iconNm)}" data-badge-cd="${iconNm}"> ${fn:toUpperCase(iconNm)}</span>
                                                                     </c:otherwise>
                                                                 </c:choose>
                                                             </c:forEach>

src/main/webapp/WEB-INF/views/sopmal_m/csc/BbscttDtlR.jsp

@@ -1459,19 +1459,19 @@
                                                                    <c:set var="iconCdList" value="${fn:split(iconString, ',')}" />
                                                                    <c:forEach var = "iconCd" items="${iconCdList}">
                                                                        <c:if test = "${iconCd eq 'new'}">
-                                                                           <span class="product-badge new">NEW</span>
+                                                                           <span class="product-badge new" data-badge-cd="new">NEW</span>
                                                                        </c:if>
                                                                        <c:if test = "${iconCd eq 'hot'}">
-                                                                           <span class="product-badge hot">HOT</span>
+                                                                           <span class="product-badge hot" data-badge-cd="hot">HOT</span>
                                                                        </c:if>
                                                                        <c:if test = "${iconCd eq 'best'}">
-                                                                           <span class="product-badge best">BEST</span>
+                                                                           <span class="product-badge best" data-badge-cd="best">BEST</span>
                                                                        </c:if>
                                                                        <c:if test = "${iconCd eq 'md-pick'}">
-                                                                           <span class="product-badge md-pick">MD PICK</span>
+                                                                           <span class="product-badge md-pick" data-badge-cd="md-pick">MD PICK</span>
                                                                        </c:if>
                                                                        <c:if test = "${iconCd eq 'hot-deal'}">
-                                                                           <span class="product-badge four-row">HOT DEAL</span>
+                                                                           <span class="product-badge four-row" data-badge-cd="four-row">HOT DEAL</span>
                                                                        </c:if>
                                                                    </c:forEach>
                                                                    <div class="product-unit-info__inner">

src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsDtlR.jsp

@@ -3708,14 +3708,16 @@ const fn_move_goodsDtl_login = () => {
                                 <c:if test="${not empty resultMap.goodsDtl.goodsIconCd}">
                                     <div class="product-badge-container">
                                         <c:forTokens var="iconNm" items="${resultMap.goodsDtl.goodsIconCd}" delims=",">
-                                            <c:choose>
+                                            <c:set var="badgeMatched" value="false"/>
-                                                <c:when test="${fn:contains(iconNm,'-')}">
+                                            <c:forEach items="${resultMap.goodsBadgeList}" var="badge">
-                                                    <span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(fn:replace(iconNm, '-', ' '))}</span>
+                                                <c:if test="${badge.cd eq iconNm}">
-                                                </c:when>
+                                                    <span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}" data-badge-cd="${iconNm}" style="color: ${badge.fontColor} !important; background-color: ${badge.bgColor} !important; border-color: ${badge.borderColor} !important;">${badge.cdNm}</span>
-                                                <c:otherwise>
+                                                    <c:set var="badgeMatched" value="true"/>
-                                                    <span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(iconNm)}</span>
+                                                </c:if>
-                                                </c:otherwise>
+                                            </c:forEach>
-                                            </c:choose>
+                                            <c:if test="${not badgeMatched}">
+                                                <span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}" data-badge-cd="${iconNm}">${fn:toUpperCase(fn:replace(iconNm, '-', ' '))}</span>
+                                            </c:if>
                                         </c:forTokens>
                                     </div>
                                 </c:if>

src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsListR.jsp

@@ -94,10 +94,10 @@
                                                 <c:forEach items="${fn:split(list.iconCdNmList, ',')}" var="iconCdNm" varStatus="iconStatus">
                                                     <c:choose>
                                                         <c:when test="${fn:contains(iconCdNm, '-')}">
-                                                            <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+                                                            <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
                                                         </c:when>
                                                         <c:otherwise>
-                                                            <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+                                                            <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
                                                         </c:otherwise>
                                                     </c:choose>
                                                 </c:forEach>

src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsListRForm.jsp

@@ -205,9 +205,9 @@
                                 list += `                <div class="product-badge-container col order-${'${item.iconExpsrOrdr-1}'}" style="order: ${'${item.iconExpsrOrdr-1}'} ">`;
                                 for (const iconCdNm of item.iconCdNmList.split(',')){
                                     if(iconCdNm.indexOf('-') > -1){
-                                        list += `        <span class="product-badge ${'${iconCdNm.toLowerCase()}'}">${'${iconCdNm.toUpperCase().replace("-", " ")}'}</span>`;
+                                        list += `        <span class="product-badge ${'${iconCdNm.toLowerCase()}'}" data-badge-cd="${'${iconCdNm}'}">${'${iconCdNm.toUpperCase().replace("-", " ")}'}</span>`;
                                     }else{
-                                        list += `        <span class="product-badge ${'${iconCdNm.toLowerCase()}'}">${'${iconCdNm.toUpperCase()}'}</span>`;
+                                        list += `        <span class="product-badge ${'${iconCdNm.toLowerCase()}'}" data-badge-cd="${'${iconCdNm}'}">${'${iconCdNm.toUpperCase()}'}</span>`;
                                     }
                                 }
                             }

src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsSrchR.jsp

@@ -90,10 +90,10 @@
                                                     <c:forEach items="${fn:split(list.iconCdNmList, ',')}" var="iconCdNm" varStatus="iconStatus">
                                                         <c:choose>
                                                             <c:when test="${fn:contains(iconCdNm, '-')}">
-                                                                <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
+                                                                <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
                                                             </c:when>
                                                             <c:otherwise>
-                                                                <span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
+                                                                <span class="product-badge ${fn:toLowerCase(iconCdNm)}" data-badge-cd="${iconCdNm}">${fn:toUpperCase(iconCdNm)}</span>
                                                             </c:otherwise>
                                                         </c:choose>
                                                     </c:forEach>

src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsSrchRForm.jsp

@@ -195,9 +195,9 @@
                                 list += `                <div class="product-badge-container col order-${'${item.iconExpsrOrdr-1}'}" style="order: ${'${item.iconExpsrOrdr-1}'} ">`;
                                 for (const iconCdNm of item.iconCdNmList.split(',')){
                                     if(iconCdNm.indexOf('-') > -1){
-                                        list += `        <span class="product-badge ${'${iconCdNm.toLowerCase()}'}">${'${iconCdNm.toUpperCase().replace("-", " ")}'}</span>`;
+                                        list += `        <span class="product-badge ${'${iconCdNm.toLowerCase()}'}" data-badge-cd="${'${iconCdNm}'}">${'${iconCdNm.toUpperCase().replace("-", " ")}'}</span>`;
                                     }else{
-                                        list += `        <span class="product-badge ${'${iconCdNm.toLowerCase()}'}">${'${iconCdNm.toUpperCase()}'}</span>`;
+                                        list += `        <span class="product-badge ${'${iconCdNm.toLowerCase()}'}" data-badge-cd="${'${iconCdNm}'}">${'${iconCdNm.toUpperCase()}'}</span>`;
                                     }
                                 }
                             }