[FeaturedBrandsPaenl] LiveChannels, laylout 추가

Detail Notes :

1. live영상이 1개일 경우 layout 추가

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,11 +61,18 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
 
   return (
     <div className={css.container}>
-      <SectionTitle title={$L("LIVE CHANNELS")} />
+      <SectionTitle title={$L(LIVE_CHANNELS_STRING)} />
 
       {brandChannelCnt === 1 && (
         <div>
-          {"brandChannelCnt(영상의 수)가 1일 경우, type = horizontal"}
+          <SpottableComponent>Live 영상</SpottableComponent>
+          <Scroller
+            className={css.scroller}
+            direction="vertical"
+            noScrollByWheel={true}
+            scrollMode="translate"
+            verticalScrollbar="hidden"
+          >
             <ul>
               {brandProductInfo &&
                 brandProductInfo.map(
@@ -79,6 +92,7 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
                   }
                 )}
             </ul>
+          </Scroller>
         </div>
       )}
 

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