diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx index f60c6ec3..08396a6d 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx @@ -6,6 +6,9 @@ import Spotlight from '@enact/spotlight'; import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator'; import arrowDownIcon from '../../../../assets/images/icons/ic-arrow-down.svg'; +import themeImage1 from '../../../../assets/images/theme/image-1.png'; +import themeImage2 from '../../../../assets/images/theme/image-2.png'; +import themeImage3 from '../../../../assets/images/theme/image-3.png'; import { updatePanel } from '../../../actions/panelActions'; import TButton from '../../../components/TButton/TButton'; import ThemeItemCard from './ThemeItemCard'; @@ -59,12 +62,18 @@ export default function ThemeContents({ const isClickBlocked = useRef(false); const blockTimeoutRef = useRef(null); + // 랜덤 이미지 선택 함수 + const getRandomThemeImage = () => { + const images = [themeImage1, themeImage2, themeImage3]; + return images[Math.floor(Math.random() * images.length)]; + }; + // Mock 데이터 const mockItems = [ { prdtId: 'mock-1', prdtNm: 'Origami Removable Connecting Rack 2-pack', - prdtImgPath: 'https://placehold.co/120x120', + prdtImgPath: getRandomThemeImage(), salePrice: '$32.98', originalPrice: '$150.00', patnrLogoPath: null, @@ -75,10 +84,10 @@ export default function ThemeContents({ }, { prdtId: 'mock-2', - prdtNm: 'Origami Removable Connecting Rack 2-pack', - prdtImgPath: 'https://placehold.co/120x120', - salePrice: '$32.98', - originalPrice: '$150.00', + prdtNm: 'Premium Stainless Steel Cookware Set', + prdtImgPath: getRandomThemeImage(), + salePrice: '$45.99', + originalPrice: '$189.99', patnrLogoPath: null, patncNm: 'Partner 2', showId: 'show-2', @@ -87,10 +96,10 @@ export default function ThemeContents({ }, { prdtId: 'mock-3', - prdtNm: 'Origami Removable Connecting Rack 2-pack', - prdtImgPath: 'https://placehold.co/120x120', - salePrice: '$32.98', - originalPrice: '$150.00', + prdtNm: 'Smart Home Security Camera System', + prdtImgPath: getRandomThemeImage(), + salePrice: '$78.50', + originalPrice: '$299.00', patnrLogoPath: null, patncNm: 'Partner 3', showId: 'show-3', @@ -99,10 +108,10 @@ export default function ThemeContents({ }, { prdtId: 'mock-4', - prdtNm: 'Origami Removable Connecting Rack 2-pack', - prdtImgPath: 'https://placehold.co/120x120', - salePrice: '$32.98', - originalPrice: '$150.00', + prdtNm: 'Ergonomic Office Chair with Lumbar Support', + prdtImgPath: getRandomThemeImage(), + salePrice: '$125.00', + originalPrice: '$450.00', patnrLogoPath: null, patncNm: 'Partner 4', showId: 'show-4', @@ -111,10 +120,10 @@ export default function ThemeContents({ }, { prdtId: 'mock-5', - prdtNm: 'Origami Removable Connecting Rack 2-pack', - prdtImgPath: 'https://placehold.co/120x120', - salePrice: '$32.98', - originalPrice: '$150.00', + prdtNm: 'Wireless Bluetooth Noise-Canceling Headphones', + prdtImgPath: getRandomThemeImage(), + salePrice: '$89.99', + originalPrice: '$249.99', patnrLogoPath: null, patncNm: 'Partner 5', showId: 'show-5', @@ -124,7 +133,15 @@ export default function ThemeContents({ ]; // themeItems가 비어있으면 mock 데이터 사용 - const displayItems = themeItems && themeItems.length > 0 ? themeItems : mockItems; + const displayItems = useMemo(() => { + if (themeItems && themeItems.length > 0) { + return themeItems; + } + return mockItems.map((item) => ({ + ...item, + prdtImgPath: getRandomThemeImage(), // 각 아이템마다 랜덤 이미지 재할당 + })); + }, [themeItems]); const handleThemeItemButtonClick = useCallback(() => { if (onThemeItemClose) { @@ -230,9 +247,12 @@ export default function ThemeContents({ }; }, []); - // 토스트가 열리면 닫기(=THEME ITEM) 버튼부터 포커스되도록 보정 + // 토스트가 열리면 THEME ITEM 버튼에 포커스되도록 보정 useEffect(() => { - Spotlight.focus('theme-contents-close-button'); + // 약간의 지연을 주어 컴포넌트가 렌더링된 후 포커스 이동 + setTimeout(() => { + Spotlight.focus('theme-contents-close-button'); + }, 100); }, []); // 키 이동 보정: 위/아래/좌우 이동 설정