[251123] fix: DetailPanel ThemeContent-5

🕐 커밋 시간: 2025. 11. 23. 12:54:52

📊 변경 통계:
  • 총 파일: 1개
  • 추가: +40줄
  • 삭제: -20줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx (javascript):
    ✅ Added: getRandomThemeImage()
    🔄 Modified: SpotlightContainerDecorator()

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);
   }, []);
 
   // 키 이동 보정: 위/아래/좌우 이동 설정