[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,30 +61,38 @@ 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>
-          <ul>
+          <Scroller
-            {brandProductInfo &&
+            className={css.scroller}
-              brandProductInfo.map(
+            direction="vertical"
-                ({ prdtId, prdtImgUrl, prdtNm, priceInfo, soldoutFlag }) => {
+            noScrollByWheel={true}
-                  return (
+            scrollMode="translate"
-                    <TItemCard
+            verticalScrollbar="hidden"
-                      key={prdtId}
+          >
-                      imageAlt={prdtNm}
+            <ul>
-                      imageSource={prdtImgUrl}
+              {brandProductInfo &&
-                      priceInfo={priceInfo}
+                brandProductInfo.map(
-                      productId={prdtId}
+                  ({ prdtId, prdtImgUrl, prdtNm, priceInfo, soldoutFlag }) => {
-                      productName={prdtNm}
+                    return (
-                      soldoutFlag={soldoutFlag}
+                      <TItemCard
-                      type="horizontal"
+                        key={prdtId}
-                    />
+                        imageAlt={prdtNm}
-                  );
+                        imageSource={prdtImgUrl}
-                }
+                        priceInfo={priceInfo}
-              )}
+                        productId={prdtId}
-          </ul>
+                        productName={prdtNm}
+                        soldoutFlag={soldoutFlag}
+                        type="horizontal"
+                      />
+                    );
+                  }
+                )}
+            </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;
+      }
+    }
   }
 }