[251123] fix: DetailPanel ThemeContent-3

🕐 커밋 시간: 2025. 11. 23. 12:25:57

📊 변경 통계:
  • 총 파일: 4개
  • 추가: +24줄
  • 삭제: -112줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/TToast/TToastEnhanced.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/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):
    ❌ Deleted: gradient(), global()
  📄 com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.module.less (unknown):
    ✅ Added: position(), global()
    ❌ Deleted: global()

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선

Performance: 코드 최적화로 성능 개선 기대

com.twin.app.shoptime/src/components/TToast/TToastEnhanced.module.less

@@ -120,7 +120,7 @@
   max-height: 80vh;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.53) 0%, rgba(20.56, 4.68, 32.71, 0.53) 60%, rgba(199, 32, 84, 0) 98%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 45%, rgba(0, 0, 0, 0.40) 100%), rgba(30, 30, 30, 0.80);
   border-radius: 12px;
-  overflow: hidden;
+  overflow: visible; // 포커스 테두리가 잘리지 않도록
 }
 
 // 컨텐츠 스타일 - 간단한 메시지만

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { useDispatch } from 'react-redux';
 
@@ -36,7 +36,7 @@ const ButtonContainer = SpotlightContainerDecorator(
 
 const ItemsContainer = SpotlightContainerDecorator(
   {
-    enterTo: 'last-focused',
+    enterTo: 'default-element',
     preserveId: true,
     spotlightDirection: 'horizontal',
   },

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

@@ -32,7 +32,8 @@
 
 .itemsWrapper {
   width: 100%;
-  height: 180px;
+  height: 200px;
+  padding: 5px;
   display: inline-flex;
   flex-direction: row;
   gap: 18px;
@@ -40,7 +41,7 @@
   align-items: center;
   flex-wrap: nowrap;
   overflow-x: auto;
-  overflow-y: visible; // 포커스 테두리 보존
+  overflow-y: hidden;
   flex-shrink: 0;
   scrollbar-width: none; // Firefox 스크롤바 숨김
 
@@ -49,102 +50,6 @@
   }
 }
 
-.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;
-
-  &:focus,
-  &:global(.spotlight) {
-    box-shadow: 0 0 0 4px @PRIMARY_COLOR_RED;
-    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;
-}
-
 .container {
   width: 100%;
   height: 180px;

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

@@ -2,7 +2,7 @@
 @import "../../../style/utils.module.less";
 
 .itemCard {
-  width: 470px;
+  width: 340px;
   height: 180px;
   padding: 30px;
   box-sizing: border-box;
@@ -17,17 +17,24 @@
   outline: none;
   transition: all 0.2s ease;
   position: relative;
+  overflow: visible; // 포커스 테두리 노출
 
-  &.focused {
+  // LiveChannel 카드와 유사하게 포커스 테두리를 pseudo-element로 표시
-    outline: 4px solid @PRIMARY_COLOR_RED;
+  &::after {
-    outline-offset: -4px;
+    .position(@position: absolute, @top: -4px, @right: -4px, @bottom: -4px, @left: -4px);
+    content: '';
+    border: 4px solid @PRIMARY_COLOR_RED;
+    border-radius: 12px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    z-index: 2;
   }
 
-  &:focus,
+  &.focused::after,
-  &:global(.spotlight) {
+  &:focus::after,
-    outline: 4px solid @PRIMARY_COLOR_RED;
+  &:global(.spotlight)::after {
-    outline-offset: -4px;
+    opacity: 1;
-    z-index: 2;
   }
 }
 
@@ -165,4 +172,4 @@
       object-fit: contain;
     }
   }
-}
+}