디즈니 어드민에 맞춰 수정

kr/assets/css/pdp_detail.css

@@ -4176,7 +4176,7 @@
     width: auto;
   }
 }
-.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li button {
+.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li .tab-btn {
   display: flex;
   align-items: center;
   width: 100%;
@@ -4188,7 +4188,7 @@
   cursor: pointer;
 }
 @media (min-width: 768px) {
-  .displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li button {
+  .displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li .tab-btn {
     width: auto;
     height: 4.3rem;
     padding: 0 1.6rem 0 1.2rem;
@@ -4197,7 +4197,7 @@
     border-radius: 2.2rem;
     border: 0.2rem solid rgba(255, 255, 255, 0.2);
   }
-  .displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li button:before {
+  .displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li .tab-btn:before {
     content: "";
     display: block;
     width: 2.2rem;
@@ -4206,16 +4206,16 @@
     background: url(../images/kia/pdp/display_theme_disney/ico_tab.png) no-repeat center top/100% auto;
   }
 }
-.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active button {
+.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active .tab-btn {
   color: #fff;
 }
 @media (min-width: 768px) {
-  .displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active button {
+  .displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active .tab-btn {
     border: 0;
     background: linear-gradient(90deg, #ed1c24 0%, #b51016 100%);
     padding: 0 1.8rem 0 1.4rem;
   }
-  .displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active button:before {
+  .displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active .tab-btn:before {
     background-image: url(../images/kia/pdp/display_theme_disney/ico_tab_active.png);
   }
 }
@@ -4576,17 +4576,12 @@
 .displayThemeDesney .btn-zoom {
   display: block;
   position: absolute;
-  top: 1rem;
+  top: 0;
-  right: 1rem;
+  right: 0;
   width: 2.4rem;
   height: 2.4rem;
   background: url(../images/kia/pdp/display_theme_disney/btn_zoom.png) no-repeat 0 0/100% auto;
 }
-@media (min-width: 768px) {
-  .displayThemeDesney .btn-zoom {
-    display: none;
-  }
-}
 
 .desktop .displayThemeDesney .mobile {
   display: none;

kr/assets/js/common.js

@@ -4,6 +4,41 @@ $(document).ready(function () {
     history.scrollRestoration = "manual";
   }
 
+  $(document).on("click", ".pdpDetail .tab-menu .tab-btn", function () {
+    const $thisBtn = $(this);
+    const $tabWrap = $(".pdpDetail .tab-wrap");
+    const $tabBtns = $(".pdpDetail .tab-menu .tab-btn");
+    const $tabContents = $(".pdpDetail .tab-box");
+    const currentIndex = $tabBtns.index($thisBtn); // index 구하기
+    const currentTabBtnText = $thisBtn.text();
+
+    // 탭 버튼 active 처리
+    $tabBtns.closest("li").removeClass("active");
+    $thisBtn.closest("li").addClass("active");
+
+    // 탭 콘텐츠 show/hide
+    $tabContents.hide().eq(currentIndex).show();
+
+    // 스크롤 이동
+    $("html, body").animate(
+      {
+        scrollTop: $tabWrap.offset().top - 60,
+      },
+      200
+    );
+
+    // 모바일/태블릿 메뉴 닫기
+    if ($("body").hasClass("moblie") || $("body").hasClass("tablet")) {
+      $(".pdpDetail .tab-menu .btn-select").removeClass("open").text(currentTabBtnText);
+      $(".pdpDetail .tab-menu ul").slideUp(200);
+    }
+  });
+
+  $(document).on("click", ".pdpDetail .tab-menu .btn-select", function () {
+    const $this = $(this);
+    $this.toggleClass("open").next().slideToggle(200);
+  });
+
   //윈도우 사이즈 반응형에 따른 스크립트
   const body = document.querySelector("body");
   var targetSize = "";

kr/product/pdp_display_theme_disney.html

@@ -422,13 +422,13 @@
             <div class="tab-wrap">
               <div class="tab-menu cont-select">
                 <div class="inner">
-                  <button class="btn-select" onclick="pdpDisplayTabMobile()">Marvel’s Avengers Comics</button>
+                  <div class="btn-select">Marvel’s Avengers Comics</div>
                   <ul>
                     <li class="active">
-                      <button type="button" onclick="pdpDisplayTab(this, '.box1')">Marvel’s Avengers Comics</button>
+                      <span class="tab-btn">Marvel’s Avengers Comics</span>
                     </li>
                     <li>
-                      <button type="button" onclick="pdpDisplayTab(this, '.box2')">Marvel’s Avengers Assemble</button>
+                      <span class="tab-btn">Marvel’s Avengers Assemble</span>
                     </li>
                   </ul>
                 </div>
@@ -551,9 +551,7 @@
                     <div class="tit-area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
                       <h3>
                         What’s <br />Coming Up <br />
-                        <span class="next"
+                        <span class="next">Next<i class="speech-bubble">Stay tuned for the next <br />Marvel Display Themes!</i></span>?
-                          >Next<i class="speech-bubble">Stay tuned for the next <br />Marvel Display Themes!</i></span
-                        >?
                       </h3>
                     </div>
                     <div class="image_area">
@@ -570,13 +568,13 @@
                     <div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
                       <div class="image_area">
                         <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
-                          <source src="../assets/images/kia/pdp/display_theme_disney/welcome2.mp4" type="video/mp4" />
+                          <source src="../assets/images/kia/pdp/display_theme_disney/lakers_welcome.mp4" type="video/mp4" />
                           이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                         </video>
                       </div>
                       <div class="image_area">
                         <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
-                          <source src="../assets/images/kia/pdp/display_theme_disney/goodbye2.mp4" type="video/mp4" />
+                          <source src="../assets/images/kia/pdp/display_theme_disney/lakers_goodbye.mp4" type="video/mp4" />
                           이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                         </video>
                       </div>
@@ -681,9 +679,7 @@
                     <div class="tit-area">
                       <h3>
                         What’s <br />Coming Up <br />
-                        <span class="next"
+                        <span class="next">Next<em class="speech-bubble">Stay tuned for the next <br />Marvel Display Themes!</em>?</span>
-                          >Next<i class="speech-bubble">Stay tuned for the next <br />Marvel Display Themes!</i></span
-                        >?
                       </h3>
                     </div>
                     <div class="image_area">