feat: 검색 기능 추가

Kernel360 · Apr 4, 2024 · 4f927ba · 4f927ba
1 parent b2ea23f
commit 4f927ba
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 7 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,17 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
 import classNames from 'classnames/bind';
+import { useRouter } from 'next/navigation';
 
+import Flex from '@/components/shared/flex/Flex';
+import HomeSearchBar from '@/components/shared/home-search-bar/HomeSearchBar';
+import ImgToText from '@/components/shared/ocr/OCR';
 import ProductList from '@components/home/product-list/ProductList';
 import { MOCK_BANNER_DATA } from '@mocks/homeHandler/mocks';
 // import { TEST_MOCK_BANNER_DATA } from '@mocks/homeHandler/mocks';
@@ -16,6 +28,30 @@ import styles from './page.module.scss';
 const cx = classNames.bind(styles);
 
 function Home() {
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const { Img } = await ImgToText();
+        const text = await Img();
+        console.log(text);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const keywordRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+  // const [trigger, setTrigger] = useState(false);
+  // useEffect(() => {
+  //   Img();
+  // }, []);
+  const handleSearch = () => {
+    router.push(`/search?keyword=${keywordRef.current?.value}`);
+  };
+
   return (
     <>
       <Header className={cx('home')} type="home" />
@@ -24,6 +60,11 @@ function Home() {
         <Spacing size={8} />
         {/* <Spacing size={220} /> */}
         <div className={cx('recommendWrapper')}>
+          <Flex justify="center">
+            <HomeSearchBar ref={keywordRef} handleSearch={handleSearch} />
+          </Flex>
+          <Spacing size={80} />
+
           <Text typography="t4" bold>
             추천 세차용품
           </Text>

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
@@ -1,12 +1,14 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-hooks/exhaustive-deps */
 
 'use client';
 
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
 import classNames from 'classnames/bind';
+import { useSearchParams, useRouter } from 'next/navigation';
 
 import { SEARCH_FILTER_MAP, SearchFilterType } from '@constants/searchByMap';
 import useSearchProductByFilter from '@remote/queries/search/useSearchProductByFilter';
@@ -30,13 +32,27 @@ const options = [
 ];
 
 function SearchPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const getItem = searchParams.get('keyword') as string;
+
   const keywordRef = useRef<HTMLInputElement>(null);
   const [trigger, setTrigger] = useState(false);
 
   const handleSearch = () => {
-    setTrigger((prev) => { return !prev; });
+    setTrigger((prev) => {
+      return !prev;
+    });
   };
 
+  useEffect(() => {
+    if (keywordRef.current) {
+      // router.push(`/search?keyword=${keywordRef.current.value}`);
+      keywordRef.current.value = getItem;
+      handleSearch();
+    }
+  }, []);
+
   const { register, watch } = useForm({
     defaultValues: {
       filter: 'viewCnt-order',
@@ -46,7 +62,9 @@ function SearchPage() {
   const [isOpenFilterDrawer, setIsOpenFilterDrawer] = useState(false);
 
   const handleFilterClick = () => {
-    setIsOpenFilterDrawer((prev) => { return !prev; });
+    setIsOpenFilterDrawer((prev) => {
+      return !prev;
+    });
   };
 
   //
@@ -55,7 +73,10 @@ function SearchPage() {
     hasNextPage,
     loadMore,
     productCount,
-  } = useSearchProductByFilter(keywordRef.current?.value, watch('filter') as SearchFilterType);
+  } = useSearchProductByFilter(
+    keywordRef.current?.value,
+    watch('filter') as SearchFilterType,
+  );
 
   return (
     <>
@@ -67,7 +88,9 @@ function SearchPage() {
           <Text typography="t6" color="gray400">{`총 ${productCount}개`}</Text>
           <Dropdown
             options={options}
-            selectedLabel={(SEARCH_FILTER_MAP[watch('filter') as SearchFilterType])}
+            selectedLabel={
+              SEARCH_FILTER_MAP[watch('filter') as SearchFilterType]
+            }
             type="favorite"
             {...register('filter')}
           />
@@ -76,7 +99,11 @@ function SearchPage() {
           dataLength={productList?.length ?? 0}
           next={loadMore}
           hasMore={hasNextPage}
-          loader={<div className="loader" key={0}>Loading ...</div>}
+          loader={(
+            <div className="loader" key={0}>
+              Loading ...
+            </div>
+          )}
           inverse={false}
           style={{ overflow: 'visible' }}
         >
@@ -87,7 +114,12 @@ function SearchPage() {
           </div>
         </InfiniteScroll>
       </main>
-      <Drawer isOpen={isOpenFilterDrawer} onClose={() => { setIsOpenFilterDrawer(false); }}>
+      <Drawer
+        isOpen={isOpenFilterDrawer}
+        onClose={() => {
+          setIsOpenFilterDrawer(false);
+        }}
+      >
         {/* 필터 내용 아코디언 */}
         <p>Filter Content</p>
       </Drawer>