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 && } + );