optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[detail] 리뷰 패널 다크모드 적용#1

Browse Source 
- 스크롤 부분 제외하고 피그마와 맞춰 다크모드 적용하였습니다.
This commit is contained in:
junghoon86.park
2025-10-17 15:00:47 +09:00
parent 0b48e43eb4
commit 74aab8cc7d
6 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
com.twin.app.shoptime/src/views/UserReview/UserReviewHeader.module.less
View File

@@ -13,7 +13,7 @@
.title {
font-size: 25px;
font-weight: 600;
color: #EAEAEA;
color: #eaeaea;
padding-left: 0;
letter-spacing: 1px;
text-transform: uppercase;
@@ -29,7 +29,7 @@
.size(@w: 50px, @h: 50px);
background-size: 50px 50px;
background-position: center;
background-image: url("../../../assets/images/btn/btn-60-bk-back-nor@3x.png");
background-image: url("../../../assets/images/btn/btn-60-wh-back-nor@3x.png");
border: none;
flex-shrink: 0;
margin-right: 20px; // 되돌아가기 아이콘 후 20px gap

24
com.twin.app.shoptime/src/views/UserReview/UserReviewPanel.module.less
View File

@@ -2,7 +2,7 @@
@import "../../style/utils.module.less";
.userReviewPanel {
background-color: @BG_COLOR_02;
background-color: #303030;
display: flex;
flex-direction: column;
height: 100%;
@@ -14,12 +14,12 @@
width: 100%;
height: 60px;
align-items: center;
color: #333;
color: @COLOR_WHITE;
// padding: 30px 60px 0 60px;
position: relative;
.title {
color: #333;
color: @COLOR_WHITE;
}
}
@@ -27,7 +27,7 @@
position: relative;
display: flex;
flex-direction: column;
background-color: @BG_COLOR_02;
background-color: #303030;
// padding: 60px;
flex: 1;
}
@@ -86,9 +86,9 @@
.infoSection {
width: calc(100% - 120px);
padding: 18px;
background: white;
background: #424953;
border-radius: 12px;
border: 1px solid #dadada;
border: 1px solid #585858;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
@@ -129,7 +129,7 @@
}
&__productId {
color: #808080;
color: @COLOR_WHITE;
font-size: 24px;
font-family: "LG Smart UI";
font-weight: 600;
@@ -146,7 +146,7 @@
&__title {
flex: 1;
color: black;
color: @COLOR_WHITE;
font-size: 30px;
font-family: "LG Smart UI";
font-weight: 700;
@@ -169,7 +169,7 @@
}
&__reviewCount {
color: #333333;
color: @COLOR_WHITE;
font-size: 24px;
font-family: "LG Smart UI";
font-weight: 400;
@@ -183,7 +183,7 @@
.reviewsSection {
width: 100%;
padding: 60px 60px 30px 60px; // 위쪽만 30px, 나머지는 60px
background: white;
background: #37393c;
display: flex;
justify-content: flex-start;
align-items: stretch; // 자식 요소들이 전체 높이 차지
@@ -210,7 +210,7 @@
&__text {
text-align: center;
color: black;
color: @COLOR_WHITE;
font-size: 42px;
font-family: "LG Smart UI";
font-weight: 700;
@@ -227,7 +227,7 @@
&__text {
text-align: center;
color: black;
color: @COLOR_WHITE;
font-size: 28px;
font-family: "LG Smart UI";
font-weight: 600;

8
com.twin.app.shoptime/src/views/UserReview/components/FilterItemButton.module.less
View File

@@ -12,8 +12,8 @@
flex-direction: column;
align-items: flex-start;
border-radius: 100px;
border: 1px solid #dadada;
background: #fff;
border: 1px solid #585858;
background: #4a4c50;
cursor: pointer;
white-space: nowrap;
@@ -35,7 +35,7 @@
border: 1px solid #d32f2f !important;
.filterItemButton__text {
color: white !important;
color: #eaeaea !important;
}
}
@@ -53,7 +53,7 @@
&__text {
text-align: center;
color: black;
color: #fff;
font-size: 24px;
font-family: "LG Smart UI";
font-weight: 400;

10
com.twin.app.shoptime/src/views/UserReview/components/UserReviewItem.module.less
View File

@@ -7,8 +7,8 @@
width: 885px;
height: 168px;
// Light theme으로 변경: 어두운 회색에서 밝은 색상으로
background-color: @BG_COLOR_02;
border: 1px solid rgba(230, 230, 230, 1);
background-color: #424953;
border: 1px solid #585858;
border-radius: 12px;
margin: 0 0 10px 0; // 📝 좌우 마진 제거, 아래쪽만 유지
.flex(@justifyCenter:flex-start);
@@ -71,14 +71,14 @@
.reviewAuthor {
// Light theme: 어두운 회색으로 변경
color: rgba(100, 100, 100, 1);
color: #ffffff;
.font(@fontFamily: @baseFont, @fontSize: 22px);
font-weight: 400;
}
.reviewDate {
// Light theme: 어두운 색상으로 변경
color: rgba(60, 60, 60, 1);
color: #eaeaea;
.font(@fontFamily: @baseFont, @fontSize: 24px);
font-weight: 400;
margin-left: auto;
@@ -90,7 +90,7 @@
font-weight: 400;
.elip(@clamp:2);
// Light theme: 어두운 텍스트 색상으로 변경
color: rgba(40, 40, 40, 1);
color: #cfcfcf;
margin-top: 15px;
// 📝 텍스트가 부모 영역을 벗어나지 않도록 설정
word-break: break-word;

8
com.twin.app.shoptime/src/views/UserReview/components/UserReviewsList.module.less
View File

@@ -8,7 +8,7 @@
display: flex;
flex-direction: column;
// Light theme: 밝은 배경
background-color: @COLOR_WHITE;
background-color: #37393c;
border-radius: 12px;
padding: 0 0px 20px 20px;
}
@@ -27,11 +27,11 @@
.font(@fontFamily: @baseFont, @fontSize: 28px);
font-weight: 600;
// Light theme: 어두운 텍스트
color: rgba(40, 40, 40, 1);
color: #eaeaea;
.reviewsListHeaderCount {
// Light theme: 포인트 색상
color: rgba(199, 8, 80, 1);
color: #eaeaea;
font-weight: 700;
}
}
@@ -82,7 +82,7 @@
width: 100%;
display: flex;
flex-direction: column;
background-color: @COLOR_WHITE;
background-color: #37393c;
> * {
margin-bottom: 10px;

4
com.twin.app.shoptime/src/views/UserReview/components/UserReviewsScroller.module.less
View File

@@ -16,7 +16,7 @@
min-height: 600px;
max-height: none;
// Light theme: 밝은 배경
background-color: rgba(255, 255, 255, 1);
background-color: #37393c;
border-radius: 8px;
> div:nth-child(1) {
padding-right: 0;
@@ -58,7 +58,7 @@
min-height: 600px;
padding-bottom: 0;
// Light theme: 밝은 배경
background-color: rgba(255, 255, 255, 1);
background-color: #37393c;
}
}
}