diff --git a/src/App.js b/src/App.js
index b2d07d9..95f1ded 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,8 +14,12 @@ import SignUp from "./account/SignUp";
import Complete from "./account/Complete";
import Calendarr from "./calendar/Calendarr";
import MentoCalendar from "./calendarMento/MentoCalendar";
+
+import SearchBoard from "./search/SearchBoard";
+
import UploadPost from "./uploadPost/UploadPost";
+
function App() {
return (
@@ -30,6 +34,7 @@ function App() {
}>
} />
+ } />
} />
} />
diff --git a/src/account/LogIn.js b/src/account/LogIn.js
index d95e721..3f9695e 100644
--- a/src/account/LogIn.js
+++ b/src/account/LogIn.js
@@ -119,7 +119,6 @@ const LogIn = () => {
- {/*
*/}
{message}
-
-
diff --git a/src/header/search/Search.js b/src/header/search/Search.js
index 03eb62b..86fce91 100644
--- a/src/header/search/Search.js
+++ b/src/header/search/Search.js
@@ -8,6 +8,7 @@ export default function Search() {
const onChange = (e) => {
setSearch(e.target.value);
};
+
const filterResult = member.filter((p) => {
return (
p.title
diff --git a/src/search/SearchBoard.jsx b/src/search/SearchBoard.jsx
new file mode 100644
index 0000000..97649f5
--- /dev/null
+++ b/src/search/SearchBoard.jsx
@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import heart from "./heart.png";
+
+import Header from "../header/Header";
+
+import styles from "./searchboard.module.css";
+
+export default function SearchBoard() {
+ const navigate = useNavigate();
+ const [data, setData] = useState([]);
+
+ useEffect(() => {
+ // API 호출
+ fetch("https://api.zionhann.shop/app/makeup/posts/images")
+ .then((response) => response.json())
+ .then((data) => setData(data.data));
+ }, []);
+
+ const handleContainerClick = (num) => {
+ navigate("/post/" + num);
+ };
+
+ const truncate = (str, n) => {
+ return str?.length > n ? str.substr(0, n - 1) + "..." : str;
+ };
+
+ if (data.length === 0) return <>loading...;
+
+ return (
+
+
+
+ {[...Array(4)].map((_, colIndex) => (
+
+ {[...Array(4)].map((_, rowIndex) => {
+ const itemIndex = rowIndex * 4 + colIndex;
+ const item = data[itemIndex];
+ if (!item) return null;
+ return (
+
+
handleContainerClick(item.photo_id)}
+ style={{ backgroundImage: `url(${item.imageUrl})` }}
+ >
+
+ {truncate(item.text, 12)}
+
+
+
+
+
+ );
+ })}
+
+ ))}
+
+