[Main to Dev] 2주년 픽픽픽 교체건 QA3차

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 = () => {

pages/pickpickpick/components/PickAnswerV2.tsx

@@ -73,10 +73,7 @@ export default function PickAnswerV2({
     if (content) {
       return (
         <div
-          className={cn(
-            mediaClassName,
-            'flex items-center justify-center py-[1rem] overflow-hidden',
-          )}
+          className={cn(mediaClassName, 'flex items-start justify-start py-[1rem] overflow-hidden')}
         >
           <p className='c1 text-gray200 line-clamp-6'>{content}</p>
         </div>

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() {
         <SearchNotFound
           type={'keyword'}
           searchKeyword={submittedKeyword}
-          setSearchKeyword={setSubmittedKeyword}
+          setSearchKeyword={(keyword: string) => {
+            if (keyword === '') {
+              resetKeyword();
+            } else {
+              setSubmittedKeyword(keyword);
+            }
+          }}
         />
       )}
 
@@ -116,12 +123,7 @@ export default function Index() {
 
   return (
     <div className={`${isMobile ? 'px-[1.6rem]' : 'pt-24 px-[20.3rem]'} pb-[11.2rem] w-full`}>
-      <PickHeader
-        onClick={() => {
-          setEditingKeyword('');
-          setSubmittedKeyword('');
-        }}
-      />
+      <PickHeader onClick={resetKeyword} />
       {isMobile ? <MobilePickInfoV2 /> : <PickInfoV2 />}
       {getStatusComponent()}
       <div ref={bottom} />

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<PickSearchStoreProps>((set) => ({
+  editingKeyword: '',
+  submittedKeyword: '',
+  setEditingKeyword: (keyword: string) => set({ editingKeyword: keyword }),
+  setSubmittedKeyword: (keyword: string) => set({ submittedKeyword: keyword }),
+  resetKeyword: () => set({ editingKeyword: '', submittedKeyword: '' }),
+}));