[저스트포유] 포유

- 카테고리,베스트,파풀러쇼에서 임의 상품에 포유 마크 붙이도록처리.
 - 포유가 붙어 있는 상품을 store에 저장하여 포유페이지에서 노출되도록 변경.

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

@@ -1,25 +1,43 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import Spotlight from "@enact/spotlight";
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
+import Spotlight from '@enact/spotlight';
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 
-import { pushPanel, updatePanel } from "../../../actions/panelActions";
-import SectionTitle from "../../../components/SectionTitle/SectionTitle";
-import TItemCard from "../../../components/TItemCard/TItemCard";
-import TScroller from "../../../components/TScroller/TScroller";
-import useScrollReset from "../../../hooks/useScrollReset";
-import useScrollTo from "../../../hooks/useScrollTo";
+import {
+  pushPanel,
+  updatePanel,
+} from '../../../actions/panelActions';
+import SectionTitle from '../../../components/SectionTitle/SectionTitle';
+import Tag from '../../../components/TItemCard/Tag';
+import TItemCard from '../../../components/TItemCard/TItemCard';
+import TitemCardNew from '../../../components/TItemCard/TitemCard.new';
+import TScroller from '../../../components/TScroller/TScroller';
+import useScrollReset from '../../../hooks/useScrollReset';
+import useScrollTo from '../../../hooks/useScrollTo';
 import {
   LOG_CONTEXT_NAME,
   LOG_MESSAGE_ID,
   panel_names,
-} from "../../../utils/Config";
-import { $L, scaleW } from "../../../utils/helperMethods";
-import { SpotlightIds } from "../../../utils/SpotlightIds";
-import css from "./BestSeller.module.less";
+} from '../../../utils/Config';
+import {
+  $L,
+  scaleW,
+} from '../../../utils/helperMethods';
+import { SpotlightIds } from '../../../utils/SpotlightIds';
+import css from './BestSeller.module.less';
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -156,6 +174,26 @@ const BestSeller = ({
     }
   }, [handleShelfFocus]);
 
+  const [bestSellerNewData, setBestSellerNewData] = useState([]);
+
+  const _randomProduct = useCallback(() => {
+    const randomChk = Math.round(Math.random()) === 0 ? false : true;
+    return randomChk;
+  }, []);
+
+  useEffect(() => {
+    setBestSellerNewData(
+      bestSellerDatas?.map((item) => ({
+        ...item,
+        foryou: _randomProduct(),
+      }))
+    );
+  }, [bestSellerDatas]);
+
+  useEffect(() => {
+    console.log("###bestSellerNewData", bestSellerNewData);
+  }, [bestSellerNewData]);
+
   return (
     <Container
       className={css.bestSellerWrap}
@@ -176,8 +214,8 @@ const BestSeller = ({
         cbScrollTo={getScrollTo}
         noScrollByWheel
       >
-        {bestSellerDatas &&
-          bestSellerDatas.map(
+        {bestSellerNewData &&
+          bestSellerNewData.map(
             (
               {
                 prdtId,
@@ -190,6 +228,7 @@ const BestSeller = ({
                 brndNm,
                 patncNm,
                 catNm,
+                foryou,
               },
               itemIndex
             ) => {
@@ -197,12 +236,12 @@ const BestSeller = ({
                 rankOrd === 1
                   ? rankOrd + "st"
                   : rankOrd === 2
-                  ? rankOrd + "nd"
-                  : rankOrd === 3
-                  ? rankOrd + "rd"
-                  : rankOrd + "th";
+                    ? rankOrd + "nd"
+                    : rankOrd === 3
+                      ? rankOrd + "rd"
+                      : rankOrd + "th";
               return (
-                <TItemCard
+                <TitemCardNew
                   key={"subItem" + itemIndex}
                   contextName={LOG_CONTEXT_NAME.HOME}
                   messageId={LOG_MESSAGE_ID.SHELF_CLICK}
@@ -226,9 +265,11 @@ const BestSeller = ({
                   offerInfo={offerInfo}
                   spotlightId={"bestsellerItem" + itemIndex}
                   firstLabel={rankText}
-                  label={itemIndex * 1 + 1 + " of " + bestSellerDatas.length}
+                  label={itemIndex * 1 + 1 + " of " + bestSellerNewData.length}
                   lastLabel=" go to detail, button"
-                />
+                >
+                  {foryou === true && <Tag text={"For You"} />}
+                </TitemCardNew>
               );
             }
           )}