diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.figma.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.figma.jsx new file mode 100644 index 00000000..ead8f635 --- /dev/null +++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.figma.jsx @@ -0,0 +1,958 @@ +
+
+
+ THEME ITEM +
+
+
+
+
+ +
+
+ Orlgami Removable Connecting Rack 2 -pack +
+
+
+ $32.98 +
+
+ $150.00 +
+
+
+
+
+ +
+
+ Orlgami Removable Connecting Rack 2 -pack +
+
+
+ $32.98 +
+
+ $150.00 +
+
+
+
+
+ +
+
+ Orlgami Removable Connecting Rack 2 -pack +
+
+
+ $32.98 +
+
+ $150.00 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ Orlgami Removable Connecting Rack 2 -pack +
+
+
+ $32.98 +
+
+ $150.00 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ Orlgami Removable Connecting Rack 2 -pack +
+
+
+ $32.98 +
+
+ $150.00 +
+
+
+
+
+
; diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx similarity index 75% rename from com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.jsx rename to com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx index 85b1679f..0045f074 100644 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.jsx +++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.jsx @@ -4,13 +4,16 @@ import { useDispatch } from 'react-redux'; import Spotlight from '@enact/spotlight'; -import { updatePanel } from '../../../../actions/panelActions'; -import TVirtualGridList from '../../../../components/TVirtualGridList/TVirtualGridList'; -import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../../../utils/Config'; -import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard'; -import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContents'; +import arrowDownIcon from '../../../../assets/images/icons/ic-arrow-down.svg'; +import { updatePanel } from '../../../actions/panelActions'; +import TButton from '../../../components/TButton/TButton'; +import TVirtualGridList from '../../../components/TVirtualGridList/TVirtualGridList'; +import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../../utils/Config'; +import { $L } from '../../../utils/helperMethods'; +import PlayerItemCard, { TYPES } from '../../PlayerPanel/PlayerItemCard/PlayerItemCard'; +import ListEmptyContents from '../../PlayerPanel/PlayerTabContents/TabContents/ListEmptyContents/ListEmptyContents'; import css from './ThemeContents.module.less'; -import { sendLogTotalRecommend } from '../../../../actions/logActions'; +import { sendLogTotalRecommend } from '../../../actions/logActions'; export default function ThemeContents({ themeItems, @@ -23,11 +26,18 @@ export default function ThemeContents({ panelInfo, direction = 'horizontal', version = 2, + onThemeItemClose, }) { const dispatch = useDispatch(); const isClickBlocked = useRef(false); const blockTimeoutRef = useRef(null); + const handleThemeItemButtonClick = useCallback(() => { + if (onThemeItemClose) { + onThemeItemClose(); + } + }, [onThemeItemClose]); + const handleFocus = useCallback( () => () => { if (handleItemFocus) { @@ -133,7 +143,18 @@ export default function ThemeContents({ /> ); }, - [themeItems, currentVideoShowId, isClickBlocked, dispatch, handleFocus, version, tabIndex, tabTitle, panelInfo, setSelectedIndex] + [ + themeItems, + currentVideoShowId, + isClickBlocked, + dispatch, + handleFocus, + version, + tabIndex, + tabTitle, + panelInfo, + setSelectedIndex, + ] ); // cleanup useEffect @@ -162,6 +183,16 @@ export default function ThemeContents({ )}
+
+ +
{$L('THEME ITEM')}
+ + +
); } 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 new file mode 100644 index 00000000..e82e30e5 --- /dev/null +++ b/com.twin.app.shoptime/src/views/DetailPanel/ThemeProduct/ThemeContents.module.less @@ -0,0 +1,96 @@ +@import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; + +.container { + width: 100%; + height: 180px; + + > div:nth-child(1) { + .size(@w: 100%, @h: 100%); + } +} + +.themeList { + width: 100%; + .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start); + overflow-x: auto; + overflow-y: hidden; + + > * + * { + margin-left: 18px; + } +} + +// Theme Item Button 스타일 +.bottomButtonWrapper { + width: 100%; + height: 60px; + padding: 0; + margin-top: 10px; + display: flex; + justify-content: flex-start; + align-items: center; +} + +.themeButton { + width: 100% !important; + height: 60px !important; + padding: 20px 30px !important; + background: rgba(255, 255, 255, 0.05) !important; + overflow: visible !important; + border-radius: 6px !important; + border: none !important; + justify-content: center !important; + align-items: center !important; + display: flex !important; + flex-direction: row !important; + white-space: nowrap !important; + caret-color: transparent !important; + user-select: none !important; + -webkit-user-select: none !important; + + color: white !important; + font-size: 25px !important; + font-family: @baseFont !important; + font-weight: 600 !important; + line-height: 35px !important; + word-wrap: break-word !important; + + > * { + display: flex !important; + flex-direction: row !important; + align-items: center !important; + justify-content: center !important; + gap: 15px !important; + width: auto !important; + height: auto !important; + caret-color: transparent !important; + user-select: none !important; + -webkit-user-select: none !important; + + > * { + display: inline !important; + margin: 0 !important; + caret-color: transparent !important; + user-select: none !important; + -webkit-user-select: none !important; + } + } + + &:focus { + background: @PRIMARY_COLOR_RED !important; + outline: none !important; + caret-color: transparent !important; + } + + &:hover { + background: @PRIMARY_COLOR_RED !important; + } +} + +.themeButtonIcon { + width: 52.5px; + height: 31.25px; + object-fit: contain; + flex-shrink: 0; +} diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.figma.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.figma.jsx deleted file mode 100644 index e69de29b..00000000 diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.module.less deleted file mode 100644 index 7b73b403..00000000 --- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ThemeContents.module.less +++ /dev/null @@ -1,22 +0,0 @@ -@import "../../../../style/CommonStyle.module.less"; -@import "../../../../style/utils.module.less"; - -.container { - width: 100%; - height: 180px; - - > div:nth-child(1) { - .size(@w: 100%, @h: 100%); - } -} - -.themeList { - width: 100%; - .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start); - overflow-x: auto; - overflow-y: hidden; - - > * + * { - margin-left: 18px; - } -}