[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,49 @@
|
||||
@import "../../../style/CommonStyle.module.less";
|
||||
@import "../../../style/utils.module.less";
|
||||
|
||||
.tHeaderCustom {
|
||||
align-self: stretch;
|
||||
margin: 30px 0; // 상하 30px, 좌우 0px 마진 (DetailPanel에서 이미 60px padding 적용)
|
||||
height: 60px; // 마진을 제외한 높이 60px
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: transparent; // DetailPanel에서는 배경 투명
|
||||
|
||||
.title {
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
color: #EAEAEA;
|
||||
padding-left: 0;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
margin-right: 20px; // Header Title 후 간격 (children과의 gap)
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
.size(@w: 60px, @h: 60px);
|
||||
background-size: 60px 60px;
|
||||
background-position: center;
|
||||
background-image: url("../../../../assets/images/btn/btn-60-bk-back-nor@3x.png");
|
||||
border: none;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20px; // 되돌아가기 아이콘 후 20px gap
|
||||
|
||||
&:focus {
|
||||
border-radius: 10px;
|
||||
background-image: url("../../../../assets/images/btn/btn-60-wh-back-foc@3x.png");
|
||||
box-shadow: 0px 6px 30px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.centerImage {
|
||||
.size(@w: 60px, @h: 60px);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
flex-shrink: 0;
|
||||
margin-right: 10px; // 파트너사 로고 후 10px gap
|
||||
}
|
||||
Reference in New Issue
Block a user