diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
index 3be99ce1..09f6e37e 100644
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
@@ -13,7 +13,8 @@ import IcLiveShow from "../../../assets/images/tag/tag-liveshow.png";
import usePriceInfo from "../../hooks/usePriceInfo";
import { $L, removeSpecificTags } from "../../utils/helperMethods";
import CustomImage from "../CustomImage/CustomImage";
-import css from "./TItemCard.module.less";
+import css1 from "./TItemCard.module.less";
+import css2 from "./TItemCard.v2.module.less";
import { sendLogTotalRecommend } from "../../actions/logActions";
const SpottableComponent = Spottable("div");
@@ -81,8 +82,10 @@ export default memo(function TItemCard({
nowCategory,
nowProductTitle,
contentId,
+ version = 1,
...rest
}) {
+ const css = version === 2 ? css2 : css1;
const dispatch = useDispatch();
const [defaultImage, setDefaultImage] = useState(null);
const countryCode = useSelector((state) => state.common.httpHeader.cntry_cd);
diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.v2.module.less b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.v2.module.less
new file mode 100644
index 00000000..9d88e9bc
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.v2.module.less
@@ -0,0 +1,140 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+// horizontal type for v2 (ShopNowItem.module.less 스타일 적용, TItemCard.jsx 클래스명 구조 유지)
+.horizontal {
+ width: 310px;
+ padding: 18px;
+ background: rgba(51, 51, 51, 0.95);
+ border-radius: 12px;
+ border: 1px solid transparent;
+ .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start, @direction: column);
+ gap: 15px;
+ flex-shrink: 0;
+ transition: all 0.3s ease;
+
+ .imageWrap {
+ align-self: stretch;
+ height: 274px;
+ padding: 5px 4px;
+ position: relative;
+
+ > img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+
+ // discount rate
+ > span {
+ .position(@position: absolute, @right: 12px, @bottom: 12px);
+ .size(@w: 60px, @h: 60px);
+ border-radius: 60px;
+ background-color: @PRIMARY_COLOR_RED;
+ font-size: 26px;
+ font-weight: 600;
+ text-align: center;
+ line-height: 60px;
+ color: @COLOR_WHITE;
+ }
+
+ // sold out
+ .soldout {
+ .position(@position: absolute, @top: 0, @right: 0);
+ .flex();
+ .size(@w: 100%, @h: 100%);
+ background-color: rgba(26, 26, 26, 0.6);
+ font-weight: bold;
+ font-size: 24px;
+ color: @COLOR_WHITE;
+ }
+ }
+
+ .descWrap {
+ align-self: stretch;
+ .flex(@display: flex, @justifyCenter: center, @alignCenter: flex-start, @direction: column);
+ gap: 15px;
+
+ .logo {
+ width: 60px;
+ height: 60px;
+ > img {
+ width: 60px;
+ min-height: 60px;
+ }
+ }
+
+ .title {
+ align-self: stretch;
+
+ .productNameTitle {
+ align-self: stretch;
+ color: #EAEAEA;
+ font-size: 24px;
+ font-family: @baseFont;
+ font-weight: 700;
+ line-height: 31px;
+ word-wrap: break-word;
+ .elip(@clamp: 2);
+ }
+ }
+
+ .priceInfo {
+ align-self: stretch;
+ .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: center);
+ gap: 11px;
+ font-weight: 700;
+ font-size: 30px;
+ color: @PRIMARY_COLOR_RED;
+ font-family: @baseFont;
+ line-height: 35px;
+ word-wrap: break-word;
+
+ > span {
+ color: #808080;
+ font-size: 24px;
+ font-family: @baseFont;
+ font-weight: 400;
+ text-decoration: line-through;
+ line-height: 18px;
+ word-wrap: break-word;
+ }
+
+ > strong {
+ color: @PRIMARY_COLOR_RED;
+ font-size: 30px;
+ font-family: @baseFont;
+ font-weight: 700;
+ line-height: 35px;
+ }
+ }
+
+ .offerInfo {
+ align-self: stretch;
+ color: @PRIMARY_COLOR_RED;
+ font-size: 30px;
+ font-family: @baseFont;
+ font-weight: 700;
+ line-height: 35px;
+ word-wrap: break-word;
+ }
+ }
+
+ &:focus {
+ border-color: @PRIMARY_COLOR_RED;
+ outline: 4px @PRIMARY_COLOR_RED solid;
+ outline-offset: -4px;
+
+ &::after {
+ .focused(@boxShadow: 22px, @borderRadius: 12px);
+ }
+ }
+}
+
+// vertical type (v2에서는 사용하지 않음)
+.vertical {
+}
+
+// videoShow type (v2에서는 사용하지 않음)
+.videoShow {
+}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
index 4d451d1b..276f8927 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.jsx
@@ -55,9 +55,10 @@ import PlayerOverlayQRCode from './PlayerOverlay/PlayerOverlayQRCode';
import css from './PlayerPanel.module.less';
import PlayerTabButton from './PlayerTabContents/TabButton/PlayerTabButton';
import TabContainer from './PlayerTabContents/TabContainer';
-import LiveShowContainer from './PlayerTabContents/v2/LiveShowContainer';
-import ShopNowContainer from './PlayerTabContents/v2/ShopNowContainer';
-import ShopNowButton from './PlayerTabContents/v2/ShopNowButton';
+import TabContainerV2 from './PlayerTabContents/v2/TabContainer.v2';
+// import LiveShowContainer from './PlayerTabContents/v2/LiveShowContainer';
+// import ShopNowContainer from './PlayerTabContents/v2/ShopNowContainer';
+// import ShopNowButton from './PlayerTabContents/v2/ShopNowButton';
const Container = SpotlightContainerDecorator(
{ enterTo: 'default-element', preserveld: true },
@@ -203,6 +204,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
});
const [isVODPaused, setIsVODPaused] = USE_STATE('isVODPaused', false);
const [belowTabMode, setBelowTabMode] = USE_STATE('belowTabMode', 'liveShow');
+ const [tabIndexV2, setTabIndexV2] = USE_STATE('tabIndexV2', 1); // 0: ShopNow, 1: LiveChannel, 2: ShopNowButton
const panels = USE_SELECTOR('panels', (state) => state.panels.panels);
const chatData = USE_SELECTOR('chatData', (state) => state.play.chatData);
@@ -2076,7 +2078,7 @@ const PlayerPanel = ({ isTabActivated, panelInfo, isOnTop, spotlightId, ...props
/>
)}
- {shouldShowBelowTab && (
+ {/* {shouldShowBelowTab && (
<>
{belowTabMode === 'liveShow' && (
)}
>
+ )} */}
+
+ {shouldShowBelowTab && (
+ setTabIndexV2(0)}
+ onLiveChannelButtonClick={() => setTabIndexV2(2)}
+ />
)}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
index 40f3195f..1bc418c0 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.jsx
@@ -142,9 +142,9 @@ export default function LiveChannelContents({
dataSize={liveInfos.length}
direction={direction}
renderItem={renderItem}
- itemWidth={version === 2 ? 280 : videoVerticalVisible ? 540 : 600}
- itemHeight={version === 2 ? 78 : 236}
- spacing={12}
+ itemWidth={version === 2 ? 470 : videoVerticalVisible ? 540 : 600}
+ itemHeight={version === 2 ? 155 : 236}
+ spacing={version === 2 ? 30 : 12}
noScrollByWheel={false}
/>
) : (
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.v2.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.v2.module.less
index 7946b9d5..b59d08f1 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.v2.module.less
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/LiveChannelContents.v2.module.less
@@ -3,7 +3,7 @@
.container {
width: 100%;
- height: 175px;
+ height: 155px;
> div:nth-child(1) {
.size(@w: 100%, @h: 100%);
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
index 885aa3c0..a2de1f68 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.jsx
@@ -22,7 +22,8 @@ import useScrollTo from "../../../../hooks/useScrollTo";
import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from "../../../../utils/Config";
import { scaleH } from "../../../../utils/helperMethods";
import ListEmptyContents from "../TabContents/ListEmptyContents/ListEmptyContents";
-import css from "./ShopNowContents.module.less";
+import css1 from "./ShopNowContents.module.less";
+import cssV2 from "./ShopNowContents.v2.module.less";
import { sendLogTotalRecommend } from "../../../../actions/logActions";
@@ -49,8 +50,11 @@ export default function ShopNowContents({
tabIndex,
handleItemFocus,
panelInfo,
- tabTitle
+ tabTitle,
+ version = 1,
+ direction = "vertical"
}) {
+ const css = version === 2 ? cssV2 : css1;
const { getScrollTo, scrollTop } = useScrollTo();
const dispatch = useDispatch();
const paenls = useSelector((state) => state.panels.panels[1]?.panelInfo);
@@ -175,10 +179,11 @@ export default function ShopNowContents({
onClick={handleItemClick}
onFocus={handleFocus()}
type={TYPES.horizontal}
+ version={version}
/>
);
},
- [shopNowInfo, videoVerticalVisible, panelInfo?.shptmBanrTpNm, priceInfoMap, tabTitle, tabIndex, playListInfo, dispatch]
+ [shopNowInfo, videoVerticalVisible, panelInfo?.shptmBanrTpNm, priceInfoMap, tabTitle, tabIndex, playListInfo, dispatch, version]
);
return (
@@ -189,11 +194,11 @@ export default function ShopNowContents({
style={gridStyle}
cbScrollTo={getScrollTo}
dataSize={shopNowInfo.length}
- direction="vertical"
+ direction={direction}
renderItem={renderItem}
- itemWidth={videoVerticalVisible ? 540 : 600}
- itemHeight={236}
- spacing={12}
+ itemWidth={version === 2 ? 310 : (videoVerticalVisible ? 540 : 600)}
+ itemHeight={version === 2 ? 420 : 236}
+ spacing={version === 2 ? 30 : 12}
className={
videoVerticalVisible ? css.verticalItemList : css.itemList
}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.v2.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.v2.module.less
new file mode 100644
index 00000000..2e44e0fa
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/ShopNowContents.v2.module.less
@@ -0,0 +1,52 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+ width: 100%;
+ height: 420px;
+ overflow: hidden;
+
+ > div:nth-child(1) {
+ .size(@w: 100%, @h: 100%);
+ }
+}
+
+.itemList {
+ width: 100%;
+ overflow: hidden;
+
+ > div {
+ > div {
+ > div {
+ > div {
+ > div {
+ .size(@w: 310px, @h: 420px);
+ > div:nth-child(1) {
+ flex: 1 0 auto;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.verticalItemList {
+ width: 100%;
+ overflow: hidden;
+
+ > div {
+ > div {
+ > div {
+ > div {
+ > div {
+ .size(@w: 310px, @h: 420px);
+ > div:nth-child(1) {
+ flex: 1 0 auto;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.jsx
index a3d9c008..dd3d5b6c 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.jsx
@@ -7,13 +7,17 @@ import TItemCard, { TYPES } from "../../../../components/TItemCard/TItemCard";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import { LOG_MENU, panel_names } from "../../../../utils/Config";
import { $L, scaleH } from "../../../../utils/helperMethods";
-import css from "./YouMayLikeContents.module.less";
+import css1 from "./YouMayLikeContents.module.less";
+import cssV2 from "./YouMayLikeContents.v2.module.less";
export default function YouMayLikeContents({
shopNowInfo,
handleItemFocus,
playListInfo,
+ version = 1,
+ direction = "vertical"
}) {
+ const css = version === 2 ? cssV2 : css1;
const dispatch = useDispatch();
const [height, setHeight] = useState(scaleH(236));
const youmaylikeInfos = useSelector((state) => state.main.youmaylikeInfos);
@@ -72,10 +76,11 @@ export default function YouMayLikeContents({
onClick={handleItemClick}
onFocus={handleFocus()}
type={TYPES.horizontal}
+ version={version}
/>
);
},
- [youmaylikeInfos]
+ [youmaylikeInfos, version, handleFocus, dispatch, playListInfo]
);
return (
@@ -88,11 +93,11 @@ export default function YouMayLikeContents({
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.v2.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.v2.module.less
new file mode 100644
index 00000000..ff5cc17b
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/YouMayLikeContents.v2.module.less
@@ -0,0 +1,37 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.title {
+ color: #EAEAEA;
+ font-size: 30px;
+ font-weight: 700;
+ margin-top: 40px;
+ margin-bottom: 20px;
+}
+
+.line {
+ .size(@w: 100%, @h: 1px);
+ opacity: 0.3;
+ background-color: #d9d9d9;
+ margin-bottom: 24px;
+}
+
+.itemList {
+ width: 100%;
+ overflow: hidden;
+
+ > div {
+ > div {
+ > div {
+ > div {
+ > div {
+ .size(@w: 310px, @h: 420px);
+ > div:nth-child(1) {
+ flex: 1 0 auto;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx
new file mode 100644
index 00000000..c2889548
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.jsx
@@ -0,0 +1,156 @@
+import React, { useCallback, useEffect } from "react";
+
+import classNames from "classnames";
+
+import Spotlight from "@enact/spotlight";
+import Spottable from "@enact/spotlight/Spottable";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
+import { LOG_MENU } from "../../../../utils/Config";
+import css from "./TabContainer.v2.module.less";
+import LiveChannelContents from "../TabContents/LiveChannelContents";
+import ShopNowContents from "../TabContents/ShopNowContents";
+import YouMayLikeContents from "../TabContents/YouMayLikeContents";
+import ShopNowButton from "./ShopNowButton";
+import icon_arrow_dwon from "../../../../../assets/images/player/icon_tabcontainer_arrow_down.png";
+import icon_shop_now from "../../../../../assets/images/player/icon_tabcontainer_shopnow.png";
+
+const Container = SpotlightContainerDecorator(
+ { enterTo: "last-focused" },
+ "div"
+);
+
+const SpottableDiv = Spottable("div");
+
+export default function TabContainerV2({
+ panelInfo,
+ playListInfo,
+ shopNowInfo,
+ selectedIndex,
+ setSelectedIndex,
+ liveChannelInfos,
+ videoVerticalVisible,
+ handleItemFocus,
+ prevChannelIndex,
+ currentTime,
+ spotlightId,
+ tabIndex = 1, // tabIndex prop으로 제어 (0: ShopNow, 1: LiveChannel, 2: ShopNowButton)
+ onShopNowButtonClick,
+ onLiveChannelButtonClick,
+}) {
+ useEffect(() => {
+ let nowMenu;
+
+ if (tabIndex === 0) {
+ nowMenu = LOG_MENU.FULL_SHOP_NOW;
+ }
+
+ if (tabIndex === 1) {
+ const isLive = panelInfo?.shptmBanrTpNm === "LIVE";
+ nowMenu = isLive
+ ? LOG_MENU.FULL_LIVE_CHANNELS
+ : LOG_MENU.FULL_FEATURED_SHOWS;
+ }
+
+ if (nowMenu) {
+ handleItemFocus(nowMenu);
+ }
+ }, [handleItemFocus, panelInfo?.shptmBanrTpNm, tabIndex]);
+
+ const _handleItemFocus = useCallback(
+ (nowMenu) => {
+ if (handleItemFocus) {
+ handleItemFocus(nowMenu);
+ }
+ },
+ [handleItemFocus]
+ );
+
+ const onSpotlightIndicatorUpButton = useCallback(
+ (e) => {
+ if (videoVerticalVisible) {
+ e.stopPropagation();
+ e.preventDefault();
+ Spotlight.focus("spotlightId-video-contaienr");
+ }
+ },
+ [videoVerticalVisible]
+ );
+
+ return (
+
+ {tabIndex === 0 && (
+ <>
+
+
+

+
+
SHOP NOW
+
+
+ >
+ )}
+
+ {tabIndex === 1 && (
+ <>
+
+ LIVE CHANNEL
+
+

+
+
+
+ {panelInfo?.shptmBanrTpNm === "LIVE" && playListInfo && (
+
+ )}
+ >
+ )}
+
+ {tabIndex === 2 && (
+
+ )}
+
+ {shopNowInfo && shopNowInfo.length < 3 && tabIndex === 0 && (
+
+ )}
+
+ );
+}
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less
new file mode 100644
index 00000000..370f0430
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/v2/TabContainer.v2.module.less
@@ -0,0 +1,140 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.tabContainer {
+ .position(@position: fixed, @bottom: 0, @left: 0);
+ .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: flex-start, @direction: column);
+ overflow: hidden;
+ z-index: 5;
+
+ // tabIndex = 0: ShopNow 스타일 (ShopNowContainer 참고)
+ &.tabIndex0 {
+ .size(@w: 100%, @h: 675px);
+ padding: 60px;
+ background: linear-gradient(270deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.62) 30%, rgba(0, 0, 0, 0) 65%),
+ 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%, black 45%, black 100%),
+ rgba(0, 0, 0, 0.56);
+ border-top: 1px solid rgba(234, 234, 234, 0.8);
+ gap: 40px;
+ }
+
+ // tabIndex = 1: LiveShow 스타일 (LiveShowContainer 참고)
+ &.tabIndex1 {
+ .size(@w: 100%, @h: 365px);
+ padding: 60px;
+ background: linear-gradient(
+ to top,
+ rgba(0, 0, 0, 0.95) 0%,
+ rgba(0, 0, 0, 0.85) 40%,
+ rgba(0, 0, 0, 0.6) 70%,
+ rgba(0, 0, 0, 0) 100%
+ );
+ border-top: 1px solid rgba(234, 234, 234, 0.3);
+ gap: 20px;
+
+ &::before {
+ content: "";
+ .position(@position: absolute, @top: 0, @left: 0);
+ .size(@w: 100%, @h: 100%);
+ background: linear-gradient(
+ 90deg,
+ rgba(30, 30, 30, 0.4) 0%,
+ rgba(50, 50, 50, 0.25) 30%,
+ transparent 50%,
+ rgba(50, 50, 50, 0.25) 70%,
+ rgba(30, 30, 30, 0.4) 100%
+ );
+ pointer-events: none;
+ z-index: -1;
+ }
+ }
+
+ // tabIndex = 2: ShopNowButton만 (특별한 컨테이너 스타일 없음)
+ &.tabIndex2 {
+ background: transparent;
+ border: none;
+ }
+
+ &.vertical {
+ // vertical 모드일 때 추가 스타일 (필요시)
+ }
+}
+
+// SHOP NOW 헤더 스타일 (ShopNowContainer 참고)
+.shopNowHeader {
+ width: 300px;
+ height: 70px;
+ padding: 20px 0;
+ overflow: hidden;
+ border-radius: 100px;
+ .flex(@display: flex, @justifyCenter: flex-start, @alignCenter: center);
+ gap: 15px;
+}
+
+.shopNowIconWrapper {
+ .size(@w: 40px, @h: 40px);
+ .position(@position: relative);
+ background: white;
+ border-radius: 100px;
+ .flex(@display: flex, @justifyCenter: center, @alignCenter: center);
+}
+
+.shopNowIcon {
+ .size(@w: 20.67px, @h: 20.67px);
+ object-fit: contain;
+}
+
+.shopNowHeaderText {
+ color: #EAEAEA;
+ font-size: 24px;
+ font-family: @baseFont;
+ font-weight: 700;
+ line-height: 31px;
+ word-wrap: break-word;
+}
+
+// LIVE CHANNEL 버튼 스타일 (LiveShowContainer 참고)
+.liveChannelButton {
+ .size(@w: 300px, @h: 70px);
+ padding: 20px 30px;
+ border-radius: 100px;
+ border: 1px solid rgba(234, 234, 234, 0.5);
+ overflow: hidden;
+ .flex(@display: flex, @justifyCenter: space-between, @alignCenter: center);
+ background: rgba(0, 0, 0, 0.3);
+ backdrop-filter: blur(5px);
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ .buttonText {
+ color: @COLOR_WHITE;
+ font-size: 24px;
+ font-family: @baseFont;
+ font-weight: 600;
+ line-height: 35px;
+ }
+
+ .arrowIcon {
+ .size(@w: 26.25px, @h: 15.63px);
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.5);
+ border-color: rgba(234, 234, 234, 0.7);
+ }
+
+ &:focus {
+ background: rgba(199, 8, 80, 0.2);
+ border-color: @PRIMARY_COLOR_RED;
+
+ &::after {
+ .focused(@boxShadow: 22px, @borderRadius: 100px);
+ }
+ }
+}