TGrid, TItemCard 제작 / SearchPanel style 수정 필요

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

@@ -17,6 +17,10 @@ import Spotlight from "@enact/spotlight";
 import { changeAppStatus } from "../../features/common/commonSlice";
 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";
+
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
   "div"
@@ -34,6 +38,9 @@ export default function SearchPanel() {
   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([]);
@@ -69,29 +76,43 @@ export default function SearchPanel() {
     }
   }, []);
 
-  const handleSearchSubmit = useCallback(async () => {
-    setSearchPerformed(true);
+  const performSearch = useCallback(
+    async (query) => {
+      if (!query || query.trim() === "") {
+        setSearchPerformed(false);
+        return;
+      }
 
-    if (searchQuery.trim() === "") {
-      setSearchPerformed(false);
-      return;
-    }
+      setSearchPerformed(true);
 
-    try {
-      await dispatch(
-        getSearch({
-          service: "com.lgshop.app",
-          query: searchQuery,
-          startIndex: 1,
-          maxResults: 10,
-          domain: "theme,show,item",
-        })
-      ).unwrap();
-    } catch (error) {
-      console.error("Search request failed: ", error);
-    }
+      try {
+        await dispatch(
+          getSearch({
+            service: "com.lgshop.app",
+            query: query,
+            startIndex: 1,
+            maxResults: 10,
+            domain: "theme,show,item",
+          })
+        ).unwrap();
+      } catch (error) {
+        console.error("Search request failed: ", error);
+      }
+    },
+    [dispatch]
+  );
+
+  const handleSearchSubmit = useCallback(() => {
+    performSearch(searchQuery);
   }, [searchQuery, dispatch]);
 
+  const handleKeywordSearch = useCallback(
+    (keyword) => {
+      performSearch(keyword);
+    },
+    [performSearch]
+  );
+
   const handleNext = useCallback(() => {
     setCurrentPage((prev) => prev + 1);
     setPageChanged(true);
@@ -111,7 +132,26 @@ export default function SearchPanel() {
       if (searchDatas && searchDatas.length > 0) {
         return <div>data!!</div>;
       } else {
-        return <div>SORRY</div>;
+        return (
+          <Container>
+            <img src={SearchNoDataImage} alt="No Datas" />
+            <p>{$L("SORRY, NO RESULTS MATCHING YOUR SEARCH")}</p>
+            <TGrid>
+              {bestSellerDatas &&
+                bestSellerDatas
+                  .slice(0, 5)
+                  .map((bestSeller) => (
+                    <TItemCard
+                      key={bestSeller.rankOrd}
+                      imageSource={bestSeller.imgUrl}
+                      imageAlt={bestSeller.prdtNm}
+                      productName={bestSeller.prdtNm}
+                      priceInfo={bestSeller.priceInfo}
+                    />
+                  ))}
+            </TGrid>
+          </Container>
+        );
       }
     } else {
       return (
@@ -129,6 +169,7 @@ export default function SearchPanel() {
                 key={index}
                 spotlightId={index === 0 ? "first-keyword-button" : undefined}
                 className={classNames(css.keywordBox)}
+                onClick={() => handleKeywordSearch(keyword.keywd)}
               >
                 {keyword.keywd}
               </TButton>
@@ -145,7 +186,6 @@ export default function SearchPanel() {
       );
     }
   };
-
   return (
     <TPanel className={css.panel}>
       <TInput