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 4a2674c4..f60c6ec3 100644 --- a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx +++ b/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 }); 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 1c064286..4531e541 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,8 +32,8 @@ .itemsWrapper { width: 100%; - height: 200px; - padding: 5px; + height: 220px; + 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; 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 80580af6..543a49db 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: 340px; + width: 470px; height: 180px; padding: 30px; box-sizing: border-box;