TIconButton, TInpu 추가 및 SearchPanel 작언 중

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

@@ -1,16 +1,26 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import TInput from "../../components/TInput/TInput";
+import TInput, { KINDS, ICONS } from "../../components/TInput/TInput";
 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 classNames from "classnames";
+
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
 
 const ITEMS_PER_PAGE = 9;
 
 export default function SearchPanel() {
-  const dispatch = useDispatch();
-
   const recommandedKeywords = useSelector(
     (state) => state.myPage.recommandedKeywordData.data?.keywords
   );
@@ -35,25 +45,39 @@ export default function SearchPanel() {
     setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev));
   }, [currentPage]);
 
+  const hasPrevPage = currentPage > 1;
+  const hasNextPage =
+    currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;
+
   return (
     <TPanel className={css.panel}>
-      <TInput className={css.input} autoFocus />
-      <div>
+      <TInput
+        className={css.input}
+        autoFocus
+        kind={KINDS.withIcon}
+        icon={ICONS.search}
+      />
+      {hasPrevPage && (
+        <TIconButton
+          iconType={ICON_TYPES.leftArrow}
+          className={classNames(css.arrow, css.arrowLeft)}
+          onClick={handlePrev}
+        />
+      )}
+      <Container className={css.keywordsGrid}>
         {paginatedKeywords.map((keyword, index) => (
-          <div key={index}>{keyword.keywd}</div>
+          <TButton key={index} className={css.keywordBox}>
+            {keyword.keywd}
+          </TButton>
         ))}
-      </div>
-      <div>
-        <TButton onClick={handlePrev} disabled={currentPage === 1}>
-          PREV
-        </TButton>
-        <TButton
+      </Container>
+      {hasNextPage && (
+        <TIconButton
+          iconType={ICON_TYPES.rightArrow}
+          className={classNames(css.arrow, css.arrowRight)}
           onClick={handleNext}
-          disabled={currentPage * ITEMS_PER_PAGE >= recommandedKeywords?.length}
-        >
-          NEXT
-        </TButton>
-      </div>
+        />
+      )}
     </TPanel>
   );
 }