feat : css + 검색

LikeLionHGU · Feb 23, 2024 · 6677be9 · 6677be9
1 parent 4ed3752
commit 6677be9
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 64 deletions.
diff --git a/src/header/Header.js b/src/header/Header.js
@@ -11,7 +11,7 @@ import logout from "./image/logout.png";
 
 import styles from "./Header.module.css";
 
-export default function Header() {
+export default function Header({ search }) {
   return (
     <div className={styles.header}>
       <span className={styles.logo}>
@@ -21,7 +21,7 @@ export default function Header() {
         </Link>
       </span>
       <span id={styles.search}>
-        <Search></Search>
+        <Search search={search}></Search>
       </span>
       <span id={styles.post}>
         <Link to="/write">

diff --git a/src/header/Header.module.css b/src/header/Header.module.css
@@ -26,10 +26,11 @@
   border: 2px solid black;
 }
 #search input {
-  width: 497px;
+  width: 480px;
   height: 40px;
   border-radius: 40px;
   margin-right: 25px;
+  padding-left: 25px;
 }
 
 #post button {

diff --git a/src/header/image/ehe.png b/src/header/image/ehe.png
diff --git a/src/header/search/Search.js b/src/header/search/Search.js
@@ -1,53 +1,43 @@
 import { useState } from "react";
 import dummy from "./dummydata.json";
+
+import ehe from "../image/ehe.png";
+
+import styles from "./Search.module.css";
+
 import { Link, useNavigate } from "react-router-dom";
 
-export default function Search() {
-  const [search, setSearch] = useState("");
+export default function Search({ search: prevSearch }) {
+  const [search, setSearch] = useState(prevSearch);
   const [member] = useState(dummy.data);
   const navigate = useNavigate();
 
   const onChange = (e) => {
     setSearch(e.target.value);
   };
 
-  // const filterResult = member.filter((p) => {
-  //   return (
-  //     p.title
-  //       .replace(" ", "")
-  //       .toLocaleLowerCase()
-  //       .includes(search.toLocaleLowerCase().replace(" ", "")) ||
-  //     p.body
-  //       .replace(" ", "")
-  //       .toLocaleLowerCase()
-  //       .includes(search.toLocaleLowerCase().replace(" ", "")) ||
-  //     p.tag
-  //       .replace(" ", "")
-  //       .toLocaleLowerCase()
-  //       .includes(search.toLocaleLowerCase().replace(" ", "")) ||
-  //     p.nickname
-  //       .replace(" ", "")
-  //       .toLocaleLowerCase()
-  //       .includes(search.toLocaleLowerCase().replace(" ", ""))
-  //   );
-  // });
-
   const handleKeyPress = (e) => {
     if (e.key === "Enter") {
       console.log({ search });
-      navigate("/searchboard", { search });
+      navigate("/searchboard", { state: { search } });
     }
   };
 
   return (
     <div>
-      <div className="content">
-        <input
-          type="text"
-          value={search}
-          onChange={onChange}
-          onKeyDown={handleKeyPress}
-        ></input>
+      <div className={styles.content}>
+        <span className={styles.input}>
+          <input
+            type="text"
+            value={search}
+            onChange={onChange}
+            onKeyDown={handleKeyPress}
+            placeholder="화장을 알지 못하는 그대들에게...🩷"
+          ></input>
+          <span className={styles.image}>
+            <img src={ehe} />
+          </span>
+        </span>
       </div>
     </div>
   );

diff --git a/src/header/search/Search.module.css b/src/header/search/Search.module.css
@@ -0,0 +1,16 @@
+.content {
+  /* display: flex; */
+}
+.input {
+  position: relative;
+}
+.input input {
+  height: 100px;
+}
+
+.content .image {
+  position: absolute;
+  right: 45px;
+  top: 0;
+  bottom: 0;
+}
diff --git a/src/search/SearchBoard.jsx b/src/search/SearchBoard.jsx
@@ -9,19 +9,22 @@ import styles from "./searchboard.module.css";
 
 export default function SearchBoard() {
   const navigate = useNavigate();
-  const [data, setData] = useState([]);
-  const { search } = useLocation();
+  const [data, setData] = useState();
+  const { state } = useLocation();
+  const { search } = state;
+  console.log({ search });
+
   // const {search} = state;
 
   useEffect(() => {
     // API 호출
-    fetch("https://api.zionhann.shop/app/makeup/posts/search?keyword=")
+    fetch("https://api.zionhann.shop/app/makeup/posts/search?keyword=" + search)
       .then((response) => response.json())
       .then((data) => setData(data.data));
-  }, []);
+  }, [search]);
 
   const handleContainerClick = (num) => {
-    navigate("/post/" + num);
+    navigate("/UploadPost/" + num);
   };
 
   const truncate = (str, n) => {
@@ -43,48 +46,48 @@ export default function SearchBoard() {
   //   }
   // };
 
-  if (data.length === 0) return <>loading...</>;
+  if (!data) return <>loading...</>;
 
   return (
     <div className={styles.searchboard}>
-      <Header></Header>
-      <h1>{search}</h1>
+      <Header search={search}></Header>
+      {/* <h1>{search}</h1> */}
       <div className={styles.container}>
         {[...Array(4)].map((_, colIndex) => (
           <div key={colIndex}>
             {[...Array(4)].map((_, rowIndex) => {
               const itemIndex = rowIndex * 4 + colIndex;
               const item = data[itemIndex];
 
-              const filterResult = data.filter((p) => {
-                return (
-                  p.title
-                    .replace(" ", "")
-                    .toLocaleLowerCase()
-                    .includes(search.toLocaleLowerCase().replace(" ", "")) ||
-                  p.body
-                    .replace(" ", "")
-                    .toLocaleLowerCase()
-                    .includes(search.toLocaleLowerCase().replace(" ", "")) ||
-                  p.tag
-                    .replace(" ", "")
-                    .toLocaleLowerCase()
-                    .includes(search.toLocaleLowerCase().replace(" ", "")) ||
-                  p.nickname
-                    .replace(" ", "")
-                    .toLocaleLowerCase()
-                    .includes(search.toLocaleLowerCase().replace(" ", ""))
-                );
-              });
+              // const filterResult = data.filter((p) => {
+              //   return (
+              //     p.title
+              //       .replace(" ", "")
+              //       .toLocaleLowerCase()
+              //       .includes(search.toLocaleLowerCase().replace(" ", "")) ||
+              //     p.body
+              //       .replace(" ", "")
+              //       .toLocaleLowerCase()
+              //       .includes(search.toLocaleLowerCase().replace(" ", "")) ||
+              //     p.tag
+              //       .replace(" ", "")
+              //       .toLocaleLowerCase()
+              //       .includes(search.toLocaleLowerCase().replace(" ", "")) ||
+              //     p.nickname
+              //       .replace(" ", "")
+              //       .toLocaleLowerCase()
+              //       .includes(search.toLocaleLowerCase().replace(" ", ""))
+              //   );
+              // });
 
               if (!item) return null;
               return (
                 <div className={styles.bottom}>
-                  <h1>{search}</h1>
+                  {/* <h1>{search}</h1> */}
                   <div
                     key={item.photo_id}
                     className={styles.rect}
-                    onClick={() => handleContainerClick(item.photo_id)}
+                    onClick={() => handleContainerClick(item.postId)}
                     style={{ backgroundImage: `url(${item.imageUrl})` }}
                   >
                     <div className={styles.hoverText}>