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

🕐 커밋 시간: 2025. 10. 12. 13:24:49

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

📝 수정된 파일:
  ~ 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

@@ -176,10 +176,8 @@ export default function ProductAllSection({
   }, [isShowQRCode]);
 
   //버튼 active 표시용
-
-  const [activeProductBtn, setActiveProductBtn] = useState(false);
-  const [activeReviewBtn, setActiveReviewBtn] = useState(false);
-  const [activeYouMayLikeBtn, setActiveYouMayLikeBtn] = useState(false);
+  // 'product' | 'review' | 'youmaylike' | null
+  const [activeButton, setActiveButton] = useState(null);
 
   const productData = useMemo(
     () => getProductData(productType, themeProductInfo, productInfo),
@@ -463,28 +461,12 @@ export default function ProductAllSection({
     [documentHeight, isBottom]
   );
 
-  const productFocus = useCallback(() => {
-    setActiveProductBtn(true);
-    setActiveReviewBtn(false);
-    setActiveYouMayLikeBtn(false);
+  const handleButtonFocus = useCallback((buttonType) => {
+    setActiveButton(buttonType);
   }, []);
 
-  const reviewFocus = useCallback(() => {
-    setActiveProductBtn(false);
-    setActiveReviewBtn(true);
-    setActiveYouMayLikeBtn(false);
-  }, []);
-
-  const youmaylikeFocus = useCallback(() => {
-    setActiveProductBtn(false);
-    setActiveReviewBtn(false);
-    setActiveYouMayLikeBtn(true);
-  }, []);
-
-  const _onBlur = useCallback(() => {
-    setActiveProductBtn(false);
-    setActiveReviewBtn(false);
-    setActiveYouMayLikeBtn(false);
+  const handleButtonBlur = useCallback(() => {
+    setActiveButton(null);
   }, []);
 
   useEffect(() => {
@@ -638,7 +620,7 @@ export default function ProductAllSection({
                 <TButton
                   className={classNames(
                     css.productDetailsButton,
-                    activeProductBtn ? css.active : ''
+                    activeButton === 'product' ? css.active : ''
                   )}
                   onClick={handleProductDetailsClick}
                   spotlightId="product-details-button"
@@ -647,7 +629,10 @@ export default function ProductAllSection({
                 </TButton>
                 {hasReviews && (
                   <TButton
-                    className={classNames(css.userReviewsButton, activeReviewBtn ? css.active : '')}
+                    className={classNames(
+                      css.userReviewsButton,
+                      activeButton === 'review' ? css.active : ''
+                    )}
                     onClick={handleUserReviewsClick}
                     spotlightId="user-reviews-button"
                   >
@@ -658,7 +643,7 @@ export default function ProductAllSection({
                   <TButton
                     className={classNames(
                       css.youMayLikeButton,
-                      activeYouMayLikeBtn ? css.active : ''
+                      activeButton === 'youmaylike' ? css.active : ''
                     )}
                     onClick={handleYouMayAlsoLikeClick}
                   >
@@ -721,8 +706,8 @@ export default function ProductAllSection({
                 <div
                   id="product-details-section"
                   ref={productDetailRef}
-                  onFocus={productFocus}
-                  onBlur={_onBlur}
+                  onFocus={() => handleButtonFocus('product')}
+                  onBlur={handleButtonBlur}
                 >
                   {renderItems.length > 0 ? (
                     renderItems.map((item, index) =>
@@ -752,8 +737,8 @@ export default function ProductAllSection({
                 <div
                   id="product-description-section"
                   ref={descriptionRef}
-                  onFocus={productFocus}
-                  onBlur={_onBlur}
+                  onFocus={() => handleButtonFocus('product')}
+                  onBlur={handleButtonBlur}
                 >
                   <ProductDescription productInfo={productData} />
                 </div>
@@ -763,8 +748,8 @@ export default function ProductAllSection({
                   <div
                     id="user-reviews-section"
                     ref={reviewRef}
-                    onFocus={reviewFocus}
-                    onBlur={_onBlur}
+                    onFocus={() => handleButtonFocus('review')}
+                    onBlur={handleButtonBlur}
                   >
                     <UserReviews
                       productInfo={productData}
@@ -795,8 +780,8 @@ export default function ProductAllSection({
                     <YouMayAlsoLike
                       productInfo={productData}
                       panelInfo={panelInfo}
-                      onFocus={youmaylikeFocus}
-                      onBlur={_onBlur}
+                      onFocus={() => handleButtonFocus('youmaylike')}
+                      onBlur={handleButtonBlur}
                       youmaylikeData={youmaylikeData}
                     />
                   </div>