From 518d43bc6ee918738ebb5aa8413fbeea332aa9dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Fri, 12 Feb 2021 13:07:53 +0900
Subject: [PATCH] fix: some bugs

---
 components/Paginator.tsx |  4 ++--
 components/Search.tsx    | 21 +++++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/Paginator.tsx b/components/Paginator.tsx
index 48aa977..c829d9b 100644
--- a/components/Paginator.tsx
+++ b/components/Paginator.tsx
@@ -5,7 +5,7 @@ const Paginator = ({ currentPage, totalPage, pathname }:PaginatorProps):JSX.Elem
 	else if(currentPage > totalPage - 3) pages = [ totalPage - 4 < 1 ? null : totalPage - 4, totalPage - 3 < 1 ? null : totalPage - 3, totalPage - 2 < 1 ? null : totalPage - 2, totalPage - 1 < 1 ? null : totalPage - 1, totalPage ]
 	else pages = [ currentPage - 2 < 1 ? null : currentPage - 2, currentPage - 1 < 1 ? null : currentPage - 1, currentPage, currentPage + 1 > totalPage ? null : currentPage + 1, currentPage + 2 > totalPage ? null : currentPage + 2 ]
 	pages = pages.filter(el => el)
-	return <div className='flex flex-col items-center my-12 text-center justify-center'>
+	return <div className='flex flex-col items-center py-12 text-center justify-center'>
 		<div className='flex'>
 			<Link href={{ pathname, query: { page: currentPage - 1} }}>
 				<a className={`${currentPage === 1 ? 'invisible' : ''} h-12 w-12 mr-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}>
@@ -14,7 +14,7 @@ const Paginator = ({ currentPage, totalPage, pathname }:PaginatorProps):JSX.Elem
 			</Link>
 			{
 				pages.map((el, i) => <Link key={i} href={{ pathname, query: { page: el } }}>
-					<a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${i===0 ? 'rounded-l-full' : i===pages.length-1 ? 'rounded-r-full' : ''} ${currentPage === el ? 'bg-gray-300 dark:bg-discord-dark-hover' : 'bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover'}`}>{el}</a>
+					<a className={`w-12 md:flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${i===0 && i===pages.length-1 ? 'rounded-full' : i===0 ? 'rounded-l-full' : i===pages.length-1 ? 'rounded-r-full' : ''} ${currentPage === el ? 'bg-gray-300 dark:bg-discord-dark-hover' : 'bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover'}`}>{el}</a>
 				</Link>)
 			}
 			<Link href={{ pathname, query: { page: currentPage + 1} }}>
diff --git a/components/Search.tsx b/components/Search.tsx
index 9f8fe24..1121034 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -1,14 +1,15 @@
 import { useState } from 'react'
+import { useRouter } from 'next/router'
 import Link from 'next/link'
 
-
-import { makeBotURL } from '@utils/Tools'
+import { makeBotURL, redirectTo } from '@utils/Tools'
 import Fetch from '@utils/Fetch'
 import { BotList, ResponseProps } from '@types'
 
 import DiscordAvatar from '@components/DiscordAvatar'
 
 const Search = (): JSX.Element => {
+	const router = useRouter()
 	const [ query, setQuery ] = useState('')
 	const [ data, setData ] = useState<ResponseProps<BotList>>(null)
 	const [ loading, setLoading ] = useState(false)
@@ -25,12 +26,20 @@ const Search = (): JSX.Element => {
 		setLoading(false)
 
 	}
-	return <>
+
+	const onSubmit = async () => {
+		setHidden(true)
+		redirectTo(router, `/search/?query=${encodeURIComponent(query)}`)
+	}
+
+	return <div>
 		<div onFocus={() => setHidden(false)} onBlur={() => setTimeout(() => setHidden(true), 80)} className='relative w-full mt-5 text-black bg-white dark:text-gray-100 dark:bg-very-black flex rounded-lg z-10'>
 			<input maxLength={50} className='bg-transparent flex-grow outline-none border-none shadow border-0 py-3 px-7 pr-20 h-16 text-xl' placeholder='검색...' value={query} onChange={(e)=> {
 				SearchResults(e.target.value)
+			}} onKeyDown={(e) => {
+				if(e.key === 'Enter') return onSubmit()
 			}} />
-			<button className='outline-none cusor-pointer absolute right-0 top-0 mt-5 mr-5'>
+			<button className='outline-none cusor-pointer absolute right-0 top-0 mt-5 mr-5' onClick={onSubmit}>
 				<i className='text-gray-600 hover:text-gray-700 text-2xl fas fa-search' />
 			</button>
 		</div>
@@ -49,13 +58,13 @@ const Search = (): JSX.Element => {
 										</p>
 									</div>
 								</li>
-							</Link>) : loading ? <li className='px-3 py-3.5'>검색중입니다...</li> : <li className='px-3 py-3.5'>{query && data ? data.errors && data.errors[0] || data.message?.includes('문법') ? <>검색 문법이 잘못되었습니다.<br/><a className='text-blue-500 hover:text-blue-400' href='https://docs.koreanbots.dev/bots/usage/search' target='_blank' rel='noreferrer' >더 알아보기</a></> : data.message : query.length < 3 ? '최소 2글자 이상 입력해주세요.' : '검색어를 입력해주세요.'}</li>
+							</Link>) : loading ? <li className='px-3 py-3.5'>검색중입니다...</li> : <li className='px-3 py-3.5'>{query && data ? data.message?.includes('문법') ? <>검색 문법이 잘못되었습니다.<br/><a className='text-blue-500 hover:text-blue-400' href='https://docs.koreanbots.dev/bots/usage/search' target='_blank' rel='noreferrer' >더 알아보기</a></> : data.errors && data.errors[0] || data.message : query.length < 3 ? '최소 2글자 이상 입력해주세요.' : '검색어를 입력해주세요.'}</li>
 					}
 					
 				</ul>
 			</div>
 		</div>
-	</>
+	</div>
 }
 
 export default Search