From 05cfceb2d2a575ee6e16cb4033e7d3189ce23aa6 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Wed, 1 Oct 2025 16:18:14 +0900 Subject: [PATCH] =?UTF-8?q?[=EC=83=81=ED=92=88=EC=83=81=EC=84=B8]=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B0=8F=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. review 팝업에서 긴글일 경우 스크롤 포커스 가능하도록 변경 요청.(작업완료 10.01) 2. review 팝업에서 짧은 글일 경우 스크롤 미노출 요청. (작업완료 10.01) 3. 리뷰 prev, next버튼 이후 초기화 부분 수정작업(작업완료 10.01) 4. 디테일 첫번째 영상 크기 변경(작업완료 10.01) 5. 리뷰팝업부분 스타일 변경 --- .../src/views/DetailPanel/DetailPanel.jsx | 9 +- .../ProductVideo/ProductVideo.module.less | 2 +- .../UserReviewDetail/UserReviewDetail.jsx | 119 ++++++----- .../UserReviewDetail.module.less | 198 ++++++++++-------- .../UserReviewsPopup/UserReviewsPopup.jsx | 8 +- .../UserReviewsPopup.module.less | 2 +- .../DetailPanel/components/THeaderCustom.jsx | 2 + .../components/THeaderCustom.module.less | 9 +- 8 files changed, 197 insertions(+), 152 deletions(-) diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx index 3543bb4c..e1068b02 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx @@ -629,13 +629,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { ({ panelPrdtId, productData }) => fp.isNotNil(panelPrdtId) && fp.pipe(() => productData, fp.get("prdtNm"), fp.isNotNil)() - ? // ? fp.pipe(() => productData, fp.get("prdtNm"))() - // `${fp.get("prdtId")(productData)} ${fp.get("prdtNm")(productData)}` - fp.pipe( - () => productData, - (data) => - `${fp.get("prdtId")(data)} ${fp.get("prdtNm")(data)}` - )() + ? fp.pipe(() => productData, fp.get("prdtNm"))() : null )(); @@ -714,6 +708,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) { > { + console.log("####currentIndex", currentIndex); + }, [currentIndex]); + // 리뷰 데이터가 없을 때 처리 if (!currentReview) { return ( @@ -49,7 +61,7 @@ export default function UserReviewDetail({ }; return ( -
+ <> {/* Left Arrow - 이전 리뷰가 있을 때만 표시 */} {hasMultipleReviews && currentIndex > 0 && ( )} - - {/* Main Content */} -
-
- {/* Review Image */} - {reviewImage && ( -
- Review image -
- )} - - {/* Review Info */} -
- {/* Rating and Meta */} -
- {/* Star Rating */} - {currentReview.rvwRtng && ( -
- + {/* Main Content */} +
+ +
+ {" "} + {/* Review Image */} + {reviewImage && ( +
+ Review image
)} + {/* Review Info */} +
+ {/* Rating and Meta */} +
+ {/* Star Rating */} + {currentReview.rvwRtng && ( +
+ +
+ )} - {/* Email */} - {(currentReview.wrtrNknm || currentReview.rvwWrtrId) && ( -
- {currentReview.wrtrNknm || currentReview.rvwWrtrId} -
- )} + {/* Email */} + {(currentReview.wrtrNknm || currentReview.rvwWrtrId) && ( +
+ {currentReview.wrtrNknm || currentReview.rvwWrtrId} +
+ )} - {/* Date */} - {currentReview.rvwRgstDtt && ( -
- {formatDate(currentReview.rvwRgstDtt)} + {/* Date */} + {currentReview.rvwRgstDtt && ( +
+ {formatDate(currentReview.rvwRgstDtt)} +
+ )}
- )} + + {/* Review Text */} + {currentReview.rvwCtnt && ( +
+ "{currentReview.rvwCtnt}" +
+ )} +
- - {/* Review Text */} - {currentReview.rvwCtnt && ( -
"{currentReview.rvwCtnt}"
- )} -
-
- - {/* Custom Scrollbar (피그마 스타일) */} -
-
+
- {/* Right Arrow - 다음 리뷰가 있을 때만 표시 */} {hasMultipleReviews && currentIndex < totalReviews - 1 && ( )} -
+ ); } diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.module.less index 902c4a98..d4ebde34 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.module.less @@ -2,60 +2,22 @@ @import "../../../../../style/utils.module.less"; .container { - width: 100%; - height: 100%; - padding-left: 30px; - padding-right: 30px; + // width: 100%; + // height:100%; + max-width: 900px; + max-height: 557px; display: flex; - justify-content: center; + justify-content: space-around; align-items: center; :focus { border: none; } - // 좌측 화살표 (이전 리뷰) - detailpanel PNG 사용 - .leftArrow { - width: 50px; - height: 50px; - padding: 3px; - cursor: pointer; - align-self: center; - display: flex; - justify-content: center; - align-items: center; - - // 화살표 아이콘 (< 모양, 17px x 29px) - &::before { - content: ""; - width: 17px; - height: 29px; - background-image: url("../../../../../../assets/images/detailpanel/left-arrow.svg"); - background-position: center; - background-size: 17px 29px; - background-repeat: no-repeat; - display: block; - } - - &:focus { - outline: 4px solid @PRIMARY_COLOR_RED !important; - - &::before { - background-image: url("../../../../../../assets/images/detailpanel/left-arrow-red.svg"); - } - } - - &:hover { - &::before { - background-image: url("../../../../../../assets/images/detailpanel/left-arrow-red.svg"); - } - } - } // 메인 콘텐츠 영역 (피그마 레이아웃 적용) .mainContent { flex: 1; height: 557px; - padding: 30px; - overflow: hidden; + overflow: auto; display: flex; justify-content: flex-start; align-items: flex-start; @@ -63,20 +25,34 @@ .reviewContainer { flex: 1; align-self: stretch; - padding: 30px; + // padding: 30px; background: #f8f8f8; border-radius: 12px; display: flex; justify-content: flex-start; align-items: flex-start; margin-right: 30px; // gap: 30 → margin-right: 30px + // 스크롤바 너비를 6px로 명확하게 설정 + &::-webkit-scrollbar { + width: 6px; + } + &::-webkit-scrollbar-track { + background: transparent; // 트랙 배경은 투명하게 + } + + &::-webkit-scrollbar-thumb { + background: #9c9c9c; // 스크롤바 색상 + } + + // 스크롤바 thumb에 hover 효과 적용 + &:focus::-webkit-scrollbar-thumb { + background: #c72054; + } // 이미지 섹션 (피그마: flex: 1, align-self: stretch, padding: 5px 4px) .imageSection { flex: 1; - align-self: stretch; - display: flex; - + margin: 30px 0 0 30px; .reviewImage { width: 357px; height: 467px; @@ -95,7 +71,7 @@ justify-content: flex-start; align-items: flex-start; margin-left: 30px; // gap: 30 → margin-left: 30px - + margin-top: 30px; // 메타 섹션 (별점, 이메일, 날짜) .metaSection { align-self: stretch; @@ -152,7 +128,7 @@ font-weight: 400; line-height: 31px; word-wrap: break-word; - overflow: hidden; + padding: 0 20px 0 0; } } } @@ -176,44 +152,6 @@ } } - // 우측 화살표 (다음 리뷰) - detailpanel PNG 사용 - .rightArrow { - width: 50px; - height: 50px; - padding: 3px; - cursor: pointer; - align-self: center; - display: flex; - justify-content: center; - align-items: center; - - // 화살표 아이콘 (> 모양, 17px x 29px) - &::before { - content: ""; - width: 17px; - height: 29px; - background-image: url("../../../../../../assets/images/detailpanel/right-arrow.svg"); - background-position: center; - background-size: 17px 29px; - background-repeat: no-repeat; - display: block; - } - - &:focus { - outline: 4px solid @PRIMARY_COLOR_RED !important; - - &::before { - background-image: url("../../../../../../assets/images/detailpanel/right-arrow-red.svg"); - } - } - - &:hover { - &::before { - background-image: url("../../../../../../assets/images/detailpanel/right-arrow-red.svg"); - } - } - } - // 리뷰 데이터가 없을 때 .noReview { display: flex; @@ -224,3 +162,87 @@ font-family: @baseFont; } } + +// 좌측 화살표 (이전 리뷰) - detailpanel PNG 사용 +.leftArrow { + width: 50px; + height: 50px; + padding: 3px; + cursor: pointer; + align-self: center; + display: flex; + justify-content: center; + align-items: center; + margin-right: 5px; //포커스 가 보이지 않음으로 인하여 처리. + // 화살표 아이콘 (< 모양, 17px x 29px) + &::before { + content: ""; + width: 17px; + height: 29px; + background-image: url("../../../../../../assets/images/detailpanel/left-arrow.svg"); + background-position: center; + background-size: 17px 29px; + background-repeat: no-repeat; + display: block; + } + + &:focus { + outline: 4px solid @PRIMARY_COLOR_RED !important; + + &::before { + background-image: url("../../../../../../assets/images/detailpanel/left-arrow-red.svg"); + } + } + + &:hover { + &::before { + background-image: url("../../../../../../assets/images/detailpanel/left-arrow-red.svg"); + } + } +} + +// 우측 화살표 (다음 리뷰) - detailpanel PNG 사용 +.rightArrow { + width: 50px; + height: 50px; + padding: 3px; + cursor: pointer; + align-self: center; + display: flex; + justify-content: center; + align-items: center; + margin-left: 5px; + // 화살표 아이콘 (> 모양, 17px x 29px) + &::before { + content: ""; + width: 17px; + height: 29px; + background-image: url("../../../../../../assets/images/detailpanel/right-arrow.svg"); + background-position: center; + background-size: 17px 29px; + background-repeat: no-repeat; + display: block; + } + + &:focus { + outline: 4px solid @PRIMARY_COLOR_RED !important; + + &::before { + background-image: url("../../../../../../assets/images/detailpanel/right-arrow-red.svg"); + } + } + + &:hover { + &::before { + background-image: url("../../../../../../assets/images/detailpanel/right-arrow-red.svg"); + } + } +} + +.scrollContainer { + > div { + margin-top: 30px; + background-color: #f8f8f8; + border-radius: 12px; + } +} diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx index ed2ce04e..1173d912 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx @@ -118,7 +118,13 @@ export default function UserReviewsPopup({ // User-Reviews 모드: selectedImageIndex를 그대로 사용 setCurrentReviewIndex(selectedImageIndex); } - }, [mode, selectedImageIndex, images, reviewsWithImages, allReviews]); + }, [ + mode, + // selectedImageIndex, + // images, + // reviewsWithImages, + // allReviews, + ]); // 리뷰 네비게이션 핸들러 (All-Images 및 User-Reviews 모드) const handlePreviousReview = useCallback(() => { diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.module.less index c19a9dd6..77ff2a99 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.module.less @@ -52,7 +52,7 @@ overflow: hidden; display: flex; justify-content: center; // 중앙 정렬 - align-items: center; // 중앙 정렬 + align-items: end; // 중앙 정렬 position: relative; .scrollerOverride { diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx index 7909c871..fa02fb5b 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx @@ -23,6 +23,7 @@ const Container = SpotlightContainerDecorator( const SpottableComponent = Spottable("button"); export default function THeaderCustom({ + prdtId, title, className, onBackButton, @@ -93,6 +94,7 @@ export default function THeaderCustom({ marqueeDisabled={marqueeDisabled} aria-label={ariaLabel} > + {prdtId && ID : {prdtId}} {convertedTitle && ( )} diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less index 67e1dcd9..6b5109d3 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less +++ b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less @@ -9,9 +9,14 @@ justify-content: flex-start; align-items: center; background-color: transparent; // DetailPanel에서는 배경 투명 - + .prdtId { + font-size: 30px; + font-weight: 700; + color: #999; + margin-right: 10px; + } .title { - width: 1710px; + width: 1650px; font-size: 25px; font-weight: 600; color: #eaeaea;