TAxios에 Device Header 임시값 추가, TInput, SearchPanel 작업 중

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

@@ -12,6 +12,10 @@ import TIconButton, {
 import classNames from "classnames";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spotlight from "@enact/spotlight";
+
+import { changeAppStatus } from "../../features/common/commonSlice";
+import { getSearch } from "../../features/search/searchSlice";
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -21,12 +25,22 @@ const Container = SpotlightContainerDecorator(
 const ITEMS_PER_PAGE = 9;
 
 export default function SearchPanel() {
+  const dispatch = useDispatch();
+
+  const { showLoadingPanel } = useSelector((state) => state.common.appStatus);
   const recommandedKeywords = useSelector(
     (state) => state.myPage.recommandedKeywordData.data?.keywords
   );
+  const searchDatas = useSelector(
+    (state) => state.search.searchDatas.data?.result.results
+  );
 
   const [currentPage, setCurrentPage] = useState(1);
   const [paginatedKeywords, setPaginatedKeywords] = useState([]);
+  const [pageChanged, setPageChanged] = useState(false);
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchPerformed, setSearchPerformed] = useState(false);
 
   useEffect(() => {
     if (recommandedKeywords) {
@@ -37,18 +51,101 @@ export default function SearchPanel() {
     }
   }, [recommandedKeywords, currentPage]);
 
+  useEffect(() => {
+    if (pageChanged && paginatedKeywords.length > 0) {
+      const firstButtonSpotlightId = "first-keyword-button";
+
+      Spotlight.focus(firstButtonSpotlightId);
+
+      setPageChanged(false);
+    }
+  }, [pageChanged, paginatedKeywords]);
+
+  const handleSearchChange = useCallback((e) => {
+    const query = e.value;
+
+    if (query.length <= 255) {
+      setSearchQuery(query);
+    }
+  }, []);
+
+  const handleSearchSubmit = useCallback(async () => {
+    setSearchPerformed(true);
+
+    if (searchQuery.trim() === "") {
+      setSearchPerformed(false);
+      return;
+    }
+
+    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);
+    }
+  }, [searchQuery, dispatch]);
+
   const handleNext = useCallback(() => {
     setCurrentPage((prev) => prev + 1);
+    setPageChanged(true);
   }, [currentPage]);
 
   const handlePrev = useCallback(() => {
     setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev));
+    setPageChanged(true);
   }, [currentPage]);
 
   const hasPrevPage = currentPage > 1;
   const hasNextPage =
     currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;
 
+  const renderContents = () => {
+    if (searchPerformed) {
+      if (searchDatas && searchDatas.length > 0) {
+        return <div>data!!</div>;
+      } else {
+        return <div>SORRY</div>;
+      }
+    } else {
+      return (
+        <>
+          {hasPrevPage && (
+            <TIconButton
+              iconType={ICON_TYPES.leftArrow}
+              className={classNames(css.arrow, css.arrowLeft)}
+              onClick={handlePrev}
+            />
+          )}
+          <Container className={css.keywordsGrid}>
+            {paginatedKeywords.map((keyword, index) => (
+              <TButton
+                key={index}
+                spotlightId={index === 0 ? "first-keyword-button" : undefined}
+                className={classNames(css.keywordBox)}
+              >
+                {keyword.keywd}
+              </TButton>
+            ))}
+          </Container>
+          {hasNextPage && (
+            <TIconButton
+              iconType={ICON_TYPES.rightArrow}
+              className={classNames(css.arrow, css.arrowRight)}
+              onClick={handleNext}
+            />
+          )}
+        </>
+      );
+    }
+  };
+
   return (
     <TPanel className={css.panel}>
       <TInput
@@ -56,28 +153,11 @@ export default function SearchPanel() {
         autoFocus
         kind={KINDS.withIcon}
         icon={ICONS.search}
+        value={searchQuery}
+        onChange={handleSearchChange}
+        onIconClick={handleSearchSubmit}
       />
-      {hasPrevPage && (
-        <TIconButton
-          iconType={ICON_TYPES.leftArrow}
-          className={classNames(css.arrow, css.arrowLeft)}
-          onClick={handlePrev}
-        />
-      )}
-      <Container className={css.keywordsGrid}>
-        {paginatedKeywords.map((keyword, index) => (
-          <TButton key={index} className={css.keywordBox}>
-            {keyword.keywd}
-          </TButton>
-        ))}
-      </Container>
-      {hasNextPage && (
-        <TIconButton
-          iconType={ICON_TYPES.rightArrow}
-          className={classNames(css.arrow, css.arrowRight)}
-          onClick={handleNext}
-        />
-      )}
+      {renderContents()}
     </TPanel>
   );
 }