GNB & 차량 리스트 개선 UX _20250804

kr/assets/css/common.css

@@ -1227,6 +1227,13 @@ video::-webkit-media-controls {
   align-items: center;
   height: 8rem;
 }
+@media (min-width: 1025px) {
+  .hederWarp_n .headerInner .func .carlist .carItem {
+    height: 3.2rem;
+    padding: 0 1.2rem;
+    border: 1px solid #dedede;
+  }
+}
 .hederWarp_n .headerInner .func .carlist .carItem::after {
   content: "";
   display: block;
@@ -1236,10 +1243,20 @@ video::-webkit-media-controls {
   background: url("../images/common/icon-wtbarrow.svg") center right no-repeat;
   background-size: 1.2rem;
 }
+@media (min-width: 1025px) {
+  .hederWarp_n .headerInner .func .carlist .carItem::after {
+    margin-left: 2rem;
+  }
+}
 .hederWarp_n .headerInner .func .carlist .carItem:hover, .hederWarp_n .headerInner .func .carlist .carItem:focus {
   border: none;
   outline: none;
 }
+@media (min-width: 1025px) {
+  .hederWarp_n .headerInner .func .carlist .carItem:hover, .hederWarp_n .headerInner .func .carlist .carItem:focus {
+    border: 1px solid #dedede;
+  }
+}
 .hederWarp_n .headerInner .func .carlist .carItem.on::after {
   transform: rotate(-180deg);
   background-position-x: left;
@@ -1277,6 +1294,15 @@ video::-webkit-media-controls {
   left: 50%;
   transform: translate(-50%, 0);
 }
+@media (min-width: 1025px) {
+  .hederWarp_n .headerInner .func .carlist .carlistItem {
+    top: 3.2rem;
+    left: 0;
+    right: 0;
+    transform: initial;
+    width: 100%;
+  }
+}
 .hederWarp_n .headerInner .func .carlist .carlistItem.on {
   display: block;
 }
@@ -1300,6 +1326,28 @@ video::-webkit-media-controls {
   background-color: #fff;
   border: 1px solid #dedede;
 }
+@media (min-width: 1025px) {
+  .hederWarp_n .headerInner .func .carlist .carlistItem ul {
+    margin-top: 0.5rem;
+    padding: 1.2rem;
+    max-height: 70rem;
+    overflow-y: auto;
+    /* WebKit 기반 브라우저용 스크롤바 스타일 */
+  }
+  .hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar {
+    width: 0.4rem; /* 폭 4px */
+  }
+  .hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar-track {
+    background: transparent; /* 트랙 투명 */
+  }
+  .hederWarp_n .headerInner .func .carlist .carlistItem ul::-webkit-scrollbar-thumb {
+    background-color: #dedede; /* 스크롤바 색상 */
+    border-radius: 0.2rem;
+  }
+}
+.hederWarp_n .headerInner .func .carlist .carlistItem ul li {
+  align-items: center;
+}
 .hederWarp_n .headerInner .func .carlist .carlistItem ul li a {
   display: flex;
   font-size: 1.4rem;
@@ -1309,13 +1357,18 @@ video::-webkit-media-controls {
   color: #000;
 }
 .hederWarp_n .headerInner .func .carlist .carlistItem ul li a span {
-  color: #9ea1a2;
+  color: #05141f;
   font-weight: 400;
   display: flex;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }
+@media (min-width: 1025px) {
+  .hederWarp_n .headerInner .func .carlist .carlistItem ul li a span {
+    display: inline;
+  }
+}
 .hederWarp_n .headerInner .func .carlist .carlistItem ul li a span + span::before {
   content: "";
   display: block;
@@ -1325,9 +1378,69 @@ video::-webkit-media-controls {
   margin-left: 1rem;
   margin-right: 1rem;
 }
+@media (min-width: 1025px) {
+  .hederWarp_n .headerInner .func .carlist .carlistItem ul li a {
+    position: relative;
+    display: inline;
+  }
+}
+.hederWarp_n .headerInner .func .carlist .carlistItem ul li button {
+  display: inline;
+}
+@media (min-width: 1025px) {
+  .hederWarp_n .headerInner .func .carlist .carlistItem ul li {
+    position: relative;
+    padding-left: 2rem;
+  }
+  .hederWarp_n .headerInner .func .carlist .carlistItem ul li > span {
+    display: inline;
+  }
+  .hederWarp_n .headerInner .func .carlist .carlistItem ul li button {
+    text-align: left;
+  }
+}
+.hederWarp_n .headerInner .func .carlist .carlistItem ul li .btn-info {
+  display: inline-block;
+  position: relative;
+  width: 1.3rem;
+  height: 1.3rem;
+  margin-left: 0.4rem;
+  background: url("../images/common/ico_info.png") center center no-repeat;
+  background-size: 1.3rem auto;
+  cursor: pointer;
+}
+.hederWarp_n .headerInner .func .carlist .carlistItem ul li .btn-info:hover .tooltip {
+  display: flex;
+  left: -2.4rem;
+  top: 2.4rem;
+}
+.hederWarp_n .headerInner .func .carlist .carlistItem ul li:before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  width: 1.4rem;
+  height: 1.4rem;
+  margin-right: 0.4rem;
+}
+.hederWarp_n .headerInner .func .carlist .carlistItem ul li.selected:before {
+  content: "";
+  display: block;
+  width: 1.4rem;
+  height: 1.4rem;
+  background: url("../images/common/ico_selected.png") center center no-repeat;
+  background-size: 1.4rem auto;
+}
 .hederWarp_n .headerInner .func .carlist .carlistItem ul li + li {
   margin-top: 1rem;
 }
+@media (min-width: 1025px) {
+  .hederWarp_n .headerInner .func .carlist .carlistItem ul li + li {
+    margin-top: 1.2rem;
+  }
+}
 .hederWarp_n .headerInner .func .userLogin {
   position: relative;
   display: block;
@@ -4325,7 +4438,6 @@ video::-webkit-media-controls {
 }
 .agree-result .popInner .tableStyle {
   border-top: 1px solid #dedede;
-  border-bottom: 1px solid #dedede;
   margin-top: 3rem;
   margin-bottom: 5rem;
 }
@@ -4393,4 +4505,32 @@ video::-webkit-media-controls {
     display: block;
   }
 }
+
+.tooltip {
+  display: none;
+  position: absolute;
+  z-index: 1;
+}
+
+.tooltip-bubble {
+  position: relative;
+  padding: 1.6rem 1.6rem 1.4rem;
+  background: #fff;
+  border: 1px solid #0b1320; /* 테두리 추가 */
+  border-radius: 0.6rem;
+  font-size: 1.4rem;
+  color: #0b1320;
+  filter: drop-shadow(0 0.2rem 0.8rem rgba(0, 0, 0, 0.18));
+}
+.tooltip-bubble .edge {
+  position: absolute;
+  top: -0.7rem; /* border 두께 때문에 살짝 조정 */
+  left: 2.4rem;
+  width: 1.2rem;
+  height: 1.2rem;
+  background: #fff;
+  border-left: 1px solid #0b1320; /* 포인터 테두리 */
+  border-top: 1px solid #0b1320;
+  transform: rotate(45deg);
+}
 /*# sourceMappingURL=common.css.map */

kr/assets/js/common.js

@@ -1392,3 +1392,95 @@ function btnActive(selector) {
   const selectedText = selectedValue.next(".coupon-item").find("strong").text();
   $(".coupon-active strong").text(selectedText);
 }
+
+// 동적으로 추가되는 .btn-info 요소를 위한 이벤트
+$(document).on("mouseenter", ".carlist .btn-info", function (e) {
+  // 이미 툴팁이 있다면 제거
+  $(".tooltip").remove();
+
+  const $btn = $(this);
+  const $tooltip = $('<div class="tooltip"></div>');
+
+  // 툴팁 내용 설정
+  const tooltipText = $btn.data("tooltip") || "정보를 확인하세요";
+  console.log("🚀 ~ tooltipText:", $btn.attr("data-tooltip"));
+  $tooltip.html('<div class="tooltip-bubble"><em class="edge"></em>' + tooltipText + "</div>");
+
+  // 툴팁을 .carlist에 추가
+  $(".carlist").append($tooltip);
+
+  // .carlist 요소의 offset 정보 가져오기
+  const $carlist = $(".carlist");
+  const carlistOffset = $carlist.offset();
+  const carlistScrollTop = $carlist.scrollTop();
+  const carlistScrollLeft = $carlist.scrollLeft();
+
+  // 툴팁 위치 계산
+  const tooltipWidth = $tooltip.outerWidth();
+  const tooltipHeight = $tooltip.outerHeight();
+
+  // .carlist 내에서의 상대적 위치 계산
+  let left = e.pageX - carlistOffset.left + carlistScrollLeft - tooltipWidth / 2;
+  let top = e.pageY - carlistOffset.top + carlistScrollTop - tooltipHeight + 70;
+
+  // .carlist 내에서의 경계 체크
+  const carlistWidth = $carlist.width();
+  const carlistHeight = $carlist.height();
+  const padding = 10; // 경계에서의 여백
+
+  // 오른쪽 경계 체크 - 툴팁이 오른쪽으로 넘어가면 경계에 딱 붙게
+  if (left + tooltipWidth > carlistWidth - padding) {
+    left = carlistWidth - tooltipWidth - padding;
+    $(".tooltip").addClass("right");
+    console.log("오른쪽 경계에 딱 붙음");
+  }
+
+  // 왼쪽 경계 체크 - 툴팁이 왼쪽으로 넘어가면 경계에 딱 붙게
+  if (left < padding) {
+    left = padding;
+    $(".tooltip").addClass("left");
+    console.log("왼쪽 경계에 딱 붙음");
+  }
+
+  // 툴팁 위치 설정
+  $tooltip.css({
+    position: "absolute",
+    left: left + "px",
+    top: top + "px",
+    zIndex: 9999,
+  });
+
+  // .edge 요소를 .btn-info 요소 위치로 이동
+  const $edge = $tooltip.find(".edge");
+  const edgeWidth = $edge.outerWidth();
+  const edgeHeight = $edge.outerHeight();
+
+  // .btn-info 요소의 위치 정보 가져오기
+  const btnOffset = $btn.offset();
+  const btnWidth = $btn.outerWidth();
+
+  // .btn-info 요소가 툴팁 내에서의 상대적 위치 계산
+  const btnXInTooltip = btnOffset.left - carlistOffset.left + carlistScrollLeft - left + btnWidth / 2;
+  const btnYInTooltip = btnOffset.top - carlistOffset.top + carlistScrollTop - top;
+
+  // .edge 요소의 위치 설정 (.btn-info 요소 위치 기준)
+  $edge.css({
+    position: "absolute",
+    left: btnXInTooltip - edgeWidth / 2 + "px",
+  });
+
+  // 툴팁 표시
+  $tooltip.fadeIn(200);
+});
+
+$(document).on("mouseleave", ".btn-info", function () {
+  $(".tooltip").fadeOut(200, function () {
+    $(this).remove();
+  });
+});
+
+$(document).on("mouseleave", ".tooltip", function () {
+  $(this).fadeOut(200, function () {
+    $(this).remove();
+  });
+});

kr/mypage/coupon-list_new.html

@@ -86,8 +86,9 @@
             <div class="mobileCarlist">
               <a href="javascript:void(0)" class="mobilecarItem">
                 <div class="item">
-                  <span>MV</span>
+                  <!-- <span>MV</span>
-                  <span>161어 1660</span>
+                  <span>161어 1660</span> -->
+                  쏘렌토(MQ4) 하이브리드-플러그인 상품성개선
                 </div>
                 <div class="arrow"></div>
               </a>
@@ -180,8 +181,9 @@
           <!-- PC 전용 차량 선택 UI입니다. -->
           <div class="carlist">
             <a href="javascript:void(0)" class="carItem">
-              <span>MV</span>
+              <!-- <span>MV</span>
-              <span>161어 1660</span>
+              <span>161어 1660</span> -->
+              <span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</span>
             </a>
             <div class="carlistItem">
               <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
@@ -189,23 +191,155 @@
                 <path d="M1 9L7 1L13 9" stroke="#DEDEDE" />
               </svg>
               <ul>
-                <li>
+                <li class="selected">
                   <a href="javascript:void(0)">
-                    <span>MV</span>
+                    <span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선플러그인 상품성개선</span>
-                    <span>KMTKEXXBPMU000081</span>
                   </a>
+                  <button type="button" class="btn-info" data-tooltip="111JH4TB2H26CC012345"></button>
                 </li>
                 <li>
                   <a href="javascript:void(0)">
-                    <span>SX</span>
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
-                    <span>161어 1660</span>
                   </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
                 </li>
                 <li>
                   <a href="javascript:void(0)">
-                    <span>MV</span>
+                    <span>스포티지 개조</span>
-                    <span>452허 1234</span>
                   </a>
+                  <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>스포티지 개조</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>스포티지 개조</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>스포티지 개조</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>스포티지 개조</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>스포티지 개조</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <a href="javascript:void(0)">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드하이브리드 리드</span>
+                  </a>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
                 </li>
               </ul>
             </div>