From 057f2345b797acf71ddf95de0fe288c17722cbb8 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Wed, 19 Jun 2024 16:28:08 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20file=20deps=EB=A5=BC=20=EC=A0=9C=EA=B1=B0=ED=95=98?= =?UTF-8?q?=EA=B3=A0,=20params=EB=A5=BC=20=EA=B0=81=EA=B0=81=EC=9D=98=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=9D=BD=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95(#120)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/NavBar.tsx | 6 ++-- src/components/search/SearchForm.tsx | 18 ---------- .../searchBodySection/SearchBodySection.tsx | 11 +++--- .../SearchHeaderForm.styled.ts | 2 -- .../searchHeaderForm/SearchHeaderForm.tsx | 36 +++++++++---------- .../search/searchPageForm/SearchPageForm.tsx | 7 ++-- src/hooks/useKeywordParams.ts | 11 ++++++ 7 files changed, 40 insertions(+), 51 deletions(-) delete mode 100644 src/components/search/SearchForm.tsx create mode 100644 src/hooks/useKeywordParams.ts diff --git a/src/components/common/NavBar.tsx b/src/components/common/NavBar.tsx index 8e7e1d4..30a7242 100644 --- a/src/components/common/NavBar.tsx +++ b/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 = () => { {isMobile ? ( - + ) : ( - + )} diff --git a/src/components/search/SearchForm.tsx b/src/components/search/SearchForm.tsx deleted file mode 100644 index 658c86b..0000000 --- a/src/components/search/SearchForm.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import SearchHeaderForm from './searchHeaderForm/SearchHeaderForm'; -import SearchPageForm from './searchPageForm/SearchPageForm'; - -interface SearchFormProps { - type: string; - searchKeyword?: string; -} - -const SearchForm = ({ type, searchKeyword }: SearchFormProps) => { - return ( - <> - {type === 'search' && } - {type === 'header' && } - - ); -}; - -export default SearchForm; diff --git a/src/components/search/searchBodySection/SearchBodySection.tsx b/src/components/search/searchBodySection/SearchBodySection.tsx index 85eac09..7997bc7 100644 --- a/src/components/search/searchBodySection/SearchBodySection.tsx +++ b/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" /> - + diff --git a/src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts b/src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts index 0171103..75dbbb2 100644 --- a/src/components/search/searchHeaderForm/SearchHeaderForm.styled.ts +++ b/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; diff --git a/src/components/search/searchHeaderForm/SearchHeaderForm.tsx b/src/components/search/searchHeaderForm/SearchHeaderForm.tsx index 9fc1ccc..8ae2656 100644 --- a/src/components/search/searchHeaderForm/SearchHeaderForm.tsx +++ b/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 ( - - - - {'search'} - - - - + + + {'search'} + + + ); }; diff --git a/src/components/search/searchPageForm/SearchPageForm.tsx b/src/components/search/searchPageForm/SearchPageForm.tsx index 1ac05d8..75e44d8 100644 --- a/src/components/search/searchPageForm/SearchPageForm.tsx +++ b/src/components/search/searchPageForm/SearchPageForm.tsx @@ -5,8 +5,10 @@ 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, @@ -14,8 +16,7 @@ const SearchPageForm = ({ searchKeyword }: { searchKeyword?: string }) => { handleFocus, handleBlur, handleKeydown, - } = useInput(searchKeyword || ''); - + } = useInput(searchKeyword); const debounceSearchInput = useDebounceValue(searchInput, 300); const { inputRef, autoCompleteRef, isSearching } = useFocusSearchInput({ diff --git a/src/hooks/useKeywordParams.ts b/src/hooks/useKeywordParams.ts new file mode 100644 index 0000000..25452df --- /dev/null +++ b/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;