{productData?.imgUrls600 && productData.imgUrls600.length > 0 ? (
productData.imgUrls600.map((image, index) => (
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less
index 58a69c8e..7ea63d15 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less
@@ -463,3 +463,26 @@
}
}
}
+
+// LayoutSample 포커스 테스트용 스타일
+.layoutSample {
+ width: 1124px;
+ height: 300px;
+ background-color: yellow;
+ margin-bottom: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: black;
+ font-size: 24px;
+ font-weight: bold;
+ cursor: pointer;
+ position: relative;
+ border-radius: 8px;
+
+ &:focus {
+ &::after {
+ .focused(@boxShadow:22px, @borderRadius:8px);
+ }
+ }
+}
\ No newline at end of file
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviews.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviews.jsx
index e3eaba9b..770cd2d8 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviews.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/UserReviews/UserReviews.jsx
@@ -8,7 +8,7 @@ import { useMemo } from "react";
import Spottable from "@enact/spotlight/Spottable";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import { useDispatch, useSelector } from "react-redux";
-import { getUserReviews } from "../../../../actions/productActions";
+import { getUserReviews, toggleShowAllReviews } from "../../../../actions/productActions";
import StarRating from "../../components/StarRating";
import CustomerImages from "./CustomerImages/CustomerImages";
import UserReviewsPopup from "./UserReviewsPopup/UserReviewsPopup";
@@ -17,11 +17,13 @@ const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
{
- enterTo: "last-focused",
+ enterTo: "default-element",
preserveld: true,
leaveFor: {
left: "spotlight-product-info-section-container"
- }
+ },
+ restrict: "none",
+ spotlightDirection: "vertical"
},
"div"
);
@@ -30,10 +32,46 @@ export default function UserReviews({ productInfo, panelInfo }) {
const { getScrollTo, scrollTop } = useScrollTo();
const dispatch = useDispatch();
const containerRef = useRef(null);
+ const tScrollerRef = useRef(null);
// 팝업 상태 관리
const [isPopupOpen, setIsPopupOpen] = useState(false);
const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+ // Redux에서 showAllReviews 상태 가져오기
+ const showAllReviews = useSelector((state) => state.product.showAllReviews);
+
+ // 디버깅: showAllReviews 상태 변경 확인
+ useEffect(() => {
+ console.log("[UserReviews] showAllReviews state changed:", {
+ showAllReviews,
+ reviewListLength: reviewListData?.length || 0,
+ willShowCount: showAllReviews ? (reviewListData?.length || 0) : 5
+ });
+ }, [showAllReviews, reviewListData]);
+
+ // showAllReviews 상태 변경 시 TScroller 스크롤 영역 강제 재계산
+ useEffect(() => {
+ if (showAllReviews && tScrollerRef.current) {
+ console.log("[UserReviews] Forcing TScroller to update scroll area for all reviews");
+
+ // 다음 렌더링 사이클 후 스크롤 영역 재계산
+ setTimeout(() => {
+ if (tScrollerRef.current) {
+ // TScroller의 스크롤 영역을 강제로 업데이트
+ if (typeof tScrollerRef.current.calculateMetrics === 'function') {
+ tScrollerRef.current.calculateMetrics();
+ }
+
+ // 또는 scrollTo를 호출해서 스크롤 영역 업데이트
+ if (typeof tScrollerRef.current.scrollTo === 'function') {
+ tScrollerRef.current.scrollTo({ position: { y: 0 }, animate: false });
+ }
+
+ console.log("[UserReviews] TScroller scroll area updated");
+ }
+ }, 100);
+ }
+ }, [showAllReviews]);
const reviewListData = useSelector(
(state) => state.product.reviewData && state.product.reviewData.reviewList
);
@@ -51,9 +89,11 @@ export default function UserReviews({ productInfo, panelInfo }) {
useEffect(() => {
console.log("[UserReviews] Review data received:", {
reviewListData,
+ reviewListLength: reviewListData?.length || 0,
reviewTotalCount,
reviewDetailData,
- hasData: reviewListData && reviewListData.length > 0
+ hasData: reviewListData && reviewListData.length > 0,
+ actualDataLength: Array.isArray(reviewListData) ? reviewListData.length : 'not array'
});
}, [reviewListData, reviewTotalCount, reviewDetailData]);
@@ -116,6 +156,13 @@ export default function UserReviews({ productInfo, panelInfo }) {
setSelectedImageIndex(index);
}, []);
+
+ const handleViewAllReviewsClick = useCallback(() => {
+ console.log("[UserReviews] View All Reviews clicked - dispatching toggleShowAllReviews");
+ dispatch(toggleShowAllReviews());
+ }, [dispatch]);
+
+
// 이미지 데이터 가공 (CustomerImages와 동일한 로직)
const customerImages = useMemo(() => {
if (!reviewListData || !Array.isArray(reviewListData)) {
@@ -155,9 +202,11 @@ export default function UserReviews({ productInfo, panelInfo }) {
spotlightId="user-reviews-container"
>
{$L(
- `Showing ${reviewListData ? reviewListData.length : 0} out of ${reviewTotalCount} reviews`
+ `Showing ${reviewListData ? (showAllReviews ? reviewListData.length : Math.min(reviewListData.length, 5)) : 0} out of ${reviewTotalCount} reviews`
)}
{reviewListData &&
- reviewListData.map((review, index) => {
+ (() => {
+ const reviewsToShow = showAllReviews ? reviewListData : reviewListData.slice(0, 5);
+ console.log("[UserReviews] Reviews to render:", {
+ showAllReviews,
+ totalReviews: reviewListData.length,
+ reviewsToShowCount: reviewsToShow.length,
+ isShowingAll: showAllReviews
+ });
+ return reviewsToShow;
+ })().map((review, index) => {
const { reviewImageList, rvwRtng, rvwRgstDtt, rvwCtnt, rvwId, wrtrNknm, rvwWrtrId } =
review;
console.log(`[UserReviews] Rendering review ${index}:`, { rvwId, hasImages: reviewImageList && reviewImageList.length > 0 });
@@ -224,7 +282,22 @@ export default function UserReviews({ productInfo, panelInfo }) {
);
})}
+