sungjin

Merge search feature to master

...@@ -71,4 +71,14 @@ export const createComment = async (id, content) => { ...@@ -71,4 +71,14 @@ export const createComment = async (id, content) => {
71 throw new Error('Failed to create comment!'); 71 throw new Error('Failed to create comment!');
72 } 72 }
73 return response.data; 73 return response.data;
74 +}
75 +
76 +export const searchPost = async (search) => {
77 + const response = await axios.post(`${SERVER_BASE_URL}/post/search/`, {
78 + search,
79 + });
80 + if (response.status !== 200 && response.status !== 201) {
81 + throw new Error('Failed to get posts!');
82 + }
83 + return response.data;
74 } 84 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,7 +2,7 @@ import { ...@@ -2,7 +2,7 @@ import {
2 HomeIcon, 2 HomeIcon,
3 SearchIcon, 3 SearchIcon,
4 UserIcon, 4 UserIcon,
5 - CubeIcon, 5 + TerminalIcon,
6 MailIcon, 6 MailIcon,
7 StarIcon 7 StarIcon
8 } from "@heroicons/react/outline" 8 } from "@heroicons/react/outline"
...@@ -17,13 +17,13 @@ function Header() { ...@@ -17,13 +17,13 @@ function Header() {
17 <header className="flex flex-col sm:flex-row m-5 mt-0 pt-5 justify-between items-center"> 17 <header className="flex flex-col sm:flex-row m-5 mt-0 pt-5 justify-between items-center">
18 <Link href="/" passHref> 18 <Link href="/" passHref>
19 <div className="flex cursor-pointer transform hover:scale-105"> 19 <div className="flex cursor-pointer transform hover:scale-105">
20 - <CubeIcon className="h-20" /> 20 + <TerminalIcon className="h-20" />
21 <p className="text-7xl font-extrabold" >Learn In Web</p> 21 <p className="text-7xl font-extrabold" >Learn In Web</p>
22 </div></Link> 22 </div></Link>
23 <div className="flex flex-grow justify-evenly max-w-sm"> 23 <div className="flex flex-grow justify-evenly max-w-sm">
24 <HeaderItem title='HOME' Icon={HomeIcon} link="/" /> 24 <HeaderItem title='HOME' Icon={HomeIcon} link="/" />
25 <HeaderItem title='STAR' Icon={StarIcon} link="/" /> 25 <HeaderItem title='STAR' Icon={StarIcon} link="/" />
26 - <HeaderItem title='SEARCH' Icon={SearchIcon} link="/" /> 26 + <HeaderItem title='SEARCH' Icon={SearchIcon} link="/search/" />
27 <HeaderItem title='ACCOUNT' Icon={UserIcon} link="/" /> 27 <HeaderItem title='ACCOUNT' Icon={UserIcon} link="/" />
28 <Islogin /> 28 <Islogin />
29 </div> 29 </div>
......
1 +import { searchPost } from "../api/post/post";
2 +import { useState } from "react";
3 +import { SearchIcon } from "@heroicons/react/outline";
4 +
5 +export default function Search() {
6 + const handleSubmit = async (e) => {
7 + e.preventDefault();
8 + const search = await searchPost(e.target.search.value);
9 + console.log(search)
10 + setResult(search);
11 + }
12 +
13 + const [result, setResult] = useState([]);
14 +
15 + return (
16 + <div className=" ml-10 mr-10">
17 + <form onSubmit={handleSubmit}>
18 + <input name="search" id="search" placeholder="Search Something..." className="w-[90%] h-10 text-xl"></input>
19 + <button type="submit">
20 + <SearchIcon className="h-10 ml-2 -mb-3 rounded-full border-black border-2 p-1" />
21 + </button>
22 + </form>
23 + <div>
24 + <h1 className="text-2xl font-bold">Search Result</h1>
25 + {result.map((post) => {
26 + return (
27 + <div>
28 + <h2>{post.title}</h2>
29 + </div>
30 + )
31 + })}
32 + </div>
33 + </div>
34 + );
35 +}
...\ No newline at end of file ...\ No newline at end of file