diff --git a/com.twin.app.shoptime/src/components/TToast/TToastEnhanced.module.less b/com.twin.app.shoptime/src/components/TToast/TToastEnhanced.module.less index d9e8291a..11d38c96 100644 --- a/com.twin.app.shoptime/src/components/TToast/TToastEnhanced.module.less +++ b/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; // 포커스 테두리가 잘리지 않도록 } // 컨텐츠 스타일 - 간단한 메시지만 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 9897c544..4a2674c4 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx +++ b/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', }, 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 61d4c7fb..1c064286 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 @@ -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; 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 index 69250365..80580af6 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeItemCard.module.less +++ b/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 { - outline: 4px solid @PRIMARY_COLOR_RED; - outline-offset: -4px; + // LiveChannel 카드와 유사하게 포커스 테두리를 pseudo-element로 표시 + &::after { + .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, - &:global(.spotlight) { - outline: 4px solid @PRIMARY_COLOR_RED; - outline-offset: -4px; - z-index: 2; + &.focused::after, + &:focus::after, + &:global(.spotlight)::after { + opacity: 1; } } @@ -165,4 +172,4 @@ object-fit: contain; } } -} \ No newline at end of file +}