[mainPanel] subCategory 적용 및 디자인 변경

- Homepanel 쪽으로 파일 위치변경
- subCategory TGrid,TItemCard적용.
- mainSlice 부분 정보 수정

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

@@ -0,0 +1,93 @@
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+  useRef,
+} from "react";
+import { useDispatch, useSelector } from "react-redux";
+import classNames from "classnames";
+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 { getOnSaleInfo } from "../../../features/onSale/onSaleSlice";
+
+import css from "./OnSale.module.less";
+
+const SpottableComponent = Spottable("div");
+
+const Container = SpotlightContainerDecorator(
+  {
+    enterTo: "default-element",
+  },
+  "div"
+);
+
+const OnSale = ({
+  isOnTop,
+  spotlightId,
+  onScrollTop,
+  onScrollShelf,
+  ...rest
+}) => {
+  const dispatch = useDispatch();
+  const HomeSaleInfos = useSelector(
+    (state) => state.onSale.onSaleData.homeOnSaleInfos
+  );
+
+  useEffect(() => {
+    dispatch(getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: "" }));
+  }, []);
+
+  return (
+    <Container {...rest} spotlightId={spotlightId} className={css.container}>
+      <div className={css.bestSeller}>
+        <h2 className={css.subTitle}>{$L("ON SALE")}</h2>
+        <ul className={css.onSaleItem}>
+          {HomeSaleInfos &&
+            HomeSaleInfos.map((item, index) => {
+              const priceInfo = item.priceInfo;
+              let salePrice;
+              const originalPrice = priceInfo.split("|")[0];
+              if (priceInfo.split("|")[3] == "") {
+                salePrice = priceInfo.split("|")[1];
+              } else {
+                salePrice = priceInfo.split("|")[1];
+              }
+              item.priceInfo.split("|")[0];
+              return (
+                <li key={index} className={css.onSaleItemList}>
+                  <img src={item.imgUrl} className={css.onSaleItemListImg} />
+                  <div className={css.onSaleItemListBox}>
+                    <div className={css.onSaleItemListBoxTitle}>
+                      {item.catNm}
+                    </div>
+                    <div className={css.onSaleItemListBoxSaleBox}>
+                      up to&nbsp;
+                      <span className={css.onSaleItemListBoxSaleBoxPer}>
+                        {item.dcRate}%
+                      </span>
+                    </div>
+                    <div className={css.onSaleItemListBoxName}>
+                      {item.prdtNm}
+                    </div>
+                    <div className={css.onSaleItemListBoxPrice}>
+                      {salePrice}
+                      <span className={css.onSaleItemListBoxPriceStripe}>
+                        {originalPrice}
+                      </span>
+                    </div>
+                  </div>
+                </li>
+              );
+            })}
+        </ul>
+      </div>
+    </Container>
+  );
+};
+
+export default OnSale;