SearchPanel 작업 진행 중 - chw

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

@@ -1,5 +1,59 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import TInput 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";
+
+const ITEMS_PER_PAGE = 9;
 
 export default function SearchPanel() {
-  return <TPanel>Search</TPanel>;
+  const dispatch = useDispatch();
+
+  const recommandedKeywords = useSelector(
+    (state) => state.myPage.recommandedKeywordData.data?.keywords
+  );
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [paginatedKeywords, setPaginatedKeywords] = useState([]);
+
+  useEffect(() => {
+    if (recommandedKeywords) {
+      const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+      const endIndex = startIndex + ITEMS_PER_PAGE;
+
+      setPaginatedKeywords(recommandedKeywords.slice(startIndex, endIndex));
+    }
+  }, [recommandedKeywords, currentPage]);
+
+  const handleNext = useCallback(() => {
+    setCurrentPage((prev) => prev + 1);
+  }, [currentPage]);
+
+  const handlePrev = useCallback(() => {
+    setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev));
+  }, [currentPage]);
+
+  return (
+    <TPanel className={css.panel}>
+      <TInput className={css.input} autoFocus />
+      <div>
+        {paginatedKeywords.map((keyword, index) => (
+          <div key={index}>{keyword.keywd}</div>
+        ))}
+      </div>
+      <div>
+        <TButton onClick={handlePrev} disabled={currentPage === 1}>
+          PREV
+        </TButton>
+        <TButton
+          onClick={handleNext}
+          disabled={currentPage * ITEMS_PER_PAGE >= recommandedKeywords?.length}
+        >
+          NEXT
+        </TButton>
+      </div>
+    </TPanel>
+  );
 }