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

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(

com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx

@@ -1,10 +1,4 @@
-import React, {
+import React, { useCallback, useRef, useState } from "react";
-  useCallback,
-  useEffect,
-  useMemo,
-  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,
+  showSubTab = false,
-  isArrow = false,
+  temp,
+  setTemp,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
-  const [pressed, setPressed] = useState(false);
+  const [fixed, setFixed] = useState(false);
-  const itemRef = useRef();
-
   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);
+  }, [showSubTab]);
-  }, []);
-
-  const isDivider = useMemo(() => {
-    if (!title || !path) {
-      return false;
-    }
-    return true;
-  }, []);
 
   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,
+        focused && css.focused,
-        !isSubItem && focused && isArrow && css.arrow,
+        showSubTab && fixed && css.fixed,
-
+        !isSubItem && focused && showSubTab && css.arrow,
-        path && css.path,
+        selected && css.selected
-        isSubItem && css.subDepth,
-        !path && !isDivider && selected && css.selected,
-        focused && path && css.ImgFocus,
-        selected && css.ImgSelect
       )}
       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)}>
+        {expanded && title && (
-          <span className={css[`category-icon-${lgCatCd}`]} />
+          <Marquee
-
+            className={classNames(css.text, isSubItem && css.subItem)}
-          {path ? <ImageComponent /> : <TextComponent />}
+            marqueeOn={"focus"}
-        </div>
+          >
+            {title}
+          </Marquee>
+        )}
+        {/* <TabItemSub /> */}
       </div>
     </SpottableComponent>
   );

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,73 +30,42 @@
           .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{
+    &.fixed {
-      width: 386px;
+        color: #eee;
-      height: 78px;
+        background: linear-gradient(to right, #cb1253, #e15ba1);
-      padding-left: 42px;
+        border-radius: 42px;
+        width: 402px;
+        z-index: 1;
+        margin-left: 30px;
+        position:relative;
   
-      &.focused {
+        &.arrow {
-        background: rgba(255, 255, 255, .1);
+          &::after {
-        border-radius: 0px;
+            content: "";
-        border-right: 6px solid #c70850;
+            .size(@w:36px, @h:36px);
-        margin-left: 0px;
+            .position(@position: absolute, @top: 24px, @right: 18px);
-        > div {
+            background-image: url('../../../assets/icons/ic-lnb-right-arrow.png');
-        padding-left: 30px;
+            background-size: 36px 36px;      
+          } 
         }
-      } 
-      &.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 {
+.itemWrap {
-      .size(@w: 120px, @h: 120px);
+    display: flex;
-    }
+      &.focused {
-
+        margin-left : -30px;
-    &.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");
-      }
-    }
-  }
-
 .icon {
     position: relative;
     min-width: @ICON_SIZE;
@@ -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");
-    }
-}
-}
 
 
 

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;

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

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 = () => {
+  const onBlur = useCallback(() => {
-    setFocused(false);
+    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) &&

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 {

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 }) {
+export default function Banner({ brandTopImgInfo, selectedBrandInfo }) {
-  const { logoImgAlt, logoImgPath, patncNm } = selectedBrandInfo;
   const { topImgAlt, topImgPath } = brandTopImgInfo;
+  const { logoImgAlt, logoImgPath, patncNm } = selectedBrandInfo;
 
   return (
     <div className={css.container}>

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,50 +35,69 @@ 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 handleQuickMenuClick = useCallback(
-  const [selectedPatnrId, setSelectedPatnrId] = useState("1");
+    (patnrId) => {
+      if (selectedPatnrId === patnrId) {
+        return;
+      }
 
-  const handleQuickMenu = (patnrId) => {
+      setSelectedPatnrId(patnrId);
-    setSelectedPatnrId(patnrId);
+    },
-  };
+    [selectedPatnrId]
+  );
 
   useEffect(() => {
-    if (brandInfo) {
+    if (!brandInfo) {
-      setSelectedBrandInfo(getSelectedBrandInfo(brandInfo, selectedPatnrId));
+      dispatch(getBrandList());
     }
+  }, [brandInfo, dispatch]);
 
-    dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId }));
+  useEffect(() => {
-    dispatch(getBrandLiveChannelInfo({ patnrId: selectedPatnrId }));
+    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}>
-      {brandInfo && brandInfo.length > 1 && (
+      <TBody>
-        <QuickMenu
+        {brandInfo && brandInfo.length > 1 && (
-          brandInfo={brandInfo}
+          <QuickMenu
-          onQuickMenuClick={handleQuickMenu}
+            brandInfo={brandInfo}
-          selectedPatnrId={selectedPatnrId}
+            onQuickMenuClick={handleQuickMenuClick}
-        />
+            selectedPatnrId={selectedPatnrId}
-      )}
-
-      {selectedBrandInfo && (
-        <Banner
-          selectedBrandInfo={selectedBrandInfo}
-          brandTopImgInfo={brandTopImgInfo}
-        />
-      )}
-
-      <div className={css.sectionContainer}>
-        {brandChanInfo && (
-          <LiveChannels
-            brandChanInfo={brandChanInfo[0]}
-            brandChannelCnt={brandChannelCnt}
           />
         )}
-      </div>
+
+        {brandTopImgInfo && selectedBrandInfo && (
+          <Banner
+            brandTopImgInfo={brandTopImgInfo}
+            selectedBrandInfo={selectedBrandInfo}
+          />
+        )}
+
+        <div className={css.sectionContainer}>
+          {brandChanInfo && (
+            <LiveChannels
+              brandChanInfo={brandChanInfo[0]}
+              brandChannelCnt={brandChannelCnt}
+            />
+          )}
+        </div>
+      </TBody>
     </TPanel>
   );
 }

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.module.less

@@ -1,4 +1,7 @@
 .container {
+  .tBody {
+    height: 1080px;
+  }
   .sectionContainer {
     padding-left: 60px;
   }

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
+  console.log();
-  // saleProductInfos = {
-  //  imgUrl,
-  //  lgCatCd,
-  //  lgCatNm,
-  //  OfferInfo = null,
-  //  patncNm,
-  //  patnrId,
-  //  prdtNm,
-  //  priceInfo
-  // }
-  // 현재 OnSalePanel 실사용 = imgUrl, prdtId, prdtNm, priceInfo
 
-  // getBrandLiveChannelInfo → brandChanInfo → brandProductInfo
+  const renderItem = ({ index, ...rest }) => {
-  // brandProductInfo = {
+    const { prdtImgUrl, prdtId, prdtNm, priceInfo, soldoutFlag } =
-  //  freeShippingFlag = null, // 무료배송 여부
+      brandProductInfo[index];
-  //  offerInfo = "", // 제공 정보
+    return (
-  //  prdtId,
+      <>
-  //  prdtImgUrl,
+        <TItemCard
-  //  prdtNm,
+          key={prdtId}
-  //  priceInfo, // 할인 전 금액, 할인 후(최종) 금액, 리워드여부, save금액, off(할인 %)
+          imageAlt={prdtNm}
-  //  revwGrd = null, 리뷰 등급 (별점)
+          imageSource={prdtImgUrl}
-  //  soldoutFlag,
+          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}>
-                direction="vertical"
+                {brandProductInfo && (
-                noScrollByWheel={true}
+                  <VirtualGridList
-                scrollMode="translate"
+                    className={css.virtualGridList}
-                verticalScrollbar="hidden"
+                    dataSize={brandProductInfo.length}
-              >
+                    direction="vertical"
-                <ul>
+                    itemRenderer={renderItem}
-                  {brandProductInfo &&
+                    itemSize={{
-                    brandProductInfo.map(
+                      minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
-                      ({
+                      minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
-                        prdtId,
+                    }}
-                        prdtImgUrl,
+                    noScrollByWheel
-                        prdtNm,
+                    scrollMode="translate"
-                        priceInfo,
+                    spacing={ri.scale(LIST_ITEM_CONF.SAPCING)}
-                        soldoutFlag,
+                    verticalScrollbar="hidden"
-                      }) => {
+                  />
-                        return (
+                )}
-                          <TItemCard
+              </div>
-                            key={prdtId}
-                            imageAlt={prdtNm}
-                            imageSource={prdtImgUrl}
-                            priceInfo={priceInfo}
-                            productId={prdtId}
-                            productName={prdtNm}
-                            soldoutFlag={soldoutFlag}
-                            type="horizontal"
-                          />
-                        );
-                      }
-                    )}
-                </ul>
-              </Scroller>
             </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>

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;
+    .flex(@justifyCenter: flex-start);
-    width: @globalWidth;
+    width: 100%;
 
-    // product scroll container
+    .tempContainer {
-    > .scroller {
+      .size(@w: 660px, @h: 564px);
-      width: 720px;
+      .virtualGridList {
+        // overflow: unset;
 
-      ul {
+        > div {
-        display: flex;
+          // overflow: unset !important;
-        flex-direction: column;
+        }
-        gap: 12px;
-        height: 564px;
       }
     }
   }

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveVideoCard/LiveVideoCard.jsx

@@ -54,13 +54,7 @@ export default memo(function LiveVideoCard({
 
       <div>
         <div>
-          <img
+          <img src={IcLiveShow} alt={$L(LIVE_SHOW_STRING)} />
-            src={IcLiveShow}
-            alt={
-              // @@pyh Todo, alt 값 언어처리 유무
-              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
+            <img src={IcWarning} alt={$L(WARNING_STRING)} />
-              src={IcWarning}
-              alt={
-                // @@pyh Todo, alt 값 언어처리 유무
-                WARNING_STRING
-              }
-            />
             <span>{$L(WARNING_MESSAGE)}</span>
           </div>
         )}

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();
   }
 }

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 { VirtualGridList } from "@enact/sandstone/VirtualList";
-import SpotlightContainerDecorator
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-  from '@enact/spotlight/SpotlightContainerDecorator';
+import ri from "@enact/ui/resolution";
-import Spottable from '@enact/spotlight/Spottable';
 
-import { $L } from '../../../utils/helperMethods';
+import QuickMenuItem from "../QuickMenuItem/QuickMenuItem";
-import css from './QuickMenu.module.less';
+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) => {
+  const renderItem = useCallback(
-    if (selectedPatnrId === patnrId) {
+    ({ index, ...rest }) => {
-      return;
+      return (
-    }
+        <QuickMenuItem
-
+          brandInfo={brandInfo}
-    onQuickMenuClick(patnrId);
+          index={index}
-  };
+          selectedPatnrId={selectedPatnrId}
-
+          onQuickMenuClick={onQuickMenuClick}
-  useEffect(() => {
+          {...rest}
-    console.log("@@ brandInfo", brandInfo);
+        />
-    // @@pyh Todo, change to logic
+      );
-    // const element = document.getElementById(selectedPatnrId);
+    },
-
+    [brandInfo, selectedPatnrId, onQuickMenuClick]
-    Spotlight.focus("spotlight" + selectedPatnrId);
+  );
-  }, []);
 
   return (
-    <Container {...rest} className={css.container}>
+    <Container className={css.container} {...rest}>
-      <ul>
+      {brandInfo && (
-        {brandInfo &&
+        <VirtualGridList
-          brandInfo.map(({ logoImgAlt, logoImgPath, newFlag, patnrId }) => {
+          className={css.virtualGridList}
-            return (
+          dataSize={brandInfo.length}
-              <SpottableComponent
+          direction="horizontal"
-                className={patnrId === selectedPatnrId && css.selected}
+          horizontalScrollbar="hidden"
-                id={patnrId}
+          itemRenderer={renderItem}
-                key={patnrId}
+          itemSize={{
-                onClick={() => handleClick(patnrId)}
+            minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
-                spotlightId={"spotlight" + patnrId}
+            minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
-              >
+          }}
-                {newFlag === "Y" && (
+          noScrollByWheel
-                  <span className={css.newBagde}>{$L("NEW")}</span>
+          scrollMode="translate"
-                )}
+          // spacing={ri.scale(LIST_ITEM_CONF.SAPCING)}
-                <span className={css.outline} />
+        />
-                <img src={logoImgPath} alt={logoImgAlt} />
+      )}
-              </SpottableComponent>
-            );
-          })}
-      </ul>
     </Container>
   );
 }

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 {
+  .virtualGridList {
-    .flex(@justifyCenter: flex-start);
+    overflow: unset;
-    gap: 18px;
 
-    /* normal */
+    > div {
-    li {
+      overflow: unset !important;
-      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");
-        }
-      }
     }
   }
 }

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

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

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/QuickMenuItem/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "QuickMenuItem.jsx",
+  "styles": [
+    "QuickMenuItem.module.less"
+  ]
+}

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>
   );

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

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

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%;
+            .focused();
-            height: 100%;
-            box-sizing: border-box;
-            border: 4px solid @PRIMARY_COLOR_RED;
-            position: absolute;
-            left: 0;
-            top: 0;
-            content: "";
           }
         }
       }

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 TCAD from './Type/TCAD/TCAD';
-import TCFV_2 from './Type/TCFV_2/TCFV_2'; // Full Image + VOD + Item(2)
+import TCFI from './Type/TCFI/TCFI';
-import TCHH from './Type/TCHH/TCHH'; // Half Image X2
+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
+  console.log("##themeCurationInfoData", themeCurationInfoData);
-  // 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
   let typeComponent;
   switch (currentType) {
-    case "TCFI":
+    case "TCFI": // Full Image
       typeComponent = (
         <TCFI data={currentTypeData} className={css.sectionWrap} />
       );
       break;
-    case "TCFV_2":
+    case "TCHH": // Half Image X2
-      typeComponent = (
-        <TCFV_2 data={currentTypeData} className={css.sectionWrap} />
-      );
-      break;
-    case "TCHH":
       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 = (

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 영상</>;
+}

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
+            <div key={tmpltCd} className={classNames(className && className)}>
-              key={tmpltCd}
+              <SpottableComponent
-              className={classNames(className ? className : "")}
+                className={css.fullImg}
-            >
+                spotlightId="spotData"
-              <SpottableComponent className={css.fullImg}>
+              >
-                <img src={bgImgPath} alt={curationNm} />
+                <p>
+                  <img src={bgImgPath} alt={curationNm} />
+                </p>
               </SpottableComponent>
             </div>
           );

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

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

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

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

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

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

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

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

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

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(
-          return (
+          ({ bgImgPath, curationNm, tmpltCd, productInfos, showInfos }) => {
-            <div
+            return (
-              key={tmpltCd}
+              <div key={tmpltCd} className={classNames(className && className)}>
-              className={classNames(className ? className : "")}
+                <div className={css.fullImg}>
-            >
+                  <img src={bgImgPath} alt={curationNm} />
-              <div className={css.fullImg}>
+                </div>
-                <img src={bgImgPath} alt={curationNm} />
+                <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 }) => {
+                        return (
+                          <SpottableComponent key={prdtId}>
+                            <img src={imgUrl} alt={prdtNm} />
+                          </SpottableComponent>
+                        );
+                      })}
+                </Container>
               </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>
-          );
-        })}
     </>
   );
 }

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

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

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

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

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

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)}
             >
-              {bgImgPath &&
+              <Container>
-                bgImgPath.slice(0, 2).map((bgImgPath, idx) => {
+                {bgImgPath &&
-                  return (
+                  bgImgPath.slice(0, 2).map((bgImgPath, idx) => {
-                    <SpottableComponent key={idx}>
+                    return (
-                      <img src={bgImgPath} alt={curationNm} />
+                      <SpottableComponent
-                    </SpottableComponent>
+                        key={idx}
-                  );
+                        spotlightId={"spotlight" + idx}
-                })}
+                      >
+                        <p>
+                          <img src={bgImgPath} alt={curationNm} />
+                        </p>
+                      </SpottableComponent>
+                    );
+                  })}
+              </Container>
             </div>
           );
         })}

com.twin.app.shoptime/src/views/HotPicksPanel/Type/TCHH/TCHH.module.less

@@ -2,8 +2,20 @@
 @import "../../../../style/utils.module.less";
 
 .halfWrap {
-  display: flex;
   > div {
-    flex: 1;
+    display: flex;
+    > div {
+      display: flex;
+      justify-content: center;
+      flex: 1;
+      &:focus-within {
+        > p {
+          position: relative;
+          &::after {
+            .focused();
+          }
+        }
+      }
+    }
   }
 }

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]);