diff --git a/src/components/landing/Landing.tsx b/src/components/landing/Landing.tsx
index dd0fddc..836a23e 100644
--- a/src/components/landing/Landing.tsx
+++ b/src/components/landing/Landing.tsx
@@ -5,10 +5,8 @@ import LandingSection1 from './LandingSection1';
import LandingSection2 from './LandingSection2';
import LandingSection3 from './LandingSection3';
import { styled } from 'styled-components';
-import { getRecentDocs } from '@/apis/docs';
import Image from 'next/image';
import { RecentDocs } from '@/types/request';
-import { QueryClient, useQuery } from 'react-query';
import { useGetRecent } from '@/hooks/useGetRecent';
const Landing = () => {
diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx
index 38e330f..fa62d32 100644
--- a/src/components/search/SearchResult.tsx
+++ b/src/components/search/SearchResult.tsx
@@ -1,25 +1,22 @@
-import { ISearchResult, ISearchResultList } from '@/types/search';
-import React from 'react';
-import Loading from '../common/Loading';
+import { ISearchResultList } from '@/types/search';
import SearchFound from './searchFound/SearchFound';
import SearchNotFound from './searchNotFound/SearchNotFound';
interface SearchResultProps {
- searchResult: ISearchResult | ISearchResultList | undefined;
+ searchResult: ISearchResultList;
searchKeyword: string;
- isPending: boolean;
}
-const SearchResultContainer = ({ searchResult, searchKeyword, isPending }: SearchResultProps) => {
- if (isPending) {
- return ;
- }
-
- if (!searchResult) {
- return ;
- }
-
- return <>{searchResult.kind === 'searchResultList' && }>;
+const SearchResultContainer = ({ searchResult, searchKeyword }: SearchResultProps) => {
+ return (
+ <>
+ {searchResult.data.length > 0 ? (
+
+ ) : (
+
+ )}
+ >
+ );
};
export default SearchResultContainer;
diff --git a/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx b/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx
index a479718..154d336 100644
--- a/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx
+++ b/src/components/search/autoCompleteContainer/AutoCompleteContainer.tsx
@@ -8,19 +8,15 @@ interface AutoCompleteContainerProps {
const AutoCompleteContainer = ({ searchInput }: AutoCompleteContainerProps) => {
const router = useRouter();
- const { data: dropdownTitleList, isLoading } = useSearchAutoCompleteQuery(searchInput);
+ const { data: dropdownTitleList } = useSearchAutoCompleteQuery(searchInput);
- if (isLoading) {
- return 검색중...;
- }
-
- if (dropdownTitleList && dropdownTitleList.length === 0) {
+ if (dropdownTitleList.length === 0) {
return 검색 결과가 없습니다.;
}
return (
<>
- {dropdownTitleList?.map((title, idx) => (
+ {dropdownTitleList.map((title, idx) => (
router.push(`search/?search=${title}`)}>
{title}
diff --git a/src/components/search/searchBodySection/SearchBodySection.tsx b/src/components/search/searchBodySection/SearchBodySection.tsx
index ae9fc2a..85eac09 100644
--- a/src/components/search/searchBodySection/SearchBodySection.tsx
+++ b/src/components/search/searchBodySection/SearchBodySection.tsx
@@ -1,7 +1,7 @@
'use client';
import { useRouter, useSearchParams } from 'next/navigation';
-import React, { Suspense, useEffect, useState } from 'react';
+import { useEffect } from 'react';
import SearchForm from '../SearchForm';
import * as S from './SearchBodySection.styled';
import { useSearchQuery } from '@/hooks/useSearchQuery';
@@ -19,7 +19,11 @@ const SearchBodySection = () => {
const encodedTitle = encodeURIComponent(searchKeyword);
router.push(`viewer?title=${encodedTitle}`);
}
- }, [searchResult]);
+ }, [searchResult, router, searchKeyword]);
+
+ if (searchResult.kind === 'searchResult') {
+ return;
+ }
return (
<>
diff --git a/src/components/search/searchHeaderForm/SearchHeaderForm.tsx b/src/components/search/searchHeaderForm/SearchHeaderForm.tsx
index e7aa0c6..9fc1ccc 100644
--- a/src/components/search/searchHeaderForm/SearchHeaderForm.tsx
+++ b/src/components/search/searchHeaderForm/SearchHeaderForm.tsx
@@ -5,8 +5,7 @@ import * as S from './SearchHeaderForm.styled';
const SearchHeaderForm = ({ searchKeyword }: { searchKeyword?: string }) => {
const { values, handleChange, handleSearchSubmit } = useSearchForm({
- initialValue: { searchInput: '', searchHeaderInput: '' },
- searchKeyword,
+ initialValue: { searchInput: searchKeyword || '', searchHeaderInput: searchKeyword || '' },
});
return (
diff --git a/src/components/search/searchPageForm/SearchPageForm.styled.ts b/src/components/search/searchPageForm/SearchPageForm.styled.ts
index 9ca3052..1f98cbd 100644
--- a/src/components/search/searchPageForm/SearchPageForm.styled.ts
+++ b/src/components/search/searchPageForm/SearchPageForm.styled.ts
@@ -29,3 +29,9 @@ export const BoxWrapper = styled.div`
box-shadow: 2px 2px 2px black;
z-index: 1;
`;
+
+export const NoResultWrapper = styled.span`
+ padding: 15px;
+ font-size: 1.4rem;
+ box-shadow: 2px 2px 2px black;
+`;
diff --git a/src/components/search/searchPageForm/SearchPageForm.tsx b/src/components/search/searchPageForm/SearchPageForm.tsx
index 638d7cf..18fd33e 100644
--- a/src/components/search/searchPageForm/SearchPageForm.tsx
+++ b/src/components/search/searchPageForm/SearchPageForm.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
import useDebounceValue from '@/hooks/useDebounce';
import useSearchForm from '@/hooks/useSearchForm';
import AutoCompleteContainer from '../autoCompleteContainer/AutoCompleteContainer';
@@ -6,8 +6,7 @@ import * as S from './SearchPageForm.styled';
const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => {
const { values, isFocused, handleFocus, handleBlur, handleChange, handleSearchSubmit } = useSearchForm({
- initialValue: { searchInput: '', searchHeaderInput: '' },
- searchKeyword,
+ initialValue: { searchInput: searchKeyword || '', searchHeaderInput: searchKeyword || '' },
});
const debounceSearchInput = useDebounceValue(values.searchInput, 300);
@@ -37,7 +36,9 @@ const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => {
autoComplete="off"
/>
- {isFocused && values.searchInput.length > 0 && }
+ 검색중...}>
+ {isFocused && values.searchInput.length > 0 && }
+
);