gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GNB & 차량 리스트 개선 UX _20250804

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-08-10 22:12:44 +09:00
parent 02a97a7e88
commit e51a668184
7 changed files with 5029 additions and 4537 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
kr/assets/css/common.css
View File

@@ -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 */

2
kr/assets/css/common.css.map
View File

File diff suppressed because one or more lines are too long

296
kr/assets/css/common.scss
View File

@@ -137,7 +137,7 @@ video::-webkit-media-controls {
min-width: 2.2rem;
}
span+span {
span + span {
&::before {
content: "";
display: block;
@@ -188,7 +188,8 @@ video::-webkit-media-controls {
left: 50%;
transform: translate(-50%, 0);
@include desktopMin {}
@include desktopMin {
}
.boxBullet {
display: none;
@@ -233,7 +234,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -243,7 +244,7 @@ video::-webkit-media-controls {
display: block;
}
.carItem.on+.carlistItem {
.carItem.on + .carlistItem {
display: block;
}
}
@@ -356,7 +357,7 @@ video::-webkit-media-controls {
}
}
button+button {
button + button {
border-right: 0;
}
@@ -378,7 +379,7 @@ video::-webkit-media-controls {
padding: 0;
}
>a {
> a {
display: none;
@include desktopMin {
@@ -419,7 +420,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 2rem;
}
}
@@ -455,7 +456,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 3rem;
@include desktopMin {
@@ -484,7 +485,7 @@ video::-webkit-media-controls {
display: block;
}
>a {
> a {
display: none;
@include desktopMin {
@@ -532,7 +533,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -543,7 +544,7 @@ video::-webkit-media-controls {
}
}
.menu+.user {
.menu + .user {
margin-left: 2rem;
}
}
@@ -555,7 +556,7 @@ video::-webkit-media-controls {
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.mMenuWarp+.cart {
.mMenuWarp + .cart {
margin-left: 0;
@include desktopMin {
@@ -564,7 +565,7 @@ video::-webkit-media-controls {
}
.cart {
>a {
> a {
display: flex;
align-items: center;
height: 5.6rem;
@@ -652,7 +653,7 @@ video::-webkit-media-controls {
}
}
.carlist+.gnbIcon {
.carlist + .gnbIcon {
margin-left: 0;
@include desktopMin {
@@ -693,7 +694,6 @@ video::-webkit-media-controls {
.moblieMenu {
.slide-open {
.burgur {
.top-line,
.bot-line {
background-color: #000;
@@ -742,11 +742,11 @@ video::-webkit-media-controls {
}
&.menu-open {
&~.pageTitle {
& ~ .pageTitle {
z-index: 0 !important;
}
&~.contentWarp {
& ~ .contentWarp {
z-index: 0 !important;
}
@@ -754,9 +754,7 @@ video::-webkit-media-controls {
background-image: url(../images/common/icon-user.svg) !important;
}
.headerInner {
.gnb {
.logoWrap {
a {
@@ -804,7 +802,7 @@ video::-webkit-media-controls {
}
.userLogin {
>a {
> a {
border: 1px solid rgba(5, 20, 31, 0.3);
color: #05141f;
transition: 0.3s;
@@ -835,11 +833,7 @@ video::-webkit-media-controls {
}
}
}
}
}
.headerInner {
@@ -850,7 +844,6 @@ video::-webkit-media-controls {
height: 8rem;
margin: 0 auto;
@media (max-width: 1120px) {
height: 5.6rem;
}
@@ -1016,7 +1009,7 @@ video::-webkit-media-controls {
background-size: contain;
}
&+button {
& + button {
border-right: 0;
}
}
@@ -1058,7 +1051,7 @@ video::-webkit-media-controls {
word-break: break-word;
}
span+span {
span + span {
color: #676767;
font-weight: 400;
@@ -1121,7 +1114,7 @@ video::-webkit-media-controls {
width: fit-content;
}
span+span {
span + span {
font-weight: 400;
&::before {
@@ -1137,7 +1130,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -1252,11 +1245,11 @@ video::-webkit-media-controls {
height: 1.5rem;
transform: rotate(90deg);
background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
transition: transform .2s ease;
transition: transform 0.2s ease;
}
&.on {
margin-bottom: .3rem;
margin-bottom: 0.3rem;
&::after {
content: "";
@@ -1268,7 +1261,7 @@ video::-webkit-media-controls {
background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
}
&~.menuDepth2Wrap {
& ~ .menuDepth2Wrap {
margin-bottom: 1rem;
}
}
@@ -1349,7 +1342,7 @@ video::-webkit-media-controls {
font-size: 1.4rem;
font-weight: 400;
color: #9ea1a2;
padding: .8rem 0;
padding: 0.8rem 0;
&.active {
color: #05141f;
@@ -1360,7 +1353,7 @@ video::-webkit-media-controls {
}
@media (max-width: 1120px) {
padding: .6rem 0;
padding: 0.6rem 0;
}
}
}
@@ -1389,7 +1382,7 @@ video::-webkit-media-controls {
font-weight: 600;
color: #676767;
&+a {
& + a {
border-left: 1px solid #dedede;
}
}
@@ -1444,6 +1437,12 @@ video::-webkit-media-controls {
align-items: center;
height: 8rem;
@include desktopMin {
height: 3.2rem;
padding: 0 1.2rem;
border: 1px solid #dedede;
}
&::after {
content: "";
display: block;
@@ -1452,12 +1451,20 @@ video::-webkit-media-controls {
margin-top: -0.4rem;
background: url("../images/common/icon-wtbarrow.svg") center right no-repeat;
background-size: 1.2rem;
@include desktopMin {
margin-left: 2rem;
}
}
&:hover,
&:focus {
border: none;
outline: none;
@include desktopMin {
border: 1px solid #dedede;
}
}
&.on {
@@ -1481,7 +1488,7 @@ video::-webkit-media-controls {
white-space: nowrap;
}
span+span {
span + span {
&::before {
content: "";
display: block;
@@ -1503,11 +1510,19 @@ video::-webkit-media-controls {
left: 50%;
transform: translate(-50%, 0);
@include desktopMin {
top: 3.2rem;
left: 0;
right: 0;
transform: initial;
width: 100%;
}
&.on {
display: block;
}
&.on+.carlistItem {
&.on + .carlistItem {
display: block;
}
@@ -1529,7 +1544,29 @@ video::-webkit-media-controls {
background-color: #fff;
border: 1px solid #dedede;
@include desktopMin {
margin-top: 0.5rem;
padding: 1.2rem;
max-height: 70rem;
overflow-y: auto;
/* WebKit 기반 브라우저용 스크롤바 스타일 */
&::-webkit-scrollbar {
width: 0.4rem; /* 폭 4px */
}
&::-webkit-scrollbar-track {
background: transparent; /* 트랙 투명 */
}
&::-webkit-scrollbar-thumb {
background-color: #dedede; /* 스크롤바 색상 */
border-radius: 0.2rem;
}
}
li {
align-items: center;
a {
display: flex;
font-size: 1.4rem;
@@ -1542,13 +1579,16 @@ video::-webkit-media-controls {
}
span {
color: #9ea1a2;
color: #05141f;
font-weight: 400;
display: flex;
width: fit-content;
@include desktopMin {
display: inline;
}
}
span+span {
span + span {
&::before {
content: "";
display: block;
@@ -1559,11 +1599,74 @@ video::-webkit-media-controls {
margin-right: 1rem;
}
}
@include desktopMin {
position: relative;
display: inline;
}
}
button {
display: inline;
}
@include desktopMin {
position: relative;
padding-left: 2rem;
> span {
display: inline;
}
button {
text-align: left;
}
}
li+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;
&:hover {
.tooltip {
display: flex;
left: -2.4rem;
top: 2.4rem;
}
}
}
&:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 1.4rem;
height: 1.4rem;
margin-right: 0.4rem;
}
&.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;
}
}
}
li + li {
margin-top: 1rem;
@include desktopMin {
margin-top: 1.2rem;
}
}
}
}
@@ -1578,7 +1681,7 @@ video::-webkit-media-controls {
display: none;
}
>a {
> a {
display: flex;
align-items: center;
padding: 0.3rem 0.6rem;
@@ -1603,7 +1706,7 @@ video::-webkit-media-controls {
display: none;
}
>a {
> a {
display: flex;
align-items: center;
height: 8rem;
@@ -1656,7 +1759,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -1668,7 +1771,7 @@ video::-webkit-media-controls {
}
.cart {
>a {
> a {
display: flex;
align-items: center;
height: 5.6rem;
@@ -1778,7 +1881,7 @@ video::-webkit-media-controls {
}
.userLogin {
>a {
> a {
border: 1px solid rgba(5, 20, 31, 0.3);
color: #05141f;
transition: 0.3s;
@@ -2020,7 +2123,7 @@ video::-webkit-media-controls {
border-bottom: 1px solid #000;
}
a+a {
a + a {
margin-left: 2rem;
}
}
@@ -2103,7 +2206,7 @@ video::-webkit-media-controls {
}
}
.btn-select.on+.list-member {
.btn-select.on + .list-member {
display: block;
}
@@ -2496,7 +2599,8 @@ video::-webkit-media-controls {
margin-bottom: 0rem;
}
@include desktopMax {}
@include desktopMax {
}
dt {
color: #676767;
@@ -2519,7 +2623,7 @@ video::-webkit-media-controls {
}
}
dl+dl {
dl + dl {
border-bottom: 0;
margin-top: 0rem;
padding-bottom: 0rem;
@@ -2536,7 +2640,7 @@ video::-webkit-media-controls {
}
}
a+a {
a + a {
margin-top: 1.1rem;
}
}
@@ -2610,7 +2714,7 @@ video::-webkit-media-controls {
}
}
p+p {
p + p {
margin-top: 1.5rem;
@include tablet {
@@ -2709,7 +2813,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -2894,7 +2998,7 @@ video::-webkit-media-controls {
cursor: not-allowed;
}
[type="radio"]:disabled+span {
[type="radio"]:disabled + span {
opacity: 0.5;
cursor: not-allowed;
}
@@ -3010,7 +3114,7 @@ video::-webkit-media-controls {
}
}
>div {
> div {
width: 100%;
display: flex;
flex-wrap: wrap;
@@ -3029,11 +3133,11 @@ video::-webkit-media-controls {
}
}
input[type="text"]+input[type="text"] {
input[type="text"] + input[type="text"] {
margin-left: 1rem;
}
input[type="text"]+select {
input[type="text"] + select {
width: 100%;
margin-top: 1rem;
@@ -3053,11 +3157,11 @@ video::-webkit-media-controls {
}
}
>div.phone {
> div.phone {
flex-wrap: nowrap;
}
>div.mail {
> div.mail {
input {
width: calc(100% / 2 - 4.5%);
}
@@ -3219,7 +3323,7 @@ video::-webkit-media-controls {
}
}
button+label {
button + label {
margin-left: 1rem;
}
}
@@ -3238,7 +3342,7 @@ video::-webkit-media-controls {
}
}
dl+dl {
dl + dl {
margin-top: 3rem;
}
@@ -3273,7 +3377,7 @@ video::-webkit-media-controls {
}
}
p+p {
p + p {
margin-top: 2rem;
}
}
@@ -3315,7 +3419,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -3455,12 +3559,12 @@ video::-webkit-media-controls {
}
.cartItemInfo {
>div {
> div {
display: flex;
align-items: center;
margin-top: 0;
>p {
> p {
margin-left: 0;
border-radius: 0;
overflow: hidden;
@@ -3534,7 +3638,7 @@ video::-webkit-media-controls {
}
}
dt+dd {
dt + dd {
margin-top: 0.5rem;
@include desktopMin {
@@ -3542,7 +3646,7 @@ video::-webkit-media-controls {
}
}
dd+dd {
dd + dd {
margin-top: 1.5rem;
font-size: 1.4rem;
@@ -3554,7 +3658,7 @@ video::-webkit-media-controls {
}
}
.cartItemInfo+dl {
.cartItemInfo + dl {
min-width: 20rem;
text-align: right;
@@ -3581,7 +3685,7 @@ video::-webkit-media-controls {
}
}
>dl {
> dl {
.couponBtn {
display: flex;
justify-content: flex-end;
@@ -3689,7 +3793,7 @@ video::-webkit-media-controls {
cursor: not-allowed;
}
[type="radio"]:disabled+span {
[type="radio"]:disabled + span {
opacity: 0.5;
cursor: not-allowed;
}
@@ -3790,7 +3894,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -3849,7 +3953,7 @@ video::-webkit-media-controls {
padding: 0 3rem;
}
&+.content {
& + .content {
margin-top: 3rem;
padding-top: 6rem;
border-top: 1px solid #d9d9d9;
@@ -3909,7 +4013,7 @@ video::-webkit-media-controls {
margin-top: 4rem;
}
>p {
> p {
margin-top: 2rem;
line-height: 3rem;
font-size: 2.2rem;
@@ -4005,7 +4109,6 @@ video::-webkit-media-controls {
}
.carswBtn {
width: 18rem;
margin: 0 auto;
margin-top: 3rem;
@@ -4043,7 +4146,7 @@ video::-webkit-media-controls {
font-size: 1.4rem;
}
>span {
> span {
display: block;
@include maxtablet {
@@ -4060,7 +4163,7 @@ video::-webkit-media-controls {
font-size: 1.6rem;
}
&+.agree-area {
& + .agree-area {
margin-bottom: 4rem;
}
@@ -4201,7 +4304,7 @@ video::-webkit-media-controls {
padding: 0;
margin: 0 3rem;
&+.content {
& + .content {
padding: 6rem 0;
}
@@ -4233,14 +4336,11 @@ video::-webkit-media-controls {
}
}
}
}
#ad_popup {
.popInner .content {
.carswBtn {
width: 100%;
margin: 0 auto;
margin-top: 3rem;
@@ -4251,7 +4351,6 @@ video::-webkit-media-controls {
}
}
}
}
.termsContents {
@@ -4278,7 +4377,7 @@ video::-webkit-media-controls {
margin-top: 4rem;
}
>p {
> p {
margin-top: 2rem;
line-height: 2.2rem;
font-size: 1.6rem;
@@ -4434,7 +4533,7 @@ video::-webkit-media-controls {
height: 40px;
}
.swiper-scrollbar-lock+.swiper-scrollbar-after-space {
.swiper-scrollbar-lock + .swiper-scrollbar-after-space {
display: none;
}
}
@@ -4478,7 +4577,7 @@ video::-webkit-media-controls {
}
}
p+p {
p + p {
margin-top: 1.5rem;
@include tablet {
@@ -4577,7 +4676,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -4815,7 +4914,6 @@ video::-webkit-media-controls {
.tableStyle {
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
margin-top: 3rem;
margin-bottom: 5rem;
@@ -4887,3 +4985,31 @@ 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));
.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);
}
}

BIN
kr/assets/images/common/ico_info.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 775 B

BIN
kr/assets/images/common/ico_selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 B

92
kr/assets/js/common.js
View File

@@ -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();
});
});

156
kr/mypage/coupon-list_new.html
View File

@@ -86,8 +86,9 @@
<div class="mobileCarlist">
<a href="javascript:void(0)" class="mobilecarItem">
<div class="item">
<span>MV</span>
<span>161어 1660</span>
<!-- <span>MV</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>161어 1660</span>
<!-- <span>MV</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>KMTKEXXBPMU000081</span>
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선플러그인 상품성개선</span>
</a>
<button type="button" class="btn-info" data-tooltip="111JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>SX</span>
<span>161어 1660</span>
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드렌토(MQ4) 하이브리드</span>
</a>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>452허 1234</span>
<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>
<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>