Merge branch 'develop' of gitlab.t-win.kr:ifheone/shoptime into develop

2024-02-06 21:35:48 +09:00
parent d47d216153 e3232e2563
commit cdb6d91df9
45 changed files with 1418 additions and 594 deletions
--- a/com.twin.app.shoptime/src/App/App.js
+++ b/com.twin.app.shoptime/src/App/App.js
@@ -6,7 +6,6 @@ import platform from "@enact/core/platform";
 import ThemeDecorator from "@enact/sandstone/ThemeDecorator";

 import appinfo from "../../webos-meta/appinfo.json";
-import { getBrandList } from "../actions/brandActions";
 import { changeAppStatus } from "../actions/commonActions";
 import { getAuthenticationCode } from "../actions/deviceActions";
 import {
@@ -59,7 +58,6 @@ function AppBase(props) {
        dispatch(getHomeMenu());
        dispatch(getHomeLayout());
        dispatch(getHomeMainContents());
-        dispatch(getBrandList());
        dispatch(getMyRecommandedKeyword());
        dispatch(getBestSeller());
        dispatch(
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useRef, useState } from "react";

 import classNames from "classnames";
 import compose from "ramda/src/compose";
@@ -25,17 +19,15 @@ const TabItemBase = ({
  target,
  deActivateTab,
  onClick,
-  lgCatCd,
  isSubItem,
  onFocus,
-  path,
-  isArrow = false,
+  showSubTab = false,
+  temp,
+  setTemp,
  ...rest
 }) => {
  const [focused, setFocused] = useState(false);
-  const [pressed, setPressed] = useState(false);
-  const itemRef = useRef();
-
+  const [fixed, setFixed] = useState(false);
  const clearPressedJob = useRef(
    new Job((func) => {
      setTimeout(func, 100);
@@ -43,7 +35,6 @@ const TabItemBase = ({
  );
  const _onClick = useCallback(
    (ev) => {
-      setPressed(true);
      clearPressedJob.current.start(() => {
        if (onClick) {
          onClick({ index, target });
@@ -53,26 +44,17 @@ const TabItemBase = ({
    [target, index, onClick]
  );

-  useEffect(() => {}, [pressed]);
-
  const _onFocus = useCallback(() => {
    setFocused(true);
+
    if (onFocus) {
      onFocus(index);
    }
-  }, [index, isArrow]);
+  }, [index, showSubTab, onFocus]);

  const _onBlur = useCallback(() => {
    setFocused(false);
-    setPressed(false);
-  }, []);
-
-  const isDivider = useMemo(() => {
-    if (!title || !path) {
-      return false;
-    }
-    return true;
-  }, []);
+  }, [showSubTab]);

  const onKeyDown = useCallback(
    (event) => {
@@ -83,30 +65,6 @@ const TabItemBase = ({
    [deActivateTab]
  );

-  const ImageComponent = useCallback(() => {
-    return (
-      <>
-        <span className={classNames(css.outline)} />
-        <img src={path} alt="" />
-      </>
-    );
-  }, [path]);
-
-  const TextComponent = useCallback(() => {
-    return (
-      <>
-        {expanded && (
-          <Marquee
-            marqueeOn={"focus"}
-            className={classNames(css.text, isSubItem && css.subItem)}
-          >
-            {title}
-          </Marquee>
-        )}
-      </>
-    );
-  }, [title]);
-
  const renderIcon = useCallback(() => {
    if (icons) {
      const Component = icons;
@@ -126,36 +84,35 @@ const TabItemBase = ({
    } else {
      return null;
    }
-  }, [focused, expanded, selected]);
+  }, [focused, expanded, selected, fixed]);

  delete rest.hasChildren;
  delete rest.getChildren;
  return (
    <SpottableComponent
-      ref={itemRef}
      className={classNames(
        css.tabItem,
-        !path && focused && css.focused,
-        !isSubItem && focused && isArrow && css.arrow,
-
-        path && css.path,
-        isSubItem && css.subDepth,
-        !path && !isDivider && selected && css.selected,
-        focused && path && css.ImgFocus,
-        selected && css.ImgSelect
+        focused && css.focused,
+        showSubTab && fixed && css.fixed,
+        !isSubItem && focused && showSubTab && css.arrow,
+        selected && css.selected
      )}
      onKeyDown={onKeyDown}
      onFocus={_onFocus}
      onBlur={_onBlur}
      onClick={_onClick}
    >
-      <div className={css.layout}>
+      <div className={classNames(css.itemWrap, focused && css.focused)}>
        {icons && <div className={css.icon}>{renderIcon()}</div>}
-        <div className={classNames(isSubItem && css.subWrap)}>
-          <span className={css[`category-icon-${lgCatCd}`]} />
-
-          {path ? <ImageComponent /> : <TextComponent />}
-        </div>
+        {expanded && title && (
+          <Marquee
+            className={classNames(css.text, isSubItem && css.subItem)}
+            marqueeOn={"focus"}
+          >
+            {title}
+          </Marquee>
+        )}
+        {/* <TabItemSub /> */}
      </div>
    </SpottableComponent>
  );
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less
@@ -3,11 +3,6 @@

@ICON_SIZE: 48px;

-.spottable-next-left {
-  display:none;
-}
-
-
 .tabItem{
    font-size: 36px;
    display: flex;
@@ -18,9 +13,6 @@
    padding-left: 42px;
    padding-right: 24px;

-    // .spottable-next-left {
-    //   background-color: red;
-    // }

    &.focused {
      color: #eee;
@@ -38,70 +30,39 @@
          .position(@position: absolute, @top: 24px, @right: 18px);
          background-image: url('../../../assets/icons/ic-lnb-right-arrow.png');
          background-size: 36px 36px;      
-        } }
-          > div{
-            margin-left:-30px;
        } 
-
      }
-
+    }

    &.selected {
      color: #eee;
    }

-    &.subDepth{
-      width: 386px;
-      height: 78px;
-      padding-left: 42px;
+    &.fixed {
+        color: #eee;
+        background: linear-gradient(to right, #cb1253, #e15ba1);
+        border-radius: 42px;
+        width: 402px;
+        z-index: 1;
+        margin-left: 30px;
+        position:relative;
  
+        &.arrow {
+          &::after {
+            content: "";
+            .size(@w:36px, @h:36px);
+            .position(@position: absolute, @top: 24px, @right: 18px);
+            background-image: url('../../../assets/icons/ic-lnb-right-arrow.png');
+            background-size: 36px 36px;      
+          } 
+        }
+      
+    }
+
+.itemWrap {
+    display: flex;
      &.focused {
-        background: rgba(255, 255, 255, .1);
-        border-radius: 0px;
-        border-right: 6px solid #c70850;
-        margin-left: 0px;
-        > div {
-        padding-left: 30px;
-        }   
-      } 
-      &.path {
-        padding-left: 0px;
-        margin-bottom: 70px;
-      }
-    .outline {
-      .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
-      .size(@w: 138px, @h:138px);
-      
-      background-position: center;
-      background-size: cover;
-
-    }
-
-    img {
-      .size(@w: 120px, @h: 120px);
-    }
-
-    &.ImgFocus {
-      .outline {
-        border-radius: 60px;
-        z-index: 99;
-       // box-shadow: -3px 0px 30px 0 #c70850;
-        // border: solid 1px #dadada;
-        background-image: url("../../../assets/icons/ic-tab-partners-focus@3x.png");
-      }
-      img {
-        .size(@w: 138px, @h: 138px);
-        
-      } 
-    }
-
-    &.ImgSelect {
-      img {
-        .size(@w: 138px, @h: 138px);
-      }
-      .outline {
-        background-image: url("../../../assets/icons/ic-tab-partners-lnb-selected@3x.png");
-      }
+        margin-left : -30px;
      }
    }   

@@ -135,86 +96,13 @@
      width: 245px; 
    }
 }
-.layout {
-  display: flex;
-}
+

 .marqueeWrap {
    width: 100%;
  }
 }
-.subWrap{
-  .flex();
-
-  span {
-    .size(@w: 40px, @h:40px);
-    background-size: cover;
-    &.category-icon-1017 {
-      // LG Electronics
-      background-image: url("../../../assets/category/ic-category-lgelectronics-nor@3x.png");
-    }
-
-    // Garden and Outdoors
-    &.category-icon-1008 {
-      background-image: url("../../../assets/icons/ic-category-garden-nor.png");
-    }
-
-    // Fashion
-    &.category-icon-1000 {
-      background-image: url("../../../assets/icons/ic-category-fashion-nor.png");
-    }
-
-    // Beauty
-    &.category-icon-1003 {
-      background-image: url("../../../assets/icons/ic-category-beauty-nor.png");
-    }
-
-    // Jewelry
-    &.category-icon-1004 {
-      background-image: url("../../../assets/icons/ic-category-jewelry-nor.png");
-    }
-
-    // Home
-    &.category-icon-1006 {
-      background-image: url("../../../assets/icons/ic-category-home-nor.png");
-    }
-
-    // Kitchen & Food
-    &.category-icon-1007 {
-      background-image: url("../../../assets/icons/ic-category-kitchen-nor.png");
-    }
-
-    // Accessories
-    &.category-icon-1014 {
-      background-image: url("../../../assets/icons/ic-category-accessories-nor.png");
-    }
-
-    // Heaclth & Fitness
-    &.category-icon-1009 {
-      background-image: url("../../../assets/icons/ic-category-health-nor.png");
-    }
-
-    // Entertainment
-    &.category-icon-1012 {
-      background-image: url("../../../assets/icons/ic-category-enter-nor.png");
-    }
-
-    // Crafts & Sewing
-    &.category-icon-1011 {
-      background-image: url("../../../assets/icons/ic-category-cw-nor.png");
-    }
-
-    // Electronics
-    &.category-icon-1010 {
-      background-image: url("../../../assets/icons/ic-category-electronics-nor.png");
-    }
-
-    // Clearance
-    &.category-icon-1013 {
-      background-image: url("../../../assets/icons/ic-category-clearance-nor.png");
-    }
-}
-}
+



--- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx
@@ -0,0 +1,126 @@
+import React, { useCallback, useRef, useState } from "react";
+
+import classNames from "classnames";
+import compose from "ramda/src/compose";
+
+import { Job } from "@enact/core/util";
+import { Marquee, MarqueeController } from "@enact/sandstone/Marquee";
+import Spottable from "@enact/spotlight/Spottable";
+
+import css from "./TabItemSub.module.less";
+
+const SpottableComponent = Spottable("div");
+const TabItemBase = ({
+  title,
+  expanded = false,
+  selected = false,
+  index = 0,
+  target,
+  deActivateTab,
+  onClick,
+  lgCatCd,
+  isSubItem,
+  onFocus,
+  onBlur,
+  path,
+  subTitle,
+  ...rest
+}) => {
+  const [focused, setFocused] = useState(false);
+  const itemRef = useRef();
+
+  const clearPressedJob = useRef(
+    new Job((func) => {
+      setTimeout(func, 100);
+    }, 100)
+  );
+  const _onClick = useCallback(
+    (ev) => {
+      clearPressedJob.current.start(() => {
+        if (onClick) {
+          onClick({ index, target });
+        }
+      });
+    },
+    [target, index, onClick]
+  );
+
+  const _onFocus = useCallback(() => {
+    setFocused(true);
+    if (onFocus) {
+      onFocus(index);
+    }
+  }, [index]);
+
+  const _onBlur = useCallback(() => {
+    setFocused(false);
+
+    if (onBlur) {
+      onBlur(index);
+    }
+  }, [index]);
+
+  const onKeyDown = useCallback(
+    (event) => {
+      if (event.key === "ArrowRight") {
+        _onClick();
+      }
+    },
+    [deActivateTab]
+  );
+
+  const ImageComponent = useCallback(() => {
+    return (
+      <div className={css.imageLayout}>
+        <span className={classNames(css.outline)} />
+        <img src={path} alt="" />
+      </div>
+    );
+  }, [path]);
+
+  const TextComponent = useCallback(() => {
+    return (
+      <>
+        {expanded && (
+          <Marquee
+            marqueeOn={"focus"}
+            className={classNames(css.text, isSubItem && css.subItem)}
+          >
+            {title}
+          </Marquee>
+        )}
+      </>
+    );
+  }, [title]);
+
+  delete rest.hasChildren;
+  delete rest.getChildren;
+  return (
+    <SpottableComponent
+      ref={itemRef}
+      className={classNames(
+        css.tabItem,
+        !path && focused && css.focused,
+        path && css.path
+
+        // focused && path && css.imageFocus,
+        // selected && css.imageSelect
+      )}
+      onKeyDown={onKeyDown}
+      onFocus={_onFocus}
+      onBlur={_onBlur}
+      onClick={_onClick}
+    >
+      <div className={css.layout}>
+        <div className={classNames(isSubItem && css.subWrap)}>
+          {!path && <span className={css[`category-icon-${lgCatCd}`]} />}
+          {path ? <ImageComponent /> : <TextComponent />}
+        </div>
+      </div>
+    </SpottableComponent>
+  );
+};
+const ItemDecorator = compose(MarqueeController({ marqueeOnFocus: true }));
+const TabItemSub = ItemDecorator(TabItemBase);
+
+export default TabItemSub;
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less
@@ -0,0 +1,166 @@
+@import "../../style/utils.module.less";
+@import "../../style/CommonStyle.module.less";
+
+@ICON_SIZE: 48px;
+
+.tabItem{
+    font-size: 36px;
+    display: flex;
+    color: #606060;
+    align-items: center;
+    height: 84px;
+    position: relative;
+    padding-left: 42px;
+    padding-right: 24px;
+
+
+    &.focused {
+        background: rgba(255, 255, 255, .1);
+        border-radius: 0px;
+        border-right: 6px solid #c70850;
+        margin-left: 0px;
+        color: #eee;
+
+    } 
+    &.path {
+        padding-left: 0px;
+        margin-bottom: 70px;
+    }
+
+
+    &.selected {
+    color: #eee;
+    }
+
+
+.imageLayout {
+    &.outline {
+        .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
+        .size(@w: 138px, @h:138px);
+        background-position: center;
+        background-size: cover;
+
+        > img {
+        .size(@w: 120px, @h: 120px);
+        }
+    }
+    &.imageFocus {
+        .outline {
+            .focusDropShadow();
+            border-radius: 60px;
+            z-index: 99;
+            background-image: url("../../../assets/icons/ic-tab-partners-focus@3x.png");
+
+            // box-shadow: -3px 0px 30px 0 #c70850;
+         // border: solid 1px #dadada;
+        > img {
+            .size(@w: 138px, @h: 138px);
+        }
+        }
+    }
+    // &.ImgSelect {
+    //   img {
+    //     .size(@w: 138px, @h: 138px);
+    //   }
+    //   .outline {
+    //     background-image: url("../../../assets/icons/ic-tab-partners-lnb-selected@3x.png");
+    //   }
+    // }
+
+    }
+    
+
+.text {
+    line-height: 1.2;
+    padding-left: 11px;
+    .font(@fontFamily:@baseFontBold, @fontSize:36px);
+    
+    &.subItem {
+        .font (@fontFamily:@baseFontBold, @fontSize:30px);
+        width: 245px; 
+    }
+}
+
+.subWrap{
+.flex();
+
+    span {
+    .size(@w: 40px, @h:40px);
+    background-size: cover;
+    &.category-icon-1017 {
+      // LG Electronics
+        background-image: url("../../../assets/category/ic-category-lgelectronics-nor@3x.png");
+    }
+
+    // Garden and Outdoors
+    &.category-icon-1008 {
+        background-image: url("../../../assets/icons/ic-category-garden-nor.png");
+    }
+
+    // Fashion
+    &.category-icon-1000 {
+        background-image: url("../../../assets/icons/ic-category-fashion-nor.png");
+    }
+
+    // Beauty
+    &.category-icon-1003 {
+        background-image: url("../../../assets/icons/ic-category-beauty-nor.png");
+    }
+
+    // Jewelry
+    &.category-icon-1004 {
+        background-image: url("../../../assets/icons/ic-category-jewelry-nor.png");
+    }
+
+    // Home
+    &.category-icon-1006 {
+        background-image: url("../../../assets/icons/ic-category-home-nor.png");
+    }
+
+    // Kitchen & Food
+    &.category-icon-1007 {
+        background-image: url("../../../assets/icons/ic-category-kitchen-nor.png");
+    }
+
+    // Accessories
+    &.category-icon-1014 {
+        background-image: url("../../../assets/icons/ic-category-accessories-nor.png");
+    }
+
+    // Heaclth & Fitness
+    &.category-icon-1009 {
+        background-image: url("../../../assets/icons/ic-category-health-nor.png");
+    }
+
+    // Entertainment
+    &.category-icon-1012 {
+        background-image: url("../../../assets/icons/ic-category-enter-nor.png");
+    }
+
+    // Crafts & Sewing
+    &.category-icon-1011 {
+        background-image: url("../../../assets/icons/ic-category-cw-nor.png");
+    }
+
+    // Electronics
+    &.category-icon-1010 {
+        background-image: url("../../../assets/icons/ic-category-electronics-nor.png");
+    }
+
+    // Clearance
+    &.category-icon-1013 {
+        background-image: url("../../../assets/icons/ic-category-clearance-nor.png");
+    }
+}
+
+}
+
+.layout {
+    display: flex;
+  }
+  
+  .marqueeWrap {
+      width: 100%;
+    }
+  }
+
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
@@ -32,6 +32,7 @@ import OnSaleIcon from "./iconComponents/OnSaleIcon";
 import SearchIcon from "./iconComponents/SearchIcon";
 import TrendingNowIcon from "./iconComponents/TrendingNowIcon";
 import TabItem from "./TabItem";
+import TabItemSub from "./TabItemSub";
 import css from "./TabLayout.module.less";

 const Container = SpotlightContainerDecorator(
@@ -113,7 +114,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
  const [mainExpanded, setMainExpanded] = useState(false);
  const [mainSelectedIndex, setMainSelectedIndex] = useState(-1);
  const [secondDepthReduce, setSecondDepthReduce] = useState(false);
-  const [focused, setFocused] = useState(false);
+  const [temp, setTemp] = useState(false);
  const [tabs, setTabs] = useState([]);
  const [tabFocused, setTabFocused] = useState([false, false, false]); //COLLABSED_MAIN, ACTIVATED_MAIN, ACTIVATED_SUB
  const panelSwitching = useRef(null);
@@ -167,6 +168,16 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
        result = data?.homeCategory.map((item) => ({
          id: item.lgCatCd,
          title: item.lgCatNm,
+          target: [
+            {
+              name: panel_names.CATEGORY_PANEL,
+              panelInfo: {
+                lgCatNm: item.lgCatNm,
+                lgCatCd: item.lgCatCd,
+                COUNT: item.COUNT,
+              },
+            },
+          ],
        }));
        break;
      case "GNB":
@@ -179,7 +190,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
        result = data?.shortFeaturedBrands.map((item) => ({
          Id: item.patnrId,
          path: item.patncLogoPath,
-          target: [{ name: panel_names.FEATURED_BRANDS_PANEL }],
+          target: [
+            {
+              name: panel_names.FEATURED_BRANDS_PANEL,
+              panelInfo: item.patnrId,
+            },
+          ],
        }));
        break;
      case "My Page":
@@ -309,9 +325,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
      switch (type) {
        case ACTIVATED_MAIN: {
          if (!cursorVisible) {
-            // setMainExpanded(false);
          }
-
          break;
        }
        case ACTIVATED_SUB: {
@@ -336,16 +350,16 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
  );

  const onFocus = (index) => {
-    setFocused(true);
    setMainSelectedIndex(index);
+    setTemp(false);
    if (showSubTab) {
      setSecondDepthReduce((prev) => !prev);
    }
  };

-  const onBlur = () => {
-    setFocused(false);
-  };
+  const onBlur = useCallback(() => {
+    setTemp(true);
+  }, []);

  const handleNavigation = useCallback(
    ({ index, target }) => {
@@ -365,6 +379,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
    ({ index, target }) => {
      if (target) {
        dispatch(resetPanels(target));
+
        deActivateTab();
        panelSwitching.current = true;
        panelSwitchingJob.start(panelSwitching);
@@ -376,7 +391,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
    ({ index, target }) => {
      deActivateTabJob.startAfter(100, deActivateTab);
    },
-    [dispatch, deActivateTab]
+    [deActivateTab]
  );

  const tabActivated = useMemo(() => {
@@ -433,7 +448,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
        }
      });
    }
-  }, [secondDepthReduce, showSubTab, focused]);
+  }, [secondDepthReduce, showSubTab]);

  if (!showTab) {
    return null;
@@ -485,13 +500,14 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                <TabItem
                  {...item}
                  onFocus={onFocus}
-                  onBlur={onBlur}
                  key={"tabitemExpanded" + index}
                  onClick={handleNavigation}
                  deActivateTab={deActivateTab}
-                  isArrow={showSubTab}
+                  showSubTab={showSubTab}
                  icons={item.icons}
                  expanded={mainExpanded}
+                  temp={temp}
+                  setTemp={setTemp}
                  selected={
                    (panels.length === 0 && index === 0) ||
                    (Array.isArray(item.target) &&
@@ -521,8 +537,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
              {showSubTab &&
                tabs[mainSelectedIndex]?.children.map((item, index) => {
                  return (
-                    <TabItem
+                    <TabItemSub
                      {...item}
+                      onBlur={onBlur}
                      key={"tabitemSubmenu" + index}
                      onClick={onClickSubItem}
                      expanded={true}
@@ -532,7 +549,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
                      title={item.title}
                      lgCatCd={item.id}
                      path={item.path}
-                      isArrow={showSubTab}
+                      showSubTab={showSubTab}
                      // selected={
                      //   (panels.length === 0 && index === 0) ||
                      //   (Array.isArray(item.target) &&
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
@@ -39,6 +39,7 @@
  justify-content: center;
  z-index: 1;
  flex-grow: 0;
+
  // transition: width 0.5s ease;
  
  > img {
@@ -47,6 +48,7 @@
    margin: -40px 24px 84px 42px;
  }

+
  &.expanded {
    width: 402px;
    
@@ -54,6 +56,7 @@
      width: 234px;
      height: 54px;
    }
+
  }

  &.secondDepthLayout {
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/Banner/Banner.jsx
@@ -2,9 +2,9 @@ import React from "react";

 import css from "./Banner.module.less";

-export default function Banner({ selectedBrandInfo, brandTopImgInfo }) {
-  const { logoImgAlt, logoImgPath, patncNm } = selectedBrandInfo;
+export default function Banner({ brandTopImgInfo, selectedBrandInfo }) {
  const { topImgAlt, topImgPath } = brandTopImgInfo;
+  const { logoImgAlt, logoImgPath, patncNm } = selectedBrandInfo;

  return (
    <div className={css.container}>
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
@@ -1,11 +1,15 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";

 import { useDispatch, useSelector } from "react-redux";

+import Spotlight from "@enact/spotlight";
+
 import {
  getBrandLayoutInfo,
+  getBrandList,
  getBrandLiveChannelInfo,
 } from "../../actions/brandActions";
+import TBody from "../../components/TBody/TBody";
 import TPanel from "../../components/TPanel/TPanel";
 import Banner from "./Banner/Banner";
 import css from "./FeaturedBrandsPanel.module.less";
@@ -19,12 +23,11 @@ const getSelectedBrandInfo = (brandInfo, selectedPatnrId) => {
 export default function FeaturedBrandsPanel() {
  const dispatch = useDispatch();

+  const panelInfo = useSelector((state) => state.panels.panels[0].panelInfo);
  const brandInfo = useSelector((state) => state.brand.brandInfoData.brandInfo);
-
  const brandTopImgInfo = useSelector(
    (state) => state.brand.brandLayoutInfoData.brandTopImgInfo
  );
-
  const brandChanInfo = useSelector(
    (state) => state.brand.brandLiveChannelInfoData.brandChanInfo
  );
@@ -32,39 +35,57 @@ export default function FeaturedBrandsPanel() {
    (state) => state.brand.brandLiveChannelInfoData.brandChannelCnt
  );

+  const [selectedPatnrId, setSelectedPatnrId] = useState(String(panelInfo));
  const [selectedBrandInfo, setSelectedBrandInfo] = useState();

-  // @@pyh Todo, provided by GNB as props or global state
-  const [selectedPatnrId, setSelectedPatnrId] = useState("1");
-
-  const handleQuickMenu = (patnrId) => {
-    setSelectedPatnrId(patnrId);
-  };
-
-  useEffect(() => {
-    if (brandInfo) {
-      setSelectedBrandInfo(getSelectedBrandInfo(brandInfo, selectedPatnrId));
+  const handleQuickMenuClick = useCallback(
+    (patnrId) => {
+      if (selectedPatnrId === patnrId) {
+        return;
      }

+      setSelectedPatnrId(patnrId);
+    },
+    [selectedPatnrId]
+  );
+
+  useEffect(() => {
+    if (!brandInfo) {
+      dispatch(getBrandList());
+    }
+  }, [brandInfo, dispatch]);
+
+  useEffect(() => {
+    if (brandInfo && selectedPatnrId) {
+      setSelectedBrandInfo(getSelectedBrandInfo(brandInfo, selectedPatnrId));
      dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId }));
      dispatch(getBrandLiveChannelInfo({ patnrId: selectedPatnrId }));
+    }
+  }, [brandInfo, dispatch, selectedPatnrId]);
+
+  useEffect(() => {
+    // @@pyh Todo, loading 적용 이후 loading으로 조건 추가
+    if (selectedPatnrId) {
+      Spotlight.focus("spotlight" + selectedPatnrId);
+    }
  }, [selectedPatnrId]);

  return (
    /* scenario page 98 */
    <TPanel className={css.container}>
+      <TBody>
        {brandInfo && brandInfo.length > 1 && (
          <QuickMenu
            brandInfo={brandInfo}
-          onQuickMenuClick={handleQuickMenu}
+            onQuickMenuClick={handleQuickMenuClick}
            selectedPatnrId={selectedPatnrId}
          />
        )}

-      {selectedBrandInfo && (
+        {brandTopImgInfo && selectedBrandInfo && (
          <Banner
-          selectedBrandInfo={selectedBrandInfo}
            brandTopImgInfo={brandTopImgInfo}
+            selectedBrandInfo={selectedBrandInfo}
          />
        )}

@@ -76,6 +97,7 @@ export default function FeaturedBrandsPanel() {
            />
          )}
        </div>
+      </TBody>
    </TPanel>
  );
 }
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less
@@ -1,4 +1,7 @@
 .container {
+  .tBody {
+    height: 1080px;
+  }
  .sectionContainer {
    padding-left: 60px;
  }
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannels.jsx
@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useEffect } from "react";

-import Scroller from "@enact/sandstone/Scroller";
+import { VirtualGridList } from "@enact/sandstone/VirtualList";
+import ri from "@enact/ui/resolution";

 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import TItemCard from "../../../components/TItemCard/TItemCard";
@@ -8,8 +9,39 @@ import { $L } from "../../../utils/helperMethods";
 import LiveVideoCard from "../LiveVideoCard/LiveVideoCard";
 import css from "./LiveChannels.module.less";

+// getBrandLiveChannelInfo → brandChanInfo → brandProductInfo
+// brandProductInfo = {
+//  freeShippingFlag = null, // 무료배송 여부
+//  offerInfo = "", // 제공 정보
+//  prdtId,
+//  prdtImgUrl,
+//  prdtNm,
+//  priceInfo, // 할인 전 금액, 할인 후(최종) 금액, 리워드여부, save금액, off(할인 %)
+//  revwGrd = null, 리뷰 등급 (별점)
+//  soldoutFlag,
+// }
+
+/* 
+ <TItemCard
+    key={prdtId}
+    imageAlt={prdtNm}
+    imageSource={prdtImgUrl}
+    priceInfo={priceInfo}
+    productId={prdtId}
+    productName={prdtNm}
+    soldoutFlag={soldoutFlag}
+    type="horizontal"
+  />
+*/
+
 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,
@@ -33,30 +65,27 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
    vtctpYn, // 영상 세로 여부
  } = brandChanInfo;

-  // getOnSaleInfos → saleInfos → saleProductInfos
-  // saleProductInfos = {
-  //  imgUrl,
-  //  lgCatCd,
-  //  lgCatNm,
-  //  OfferInfo = null,
-  //  patncNm,
-  //  patnrId,
-  //  prdtNm,
-  //  priceInfo
-  // }
-  // 현재 OnSalePanel 실사용 = imgUrl, prdtId, prdtNm, priceInfo
+  console.log();

-  // getBrandLiveChannelInfo → brandChanInfo → brandProductInfo
-  // brandProductInfo = {
-  //  freeShippingFlag = null, // 무료배송 여부
-  //  offerInfo = "", // 제공 정보
-  //  prdtId,
-  //  prdtImgUrl,
-  //  prdtNm,
-  //  priceInfo, // 할인 전 금액, 할인 후(최종) 금액, 리워드여부, save금액, off(할인 %)
-  //  revwGrd = null, 리뷰 등급 (별점)
-  //  soldoutFlag,
-  // }
+  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"
+        />
+      </>
+    );
+  };

  return (
    <>
@@ -73,69 +102,31 @@ export default function LiveChannels({ brandChanInfo, brandChannelCnt }) {
                thumbnailSource={thumbnailImgPath}
                title={showNm}
              />
-              <Scroller
-                className={css.scroller}
+
+              <div className={css.tempContainer}>
+                {brandProductInfo && (
+                  <VirtualGridList
+                    className={css.virtualGridList}
+                    dataSize={brandProductInfo.length}
                    direction="vertical"
-                noScrollByWheel={true}
+                    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"
-              >
-                <ul>
-                  {brandProductInfo &&
-                    brandProductInfo.map(
-                      ({
-                        prdtId,
-                        prdtImgUrl,
-                        prdtNm,
-                        priceInfo,
-                        soldoutFlag,
-                      }) => {
-                        return (
-                          <TItemCard
-                            key={prdtId}
-                            imageAlt={prdtNm}
-                            imageSource={prdtImgUrl}
-                            priceInfo={priceInfo}
-                            productId={prdtId}
-                            productName={prdtNm}
-                            soldoutFlag={soldoutFlag}
-                            type="horizontal"
                  />
-                        );
-                      }
                )}
-                </ul>
-              </Scroller>
+              </div>
            </div>
          )}

          {brandChannelCnt > 1 && (
            <div>
              {"brandChannelCnt(영상의 수)가 1보다 클 경우, type = vertical"}
-              <ul>
-                {brandProductInfo &&
-                  brandProductInfo.map(
-                    ({
-                      prdtId,
-                      prdtImgUrl,
-                      prdtNm,
-                      priceInfo,
-                      soldoutFlag,
-                    }) => {
-                      return (
-                        <TItemCard
-                          key={prdtId}
-                          imageAlt={prdtNm}
-                          imageSource={prdtImgUrl}
-                          priceInfo={priceInfo}
-                          productId={prdtId}
-                          productName={prdtNm}
-                          soldoutFlag={soldoutFlag}
-                        />
-                      );
-                    }
-                  )}
-              </ul>
            </div>
          )}
        </div>
--- 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,25 +2,25 @@
@import "../../../style/utils.module.less";

 .container {
+  margin-bottom: 58px;
+
  h2 {
-    margin: 60px 0 24px;
+    margin: 58px 0 24px;
  }

-  /* normal */
  > div {
    position: relative;
-    display: flex;
-    width: @globalWidth;
+    .flex(@justifyCenter: flex-start);
+    width: 100%;

-    // product scroll container
-    > .scroller {
-      width: 720px;
+    .tempContainer {
+      .size(@w: 660px, @h: 564px);
+      .virtualGridList {
+        // overflow: unset;

-      ul {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        height: 564px;
+        > div {
+          // overflow: unset !important;
+        }
      }
    }
  }
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.jsx
@@ -54,13 +54,7 @@ export default memo(function LiveVideoCard({

      <div>
        <div>
-          <img
-            src={IcLiveShow}
-            alt={
-              // @@pyh Todo, alt 값 언어처리 유무
-              LIVE_SHOW_STRING
-            }
-          />
+          <img src={IcLiveShow} alt={$L(LIVE_SHOW_STRING)} />
          <div>
            <h3>{title}</h3>
            <time>
@@ -68,15 +62,11 @@ export default memo(function LiveVideoCard({
            </time>
          </div>
        </div>
+
        {liveChannelCount && liveChannelCount === 1 && (
+          // @@pyh, live 방송이라는 조건으로 변경
          <div>
-            <img
-              src={IcWarning}
-              alt={
-                // @@pyh Todo, alt 값 언어처리 유무
-                WARNING_STRING
-              }
-            />
+            <img src={IcWarning} alt={$L(WARNING_STRING)} />
            <span>{$L(WARNING_MESSAGE)}</span>
          </div>
        )}
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.module.less
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.module.less
@@ -7,7 +7,6 @@
  z-index: 10;
  .size(@w: 1002px, @h: 564px);
  margin-right: 18px;
-  border: 4px solid transparent;
  border-radius: 12px;
  overflow: hidden;

@@ -23,7 +22,7 @@
    .size(@w: 100%, @h: 100%);
    background-image: linear-gradient(to top, transparent 55%, @COLOR_BLACK);

-    // top part of video
+    // top part (live info)
    > div:nth-child(1) {
      .flex(@justifyCenter: flex-start);
      gap: 12px;
@@ -48,7 +47,7 @@
      }
    }

-    // bottom part of video
+    // bottom part (warning message)
    > div:nth-child(2) {
      .flex(@justifyCenter: flex-start);
      gap: 12px;
@@ -66,7 +65,9 @@

  /* focused */
  &:focus-within {
-    border: 4px solid @PRIMARY_COLOR_RED;
+    &::after {
+      .focused(@borderRadius: 12px);
+    }
    .focusDropShadow();
  }
 }
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.jsx
@@ -1,64 +1,61 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from "react";

-import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import { VirtualGridList } from "@enact/sandstone/VirtualList";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import ri from "@enact/ui/resolution";

-import { $L } from '../../../utils/helperMethods';
-import css from './QuickMenu.module.less';
+import QuickMenuItem from "../QuickMenuItem/QuickMenuItem";
+import css from "./QuickMenu.module.less";
+
+const LIST_ITEM_CONF = {
+  ITEM_WIDTH: 138 * 2,
+  ITEM_HEIGHT: 138 * 2,
+};

 const Container = SpotlightContainerDecorator(
  { leaveFor: { right: "" }, enterTo: "last-focused" },
  "nav"
 );

-const SpottableComponent = Spottable("li");
-
 export default function QuickMenu({
  brandInfo,
  selectedPatnrId,
  onQuickMenuClick,
  ...rest
 }) {
-  const handleClick = (patnrId) => {
-    if (selectedPatnrId === patnrId) {
-      return;
-    }
-
-    onQuickMenuClick(patnrId);
-  };
-
-  useEffect(() => {
-    console.log("@@ brandInfo", brandInfo);
-    // @@pyh Todo, change to logic
-    // const element = document.getElementById(selectedPatnrId);
-
-    Spotlight.focus("spotlight" + selectedPatnrId);
-  }, []);
-
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
      return (
-    <Container {...rest} className={css.container}>
-      <ul>
-        {brandInfo &&
-          brandInfo.map(({ logoImgAlt, logoImgPath, newFlag, patnrId }) => {
-            return (
-              <SpottableComponent
-                className={patnrId === selectedPatnrId && css.selected}
-                id={patnrId}
-                key={patnrId}
-                onClick={() => handleClick(patnrId)}
-                spotlightId={"spotlight" + patnrId}
-              >
-                {newFlag === "Y" && (
-                  <span className={css.newBagde}>{$L("NEW")}</span>
-                )}
-                <span className={css.outline} />
-                <img src={logoImgPath} alt={logoImgAlt} />
-              </SpottableComponent>
+        <QuickMenuItem
+          brandInfo={brandInfo}
+          index={index}
+          selectedPatnrId={selectedPatnrId}
+          onQuickMenuClick={onQuickMenuClick}
+          {...rest}
+        />
      );
-          })}
-      </ul>
+    },
+    [brandInfo, selectedPatnrId, onQuickMenuClick]
+  );
+
+  return (
+    <Container className={css.container} {...rest}>
+      {brandInfo && (
+        <VirtualGridList
+          className={css.virtualGridList}
+          dataSize={brandInfo.length}
+          direction="horizontal"
+          horizontalScrollbar="hidden"
+          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)}
+        />
+      )}
    </Container>
  );
 }
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.module.less
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenu/QuickMenu.module.less
@@ -2,66 +2,15 @@
@import "../../../style/utils.module.less";

 .container {
-  .flex(@justifyCenter:flex start);
  .size(@w: 100%, @h: 180px);
-  padding: 30px 60px;
+  padding: 18px 60px;
  background-color: #e7e7e7;

-  ul {
-    .flex(@justifyCenter: flex-start);
-    gap: 18px;
+  .virtualGridList {
+    overflow: unset;

-    /* normal */
-    li {
-      position: relative;
-
-      .newBagde {
-        .position(@position: absolute, @top: 0, @right: 0, @bottom: auto, @left: auto);
-        z-index: 10;
-        .size(@w: 60px, @h: 30px);
-        background-color: #f00;
-        color: #fff;
-        border-radius: 6px;
-        font-family: Arial;
-        font-weight: 600;
-        font-size: 18px;
-        text-align: center;
-      }
-
-      .outline {
-        .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
-        .size(@w: 138px, @h:138px);
-        background-position: center;
-        background-size: cover;
-      }
-
-      img {
-        .size(@w: 120px, @h: 120px);
-      }
-
-      /* focused */
-      &:focus {
-        border-radius: 60px;
-        .focusDropShadow();
-
-        .outline {
-          background-image: url("../../../../assets/images/partners/ic-tab-partners-focus@3x.png");
-        }
-
-        img {
-          .size(@w: 138px, @h: 138px);
-        }
-      }
-
-      /* selected */
-      &.selected {
-        img {
-          .size(@w: 138px, @h: 138px);
-        }
-        .outline {
-          background-image: url("../../../../assets/images/partners/ic-tab-partners-selected@3x.png");
-        }
-      }
+    > div {
+      overflow: unset !important;
    }
  }
 }
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/QuickMenuItem.jsx
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/QuickMenuItem.jsx
@@ -0,0 +1,45 @@
+import React, { memo, useCallback } from "react";
+
+import classNames from "classnames";
+
+import Spottable from "@enact/spotlight/Spottable";
+
+import { $L } from "../../../utils/helperMethods";
+import css from "./QuickMenuItem.module.less";
+
+const SpottableComponent = Spottable("div");
+
+export default memo(function QuickMenuItem({
+  brandInfo,
+  index,
+  onQuickMenuClick,
+  selectedPatnrId,
+  ...rest
+}) {
+  const { logoImgAlt, logoImgPath, newFlag, patnrId } = brandInfo[index];
+
+  const handleClick = useCallback(
+    (patnrId) => {
+      onQuickMenuClick && onQuickMenuClick(patnrId);
+    },
+    [selectedPatnrId]
+  );
+
+  return (
+    <SpottableComponent
+      className={classNames(
+        css.item,
+        patnrId === selectedPatnrId && css.selected
+      )}
+      id={patnrId}
+      key={patnrId}
+      onClick={() => handleClick(patnrId)}
+      {...rest}
+      spotlightId={"spotlight" + patnrId}
+    >
+      <img src={logoImgPath} alt={logoImgAlt} />
+      {newFlag === "Y" && <div>{$L("NEW")}</div>}
+      <span />
+    </SpottableComponent>
+  );
+});
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/QuickMenuItem.module.less
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/QuickMenuItem.module.less
@@ -0,0 +1,73 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.item {
+  /* normal */
+  position: relative;
+  .size(@w: 138px, @h: 138px);
+  .flex();
+
+  // partner logo
+  img {
+    .size(@w: 120px, @h: 120px);
+  }
+
+  // newBadge
+  > div {
+    .position(@position: absolute, @top: 0, @right: 18px);
+    z-index: 10;
+    .size(@w: 60px, @h: 30px);
+    border-radius: 6px;
+    background-color: #f00;
+    .font(@fontFamily: @arialFontBold, @fontSize: 18px);
+    color: @COLOR_WHITE;
+    text-align: center;
+  }
+
+  // outline
+  > span {
+    .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
+    .size(@w: 138px, @h:138px);
+    background-position: center;
+    background-size: cover;
+  }
+
+  /* focused */
+  &:focus-within {
+    border-radius: 100%;
+    .focusDropShadow();
+
+    // partner logo
+    img {
+      .size(@w: 138px, @h: 138px);
+    }
+
+    // newBadge
+    > div {
+      right: 0;
+    }
+
+    // outline
+    > span {
+      background-image: url("../../../../assets/images/partners/ic-tab-partners-focus@3x.png");
+    }
+  }
+
+  /* selected */
+  &.selected {
+    // partner logo
+    img {
+      .size(@w: 138px, @h: 138px);
+    }
+
+    // newBadge
+    > div {
+      right: 0;
+    }
+
+    // outline
+    > span {
+      background-image: url("../../../../assets/images/partners/ic-tab-partners-selected@3x.png");
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/package.json
+++ b/com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "QuickMenuItem.jsx",
+  "styles": [
+    "QuickMenuItem.module.less"
+  ]
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
@@ -48,7 +48,7 @@ const HomeOnSale = ({ ...rest }) => {
    <Container {...rest} className={css.container}>
      <div className={css.bestSeller}>
        <h2 className={css.subTitle}>{$L("ON SALE")}</h2>
-        <TGrid type="onSaleItem">
+        <div className={css.onSaleItem}>
          {homeOnSaleInfos && homeOnSaleInfos.length > 0 && (
            <VirtualGridList
              className={css.grid}
@@ -65,7 +65,7 @@ const HomeOnSale = ({ ...rest }) => {
              spacing={ri.scale(SALE_ITEM_CONF.SPACING)}
            />
          )}
-        </TGrid>
+        </div>
      </div>
    </Container>
  );
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less
@@ -16,5 +16,85 @@

  .grid {
    height: 300px;
+    > div {
+      > div {
+        > div {
+          &:nth-child(5n + 1) {
+            > div {
+              > div {
+                background: linear-gradient(to top, #f485c3, #cc4d92);
+              }
+            }
+          }
+          &:nth-child(5n + 2) {
+            > div {
+              > div {
+                background: linear-gradient(to top, #fdbe43, #e47915);
+              }
+            }
+          }
+          &:nth-child(5n + 3) {
+            > div {
+              > div {
+                background: linear-gradient(to top, #97ca73, #3e8d18);
+              }
+            }
+          }
+          &:nth-child(5n + 4) {
+            > div {
+              > div {
+                background: linear-gradient(to top, #84b0e9, #4282d9);
+              }
+            }
+          }
+          &:nth-child(5n + 5) {
+            > div {
+              > div {
+                background: linear-gradient(to top, #a387ea, #7750dc);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.onSaleItem {
+    margin-top: 20px;
+    height: 300px;
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    // > div {
+    //   > div {
+    //     > div {
+    //       > div:nth-child(5n + 1) {
+    //         .onSaleItemListBox {
+    //           background-image: linear-gradient(to top, #f485c3, #cc4d92);
+    //         }
+    //       }
+    //       > div:nth-child(5n + 2) {
+    //         .onSaleItemListBox {
+    //           background-image: linear-gradient(to top, #fdbe43, #e47915);
+    //         }
+    //       }
+    //       > div:nth-child(5n + 3) {
+    //         .onSaleItemListBox {
+    //           background-image: linear-gradient(to top, #97ca73, #3e8d18);
+    //         }
+    //       }
+    //       > div:nth-child(5n + 4) {
+    //         .onSaleItemListBox {
+    //           background-image: linear-gradient(to top, #84b0e9, #4282d9);
+    //         }
+    //       }
+    //       > div:nth-child(5n + 5) {
+    //         .onSaleItemListBox {
+    //           background-image: linear-gradient(to top, #a387ea, #7750dc);
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
  }
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSaleItem/HomeOnSaleItem.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSaleItem/HomeOnSaleItem.module.less
@@ -16,6 +16,7 @@
    box-sizing: border-box;
    .focusDropShadow();
  }
+
  .onSaleItemListImg {
    width: 300px;
    height: 300px;
@@ -29,6 +30,7 @@
    box-sizing: border-box;
    padding: 24px;
    display: inline-block;
+
    .onSaleItemListBoxTitle {
      width: 282px;
      height: 30px;
@@ -82,29 +84,4 @@
      }
    }
  }
-  &:nth-child(5n + 1) {
-    .onSaleItemListBox {
-      background-image: linear-gradient(to top, #f485c3, #cc4d92);
-    }
-  }
-  &:nth-child(5n + 2) {
-    .onSaleItemListBox {
-      background-image: linear-gradient(to top, #fdbe43, #e47915);
-    }
-  }
-  &:nth-child(5n + 3) {
-    .onSaleItemListBox {
-      background-image: linear-gradient(to top, #97ca73, #3e8d18);
-    }
-  }
-  &:nth-child(5n + 4) {
-    .onSaleItemListBox {
-      background-image: linear-gradient(to top, #84b0e9, #4282d9);
-    }
-  }
-  &:nth-child(5n + 5) {
-    .onSaleItemListBox {
-      background-image: linear-gradient(to top, #a387ea, #7750dc);
-    }
-  }
 }
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicks.module.less
@@ -4,6 +4,7 @@
 .hotPicks {
  height: 100%;
  position: relative;
+
  > div {
    height: 100%;
  }
@@ -19,27 +20,16 @@
  .sectionWrap {
    height: 100%;
    position: relative;
+    padding: 90px 30px;

    > div {
      height: 100%;
      .flex();
-      > img {
+      img {
        width: auto;
-        max-width: 100%;
+        max-width: 1740px;
        height: auto;
        position: relative;
-        &:focus-within {
-          &::after {
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            border: 4px solid @PRIMARY_COLOR_RED;
-            position: absolute;
-            left: 0;
-            top: 0;
-            content: "";
-          }
-        }
      }
    }
    > ul {
@@ -49,14 +39,7 @@
        position: relative;
        &:focus-within {
          &::after {
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            border: 4px solid @PRIMARY_COLOR_RED;
-            position: absolute;
-            left: 0;
-            top: 0;
-            content: "";
+            .focused();
          }
        }
      }
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/HotPicksPanel.jsx
@@ -5,6 +5,7 @@ import React, {
 } from 'react';

 import classNames from 'classnames';
+import { data } from 'ilib';
 import {
  useDispatch,
  useSelector,
@@ -16,9 +17,16 @@ import { getThemeCurationInfo } from '../../actions/homeActions';
 import TBody from '../../components/TBody/TBody';
 import TPanel from '../../components/TPanel/TPanel';
 import css from './HotPicks.module.less';
-import TCFI from './Type/TCFI/TCFI'; // Full Image
-import TCFV_2 from './Type/TCFV_2/TCFV_2'; // Full Image + VOD + Item(2)
-import TCHH from './Type/TCHH/TCHH'; // Half Image X2
+import TCAD from './Type/TCAD/TCAD';
+import TCFI from './Type/TCFI/TCFI';
+import TCFI_2 from './Type/TCFI_2/TCFI_2';
+import TCFI_3 from './Type/TCFI_3/TCFI_3';
+import TCFI_4 from './Type/TCFI_4/TCFI_4';
+import TCFV from './Type/TCFV/TCFV';
+import TCFV_2 from './Type/TCFV_2/TCFV_2';
+import TCFV_3 from './Type/TCFV_3/TCFV_3';
+import TCFV_4 from './Type/TCFV_4/TCFV_4';
+import TCHH from './Type/TCHH/TCHH';

 const SpottableComponent = Spottable("button");

@@ -33,11 +41,11 @@ export default function HotPicksPanel() {
    : [];

  const [currentPage, setCurrentPage] = useState(0);
-  const currentType = [...themeCurationType][currentPage];
+  const currentType = themeCurationType[currentPage];
  const currentTypeData =
    themeCurationInfoData &&
    themeCurationInfoData.filter((item) => item.tmpltCd === currentType);
-  console.log("##themeCurationInfoData", themeCurationInfoData);
+
  const handlePrev = useCallback(() => {
    setCurrentPage((prevIndex) =>
      prevIndex === 0 ? themeCurationType.length - 1 : prevIndex - 1
@@ -50,46 +58,59 @@ export default function HotPicksPanel() {
    );
  }, [currentPage]);

-  // TCFI  : Full Image
-  // TCHH : Half Image X2
-  // TCFI_2 : Full Image + Item(2)
-  // TCFI_3 : Full Image + Item(3)
-  // TCFI_4 : Full Image + Item(4)
-  // TCFV : Full Image + VOD
-  // TCFV_2 : Full Image + VOD + Item(2)
-  // TCFV_3 : Full Image + VOD + Item(3)
-  // TCFV_4 : Full Image + VOD + Item(4)
-  // TCAD : Theme AD
+  console.log("##themeCurationInfoData", themeCurationInfoData);
+
  let typeComponent;
  switch (currentType) {
-    case "TCFI":
+    case "TCFI": // Full Image
      typeComponent = (
        <TCFI data={currentTypeData} className={css.sectionWrap} />
      );
      break;
-    case "TCFV_2":
-      typeComponent = (
-        <TCFV_2 data={currentTypeData} className={css.sectionWrap} />
-      );
-      break;
-    case "TCHH":
+    case "TCHH": // Half Image X2
      typeComponent = (
        <TCHH data={currentTypeData} className={css.sectionWrap} />
      );
      break;
-    case "TCFI_4":
+    case "TCFI_2": // Full Image + Item(2)
+      typeComponent = (
+        <TCFI_2 data={currentTypeData} className={css.sectionWrap} />
+      );
      break;
-    case "TCFI_2":
+    case "TCFI_3": // Full Image + Item(3)
+      typeComponent = (
+        <TCFI_3 data={currentTypeData} className={css.sectionWrap} />
+      );
      break;
-    case "TCFI_3":
+    case "TCFI_4": // Full Image + Item(4)
+      typeComponent = (
+        <TCFI_4 data={currentTypeData} className={css.sectionWrap} />
+      );
      break;
-    case "TCFV":
+    case "TCFV": // Full Image + VOD
+      typeComponent = (
+        <TCFV data={currentTypeData} className={css.sectionWrap} />
+      );
      break;
-    case "TCFV_4":
+    case "TCFV_2": // Full Image + VOD + Item(2)
+      typeComponent = (
+        <TCFV_2 data={currentTypeData} className={css.sectionWrap} />
+      );
      break;
-    case "TCAD":
+    case "TCFV_3": // Full Image + VOD + Item(3)
+      typeComponent = (
+        <TCFV_3 data={currentTypeData} className={css.sectionWrap} />
+      );
      break;
-    case "TCFV_3":
+    case "TCFV_4": // Full Image + VOD + Item(4)
+      typeComponent = (
+        <TCFV_4 data={currentTypeData} className={css.sectionWrap} />
+      );
+      break;
+    case "TCAD": // Theme AD
+      typeComponent = (
+        <TCAD data={currentTypeData} className={css.sectionWrap} />
+      );
      break;
    default:
      typeComponent = (
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCAD.module.less';
+
+const SpottableComponent = Spottable("div");
+
+export default function TCAD({ className, data }) {
+  console.log("##data", data);
+  return <>Full 영상</>;
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.module.less
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCAD/TCAD.module.less
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.jsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';

 import classNames from 'classnames';

+import Spotlight from '@enact/spotlight';
 import Spottable from '@enact/spotlight/Spottable';

 import css from './TCFI.module.less';
@@ -9,18 +10,27 @@ import css from './TCFI.module.less';
 const SpottableComponent = Spottable("div");

 export default function TCFI({ className, data }) {
-  console.log("##data", data);
+  useEffect(() => {
+    Spotlight.focus("spotData");
+    // if (data) {
+    //   const showInfos = data[0]?.showInfos[0];
+    //   const id = showInfos.showId;
+    //   Spotlight.focus("spotlight" + id);
+    // }
+  }, [data]);
  return (
    <>
      {data &&
        data.map(({ bgImgPath, curationNm, tmpltCd }) => {
          return (
-            <div
-              key={tmpltCd}
-              className={classNames(className ? className : "")}
+            <div key={tmpltCd} className={classNames(className && className)}>
+              <SpottableComponent
+                className={css.fullImg}
+                spotlightId="spotData"
              >
-              <SpottableComponent className={css.fullImg}>
+                <p>
                  <img src={bgImgPath} alt={curationNm} />
+                </p>
              </SpottableComponent>
            </div>
          );
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI/TCFI.module.less
@@ -0,0 +1,13 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.fullImg {
+  &:focus-within {
+    > p {
+      position: relative;
+      &::after {
+        .focused();
+      }
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFI_2.module.less';
+
+const SpottableComponent = Spottable("li");
+
+export default function TCFI_2({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(({ bgImgPath, curationNm, tmpltCd, productInfos }) => {
+          return (
+            <div key={tmpltCd} className={classNames(className && className)}>
+              <div className={css.fullImg}>
+                <img src={bgImgPath} alt={curationNm} />
+              </div>
+              <ul className={css.itemList}>
+                {productInfos &&
+                  productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => {
+                    return (
+                      <SpottableComponent key={prdtId}>
+                        <img src={imgUrl} alt={prdtNm} />
+                      </SpottableComponent>
+                    );
+                  })}
+              </ul>
+            </div>
+          );
+        })}
+    </>
+  );
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.module.less
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_2/TCFI_2.module.less
@@ -0,0 +1,15 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.itemList {
+  width: 100%;
+  justify-content: center;
+  left: 0;
+  bottom: 190px;
+  > li {
+    margin: 0 20px;
+    > img {
+      .size(@w:340px, @h:340px);
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFI_3.module.less';
+
+const SpottableComponent = Spottable("li");
+
+export default function TCFI_3({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(({ bgImgPath, curationNm, tmpltCd, productInfos }) => {
+          return (
+            <div key={tmpltCd} className={classNames(className && className)}>
+              <div className={css.fullImg}>
+                <img src={bgImgPath} alt={curationNm} />
+              </div>
+              <ul className={css.itemList}>
+                {productInfos &&
+                  productInfos.slice(0, 3).map(({ imgUrl, prdtNm, prdtId }) => {
+                    return (
+                      <SpottableComponent key={prdtId}>
+                        <img src={imgUrl} alt={prdtNm} />
+                      </SpottableComponent>
+                    );
+                  })}
+              </ul>
+            </div>
+          );
+        })}
+    </>
+  );
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.module.less
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_3/TCFI_3.module.less
@@ -0,0 +1,15 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.itemList {
+  width: 100%;
+  justify-content: center;
+  left: 0;
+  bottom: 190px;
+  > li {
+    margin: 0 20px;
+    > img {
+      .size(@w:340px, @h:340px);
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.jsx
@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+
+import classNames from 'classnames';
+
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFI_4.module.less';
+
+const SpottableComponent = Spottable("li");
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  "ul"
+);
+
+export default function TCFI_4({ className, data }) {
+  useEffect(() => {
+    if (data) {
+      const productInfos = data[0]?.productInfos[0];
+      const id = productInfos.prdtId;
+      Spotlight.focus("spotlight" + id);
+    }
+  }, [data]);
+  return (
+    <>
+      {data &&
+        data.map(({ bgImgPath, curationNm, tmpltCd, productInfos }) => {
+          return (
+            <div key={tmpltCd} className={classNames(className && className)}>
+              <div className={css.fullImg}>
+                <img src={bgImgPath} alt={curationNm} />
+              </div>
+              <Container className={css.itemList}>
+                {productInfos &&
+                  productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => {
+                    return (
+                      <SpottableComponent
+                        key={prdtId}
+                        spotlightId={"spotlight" + prdtId}
+                      >
+                        <img src={imgUrl} alt={prdtNm} />
+                      </SpottableComponent>
+                    );
+                  })}
+              </Container>
+              <Container className={css.itemList}>
+                {productInfos &&
+                  productInfos.slice(2, 4).map(({ imgUrl, prdtNm, prdtId }) => {
+                    return (
+                      <SpottableComponent key={prdtId}>
+                        <img src={imgUrl} alt={prdtNm} />
+                      </SpottableComponent>
+                    );
+                  })}
+              </Container>
+            </div>
+          );
+        })}
+    </>
+  );
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.module.less
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFI_4/TCFI_4.module.less
@@ -0,0 +1,15 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.itemList {
+  width: 524px;
+  right: 120px;
+  bottom: 180px;
+  flex-wrap: wrap;
+  > li {
+    margin: 10px;
+    > img {
+      .size(@w:242px, @h:242px);
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFV.module.less';
+
+const SpottableComponent = Spottable("li");
+
+export default function TCFV({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(({ bgImgPath, curationNm, tmpltCd, showInfos }) => {
+          return (
+            <div key={tmpltCd} className={classNames(className && className)}>
+              <div className={css.fullImg}>
+                <img src={bgImgPath} alt={curationNm} />
+              </div>
+              <ul className={css.itemList}>
+                {showInfos &&
+                  showInfos
+                    .slice(0, 1)
+                    .map(
+                      ({
+                        dfltThumbnailImgPath,
+                        showId,
+                        showNm,
+                        showUrl,
+                        thumbnailUrl,
+                      }) => {
+                        // @@@ 영상 출력 처리
+                        return (
+                          <SpottableComponent key={showId}>
+                            <img src={thumbnailUrl} alt={showNm} />
+                            {/* <video src={showUrl}></video> */}
+                          </SpottableComponent>
+                        );
+                      }
+                    )}
+              </ul>
+            </div>
+          );
+        })}
+    </>
+  );
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV/TCFV.module.less
@@ -0,0 +1,15 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.itemList {
+  right: 180px;
+  bottom: 298px;
+  > li {
+    > img {
+      .size(@w:860px, @h:484px);
+    }
+    > video {
+      .size(@w:860px, @h:484px);
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.jsx
@@ -1,40 +1,82 @@
-import React from 'react';
+import React, { useEffect } from 'react';

 import classNames from 'classnames';

+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';

 import css from './TCFV_2.module.less';

 const SpottableComponent = Spottable("li");
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  "ul"
+);

 export default function TCFV_2({ className, data }) {
-  console.log("##data", data);
+  useEffect(() => {
+    if (data) {
+      const showInfos = data[0]?.showInfos[0];
+      const id = showInfos.showId;
+      Spotlight.focus("spotlight" + id);
+    }
+  }, [data]);
  return (
    <>
      {data &&
-        data.map(({ bgImgPath, curationNm, tmpltCd, productInfos }) => {
+        data.map(
+          ({ bgImgPath, curationNm, tmpltCd, productInfos, showInfos }) => {
            return (
-            <div
-              key={tmpltCd}
-              className={classNames(className ? className : "")}
-            >
+              <div key={tmpltCd} className={classNames(className && className)}>
                <div className={css.fullImg}>
                  <img src={bgImgPath} alt={curationNm} />
                </div>
-              <ul className={css.itemList}>
+                <Container className={css.itemList}>
+                  {showInfos &&
+                    showInfos
+                      .slice(0, 1)
+                      .map(
+                        ({
+                          dfltThumbnailImgPath,
+                          showId,
+                          showNm,
+                          showUrl,
+                          thumbnailUrl,
+                        }) => {
+                          // @@@ 영상 출력 처리
+                          return (
+                            <SpottableComponent
+                              key={showId}
+                              spotlightId={"spotlight" + showId}
+                            >
+                              <img
+                                src={thumbnailUrl}
+                                alt={showNm}
+                                className={css.video}
+                              />
+                              {/* <video src={showUrl}></video> */}
+                            </SpottableComponent>
+                          );
+                        }
+                      )}
+
                  {productInfos &&
-                  productInfos.slice(0, 2).map(({ imgUrl, prdtNm, prdtId }) => {
+                    productInfos
+                      .slice(0, 2)
+                      .map(({ imgUrl, prdtNm, prdtId }) => {
                        return (
                          <SpottableComponent key={prdtId}>
                            <img src={imgUrl} alt={prdtNm} />
                          </SpottableComponent>
                        );
                      })}
-              </ul>
+                </Container>
              </div>
            );
-        })}
+          }
+        )}
    </>
  );
 }
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_2/TCFV_2.module.less
@@ -9,5 +9,9 @@
    > img {
      .size(@w:242px, @h:242px);
    }
+    > video,
+    .video {
+      .size(@w:430px, @h:242px);
+    }
  }
 }
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFV_3.module.less';
+
+const SpottableComponent = Spottable("li");
+
+export default function TCFV_3({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(
+          ({ bgImgPath, curationNm, tmpltCd, productInfos, showInfos }) => {
+            return (
+              <div
+                key={tmpltCd}
+                className={classNames(className && className, css.flexCont)}
+              >
+                <div className={css.fullImg}>
+                  {showInfos &&
+                    showInfos
+                      .slice(0, 1)
+                      .map(
+                        ({
+                          dfltThumbnailImgPath,
+                          showId,
+                          showNm,
+                          showUrl,
+                          thumbnailUrl,
+                        }) => {
+                          // @@@ 영상 출력 처리
+                          return (
+                            <SpottableComponent key={showId}>
+                              <img
+                                src={thumbnailUrl}
+                                alt={showNm}
+                                className={css.video}
+                              />
+                              {/* <video src={showUrl}></video> */}
+                            </SpottableComponent>
+                          );
+                        }
+                      )}
+                </div>
+                <ul className={css.itemList}>
+                  {productInfos &&
+                    productInfos
+                      .slice(0, 4)
+                      .map(({ imgUrl, prdtNm, prdtId }) => {
+                        return (
+                          <SpottableComponent key={prdtId}>
+                            <img src={imgUrl} alt={prdtNm} />
+                          </SpottableComponent>
+                        );
+                      })}
+                </ul>
+              </div>
+            );
+          }
+        )}
+    </>
+  );
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_3/TCFV_3.module.less
@@ -0,0 +1,22 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.flexCont {
+  padding: 135px 50px;
+  display: flex;
+  justify-content: space-between;
+  > div {
+    width: 1414px;
+  }
+}
+.itemList {
+  width: 240px;
+  position: relative !important;
+  flex-direction: column;
+  justify-content: space-between;
+  > li {
+    > img {
+      .size(@w:240px, @h:240px);
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Spottable from '@enact/spotlight/Spottable';
+
+import css from './TCFV_4.module.less';
+
+const SpottableComponent = Spottable("li");
+
+export default function TCFV_4({ className, data }) {
+  console.log("##data", data);
+  return (
+    <>
+      {data &&
+        data.map(
+          ({ bgImgPath, curationNm, tmpltCd, productInfos, showInfos }) => {
+            return (
+              <div key={tmpltCd} className={classNames(className && className)}>
+                <div className={css.fullImg}>
+                  <img src={bgImgPath} alt={curationNm} />
+                </div>
+                <ul className={css.itemList}>
+                  {showInfos &&
+                    showInfos
+                      .slice(0, 1)
+                      .map(
+                        ({
+                          dfltThumbnailImgPath,
+                          showId,
+                          showNm,
+                          showUrl,
+                          thumbnailUrl,
+                        }) => {
+                          // @@@ 영상 출력 처리
+                          return (
+                            <SpottableComponent key={showId}>
+                              <img
+                                src={thumbnailUrl}
+                                alt={showNm}
+                                className={css.video}
+                              />
+                              {/* <video src={showUrl}></video> */}
+                            </SpottableComponent>
+                          );
+                        }
+                      )}
+
+                  {productInfos &&
+                    productInfos
+                      .slice(0, 4)
+                      .map(({ imgUrl, prdtNm, prdtId }) => {
+                        return (
+                          <SpottableComponent key={prdtId}>
+                            <img src={imgUrl} alt={prdtNm} />
+                          </SpottableComponent>
+                        );
+                      })}
+                </ul>
+              </div>
+            );
+          }
+        )}
+    </>
+  );
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.module.less
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCFV_4/TCFV_4.module.less
@@ -0,0 +1,19 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.itemList {
+  width: 100%;
+  justify-content: center;
+  left: 0;
+  bottom: 200px;
+  > li {
+    margin: 10px;
+    > img {
+      .size(@w:242px, @h:242px);
+    }
+    > video,
+    .video {
+      .size(@w:430px, @h:242px);
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.jsx
@@ -1,15 +1,26 @@
-import React from 'react';
+import React, { useEffect } from 'react';

 import classNames from 'classnames';

+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';

 import css from './TCHH.module.less';

 const SpottableComponent = Spottable("div");
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused", preserveId: true },
+  "div"
+);

 export default function TCHH({ className, data }) {
-  console.log("##data", data);
+  useEffect(() => {
+    if (data) {
+      Spotlight.focus("spotlight0");
+    }
+  }, [data]);
  return (
    <>
      {data &&
@@ -17,16 +28,23 @@ export default function TCHH({ className, data }) {
          return (
            <div
              key={tmpltCd}
-              className={classNames(className ? className : "", css.halfWrap)}
+              className={classNames(className && className, css.halfWrap)}
            >
+              <Container>
                {bgImgPath &&
                  bgImgPath.slice(0, 2).map((bgImgPath, idx) => {
                    return (
-                    <SpottableComponent key={idx}>
+                      <SpottableComponent
+                        key={idx}
+                        spotlightId={"spotlight" + idx}
+                      >
+                        <p>
                          <img src={bgImgPath} alt={curationNm} />
+                        </p>
                      </SpottableComponent>
                    );
                  })}
+              </Container>
            </div>
          );
        })}
--- a/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less
+++ b/com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less
@@ -2,8 +2,20 @@
@import "../../../../style/utils.module.less";

 .halfWrap {
+  > div {
    display: flex;
    > div {
+      display: flex;
+      justify-content: center;
      flex: 1;
+      &:focus-within {
+        > p {
+          position: relative;
+          &::after {
+            .focused();
+          }
+        }
+      }
+    }
  }
 }
--- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
+++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
@@ -45,8 +45,6 @@ export default function OnSalePanel() {
      dispatch(
        getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: currentCategoryCode })
      );
-    } else {
-      dispatch(getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: "" }));
    }
  }, [currentCategoryCode, dispatch]);