diff --git a/hooks/useHandleNavClick.ts b/hooks/useHandleNavClick.ts index e2548704..303d7b93 100644 --- a/hooks/useHandleNavClick.ts +++ b/hooks/useHandleNavClick.ts @@ -1,6 +1,7 @@ import { useQueryClient } from '@tanstack/react-query'; import { usePickDropdownStore, useTechblogDropdownStore } from '@stores/dropdownStore'; +import { usePickSearchStore } from '@stores/pickSearchStore'; import { useCompanyInfoStore, useSearchKeywordStore } from '@stores/techBlogStore'; import { ROUTES } from '@/constants/routes'; @@ -11,11 +12,13 @@ const useHandleRefreshLinkClick = () => { const { setSearchKeyword } = useSearchKeywordStore(); const { resetCompanyInfo } = useCompanyInfoStore(); const { setInitialSort: setPickInitialSort } = usePickDropdownStore(); + const { resetKeyword } = usePickSearchStore(); const { setInitialSort: setTechblogInitailSort } = useTechblogDropdownStore(); const invalidPickQuery = () => { queryClient.invalidateQueries({ queryKey: ['pickData'] }); setPickInitialSort(); + resetKeyword(); }; const refreshTechArticleParams = () => { diff --git a/pages/pickpickpick/components/PickAnswerV2.tsx b/pages/pickpickpick/components/PickAnswerV2.tsx index 312a25f2..4e3465bc 100644 --- a/pages/pickpickpick/components/PickAnswerV2.tsx +++ b/pages/pickpickpick/components/PickAnswerV2.tsx @@ -73,10 +73,7 @@ export default function PickAnswerV2({ if (content) { return (

{content}

diff --git a/pages/pickpickpick/index.page.tsx b/pages/pickpickpick/index.page.tsx index eaa547f9..dcae0464 100644 --- a/pages/pickpickpick/index.page.tsx +++ b/pages/pickpickpick/index.page.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import React, { useRef } from 'react'; import dynamic from 'next/dynamic'; import Link from 'next/link'; @@ -20,6 +20,7 @@ import { META } from '@/constants/metaData'; import { ROUTES } from '@/constants/routes'; import { useMediaQueryContext } from '@/contexts/MediaQueryContext'; import { PickDropdownProps, usePickDropdownStore } from '@/stores/dropdownStore'; +import { usePickSearchStore } from '@/stores/pickSearchStore'; import { PickSearchInput } from './[id]/components/pickSearchInput'; import { PickActionSection } from './components/PickActionSection'; @@ -32,8 +33,8 @@ const DynamicComponent = dynamic(() => import('@/pages/pickpickpick/components/P export default function Index() { const bottom = useRef(null); - const [editingKeyword, setEditingKeyword] = useState(''); - const [submittedKeyword, setSubmittedKeyword] = useState(''); + const { editingKeyword, submittedKeyword, setEditingKeyword, setSubmittedKeyword, resetKeyword } = + usePickSearchStore(); const { MAIN } = ROUTES.PICKPICKPICK; const { isLoginModalOpen } = useLoginModalStore(); @@ -60,7 +61,13 @@ export default function Index() { { + if (keyword === '') { + resetKeyword(); + } else { + setSubmittedKeyword(keyword); + } + }} /> )} @@ -116,12 +123,7 @@ export default function Index() { return (
- { - setEditingKeyword(''); - setSubmittedKeyword(''); - }} - /> + {isMobile ? : } {getStatusComponent()}
diff --git a/stores/pickSearchStore.ts b/stores/pickSearchStore.ts new file mode 100644 index 00000000..fedc0ba0 --- /dev/null +++ b/stores/pickSearchStore.ts @@ -0,0 +1,17 @@ +import { create } from 'zustand'; + +interface PickSearchStoreProps { + editingKeyword: string; + submittedKeyword: string; + setEditingKeyword: (keyword: string) => void; + setSubmittedKeyword: (keyword: string) => void; + resetKeyword: () => void; +} + +export const usePickSearchStore = create((set) => ({ + editingKeyword: '', + submittedKeyword: '', + setEditingKeyword: (keyword: string) => set({ editingKeyword: keyword }), + setSubmittedKeyword: (keyword: string) => set({ submittedKeyword: keyword }), + resetKeyword: () => set({ editingKeyword: '', submittedKeyword: '' }), +}));