From e44bcaf19f8690bd44578195551df985696b1a28 Mon Sep 17 00:00:00 2001
From: optrader <optrader8@gmail.com>
Date: Sun, 23 Nov 2025 12:12:36 +0900
Subject: [PATCH] [251123] fix: DetailPanel ThemeContent-2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🕐 커밋 시간: 2025. 11. 23. 12:12:36

📊 변경 통계:
  • 총 파일: 6개
  • 추가: +132줄
  • 삭제: -133줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ThemeItemCard.jsx
  + com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.figma.jsx
  + com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.jsx
  + com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.module.less

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

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx (javascript):
    ✅ Added: handleItemClick()
    🔄 Modified: SpotlightContainerDecorator()
    ❌ Deleted: handleItemClick()
  📄 com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.jsx (javascript):
    ✅ Added: handleFocus(), handleBlur()
  📄 com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.module.less (unknown):
    ✅ Added: gradient(), global()

Performance: 코드 최적화로 성능 개선 기대
---
 .../ProductAllSection/ThemeItemCard.jsx       |  42 +++
 .../ThemeProduct/ThemeContents.jsx            | 247 +++++++-------
 .../ThemeProduct/ThemeContents.module.less    |  26 +-
 .../ThemeProduct/ThemeItemCard.figma.jsx      | 322 ++++++++++++++++++
 .../ThemeProduct/ThemeItemCard.jsx            |  83 +++++
 .../ThemeProduct/ThemeItemCard.module.less    | 168 +++++++++
 6 files changed, 751 insertions(+), 137 deletions(-)
 create mode 100644 com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ThemeItemCard.jsx
 create mode 100644 com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.figma.jsx
 create mode 100644 com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.jsx
 create mode 100644 com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.module.less

diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ThemeItemCard.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ThemeItemCard.jsx
new file mode 100644
index 00000000..f2641c76
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ThemeItemCard.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Spottable from '@enact/spotlight/Spottable';
+import css from './ThemeItemCard.module.less';
+
+const SpottableDiv = Spottable('div');
+
+export default function ThemeItemCard({
+  onClick,
+  onMouseDown,
+  spotlightId = 'theme-open-button',
+  className = '',
+  children = 'THEME ITEM',
+  iconSrc = null,
+}) {
+  return (
+    <SpottableDiv
+      className={`${css.themeItemCard} ${className}`}
+      onClick={onClick}
+      onMouseDown={onMouseDown}
+      spotlightId={spotlightId}
+    >
+      <div className={css.themeItemCardContent}>
+        <span className={css.themeItemCardText}>{children}</span>
+        {iconSrc && (
+          <div className={css.themeItemCardIcon}>
+            <img src={iconSrc} alt="arrow down" />
+          </div>
+        )}
+      </div>
+    </SpottableDiv>
+  );
+}
+
+ThemeItemCard.propTypes = {
+  onClick: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  spotlightId: PropTypes.string,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  iconSrc: PropTypes.string,
+};
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 700b23b0..9897c544 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx
@@ -1,14 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 import { useDispatch } from 'react-redux';
 
 import Spotlight from '@enact/spotlight';
 import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
 
 import arrowDownIcon from '../../../../assets/images/icons/ic-arrow-down.svg';
 import { updatePanel } from '../../../actions/panelActions';
 import TButton from '../../../components/TButton/TButton';
+import ThemeItemCard from './ThemeItemCard';
 import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID, panel_names } from '../../../utils/Config';
 import { $L } from '../../../utils/helperMethods';
 import css from './ThemeContents.module.less';
@@ -25,30 +25,23 @@ const Container = SpotlightContainerDecorator(
   'div'
 );
 
-const ItemsContainer = SpotlightContainerDecorator(
-  {
-    enterTo: 'default-element',
-    preserveId: true,
-    spotlightDirection: 'horizontal', // 리스트 내 좌/우 이동
-    spotlightRestrict: 'self-only',
-  },
-  'div'
-);
-
 const ButtonContainer = SpotlightContainerDecorator(
   {
-    enterTo: 'default-element',
+    enterTo: 'last-focused',
     preserveId: true,
     spotlightDirection: 'horizontal',
-    // 버튼에서 아래 리스트로 포커스 이동해야 하므로 self-only는 사용하지 않는다
   },
   'div'
 );
 
-const SpottableItemCard = Spottable({
-  allowDisabledFocus: true,
-  noAutoFocus: true,
-})('div');
+const ItemsContainer = SpotlightContainerDecorator(
+  {
+    enterTo: 'last-focused',
+    preserveId: true,
+    spotlightDirection: 'horizontal',
+  },
+  'div'
+);
 
 export default function ThemeContents({
   themeItems,
@@ -66,7 +59,6 @@ export default function ThemeContents({
   const dispatch = useDispatch();
   const isClickBlocked = useRef(false);
   const blockTimeoutRef = useRef(null);
-  const [focusedIndex, setFocusedIndex] = useState(-1);
 
   // Mock 데이터
   const mockItems = [
@@ -141,6 +133,95 @@ export default function ThemeContents({
     }
   }, [onThemeItemClose]);
 
+  const renderItem = useCallback(
+    (item, index) => {
+      console.log('[Theme] renderItem index', index, 'displayItems size', displayItems?.length);
+      const {
+        prdtId,
+        prdtNm,
+        prdtImgPath,
+        salePrice,
+        originalPrice,
+        patnrLogoPath,
+        patncNm,
+        showId,
+        catNm,
+        energyLabels,
+      } = item;
+
+      const spotlightItemId = `theme-toast-item-${index}`;
+
+      const handleItemClick = () => {
+        const params = {
+          tabTitle: tabTitle[tabIndex],
+          productId: prdtId,
+          productTitle: prdtNm,
+          showType: panelInfo?.shptmBanrTpNm,
+          category: catNm,
+          partner: patncNm,
+          contextName: LOG_CONTEXT_NAME.PRODUCT,
+          messageId: LOG_MESSAGE_ID.CONTENTCLICK,
+        };
+        dispatch(sendLogTotalRecommend(params));
+
+        if (isClickBlocked.current) {
+          return;
+        }
+
+        isClickBlocked.current = true;
+
+        if (blockTimeoutRef.current) {
+          clearTimeout(blockTimeoutRef.current);
+        }
+
+        blockTimeoutRef.current = setTimeout(() => {
+          isClickBlocked.current = false;
+          blockTimeoutRef.current = null;
+        }, 600);
+
+        if (!prdtId) return;
+
+        setSelectedIndex(index);
+        dispatch(
+          updatePanel({
+            name: panel_names.PLAYER_PANEL,
+            panelInfo: {
+              prdtId,
+              showId,
+              shptmBanrTpNm: 'THEME',
+              isUpdatedByClick: true,
+            },
+          })
+        );
+      };
+
+      return (
+        <ThemeItemCard
+          key={prdtId || `theme-item-${index}`}
+          prdtId={prdtId}
+          prdtNm={prdtNm}
+          prdtImgPath={prdtImgPath}
+          salePrice={salePrice}
+          originalPrice={originalPrice}
+          energyLabels={energyLabels}
+          onClick={handleItemClick}
+          spotlightId={spotlightItemId}
+          dataSpotlightDefault={index === 0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              handleItemClick();
+            }
+          }}
+          onFocus={() => {
+            handleItemFocus?.(index);
+          }}
+          onMouseEnter={() => Spotlight.focus(spotlightItemId)}
+        />
+      );
+    },
+    [displayItems, tabTitle, tabIndex, panelInfo, dispatch]
+  );
+
   // cleanup useEffect
   useEffect(() => {
     return () => {
@@ -155,20 +236,37 @@ export default function ThemeContents({
     Spotlight.focus('theme-contents-close-button');
   }, []);
 
-  // 키 이동 보정: 위/아래 이동 시 THEME ITEM 버튼 <-> 첫 번째 아이템으로 확실히 연결
+  // 키 이동 보정: 위/아래/좌우 이동 설정
   useEffect(() => {
+    console.log('[Theme] focus mapping displayItems', displayItems, displayItems?.length);
     if (!displayItems || displayItems.length === 0) return;
 
     const firstItemId = 'theme-toast-item-0';
+    const lastIndex = displayItems.length - 1;
+
+    // THEME ITEM 버튼과 첫 번째 아이템 연결
     Spotlight.set('theme-contents-close-button', {
       next: { down: firstItemId },
     });
 
-    displayItems.slice(0, 5).forEach((_, index) => {
+    // 모든 아이템의 위/아래/좌/우 네비게이션 설정
+    displayItems.forEach((_, index) => {
       const itemId = `theme-toast-item-${index}`;
-      Spotlight.set(itemId, {
-        next: { up: 'theme-contents-close-button' },
-      });
+      const nextItemId = index < lastIndex ? `theme-toast-item-${index + 1}` : null;
+      const prevItemId = index > 0 ? `theme-toast-item-${index - 1}` : null;
+
+      const nextConfig = {
+        up: 'theme-contents-close-button',
+      };
+
+      if (nextItemId) {
+        nextConfig.right = nextItemId;
+      }
+      if (prevItemId) {
+        nextConfig.left = prevItemId;
+      }
+
+      Spotlight.set(itemId, { next: nextConfig });
     });
   }, [displayItems]);
 
@@ -195,106 +293,7 @@ export default function ThemeContents({
         spotlightDefaultElement="theme-toast-item-0"
       >
         {displayItems && displayItems.length > 0 ? (
-          displayItems.slice(0, 5).map((item, index) => {
-            const {
-              prdtId,
-              prdtNm,
-              prdtImgPath,
-              salePrice,
-              originalPrice,
-              patnrLogoPath,
-              patncNm,
-              showId,
-              catNm,
-              energyLabels,
-            } = item;
-
-            const spotlightItemId = `theme-toast-item-${index}`;
-
-            const handleItemClick = () => {
-              const params = {
-                tabTitle: tabTitle[tabIndex],
-                productId: prdtId,
-                productTitle: prdtNm,
-                showType: panelInfo?.shptmBanrTpNm,
-                category: catNm,
-                partner: patncNm,
-                contextName: LOG_CONTEXT_NAME.PRODUCT,
-                messageId: LOG_MESSAGE_ID.CONTENTCLICK,
-              };
-              dispatch(sendLogTotalRecommend(params));
-
-              if (isClickBlocked.current) {
-                return;
-              }
-
-              isClickBlocked.current = true;
-
-              if (blockTimeoutRef.current) {
-                clearTimeout(blockTimeoutRef.current);
-              }
-
-              blockTimeoutRef.current = setTimeout(() => {
-                isClickBlocked.current = false;
-                blockTimeoutRef.current = null;
-              }, 600);
-
-              if (!prdtId) return;
-
-              setSelectedIndex(index);
-              dispatch(
-                updatePanel({
-                  name: panel_names.PLAYER_PANEL,
-                  panelInfo: {
-                    prdtId,
-                    showId,
-                    shptmBanrTpNm: 'THEME',
-                    isUpdatedByClick: true,
-                  },
-                })
-              );
-            };
-
-            return (
-              <SpottableItemCard
-                key={prdtId}
-                className={`${css.itemCard} ${focusedIndex === index ? css.focused : ''}`}
-                onClick={handleItemClick}
-                spotlightId={spotlightItemId}
-                data-spotlight-default={index === 0}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    handleItemClick();
-                  }
-                }}
-                onFocus={() => {
-                  setFocusedIndex(index);
-                  handleItemFocus?.(index);
-                }}
-                onBlur={() => setFocusedIndex(-1)}
-                onMouseEnter={() => Spotlight.focus(spotlightItemId)}
-              >
-                <img src={prdtImgPath} alt={prdtId} className={css.itemImage} />
-                <div className={css.itemInfo}>
-                  <div className={css.itemName}>{prdtNm}</div>
-                  <div className={css.itemPrice}>
-                    <span className={css.salePrice}>{salePrice}</span>
-                    <span className={css.originalPrice}>{originalPrice}</span>
-                  </div>
-                  {energyLabels && energyLabels.length > 0 && (
-                    <div className={css.energyLabels}>
-                      {energyLabels.map((label, labelIndex) => (
-                        <div key={labelIndex} className={css.energyLabel}>
-                          {/* 에너지 라벨 렌더링 */}
-                          {label}
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              </SpottableItemCard>
-            );
-          })
+          displayItems.map((item, index) => renderItem(item, index))
         ) : (
           <div>No items</div>
         )}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.module.less
index a1537559..61d4c7fb 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.module.less
@@ -4,7 +4,7 @@
 // Toast wrapper 스타일
 .toastWrapper {
   width: 100%;
-  height: 390px;
+  height: 450px; // padding(120) + button(60) + gap(30) + items(240) = 450px
   display: inline-flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -31,6 +31,8 @@
 }
 
 .itemsWrapper {
+  width: 100%;
+  height: 180px;
   display: inline-flex;
   flex-direction: row;
   gap: 18px;
@@ -39,40 +41,38 @@
   flex-wrap: nowrap;
   overflow-x: auto;
   overflow-y: visible; // 포커스 테두리 보존
-  flex: none;
-  padding: 4px; // 포커스 테두리(4px box-shadow) 표시 공간 확보
+  flex-shrink: 0;
+  scrollbar-width: none; // Firefox 스크롤바 숨김
+
+  &::-webkit-scrollbar {
+    display: none; // WebKit 스크롤바 숨김
+  }
 }
 
 .itemCard {
   width: 470px;
   height: 180px;
   padding: 30px;
+  box-sizing: border-box;
   background: linear-gradient(0deg, 0%, 100%), #2C2C2C;
   border-radius: 12px;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 15px;
-  display: inline-flex;
+  display: flex;
   flex-shrink: 0;
   cursor: pointer;
   outline: none;
   transition: all 0.2s ease;
   position: relative;
 
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 4px @PRIMARY_COLOR_RED;
-  }
-
+  &:focus,
   &:global(.spotlight) {
     box-shadow: 0 0 0 4px @PRIMARY_COLOR_RED;
+    z-index: 2;
   }
 }
 
-.focused {
-  box-shadow: 0 0 0 4px @PRIMARY_COLOR_RED;
-}
-
 .itemImage {
   width: 120px;
   height: 120px;
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.figma.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.figma.jsx
new file mode 100644
index 00000000..542f9231
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.figma.jsx
@@ -0,0 +1,322 @@
+<div
+  style={{
+    width: '470px',
+    height: '180px',
+    padding: 30,
+    background: 'linear-gradient(0deg,  0%,  100%), #2C2C2C',
+    borderRadius: 12,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    gap: 15,
+    display: 'inline-flex',
+  }}
+>
+  <img
+    style={{
+      width: 120,
+      height: 120,
+      paddingLeft: 0.41,
+      paddingRight: 0.41,
+      paddingTop: 0.51,
+      paddingBottom: 0.51,
+    }}
+    src="https://placehold.co/120x120"
+  />
+  <div
+    style={{
+      flex: '1 1 0',
+      alignSelf: 'stretch',
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      gap: 10,
+      display: 'inline-flex',
+    }}
+  >
+    <div
+      style={{
+        alignSelf: 'stretch',
+        color: '#EAEAEA',
+        fontSize: 20,
+        fontFamily: 'LG Smart UI',
+        fontWeight: '400',
+        lineHeight: 25,
+        wordWrap: 'break-word',
+      }}
+    >
+      Orlgami Removable Connecting Rack 2 -pack
+    </div>
+    <div
+      style={{
+        paddingTop: 1,
+        paddingBottom: 1,
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        gap: 5,
+        display: 'inline-flex',
+      }}
+    >
+      <div
+        style={{
+          color: '#C70850',
+          fontSize: 20,
+          fontFamily: 'LG Smart UI',
+          fontWeight: '700',
+          lineHeight: 16.67,
+          wordWrap: 'break-word',
+        }}
+      >
+        $32.98
+      </div>
+      <div
+        style={{
+          color: '#C2C2C2',
+          fontSize: 16,
+          fontFamily: 'LG Smart UI',
+          fontWeight: '400',
+          textDecoration: 'line-through',
+          lineHeight: 16.67,
+          wordWrap: 'break-word',
+        }}
+      >
+        $150.00
+      </div>
+    </div>
+    <div
+      style={{ justifyContent: 'flex-end', alignItems: 'flex-end', gap: 5, display: 'inline-flex' }}
+    >
+      <div style={{ width: 54, height: 30, position: 'relative', overflow: 'hidden' }}>
+        <div
+          style={{
+            width: 12.21,
+            height: 28.05,
+            left: 41.07,
+            top: 1.03,
+            position: 'absolute',
+            background: 'white',
+          }}
+        />
+        <div
+          style={{
+            width: 40.83,
+            height: 27.81,
+            left: 1.11,
+            top: 1.05,
+            position: 'absolute',
+            background: '#BFD730',
+          }}
+        />
+        <div
+          style={{
+            width: 51.71,
+            height: 28.23,
+            left: 1.18,
+            top: 0.84,
+            position: 'absolute',
+            outline: '1.37px #231F20 solid',
+            outlineOffset: '-0.68px',
+          }}
+        />
+        <div
+          style={{
+            width: 6.42,
+            height: 7.05,
+            left: 44.28,
+            top: 2.81,
+            position: 'absolute',
+            background: '#231F20',
+          }}
+        />
+        <div
+          style={{
+            width: 3.14,
+            height: 1.57,
+            left: 45.94,
+            top: 12.04,
+            position: 'absolute',
+            outline: '1.46px #231F20 solid',
+            outlineOffset: '-0.73px',
+          }}
+        />
+        <div
+          style={{
+            width: 5.44,
+            height: 7.12,
+            left: 44.77,
+            top: 19.99,
+            position: 'absolute',
+            background: '#231F20',
+          }}
+        />
+        <div style={{ width: 11.7, height: 13.88, left: 21.49, top: 8.02, position: 'absolute' }}>
+          <div
+            style={{
+              width: 8.95,
+              height: 13.52,
+              left: 1.37,
+              top: 0.18,
+              position: 'absolute',
+              background: 'white',
+              outline: '0.68px #231F20 solid',
+              outlineOffset: '-0.34px',
+            }}
+          />
+        </div>
+      </div>
+      <div style={{ width: 54, height: 30, position: 'relative', overflow: 'hidden' }}>
+        <div
+          style={{
+            width: 12.21,
+            height: 28.05,
+            left: 41.07,
+            top: 1.03,
+            position: 'absolute',
+            background: 'white',
+          }}
+        />
+        <div
+          style={{
+            width: 40.83,
+            height: 27.81,
+            left: 1.45,
+            top: 1.05,
+            position: 'absolute',
+            background: '#F37021',
+          }}
+        />
+        <div
+          style={{
+            width: 51.71,
+            height: 28.23,
+            left: 1.52,
+            top: 0.84,
+            position: 'absolute',
+            outline: '1.37px #231F20 solid',
+            outlineOffset: '-0.68px',
+          }}
+        />
+        <div
+          style={{
+            width: 6.42,
+            height: 7.05,
+            left: 44.62,
+            top: 2.81,
+            position: 'absolute',
+            background: '#231F20',
+          }}
+        />
+        <div
+          style={{
+            width: 3.14,
+            height: 1.57,
+            left: 46.28,
+            top: 12.04,
+            position: 'absolute',
+            outline: '1.46px #231F20 solid',
+            outlineOffset: '-0.73px',
+          }}
+        />
+        <div
+          style={{
+            width: 5.44,
+            height: 7.12,
+            left: 45.11,
+            top: 19.99,
+            position: 'absolute',
+            background: '#231F20',
+          }}
+        />
+        <div style={{ width: 11.7, height: 13.88, left: 21.49, top: 8.02, position: 'absolute' }}>
+          <div
+            style={{
+              width: 7.13,
+              height: 13.81,
+              left: 2.29,
+              top: 0.04,
+              position: 'absolute',
+              background: 'white',
+              outline: '0.68px #231F20 solid',
+              outlineOffset: '-0.34px',
+            }}
+          />
+        </div>
+      </div>
+      <div style={{ width: 54, height: 30, position: 'relative', overflow: 'hidden' }}>
+        <div
+          style={{
+            width: 12.21,
+            height: 28.05,
+            left: 41.07,
+            top: 1.03,
+            position: 'absolute',
+            background: 'white',
+          }}
+        />
+        <div
+          style={{
+            width: 40.83,
+            height: 27.81,
+            left: 1.45,
+            top: 1.05,
+            position: 'absolute',
+            background: '#00A651',
+          }}
+        />
+        <div
+          style={{
+            width: 51.71,
+            height: 28.23,
+            left: 1.52,
+            top: 0.84,
+            position: 'absolute',
+            outline: '1.37px #231F20 solid',
+            outlineOffset: '-0.68px',
+          }}
+        />
+        <div
+          style={{
+            width: 6.42,
+            height: 7.05,
+            left: 44.62,
+            top: 2.81,
+            position: 'absolute',
+            background: '#231F20',
+          }}
+        />
+        <div
+          style={{
+            width: 3.14,
+            height: 1.57,
+            left: 46.28,
+            top: 12.04,
+            position: 'absolute',
+            outline: '1.46px #231F20 solid',
+            outlineOffset: '-0.73px',
+          }}
+        />
+        <div
+          style={{
+            width: 5.44,
+            height: 7.12,
+            left: 45.11,
+            top: 19.99,
+            position: 'absolute',
+            background: '#231F20',
+          }}
+        />
+        <div
+          style={{
+            width: 11.7,
+            height: 13.88,
+            left: 21.49,
+            top: 8.01,
+            position: 'absolute',
+            background: 'white',
+            outline: '0.68px #231F20 solid',
+            outlineOffset: '-0.34px',
+          }}
+        />
+      </div>
+    </div>
+  </div>
+</div>;
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.jsx
new file mode 100644
index 00000000..8bcec792
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.jsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Spotlight from '@enact/spotlight';
+import Spottable from '@enact/spotlight/Spottable';
+import css from './ThemeItemCard.module.less';
+
+const SpottableDiv = Spottable('div');
+
+export default function ThemeItemCard({
+  prdtId,
+  prdtNm,
+  prdtImgPath,
+  salePrice,
+  originalPrice,
+  energyLabels,
+  onClick,
+  onFocus,
+  onMouseEnter,
+  onKeyDown,
+  spotlightId,
+  dataSpotlightDefault,
+  onFocused,
+}) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = (e) => {
+    setIsFocused(true);
+    onFocus?.(e);
+    onFocused?.(true);
+  };
+
+  const handleBlur = (e) => {
+    setIsFocused(false);
+    onFocused?.(false);
+  };
+
+  return (
+    <SpottableDiv
+      className={`${css.itemCard} ${isFocused ? css.focused : ''}`}
+      onClick={onClick}
+      spotlightId={spotlightId}
+      data-spotlight-default={dataSpotlightDefault}
+      onKeyDown={onKeyDown}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onMouseEnter={onMouseEnter}
+    >
+      <img src={prdtImgPath} alt={prdtId} className={css.itemImage} />
+      <div className={css.itemInfo}>
+        <div className={css.itemName}>{prdtNm}</div>
+        <div className={css.itemPrice}>
+          <span className={css.salePrice}>{salePrice}</span>
+          <span className={css.originalPrice}>{originalPrice}</span>
+        </div>
+        {energyLabels && energyLabels.length > 0 && (
+          <div className={css.energyLabels}>
+            {energyLabels.map((label, labelIndex) => (
+              <div key={labelIndex} className={css.energyLabel}>
+                {label}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </SpottableDiv>
+  );
+}
+
+ThemeItemCard.propTypes = {
+  prdtId: PropTypes.string,
+  prdtNm: PropTypes.string,
+  prdtImgPath: PropTypes.string,
+  salePrice: PropTypes.string,
+  originalPrice: PropTypes.string,
+  energyLabels: PropTypes.array,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onFocused: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  spotlightId: PropTypes.string,
+  dataSpotlightDefault: PropTypes.bool,
+};
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.module.less
new file mode 100644
index 00000000..69250365
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.module.less
@@ -0,0 +1,168 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.itemCard {
+  width: 470px;
+  height: 180px;
+  padding: 30px;
+  box-sizing: border-box;
+  background: linear-gradient(0deg, 0%, 100%), #2C2C2C;
+  border-radius: 12px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 15px;
+  display: flex;
+  flex-shrink: 0;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+  position: relative;
+
+  &.focused {
+    outline: 4px solid @PRIMARY_COLOR_RED;
+    outline-offset: -4px;
+  }
+
+  &:focus,
+  &:global(.spotlight) {
+    outline: 4px solid @PRIMARY_COLOR_RED;
+    outline-offset: -4px;
+    z-index: 2;
+  }
+}
+
+.itemImage {
+  width: 120px;
+  height: 120px;
+  padding-left: 0.41px;
+  padding-right: 0.41px;
+  padding-top: 0.51px;
+  padding-bottom: 0.51px;
+  flex-shrink: 0;
+}
+
+.itemInfo {
+  flex: 1 1 0;
+  align-self: stretch;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 10px;
+  display: inline-flex;
+}
+
+.itemName {
+  align-self: stretch;
+  color: #EAEAEA;
+  font-size: 20px;
+  font-family: @baseFont;
+  font-weight: 400;
+  line-height: 25px;
+  word-wrap: break-word;
+}
+
+.itemPrice {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 5px;
+  display: inline-flex;
+}
+
+.salePrice {
+  color: #C70850;
+  font-size: 20px;
+  font-family: @baseFont;
+  font-weight: 700;
+  line-height: 16.67;
+  word-wrap: break-word;
+}
+
+.originalPrice {
+  color: #C2C2C2;
+  font-size: 16px;
+  font-family: @baseFont;
+  font-weight: 400;
+  text-decoration: line-through;
+  line-height: 16.67;
+  word-wrap: break-word;
+}
+
+.energyLabels {
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 5px;
+  display: inline-flex;
+}
+
+.energyLabel {
+  width: 54px;
+  height: 30px;
+  position: relative;
+  overflow: hidden;
+}
+
+// Button 스타일 (기존)
+.themeItemCard {
+  align-self: stretch;
+  height: 60px;
+  background: rgba(255, 255, 255, 0.05); // 기본 회색 배경
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  overflow: hidden;
+  cursor: pointer;
+
+  &:focus {
+    background: @PRIMARY_COLOR_RED; // 포커스시만 빨간색
+  }
+
+  &.active {
+    border: 4px solid #4f172c;
+    background: #4f172c;
+  }
+
+  // 내부 콘텐츠 컨테이너
+  .themeItemCardContent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;                // 텍스트와 아이콘 사이 간격
+    width: 100%;
+  }
+
+  // 텍스트 스타일
+  .themeItemCardText {
+    color: white;
+    font-size: 25px;
+    font-family: 'LG Smart UI';
+    font-weight: 400;            // Regular (Bold가 아님)
+    line-height: 35;
+    white-space: nowrap;
+    flex: 1;                    // 남은 공간 차지
+    text-align: center;
+  }
+
+  // 아이콘 스타일
+  .themeItemCardIcon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 26.25px;
+    height: 15.63px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+}
\ No newline at end of file