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

[상품 상세] 리뷰 및 디테일 변경건.#2

Browse Source 
- 디테일부분에 대한 figma 부분과 동일하게 스타일 처리.
 - 리뷰부분 및 리뷰 팝업 부분 처리
 - 포커스시 확대부분 확인이후 재처리가능성있음.
 - 주로 리뷰 팝업부분 스타일 및 디테일 우측화면 스타일 작업
This commit is contained in:
junghoon86.park
2025-09-10 09:28:35 +09:00
parent 8fea52fb32
commit d2a9388bd5
14 changed files with 182 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less
View File

@@ -239,6 +239,9 @@
width: 100%;
display: flex;
align-items: center;
> div:last-child {
margin-left: 10px;
}
}
// 모바일 쇼핑 섹션 (mobileSection 참고)
@@ -449,7 +452,7 @@
// LayoutSample 포커스 테스트용 스타일
.layoutSample {
width: 1124px;
width: 1114px;
height: 300px;
background-color: yellow;
margin-bottom: 20px;
@@ -597,7 +600,7 @@
width: 1210px; // 절대 크기 지정
height: 100%;
// 좌측 30px, 우측 66px(스크롤바) 패딩을 명시적으로 적용
padding: 0 10px 0 30px;
padding: 0 15px 0 30px;
box-sizing: border-box;
margin: 0;
overflow-y: auto;
@@ -920,7 +923,7 @@
// LayoutSample 포커스 테스트용 스타일
.layoutSample {
width: 1124px;
width: 1114px;
height: 300px;
background-color: yellow;
margin-bottom: 20px;

22
com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDetail/ProductDetail.new.module.less
View File

@@ -4,19 +4,19 @@
// 단일 이미지용 ProductDetail 컨테이너 - 명확한 1054px 크기
.rollingWrap {
position: relative;
width: 1124px; // 고정 크기 (Description, UserReviews와 동일)
max-width: 1124px;
height: 680px; // 고정 높이로 각 이미지가 한 화면 차지
width: 1114px; // 고정 크기 (Description, UserReviews와 동일)
max-width: 1114px;
height: 670px; // 고정 높이로 각 이미지가 한 화면 차지
background-color: rgba(255, 255, 255, 1);
border-radius: 12px;
margin-bottom: 30px; // 다음 ProductDetail과의 간격
box-sizing: border-box;
padding: 6px; // 포커스 테두리(6px)를 위한 정확한 공간 확보
&:last-child {
margin-bottom: 0; // 마지막 이미지는 하단 마진 제거
}
// 메인 이미지 영역 - 단일 이미지 중앙 배치
.itemBox {
width: 100%;
@@ -37,7 +37,7 @@
bottom: -6px;
left: -6px;
}
.thumbnailWrapper .productImage {
transform: scale(1.015); // 가로세로 10px 정도 확대 효과
}
@@ -50,7 +50,7 @@
.size(@w: 42px, @h: 42px);
background-size: 42px 42px;
background-position: center center;
&.leftBtn {
.position(@position: absolute, @top: 349px, @left: 43px); // 높이 중앙: (740/2 - 21) = 349px, 좌측: 30px + 13px = 43px
background-image: url("../../../../../assets/images/btn/btn_prev_thumb_nor.png");
@@ -58,7 +58,7 @@
background-image: url("../../../../../assets/images/btn/btn_prev_thumb_foc.png");
}
}
&.rightBtn {
.position(@position: absolute, @top: 349px, @right: 43px); // 높이 중앙: 349px, 우측: 30px + 13px = 43px
background-image: url("../../../../../assets/images/btn/btn_next_thumb_nor.png");
@@ -70,12 +70,12 @@
.thumbnailWrapper {
position: relative;
width: 100%;
height: 100%; // 부모 itemBox의 680px 전체 사용
width: 658px;
height: 610px;
display: flex;
align-items: center;
justify-content: center;
.productImage {
max-width: 100%;
max-height: 100%;

74
com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.module.less
View File

@@ -9,7 +9,9 @@
display: flex;
justify-content: center;
align-items: center;
:focus {
border: none;
}
// 좌측 화살표 (이전 리뷰) - detailpanel PNG 사용
.leftArrow {
width: 50px;
@@ -20,10 +22,10 @@
display: flex;
justify-content: center;
align-items: center;
// 화살표 아이콘 (< 모양, 17px x 29px)
&::before {
content: '';
content: "";
width: 17px;
height: 29px;
background-image: url("../../../../../../assets/images/detailpanel/left-arrow.svg");
@@ -32,26 +34,22 @@
background-repeat: no-repeat;
display: block;
}
&:focus {
outline: none;
outline: 4px solid @PRIMARY_COLOR_RED !important;
&::before {
background-image: url("../../../../../../assets/images/detailpanel/left-arrow-red.svg");
}
&::after {
.focused(@boxShadow: 0px, @borderRadius: 4px);
}
}
&:hover {
&::before {
background-image: url("../../../../../../assets/images/detailpanel/left-arrow-red.svg");
}
}
}
// 메인 콘텐츠 영역 (피그마 레이아웃 적용)
.mainContent {
flex: 1;
@@ -61,24 +59,24 @@
display: flex;
justify-content: flex-start;
align-items: flex-start;
.reviewContainer {
flex: 1;
align-self: stretch;
padding: 30px;
background: #F8F8F8;
background: #f8f8f8;
border-radius: 12px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-right: 30px; // gap: 30 → margin-right: 30px
// 이미지 섹션 (피그마: flex: 1, align-self: stretch, padding: 5px 4px)
.imageSection {
flex: 1;
align-self: stretch;
display: flex;
.reviewImage {
width: 357px;
height: 467px;
@@ -87,7 +85,7 @@
object-fit: cover;
}
}
// 정보 섹션
.infoSection {
flex: 1;
@@ -97,7 +95,7 @@
justify-content: flex-start;
align-items: flex-start;
margin-left: 30px; // gap: 30 → margin-left: 30px
// 메타 섹션 (별점, 이메일, 날짜)
.metaSection {
align-self: stretch;
@@ -107,20 +105,20 @@
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 15px; // gap: 15 → margin-bottom: 15px
.ratingContainer {
padding-bottom: 20px;
display: inline-flex; // 피그마: inline-flex
justify-content: flex-start;
align-items: flex-start;
margin-right: 4px; // gap: 4 → margin-right: 4px
.starRating {
// 별점 아이콘들 사이 간격은 StarRating 컴포넌트 내부에서 처리
// :global 사용 금지로 인해 내부 처리에 맡김
}
}
.email {
width: 400px;
min-height: 31px;
@@ -134,7 +132,7 @@
overflow-wrap: break-word;
margin-bottom: 20px;
}
.date {
color: #333333;
font-size: 24px;
@@ -144,7 +142,7 @@
word-wrap: break-word;
}
}
// 리뷰 텍스트
.reviewText {
align-self: stretch;
@@ -157,26 +155,26 @@
}
}
}
// 커스텀 스크롤바
.customScrollbar {
width: 6px;
align-self: stretch;
position: relative;
background: #E7E7E7;
background: #e7e7e7;
overflow: hidden;
.scrollTrack {
width: 6px;
height: 100px;
left: 0;
top: 0;
position: absolute;
background: #7A808D;
background: #7a808d;
}
}
}
// 우측 화살표 (다음 리뷰) - detailpanel PNG 사용
.rightArrow {
width: 50px;
@@ -187,10 +185,10 @@
display: flex;
justify-content: center;
align-items: center;
// 화살표 아이콘 (> 모양, 17px x 29px)
&::before {
content: '';
content: "";
width: 17px;
height: 29px;
background-image: url("../../../../../../assets/images/detailpanel/right-arrow.svg");
@@ -199,26 +197,22 @@
background-repeat: no-repeat;
display: block;
}
&:focus {
outline: none;
outline: 4px solid @PRIMARY_COLOR_RED !important;
&::before {
background-image: url("../../../../../../assets/images/detailpanel/right-arrow-red.svg");
}
&::after {
.focused(@boxShadow: 0px, @borderRadius: 4px);
}
}
&:hover {
&::before {
background-image: url("../../../../../../assets/images/detailpanel/right-arrow-red.svg");
}
}
}
// 리뷰 데이터가 없을 때
.noReview {
display: flex;
@@ -228,4 +222,4 @@
font-size: 24px;
font-family: @baseFont;
}
}
}

19
com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.module.less
View File

@@ -15,8 +15,8 @@
.tVerticalPagenator {
.size(@w: 1114px, @h: auto); // 마진 포함 전체 크기 (1054px + 60px)
max-width: 1114px;
padding-left: 30px; // 좌측 30px 마진
padding-right: 30px; // 우측 30px 마진
// padding-left: 30px; // 좌측 30px 마진
// padding-right: 30px; // 우측 30px 마진
box-sizing: border-box;
// .sectionTitle {
@@ -28,8 +28,8 @@
// }
.tHeader {
background: transparent;
.size(@w: 1054px, @h: 36px); // 마진 제외 콘텐츠 크기
max-width: 1054px;
.size(@w: 1144px, @h: 36px); // 마진 제외 콘텐츠 크기
max-width: 1144px;
margin-bottom: 20px;
> div {
@@ -58,20 +58,20 @@
// }
.renderCardContainer {
width: auto;
width: 1144px;
display: flex;
flex-wrap: wrap;
// margin-top: 34px;
> div {
/* item card */
margin: 0 15px 15px 0;
.size(@w:300px,@h:435px);
.size(@w:360px,@h:494px);
background-color: rgba(51, 51, 51, 0.95);
border: none;
> div:nth-child(1) {
/* img wrapper*/
.size(@w:264px,@h:264px);
.size(@w:323px,@h:323px);
> img {
.size(@w:100%,@h:100%);
@@ -79,18 +79,17 @@
}
> div:nth-child(2) {
margin-top: 15px;
/* desc wrapper */
> div > h3 {
/* title */
color: rgba(234, 234, 234, 1);
margin-top: 15px;
.size(@w:100%,@h:62px);
.size(@w:100%,@h:64px);
line-height: 31px;
}
> p {
/* priceInfo */
height: 43px;
line-height: 35px;
text-align: center;
> span {

3
com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.jsx
View File

@@ -1,5 +1,6 @@
import React, { useMemo } from 'react';
import classNames from 'classnames';
import { useSelector } from 'react-redux';
import TQRCode from '../../../../components/TQRCode/TQRCode';
@@ -56,7 +57,7 @@ export default function QRCode({
}, [productInfo, isShopByMobile, detailUrl]);
return (
<div className={css.qrcode}>
<div className={classNames(css.qrcode, kind ? css.detailQrcode : "")}>
{/* {qrCodeUrl && <TQRCode text={qrCodeUrl} width="190" height="190" />} */}
{kind === "detail" ? (
<TQRCode text={qrCodeUrl} width="240" height="240" />

6
com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.module.less
View File

@@ -9,4 +9,10 @@
border: solid 1px #dadada;
margin: 0 auto;
}
&.detailQrcode {
> div:first-child {
width: 240px;
height: 240px;
}
}
}

2
com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/BuyNowPriceDisplay/BuyNowPriceDisplay.module.less
View File

@@ -52,7 +52,7 @@
font-size: 40px;
font-weight: bold;
line-height: 1;
color: #808080;
color: @COLOR_WHITE;
padding-bottom: 5px;
}
.discountedPrc {

18
com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.jsx
View File

@@ -136,15 +136,17 @@ export default function ShopByMobilePriceDisplay({
} else if (TYPE_CASE.case3) {
return (
<div className={css.wrapper}>
<span className={css.name}>
{patncNm
? patncNm + " " + $L("Price")
: patnrName + " " + $L("Price")}
</span>
<div className={css.topLayer}>
<span className={css.name}>
{patncNm
? patncNm + " " + $L("Price")
: patnrName + " " + $L("Price")}
</span>
</div>
{discountRate && Number(discountRate.replace("%", "")) > 4 && (
<div className={css.rateTag}>{discountRate}</div>
)}
<div className={css.btmLayer}>
{discountRate && Number(discountRate.replace("%", "")) > 4 && (
<div className={css.rateTag}>{discountRate}</div>
)}
<span className={css.price}>
{isDiscountedPriceEmpty ? offerInfo : discountedPrice}
</span>

2
com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.module.less
View File

@@ -52,7 +52,7 @@
font-size: 40px;
font-weight: bold;
line-height: 1;
color: #808080;
color: @COLOR_WHITE;
padding-bottom: 5px;
}
.discountedPrc {

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

@@ -2,14 +2,13 @@
@import "../../style/utils.module.less";
.userReviewPanel {
background-color: #fff;
background-color: @BG_COLOR_02;
display: flex;
flex-direction: column;
height: 100%;
}
.header {
background-color: #fff;
// border-bottom: 1px solid #e0e0e0; // 가로선 제거
display: flex;
width: 100%;
@@ -28,7 +27,7 @@
position: relative;
display: flex;
flex-direction: column;
background-color: #fff;
background-color: @BG_COLOR_02;
// padding: 60px;
flex: 1;
}
@@ -86,10 +85,10 @@
// Info 섹션 (제품 정보)
.infoSection {
width: calc(100% - 120px);
padding: 18px ;
padding: 18px;
background: white;
border-radius: 12px;
border: 1px solid #DADADA;
border: 1px solid #dadada;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
@@ -97,7 +96,7 @@
// margin-bottom: 40px;
margin-left: 60px;
margin-right: 60px;
margin-bottom: 30px;
&__productImage {
width: 150px;
height: 150px;
@@ -129,7 +128,7 @@
&__productId {
color: #808080;
font-size: 24px;
font-family: 'LG Smart UI';
font-family: "LG Smart UI";
font-weight: 600;
line-height: 18px;
}
@@ -146,7 +145,7 @@
flex: 1;
color: black;
font-size: 30px;
font-family: 'LG Smart UI';
font-family: "LG Smart UI";
font-weight: 700;
line-height: 32px;
word-wrap: break-word;
@@ -169,7 +168,7 @@
&__reviewCount {
color: #333333;
font-size: 24px;
font-family: 'LG Smart UI';
font-family: "LG Smart UI";
font-weight: 400;
line-height: 31px;
}
@@ -180,7 +179,7 @@
// Reviews 섹션 (필터 + 리뷰 리스트)
.reviewsSection {
width: 100%;
padding: 30px 60px 60px 60px; // 위쪽만 30px, 나머지는 60px
padding: 60px 60px 30px 60px; // 위쪽만 30px, 나머지는 60px
background: white;
display: flex;
justify-content: flex-start;
@@ -192,7 +191,7 @@
align-self: stretch;
padding-bottom: 60px;
padding-right: 60px;
border-right: 1px solid #DADADA;
border-right: 1px solid #dadada;
display: flex;
flex-direction: column;
justify-content: flex-start;
@@ -210,7 +209,7 @@
text-align: center;
color: black;
font-size: 42px;
font-family: 'LG Smart UI';
font-family: "LG Smart UI";
font-weight: 700;
line-height: 42px;
margin-right: 12px;
@@ -227,7 +226,7 @@
text-align: center;
color: black;
font-size: 28px;
font-family: 'LG Smart UI';
font-family: "LG Smart UI";
font-weight: 600;
line-height: 42px;
margin-right: 12px;
@@ -281,4 +280,4 @@
width: 100%;
height: 100%;
}
}
}

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

@@ -4,20 +4,20 @@
.reviewContentContainer {
// 📝 15px 오버플로우 방지: 100%에서 15px 줄임
width: calc(100% - 15px);
width: 885px;
height: 168px;
// Light theme으로 변경: 어두운 회색에서 밝은 색상으로
background-color: rgba(255, 255, 255, 0.95);
background-color: @BG_COLOR_02;
border: 1px solid rgba(230, 230, 230, 1);
border-radius: 12px;
margin: 0 0 10px 0; // 📝 좌우 마진 제거, 아래쪽만 유지
.flex(@justifyCenter:flex-start);
padding: 20px 15px; // 📝 패딩 복원 (상하 20px, 좌우 15px)
padding: 30px; // 📝 패딩 복원 (상하 20px, 좌우 15px)
position: relative;
// 📝 부모 영역 오버플로우 방지를 위한 box-sizing 설정
box-sizing: border-box;
overflow: hidden;
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
@@ -35,48 +35,48 @@
.reviewContent {
// 📝 이미지 크기 변경에 맞춰 높이 조정 (108px -> 90px)
.size(@w: 100%,@h:90px);
.size(@w: 100%,@h:108px);
// 📝 이미지와 마진을 고려한 실제 사용 가능한 넓이로 제한
flex: 1;
min-width: 0; // flex item이 축소될 수 있도록 설정
// 📝 오른쪽 마진 제거 (패딩이 있으므로 중복 여백 방지)
.reviewMeta {
.size(@w:100%, @h:31px);
display: flex;
justify-content: flex-start;
align-items: center;
> * {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
.reviewMeta {
.size(@w:100%, @h:31px);
display: flex;
justify-content: flex-start;
align-items: center;
// StarRating 컴포넌트 스타일 - Light theme에 맞게 조정
:global(.star-rating) {
width: 160px !important;
height: 32px !important;
}
> * {
margin-right: 20px;
.reviewAuthor {
// Light theme: 어두운 회색으로 변경
color: rgba(100, 100, 100, 1);
.font(@fontFamily: @baseFont, @fontSize: 22px);
font-weight: 400;
}
.reviewDate {
// Light theme: 어두운 색상으로 변경
color: rgba(60, 60, 60, 1);
.font(@fontFamily: @baseFont, @fontSize: 24px);
font-weight: 400;
margin-left: auto;
&:last-child {
margin-right: 0;
}
}
// StarRating 컴포넌트 스타일 - Light theme에 맞게 조정
:global(.star-rating) {
width: 160px !important;
height: 32px !important;
}
.reviewAuthor {
// Light theme: 어두운 회색으로 변경
color: rgba(100, 100, 100, 1);
.font(@fontFamily: @baseFont, @fontSize: 22px);
font-weight: 400;
}
.reviewDate {
// Light theme: 어두운 색상으로 변경
color: rgba(60, 60, 60, 1);
.font(@fontFamily: @baseFont, @fontSize: 24px);
font-weight: 400;
margin-left: auto;
}
}
.reviewText {
.font(@fontFamily: @baseFont, @fontSize: 24px);
font-weight: 400;

57
com.twin.app.shoptime/src/views/UserReview/components/UserReviewsList.jsx
View File

@@ -1,20 +1,27 @@
// Light theme 리뷰 리스트 컴포넌트
import React, { useCallback, useEffect, useState } from "react";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import UserReviewItem from "./UserReviewItem";
import UserReviewsScroller from "./UserReviewsScroller";
import { $L } from "../../../utils/helperMethods";
import css from "./UserReviewsList.module.less";
import React, {
useCallback,
useEffect,
useState,
} from 'react';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import { $L } from '../../../utils/helperMethods';
import UserReviewItem from './UserReviewItem';
import css from './UserReviewsList.module.less';
import UserReviewsScroller from './UserReviewsScroller';
const Container = SpotlightContainerDecorator(
{
enterTo: "default-element",
preserveId: true,
leaveFor: {
left: "filter-all-stars"
left: "filter-all-stars",
},
restrict: "none",
spotlightDirection: "vertical"
spotlightDirection: "vertical",
},
"div"
);
@@ -23,14 +30,14 @@ const Container = SpotlightContainerDecorator(
* UserReviewPanel에서 사용하는 리뷰 리스트 컨테이너
* Redux 대신 props로 리뷰 데이터를 받음
*/
const UserReviewsList = ({
prdtId,
const UserReviewsList = ({
prdtId,
className,
reviewsData = [], // UserReviewPanel에서 전달받은 필터링된 처음 4개 리뷰
totalReviewCount = 0, // 전체 리뷰 개수
filteredReviewCount = 0, // 필터링된 리뷰 개수
currentFilter = { type: 'rating', value: 'all' }, // Single Filter 구조
showAllReviews = true
currentFilter = { type: "rating", value: "all" }, // Single Filter 구조
showAllReviews = true,
}) => {
const [selectedReviewIndex, setSelectedReviewIndex] = useState(null);
@@ -39,7 +46,7 @@ const UserReviewsList = ({
console.log("[UserReviewsList] Review item clicked:", {
rvwId: review.rvwId,
index: index,
review: review
review: review,
});
setSelectedReviewIndex(index);
}, []);
@@ -55,9 +62,15 @@ const UserReviewsList = ({
hasData: reviewsData && reviewsData.length > 0,
prdtId: prdtId,
dataSource: "props", // Redux가 아닌 props에서 받음
isFiltered: currentFilter.value !== 'all'
isFiltered: currentFilter.value !== "all",
});
}, [reviewsData, totalReviewCount, filteredReviewCount, currentFilter, prdtId]);
}, [
reviewsData,
totalReviewCount,
filteredReviewCount,
currentFilter,
prdtId,
]);
return (
<Container className={css.reviewsListContainer}>
@@ -65,20 +78,24 @@ const UserReviewsList = ({
<div className={css.reviewsListHeader}>
<div className={css.reviewsListHeaderText}>
<span className={css.reviewsListHeaderCount}>
{currentFilter.value !== 'all' ? filteredReviewCount : totalReviewCount}
</span> Customer Reviews
{currentFilter.value !== "all"
? filteredReviewCount
: totalReviewCount}
</span>{" "}
Customer Reviews
</div>
</div>
{/* 리뷰 스크롤러 */}
<UserReviewsScroller className={css.reviewsScroller}>
{/*
<div className={css.showReviewsText}>
{$L(
currentFilter.value !== 'all' ?
`Showing ${reviewsData ? reviewsData.length : 0} out of ${filteredReviewCount} filtered reviews` :
`Showing ${reviewsData ? reviewsData.length : 0} out of ${totalReviewCount} reviews`
)}
</div>
</div> */}
{/* 리뷰 아이템들 - props로 받은 데이터 사용 (이미 4개로 제한됨) */}
<div className={css.reviewItems}>
@@ -97,7 +114,9 @@ const UserReviewsList = ({
})
) : (
<div className={css.noReviews}>
{totalReviewCount === 0 ? 'No reviews available' : 'Loading reviews...'}
{totalReviewCount === 0
? "No reviews available"
: "Loading reviews..."}
</div>
)}
</div>

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

@@ -8,9 +8,9 @@
display: flex;
flex-direction: column;
// Light theme: 밝은 배경
background-color: rgba(250, 250, 250, 1);
background-color: @COLOR_WHITE;
border-radius: 12px;
padding: 20px;
padding: 0 0px 20px 40px;
}
.reviewsListHeader {
@@ -19,8 +19,8 @@
display: flex;
align-items: center;
margin-bottom: 20px;
border-bottom: 1px solid rgba(230, 230, 230, 1);
padding-bottom: 15px;
// border-bottom: 1px solid rgba(230, 230, 230, 1);
// padding-bottom: 15px;
.reviewsListHeaderText {
.font(@fontFamily: @baseFont, @fontSize: 28px);
@@ -38,10 +38,10 @@
.reviewsScroller {
flex: 1;
width: 100%;
width: 885px;
height: 100%;
overflow-y: auto;
.showReviewsText {
.size(@w:100%, @h:36px);
.font(@fontFamily: @baseFont, @fontSize: 20px);
@@ -57,6 +57,7 @@
display: flex;
flex-direction: column;
gap: 10px;
background-color: @COLOR_WHITE;
}
.noReviews {

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

@@ -18,7 +18,9 @@
// Light theme: 밝은 배경
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
> div:nth-child(1) {
padding-right: 0;
}
.tScroller {
width: 100%;
height: auto;
@@ -27,6 +29,7 @@
// Light theme 스크롤바 스타일
> div:nth-child(2) {
width: 0;
padding: 0;
> div:nth-child(1) {
background-color: @verTrackColor;
@@ -35,16 +38,16 @@
> div {
border-radius: 4px;
background-color: @barColor;
&:hover {
background-color: @focusedBarColor;
}
}
}
}
&.preventScroll {
>div{
> div {
overflow: hidden !important;
}
}
@@ -53,7 +56,7 @@
> div {
height: auto !important;
min-height: 400px;
padding-bottom: 0;
padding-bottom: 0;
// Light theme: 밝은 배경
background-color: rgba(255, 255, 255, 1);
}