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

- 스크롤 부분 제외하고 피그마와 맞춰 다크모드 적용하였습니다.

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

@@ -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
@@ -48,4 +48,4 @@
   background-repeat: no-repeat;
   flex-shrink: 0;
   margin-right: 10px; // 파트너사 로고 후 10px gap
-}
+}

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

@@ -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;
@@ -270,7 +270,7 @@
   // 오른쪽 리뷰 리스트 영역 - 새로운 UserReviewsList 컴포넌트 사용
   // 📝 레이아웃 조정: 왼쪽으로 30px 이동 + 넓이 40px 증가 (기존: width 885px, margin-left 0)
   &__reviewsList {
-    width: 965px;  // scroller표시전 925px
+    width: 965px; // scroller표시전 925px
     margin-left: -40px; // 왼쪽으로 40px 이동
     display: flex;
     flex-direction: column;

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

@@ -12,8 +12,8 @@
   flex-direction: column;
   align-items: flex-start;
   border-radius: 100px;
-  border: 1px solid #dadada;
+  border: 1px solid #585858;
-  background: #fff;
+  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;

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

@@ -7,8 +7,8 @@
   width: 885px;
   height: 168px;
   // 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;
   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;

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

@@ -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;

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

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