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

Detail Notes : 1. SearchPane - noData 일 경우 스타일 추가, - 검색 기본 스타일 변경 2. TrendingNow - props 변경에 따라 값 변경
2024-01-29 19:10:27 +09:00
parent 6706ef8a2b
commit d690537b3e
3 changed files with 103 additions and 91 deletions
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx
+++ b/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, {
-  ICON_TYPES,
-  SIZES,
-} from "../../components/TIconButton/TIconButton";
+import 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(
-  { enterTo: "last-focused" },
-  "div"
-);
+const Container = SpotlightContainerDecorator({ 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(
-    (state) => state.search.searchDatas.data?.result.results
-  );
-  const bestSellerDatas = useSelector(
-    (state) => state.product.bestSellerData.bestSeller
-  );
-
+  const searchDatas = useSelector((state) => state.search.searchDatas.data?.result.results);
+  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 =
-    currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;
+  const hasNextPage = currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;

  const renderContents = () => {
    if (searchPerformed) {
@@ -133,9 +122,13 @@ export default function SearchPanel() {
        return <div>data!!</div>;
      } else {
        return (
-          <Container>
+          <Container className={css.noDataWrap}>
+            <div className={css.noDataResult}>
              <img src={SearchNoDataImage} alt="No Datas" />
              <p>{$L("SORRY, NO RESULTS MATCHING YOUR SEARCH")}</p>
+            </div>
+            <div className={css.bestSellerWrap}>
+              <SectionTitle title={$L(`BEST SELLER`)} />
              <TGrid>
                {bestSellerDatas &&
                  bestSellerDatas
@@ -147,15 +140,18 @@ export default function SearchPanel() {
                        imageAlt={bestSeller.prdtNm}
                        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>
      );
    }
  };
--- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.module.less
+++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.module.less
@@ -6,20 +6,19 @@
  width: 100%;
  height: 100%;

-  > section {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-  }
-
  .input {
    width: 880px;
-    margin: 0 auto 180px;
+    margin: 180px auto 0;
  }

+  .keywordWrap {
+    position: relative;
+    margin: 180px 0 0 0;
+    display: flex;
+    justify-content: space-between;
    .arrow {
      position: absolute;
-    top: 59%;
+      top: 140px;
    }

    .arrowLeft {
@@ -29,11 +28,10 @@
    .arrowRight {
      right: 60px;
    }
-
    .keywordsGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
-    grid-gap: 80px;
+      grid-gap: 40px 80px;
      width: 100%;
      place-items: center;
      padding: 0 233px;
@@ -41,24 +39,44 @@
      .keywordBox {
        width: 390px;
        height: 97px;
+        line-height: 97px;
+        letter-spacing: -1px;
        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;
+        .font (@fontFamily: @baseFontBold, @fontSize: 40px);

        > div {
          overflow: unset;
        }

        &:focus-within {
-        box-shadow: 0 0 50px 0 rgba(11, 8, 8, 0.5);
-        border: 4px solid #c70850;
+          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;
+      }
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx
+++ b/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(
-  { enterTo: "last-focused" },
-  "div"
-);
+const Container = SpotlightContainerDecorator({ enterTo: "last-focused" }, "div");

 export default function TrendingNowPanel() {
-  const bestSellerDatas = useSelector(
-    (state) => state.product.bestSellerData.bestSeller
-  );
+  const bestSellerDatas = useSelector((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>