구디즈니 작업 중

.prettierrc

@@ -1,4 +1,4 @@
 {
-  "printWidth": 99999,
+    "printWidth": 99999,
-  "tabWidth": 4
+    "tabWidth": 2
 }

kr/assets/css/pdp_detail.css

@@ -4296,6 +4296,7 @@
   }
 }
 .displayThemeDesney .image_area {
+  position: relative;
   max-width: 100%;
 }
 .displayThemeDesney .image_area img {
@@ -4572,6 +4573,20 @@
 .displayThemeDesney.comp_2x_b_h_s_e2 .text_area {
   text-align: left;
 }
+.displayThemeDesney .btn-zoom {
+  display: block;
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  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;
@@ -4584,4 +4599,50 @@
 .moblie .displayThemeDesney .web {
   display: none;
 }
+
+.pdp-zoom {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* 팝업에 overflow 방지 */
+  overflow: hidden;
+}
+
+.zoom-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  /* 회전 + 위치 보정 */
+  transform-origin: center center;
+}
+
+.pdp-zoom img,
+.pdp-zoom video {
+  width: 100%;
+  height: auto;
+  max-width: none;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.btn-close-zoom {
+  display: block;
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+  width: 2.4rem;
+  height: 2.4rem;
+  text-indent: -9999em;
+  background: url(../images/kia/pdp/display_theme_disney/btn_zoom_close.png) no-repeat 0 0/100% auto;
+  cursor: pointer;
+}
 /*# sourceMappingURL=pdp_detail.css.map */

kr/assets/js/common.js

@@ -1327,8 +1327,21 @@ function pdpDisplayTab(button, element) {
     $(".pdpDetail .tab-menu ul").slideUp(200);
   }
 }
-function pdpDisplayTabMobile() {
+
-  // tabmenu 기능 구현
+function pdpDisplayZoom(selector) {
-  const molbileTabBtn = $(".pdpDetail .tab-menu .btn-select");
+  const $target = $(selector).clone();
-  molbileTabBtn.toggleClass("open").next().slideToggle(200);
+
+  const $popup = $(`
+        <div class="pdp-zoom">
+          <div class="zoom-wrapper"></div>
+          <button class="btn-close-zoom">닫기</button>
+        </div>
+      `);
+
+  $popup.find(".zoom-wrapper").append($target);
+  $("body").append($popup);
+
+  $(".btn-close-zoom").on("click", function () {
+    $popup.remove();
+  });
 }

kr/product/pdp_display_theme_disney.html

@@ -439,16 +439,18 @@
                   <div class="inner">
                     <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>
+                        <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                           <source src="../assets/images/kia/pdp/display_theme_disney/welcome.mp4" type="video/mp4" />
                           이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                         </video>
+                        <button type="button" class="btn-zoom" onclick="pdpDisplayZoom('.video-welcome')"></button>
                       </div>
                       <div class="image_area">
-                        <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
+                        <video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                           <source src="../assets/images/kia/pdp/display_theme_disney/goodbye.mp4" type="video/mp4" />
                           이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                         </video>
+                        <button type="button" class="btn-zoom" onclick="pdpDisplayZoom('.video-goodbye')"></button>
                       </div>
 
                       <div class="text_area">
@@ -459,7 +461,8 @@
 
                     <div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
                       <div class="image_area">
-                        <img src="../assets/images/kia/pdp/display_theme_disney/img_cont3.png" class="themeImg" alt="디스플레이 테마1" />
+                        <img src="../assets/images/kia/pdp/display_theme_disney/img_cont3.png" class="themeImg box1-cluster" alt="디스플레이 테마1" />
+                        <button type="button" class="btn-zoom" onclick="pdpDisplayZoom('.box1-cluster')"></button>
                       </div>
                       <div class="text_area">
                         <h4>Cluster</h4>
@@ -469,7 +472,8 @@
 
                     <div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
                       <div class="image_area">
-                        <img src="../assets/images/kia/pdp/display_theme_disney/img_cont4.png" class="themeImg" alt="디스플레이 테마1" />
+                        <img src="../assets/images/kia/pdp/display_theme_disney/img_cont4.png" class="themeImg box1-navigation" alt="디스플레이 테마1" />
+                        <button type="button" class="btn-zoom" onclick="pdpDisplayZoom('.box1-navigation')"></button>
                       </div>
                       <div class="text_area">
                         <h4>Navigation</h4>
@@ -479,7 +483,8 @@
 
                     <div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
                       <div class="image_area">
-                        <img src="../assets/images/kia/pdp/display_theme_disney/img_cont5.png" class="themeImg" alt="디스플레이 테마1" />
+                        <img src="../assets/images/kia/pdp/display_theme_disney/img_cont5.png" class="themeImg box1-homecard" alt="디스플레이 테마1" />
+                        <button type="button" class="btn-zoom" onclick="pdpDisplayZoom('.box1-homecard')"></button>
                       </div>
                       <div class="text_area">
                         <h4>Homecard</h4>
@@ -489,7 +494,8 @@
 
                     <div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
                       <div class="image_area">
-                        <img src="../assets/images/kia/pdp/display_theme_disney/img_cont6.png" class="themeImg" alt="디스플레이 테마1" />
+                        <img src="../assets/images/kia/pdp/display_theme_disney/img_cont6.png" class="themeImg box1-profile" alt="디스플레이 테마1" />
+                        <button type="button" class="btn-zoom" onclick="pdpDisplayZoom('.box1-profile')"></button>
                       </div>
                       <div class="text_area">
                         <h4>Profile</h4>