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 f45201d9..d5ac2364 100644
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx
@@ -1,12 +1,9 @@
-import React, { useEffect } from "react";
-
-import { VirtualGridList } from "@enact/sandstone/VirtualList";
-import ri from "@enact/ui/resolution";
+import React, { useCallback } from "react";
 
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
-import TItemCard from "../../../components/TItemCard/TItemCard";
 import { $L } from "../../../utils/helperMethods";
 import css from "./LiveChannels.module.less";
+import LiveProductList from "./LiveProductList/LiveProductList";
 import LiveVideoCard from "./LiveVideoCard/LiveVideoCard";
 
 // getBrandLiveChannelInfo → brandChanInfo → brandProductInfo
@@ -23,12 +20,6 @@ import LiveVideoCard from "./LiveVideoCard/LiveVideoCard";
 
 const LIVE_CHANNELS_STRING = "LIVE CHANNELS";
 
-const LIST_ITEM_CONF = {
-  ITEM_WIDTH: 660 * 2,
-  ITEM_HEIGHT: 236 * 2,
-  SAPCING: 12 * 2,
-};
-
 export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
   const {
     alamDispFlag,
@@ -52,25 +43,8 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
     vtctpYn, // 영상 세로 여부
   } = brandChanInfo;
 
-  const renderItem = ({ index, ...rest }) => {
-    const { prdtImgUrl, prdtId, prdtNm, priceInfo, soldoutFlag } =
-      brandProductInfo[index];
-    return (
-      <>
-        <TItemCard
-          key={prdtId}
-          imageAlt={prdtNm}
-          imageSource={prdtImgUrl}
-          priceInfo={priceInfo}
-          productId={prdtId}
-          productName={prdtNm}
-          {...rest}
-          soldoutFlag={soldoutFlag}
-          type="horizontal"
-        />
-      </>
-    );
-  };
+  // @@pyh Todo, scenario page 100, thumbnail click → 영상 full 화면 이동 및 해당 상품 focuse
+  const handleCardClick = useCallback((productId) => {}, []);
 
   return (
     <>
@@ -79,6 +53,7 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
           <SectionTitle title={$L(LIVE_CHANNELS_STRING)} />
 
           {brandChannelCnt === 1 && (
+            // 라이브 영상이 1개일 경우
             <div>
               <LiveVideoCard
                 endTime={endDt}
@@ -88,28 +63,18 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
                 title={showNm}
               />
 
-              <div className={css.tempContainer}>
-                {brandProductInfo && (
-                  <VirtualGridList
-                    className={css.virtualGridList}
-                    dataSize={brandProductInfo.length}
-                    direction="vertical"
-                    itemRenderer={renderItem}
-                    itemSize={{
-                      minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
-                      minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
-                    }}
-                    noScrollByWheel
-                    scrollMode="translate"
-                    spacing={ri.scale(LIST_ITEM_CONF.SAPCING)}
-                    verticalScrollbar="hidden"
-                  />
-                )}
-              </div>
+              {brandProductInfo && (
+                <LiveProductList
+                  brandProductInfo={brandProductInfo}
+                  onCardClick={handleCardClick}
+                />
+              )}
             </div>
           )}
 
           {brandChannelCnt > 1 && (
+            // @@pyh Todo, 영상이 2개 이상일 경우 UI/UX 작업 (harmony API 신청 후 작업)
+            // 라이브 영상이 1개보다 많을 경우
             <div>
               {"brandChannelCnt(영상의 수)가 1보다 클 경우, type = vertical"}
             </div>
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 56cc4a02..0c2a5cd0 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
@@ -12,16 +12,5 @@
     position: relative;
     .flex(@justifyCenter: flex-start);
     width: 100%;
-
-    .tempContainer {
-      .size(@w: 660px, @h: 564px);
-      .virtualGridList {
-        // overflow: unset;
-
-        > div {
-          // overflow: unset !important;
-        }
-      }
-    }
   }
 }
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.jsx b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.jsx
new file mode 100644
index 00000000..7343ee1f
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.jsx
@@ -0,0 +1,64 @@
+import React, { useCallback } from "react";
+
+import { VirtualGridList } from "@enact/sandstone/VirtualList";
+import ri from "@enact/ui/resolution";
+
+import TItemCard from "../../../../components/TItemCard/TItemCard";
+import css from "./LiveProductList.module.less";
+
+const LIST_ITEM_CONF = {
+  ITEM_WIDTH: 660 * 2,
+  ITEM_HEIGHT: 236 * 2,
+  SAPCING: 12 * 2,
+};
+
+export default function LiveProductList({ brandProductInfo, onCardClick }) {
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      const {
+        prdtImgUrl,
+        prdtId: productId,
+        prdtNm: productName,
+        priceInfo,
+        soldoutFlag,
+      } = brandProductInfo[index];
+
+      return (
+        <TItemCard
+          key={productId}
+          imageAlt={productName}
+          imageSource={prdtImgUrl}
+          onCardClick={onCardClick}
+          priceInfo={priceInfo}
+          productId={productId}
+          productName={productName}
+          {...rest}
+          soldoutFlag={soldoutFlag}
+          type="horizontal"
+        />
+      );
+    },
+    [brandProductInfo, onCardClick]
+  );
+
+  return (
+    <div className={css.container}>
+      {brandProductInfo && (
+        <VirtualGridList
+          className={css.virtualGridList}
+          dataSize={brandProductInfo.length}
+          direction="vertical"
+          itemRenderer={renderItem}
+          itemSize={{
+            minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
+            minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
+          }}
+          noScrollByWheel
+          scrollMode="translate"
+          spacing={ri.scale(LIST_ITEM_CONF.SAPCING)}
+          verticalScrollbar="hidden"
+        />
+      )}
+    </div>
+  );
+}
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.module.less b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.module.less
new file mode 100644
index 00000000..2c58ef86
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/LiveProductList.module.less
@@ -0,0 +1,23 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.container {
+  position: relative;
+  .size(@w: 660px, @h: 564px);
+
+  &::after {
+    .position(@position: absolute, @bottom: 0, @left: 0);
+    .size(@w: 100%, @h: 50px);
+    background-image: linear-gradient(to bottom, transparent 65%, @COLOR_WHITE);
+    content: "";
+  }
+
+  // @@pyh Todo, box-shadow issue
+  // .virtualGridList {
+  //   overflow: unset;
+
+  //   > div {
+  //     overflow: unset !important;
+  //   }
+  // }
+}
diff --git a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/package.json b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/package.json
new file mode 100644
index 00000000..3f3862d3
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveProductList/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "LiveProductList.jsx",
+  "styles": [
+    "LiveProductList.module.less"
+  ]
+}