[Search, TrendingNow] 스타일 및 props 변경

Detail Notes :
1. SearchPane - noData 일 경우 스타일 추가, - 검색 기본 스타일 변경
2. TrendingNow - props 변경에 따라 값 변경

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

@@ -5,10 +5,7 @@ import TPanel from "../../components/TPanel/TPanel";
 import TButton from "../../components/TButton/TButton";
 import { $L } from "../../utils/helperMethods";
 import css from "./SearchPanel.module.less";
-import TIconButton, {
+import TIconButton, { ICON_TYPES, SIZES } from "../../components/TIconButton/TIconButton";
-  ICON_TYPES,
-  SIZES,
-} from "../../components/TIconButton/TIconButton";
 import classNames from "classnames";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
@@ -20,11 +17,9 @@ import { getSearch } from "../../features/search/searchSlice";
 import SearchNoDataImage from "../../../assets/searchpanel/img-search-nodata.png";
 import TGrid from "../../components/TGrid/TGrid";
 import TItemCard from "../../components/TItemCard/TItemCard";
+import SectionTitle from "../../components/SectionTitle/SectionTitle";
 
-const Container = SpotlightContainerDecorator(
+const Container = SpotlightContainerDecorator({ enterTo: "last-focused" }, "div");
-  { enterTo: "last-focused" },
-  "div"
-);
 
 const ITEMS_PER_PAGE = 9;
 
@@ -35,13 +30,8 @@ export default function SearchPanel() {
   const recommandedKeywords = useSelector(
     (state) => state.myPage.recommandedKeywordData.data?.keywords
   );
-  const searchDatas = useSelector(
+  const searchDatas = useSelector((state) => state.search.searchDatas.data?.result.results);
-    (state) => state.search.searchDatas.data?.result.results
+  const bestSellerDatas = useSelector((state) => state.product.bestSellerData.bestSeller);
-  );
-  const bestSellerDatas = useSelector(
-    (state) => state.product.bestSellerData.bestSeller
-  );
-
   const [currentPage, setCurrentPage] = useState(1);
   const [paginatedKeywords, setPaginatedKeywords] = useState([]);
   const [pageChanged, setPageChanged] = useState(false);
@@ -124,8 +114,7 @@ export default function SearchPanel() {
   }, [currentPage]);
 
   const hasPrevPage = currentPage > 1;
-  const hasNextPage =
+  const hasNextPage = currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;
-    currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;
 
   const renderContents = () => {
     if (searchPerformed) {
@@ -133,29 +122,36 @@ export default function SearchPanel() {
         return <div>data!!</div>;
       } else {
         return (
-          <Container>
+          <Container className={css.noDataWrap}>
-            <img src={SearchNoDataImage} alt="No Datas" />
+            <div className={css.noDataResult}>
-            <p>{$L("SORRY, NO RESULTS MATCHING YOUR SEARCH")}</p>
+              <img src={SearchNoDataImage} alt="No Datas" />
-            <TGrid>
+              <p>{$L("SORRY, NO RESULTS MATCHING YOUR SEARCH")}</p>
-              {bestSellerDatas &&
+            </div>
-                bestSellerDatas
+            <div className={css.bestSellerWrap}>
-                  .slice(0, 5)
+              <SectionTitle title={$L(`BEST SELLER`)} />
-                  .map((bestSeller) => (
+              <TGrid>
-                    <TItemCard
+                {bestSellerDatas &&
-                      key={bestSeller.rankOrd}
+                  bestSellerDatas
-                      imageSource={bestSeller.imgUrl}
+                    .slice(0, 5)
-                      imageAlt={bestSeller.prdtNm}
+                    .map((bestSeller) => (
-                      productName={bestSeller.prdtNm}
+                      <TItemCard
-                      priceInfo={bestSeller.priceInfo}
+                        key={bestSeller.rankOrd}
-                    />
+                        imageSource={bestSeller.imgUrl}
-                  ))}
+                        imageAlt={bestSeller.prdtNm}
-            </TGrid>
+                        productName={bestSeller.prdtNm}
+                        priceInfo={bestSeller.priceInfo}
+                        rank={bestSeller.rankOrd}
+                        isBestSeller
+                      />
+                    ))}
+              </TGrid>
+            </div>
           </Container>
         );
       }
     } else {
       return (
-        <>
+        <div className={css.keywordWrap}>
           {hasPrevPage && (
             <TIconButton
               iconType={ICON_TYPES.leftArrow}
@@ -182,7 +178,7 @@ export default function SearchPanel() {
               onClick={handleNext}
             />
           )}
-        </>
+        </div>
       );
     }
   };

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

@@ -6,58 +6,76 @@
   width: 100%;
   height: 100%;
 
-  > section {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-  }
-
   .input {
     width: 880px;
-    margin: 0 auto 180px;
+    margin: 180px auto 0;
   }
 
-  .arrow {
+  .keywordWrap {
-    position: absolute;
+    position: relative;
-    top: 59%;
+    margin: 180px 0 0 0;
-  }
+    display: flex;
+    justify-content: space-between;
+    .arrow {
+      position: absolute;
+      top: 140px;
+    }
 
-  .arrowLeft {
+    .arrowLeft {
-    left: 60px;
+      left: 60px;
-  }
+    }
 
-  .arrowRight {
+    .arrowRight {
-    right: 60px;
+      right: 60px;
-  }
+    }
+    .keywordsGrid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-gap: 40px 80px;
+      width: 100%;
+      place-items: center;
+      padding: 0 233px;
 
-  .keywordsGrid {
+      .keywordBox {
-    display: grid;
+        width: 390px;
-    grid-template-columns: repeat(3, 1fr);
+        height: 97px;
-    grid-gap: 80px;
+        line-height: 97px;
-    width: 100%;
+        letter-spacing: -1px;
-    place-items: center;
+        border-radius: 10px;
-    padding: 0 233px;
+        box-shadow: 0 4px 8px 0 rgba(2, 3, 3, 0.2);
-
+        border: 1px solid #999;
-    .keywordBox {
-      width: 390px;
-      height: 97px;
-      border-radius: 10px;
-      box-shadow: 0 4px 8px 0 rgba(2, 3, 3, 0.2);
-      border: 1px solid #999;
-      background-color: #f5f5f5;
-      color: #333;
-      font-family: @baseFontBold;
-      font-size: 40px;
-
-      > div {
-        overflow: unset;
-      }
-
-      &:focus-within {
-        box-shadow: 0 0 50px 0 rgba(11, 8, 8, 0.5);
-        border: 4px solid #c70850;
-        color: #c70850;
         background-color: #f5f5f5;
+        color: #333;
+        .font (@fontFamily: @baseFontBold, @fontSize: 40px);
+
+        > div {
+          overflow: unset;
+        }
+
+        &:focus-within {
+          box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED,
+            0 0 50px 0 rgba(11, 8, 8, 0.5);
+          color: #c70850;
+          background-color: #f5f5f5;
+        }
+      }
+    }
+  }
+
+  .noDataWrap {
+    margin-top: 30px;
+    > .noDataResult {
+      text-align: center;
+      > p {
+        .font (@fontFamily:@baseFontBold, @fontSize:36px);
+        color: #a3a3a3;
+        margin-top: 6px;
+      }
+    }
+    .bestSellerWrap {
+      padding: 60px 60px 78px;
+      > h2 {
+        margin: 134px 0 34px;
       }
     }
   }

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

@@ -1,21 +1,18 @@
 import { useSelector } from "react-redux";
-import SectionTitle from "../../components/SectionTitle/SectionTitle";
+
-import TPanel from "../../components/TPanel/TPanel";
-import css from "./TrendingNowPanel.module.less";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
+import SectionTitle from "../../components/SectionTitle/SectionTitle";
 import TGrid from "../../components/TGrid/TGrid";
 import TItemCard from "../../components/TItemCard/TItemCard";
+import TPanel from "../../components/TPanel/TPanel";
 import { $L } from "../../utils/helperMethods";
+import css from "./TrendingNowPanel.module.less";
 
-const Container = SpotlightContainerDecorator(
+const Container = SpotlightContainerDecorator({ enterTo: "last-focused" }, "div");
-  { enterTo: "last-focused" },
-  "div"
-);
 
 export default function TrendingNowPanel() {
-  const bestSellerDatas = useSelector(
+  const bestSellerDatas = useSelector((state) => state.product.bestSellerData.bestSeller);
-    (state) => state.product.bestSellerData.bestSeller
-  );
 
   return (
     <TPanel>
@@ -30,7 +27,8 @@ export default function TrendingNowPanel() {
                 imageAlt={bestSeller.prdtNm}
                 productName={bestSeller.prdtNm}
                 priceInfo={bestSeller.priceInfo}
-                rankOrd={bestSeller.rankOrd}
+                rank={bestSeller.rankOrd}
+                isBestSeller
               />
             ))}
         </TGrid>