検索画面

空文字の場合は検索しない
記事が0個の時の表示を記述

Author: dc7290

pages/search/index.tsx

@@ -44,9 +44,11 @@ const SearchPage: NextPage<Props> = (props) => {
       <Layout {...props}>
         <Search isShowText={false} />
         {data === undefined ? (
-          <div v-if="loading === true" className={styles.loader}>
+          <div className={styles.loader}>
             <img className={styles.loadingIcon} src="/images/icon_loading.svg" alt="検索中..." />
           </div>
+        ) : data.contents.length === 0 ? (
+          <div className={styles.loader}>記事がありません</div>
         ) : (
           <BlogList contents={data.contents} />
         )}

src/components/Search/Search.tsx

@@ -28,6 +28,9 @@ const Container: React.VFC<ContainerProps> = (props) => {
 
   const router = useRouter()
   const handleKeyPress: Props['onKeyPress'] = (event) => {
+    if (value === '') {
+      return
+    }
     if (event.key === 'Enter') {
       router.push({
         pathname: pagesPath.search.$url().pathname,