[FEAT] 검색어에 해당하는 게시물만 보이도록 기능 구현 (#11)

Hongmoon-gak · Jul 25, 2023 · 086b7f3 · 086b7f3
1 parent 76a6d26
commit 086b7f3
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 51 deletions.
diff --git a/job1/src/App.js b/job1/src/App.js
@@ -24,7 +24,7 @@ function App() {
           <Route path="/login" element={<Login />} />
           <Route path="/mypage" element={<MyPage />} />
           <Route path="/write" element={<Write />} />
-          <Route path="/result" element={<SearchResult />} />
+          <Route path="/search" element={<SearchResult />} />
         </Routes>
         <Footer />
       </Router>

diff --git a/job1/src/Main/Preview/DataSample.js b/job1/src/Main/Preview/DataSample.js
@@ -0,0 +1,42 @@
+export const post = [
+  {
+    id: 1,
+    title: "취업",
+    likes: "50",
+    date: "08. 01.",
+    type: "laws",
+    contents: "취약계층이 어쩌구 저쩌구..",
+  },
+  {
+    id: 2,
+    title: "실업",
+    likes: "23",
+    date: "08. 01.",
+    type: "laws",
+    contents: "취약계층이 어쩌구 저쩌구..",
+  },
+  {
+    id: 3,
+    title: "보험",
+    likes: "1",
+    date: "08. 01.",
+    type: "news",
+    contents: "취약계층이 어쩌구 저쩌구..",
+  },
+  {
+    id: 4,
+    title: "임금",
+    likes: "46",
+    date: "08. 02.",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+  },
+  {
+    id: 5,
+    title: "직장 내 괴롭힘",
+    likes: "90",
+    date: "08. 02.",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+  },
+];
diff --git a/job1/src/Main/Preview/PrevCont.js b/job1/src/Main/Preview/PrevCont.js
diff --git a/job1/src/Main/Preview/Preview.js b/job1/src/Main/Preview/Preview.js
@@ -1,9 +1,36 @@
-import PrevCont from "./PrevCont";
+import PrevArt from "./PrevArt";
 import PrevCommOp from "./PrevCommOp";
 import { Link, useNavigate } from "react-router-dom";
+import { useState } from "react";
 import "./Preview.css";
 
+import { post } from "./DataSample";
+
 function Preview(props) {
+  const items = post
+    .filter((data) => {
+      if (
+        (data.title.toLowerCase().includes(props.query) ||
+          data.contents.toLowerCase().includes(props.query)) &&
+        data.type === props.type
+      ) {
+        return data;
+      }
+    })
+    .map((data) => {
+      return (
+        <div className="cArtView">
+          <PrevArt
+            title={data.title}
+            type={props.type}
+            link=""
+            likes={data.likes}
+            date={data.date}
+          />
+          <hr />
+        </div>
+      );
+    });
   const navigate = useNavigate();
   const navigateToWrite = () => {
     navigate("./write");
@@ -12,15 +39,13 @@ function Preview(props) {
     return props.type === "home" ? (
       <PrevCommOp />
     ) : (
-      <p className="resultNum">
-        총 {props.resultNum}건의 검색 결과가 있습니다.
-      </p>
+      <p className="resultNum">총 {items.length}건의 검색 결과가 있습니다.</p>
     );
   };
   const selectBottom = () => {
     return props.type !== "home" ? (
       <div className="previewBottom">
-        <Link to={"#"} className="moreResult">
+        <Link to={`./${props.type}/${props.query}`} className="moreResult">
           검색 결과 더 보기
         </Link>
       </div>
@@ -29,20 +54,25 @@ function Preview(props) {
   const selectBtn = () => {
     return props.type === "home" ? (
       <button className="cWriteBtn" onClick={navigateToWrite}>
-        {props.btn}
+        글쓰기
       </button>
     ) : null;
   };
+  console.log(props.query);
+  console.log(post);
+  /* 
+  const [searchWord, setSearch] = useState(props.query);
+ */
+
   return (
     <div className="previewContainer">
-      <h2 className="cHead">{props.title}</h2>
+      <h2 className="cHead">{props.typeTitle}</h2>
       <div className="bar">
         {selectType()}
         {selectBtn()}
       </div>
       <hr />
-      <PrevCont type={props.type} />
-      <hr />
+      {items}
       {selectBottom()}
     </div>
   );

diff --git a/job1/src/View/Home.js b/job1/src/View/Home.js
@@ -2,14 +2,14 @@ import Search from "../View/Search";
 import Preview from "../Main/Preview/Preview";
 import MoreInfo from "../Main/MoreInfo";
 
-function Home(){
-    return(
-        <div>
-            <Search />
-            <Preview title="게시판" btn="글쓰기" type="home" />
-            <MoreInfo/>
-        </div>
-    )
+function Home() {
+  return (
+    <div>
+      <Search />
+      <Preview title="게시판" type="home" />
+      <MoreInfo />
+    </div>
+  );
 }
 
 export default Home;
diff --git a/job1/src/View/SearchResult.js b/job1/src/View/SearchResult.js
@@ -1,12 +1,23 @@
 import Preview from "../Main/Preview/Preview";
+import Search from "./Search";
+
+import { useLocation } from "react-router-dom";
 
 function SearchResult() {
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const query = searchParams.get("query");
   return (
     <div>
-      Search Result
-      <Preview title="법률" btn="더보기" resultNum="30" type="laws" />
-      <Preview title="새 소식" btn="더보기" resultNum="30" type="news" />
-      <Preview title="게시판" btn="더보기" resultNum="30" type="community" />
+      <Search />
+      <Preview typeTitle="법률" resultNum="30" type="laws" query={query} />
+      <Preview typeTitle="새 소식" resultNum="30" type="news" query={query} />
+      <Preview
+        typeTitle="게시판"
+        resultNum="30"
+        type="community"
+        query={query}
+      />
     </div>
   );
 }