[251123] fix: DetailPanel ThemeContent-4

🕐 커밋 시간: 2025. 11. 23. 12:30:59

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +19줄
  • 삭제: -7줄

📝 수정된 파일:
  ~ 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/ThemeItemCard.module.less

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

com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx

@@ -20,7 +20,6 @@ const Container = SpotlightContainerDecorator(
     preserveId: true,
     spotlightDirection: 'vertical', // THEME ITEM 버튼 -> 리스트(아래) 이동
     spotlightRestrict: 'self-only',
-    leaveFor: {}, // arrow key로 빠져나가지 않도록 설정
   },
   'div'
 );
@@ -246,7 +245,12 @@ export default function ThemeContents({
 
     // THEME ITEM 버튼과 첫 번째 아이템 연결
     Spotlight.set('theme-contents-close-button', {
-      next: { down: firstItemId },
+      next: {
+        down: firstItemId,
+        up: 'theme-contents-close-button',
+        left: 'theme-contents-close-button',
+        right: 'theme-contents-close-button',
+      },
     });
 
     // 모든 아이템의 위/아래/좌/우 네비게이션 설정
@@ -257,13 +261,19 @@ export default function ThemeContents({
 
       const nextConfig = {
         up: 'theme-contents-close-button',
+        down: itemId,
       };
 
       if (nextItemId) {
         nextConfig.right = nextItemId;
+      } else {
+        nextConfig.right = itemId;
       }
+
       if (prevItemId) {
         nextConfig.left = prevItemId;
+      } else {
+        nextConfig.left = itemId;
       }
 
       Spotlight.set(itemId, { next: nextConfig });

com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.module.less

@@ -32,8 +32,8 @@
 
 .itemsWrapper {
   width: 100%;
-  height: 200px;
+  height: 220px;
-  padding: 5px;
+  padding: 20px;
   display: inline-flex;
   flex-direction: row;
   gap: 18px;
@@ -85,7 +85,7 @@
   width: 635px !important;
   height: 60px !important;
   padding: 20px 30px !important;
-  background: #c72054 !important;
+  background: rgba(255, 255, 255, 0.1) !important;
   overflow: visible !important;
   border-radius: 6px !important;
   border: none !important;
@@ -97,6 +97,7 @@
   caret-color: transparent !important;
   user-select: none !important;
   -webkit-user-select: none !important;
+  transition: background 0.2s ease !important;
 
   color: white !important;
   font-size: 25px !important;
@@ -126,7 +127,8 @@
     }
   }
 
-  &:focus {
+  &:focus,
+  &:global(.spotlight) {
     background: @PRIMARY_COLOR_RED !important;
     outline: none !important;
     caret-color: transparent !important;

com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.module.less

@@ -2,7 +2,7 @@
 @import "../../../style/utils.module.less";
 
 .itemCard {
-  width: 340px;
+  width: 470px;
   height: 180px;
   padding: 30px;
   box-sizing: border-box;