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

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

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

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

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

Performance: 코드 최적화로 성능 개선 기대

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

@@ -245,7 +245,7 @@ export default function ProductAllSection({
 
   // ProductAllSection 마운트 시 showAllReviews 초기화
   useEffect(() => {
-    console.log('[ProductAllSection] Component mounted - resetting showAllReviews to false');
+    // console.log('[ProductAllSection] Component mounted - resetting showAllReviews to false');
     dispatch(resetShowAllReviews());
   }, []); // 빈 dependency array = 마운트 시에만 실행
 
@@ -279,7 +279,7 @@ export default function ProductAllSection({
 
   // BUY NOW 버튼 클릭 핸들러 - Toast로 BuyOption 표시
   const handleBuyNowClick = useCallback(() => {
-    console.log('[BuyNow] Buy Now button clicked');
+    // console.log('[BuyNow] Buy Now button clicked');
     dispatch(
       showToast({
         message: '',
@@ -292,7 +292,7 @@ export default function ProductAllSection({
 
   // ADD TO CART 버튼 클릭 핸들러
   const handleAddToCartClick = useCallback(() => {
-    console.log('[AddToCart] Add To Cart button clicked');
+    // console.log('[AddToCart] Add To Cart button clicked');
     // TODO: 장바구니 추가 로직 구현
   }, []);
 
@@ -344,8 +344,8 @@ export default function ProductAllSection({
         andThen(() => document.getElementById(sectionId)),
         when(isNil, () => null),
         andThen((targetElement) => {
-          const targetRect = targetElement.getBoundingClientRect();
-          const y = targetRect.top;
+          // offsetTop: 부모 컨테이너 기준 절대 위치 사용
+          const y = targetElement.offsetTop;
           return scrollTop({ y, animate: true });
         })
       )(sectionId)
@@ -516,7 +516,7 @@ export default function ProductAllSection({
       });
       timersRef.current = [];
 
-      console.log('[ProductAllSection] All timers cleaned up on unmount');
+      // console.log('[ProductAllSection] All timers cleaned up on unmount');
     };
   }, []);
 
@@ -758,52 +758,48 @@ export default function ProductAllSection({
                   <ProductDescription productInfo={productData} />
                 </div>
                 {/* 리뷰가 있을 때만 UserReviews 섹션 표시 */}
+                <div id="scroll-marker-user-reviews" className={css.scrollMarker}></div>
                 {hasReviews && (
-                  <>
-                    <div id="scroll-marker-user-reviews" className={css.scrollMarker}></div>
-                    <div
-                      id="user-reviews-section"
-                      ref={reviewRef}
-                      onFocus={reviewFocus}
-                      onBlur={_onBlur}
-                    >
-                      <UserReviews
-                        productInfo={productData}
-                        panelInfo={panelInfo}
-                        reviewsData={{
-                          previewReviews: previewReviews.slice(0, 5), // 처음 5개만
-                          stats: stats,
-                          isLoading: reviewsLoading,
-                        }}
-                      />
-                    </div>
+                  <div
+                    id="user-reviews-section"
+                    ref={reviewRef}
+                    onFocus={reviewFocus}
+                    onBlur={_onBlur}
+                  >
+                    <UserReviews
+                      productInfo={productData}
+                      panelInfo={panelInfo}
+                      reviewsData={{
+                        previewReviews: previewReviews.slice(0, 5), // 처음 5개만
+                        stats: stats,
+                        isLoading: reviewsLoading,
+                      }}
+                    />
                     {/* <ViewAllReviewsButton /> */}
                     <ShowUserReviews />
-                  </>
+                  </div>
                 )}
               </div>
               <div ref={youMayAlsoLikelRef}>
+                <div id="scroll-marker-you-may-also-like" className={css.scrollMarker}></div>
                 {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 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>