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;
+ }
+ }
}
}