refactor: 검색어와 100% 일치하는 데이터가 있는 경우 라우팅하는 커스텀 훅 분리(#120)

src/components/search/searchBodySection/SearchBodySection.tsx

@@ -1,27 +1,20 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
 import * as S from './SearchBodySection.styled';
 import { useSearchQuery } from '@/hooks/useSearchQuery';
 import SearchResultContainer from '../SearchResult';
 import SearchInput from '../searchInput/SearchInput';
 import useKeywordParams from '@/hooks/useKeywordParams';
+import useDetermineDirectRouter from '@/hooks/useDetermineDirectRouter';
 
 const SearchBodySection = () => {
-	const router = useRouter();
 	const { searchKeyword } = useKeywordParams();
 	const { data: searchResult } = useSearchQuery(searchKeyword);
 
-	useEffect(() => {
-		if (searchResult && searchResult.kind === 'searchResult') {
-			const encodedTitle = encodeURIComponent(searchKeyword);
-			router.push(`viewer?title=${encodedTitle}`);
-		}
-	}, [searchResult, router, searchKeyword]);
+	useDetermineDirectRouter({ searchKeyword, kind: searchResult.kind });
 
 	if (searchResult.kind === 'searchResult') {
-		return;
+		return null;
 	}
 
 	return (

src/hooks/useDetermineDirectRouter.ts

@@ -0,0 +1,20 @@
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+interface UseDetermineDirectRouterProps {
+	kind: 'searchResult' | 'searchResultList';
+	searchKeyword: string;
+}
+
+const useDetermineDirectRouter = ({ kind, searchKeyword }: UseDetermineDirectRouterProps) => {
+	const router = useRouter();
+
+	useEffect(() => {
+		if (kind === 'searchResult') {
+			const encodedTitle = encodeURIComponent(searchKeyword);
+			router.push(`viewer?title=${encodedTitle}`);
+		}
+	}, [kind, router, searchKeyword]);
+};
+
+export default useDetermineDirectRouter;