Merge pull request #372 from TripInfoWeb/dev_refactoring

Refactor: 정보 페이지네이션 dropdown이 하나만 표시되도록 수정
TripInfoWeb · Sep 22, 2024 · 86aa9af · 86aa9af
2 parents e75bcb9 + 61f75e9
commit 86aa9af
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/components/informations/list/InformationSearch.tsx b/src/components/informations/list/InformationSearch.tsx
@@ -18,8 +18,8 @@ interface Props {
   onChangeSearchValue: (value: string) => void;
   closeModal: () => void;
   openModal: () => void;
-  onOrderDropdownClick: () => void;
-  onSearchDropdownClick: () => void;
+  onOrderDropdownClick: (visible: boolean) => void;
+  onSearchDropdownClick: (visible: boolean) => void;
   onSearchClick: () => void;
   setSearchMethod: (value: string) => void;
 }
@@ -55,14 +55,17 @@ const InformationSearch = ({
         <button
           className="absolute left-0 top-0 flex h-[2.75rem] flex-row items-center gap-2 pl-[1.125rem] text-sm text-gray1 hover:text-main"
           type="button"
-          onClick={() => onSearchDropdownClick()}
+          onClick={() => {
+            onOrderDropdownClick(false);
+            onSearchDropdownClick(true);
+          }}
         >
           <p>{searchMethod}</p>
           <IoIosArrowDown className="mt-1" />
         </button>
         <div
           className={`${!searchDropdownVisible && "hidden"} absolute left-0 top-[0.5625rem] -z-10 flex w-[4.8125rem] flex-col items-center gap-1 rounded-xl bg-white/95 pt-[2.1875rem] text-gray1 shadow`}
-          onClick={() => onSearchDropdownClick()}
+          onClick={() => onSearchDropdownClick(false)}
         >
           <button
             className={`${searchMethod === "제목" && "text-main"} h-[3.75rem] w-[4.6875rem] hover:text-main`}
@@ -110,14 +113,17 @@ const InformationSearch = ({
         <div className="relative">
           <button
             className="flex flex-row items-center text-gray1 hover:text-main"
-            onClick={() => onOrderDropdownClick()}
+            onClick={() => {
+              onSearchDropdownClick(false);
+              onOrderDropdownClick(true);
+            }}
           >
             <p className="text-nowrap">{`${order === "latest" ? "최신순" : order === "likes" ? "좋아요순" : "조회순"}`}</p>
             <IoIosArrowDown />
           </button>
           <div
             className={`${!orderDropdownVisible && "hidden"} absolute -left-[4.5rem] top-7 z-10 flex w-[8.625rem] flex-col items-center gap-1 rounded-xl bg-white/95 text-gray1 shadow`}
-            onClick={() => onOrderDropdownClick()}
+            onClick={() => onOrderDropdownClick(false)}
           >
             <Link
               className={`${order === "latest" && "text-main"} flex h-16 w-full items-center justify-center hover:text-main`}

diff --git a/src/containers/informations/list/InformationSearchContainer.tsx b/src/containers/informations/list/InformationSearchContainer.tsx
@@ -64,11 +64,11 @@ const InformationSearchContainer = () => {
       onChangeSearchValue={onChangeSearchValue}
       closeModal={() => setModalVisible(false)}
       openModal={() => setModalVisible(true)}
-      onOrderDropdownClick={() =>
-        setOrderDropdownVisible(!orderDropdownVisible)
+      onOrderDropdownClick={(visible: boolean) =>
+        setOrderDropdownVisible(visible)
       }
-      onSearchDropdownClick={() =>
-        setSearchDropdownVisible(!searchDropdownVisible)
+      onSearchDropdownClick={(visible: boolean) =>
+        setSearchDropdownVisible(visible)
       }
       onSearchClick={onSearchClick}
       setSearchMethod={(value: string) => {