20240429 수정

assets/css/pdp_detail.css

@@ -2669,6 +2669,10 @@
 .theme-story .btn-dtthumb {
   position: relative;
 }
+.theme-story .btn-dtthumb.active .dtthumb {
+  border-color: rgb(248, 196, 12);
+  background-color: rgba(253, 224, 68, 0.5);
+}
 .theme-story .dtthumb {
   display: flex;
   align-items: center;

assets/css/pdp_detail.scss

@@ -2558,6 +2558,12 @@
     .tooltip {display: none;}
     .btn-dtthumb {
         position: relative;
+        &.active {
+            .dtthumb {
+                border-color: rgba(248, 196, 12, 1);
+                background-color: rgba(253, 224, 68, 0.5);
+            }
+        }
     }
     .dtthumb {
         display: flex;

assets/js/common.js

@@ -538,12 +538,14 @@ $(document).on("click", ".displayTheme .dtthumb", function() {
         $('.displayTheme .tooltip').remove();
     }
 
+    $('.theme-story .btn-dtthumb').removeClass('active');
+
     const dtthumbItem = $(this).html();
-    const dtthumbItemValue = $(this).attr("value");
-    const dtthumbSelectedItem = $(`.pdpDisplayThemeSwiper .dtthumb[value=${dtthumbItemValue}]`)
+    const dtthumbSelectedItem = $(`.pdpDisplayThemeSwiper .dtthumb[value=${dtlImgPath}]`)
+    const dtthumbHisSelectedItem = $(`.theme-story .dtthumb[value=${dtlImgPath}]`).parent();
     const dtthumbItemHtml = `
-    <div class="btn-dtthumb">
-        <button class="dtthumb" value="${dtthumbItemValue}">
+    <div class="btn-dtthumb active">
+        <button class="dtthumb" value="${dtlImgPath}">
             ${dtthumbItem}
         </button>
         <div class="btn-remove">x</div>
@@ -552,6 +554,7 @@ $(document).on("click", ".displayTheme .dtthumb", function() {
 
     $(".dtthumb").removeClass("active");
     dtthumbSelectedItem.addClass("active");
+    dtthumbHisSelectedItem.addClass("active");
 
     $('.dtlImgs .item').addClass('change')
     setTimeout(function() {