From dee18f86058982ae0d43205ab03cc761aa09f452 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A3=BC=EC=9D=BC?= <we1202@nate.com>
Date: Wed, 15 Jul 2026 18:09:39 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=87=BC=ED=95=91=EB=AA=B0=20=EC=83=81?=
 =?UTF-8?q?=ED=92=88=20=EB=B0=B0=EC=A7=80=20=EB=A7=88=EC=8A=A4=ED=84=B0=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../goods/goods/mapper/BOGoodsMapper.java     |  2 +
 .../goods/goods/service/BOGoodsService.java   |  9 +++
 .../controller/GoodsmngrController.java       | 16 ++---
 .../goods/controller/GoodsController.java     | 19 ++++++
 .../gcone/goods/goods/BOGoodsMapper.xml       | 14 +++++
 .../webapp/WEB-INF/views/comm/Include.jsp     | 38 +++++++++++-
 .../WEB-INF/views/comm/mobile/Include.jsp     | 38 +++++++++++-
 src/main/webapp/WEB-INF/views/index.jsp       | 60 +++++++++----------
 .../views/mngr/goods/goodsmngr/GoodsC.jsp     |  4 +-
 .../views/mngr/goods/goodsmngr/GoodsCopyC.jsp |  4 +-
 .../views/mngr/goods/goodsmngr/GoodsDtlU.jsp  |  4 +-
 src/main/webapp/WEB-INF/views/mobileMain.jsp  | 44 +++++++-------
 .../WEB-INF/views/sopmal/csc/BbscttDtlR.jsp   | 10 ++--
 .../WEB-INF/views/sopmal/goods/GoodsDtlR.jsp  | 20 ++++---
 .../WEB-INF/views/sopmal/goods/GoodsListR.jsp |  4 +-
 .../WEB-INF/views/sopmal/goods/GoodsSrchR.jsp |  4 +-
 .../views/sopmal/mpage/main/MpageMainR.jsp    |  4 +-
 .../WEB-INF/views/sopmal/ordr/SpbkPtinR.jsp   |  4 +-
 .../WEB-INF/views/sopmal_m/csc/BbscttDtlR.jsp | 10 ++--
 .../views/sopmal_m/goods/GoodsDtlR.jsp        | 20 ++++---
 .../views/sopmal_m/goods/GoodsListR.jsp       |  4 +-
 .../views/sopmal_m/goods/GoodsListRForm.jsp   |  4 +-
 .../views/sopmal_m/goods/GoodsSrchR.jsp       |  4 +-
 .../views/sopmal_m/goods/GoodsSrchRForm.jsp   |  4 +-
 24 files changed, 228 insertions(+), 116 deletions(-)

diff --git a/src/main/java/com/wb/domainserver/domain/gcone/goods/goods/mapper/BOGoodsMapper.java b/src/main/java/com/wb/domainserver/domain/gcone/goods/goods/mapper/BOGoodsMapper.java
index 438e08c8..bebbf1b8 100644
--- a/src/main/java/com/wb/domainserver/domain/gcone/goods/goods/mapper/BOGoodsMapper.java
+++ b/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);
 	// 관리자 > 일반 상품 상세
diff --git a/src/main/java/com/wb/domainserver/domain/gcone/goods/goods/service/BOGoodsService.java b/src/main/java/com/wb/domainserver/domain/gcone/goods/goods/service/BOGoodsService.java
index af5b66f5..b974094d 100644
--- a/src/main/java/com/wb/domainserver/domain/gcone/goods/goods/service/BOGoodsService.java
+++ b/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
diff --git a/src/main/java/com/wb/domainserver/domain/mngr/goods/goodsmngr/controller/GoodsmngrController.java b/src/main/java/com/wb/domainserver/domain/mngr/goods/goodsmngr/controller/GoodsmngrController.java
index bea03a66..f0507df0 100644
--- a/src/main/java/com/wb/domainserver/domain/mngr/goods/goodsmngr/controller/GoodsmngrController.java
+++ b/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();
-		maComncdVO.setGroupCd("GOODS_ICON");
-		List<?> iconList = bOMaComncdService.selectBOCommcdDetailList(maComncdVO);
+		// 상품 배지
+		List<DataMap> iconList = service.selectBOGoodsBadgeList(vo);
 		content.put("iconList", iconList);
 
 		// 실시간수량배너구분코드
@@ -664,10 +662,7 @@ public class GoodsmngrController {
 
 		content.put("goodsDftinfoInvntryPolicyList", cgo134List); // 재고에 따른 판매
 
-		maComncdVO = new BOMaComncdVO();
-		maComncdVO.setGroupCd("GOODS_ICON");
-
-		List<?> iconList = bOMaComncdService.selectBOCommcdDetailList(maComncdVO);
+		List<DataMap> iconList = service.selectBOGoodsBadgeList(vo);
 
 		//브랜드 목록조회
 
@@ -1466,10 +1461,7 @@ public class GoodsmngrController {
 
 		content.put("goodsDftinfoInvntryPolicyList", cgo134List); // 재고에 따른 판매
 
-		maComncdVO = new BOMaComncdVO();
-		maComncdVO.setGroupCd("GOODS_ICON");
-
-		List<?> iconList = bOMaComncdService.selectBOCommcdDetailList(maComncdVO);
+		List<DataMap> iconList = service.selectBOGoodsBadgeList(vo);
 
 		//브랜드 목록조회
 
diff --git a/src/main/java/com/wb/domainserver/domain/sopmal/goods/controller/GoodsController.java b/src/main/java/com/wb/domainserver/domain/sopmal/goods/controller/GoodsController.java
index 21eb760e..64debb74 100644
--- a/src/main/java/com/wb/domainserver/domain/sopmal/goods/controller/GoodsController.java
+++ b/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);
diff --git a/src/main/resources/mybatis/xml/mapper/gcone/goods/goods/BOGoodsMapper.xml b/src/main/resources/mybatis/xml/mapper/gcone/goods/goods/BOGoodsMapper.xml
index 2cd6a5b7..57017fed 100644
--- a/src/main/resources/mybatis/xml/mapper/gcone/goods/goods/BOGoodsMapper.xml
+++ b/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)">
diff --git a/src/main/webapp/WEB-INF/views/comm/Include.jsp b/src/main/webapp/WEB-INF/views/comm/Include.jsp
index bde31ad9..e4413ff5 100644
--- a/src/main/webapp/WEB-INF/views/comm/Include.jsp
+++ b/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>
 
@@ -488,4 +524,4 @@
 <!--로딩영역-->
 <div class="loadingImg" style="display:none; position: relative; z-index: 1010;">
     <div class="loding_popup_wrap"><img src="/mobile/images/loading.svg" alt="loading"></div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/main/webapp/WEB-INF/views/comm/mobile/Include.jsp b/src/main/webapp/WEB-INF/views/comm/mobile/Include.jsp
index 71b30936..767b25d6 100644
--- a/src/main/webapp/WEB-INF/views/comm/mobile/Include.jsp
+++ b/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>
@@ -1272,4 +1308,4 @@ $(document).on('click', '[name^="globalMbrMarktAgreeAt"]',function() {
 
 })
 </script>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/webapp/WEB-INF/views/index.jsp b/src/main/webapp/WEB-INF/views/index.jsp
index dc078dce..cb1a6740 100644
--- a/src/main/webapp/WEB-INF/views/index.jsp
+++ b/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>';
 						}
 					});
 				}
diff --git a/src/main/webapp/WEB-INF/views/mngr/goods/goodsmngr/GoodsC.jsp b/src/main/webapp/WEB-INF/views/mngr/goods/goodsmngr/GoodsC.jsp
index dc3a0657..7bc424cc 100644
--- a/src/main/webapp/WEB-INF/views/mngr/goods/goodsmngr/GoodsC.jsp
+++ b/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>
@@ -4584,4 +4584,4 @@
         }
     });
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/main/webapp/WEB-INF/views/mngr/goods/goodsmngr/GoodsCopyC.jsp b/src/main/webapp/WEB-INF/views/mngr/goods/goodsmngr/GoodsCopyC.jsp
index 17b8ca09..7d9c1399 100644
--- a/src/main/webapp/WEB-INF/views/mngr/goods/goodsmngr/GoodsCopyC.jsp
+++ b/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>
 
@@ -5671,4 +5671,4 @@
     }
 
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/main/webapp/WEB-INF/views/mngr/goods/goodsmngr/GoodsDtlU.jsp b/src/main/webapp/WEB-INF/views/mngr/goods/goodsmngr/GoodsDtlU.jsp
index f37553e2..e9cb075c 100644
--- a/src/main/webapp/WEB-INF/views/mngr/goods/goodsmngr/GoodsDtlU.jsp
+++ b/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>
 
@@ -6188,4 +6188,4 @@
     }
 
 
-</script>
\ No newline at end of file
+</script>
diff --git a/src/main/webapp/WEB-INF/views/mobileMain.jsp b/src/main/webapp/WEB-INF/views/mobileMain.jsp
index 71ce4be8..471438e2 100644
--- a/src/main/webapp/WEB-INF/views/mobileMain.jsp
+++ b/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>';
 						}
 					});
 				}
diff --git a/src/main/webapp/WEB-INF/views/sopmal/csc/BbscttDtlR.jsp b/src/main/webapp/WEB-INF/views/sopmal/csc/BbscttDtlR.jsp
index 364e1ddf..1404207c 100644
--- a/src/main/webapp/WEB-INF/views/sopmal/csc/BbscttDtlR.jsp
+++ b/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>
diff --git a/src/main/webapp/WEB-INF/views/sopmal/goods/GoodsDtlR.jsp b/src/main/webapp/WEB-INF/views/sopmal/goods/GoodsDtlR.jsp
index 0c630eaf..1debb48c 100644
--- a/src/main/webapp/WEB-INF/views/sopmal/goods/GoodsDtlR.jsp
+++ b/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:when test="${fn:contains(iconNm,'-')}">
-                                                    <span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(fn:replace(iconNm, '-', ' '))}</span>
-                                                </c:when>
-                                                <c:otherwise>
-                                                    <span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(iconNm)}</span>
-                                                </c:otherwise>
-                                            </c:choose>
+                                            <c:set var="badgeMatched" value="false"/>
+                                            <c:forEach items="${resultMap.goodsBadgeList}" var="badge">
+                                                <c:if test="${badge.cd eq iconNm}">
+                                                    <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:set var="badgeMatched" value="true"/>
+                                                </c:if>
+                                            </c:forEach>
+                                            <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>
@@ -4835,4 +4837,4 @@
         </div>
     </div>
 </div>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/webapp/WEB-INF/views/sopmal/goods/GoodsListR.jsp b/src/main/webapp/WEB-INF/views/sopmal/goods/GoodsListR.jsp
index c19a5fd2..3ff53d93 100644
--- a/src/main/webapp/WEB-INF/views/sopmal/goods/GoodsListR.jsp
+++ b/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>
diff --git a/src/main/webapp/WEB-INF/views/sopmal/goods/GoodsSrchR.jsp b/src/main/webapp/WEB-INF/views/sopmal/goods/GoodsSrchR.jsp
index a27f4197..5596b99a 100644
--- a/src/main/webapp/WEB-INF/views/sopmal/goods/GoodsSrchR.jsp
+++ b/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>
diff --git a/src/main/webapp/WEB-INF/views/sopmal/mpage/main/MpageMainR.jsp b/src/main/webapp/WEB-INF/views/sopmal/mpage/main/MpageMainR.jsp
index d0f09ef6..6c4b4deb 100644
--- a/src/main/webapp/WEB-INF/views/sopmal/mpage/main/MpageMainR.jsp
+++ b/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>
diff --git a/src/main/webapp/WEB-INF/views/sopmal/ordr/SpbkPtinR.jsp b/src/main/webapp/WEB-INF/views/sopmal/ordr/SpbkPtinR.jsp
index b7eadd3f..cf7075f0 100644
--- a/src/main/webapp/WEB-INF/views/sopmal/ordr/SpbkPtinR.jsp
+++ b/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>
diff --git a/src/main/webapp/WEB-INF/views/sopmal_m/csc/BbscttDtlR.jsp b/src/main/webapp/WEB-INF/views/sopmal_m/csc/BbscttDtlR.jsp
index 4320a498..bbcde0c9 100644
--- a/src/main/webapp/WEB-INF/views/sopmal_m/csc/BbscttDtlR.jsp
+++ b/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">
diff --git a/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsDtlR.jsp b/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsDtlR.jsp
index 933964fe..dfdc03b4 100644
--- a/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsDtlR.jsp
+++ b/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:when test="${fn:contains(iconNm,'-')}">
-                                                    <span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(fn:replace(iconNm, '-', ' '))}</span>
-                                                </c:when>
-                                                <c:otherwise>
-                                                    <span class="product-badge product-badge--lg ${fn:toLowerCase(iconNm)}"> ${fn:toUpperCase(iconNm)}</span>
-                                                </c:otherwise>
-                                            </c:choose>
+                                            <c:set var="badgeMatched" value="false"/>
+                                            <c:forEach items="${resultMap.goodsBadgeList}" var="badge">
+                                                <c:if test="${badge.cd eq iconNm}">
+                                                    <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:set var="badgeMatched" value="true"/>
+                                                </c:if>
+                                            </c:forEach>
+                                            <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>
@@ -4805,4 +4807,4 @@ const fn_move_goodsDtl_login = () => {
     </div>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsListR.jsp b/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsListR.jsp
index caa1f21c..ea84753d 100644
--- a/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsListR.jsp
+++ b/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>
diff --git a/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsListRForm.jsp b/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsListRForm.jsp
index 2e0029a8..3aca0598 100644
--- a/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsListRForm.jsp
+++ b/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>`;
                                     }
                                 }
                             }
diff --git a/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsSrchR.jsp b/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsSrchR.jsp
index 35857dc1..6a775bfb 100644
--- a/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsSrchR.jsp
+++ b/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>
diff --git a/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsSrchRForm.jsp b/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsSrchRForm.jsp
index 03467dbe..eb716fd0 100644
--- a/src/main/webapp/WEB-INF/views/sopmal_m/goods/GoodsSrchRForm.jsp
+++ b/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>`;
                                     }
                                 }
                             }