refactor: 자동완성창 관리하는 로직을 useFocusSearchInput 커스텀 훅으로 분리하고 불필요한 form 형…

…식 제거(#120)

src/components/search/searchPageForm/SearchPageForm.styled.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const FormWrapper = styled.form`
+export const SearchInputWrapper = styled.div`
 	position: relative;
 `;
 

src/components/search/searchPageForm/SearchPageForm.tsx

@@ -1,52 +1,44 @@
-import { Suspense, useEffect, useRef } from 'react';
+import { Suspense } from 'react';
+import * as S from './SearchPageForm.styled';
 import useDebounceValue from '@/hooks/useDebounce';
-import useSearchForm from '@/hooks/useSearchForm';
 import AutoCompleteContainer from '../autoCompleteContainer/AutoCompleteContainer';
-import * as S from './SearchPageForm.styled';
 import AutoCompleteLoading from '../autoCompleteContainer/AutoCompleteLoading';
+import useFocusSearchInput from '@/hooks/useFocusSearchInput';
+import useInput from '@/hooks/useInput';
 
 const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => {
-	const { values, isFocused, handleFocus, handleBlur, handleChange, handleSearchSubmit } = useSearchForm({
-		initialValue: { searchInput: searchKeyword || '', searchHeaderInput: searchKeyword || '' },
+	const {
+		value: searchInput,
+		isFocused,
+		handleChange,
+		handleFocus,
+		handleBlur,
+		handleKeydown,
+	} = useInput(searchKeyword || '');
+
+	const debounceSearchInput = useDebounceValue(searchInput, 300);
+
+	const { inputRef, autoCompleteRef, isSearching } = useFocusSearchInput({
+		isFocused,
+		searchInput,
+		handleBlur,
 	});
-	const debounceSearchInput = useDebounceValue(values.searchInput, 300);
-
-	const inputRef = useRef<HTMLInputElement | null>(null);
-	const autoCompleteRef = useRef<HTMLDivElement | null>(null);
-
-	const isSearching = isFocused && values.searchInput.length > 0;
-
-	useEffect(() => {
-		const handleOutsideClose = (e: MouseEvent) => {
-			const isOutsideDropdown =
-				isFocused &&
-				!autoCompleteRef.current?.contains(e.target as Node) &&
-				!inputRef.current?.contains(e.target as Node);
-
-			if (isOutsideDropdown) {
-				handleBlur();
-			}
-		};
-		document.addEventListener('click', handleOutsideClose);
-
-		return () => document.removeEventListener('click', handleOutsideClose);
-	}, [isFocused]);
 
 	return (
-		<S.FormWrapper name="searchInput" onSubmit={handleSearchSubmit}>
+		<S.SearchInputWrapper>
 			<S.SearchBarInput
-				name="searchInput"
+				ref={inputRef}
+				value={searchInput}
 				placeholder="검색어를 입력하세요..."
-				value={values.searchInput}
 				onChange={handleChange}
 				onFocus={handleFocus}
+				onKeyDown={handleKeydown}
 				autoComplete="off"
-				ref={inputRef}
 			/>
 			<Suspense fallback={<AutoCompleteLoading />}>
 				{isSearching && <AutoCompleteContainer searchInput={debounceSearchInput} autoCompleteRef={autoCompleteRef} />}
 			</Suspense>
-		</S.FormWrapper>
+		</S.SearchInputWrapper>
 	);
 };
 

src/hooks/useFocusSearchInput.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react';
+
+interface UseFocusSearchInputProps {
+	isFocused: boolean;
+	searchInput: string;
+	handleBlur: () => void;
+}
+
+const useFocusSearchInput = ({ isFocused, searchInput, handleBlur }: UseFocusSearchInputProps) => {
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const autoCompleteRef = useRef<HTMLDivElement | null>(null);
+	const isSearching = isFocused && searchInput.length > 0;
+
+	useEffect(() => {
+		const handleOutsideClose = (e: MouseEvent) => {
+			const isOutsideArea =
+				isFocused &&
+				!autoCompleteRef.current?.contains(e.target as Node) &&
+				!inputRef.current?.contains(e.target as Node);
+
+			if (isOutsideArea) {
+				handleBlur();
+			}
+		};
+		document.addEventListener('click', handleOutsideClose);
+
+		return () => document.removeEventListener('click', handleOutsideClose);
+	}, [isFocused, handleBlur]);
+
+	return { inputRef, autoCompleteRef, isSearching };
+};
+
+export default useFocusSearchInput;

src/hooks/useInput.ts

@@ -0,0 +1,31 @@
+import { useRouter } from 'next/navigation';
+import { ChangeEvent, useCallback, useState } from 'react';
+
+const useInput = (initialValue: string) => {
+	const router = useRouter();
+	const [value, setValue] = useState(initialValue);
+	const [isFocused, setIsFocused] = useState(false);
+
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+		setValue(e.target.value);
+	};
+
+	const handleFocus = () => {
+		setIsFocused(true);
+	};
+
+	const handleBlur = useCallback(() => {
+		setIsFocused(false);
+	}, []);
+
+	const handleKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.code === 'Enter') {
+			handleBlur();
+			router.push(`search/?search=${value}`);
+		}
+	};
+
+	return { value, isFocused, handleChange, handleFocus, handleBlur, handleKeydown };
+};
+
+export default useInput;