refactor: useSuspenseQuery와 Suspense를 활용하여 로딩 UI 처리(#120)

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 = () => {

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 <Loading />;
-	}
-
-	if (!searchResult) {
-		return <SearchNotFound searchKeyword={searchKeyword} />;
-	}
-
-	return <>{searchResult.kind === 'searchResultList' && <SearchFound searchResult={searchResult.data} />}</>;
+const SearchResultContainer = ({ searchResult, searchKeyword }: SearchResultProps) => {
+	return (
+		<>
+			{searchResult.data.length > 0 ? (
+				<SearchFound searchResult={searchResult.data} />
+			) : (
+				<SearchNotFound searchKeyword={searchKeyword} />
+			)}
+		</>
+	);
 };
 
 export default SearchResultContainer;

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 <S.NoResultWrapper>검색중...</S.NoResultWrapper>;
-	}
-
-	if (dropdownTitleList && dropdownTitleList.length === 0) {
+	if (dropdownTitleList.length === 0) {
 		return <S.NoResultWrapper>검색 결과가 없습니다.</S.NoResultWrapper>;
 	}
 
 	return (
 		<>
-			{dropdownTitleList?.map((title, idx) => (
+			{dropdownTitleList.map((title, idx) => (
 				<S.ItemWrapper id="complete" key={idx} onClick={() => router.push(`search/?search=${title}`)}>
 					{title}
 				</S.ItemWrapper>

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 (
 		<>

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 (

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;
+`;

src/components/search/searchPageForm/SearchPageForm.tsx

@@ -1,13 +1,12 @@
-import { useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
 import useDebounceValue from '@/hooks/useDebounce';
 import useSearchForm from '@/hooks/useSearchForm';
 import AutoCompleteContainer from '../autoCompleteContainer/AutoCompleteContainer';
 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"
 			/>
 			<S.BoxWrapper>
-				{isFocused && values.searchInput.length > 0 && <AutoCompleteContainer searchInput={debounceSearchInput} />}
+				<Suspense fallback={<S.NoResultWrapper>검색중...</S.NoResultWrapper>}>
+					{isFocused && values.searchInput.length > 0 && <AutoCompleteContainer searchInput={debounceSearchInput} />}
+				</Suspense>
 			</S.BoxWrapper>
 		</S.FormWrapper>
 	);