optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[251011] fix: ProudctAllSection scroller 리렌더링 최적화-3

Browse Source 
🕐 커밋 시간: 2025. 10. 11. 22:04:23

📊 변경 통계:
  • 총 파일: 5개
  • 추가: +123줄
  • 삭제: -102줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/actions/playActions.js
  ~ com.twin.app.shoptime/src/hooks/useReviews/useReviews.js
  ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.jsx
  ~ com.twin.app.shoptime/src/views/UserReview/components/UserReviewItem.jsx

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

🔧 주요 변경 내용:
  • 핵심 비즈니스 로직 개선
  • UI 컴포넌트 아키텍처 개선
This commit is contained in:
hyeon soo noh
2025-10-11 22:04:25 +09:00
parent 122020a8f7
commit d3117351c0
5 changed files with 393 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
View File

@@ -1,47 +1,24 @@
// src/views/DetailPanel/DetailPanel.new.jsx
import React, {
useCallback,
useEffect,
useLayoutEffect,
useMemo,
useRef,
useState,
} from 'react';
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import {
useDispatch,
useSelector,
} from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import Spinner from '@enact/sandstone/Spinner';
import Spotlight from '@enact/spotlight';
import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
import indicatorDefaultImage
from '../../../assets/images/img-thumb-empty-144@3x.png';
import indicatorDefaultImage from '../../../assets/images/img-thumb-empty-144@3x.png';
import { getDeviceAdditionInfo } from '../../actions/deviceActions';
import { getThemeCurationDetailInfo } from '../../actions/homeActions';
import {
getMainCategoryDetail,
getMainYouMayLike,
} from '../../actions/mainActions';
import {
popPanel,
updatePanel,
} from '../../actions/panelActions';
import { getMainCategoryDetail, getMainYouMayLike } from '../../actions/mainActions';
import { popPanel, updatePanel } from '../../actions/panelActions';
import { finishVideoPreview } from '../../actions/playActions';
import {
clearProductDetail,
getProductOptionId,
} from '../../actions/productActions';
import { clearProductDetail, getProductOptionId } from '../../actions/productActions';
import TBody from '../../components/TBody/TBody';
import TPanel from '../../components/TPanel/TPanel';
import { panel_names } from '../../utils/Config';
import fp from '../../utils/fp';
import {
$L,
getQRCodeUrl,
} from '../../utils/helperMethods';
import { $L, getQRCodeUrl } from '../../utils/helperMethods';
import { SpotlightIds } from '../../utils/SpotlightIds';
import DetailPanelBackground from './components/DetailPanelBackground';
import THeaderCustom from './components/THeaderCustom';
@@ -55,68 +32,49 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const productData = useSelector((state) => state.main.productData);
const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
const themeProductInfos = useSelector(
(state) => state.home.themeCurationDetailInfoData
);
const themeProductInfos = useSelector((state) => state.home.themeCurationDetailInfoData);
const isLoading = useSelector((state) =>
fp.pipe(() => state, fp.get("common.appStatus.showLoadingPanel.show"))()
fp.pipe(() => state, fp.get('common.appStatus.showLoadingPanel.show'))()
);
const themeData = useSelector((state) =>
fp.pipe(
() => state,
fp.get("home.productData.themeInfo"),
fp.get('home.productData.themeInfo'),
(list) => list && list[0]
)()
);
const webOSVersion = useSelector(
(state) => state.common.appStatus.webOSVersion
);
const webOSVersion = useSelector((state) => state.common.appStatus.webOSVersion);
const panels = useSelector((state) => state.panels.panels);
// FP 방식으로 상태 관리
const [selectedIndex, setSelectedIndex] = useState(0);
const localRecentItems = useSelector((state) =>
fp.pipe(() => state, fp.get("localSettings.recentItems"))()
fp.pipe(() => state, fp.get('localSettings.recentItems'))()
);
const { httpHeader } = useSelector((state) => state.common);
const { popupVisible, activePopup } = useSelector(
(state) => state.common.popup
);
const [lgCatCd, setLgCatCd] = useState("");
const { popupVisible, activePopup } = useSelector((state) => state.common.popup);
const [lgCatCd, setLgCatCd] = useState('');
const [themeProductInfo, setThemeProductInfo] = useState(null);
const containerRef = useRef(null);
const panelType = useMemo(
() => fp.pipe(() => panelInfo, fp.get("type"))(),
[panelInfo]
);
const panelType = useMemo(() => fp.pipe(() => panelInfo, fp.get('type'))(), [panelInfo]);
const panelCurationId = useMemo(
() => fp.pipe(() => panelInfo, fp.get("curationId"))(),
[panelInfo]
);
const panelPatnrId = useMemo(
() => fp.pipe(() => panelInfo, fp.get("patnrId"))(),
[panelInfo]
);
const panelPrdtId = useMemo(
() => fp.pipe(() => panelInfo, fp.get("prdtId"))(),
() => fp.pipe(() => panelInfo, fp.get('curationId'))(),
[panelInfo]
);
const panelPatnrId = useMemo(() => fp.pipe(() => panelInfo, fp.get('patnrId'))(), [panelInfo]);
const panelPrdtId = useMemo(() => fp.pipe(() => panelInfo, fp.get('prdtId'))(), [panelInfo]);
const panelLiveReqFlag = useMemo(
() => fp.pipe(() => panelInfo, fp.get("liveReqFlag"))(),
[panelInfo]
);
const panelBgImgNo = useMemo(
() => fp.pipe(() => panelInfo, fp.get("bgImgNo"))(),
() => fp.pipe(() => panelInfo, fp.get('liveReqFlag'))(),
[panelInfo]
);
const panelBgImgNo = useMemo(() => fp.pipe(() => panelInfo, fp.get('bgImgNo'))(), [panelInfo]);
const productPmtSuptYn = useMemo(
() => fp.pipe(() => productData, fp.get("pmtSuptYn"))(),
() => fp.pipe(() => productData, fp.get('pmtSuptYn'))(),
[productData]
);
const productGrPrdtProcYn = useMemo(
() => fp.pipe(() => productData, fp.get("grPrdtProcYn"))(),
() => fp.pipe(() => productData, fp.get('grPrdtProcYn'))(),
[productData]
);
@@ -124,7 +82,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
() =>
fp.pipe(
() => panelType,
(type) => (type === "theme" ? themeData : productData)
(type) => (type === 'theme' ? themeData : productData)
)(),
[panelType, themeData, productData]
);
@@ -132,11 +90,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const [productType, setProductType] = useState(null);
const [openThemeItemOverlay, setOpenThemeItemOverlay] = useState(false);
// FP 방식으로 스크롤 상태 관리
const [scrollToSection, setScrollToSection] = useState(null);
const [pendingScrollSection, setPendingScrollSection] = useState(null);
// FP 방식으로 상태 업데이트 함수들
const updateSelectedIndex = useCallback((newIndex) => {
setSelectedIndex(
fp.pipe(
@@ -150,15 +106,13 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
setOpenThemeItemOverlay(fp.pipe(() => isOpen, Boolean)());
}, []);
// FP 방식으로 이벤트 핸들러 정의
const onSpotlightUpTButton = useCallback((e) => {
e.stopPropagation();
Spotlight.focus("spotlightId_backBtn");
Spotlight.focus('spotlightId_backBtn');
}, []);
const onClick = useCallback(
(isCancelClick) => (ev) => {
// FP 방식으로 액션 디스패치 체이닝
fp.pipe(
() => {
dispatch(finishVideoPreview());
@@ -169,12 +123,12 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
const shouldUpdatePanel =
fp.pipe(
() => panels,
fp.get("length"),
fp.get('length'),
(length) => length === 4
)() &&
fp.pipe(
() => panels,
fp.get("1.name"),
fp.get('1.name'),
(name) => name === panel_names.PLAYER_PANEL
)();
@@ -183,7 +137,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
updatePanel({
name: panel_names.PLAYER_PANEL,
panelInfo: {
thumbnail: fp.pipe(() => panelInfo, fp.get("thumbnailUrl"))(),
thumbnail: fp.pipe(() => panelInfo, fp.get('thumbnailUrl'))(),
},
})
);
@@ -198,35 +152,31 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
[dispatch, panelInfo, panels]
);
// FP 방식으로 스크롤 함수 핸들러
const handleScrollToSection = useCallback(
(sectionId) => {
console.log("DetailPanel: handleScrollToSection called with:", sectionId);
console.log("DetailPanel: scrollToSection function:", scrollToSection);
console.log('DetailPanel: handleScrollToSection called with:', sectionId);
console.log('DetailPanel: scrollToSection function:', scrollToSection);
// FP 방식으로 스크롤 처리 로직
const scrollAction = fp.pipe(
() => ({ scrollToSection, sectionId }),
({ scrollToSection, sectionId }) => {
if (fp.isNotNil(scrollToSection)) {
return {
action: "execute",
action: 'execute',
scrollFunction: scrollToSection,
sectionId,
};
} else {
return { action: "store", sectionId };
return { action: 'store', sectionId };
}
}
)();
// 액션에 따른 처리
if (scrollAction.action === "execute") {
if (scrollAction.action === 'execute') {
scrollAction.scrollFunction(scrollAction.sectionId);
} else {
console.log(
"DetailPanel: scrollToSection function is null, storing pending scroll"
);
console.log('DetailPanel: scrollToSection function is null, storing pending scroll');
setPendingScrollSection(scrollAction.sectionId);
}
},
@@ -236,7 +186,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
// ===== 배경 이미지 설정 (컴포넌트로 구현되어 useEffect 불필요) =====
// DetailPanelBackground 컴포넌트로 배경 렌더링
// FP 방식으로 pending scroll 처리 (메모리 누수 방지)
useEffect(() => {
const shouldExecutePendingScroll = fp.pipe(
() => ({ scrollToSection, pendingScrollSection }),
@@ -245,10 +194,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
)();
if (shouldExecutePendingScroll) {
console.log(
"DetailPanel: executing pending scroll to:",
pendingScrollSection
);
console.log('DetailPanel: executing pending scroll to:', pendingScrollSection);
// 메모리 누수 방지를 위한 cleanup 함수
const timeoutId = setTimeout(() => {
@@ -265,9 +211,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
}
}, [scrollToSection, pendingScrollSection]);
// FP 방식으로 초기 데이터 로딩 처리 (메모리 누수 방지)
useEffect(() => {
// FP 방식으로 액션 디스패치 체이닝
const loadInitialData = fp.pipe(
() => {
// 기본 액션 디스패치
@@ -276,7 +220,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
},
() => {
// 테마 데이터 로딩
const isThemeType = panelType === "theme";
const isThemeType = panelType === 'theme';
if (isThemeType) {
dispatch(
@@ -298,7 +242,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
getMainCategoryDetail({
patnrId: panelPatnrId,
prdtId: panelPrdtId,
liveReqFlag: panelLiveReqFlag || "N",
liveReqFlag: panelLiveReqFlag || 'N',
})
);
}
@@ -319,7 +263,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
panelBgImgNo,
]);
// FP 방식으로 추천 상품 데이터 로딩 (메모리 누수 방지)
useEffect(() => {
const shouldLoadRecommendations = fp.pipe(() => lgCatCd, fp.isNotEmpty)();
@@ -345,7 +288,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
setLgCatCd(productData.catCd);
} else if (
themeProductInfos &&
themeProductInfos[selectedIndex]?.pmtSuptYn === "N" &&
themeProductInfos[selectedIndex]?.pmtSuptYn === 'N' &&
panelInfo?.curationId
) {
const themeCatCd = themeProductInfos[selectedIndex]?.catCd;
@@ -359,7 +302,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
// selectedIndex,
// themeProductPmtSuptYn: themeProductInfos?.[selectedIndex]?.pmtSuptYn
// });
setLgCatCd("");
setLgCatCd('');
}
}, [productData, themeProductInfos, selectedIndex, panelInfo?.curationId]);
@@ -389,16 +332,14 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
// - 순수 유틸로 빌드/업서트 함수 작성 후, 적절한 useEffect에서 호출하세요.
// 예) saveRecentItem(panelInfo, selectedIndex)
// FP 방식으로 cleanup 처리 (메모리 누수 방지)
useEffect(() => {
return () => {
// FP 방식으로 cleanup 액션 실행
fp.pipe(
() => {
dispatch(clearProductDetail());
},
() => {
setContainerLastFocusedElement(null, ["indicator-GridListContainer"]);
setContainerLastFocusedElement(null, ['indicator-GridListContainer']);
}
)();
};
@@ -411,9 +352,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
// }
// }, [panelInfo, selectedIndex])
// 테마/호텔 기반 인덱스 초기화가 필요하면:
// - findIndex 유틸을 만들어 매칭 인덱스를 계산 후 setSelectedIndex에 반영하세요.
// FP 방식으로 버전 비교 헬퍼 함수 (curry 적용)
const versionComparators = useMemo(
() => ({
isVersionGTE: fp.curry((target, version) => version >= target),
@@ -422,12 +360,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
[]
);
// FP 방식으로 조건 체크 헬퍼 함수들 (curry 적용)
const conditionCheckers = useMemo(
() => ({
hasDataAndCondition: fp.curry(
(conditionFn, data) => fp.isNotNil(data) && conditionFn(data)
),
hasDataAndCondition: fp.curry((conditionFn, data) => fp.isNotNil(data) && conditionFn(data)),
equalTo: fp.curry((expected, actual) => actual === expected),
checkAllConditions: fp.curry((conditions, data) =>
fp.reduce(
@@ -441,7 +376,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
);
const getProductType = useCallback(() => {
// FP 방식으로 데이터 검증 및 타입 결정 - curry 적용으로 더 함수형 개선
const createTypeChecker = fp.curry((type, conditions, sideEffect) =>
fp.pipe(
() => conditions(),
@@ -459,7 +393,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
// 테마 타입 체크
() =>
createTypeChecker(
"theme",
'theme',
() =>
fp.pipe(
() => ({ panelCurationId, themeData }),
@@ -469,10 +403,10 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
() => {
const themeProduct = fp.pipe(
() => themeData,
fp.get("productInfos"),
fp.get('productInfos'),
fp.get(selectedIndex.toString())
)();
setProductType("theme");
setProductType('theme');
setThemeProductInfo(themeProduct);
}
),
@@ -480,7 +414,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
// Buy Now 타입 체크 (curry 활용)
() =>
createTypeChecker(
"buyNow",
'buyNow',
() =>
fp.pipe(
() => ({
@@ -499,21 +433,21 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
}) => {
const conditions = [
() => fp.isNotNil(productData),
() => conditionCheckers.equalTo("Y")(productPmtSuptYn),
() => conditionCheckers.equalTo("N")(productGrPrdtProcYn),
() => conditionCheckers.equalTo('Y')(productPmtSuptYn),
() => conditionCheckers.equalTo('N')(productGrPrdtProcYn),
() => fp.isNotNil(panelPrdtId),
() => versionComparators.isVersionGTE("6.0")(webOSVersion),
() => versionComparators.isVersionGTE('6.0')(webOSVersion),
];
return conditionCheckers.checkAllConditions(conditions)({});
}
)(),
() => setProductType("buyNow")
() => setProductType('buyNow')
),
// Shop By Mobile 타입 체크 (curry 활용)
() =>
createTypeChecker(
"shopByMobile",
'shopByMobile',
() =>
fp.pipe(
() => ({
@@ -532,27 +466,24 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
}) => {
if (!productData) return false;
const isDirectMobile =
conditionCheckers.equalTo("N")(productPmtSuptYn);
const isDirectMobile = conditionCheckers.equalTo('N')(productPmtSuptYn);
const conditionalMobileConditions = [
() => conditionCheckers.equalTo("Y")(productPmtSuptYn),
() => conditionCheckers.equalTo("N")(productGrPrdtProcYn),
() => versionComparators.isVersionLT("6.0")(webOSVersion),
() => conditionCheckers.equalTo('Y')(productPmtSuptYn),
() => conditionCheckers.equalTo('N')(productGrPrdtProcYn),
() => versionComparators.isVersionLT('6.0')(webOSVersion),
() => fp.isNotNil(panelPrdtId),
];
const isConditionalMobile =
conditionCheckers.checkAllConditions(
conditionalMobileConditions
)({});
const isConditionalMobile = conditionCheckers.checkAllConditions(
conditionalMobileConditions
)({});
return isDirectMobile || isConditionalMobile;
}
)(),
() => setProductType("shopByMobile")
() => setProductType('shopByMobile')
),
];
// FP 방식으로 순차적 타입 체크
const matchedRule = fp.reduce(
(result, rule) => (result.matched ? result : rule()),
{ matched: false },
@@ -569,13 +500,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
productGrPrdtProcYn,
webOSVersion,
}),
({
productData,
panelPrdtId,
productPmtSuptYn,
productGrPrdtProcYn,
webOSVersion,
}) => ({
({ productData, panelPrdtId, productPmtSuptYn, productGrPrdtProcYn, webOSVersion }) => ({
pmtSuptYn: productPmtSuptYn,
grPrdtProcYn: productGrPrdtProcYn,
prdtId: panelPrdtId,
@@ -583,8 +508,8 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
})
)();
console.warn("Unknown product type:", productData);
console.warn("Product data properties:", debugInfo);
console.warn('Unknown product type:', productData);
console.warn('Product data properties:', debugInfo);
}
}, [
panelCurationId,
@@ -600,7 +525,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
useEffect(() => {
// productData가 로드된 후에만 getProductType 실행
if (productData || (panelType === "theme" && themeData)) {
if (productData || (panelType === 'theme' && themeData)) {
getProductType();
}
}, [getProductType, productData, themeData, panelType]);
@@ -614,11 +539,11 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
}, [themeData, selectedIndex]);
const imageUrl = useMemo(
() => fp.pipe(() => productData, fp.get("thumbnailUrl960"))(),
() => fp.pipe(() => productData, fp.get('thumbnailUrl960'))(),
[productData]
);
// FP 방식으로 타이틀과 aria-label 메모이제이션 (성능 최적화)
// 타이틀과 aria-label 메모이제이션 (성능 최적화)
const headerTitle = useMemo(
() =>
fp.pipe(
@@ -628,21 +553,20 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
() => ({ panelPrdtId, productData }),
({ 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.isNotNil)()
? fp.pipe(() => productData, fp.get('prdtNm'))()
: null
)();
const themeTitle = fp.pipe(
() => ({ panelType, themeData }),
({ panelType, themeData }) =>
panelType === "theme" &&
fp.pipe(() => themeData, fp.get("curationNm"), fp.isNotNil)()
? fp.pipe(() => themeData, fp.get("curationNm"))()
panelType === 'theme' && fp.pipe(() => themeData, fp.get('curationNm'), fp.isNotNil)()
? fp.pipe(() => themeData, fp.get('curationNm'))()
: null
)();
return productTitle || themeTitle || "";
return productTitle || themeTitle || '';
}
)(),
[panelPrdtId, productData, panelType, themeData]
@@ -653,10 +577,9 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
fp.pipe(
() => ({ panelPrdtId, productData }),
({ panelPrdtId, productData }) =>
fp.isNotNil(panelPrdtId) &&
fp.pipe(() => productData, fp.get("prdtNm"), fp.isNotNil)()
? fp.pipe(() => productData, fp.get("prdtNm"))()
: ""
fp.isNotNil(panelPrdtId) && fp.pipe(() => productData, fp.get('prdtNm'), fp.isNotNil)()
? fp.pipe(() => productData, fp.get('prdtNm'))()
: ''
)(),
[panelPrdtId, productData]
);
@@ -666,7 +589,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
// Pink Pong 등 특정 파트너사에서만 thumbnailUrl960 데이터가 있어서 배경이 변경됨
// 현재는 고정 배경(detailPanelBg)만 사용하기 위해 주석 처리
// FP 방식으로 배경 이미지 설정 (메모리 누수 방지)
/*
useLayoutEffect(() => {
const shouldSetBackground = fp.pipe(
@@ -681,7 +603,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
}, [imageUrl]);
*/
console.log("productDataSource :", productDataSource);
console.log('productDataSource :', productDataSource);
// 언마운트 시 인덱스 초기화가 필요하면:
// useEffect(() => () => setSelectedIndex(0), [])
@@ -725,18 +647,12 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
isDefaultContainer
>
{useMemo(() => {
// FP 방식으로 렌더링 조건 결정 (메모이제이션으로 최적화)
const renderStates = fp.pipe(
() => ({ isLoading, panelInfo, productDataSource, productType }),
({ isLoading, panelInfo, productDataSource, productType }) => {
const hasRequiredData = fp.pipe(
() => [panelInfo, productDataSource, productType],
(data) =>
fp.reduce(
(acc, item) => acc && fp.isNotNil(item),
true,
data
)
(data) => fp.reduce((acc, item) => acc && fp.isNotNil(item), true, data)
)();
return {