From 464adc39a33e8d9895165dcacb2e96bbcc52b96c Mon Sep 17 00:00:00 2001 From: optrader Date: Sun, 23 Nov 2025 12:25:58 +0900 Subject: [PATCH] [251123] fix: DetailPanel ThemeContent-3 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit πŸ• 컀밋 μ‹œκ°„: 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: μ½”λ“œ μ΅œμ ν™”λ‘œ μ„±λŠ₯ κ°œμ„  κΈ°λŒ€ --- .../TToast/TToastEnhanced.module.less | 2 +- .../ThemeProduct/ThemeContents.jsx | 4 +- .../ThemeProduct/ThemeContents.module.less | 101 +----------------- .../ThemeProduct/ThemeItemCard.module.less | 27 +++-- 4 files changed, 23 insertions(+), 111 deletions(-) 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 +}