엄성진 / Learn_In_Web

Go to a project
Toggle navigation Toggle navigation pinning
sungjin
5dee7418 1 parent e09d3b22

End all search feature

Inline Side-by-side
Showing 2 changed files with 11 additions and 8 deletions
...@@ -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"; 1 import { searchPost } from "../api/post/post";
2 import { useState } from "react"; 2 import { useState } from "react";
3 +import { SearchIcon } from "@heroicons/react/outline";
3 4
4 export default function Search() { 5 export default function Search() {
5 - const handleSubmit = async (e) => { 6 + const handleSubmit = async (e) => {
6 e.preventDefault(); 7 e.preventDefault();
7 const search = await searchPost(e.target.search.value); 8 const search = await searchPost(e.target.search.value);
8 console.log(search) 9 console.log(search)
...@@ -12,13 +13,15 @@ export default function Search() { ...@@ -12,13 +13,15 @@ export default function Search() {
12 const [result, setResult] = useState([]); 13 const [result, setResult] = useState([]);
13 14
14 return ( 15 return (
15 - <div> 16 + <div className=" ml-10 mr-10">
16 <form onSubmit={handleSubmit}> 17 <form onSubmit={handleSubmit}>
17 - <input name="search" id="search" placeholder="Search Something..."></input> 18 + <input name="search" id="search" placeholder="Search Something..." className="w-[90%] h-10 text-xl"></input>
18 - <button type="submit">Search</button> 19 + <button type="submit">
20 + <SearchIcon className="h-10 ml-2 -mb-3 rounded-full border-black border-2 p-1" />
21 + </button>
19 </form> 22 </form>
20 <div> 23 <div>
21 - <h1>Search Result</h1> 24 + <h1 className="text-2xl font-bold">Search Result</h1>
22 {result.map((post) => { 25 {result.map((post) => {
23 return ( 26 return (
24 <div> 27 <div>
......