[251025] feat: DetailPanel ShowUserReviews,ScrollDown겹침 해결

🕐 커밋 시간: 2025. 10. 24. 22:55:19

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +11줄
  • 삭제: -3줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
  ~ com.twin.app.shoptime/src/views/UserReview/ShowUserReviews.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx (javascript):
    🔄 Modified: extractProductMeta()
  📄 com.twin.app.shoptime/src/views/UserReview/ShowUserReviews.jsx (javascript):
    ✅ Added: ShowUserReviews()
    ❌ Deleted: ShowUserReviews()

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx

@@ -293,6 +293,7 @@ export default function ProductAllSection({
   );
 
   const [mobileSendPopupOpen, setMobileSendPopupOpen] = useState(false);
+  const [isShowUserReviewsFocused, setIsShowUserReviewsFocused] = useState(false);
 
   const reviewTotalCount = stats.totalReviews;
   const { getScrollTo, scrollTop } = useScrollTo();
@@ -833,7 +834,12 @@ export default function ProductAllSection({
                       }}
                     />
                     {/* <ViewAllReviewsButton /> */}
-                    <ShowUserReviews hasVideo={hasVideo} launchedFromPlayer={launchedFromPlayer} />
+                    <ShowUserReviews
+                      hasVideo={hasVideo}
+                      launchedFromPlayer={launchedFromPlayer}
+                      onFocus={() => setIsShowUserReviewsFocused(true)}
+                      onBlur={() => setIsShowUserReviewsFocused(false)}
+                    />
                   </div>
                 )}
               </div>
@@ -863,7 +869,7 @@ export default function ProductAllSection({
             </TScrollerDetail>
           </div>
         </ContentContainer>
-        {!isBottom && (
+        {!isBottom && !isShowUserReviewsFocused && (
           <p
             className={classNames(css.arrow, css.arrowBottom)}
             onClick={handleArrowClickAlternative}

com.twin.app.shoptime/src/views/UserReview/ShowUserReviews.jsx

@@ -8,7 +8,7 @@ import css from './ShowUserReviews.module.less';
 
 const SpottableComponent = Spottable('div');
 
-const ShowUserReviews = ({ hasVideo, launchedFromPlayer }) => {
+const ShowUserReviews = ({ hasVideo, launchedFromPlayer, onFocus, onBlur }) => {
   const dispatch = useDispatch();
 
   const reviewListData = useSelector(
@@ -91,6 +91,8 @@ const ShowUserReviews = ({ hasVideo, launchedFromPlayer }) => {
         className={css.showUserReviews__button}
         onClick={handleShowUserReviewsClick}
         onKeyDown={handleKeyDown}
+        onFocus={onFocus}
+        onBlur={onBlur}
         spotlightId="show-user-reviews-button"
         data-spotlight-up="user-review-at-last"
       >