[FEAT] 검색바 구현 (#11)

job1/src/Component/DataSample.js

@@ -0,0 +1,37 @@
+export const post = [
+    {
+        "id": 1,
+        "title": "취업",
+        "author": "yeoul",
+        "content": "급여",
+      	"isLike": true,
+    },
+    {
+        "id": 2,
+        "title": "실업",
+        "author": "yeoul",
+        "content": "퇴직",
+      	"isLike": true,
+    },
+    {
+        "id": 3,
+        "title": "보험",
+        "author": "yeoul",
+        "content": "고용",
+      	"isLike": true,
+    },
+    {
+        "id": 4,
+        "title": "임금",
+        "author": "yeoul",
+        "content": "보험",
+      	"isLike": true,
+    },
+    {
+        "id": 5,
+        "title": "직장 내 괴롭힘",
+        "author": "yeoul",
+        "content": "실업",
+      	"isLike": true,
+    },
+]

job1/src/Component/SearchBar.css

@@ -0,0 +1,28 @@
+.search-container{
+    position: relative;
+    width: 35.875rem;
+    height: 3.625rem;
+    background: #FFF;
+}
+
+.search-input{
+    width:100%;
+    height: 100%;
+    border-radius: 2.5rem;
+    border: 2px solid #A5A5A5;
+    color: #999;
+    text-align: center;
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: DM Sans;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+}
+
+.search-icon{
+    position: absolute;
+    width: 1.5rem;
+    height: 1.5rem;
+    top: 1.3rem;
+    left: 3rem;
+}

job1/src/Component/SearchBar.js

@@ -1,14 +1,33 @@
 import { useState, useEffect } from "react";
+import { post } from "./DataSample";
+import Table from "./TestCp";
+
+import "./SearchBar.css"
+import Icon from "../Image/Search.png";
 
 function SearchBar(){
-    const [search, setSearch] = useState("");
-    const onChange=(e)=>{
-        setSearch(e.target.value);
+    const [query, setQuery] = useState("");
+    const keys = ["title", "content"]
+    const onChange = (e) => {
+        setQuery(e.target.value.toLowerCase());
     }
+    const search = (data) => {
+        return data.filter((item) =>
+            keys.some((key) => item[key].toLowerCase().includes(query))
+        );
+    };
 
     return(
-        <div>
-            <input type="text" value={search} onChange={onChange} placeholder="나의 어려움은 무엇인가요?" />
+        <div className="search-container">
+            <img className="search-icon" src={Icon} />
+            <input
+                className="search-input"
+                type="text" 
+                value={query}
+                onChange={onChange} 
+                placeholder="나의 어려움은 무엇인가요?" 
+            />
+            {/* <Table data={search(post)} /> */}
         </div>
     )
 }

job1/src/Component/TestCp.js

@@ -0,0 +1,18 @@
+const Table = ({ data }) => {
+    return (
+      <table>
+        <tbody>
+          <tr>
+            <th>Title</th>
+          </tr>
+          {data.map((item) => (
+            <tr key={item.id}>
+              <td>{item.title}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  };
+
+  export default Table;

job1/src/View/Search.js

@@ -1,14 +1,26 @@
 
 import SearchBar from "../Component/SearchBar";
 
+import styled from 'styled-components';
+
 function Search(){
     return(
-        <div>
+        <SearchContainer>
             <h2>나의 Job을 슬기롭게 일구다</h2>
             <p>취업 준비, 혹은 직장 생활 중의 고민거리나 어려움을 나누고 현명하게 해결하세요</p>
             <SearchBar />
-        </div>
+        </SearchContainer>
     )
 }
 
-export default Search;
+export default Search;
+
+const SearchContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+`