- 메인 bestseller쪽 금액표시부분 수정

- mainSlice부분 오기입 수정
- onsale,popularshow부분 수정

com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx

@@ -28,6 +28,7 @@ export default memo(function ProductCard({
   soldoutFlag,
   type = TYPE_VERTICAL,
   accType = false,
+  offerInfo,
   ...rest
 }) {
   const handleClick = useCallback(
@@ -83,7 +84,11 @@ export default memo(function ProductCard({
       <div>
         <h3>{productName}</h3>
         <p>
-          {discountRate ? discountedPrice : originalPrice}
+          {offerInfo != ""
+            ? offerInfo
+            : discountRate
+            ? discountedPrice
+            : originalPrice}
           {discountRate && (
             <span>{accType ? originalPrice : discountRate}</span>
           )}

com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less

@@ -145,7 +145,7 @@
       gap: 5px;
       .font(@fontFamily: @baseFontBold, @fontSize: 30px);
       color: @PRIMARY_COLOR_RED;
-
+      letter-spacing: -1px;
       span {
         .font(@fontFamily: @baseFont, @fontSize: 18px);
         color: @COLOR_GRAY04;

com.twin.app.shoptime/src/features/main/mainSlice.js

@@ -35,7 +35,7 @@ export const getSubCategory = createAsyncThunk(
   }
 );
 
-//메인화면 Live Show 정보 조회 IF-LGSP-069
+//TOP20 영상 목록 조회 IF-LGSP-069
 export const getTop20Show = createAsyncThunk(
   "main/getTop20Show",
 

com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

@@ -1,7 +1,5 @@
 import React, { useCallback, useEffect, useState, useRef } from "react";
 import { useSelector } from "react-redux";
-import TPanel from "../../../components/TPanel/TPanel";
-import TButton from "../../../components/TButton/TButton";
 import { $L } from "../../../utils/helperMethods";
 import css from "./BestSeller.module.less";
 import classNames from "classnames";
@@ -10,17 +8,13 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
 import Spotlight from "@enact/spotlight";
 import Scroller from "@enact/sandstone/Scroller";
 
-import { changeAppStatus } from "../../../features/common/commonSlice";
-import { getSearch } from "../../../features/search/searchSlice";
-
 import TGrid from "../../../components/TGrid/TGrid";
 import TItemCard from "../../../components/TItemCard/TItemCard";
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 
 const Container = SpotlightContainerDecorator(
-  { enterTo: "last-focused" },
-  "div",
-  "li"
+  { enterTo: "last-focused", leaveFor: { left: "", right: "" } },
+  "div"
 );
 
 const BestSeller = () => {
@@ -50,6 +44,7 @@ const BestSeller = () => {
                   rank={bestSeller.rankOrd}
                   isBestSeller
                   accType
+                  offerInfo={bestSeller.offerInfo}
                 />
               ))}
           </TGrid>

com.twin.app.shoptime/src/views/HomePanel/OnSale/OnSale.jsx

@@ -17,15 +17,13 @@ import { getOnSaleInfo } from "../../../features/onSale/onSaleSlice";
 
 import css from "./OnSale.module.less";
 
-const SpottableComponent = Spottable("div");
-
 const Container = SpotlightContainerDecorator(
-  {
-    enterTo: "default-element",
-  },
+  { leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
   "div"
 );
 
+const SpottableComponent = Spottable("li");
+
 const OnSale = ({
   isOnTop,
   spotlightId,
@@ -59,7 +57,7 @@ const OnSale = ({
               }
               item.priceInfo.split("|")[0];
               return (
-                <li key={index} className={css.onSaleItemList}>
+                <SpottableComponent key={index} className={css.onSaleItemList}>
                   <img src={item.imgUrl} className={css.onSaleItemListImg} />
                   <div className={css.onSaleItemListBox}>
                     <div className={css.onSaleItemListBoxTitle}>
@@ -81,7 +79,7 @@ const OnSale = ({
                       </span>
                     </div>
                   </div>
-                </li>
+                </SpottableComponent>
               );
             })}
         </ul>

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { $L } from "../../../utils/helperMethods";
 import { Job } from "@enact/core/util";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 import Spotlight from "@enact/spotlight";
 import Spottable from "@enact/spotlight/Spottable";
 import Scroller from "@enact/sandstone/Scroller";
@@ -9,6 +10,11 @@ import { getTop20Show } from "../../../features/main/mainSlice";
 import classNames from "classnames";
 import css from "../PopularShow/PopularShow.module.less";
 
+const Container = SpotlightContainerDecorator(
+  { leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
+  "div"
+);
+
 const SpottableComponent = Spottable("li");
 
 const PopularShow = (...rest) => {
@@ -27,8 +33,8 @@ const PopularShow = (...rest) => {
           {topInfos &&
             topInfos.map((item) => {
               return (
-                <li
-                  key={item.listItem}
+                <SpottableComponent
+                  key={item.expsOrd}
                   className={classNames(
                     item.thumbnailUrl960 == item.thumbnailUrl
                       ? css.listItemVertical
@@ -45,7 +51,7 @@ const PopularShow = (...rest) => {
                   >
                     {item.showNm}
                   </div>
-                </li>
+                </SpottableComponent>
               );
             })}
         </ul>

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx

@@ -18,9 +18,11 @@ import TItemCard from "../../../components/TItemCard/TItemCard";
 
 import { getSubCategory } from "../../../features/main/mainSlice";
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+
 const Container = SpotlightContainerDecorator(
   {
-    enterTo: "default-element",
+    leaveFor: { left: "", right: "" },
+    enterTo: "last-focused",
   },
   "div"
 );
@@ -45,7 +47,6 @@ const SubCategory = () => {
   };
 
   useEffect(() => {
-    console.log(testchk);
     if (categoryInfos && !currentLgCatCd) {
       const initialLgCatCd = categoryInfos[0].lgCatCd;
       setCurrentLgCatCd(initialLgCatCd);
@@ -97,7 +98,7 @@ const SubCategory = () => {
             subCategoryData.slice(0, 9).map((item) => {
               return (
                 <TItemCard
-                  key={item.expsOrd}
+                  key={item.rankOrd}
                   imageSource={item.imgUrl}
                   imageAlt={item.prdtNm}
                   productName={item.prdtNm}