diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx index cd242fd5..b1d07981 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx @@ -1,10 +1,16 @@ -import React, { useEffect } from "react"; +import Scroller from "@enact/sandstone/Scroller"; +import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; +import Spottable from "@enact/spotlight/Spottable"; import SectionTitle from "../../../components/SectionTitle/SectionTitle"; import TItemCard from "../../../components/TItemCard/TItemCard"; import { $L } from "../../../utils/helperMethods"; import css from "./LiveChannels.module.less"; +const LIVE_CHANNELS_STRING = "LIVE CHANNELS"; + +const SpottableComponent = Spottable("div"); + export default function LiveChannels({ brandChanInfo, brandChannelCnt }) { const { alamDispFlag, @@ -55,30 +61,38 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) { return (
- + {brandChannelCnt === 1 && (
- {"brandChannelCnt(영상의 수)가 1일 경우, type = horizontal"} -
    - {brandProductInfo && - brandProductInfo.map( - ({ prdtId, prdtImgUrl, prdtNm, priceInfo, soldoutFlag }) => { - return ( - - ); - } - )} -
+ Live 영상 + +
    + {brandProductInfo && + brandProductInfo.map( + ({ prdtId, prdtImgUrl, prdtNm, priceInfo, soldoutFlag }) => { + return ( + + ); + } + )} +
+
)} diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less index 2b084317..68817cfd 100644 --- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less +++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.module.less @@ -2,9 +2,43 @@ @import "../../../style/utils.module.less"; .container { - margin-top: 60px; + h2 { + margin: 60px 0 24px; + } + /* normal */ > div { - margin-top: 24px; + position: relative; + display: flex; + width: @globalWidth; + + // live container + > div:nth-child(1) { + .size(@w: 1002px, @h: 564px); + margin-right: 18px; + background-color: gainsboro; + border: solid 1px transparent; + border-radius: 12px; + + /* focused */ + &:focus-within { + // live container + border: solid 1px @PRIMARY_COLOR_RED; + box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED, + 0 0 50px 0 rgba(0, 0, 0, 0.5); + } + } + + // product scroll container + > .scroller { + width: 720px; + + ul { + display: flex; + flex-direction: column; + gap: 12px; + height: 564px; + } + } } }