refactor: 불필요한 file deps를 제거하고, params를 각각의 컴포넌트에서 읽도록 수정(#120)

src/components/common/NavBar.tsx

@@ -2,13 +2,13 @@
 
 import { styled } from 'styled-components';
 import Image from 'next/image';
-import SearchForm from '../search/SearchForm';
 import { useRouter } from 'next/navigation';
 import { token } from '@/app/recoilContextProvider';
 import { useRecoilValue } from 'recoil';
 import { getRandomDoc } from '@/apis/viewer';
 import { useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
+import SearchHeaderForm from '../search/searchHeaderForm/SearchHeaderForm';
 
 export interface IMenu {
 	src: string;
@@ -65,11 +65,11 @@ const NavBar = () => {
 				<RightWrapper>
 					{isMobile ? (
 						<SearchWrapper>
-							<SearchForm type="header" />
+							<SearchHeaderForm />
 						</SearchWrapper>
 					) : (
 						<SearchWrapper>
-							<SearchForm type="header" />
+							<SearchHeaderForm />
 						</SearchWrapper>
 					)}
 					<ButtonWrapper>

src/components/search/searchBodySection/SearchBodySection.tsx

@@ -1,17 +1,16 @@
 'use client';
 
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
-import SearchForm from '../SearchForm';
 import * as S from './SearchBodySection.styled';
 import { useSearchQuery } from '@/hooks/useSearchQuery';
 import SearchResultContainer from '../SearchResult';
+import SearchPageForm from '../searchPageForm/SearchPageForm';
+import useKeywordParams from '@/hooks/useKeywordParams';
 
 const SearchBodySection = () => {
 	const router = useRouter();
-	const params = useSearchParams();
-
-	const searchKeyword = params.get('search') || '멋쟁이사자처럼';
+	const { searchKeyword } = useKeywordParams();
 	const { data: searchResult } = useSearchQuery(searchKeyword);
 
 	useEffect(() => {
@@ -37,7 +36,7 @@ const SearchBodySection = () => {
 						sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
 					/>
 				</S.TextImageWrapper>
-				<SearchForm searchKeyword={searchKeyword} type="search" />
+				<SearchPageForm />
 			</S.SearchBarWrapper>
 			<SearchResultContainer searchResult={searchResult} searchKeyword={searchKeyword} />
 		</>

src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts

@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
-export const FormWrapper = styled.form``;
-
 export const SearchWrapper = styled.div`
 	display: flex;
 	align-items: center;

src/components/search/searchHeaderForm/SearchHeaderForm.tsx

@@ -1,28 +1,26 @@
-import useSearchForm from '@/hooks/useSearchForm';
 import Image from 'next/image';
 import React from 'react';
 import * as S from './SearchHeaderForm.styled';
+import useInput from '@/hooks/useInput';
+import useKeywordParams from '@/hooks/useKeywordParams';
 
-const SearchHeaderForm = ({ searchKeyword }: { searchKeyword?: string }) => {
-	const { values, handleChange, handleSearchSubmit } = useSearchForm({
-		initialValue: { searchInput: searchKeyword || '', searchHeaderInput: searchKeyword || '' },
-	});
+const SearchHeaderForm = () => {
+	const { searchKeyword } = useKeywordParams();
+	const { value: searchHeaderInput, handleChange, handleKeydown } = useInput(searchKeyword);
 
 	return (
-		<S.FormWrapper name="searchHeaderInput" onSubmit={handleSearchSubmit}>
-			<S.SearchWrapper>
-				<S.ImageButtonWrapper>
-					<Image src="/img/searchIcon.png" alt={'search'} width={20} height={20} style={{ cursor: 'pointer' }} />
-				</S.ImageButtonWrapper>
-				<S.SearchHeaderInput
-					name="searchHeaderInput"
-					placeholder="검색..."
-					value={values.searchHeaderInput}
-					onChange={handleChange}
-					autoComplete="off"
-				/>
-			</S.SearchWrapper>
-		</S.FormWrapper>
+		<S.SearchWrapper>
+			<S.ImageButtonWrapper>
+				<Image src="/img/searchIcon.png" alt={'search'} width={20} height={20} style={{ cursor: 'pointer' }} />
+			</S.ImageButtonWrapper>
+			<S.SearchHeaderInput
+				placeholder="검색..."
+				value={searchHeaderInput}
+				onChange={handleChange}
+				onKeyDown={handleKeydown}
+				autoComplete="off"
+			/>
+		</S.SearchWrapper>
 	);
 };
 

src/components/search/searchPageForm/SearchPageForm.tsx

@@ -5,17 +5,18 @@ import AutoCompleteContainer from '../autoCompleteContainer/AutoCompleteContaine
 import AutoCompleteLoading from '../autoCompleteContainer/AutoCompleteLoading';
 import useFocusSearchInput from '@/hooks/useFocusSearchInput';
 import useInput from '@/hooks/useInput';
+import useKeywordParams from '@/hooks/useKeywordParams';
 
-const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => {
+const SearchPageForm = () => {
+	const { searchKeyword } = useKeywordParams();
 	const {
 		value: searchInput,
 		isFocused,
 		handleChange,
 		handleFocus,
 		handleBlur,
 		handleKeydown,
-	} = useInput(searchKeyword || '');
-
+	} = useInput(searchKeyword);
 	const debounceSearchInput = useDebounceValue(searchInput, 300);
 
 	const { inputRef, autoCompleteRef, isSearching } = useFocusSearchInput({

src/hooks/useKeywordParams.ts

@@ -0,0 +1,11 @@
+import { useSearchParams } from 'next/navigation';
+
+const useKeywordParams = () => {
+	const params = useSearchParams();
+
+	const searchKeyword = params.get('search') || '멋쟁이사자처럼';
+
+	return { searchKeyword };
+};
+
+export default useKeywordParams;