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

쿠폰 작업 - 마이페이지 완료

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-07-15 15:32:37 +09:00
parent 4c87d4ccc6
commit 1c493a8c93
4 changed files with 108 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
kr/assets/css/mypage.css
View File

@@ -3861,40 +3861,52 @@ pre {
margin-bottom: 0.8rem;
}
}
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired {
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired, .myCouponListWrap.couponNew .boardList .list .item.coupon-used, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming {
background-color: #eee;
}
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .info .benefits .benefitsItem .value {
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .info .benefits .benefitsItem .value, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemTop .info .benefits .benefitsItem .value, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemTop .info .benefits .benefitsItem .value {
display: flex;
align-items: center;
color: #9ea1a2;
}
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .info .benefits .benefitsItem .value::after {
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .info .benefits .benefitsItem .value::after, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemTop .info .benefits .benefitsItem .value::after, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemTop .info .benefits .benefitsItem .value::after {
content: "만료";
display: flex;
justify-content: center;
align-items: center;
width: 4.3rem;
height: 2.5rem;
margin-left: 1.6rem;
min-width: 4.3rem;
height: 2.6rem;
padding: 0 0.8rem;
margin-left: 0.8rem;
font-size: 1.6rem;
color: #9ea1a2;
font-weight: 600;
background-color: #fff;
border: 1px solid #dedede;
}
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .target p {
@media (min-width: 768px) {
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .info .benefits .benefitsItem .value::after, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemTop .info .benefits .benefitsItem .value::after, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemTop .info .benefits .benefitsItem .value::after {
margin-left: 1.6rem;
}
}
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemTop .target p, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemTop .target p, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemTop .target p {
color: #9ea1a2;
}
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemBottom {
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemBottom, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemBottom, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemBottom {
background-color: #eee;
}
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemBottom .cost {
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemBottom .cost, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemBottom .cost, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemBottom .cost {
color: #9ea1a2;
}
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemBottom .cost::before {
.myCouponListWrap.couponNew .boardList .list .item.coupon-expired .itemBottom .cost::before, .myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemBottom .cost::before, .myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemBottom .cost::before {
background: url(../images/common/icon_coupon_expired.png) no-repeat center/100% auto;
}
.myCouponListWrap.couponNew .boardList .list .item.coupon-used .itemTop .info .benefits .benefitsItem .value::after {
content: "사용완료";
}
.myCouponListWrap.couponNew .boardList .list .item.coupon-upcoming .itemTop .info .benefits .benefitsItem .value::after {
content: "예정";
}
.myCouponListWrap.couponNew .boardList .couponInfo ul li {
color: #676767;
}

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

File diff suppressed because one or more lines are too long

45
kr/assets/css/mypage.scss
View File

@@ -4203,7 +4203,9 @@ pre {
}
}
&.coupon-expired {
&.coupon-expired,
&.coupon-used,
&.coupon-upcoming {
background-color: #eee;
.itemTop {
.info {
@@ -4218,14 +4220,18 @@ pre {
display: flex;
justify-content: center;
align-items: center;
width: 4.3rem;
height: 2.5rem;
margin-left: 1.6rem;
min-width: 4.3rem;
height: 2.6rem;
padding: 0 0.8rem;
margin-left: 0.8rem;
font-size: 1.6rem;
color: #9ea1a2;
font-weight: 600;
background-color: #fff;
border: 1px solid #dedede;
@include tablet {
margin-left: 1.6rem;
}
}
}
}
@@ -4247,6 +4253,37 @@ pre {
}
}
}
&.coupon-used {
.itemTop {
.info {
.benefits {
.benefitsItem {
.value {
&::after {
content: "사용완료";
}
}
}
}
}
}
}
&.coupon-upcoming {
.itemTop {
.info {
.benefits {
.benefitsItem {
.value {
&::after {
content: "예정";
}
}
}
}
}
}
}
}
}
.couponInfo {

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

@@ -336,7 +336,12 @@
<div class="cost">7일 무료 체험</div>
</div>
</li>
<!-- [D] 만료 시 li에 coupon-expired 클래스 추가 -->
<!-- [D]
쿠폰 상태별 li에 클래스 추가
만료 : coupon-expired
사용완료 : coupon-used
예정 : coupon-upcoming
-->
<li class="item coupon-expired">
<div class="itemTop">
<div class="info">
@@ -356,6 +361,44 @@
<div class="cost">7일 무료 체험</div>
</div>
</li>
<li class="item coupon-used">
<div class="itemTop">
<div class="info">
<div class="benefits">
<div class="benefitsItem">
<div class="value">Summer 쿠폰</div>
</div>
</div>
</div>
<div class="target">
<p><em>유효 기간 :</em> 2025-07-01 ~ 2025-07-07</p>
<p><em>적용 상품 :</em> NBA 디스플레이 테마, 아케이드 게임</p>
</div>
</div>
<div class="itemBottom">
<div class="cost">7일 무료 체험</div>
</div>
</li>
<li class="item coupon-upcoming">
<div class="itemTop">
<div class="info">
<div class="benefits">
<div class="benefitsItem">
<div class="value">Summer 쿠폰</div>
</div>
</div>
</div>
<div class="target">
<p><em>유효 기간 :</em> 2025-07-01 ~ 2025-07-07</p>
<p><em>적용 상품 :</em> NBA 디스플레이 테마, 아케이드 게임</p>
</div>
</div>
<div class="itemBottom">
<div class="cost">7일 무료 체험</div>
</div>
</li>
<li class="noItem">사용 가능한 쿠폰이 없습니다.</li>
</ul>
<div class="couponInfo">