검색 결과가 없을 때 나타나는 버그

검색 결과가 없을 때 버그가 났습니다. saga를 통해 error가 발생하고 status가 failure일 상태일 때 처리를 해주면 됩니다. 삼항 연산자를 이용해 성공과 실패 시 조건부 렌더링을 진행했습니다.

const isSuccess = status === STATUS.Success

<main className={styles.wrapper}>
      <Stack gaps={RESULT_GAP}>
        <SearchForm />
        <LinkToFilter />
        {isSuccess ? (
          <>
            <Books items={items} />
            <Pagination />
            {isLoading && <Loading />}
          </>
        ) : (
          <div>데이터가 존재하지 않습니다.</div>
        )}
      </Stack>
</main>

페이지 없을 때 Not Found 페이지 처리

간단하게 Routes 컴포넌트에서 처리했습니다. Switch의 특징을 이용해 맞는 url이 없다면 NotFound 페이지를 렌더링하도록 구현했습니다.

<Switch location={location}>
        <Route exact path={ROUTES.HOME} component={Main} />
        <Route path={ROUTES.RESULT} component={Result} />
        <Route path={ROUTES.FILTERS} component={Filters} />
        <Route component={NotFound} />
</Switch>

logo192.png , logo512.png 경고

public 폴더 manifest.json에 logo192.png , logo512.png 파일이 없는데 참조하고 있습니다. manifest.json에서 두 파일을 지우면 해결됩니다.