[OnSalePanel] OnSalePanel css 수정 (2.0 GUI 반영)

Detail Notes :

1. OnSaleProductCard 삭제 (TitemCard 대체)
2. OnSaleProductGrid 구조 변경 및 css 수정

com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx

@@ -2,10 +2,11 @@ import React, { useEffect, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
+import TBody from "../../components/TBody/TBody";
+import TItemCard from "../../components/TItemCard/TItemCard";
 import TPanel from "../../components/TPanel/TPanel";
 import { getOnSaleInfo } from "../../features/onSale/onSaleSlice";
 import CategoryNav from "../OnSalePanel/CategoryNav/CategoryNav";
-import OnSaleProductCard from "../OnSalePanel/OnSaleProductCard/OnSaleProductCard";
 import OnSaleProductsGrid from "../OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid";
 import css from "./OnSalePanel.module.less";
 
@@ -42,11 +43,6 @@ export default function OnSalePanel() {
     }
   }, [currentLgCatCd]);
 
-  useEffect(() => {
-    console.log(categoryInfos);
-    console.log(saleInfos);
-  }, []);
-
   return (
     <TPanel className={css.container}>
       <CategoryNav
@@ -54,23 +50,27 @@ export default function OnSalePanel() {
         currentLgCatCd={currentLgCatCd}
         onCategoryNavClick={handleCategoryNav}
       />
-      <div className={css.onSaleProducts}>
+      <TBody className={css.tBody}>
         {saleInfos &&
           saleInfos.map(({ saleNm, saleProductInfos }) => {
             return (
-              <OnSaleProductsGrid key={saleNm} saleNm={saleNm}>
+              <OnSaleProductsGrid key={saleNm} sectionTitle={saleNm}>
                 {saleProductInfos.map((saleProduct) => {
                   return (
-                    <OnSaleProductCard
+                    <TItemCard
                       key={saleProduct.prdtId}
-                      saleProduct={saleProduct}
+                      imageAlt={saleProduct.prdtNm}
+                      imageSource={saleProduct.imgUrl}
+                      priceInfo={saleProduct.priceInfo}
+                      productId={saleProduct.prdtId}
+                      productName={saleProduct.prdtNm}
                     />
                   );
                 })}
               </OnSaleProductsGrid>
             );
           })}
-      </div>
+      </TBody>
     </TPanel>
   );
 }

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

@@ -2,7 +2,8 @@
 @import "../../style/utils.module.less";
 
 .container {
-  .onSaleProducts {
-    margin-top: 236px;
+  background-color: #f2f2f2;
+  .tBody {
+    height: calc(1080px - 236px);
   }
 }

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.jsx

@@ -1,35 +0,0 @@
-import React from "react";
-
-import Spottable from "@enact/spotlight/Spottable";
-
-import css from "./OnSaleProductCard.module.less";
-
-const SpottableComponent = Spottable("li");
-
-export default function OnSaleProductCard({ saleProduct, ...rest }) {
-  const { imgUrl, prdtId, prdtNm, priceInfo } = saleProduct;
-
-  const originalPrice = priceInfo.split("|")[0];
-  const salePrice = priceInfo.split("|")[1];
-  const salePercentage = priceInfo.split("|").reverse()[0];
-
-  return (
-    <SpottableComponent
-      {...rest}
-      className={css.container}
-      spotlightId={prdtId}
-    >
-      <div>
-        <img src={imgUrl} alt={prdtNm} />
-        {salePercentage && <span>{salePercentage}</span>}
-      </div>
-      <div className={css.test}>
-        <h3>{prdtNm}</h3>
-        <p>
-          {salePrice}
-          <span>{originalPrice}</span>
-        </p>
-      </div>
-    </SpottableComponent>
-  );
-}

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/OnSaleProductCard.module.less

@@ -1,84 +0,0 @@
-@import "../../../style/CommonStyle.module.less";
-@import "../../../style/utils.module.less";
-
-.container {
-  position: relative;
-  .flex(@direction: column);
-  .size(@w: 260px, @h: 375px);
-  margin: 0 10px;
-  border-radius: 10px;
-  background-color: #e3e7ee;
-
-  div:nth-child(1) {
-    position: relative;
-    .size(@w: 260px, @h: 260px);
-
-    img {
-      .size(@w: 260px, @h: 260px);
-      object-fit: cover;
-      border-top-right-radius: 10px;
-      border-top-left-radius: 10px;
-    }
-
-    > span {
-      .position(@position: absolute, @top: auto, @right: auto, @bottom: 12px, @left: 12px);
-      .size(@w: 44px, @h: 44px);
-      border-radius: 44px;
-      background-color: #c70850;
-      color: #fff;
-      font-family: @baseFontBold;
-      font-size: 20px;
-      line-height: 44px;
-      text-align: center;
-    }
-  }
-
-  div:nth-child(2) {
-    .flex(@direction: column, @alignCenter: flex-start);
-    gap: 10px;
-    padding: 10px 15px;
-
-    h3 {
-      display: -webkit-box;
-      font-family: @baseFontBold;
-      font-size: 24px;
-      line-height: 26px;
-      text-overflow: ellipsis;
-      word-break: break-all;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-    p {
-      color: #c70850;
-      font-family: @baseFontBold;
-      font-size: 24px;
-
-      span {
-        margin-left: 5px;
-        color: #767676;
-        font-size: 18px;
-        text-decoration: line-through;
-      }
-    }
-  }
-
-  &::after {
-    content: "";
-    .position(@position: absolute, @top: -12px, @right: auto, @bottom: auto, @left: -12px);
-    display: block;
-    .size(@w: 276px, @h: 390px);
-    border: 4px solid transparent;
-    border-radius: 10px;
-  }
-
-  &:focus {
-    background-color: #fcfcfc;
-
-    &::after {
-      border: 4px solid #c70850;
-      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0),
-        0px 9px 15px 0 rgba(0, 0, 0, 0.3);
-    }
-  }
-}

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductCard/package.json

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

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.jsx

@@ -1,7 +1,7 @@
-import React from "react";
-
+import Scroller from "@enact/sandstone/Scroller";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
+import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import css from "./OnSaleProductsGrid.module.less";
 
 const Container = SpotlightContainerDecorator(
@@ -9,11 +9,19 @@ const Container = SpotlightContainerDecorator(
   "div"
 );
 
-export default function OnSaleProductsGrid({ saleNm, children }) {
+export default function OnSaleProductsGrid({ sectionTitle, children }) {
   return (
     <Container className={css.container}>
-      <h2>{saleNm}</h2>
+      <Scroller
+        className={css.scroller}
+        direction="horizontal"
+        horizontalScrollbar="hidden"
+        noScrollByWheel={true}
+        scrollMode="translate"
+      >
+        <SectionTitle title={sectionTitle} />
         <ul>{children}</ul>
+      </Scroller>
     </Container>
   );
 }

com.twin.app.shoptime/src/views/OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid.module.less

@@ -2,19 +2,19 @@
 @import "../../../style/utils.module.less";
 
 .container {
-  .flex(@direction:column, @alignCenter:flex-start);
-  gap: 40px;
-  width: 100%;
-  padding: 40px 0 20px 0;
+  position: relative;
+
+  .scroller {
+    padding-left: 60px;
 
     h2 {
-    margin-left: 60px;
-    font-family: @baseFontBold;
-    font-size: 38px;
+      .position(@position: sticky, @left: 0);
+      margin: 58px 0 24px;
     }
 
     ul {
-    .flex();
-    margin-left: 50px;
+      .flex(@justifyCenter: flex-start);
+      gap: 18px;
+    }
   }
 }