[251012] fix: ProductAllSection 렌더링 최적화-2

🕐 커밋 시간: 2025. 10. 12. 13:09:33

📊 변경 통계:
  • 총 파일: 1개
  • 추가: +63줄
  • 삭제: -60줄

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

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

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

@@ -9,7 +9,7 @@ import Spotlight from '@enact/spotlight';
 /* eslint-disable react/jsx-no-bind */
 // src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
 import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+// import Spottable from '@enact/spotlight/Spottable';
 
 //image
 import arrowDown from '../../../../assets/images/icons/ic_arrow_down_3x_new.png';
@@ -21,7 +21,7 @@ import { showToast } from '../../../actions/toastActions';
 import TButton from '../../../components/TButton/TButton';
 import useReviews from '../../../hooks/useReviews/useReviews';
 import useScrollTo from '../../../hooks/useScrollTo';
-import { panel_names } from '../../../utils/Config';
+// import { panel_names } from '../../../utils/Config';
 import {
   andThen,
   curry,
@@ -40,7 +40,7 @@ import {
 import { $L } from '../../../utils/helperMethods';
 import { SpotlightIds } from '../../../utils/SpotlightIds';
 import ShowUserReviews from '../../UserReview/ShowUserReviews';
-import CustomScrollbar from '../components/CustomScrollbar/CustomScrollbar';
+// import CustomScrollbar from '../components/CustomScrollbar/CustomScrollbar';
 import DetailMobileSendPopUp from '../components/DetailMobileSendPopUp';
 import FavoriteBtn from '../components/FavoriteBtn';
 import ProductTag from '../components/ProductTag';
@@ -51,7 +51,7 @@ import ProductDescription from '../ProductContentSection/ProductDescription/Prod
 import ProductDetail from '../ProductContentSection/ProductDetail/ProductDetail.new';
 import ProductVideo from '../ProductContentSection/ProductVideo/ProductVideo';
 import UserReviews from '../ProductContentSection/UserReviews/UserReviews';
-import ViewAllReviewsButton from '../ProductContentSection/UserReviews/ViewAllReviewsButton';
+// import ViewAllReviewsButton from '../ProductContentSection/UserReviews/ViewAllReviewsButton';
 import YouMayAlsoLike from '../ProductContentSection/YouMayAlsoLike/YouMayAlsoLike';
 import QRCode from '../ProductInfoSection/QRCode/QRCode';
 import ProductOverview from '../ProductOverview/ProductOverview';
@@ -141,7 +141,7 @@ export default function ProductAllSection({
   // YouMayLike 데이터는 API 응답 시간이 걸리므로 직접 구독
   const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
 
-  const [currentHeight, setCurrentHeight] = useState(0);
+  // const [currentHeight, setCurrentHeight] = useState(0);
   //하단부분까지 갔을때 체크용
   const [documentHeight, setDocumentHeight] = useState(0);
   const [isBottom, setIsBottom] = useState(false);
@@ -328,13 +328,30 @@ export default function ProductAllSection({
 
   // useReviews에서 모든 리뷰 데이터 관리
   const reviewTotalCount = stats.totalReviews;
-  const reviewData = {
-    reviewList: previewReviews,
-    reviewDetail: {
-      totRvwCnt: stats.totalReviews,
-      avgRvwScr: stats.averageRating,
-    },
-  };
+  // const reviewData = {
+  //   reviewList: previewReviews,
+  //   reviewDetail: {
+  //     totRvwCnt: stats.totalReviews,
+  //     avgRvwScr: stats.averageRating,
+  //   },
+  // };
+  const { getScrollTo, scrollTop } = useScrollTo();
+
+  const scrollToSection = useCallback(
+    curry((sectionId) =>
+      pipe(
+        when(isEmpty, () => null),
+        andThen(() => document.getElementById(sectionId)),
+        when(isNil, () => null),
+        andThen((targetElement) => {
+          const targetRect = targetElement.getBoundingClientRect();
+          const y = targetRect.top;
+          return scrollTop({ y, animate: true });
+        })
+      )(sectionId)
+    ),
+    [scrollTop]
+  );
 
   // User Reviews 스크롤 핸들러 추가
   const handleUserReviewsClick = useCallback(
@@ -376,8 +393,6 @@ export default function ProductAllSection({
     return items;
   }, [productData]);
 
-  const { getScrollTo, scrollTop } = useScrollTo();
-
   const handleShopByMobileOpen = useCallback(
     pipe(() => true, setMobileSendPopupOpen),
     []
@@ -404,22 +419,6 @@ export default function ProductAllSection({
     [setOpenThemeItemOverlay]
   );
 
-  const scrollToSection = useCallback(
-    curry((sectionId) =>
-      pipe(
-        when(isEmpty, () => null),
-        andThen(() => document.getElementById(sectionId)),
-        when(isNil, () => null),
-        andThen((targetElement) => {
-          const targetRect = targetElement.getBoundingClientRect();
-          const y = targetRect.top;
-          return scrollTop({ y, animate: true });
-        })
-      )(sectionId)
-    ),
-    []
-  );
-
   const handleProductDetailsClick = useCallback(
     () => scrollToSection('scroll-marker-product-details'),
     [scrollToSection]
@@ -440,16 +439,14 @@ export default function ProductAllSection({
       animate: true,
     });
 
-    const isAtBottom =
-      scrollPositionRef.current + 1100 >=
-      (productDetailRef.current?.scrollHeight || 0) +
-        (descriptionRef.current?.scrollHeight || 0) +
-        (reviewRef.current?.scrollHeight || 0) +
-        (youMayAlsoLikelRef.current?.scrollHeight || 0);
+    // documentHeight를 활용하여 반복 계산 제거
+    const totalHeight = documentHeight + (youMayAlsoLikelRef.current?.scrollHeight || 0);
+    const isAtBottom = scrollPositionRef.current + 1100 >= totalHeight;
+
     if (isAtBottom) {
       setIsBottom(isAtBottom);
     }
-  }, []);
+  }, [documentHeight, scrollTop]);
 
   const handleScroll = useCallback(
     (e) => {
@@ -610,8 +607,8 @@ export default function ProductAllSection({
                   <div className={css.favoriteBtnWrapper}>
                     <FavoriteBtn
                       className={css.favoriteBtn}
-                      selectedPatnrId={panelInfo && panelInfo.patnrId}
-                      selectedPrdtId={panelInfo && panelInfo.prdtId}
+                      selectedPatnrId={panelInfo.patnrId}
+                      selectedPrdtId={panelInfo.prdtId}
                       favoriteFlag={favoriteFlag}
                       onFavoriteFlagChanged={onFavoriteFlagChanged}
                       kind={'item_detail'}
@@ -679,7 +676,7 @@ export default function ProductAllSection({
                 })()} */}
               </Container>
 
-              {panelInfo && panelInfo && panelInfo.type === 'theme' && !openThemeItemOverlay && (
+              {panelInfo && panelInfo.type === 'theme' && !openThemeItemOverlay && (
                 <TButton
                   className={css.themeButton}
                   onClick={handleThemeItemButtonClick}
@@ -785,28 +782,30 @@ export default function ProductAllSection({
                   </>
                 )}
               </div>
-              {hasYouMayAlsoLike && (
-                <div ref={youMayAlsoLikelRef}>
-                  <div id="scroll-marker-you-may-also-like" className={css.scrollMarker}></div>
-                  <div id="you-may-also-like-section">
-                    {/* {(() => {
-                      console.log('[YouMayLike] YouMayAlsoLike 컴포넌트 렌더링:', {
-                        productInfo: productData,
-                        panelInfo,
-                        hasData: !!youmaylikeData
-                      });
-                      return null;
-                    })()} */}
-                    <YouMayAlsoLike
-                      productInfo={productData}
-                      panelInfo={panelInfo}
-                      onFocus={youmaylikeFocus}
-                      onBlur={_onBlur}
-                      youmaylikeData={youmaylikeData}
-                    />
-                  </div>
-                </div>
-              )}
+              <div ref={youMayAlsoLikelRef}>
+                {hasYouMayAlsoLike && (
+                  <>
+                    <div id="scroll-marker-you-may-also-like" className={css.scrollMarker}></div>
+                    <div id="you-may-also-like-section">
+                      {/* {(() => {
+                        console.log('[YouMayLike] YouMayAlsoLike 컴포넌트 렌더링:', {
+                          productInfo: productData,
+                          panelInfo,
+                          hasData: !!youmaylikeData
+                        });
+                        return null;
+                      })()} */}
+                      <YouMayAlsoLike
+                        productInfo={productData}
+                        panelInfo={panelInfo}
+                        onFocus={youmaylikeFocus}
+                        onBlur={_onBlur}
+                        youmaylikeData={youmaylikeData}
+                      />
+                    </div>
+                  </>
+                )}
+              </div>
             </TScrollerDetail>
           </div>
         </ContentContainer>