-
@@ -332,6 +336,7 @@ export default function ProductAllSection({
selectedPrdtId={panelInfo && panelInfo.prdtId}
favoriteFlag={favoriteFlag}
onFavoriteFlagChanged={onFavoriteFlagChanged}
+ kind={"item_detail"}
/>
- div {
+ height: 339px;
+ }
}
// 3. Content Section - 1180px (1114px 콘텐츠 + 66px 스크롤바)
.contentSection {
position: absolute;
- left: 705px; // 60px + 645px
+ left: 705px; // 60px + 645px
top: 0;
- width: 1200px; // 30px 마진 + 1114px 콘텐츠 + 66px 스크롤바
+ width: 1210px; // 30px 마진 + 1114px 콘텐츠 + 66px 스크롤바
height: 100%;
padding: 0;
margin: 0;
@@ -84,11 +87,13 @@
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
-
+
// gap 대신 margin 사용 (Chromium 68 호환성)
> * {
margin-bottom: 5px;
- &:last-child { margin-bottom: 0; }
+ &:last-child {
+ margin-bottom: 0;
+ }
}
}
@@ -114,7 +119,6 @@
justify-content: flex-start;
align-items: flex-start;
position: relative; // 자식 absolute 요소의 기준점
-
// 스크롤러 오버라이드 (1210px = 30px + content + 스크롤바)
.scrollerOverride {
@@ -139,17 +143,16 @@
}
&::-webkit-scrollbar-thumb {
- background: #9C9C9C; // 스크롤바 색상
+ background: #9c9c9c; // 스크롤바 색상
border-radius: 3px; // 스크롤바 둥근 모서리
}
- // 스크롤바 thumb에 hover 효과 적용
+ // 스크롤바 thumb에 hover 효과 적용
&:hover::-webkit-scrollbar-thumb {
- background: #C72054;
+ background: #c72054;
}
}
-
-
+
// 내부 콘텐츠는 별도 너비 계산 없이 100%를 사용
> div {
width: 100%; // 부모의 패딩을 제외한 나머지 공간(1114px)을 모두 사용
@@ -174,7 +177,7 @@
display: flex;
flex-direction: column;
align-items: flex-start;
-
+
// ProductDetail.new 컴포넌트들
> div[class*="rollingWrap"] {
width: 100% !important; // 부모 영역 전체 사용
@@ -182,9 +185,9 @@
box-sizing: border-box;
}
}
-
+
#product-description-section,
- #user-reviews-section,
+ #user-reviews-section,
#you-may-also-like-section {
width: 100%; // 부모 콘텐츠 영역 전체 사용
max-width: none;
@@ -192,13 +195,13 @@
margin: 0;
box-sizing: border-box;
overflow: visible;
-
+
> * {
max-width: 100% !important; // 부모 영역 전체 사용
width: 100% !important;
box-sizing: border-box;
}
-
+
// 이미지들이 컨테이너를 넘지 않도록
img {
max-width: 100% !important;
@@ -229,7 +232,6 @@
// (중복 제거됨) 최상위 스크롤러/섹션 정의는 .scrollerWrapper 중첩 내부로 이동
-
// ProductDetailCard 스타일 참고 - 크기/간격만 적용
// 헤더 컨텐츠 영역 (태그, 별점)
@@ -237,7 +239,6 @@
width: 100%;
display: flex;
align-items: center;
- justify-content: space-between;
}
// 모바일 쇼핑 섹션 (mobileSection 참고)
@@ -247,10 +248,12 @@
display: flex;
justify-content: flex-start;
align-items: center;
-
+
> * {
margin-right: 6px;
- &:last-child { margin-right: 0; }
+ &:last-child {
+ margin-right: 0;
+ }
}
}
@@ -258,15 +261,18 @@
flex: 1 1 0 !important;
width: auto !important; // flex로 크기 조정
height: 60px !important;
- background: rgba(68, 68, 68, 0.50) !important;
+ background: rgba(68, 68, 68, 0.5) !important;
border-radius: 6px !important;
border: none !important;
padding: 0 !important;
- margin: 0 !important;
+ margin: 0;
display: flex !important;
align-items: center !important;
justify-content: center !important;
-
+ &.shopByMobileOne {
+ margin: 0 6px 0 0;
+ }
+
.shopByMobileText {
color: white !important;
font-size: 25px !important;
@@ -275,12 +281,484 @@
line-height: 35px !important;
text-align: center !important;
}
-
+
// 포커스 상태 추가
&:focus {
background: @PRIMARY_COLOR_RED !important; // 포커스시 빨간색 배경
outline: 2px solid @PRIMARY_COLOR_RED !important;
-
+
+ .shopByMobileText {
+ color: white !important; // 포커스시에도 텍스트는 흰색 유지
+ }
+ }
+}
+
+.favoriteBtnWrapper {
+ width: 60px;
+ height: 60px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 6px;
+ // 배경색과 라운드는 FavoriteBtn 내부에서 처리하므로 제거
+}
+
+// 주문 전화 섹션 (callToOrderSection 참고)
+.callToOrderSection {
+ align-self: stretch;
+ height: 40px;
+ padding: 17px 30px;
+ border-radius: 6px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px !important;
+ .callToOrderText {
+ color: #eaeaea;
+ font-size: 25px;
+ font-family: @baseFont; // LG Smart 폰트 사용
+ font-weight: 400; // Bold에서 Regular로 변경
+ line-height: 35px;
+ }
+
+ .phoneSection {
+ padding: 0 1px;
+ display: flex;
+ align-items: center;
+
+ > * {
+ margin-right: 10px;
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+
+ .phoneIconContainer {
+ width: 25px;
+ height: 25px;
+ position: relative;
+ overflow: hidden;
+
+ .phoneIcon {
+ width: 24.94px;
+ height: 24.97px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ // 전화 아이콘 이미지 또는 CSS로 구현
+ background-image: url("../../../../assets/images/icons/ic-gr-call-1.png");
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+ }
+
+ .phoneNumber {
+ color: #eaeaea;
+ font-size: 25px;
+ font-family: "LG Smart UI";
+ font-weight: 700;
+ line-height: 35px;
+ }
+ }
+}
+
+// 액션 버튼들 (actionButtons 참고)
+.actionButtonsWrapper {
+ align-self: stretch;
+ padding-top: 20px;
+ display: flex;
+ flex-direction: column;
+
+ > * {
+ margin-bottom: 5px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ &:last-child {
+ padding: 0;
+ }
+}
+
+// 모든 버튼 기본 스타일 (PRODUCT DETAILS는 빨간색 아님!)
+.productDetailsButton,
+.userReviewsButton,
+.youMayLikeButton {
+ align-self: stretch;
+ height: 60px;
+ background: rgba(255, 255, 255, 0.05); // 기본 회색 배경
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ color: #eaeaea;
+ font-size: 25px;
+ font-family: @baseFont; // LG Smart 폰트 사용
+ font-weight: 400; // Bold에서 Regular로 변경
+ line-height: 35px;
+
+ &:focus {
+ background: #c72054; // 포커스시만 빨간색
+ }
+}
+
+.themeButton {
+ align-self: stretch;
+ height: 60px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 6px;
+ margin-top: 10px;
+
+ &:focus {
+ background: #c72054;
+ }
+}
+
+// QR 래퍼 (imageSection 참고 - 240px 고정)
+.qrWrapper {
+ width: 240px;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+
+ > * {
+ margin-bottom: 10px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+}
+
+// ProductOverview 컨테이너 스타일 수정 (자식 요소에 맞게 크기 조정)
+[class*="ProductOverview"] {
+ padding: 0 0 5px;
+ // 내부 div (productInfoWrapper)
+ > div {
+ align-self: stretch;
+ justify-content: flex-start;
+ align-items: flex-start;
+ }
+ > div:first-child {
+ text-align: left;
+ }
+}
+
+// LayoutSample 포커스 테스트용 스타일
+.layoutSample {
+ width: 1124px;
+ height: 300px;
+ background-color: yellow;
+ margin-bottom: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: black;
+ font-size: 24px;
+ font-weight: bold;
+ cursor: pointer;
+ position: relative;
+ border-radius: 8px;
+
+ &:focus {
+ &::after {
+ .focused(@boxShadow:22px, @borderRadius:8px);
+ }
+ }
+}
+
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+// 1920px 화면 기준 전체 구조 (절대 위치로 정확히 배치)
+.detailArea {
+ width: 1920px; // 명시적으로 화면 크기 설정
+ height: 100%;
+ padding: 0; // 모든 패딩 제거
+ margin: 0; // 모든 마진 제거
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ position: relative; // 절대 위치 기준점
+
+ // Spotlight 좌우 이동을 위한 설정
+ &:focus-within {
+ outline: none;
+ }
+}
+
+// 1. Left Margin Section - 60px
+.leftMarginSection {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 60px;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ background: transparent;
+}
+
+// 2. Info Section - 645px
+.infoSection {
+ position: absolute;
+ left: 60px;
+ top: 0;
+ width: 650px;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ > div {
+ height: 339px;
+ }
+}
+
+// 3. Content Section - 1180px (1114px 콘텐츠 + 66px 스크롤바)
+.contentSection {
+ position: absolute;
+ left: 705px; // 60px + 645px
+ top: 0;
+ width: 1210px; // 30px 마진 + 1114px 콘텐츠 + 66px 스크롤바
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+}
+
+// 4. Scroll Section - 66px (삭제 - contentSection에 포함)
+.scrollSection {
+ display: none; // 사용하지 않음
+}
+
+// 왼쪽 영역 컨테이너 (infoSection 내부)
+.leftInfoContainer {
+ width: 635px; // 실제 콘텐츠 영역
+ margin-right: 10px; // 우측 10px 간격
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ height: 100%;
+}
+
+// 왼쪽 영역 내부 래퍼
+.leftInfoWrapper {
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+
+ // gap 대신 margin 사용 (Chromium 68 호환성)
+ > * {
+ margin-bottom: 5px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+}
+
+// 오른쪽 영역 컨테이너 (contentSection 내부)
+.rightContentContainer {
+ width: 1210px; // 30px 마진 + 1114px 콘텐츠 + 66px 스크롤바
+ height: @globalHeight - 136px;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+
+ // 스크롤러 래퍼 (contentSection 내부)
+ .scrollerWrapper {
+ width: 1210px; // 30px 마진 + 1114px 콘텐츠 + 66px 스크롤바 (절대값)
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ overflow: visible; // hidden에서 visible로 변경
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ position: relative; // 자식 absolute 요소의 기준점
+
+ // 스크롤러 오버라이드 (1210px = 30px + content + 스크롤바)
+ .scrollerOverride {
+ width: 1210px; // 절대 크기 지정
+ height: 100%;
+ // 좌측 30px, 우측 66px(스크롤바) 패딩을 명시적으로 적용
+ padding: 0 10px 0 30px;
+ box-sizing: border-box;
+ margin: 0;
+ overflow-y: auto;
+ overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
+
+ // 스크롤바 너비를 6px로 명확하게 설정
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent; // 트랙 배경은 투명하게
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: #9c9c9c; // 스크롤바 색상
+ border-radius: 3px; // 스크롤바 둥근 모서리
+ }
+
+ // 스크롤바 thumb에 hover 효과 적용
+ &:hover::-webkit-scrollbar-thumb {
+ background: #c72054;
+ }
+ }
+
+ // 내부 콘텐츠는 별도 너비 계산 없이 100%를 사용
+ > div {
+ width: 100%; // 부모의 패딩을 제외한 나머지 공간(1114px)을 모두 사용
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ overflow: visible;
+ }
+
+ // 스크롤 콘텐츠 내부의 모든 섹션들 (패딩 제거 - scrollerOverride에서 처리함)
+ #product-details-section {
+ width: 1124px; // 부모 콘텐츠 영역 전체 사용
+ max-width: none;
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ overflow: visible;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ // ProductDetail.new 컴포넌트들
+ > div[class*="rollingWrap"] {
+ width: 100% !important; // 부모 영역 전체 사용
+ max-width: none !important;
+ box-sizing: border-box;
+ }
+ }
+
+ #product-description-section,
+ #user-reviews-section,
+ #you-may-also-like-section {
+ width: 100%; // 부모 콘텐츠 영역 전체 사용
+ max-width: none;
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ overflow: visible;
+
+ > * {
+ max-width: 100% !important; // 부모 영역 전체 사용
+ width: 100% !important;
+ box-sizing: border-box;
+ }
+
+ // 이미지들이 컨테이너를 넘지 않도록
+ img {
+ max-width: 100% !important;
+ width: auto !important;
+ height: auto;
+ }
+ }
+
+ // 상품 상세 영역 (마진 포함 크기)
+ .productDetail {
+ width: 1124px; // 1114px + 10px
+ max-width: 1124px;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch; // 자식 요소들이 전체 너비 사용하도록
+ }
+
+ // 스크롤 마커
+ .scrollMarker {
+ height: 1px;
+ visibility: hidden;
+ }
+ } // .scrollerWrapper
+} // .rightContentContainer
+
+// (중복 제거됨) .scrollerWrapper는 .rightContentContainer 하위로 중첩 이동
+
+// (중복 제거됨) 최상위 스크롤러/섹션 정의는 .scrollerWrapper 중첩 내부로 이동
+
+// ProductDetailCard 스타일 참고 - 크기/간격만 적용
+
+// 헤더 컨텐츠 영역 (태그, 별점)
+.headerContent {
+ width: 100%;
+ display: flex;
+ align-items: center;
+}
+
+// 모바일 쇼핑 섹션 (mobileSection 참고)
+.buttonContainer {
+ align-self: stretch;
+ padding-top: 19px;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+
+ > * {
+ margin-right: 6px;
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+}
+
+.shopByMobileButton {
+ flex: 1 1 0 !important;
+ width: auto !important; // flex로 크기 조정
+ height: 60px !important;
+ background: rgba(68, 68, 68, 0.5) !important;
+ border-radius: 6px !important;
+ border: none !important;
+ padding: 0 !important;
+ margin: 0;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ &.shopByMobileOne {
+ margin: 0 6px 0 0;
+ }
+
+ .shopByMobileText {
+ color: white !important;
+ font-size: 25px !important;
+ font-family: @baseFont !important; // LG Smart 폰트 사용
+ font-weight: 400 !important; // Bold에서 Regular로 변경
+ line-height: 35px !important;
+ text-align: center !important;
+ }
+
+ // 포커스 상태 추가
+ &:focus {
+ background: @PRIMARY_COLOR_RED !important; // 포커스시 빨간색 배경
+ outline: 2px solid @PRIMARY_COLOR_RED !important;
+
.shopByMobileText {
color: white !important; // 포커스시에도 텍스트는 흰색 유지
}
@@ -306,38 +784,39 @@
display: flex;
justify-content: space-between;
align-items: center;
-
+
.callToOrderText {
- color: #EAEAEA;
+ color: #eaeaea;
font-size: 25px;
font-family: @baseFont; // LG Smart 폰트 사용
font-weight: 400; // Bold에서 Regular로 변경
line-height: 35px;
}
-
+
.phoneSection {
padding: 0 1px;
display: flex;
align-items: center;
-
+
> * {
margin-right: 10px;
- &:last-child { margin-right: 0; }
+ &:last-child {
+ margin-right: 0;
+ }
}
-
+
.phoneIconContainer {
width: 25px;
height: 25px;
position: relative;
overflow: hidden;
-
+
.phoneIcon {
width: 24.94px;
height: 24.97px;
position: absolute;
left: 0;
top: 0;
- background: #EAEAEA;
// 전화 아이콘 이미지 또는 CSS로 구현
background-image: url("../../../../assets/images/icons/ic-gr-call-1.png");
background-size: contain;
@@ -345,11 +824,11 @@
background-position: center;
}
}
-
+
.phoneNumber {
- color: #EAEAEA;
+ color: #eaeaea;
font-size: 25px;
- font-family: 'LG Smart UI';
+ font-family: "LG Smart UI";
font-weight: 700;
line-height: 35px;
}
@@ -362,10 +841,15 @@
padding-top: 20px;
display: flex;
flex-direction: column;
-
+
> * {
margin-bottom: 5px;
- &:last-child { margin-bottom: 0; }
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ &:last-child {
+ padding: 0;
}
}
@@ -380,15 +864,15 @@
display: flex;
align-items: center;
justify-content: center;
-
- color: #EAEAEA;
+
+ color: #eaeaea;
font-size: 25px;
font-family: @baseFont; // LG Smart 폰트 사용
font-weight: 400; // Bold에서 Regular로 변경
line-height: 35px;
-
+
&:focus {
- background: #C72054; // 포커스시만 빨간색
+ background: #c72054; // 포커스시만 빨간색
}
}
@@ -398,9 +882,9 @@
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
margin-top: 10px;
-
+
&:focus {
- background: #C72054;
+ background: #c72054;
}
}
@@ -411,65 +895,34 @@
display: flex;
flex-direction: column;
align-items: flex-end;
-
+
> * {
margin-bottom: 10px;
- &:last-child { margin-bottom: 0; }
+ &:last-child {
+ margin-bottom: 0;
+ }
}
}
// ProductOverview 컨테이너 스타일 수정 (자식 요소에 맞게 크기 조정)
[class*="ProductOverview"] {
- align-self: stretch;
- padding: 0 0 5px; // ProductDetailCard mainContent와 동일한 패딩
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
-
+ padding: 0 0 5px;
// 내부 div (productInfoWrapper)
> div {
align-self: stretch;
- display: flex;
justify-content: flex-start;
align-items: flex-start;
-
- > * {
- margin-right: 15px; // ProductDetailCard와 동일한 간격
- &:last-child { margin-right: 0; }
- }
-
- // 가격 섹션 (flex로 남은 공간 차지)
- > div:first-child {
- flex: 1 1 0;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- }
-
- // 이미지 섹션 (QR 포함, 고정 크기)
- > div:last-child {
- width: 240px;
- flex-shrink: 0;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
-
- > * {
- margin-bottom: 10px;
- &:last-child { margin-bottom: 0; }
- }
- }
+ }
+ > div:first-child {
+ text-align: left;
}
}
// LayoutSample 포커스 테스트용 스타일
.layoutSample {
width: 1124px;
- height: 35px;
+ height: 300px;
background-color: yellow;
- // border: 2px solid white;
margin-bottom: 20px;
display: flex;
justify-content: center;
@@ -480,7 +933,7 @@
cursor: pointer;
position: relative;
border-radius: 8px;
-
+
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:8px);
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.module.less
index d465ee52..9075b77c 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.module.less
@@ -17,7 +17,7 @@
padding: 10px;
border-radius: 6px;
cursor: pointer;
-
+
&:focus {
background-color: rgba(255, 255, 255, 0.1);
outline: 2px solid @PRIMARY_COLOR_RED;
@@ -26,7 +26,7 @@
.title {
.font(@fontFamily: @baseFont, @fontSize: 30px);
font-weight: 700;
- margin: 90px 0 20px 0;
+ margin: 30px 0 20px 0;
}
}
@@ -34,7 +34,7 @@
width: 100%;
border-radius: 12px;
cursor: pointer;
-
+
&:focus {
outline: 6px solid @PRIMARY_COLOR_RED;
outline-offset: 2px;
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/CustomerImages/CustomerImages.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/CustomerImages/CustomerImages.jsx
index 120ca946..8176db49 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/CustomerImages/CustomerImages.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/CustomerImages/CustomerImages.jsx
@@ -1,30 +1,43 @@
-import React, { useCallback, useEffect, useState } from "react";
-import css from "./CustomerImages.module.less";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
-import THeader from "../../../../../components/THeader/THeader";
-import { $L } from "../../../../../utils/helperMethods";
-import classNames from "classnames";
-import Spotlight from "@enact/spotlight";
+import React, {
+ useCallback,
+ useEffect,
+ useState,
+} from 'react';
+
+import classNames from 'classnames';
+
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+ from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
+
+import THeader from '../../../../../components/THeader/THeader';
+import { $L } from '../../../../../utils/helperMethods';
+import css from './CustomerImages.module.less';
const Container = SpotlightContainerDecorator(
- {
- enterTo: "default-element",
+ {
+ enterTo: "default-element",
preserveld: true,
- leaveFor: {
- left: "spotlight-product-info-section-container"
- }
+ leaveFor: {
+ left: "spotlight-product-info-section-container",
+ },
},
"div"
);
const SpottableComponent = Spottable("div");
-export default function CustomerImages({ onImageClick, onViewMoreClick, imageData }) {
+export default function CustomerImages({
+ onImageClick,
+ onViewMoreClick,
+ imageData,
+}) {
// Props로 전달받은 imageData 사용 (useReviews Hook에서 추출된 이미지 데이터)
const [selectedIndex, setSelectedIndex] = useState(null);
const [currentPage, setCurrentPage] = useState(1);
const IMAGES_PER_PAGE = 5;
+ const [focusIdx, setFocusIdx] = useState(0);
// [CustomerImages] useReviews 이미지 데이터 수신 확인
// useEffect(() => {
@@ -43,7 +56,7 @@ export default function CustomerImages({ onImageClick, onViewMoreClick, imageDat
const handleReviewImageClick = (index) => {
setSelectedIndex(index);
-
+
// 이미지 클릭 시 All-Images 모드로 팝업 열기
if (onImageClick) {
onImageClick(index);
@@ -58,25 +71,35 @@ export default function CustomerImages({ onImageClick, onViewMoreClick, imageDat
};
// 키 이벤트 처리 (왼쪽 화살표, Enter 키)
- const handleKeyDown = useCallback((ev, index) => {
- if (ev.keyCode === 37) { // 왼쪽 화살표 키
- ev.preventDefault();
- ev.stopPropagation();
- console.log("[CustomerImages] Left arrow pressed, focusing product-details-button");
- Spotlight.focus("product-details-button");
- } else if (ev.keyCode === 13) { // Enter 키
- ev.preventDefault();
- ev.stopPropagation();
- console.log("[CustomerImages] Enter pressed on image:", index);
- handleReviewImageClick(index);
- }
- }, [handleReviewImageClick]);
+ const handleKeyDown = useCallback(
+ (ev, index) => {
+ if (ev.keyCode === 37) {
+ // 왼쪽 화살표 키
+ ev.preventDefault();
+ ev.stopPropagation();
+ console.log(
+ "[CustomerImages] Left arrow pressed, focusing product-details-button"
+ );
+ Spotlight.focus("product-details-button");
+ } else if (ev.keyCode === 13) {
+ // Enter 키
+ ev.preventDefault();
+ ev.stopPropagation();
+ console.log("[CustomerImages] Enter pressed on image:", index);
+ handleReviewImageClick(index);
+ }
+ },
+ [handleReviewImageClick]
+ );
// 이미지가 없을 때도 컴포넌트를 렌더링하되 내용은 표시하지 않음
return (
<>
-
{reviewDetailData && reviewDetailData.totRvwAvg && (
-
{reviewListData &&
(() => {
- const reviewsToShow = showAllReviews ? reviewListData : reviewListData.slice(0, 5);
+ const reviewsToShow = showAllReviews
+ ? reviewListData
+ : reviewListData.slice(0, 5);
console.log("[UserReviews] Reviews to render:", {
showAllReviews,
totalReviews: reviewListData.length,
reviewsToShowCount: reviewsToShow.length,
isShowingAll: showAllReviews,
- reviewListData: reviewListData
+ reviewListData: reviewListData,
});
-
+
// 실제 렌더링될 각 리뷰 로그
reviewsToShow.forEach((review, index) => {
- console.log(`[UserReviews] Review ${index + 1}/${reviewsToShow.length}:`, {
- rvwId: review.rvwId,
- rvwCtnt: (review.rvwCtnt && review.rvwCtnt.substring(0, 50)) + "...",
- rvwRtng: review.rvwRtng,
- hasImages: (review.reviewImageList && review.reviewImageList.length) || 0,
- rvwRgstDtt: review.rvwRgstDtt,
- fullReview: review
- });
+ console.log(
+ `[UserReviews] Review ${index + 1}/${reviewsToShow.length}:`,
+ {
+ rvwId: review.rvwId,
+ rvwCtnt:
+ (review.rvwCtnt && review.rvwCtnt.substring(0, 50)) +
+ "...",
+ rvwRtng: review.rvwRtng,
+ hasImages:
+ (review.reviewImageList &&
+ review.reviewImageList.length) ||
+ 0,
+ rvwRgstDtt: review.rvwRgstDtt,
+ fullReview: review,
+ }
+ );
});
-
+
return reviewsToShow;
})().map((review, index, array) => {
- const { reviewImageList, rvwRtng, rvwRgstDtt, rvwCtnt, rvwId, wrtrNknm, rvwWrtrId } =
- review;
+ const {
+ reviewImageList,
+ rvwRtng,
+ rvwRgstDtt,
+ rvwCtnt,
+ rvwId,
+ wrtrNknm,
+ rvwWrtrId,
+ } = review;
const isLastReview = index === array.length - 1;
/* console.log(`[UserReviews] Rendering review ${index}:`, {
rvwId,
@@ -258,7 +312,11 @@ export default function UserReviews({ productInfo, panelInfo, reviewsData }) {
aria-label={`user-reviews-:${rvwId}`}
className={css.reviewContentContainer}
onClick={() => handleReviewClick(index)}
- spotlightId={isLastReview ? 'user-review-at-last' : `user-review-${index}`}
+ spotlightId={
+ isLastReview
+ ? "user-review-at-last"
+ : `user-review-${index}`
+ }
>
{reviewImageList && reviewImageList.length > 0 && (
![]()
)}
- {rvwCtnt && (
-
{(() => {
@@ -84,7 +107,7 @@ export default function CustomerImages({ onImageClick, onViewMoreClick, imageDat
const endIndex = startIndex + IMAGES_PER_PAGE;
const displayImages = imageData.slice(startIndex, endIndex);
const hasMoreImages = imageData.length > endIndex;
-
+
console.log("[CustomerImages] Pagination debug:", {
currentPage,
IMAGES_PER_PAGE,
@@ -92,9 +115,9 @@ export default function CustomerImages({ onImageClick, onViewMoreClick, imageDat
startIndex,
endIndex,
displayImagesCount: displayImages.length,
- hasMoreImages
+ hasMoreImages,
});
-
+
return (
<>
{displayImages.map((reviewImage, displayIndex) => {
@@ -105,16 +128,22 @@ export default function CustomerImages({ onImageClick, onViewMoreClick, imageDat
handleReviewImageClick(actualIndex)}
onKeyDown={(ev) => handleKeyDown(ev, actualIndex)}
spotlightId={`customer-image-${actualIndex}`}
+ onFocus={() =>
+ displayIndex < 5 ? setFocusIdx(displayIndex) : ""
+ }
>
- 
{
/* console.log(`[CustomerImages] Image loaded successfully:`, {
@@ -124,19 +153,22 @@ export default function CustomerImages({ onImageClick, onViewMoreClick, imageDat
}); */
}}
onError={(e) => {
- console.error(`[CustomerImages] Image load failed:`, {
- index: actualIndex,
- imgUrl,
- imgId,
- error: e.target.error
- });
- e.target.style.display = 'none';
+ console.error(
+ `[CustomerImages] Image load failed:`,
+ {
+ index: actualIndex,
+ imgUrl,
+ imgId,
+ error: e.target.error,
+ }
+ );
+ e.target.style.display = "none";
}}
/>
);
})}
-
+
{hasMoreImages && (
) : (
-
+
{/* Custom Scrollbar (피그마 스타일) */}
{
/* console.log(`[CustomerImages] Image loaded successfully:`, {
@@ -124,19 +153,22 @@ export default function CustomerImages({ onImageClick, onViewMoreClick, imageDat
}); */
}}
onError={(e) => {
- console.error(`[CustomerImages] Image load failed:`, {
- index: actualIndex,
- imgUrl,
- imgId,
- error: e.target.error
- });
- e.target.style.display = 'none';
+ console.error(
+ `[CustomerImages] Image load failed:`,
+ {
+ index: actualIndex,
+ imgUrl,
+ imgId,
+ error: e.target.error,
+ }
+ );
+ e.target.style.display = "none";
}}
/>
-
- {imageData ? 'No customer images available' : 'Loading customer images...'}
+
)}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/CustomerImages/CustomerImages.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/CustomerImages/CustomerImages.module.less
index da6f1108..6a81578e 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/CustomerImages/CustomerImages.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/CustomerImages/CustomerImages.module.less
@@ -3,7 +3,7 @@
.container {
width: 1124px;
- height: 236px;
+ height: 299px;
max-width: 1124px;
display: flex;
flex-direction: column;
@@ -14,7 +14,7 @@
margin: 0 0 10px 0;
> div {
- padding: 0;
+ padding: 0 0 0 20px;
> span {
.font(@fontFamily: @baseFont, @fontSize: 24px);
font-weight: 400;
@@ -26,7 +26,7 @@
.wrapper {
width: 100%;
- height: 190px;
+ height: 252px;
display: flex;
justify-content: flex-start;
align-items: center;
@@ -36,13 +36,25 @@
overflow: visible;
.reviewCard {
- width: calc((100% - 75px) / 6); // 6개 슬롯(5이미지+1버튼), margin-right 15px * 5 = 75px
- height: 150px;
+ // width: calc(
+ // (100% - 75px) / 6
+ // ); // 6개 슬롯(5이미지+1버튼), margin-right 15px * 5 = 75px
+ // height: 150px;
+ width: 157.3px;
+ height: 192.5px;
position: relative;
flex-shrink: 0;
margin-right: 15px;
-
+
+ &.focused {
+ width: 211.75px;
+ height: 211.75px;
+ }
+
&:focus {
+ //포커스시 확대
+ // width: 211.75px;
+ // height: 211.75px;
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
}
@@ -61,13 +73,18 @@
}
.viewMoreButton {
- width: calc((100% - 75px) / 6); // reviewCard와 동일한 크기
- height: 150px;
+ // width: calc((100% - 75px) / 6); // reviewCard와 동일한 크기
+ // height: 150px;
+ width: 157.3px;
+ height: 192.5px;
position: relative;
flex-shrink: 0;
cursor: pointer;
-
+
&:focus {
+ // //포커스시 확대
+ // width: 211.75px;
+ // height: 211.75px;
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
}
@@ -77,7 +94,11 @@
width: 100%;
height: 100%;
padding: 4px;
- background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%);
+ background: linear-gradient(
+ 0deg,
+ rgba(0, 0, 0, 0.8) 0%,
+ rgba(0, 0, 0, 0.8) 100%
+ );
border-radius: 12px;
display: flex;
justify-content: center;
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx
index 5cd28bb5..7c8dc715 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx
@@ -1,9 +1,12 @@
-import React, { useCallback } from "react";
-import classNames from "classnames";
-import Spottable from "@enact/spotlight/Spottable";
-import StarRating from "../../../components/StarRating";
-import { $L } from "../../../../../utils/helperMethods";
-import css from "./UserReviewDetail.module.less";
+import React, { useCallback } from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import { $L } from '../../../../../utils/helperMethods';
+import StarRating from '../../../components/StarRating';
+import css from './UserReviewDetail.module.less';
const SpottableButton = Spottable("div");
@@ -36,9 +39,15 @@ export default function UserReviewDetail({
);
}
- const reviewImage = currentReview.reviewImageList && currentReview.reviewImageList[0];
+ const reviewImage =
+ currentReview.reviewImageList && currentReview.reviewImageList[0];
const hasMultipleReviews = totalReviews > 1;
+ const formatDate = (dateStr) => {
+ const [year, month, day] = dateStr.split("-");
+ return `${year.slice(2)}.${month}.${day}`;
+ };
+
return (
+ {imageData
+ ? "No customer images available"
+ : "Loading customer images..."}
{/* Left Arrow - 이전 리뷰가 있을 때만 표시 */}
@@ -57,14 +66,14 @@ export default function UserReviewDetail({
{/* Review Image */}
{reviewImage && (
-
+
{/* Review Text */}
{currentReview.rvwCtnt && (
-
- 
)}
-
+
{/* Review Info */}
{/* Rating and Meta */}
@@ -78,31 +87,29 @@ export default function UserReviewDetail({
/>
)}
-
+
{/* Email */}
{(currentReview.wrtrNknm || currentReview.rvwWrtrId) && (
{currentReview.wrtrNknm || currentReview.rvwWrtrId}
)}
-
+
{/* Date */}
{currentReview.rvwRgstDtt && (
- {currentReview.rvwRgstDtt}
+ {formatDate(currentReview.rvwRgstDtt)}
)}
- "{currentReview.rvwCtnt}"
-
+ "{currentReview.rvwCtnt}"
)}
@@ -120,4 +127,4 @@ export default function UserReviewDetail({
)}
);
-}
\ No newline at end of file
+}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviews.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviews.jsx
index 4e6c5f0b..7d6b6da2 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviews.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviews.jsx
@@ -1,18 +1,32 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import css from "./UserReviews.module.less";
-import UserReviewsScroller from "../../components/UserReviewsScroller/UserReviewsScroller";
-import useScrollTo from "../../../../hooks/useScrollTo";
-import THeaderDetail from "../../components/THeaderDetail";
-import { $L } from "../../../../utils/helperMethods";
-import { useMemo } from "react";
-import Spottable from "@enact/spotlight/Spottable";
-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import { useDispatch, useSelector } from "react-redux";
-import { toggleShowAllReviews } from "../../../../actions/productActions";
-import useReviews from "../../../../hooks/useReviews/useReviews";
-import StarRating from "../../components/StarRating";
-import CustomerImages from "./CustomerImages/CustomerImages";
-import UserReviewsPopup from "./UserReviewsPopup/UserReviewsPopup";
+import React, {
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+
+import classNames from 'classnames';
+import {
+ useDispatch,
+ useSelector,
+} from 'react-redux';
+
+import SpotlightContainerDecorator
+ from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
+
+import { toggleShowAllReviews } from '../../../../actions/productActions';
+import useReviews from '../../../../hooks/useReviews/useReviews';
+import useScrollTo from '../../../../hooks/useScrollTo';
+import { $L } from '../../../../utils/helperMethods';
+import StarRating from '../../components/StarRating';
+import THeaderDetail from '../../components/THeaderDetail';
+import UserReviewsScroller
+ from '../../components/UserReviewsScroller/UserReviewsScroller';
+import CustomerImages from './CustomerImages/CustomerImages';
+import css from './UserReviews.module.less';
+import UserReviewsPopup from './UserReviewsPopup/UserReviewsPopup';
const SpottableComponent = Spottable("div");
@@ -22,10 +36,10 @@ const Container = SpotlightContainerDecorator(
preserveld: true,
leaveFor: {
left: "spotlight-product-info-section-container",
- up: "view-all-reviews-button"
+ up: "view-all-reviews-button",
},
restrict: "none",
- spotlightDirection: "vertical"
+ spotlightDirection: "vertical",
},
"div"
);
@@ -35,32 +49,39 @@ export default function UserReviews({ productInfo, panelInfo, reviewsData }) {
const dispatch = useDispatch();
const containerRef = useRef(null);
const tScrollerRef = useRef(null);
-
+
// ProductAllSection에서 전달받은 데이터 사용 (우선순위)
// 없으면 자체 useReviews Hook 사용 (UserReviewPanel에서 직접 접근할 때)
const fallbackReviews = useReviews(productInfo && productInfo.prdtId);
-
+
const actualReviewsData = reviewsData || {
previewReviews: fallbackReviews.previewReviews,
stats: fallbackReviews.stats,
- isLoading: fallbackReviews.isLoading
+ isLoading: fallbackReviews.isLoading,
};
-
+
// 팝업 상태 관리 - 모드와 선택된 이미지 인덱스 추가
const [isPopupOpen, setIsPopupOpen] = useState(false);
const [popupMode, setPopupMode] = useState("customer-images"); // "customer-images", "all-images"
const [selectedImageIndex, setSelectedImageIndex] = useState(0);
// Redux에서 showAllReviews 상태 가져오기
const showAllReviews = useSelector((state) => state.product.showAllReviews);
-
+
// 디버깅: showAllReviews 상태 변경 확인
useEffect(() => {
console.log("[UserReviews] showAllReviews state changed:", {
showAllReviews,
- reviewListLength: (actualReviewsData.previewReviews && actualReviewsData.previewReviews.length) || 0,
- willShowCount: showAllReviews ? ((actualReviewsData.previewReviews && actualReviewsData.previewReviews.length) || 0) : 5,
+ reviewListLength:
+ (actualReviewsData.previewReviews &&
+ actualReviewsData.previewReviews.length) ||
+ 0,
+ willShowCount: showAllReviews
+ ? (actualReviewsData.previewReviews &&
+ actualReviewsData.previewReviews.length) ||
+ 0
+ : 5,
hasReviewsData: !!reviewsData,
- isFromProductAllSection: !!reviewsData
+ isFromProductAllSection: !!reviewsData,
});
}, [showAllReviews, actualReviewsData.previewReviews, reviewsData]);
@@ -68,33 +89,36 @@ export default function UserReviews({ productInfo, panelInfo, reviewsData }) {
useEffect(() => {
if (showAllReviews && tScrollerRef.current) {
// console.log("[UserReviews] Forcing TScroller to update scroll area for all reviews");
-
+
// 다음 렌더링 사이클 후 스크롤 영역 재계산
setTimeout(() => {
if (tScrollerRef.current) {
// TScroller의 스크롤 영역을 강제로 업데이트
- if (typeof tScrollerRef.current.calculateMetrics === 'function') {
+ if (typeof tScrollerRef.current.calculateMetrics === "function") {
tScrollerRef.current.calculateMetrics();
}
-
+
// 또는 scrollTo를 호출해서 스크롤 영역 업데이트
- if (typeof tScrollerRef.current.scrollTo === 'function') {
- tScrollerRef.current.scrollTo({ position: { y: 0 }, animate: false });
+ if (typeof tScrollerRef.current.scrollTo === "function") {
+ tScrollerRef.current.scrollTo({
+ position: { y: 0 },
+ animate: false,
+ });
}
-
+
// console.log("[UserReviews] TScroller scroll area updated");
}
}, 100);
}
}, [showAllReviews]);
-
+
// actualReviewsData에서 데이터 가져오기 (ProductAllSection에서 전달받거나 자체 useReviews)
const reviewListData = actualReviewsData.previewReviews; // 리뷰 리스트 (5개)
const reviewTotalCount = actualReviewsData.stats.totalReviews;
const reviewDetailData = {
totRvwCnt: actualReviewsData.stats.totalReviews,
avgRvwScr: actualReviewsData.stats.averageRating,
- totRvwAvg: actualReviewsData.stats.averageRating
+ totRvwAvg: actualReviewsData.stats.averageRating,
};
// [UserReviews] 데이터 수신 확인 로그
@@ -105,7 +129,9 @@ export default function UserReviews({ productInfo, panelInfo, reviewsData }) {
averageRating: actualReviewsData.stats.averageRating,
isLoading: actualReviewsData.isLoading,
hasData: reviewListData && reviewListData.length > 0,
- dataSource: reviewsData ? 'ProductAllSection props' : 'useReviews fallback'
+ dataSource: reviewsData
+ ? "ProductAllSection props"
+ : "useReviews fallback",
});
}, [reviewListData, actualReviewsData, reviewsData]);
@@ -118,26 +144,32 @@ export default function UserReviews({ productInfo, panelInfo, reviewsData }) {
};
// 리뷰 클릭으로 User Reviews 모드 팝업 열기
- const handleReviewClick = useCallback((reviewIndex) => {
- // 클릭한 리뷰 정보 (previewReviews에서)
- const clickedReview = reviewListData[reviewIndex];
-
- // 전체 리뷰에서 클릭한 리뷰의 실제 인덱스 찾기
- const realIndex = fallbackReviews.allReviews.findIndex(
- review => review.rvwId === clickedReview.rvwId
- );
-
- console.log("[UserReviews] Review clicked, opening popup in User Reviews mode:", {
- previewIndex: reviewIndex,
- realIndex,
- clickedReviewId: clickedReview.rvwId,
- totalReviews: fallbackReviews.allReviews.length
- });
-
- setSelectedImageIndex(realIndex >= 0 ? realIndex : reviewIndex);
- setPopupMode("user-reviews");
- setIsPopupOpen(true);
- }, [reviewListData, fallbackReviews.allReviews]);
+ const handleReviewClick = useCallback(
+ (reviewIndex) => {
+ // 클릭한 리뷰 정보 (previewReviews에서)
+ const clickedReview = reviewListData[reviewIndex];
+
+ // 전체 리뷰에서 클릭한 리뷰의 실제 인덱스 찾기
+ const realIndex = fallbackReviews.allReviews.findIndex(
+ (review) => review.rvwId === clickedReview.rvwId
+ );
+
+ console.log(
+ "[UserReviews] Review clicked, opening popup in User Reviews mode:",
+ {
+ previewIndex: reviewIndex,
+ realIndex,
+ clickedReviewId: clickedReview.rvwId,
+ totalReviews: fallbackReviews.allReviews.length,
+ }
+ );
+
+ setSelectedImageIndex(realIndex >= 0 ? realIndex : reviewIndex);
+ setPopupMode("user-reviews");
+ setIsPopupOpen(true);
+ },
+ [reviewListData, fallbackReviews.allReviews]
+ );
// 팝업 관련 핸들러들
// +View More 버튼으로 Customer Images 모드 팝업 열기
@@ -149,7 +181,10 @@ export default function UserReviews({ productInfo, panelInfo, reviewsData }) {
// 이미지 클릭으로 All-Images 모드 팝업 열기
const handleOpenAllImagesPopup = useCallback((imageIndex = 0) => {
- console.log("[UserReviews] Opening popup in All-Images mode, image index:", imageIndex);
+ console.log(
+ "[UserReviews] Opening popup in All-Images mode, image index:",
+ imageIndex
+ );
setSelectedImageIndex(imageIndex);
setPopupMode("all-images");
setIsPopupOpen(true);
@@ -164,7 +199,10 @@ export default function UserReviews({ productInfo, panelInfo, reviewsData }) {
// 팝업 모드 변경 핸들러
const handleModeChange = useCallback((newMode, imageIndex = 0) => {
- console.log("[UserReviews] Mode change requested:", { newMode, imageIndex });
+ console.log("[UserReviews] Mode change requested:", {
+ newMode,
+ imageIndex,
+ });
setPopupMode(newMode);
if (newMode === "all-images" || newMode === "user-reviews") {
setSelectedImageIndex(imageIndex);
@@ -173,9 +211,6 @@ export default function UserReviews({ productInfo, panelInfo, reviewsData }) {
// handleImageClick 제거 - 더 이상 필요없음
-
-
-
// customerImages 로직 제거 - useReviews의 extractImagesFromReviews 사용
return (
@@ -190,13 +225,15 @@ export default function UserReviews({ productInfo, panelInfo, reviewsData }) {
verticalScrollbar="auto"
cbScrollTo={getScrollTo}
forceUpdate={showAllReviews}
- key={showAllReviews ? `all-${(reviewListData && reviewListData.length) || 0}` : 'limited-5'}
+ key={
+ showAllReviews
+ ? `all-${(reviewListData && reviewListData.length) || 0}`
+ : "limited-5"
+ }
>
{rvwCtnt}
- )}
+ {rvwCtnt && {rvwCtnt}
}
handleImageLoad(index)}
- onError={() => handleImageError(index)}
- />
-
- {/* 이미지 로드 실패 시 표시할 플레이스홀더 */}
- {isFailed && (
-