[250904] feat: DetailPanel UserReviews 페이지네이션 구현
🕐 커밋 시간: 2025. 09. 04. 12:56:09 💬 사용자 메시지: UserReviews와 CustomerImages에 페이지네이션 기능 추가 - CustomerImages: 5개씩 표시하는 View More 버튼 기능 - UserReviews: 모든 리뷰 데이터 표시로 변경 - Chromium 68 호환성 개선 (Optional Chaining 제거) - API 엔드포인트 및 Redux 액션/리듀서 추가 - 1124px 레이아웃 통일 및 View More 버튼 스타일링 📊 변경 통계: • 총 파일: 57개 • 추가: +1252줄 • 삭제: -540줄 📁 추가된 파일: + com.twin.app.shoptime/assets/images/icons/ic-gr-call-1.png + com.twin.app.shoptime/assets/images/image-review-sample-1.png + com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.backup.jsx + com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.backup.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/ProductDescription.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDescription/package.json + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDetail/ProductDetail.new.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductDetail/ProductDetail.new.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/CustomerImages/CustomerImages.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/CustomerImages/CustomerImages.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviews.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviews.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.figma.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviewsPopup/UserReviewsPopup.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/package.json + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/YouMayAlsoLike.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/YouMayAlsoLike/package.json + com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/package.json + com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductOverview.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/BuyNowPriceDisplay/BuyNowPriceDisplay.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/BuyNowPriceDisplay/BuyNowPriceDisplay.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/BuyNowPriceDisplay/package.json + com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ProductPriceDisplay.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.jsx + com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/ShopByMobilePriceDisplay.module.less + com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/ShopByMobilePriceDisplay/package.json + com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/ProductPriceDisplay/package.json + com.twin.app.shoptime/src/views/DetailPanel/ProductOverview/package.json + com.twin.app.shoptime/src/views/DetailPanel/ThemeItemListOverlay/ThemeItemListOverlay.jsx + com.twin.app.shoptime/src/views/DetailPanel/ThemeItemListOverlay/ThemeItemListOverlay.module.less + com.twin.app.shoptime/src/views/DetailPanel/components/CustomScrollbar/CustomScrollbar.jsx + com.twin.app.shoptime/src/views/DetailPanel/components/CustomScrollbar/CustomScrollbar.module.less + com.twin.app.shoptime/src/views/DetailPanel/components/DetailMobileSendPopUp.jsx + com.twin.app.shoptime/src/views/DetailPanel/components/DetailMobileSendPopUp.module.less + com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx + com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.module.less + com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.jsx + com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.module.less + package-lock.json 📝 수정된 파일: ~ com.twin.app.shoptime/src/actions/actionTypes.js ~ com.twin.app.shoptime/src/actions/productActions.js ~ com.twin.app.shoptime/src/api/apiConfig.js ~ com.twin.app.shoptime/src/reducers/productReducer.js ~ com.twin.app.shoptime/src/utils/fp.js ~ com.twin.app.shoptime/src/utils/lodash.js ~ com.twin.app.shoptime/src/utils/lodashFpEx.js ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx ~ com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.module.less 🔧 주요 변경 내용: • 타입 시스템 안정성 강화 • 핵심 비즈니스 로직 개선 • API 서비스 레이어 개선 • 공통 유틸리티 함수 최적화 • 프로젝트 의존성 관리 개선 • UI 컴포넌트 아키텍처 개선 • 대규모 기능 개발 • 모듈 구조 개선 BREAKING CHANGE: API 또는 설정 변경으로 인한 호환성 영향 가능
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
import React, { useCallback, useMemo } from "react";
|
||||
|
||||
import classNames from "classnames";
|
||||
|
||||
import { Marquee } from "@enact/sandstone/Marquee";
|
||||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
|
||||
import { $L } from "../../../utils/helperMethods";
|
||||
import defaultLogoImg from "../../../../assets/images/ic-tab-partners-default@3x.png";
|
||||
import qvcLogoImg from "../../../../assets/images/icons/ic-partners-qvc@3x.png";
|
||||
import css from "./THeaderCustom.module.less";
|
||||
|
||||
const Container = SpotlightContainerDecorator(
|
||||
{ enterTo: "last-focused" },
|
||||
"div"
|
||||
);
|
||||
const SpottableComponent = Spottable("button");
|
||||
|
||||
export default function THeaderCustom({
|
||||
title,
|
||||
className,
|
||||
onBackButton,
|
||||
onSpotlightUp,
|
||||
onSpotlightLeft,
|
||||
marqueeDisabled = true,
|
||||
onClick,
|
||||
ariaLabel,
|
||||
children,
|
||||
...rest
|
||||
}) {
|
||||
const convertedTitle = useMemo(() => {
|
||||
if (title && typeof title === 'string') {
|
||||
const cleanedTitle = title.replace(/(\r\n|\n)/g, "");
|
||||
return $L(marqueeDisabled ? title : cleanedTitle);
|
||||
}
|
||||
return '';
|
||||
}, [marqueeDisabled, title]);
|
||||
|
||||
const _onClick = useCallback(
|
||||
(e) => {
|
||||
if (onClick) {
|
||||
onClick(e);
|
||||
}
|
||||
},
|
||||
[onClick]
|
||||
);
|
||||
|
||||
const _onSpotlightUp = (e) => {
|
||||
if (onSpotlightUp) {
|
||||
onSpotlightUp(e);
|
||||
}
|
||||
};
|
||||
|
||||
const _onSpotlightLeft = (e) => {
|
||||
if (onSpotlightLeft) {
|
||||
onSpotlightLeft(e);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container className={classNames(css.tHeaderCustom, className)} {...rest}>
|
||||
{onBackButton && (
|
||||
<SpottableComponent
|
||||
className={css.button}
|
||||
onClick={_onClick}
|
||||
spotlightId={"spotlightId_backBtn"}
|
||||
onSpotlightUp={_onSpotlightUp}
|
||||
onSpotlightLeft={_onSpotlightLeft}
|
||||
aria-label="Back"
|
||||
role="button"
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={css.centerImage}
|
||||
style={{
|
||||
backgroundImage: `url("${qvcLogoImg}")`
|
||||
}}
|
||||
/>
|
||||
<Marquee
|
||||
marqueeOn="render"
|
||||
className={css.title}
|
||||
marqueeDisabled={marqueeDisabled}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
{convertedTitle && (
|
||||
<span dangerouslySetInnerHTML={{ __html: convertedTitle }} />
|
||||
)}
|
||||
</Marquee>
|
||||
{children}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user