feat: 게시글 검색기능 구현

codeit-sprint-fullstack · Dec 8, 2024 · f0f7575 · f0f7575
1 parent 7f2475c
commit f0f7575
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/next_sprint/components/Header.js b/next_sprint/components/Header.js
@@ -13,7 +13,7 @@ export default function Header() {
 
   return (
     <>
-      <header className="flex fixed w-full flex-wrap items-center px-4 lg:px-[200px] sm:px-6 h-[70px] border-b-[1px] bg-white">
+      <header className="flex fixed w-full flex-wrap items-center px-4 lg:px-[200px] sm:px-6 h-[70px] border-b-[1px] bg-white z-[1000]">
         <Link href="/" >
           <Image src="/img/panda_logo.png" alt="logo" width={153} height={51} />
         </Link>

diff --git a/next_sprint/pages/community.js b/next_sprint/pages/community.js
@@ -3,6 +3,8 @@ import DropDown from "@/components/DropDown";
 import axios from "axios"
 import Image from "next/image";
 import { useState } from "react";
+import { useCallback } from "react";
+
 
 const BASE_URL = process.env.BASE_URL;
 
@@ -31,20 +33,27 @@ export default function Community({articles}) {
   const [filteredData, setFilteredData] = useState(articles);
   const [selectedOption, setSelectedOption] = useState('최신순');
   const [isOpen, setIsOpen] = useState(false);
+
+
+  const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
 
   const handleOptionClick = (option) => {
     setSelectedOption(option);
     setIsOpen(false);
   }
-
-  const handleSearch = async () => {
-    try {
-      const res = await axios.get(`${BASE_URL}/articles?word=${searchKeyWord}`);
-      setFilteredData(res.data.data);
-    } catch(error) {
-      console.error("서치 에러 발생", error);
+
+  const handleKeyDown = async (e) => {
+    if (e.key === 'Enter') {
+      try {
+        const encodedQuery = encodeURIComponent(searchKeyWord);
+        const res = await axios.get(`${BASE_URL}/articles?word=${encodedQuery}`);
+        setFilteredData(res.data.data);
+        console.log("Enter 키로 검색된 API 요청 URL:", `${BASE_URL}/articles?word=${encodedQuery}`);
+      } catch (error) {
+        console.error("Enter 키 에러 발생", error);
+      }
     }
-  }
+  };
 
   return <div className="flex flex-col mt-24 lg:mx-[240px] md:mx-[20px] gap-10 ">    
     <h1 className="text-[20px] leading-6 text-custom_coolGray font-bold">베스트 게시글</h1>
@@ -58,7 +67,7 @@ export default function Community({articles}) {
                 {article.title}
               </h2>
               <span className="bg-white w-[72px] h-[72px] border border-gray-400 border-opacity-25 rounded-lg">
-                <Image src="/img/default_img.png" width={48} height={44} className="mt-3 ml-3" />
+                <Image src="/img/default_img.png" alt="default-img" width={48} height={44} className="mt-3 ml-3" />
               </span>
             </div>
           </li>
@@ -71,8 +80,8 @@ export default function Community({articles}) {
       <Button>글쓰기</Button>
     </div>
 
-    <div className="relative flex flex-col gap-10">
-      <div className="flex gap-5">
+    <div className="relative flex flex-col gap-10 z-0">
+      <div className="relative flex gap-5">
         <Image
           src="/img/search_icon.png"
           alt="Search Icon"
@@ -83,7 +92,10 @@ export default function Community({articles}) {
         <input
           type="text"
           value={searchKeyWord}
-          onChange={(e) => setSearchKeyWord(e.target.value)}
+          onChange={(e) => {
+            setSearchKeyWord(e.target.value);
+          }}
+          onKeyDown={handleKeyDown}
           placeholder="검색할 상품을 입력해주세요"
           className="w-5/6 h-[42px] bg-custom_coolGray50 rounded-xl focus:outline-none pl-9"
         />
@@ -99,7 +111,7 @@ export default function Community({articles}) {
                 {article.title}
               </h2>
               <span className="bg-white w-[72px] h-[72px] border border-gray-400 border-opacity-25 rounded-lg ml-auto">
-                <Image src="/img/default_img.png" width={48} height={44} className="mt-3 ml-3" />
+                <Image src="/img/default_img.png" alt="default-img" width={48} height={44} className="mt-3 ml-3" />
               </span>
             </div>
           </li>