[상품상세] 스타일 및 기능 수정

1. review 팝업에서 긴글일 경우 스크롤 포커스 가능하도록 변경 요청.(작업완료 10.01)
2. review 팝업에서 짧은 글일 경우 스크롤 미노출 요청. (작업완료 10.01)
3. 리뷰 prev, next버튼 이후 초기화 부분 수정작업(작업완료 10.01)
4. 디테일 첫번째 영상 크기 변경(작업완료 10.01)
5. 리뷰팝업부분 스타일 변경

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.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)}`
-                  )()
                 : null
           )();
 
@@ -714,6 +708,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
       >
         <THeaderCustom
           className={css.header}
+          prdtId={productData?.prdtId}
           title={headerTitle}
           onBackButton
           onClick={onClick(false)}

com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less

@@ -5,7 +5,7 @@
   position: relative;
   width: 1114px; // ProductDetail과 동일한 고정 크기
   max-width: 1114px;
-  height: 670px; // ProductDetail과 동일한 고정 높이
+  height: 944px; // ProductDetail과 동일한 고정 높이
   margin-bottom: 30px; // ProductDetail과 동일한 간격
   cursor: pointer;
   background-color: rgba(255, 255, 255, 1);

com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewDetail/UserReviewDetail.jsx

@@ -1,10 +1,18 @@
-import React, { useCallback } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+} from 'react';
 
 import classNames from 'classnames';
 
 import Spottable from '@enact/spotlight/Spottable';
 
-import { $L } from '../../../../../utils/helperMethods';
+import TButtonScroller
+  from '../../../../../components/TButtonScroller/TButtonScroller';
+import {
+  scaleH,
+  scaleW,
+} from '../../../../../utils/helperMethods';
 import StarRating from '../../../components/StarRating';
 import css from './UserReviewDetail.module.less';
 
@@ -30,6 +38,10 @@ export default function UserReviewDetail({
     }
   }, [onNext, currentIndex, totalReviews]);
 
+  useEffect(() => {
+    console.log("####currentIndex", currentIndex);
+  }, [currentIndex]);
+
   // 리뷰 데이터가 없을 때 처리
   if (!currentReview) {
     return (
@@ -49,7 +61,7 @@ export default function UserReviewDetail({
   };
 
   return (
-    <div className={classNames(css.container, className)}>
+    <>
       {/* Left Arrow - 이전 리뷰가 있을 때만 표시 */}
       {hasMultipleReviews && currentIndex > 0 && (
         <SpottableButton
@@ -59,63 +71,66 @@ export default function UserReviewDetail({
           aria-label="Previous review"
         />
       )}
-
+      <div className={classNames(css.container, className)}>
-      {/* Main Content */}
+        {/* Main Content */}
-      <div className={css.mainContent}>
+        <div className={css.mainContent}>
-        <div className={css.reviewContainer}>
+          <TButtonScroller
-          {/* Review Image */}
+            className={css.scrollContainer}
-          {reviewImage && (
+            width={scaleW(900)}
-            <div className={css.imageSection}>
+            boxHeight={scaleH(557)}
-              <img
+          >
-                src={reviewImage.imgUrl}
+            <div className={css.reviewContainer}>
-                alt="Review image"
+              {" "}
-                className={css.reviewImage}
+              {/* Review Image */}
-              />
+              {reviewImage && (
-            </div>
+                <div className={css.imageSection}>
-          )}
+                  <img
-
+                    src={reviewImage.imgUrl}
-          {/* Review Info */}
+                    alt="Review image"
-          <div className={css.infoSection}>
+                    className={css.reviewImage}
-            {/* Rating and Meta */}
-            <div className={css.metaSection}>
-              {/* Star Rating */}
-              {currentReview.rvwRtng && (
-                <div className={css.ratingContainer}>
-                  <StarRating
-                    rating={currentReview.rvwRtng}
-                    className={css.starRating}
                   />
                 </div>
               )}
+              {/* Review Info */}
+              <div className={css.infoSection}>
+                {/* Rating and Meta */}
+                <div className={css.metaSection}>
+                  {/* Star Rating */}
+                  {currentReview.rvwRtng && (
+                    <div className={css.ratingContainer}>
+                      <StarRating
+                        rating={currentReview.rvwRtng}
+                        className={css.starRating}
+                      />
+                    </div>
+                  )}
 
-              {/* Email */}
+                  {/* Email */}
-              {(currentReview.wrtrNknm || currentReview.rvwWrtrId) && (
+                  {(currentReview.wrtrNknm || currentReview.rvwWrtrId) && (
-                <div className={css.email}>
+                    <div className={css.email}>
-                  {currentReview.wrtrNknm || currentReview.rvwWrtrId}
+                      {currentReview.wrtrNknm || currentReview.rvwWrtrId}
-                </div>
+                    </div>
-              )}
+                  )}
 
-              {/* Date */}
+                  {/* Date */}
-              {currentReview.rvwRgstDtt && (
+                  {currentReview.rvwRgstDtt && (
-                <div className={css.date}>
+                    <div className={css.date}>
-                  {formatDate(currentReview.rvwRgstDtt)}
+                      {formatDate(currentReview.rvwRgstDtt)}
+                    </div>
+                  )}
                 </div>
-              )}
+
+                {/* Review Text */}
+                {currentReview.rvwCtnt && (
+                  <div className={css.reviewText}>
+                    "{currentReview.rvwCtnt}"
+                  </div>
+                )}
+              </div>
             </div>
-
+          </TButtonScroller>
-            {/* Review Text */}
-            {currentReview.rvwCtnt && (
-              <div className={css.reviewText}>"{currentReview.rvwCtnt}"</div>
-            )}
-          </div>
-        </div>
-
-        {/* Custom Scrollbar (피그마 스타일) */}
-        <div className={css.customScrollbar}>
-          <div className={css.scrollTrack} />
         </div>
       </div>
-
       {/* Right Arrow - 다음 리뷰가 있을 때만 표시 */}
       {hasMultipleReviews && currentIndex < totalReviews - 1 && (
         <SpottableButton
@@ -125,6 +140,6 @@ export default function UserReviewDetail({
           aria-label="Next review"
         />
       )}
-    </div>
+    </>
   );
 }

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%;
+  // width: 100%;
-  height: 100%;
+  // height:100%;
-  padding-left: 30px;
+  max-width: 900px;
-  padding-right: 30px;
+  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: auto;
-    overflow: hidden;
     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;
+        margin: 30px 0 0 30px;
-        display: flex;
-
         .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;
+  }
+}

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(() => {

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 {

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 && <span className={css.prdtId}>ID : {prdtId}</span>}
         {convertedTitle && (
           <span dangerouslySetInnerHTML={{ __html: convertedTitle }} />
         )}

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;