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 { .title {
font-size: 25px; font-size: 25px;
font-weight: 600; font-weight: 600;
color: #EAEAEA; color: #eaeaea;
padding-left: 0; padding-left: 0;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
@@ -29,7 +29,7 @@
.size(@w: 50px, @h: 50px); .size(@w: 50px, @h: 50px);
background-size: 50px 50px; background-size: 50px 50px;
background-position: center; 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; border: none;
flex-shrink: 0; flex-shrink: 0;
margin-right: 20px; // 되돌아가기 아이콘 후 20px gap 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"; @import "../../style/utils.module.less";
.userReviewPanel { .userReviewPanel {
background-color: @BG_COLOR_02; background-color: #303030;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
@@ -14,12 +14,12 @@
width: 100%; width: 100%;
height: 60px; height: 60px;
align-items: center; align-items: center;
color: #333; color: @COLOR_WHITE;
// padding: 30px 60px 0 60px; // padding: 30px 60px 0 60px;
position: relative; position: relative;
.title { .title {
color: #333; color: @COLOR_WHITE;
} }
} }
@@ -27,7 +27,7 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: @BG_COLOR_02; background-color: #303030;
// padding: 60px; // padding: 60px;
flex: 1; flex: 1;
} }
@@ -86,9 +86,9 @@
.infoSection { .infoSection {
width: calc(100% - 120px); width: calc(100% - 120px);
padding: 18px; padding: 18px;
background: white; background: #424953;
border-radius: 12px; border-radius: 12px;
border: 1px solid #dadada; border: 1px solid #585858;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@@ -129,7 +129,7 @@
} }
&__productId { &__productId {
color: #808080; color: @COLOR_WHITE;
font-size: 24px; font-size: 24px;
font-family: "LG Smart UI"; font-family: "LG Smart UI";
font-weight: 600; font-weight: 600;
@@ -146,7 +146,7 @@
&__title { &__title {
flex: 1; flex: 1;
color: black; color: @COLOR_WHITE;
font-size: 30px; font-size: 30px;
font-family: "LG Smart UI"; font-family: "LG Smart UI";
font-weight: 700; font-weight: 700;
@@ -169,7 +169,7 @@
} }
&__reviewCount { &__reviewCount {
color: #333333; color: @COLOR_WHITE;
font-size: 24px; font-size: 24px;
font-family: "LG Smart UI"; font-family: "LG Smart UI";
font-weight: 400; font-weight: 400;
@@ -183,7 +183,7 @@
.reviewsSection { .reviewsSection {
width: 100%; width: 100%;
padding: 60px 60px 30px 60px; // 위쪽만 30px, 나머지는 60px padding: 60px 60px 30px 60px; // 위쪽만 30px, 나머지는 60px
background: white; background: #37393c;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; // 자식 요소들이 전체 높이 차지 align-items: stretch; // 자식 요소들이 전체 높이 차지
@@ -210,7 +210,7 @@
&__text { &__text {
text-align: center; text-align: center;
color: black; color: @COLOR_WHITE;
font-size: 42px; font-size: 42px;
font-family: "LG Smart UI"; font-family: "LG Smart UI";
font-weight: 700; font-weight: 700;
@@ -227,7 +227,7 @@
&__text { &__text {
text-align: center; text-align: center;
color: black; color: @COLOR_WHITE;
font-size: 28px; font-size: 28px;
font-family: "LG Smart UI"; font-family: "LG Smart UI";
font-weight: 600; font-weight: 600;

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

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

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

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

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

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

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

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