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 (
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: '' }),
+}));