fix: react-select에서 filter esc로 닫을 수 있게 변경

Kernel360 · Jan 8, 2025 · a7e3b30 · a7e3b30
1 parent f742ca0
commit a7e3b30
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 9 deletions.
diff --git a/frontend/techpick/src/components/Search2/FilterContainer.tsx b/frontend/techpick/src/components/Search2/FilterContainer.tsx
@@ -1,16 +1,20 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { FolderIcon, Tags } from 'lucide-react';
 import { useTreeStore, useTagStore } from '@/stores';
 import { useSearchPickStore } from '@/stores/searchPickStore';
 import { createSearchSelectOptions } from '@/utils';
 import FilterOptions from './FilterOptions';
 import * as styles from './searchDialog.css';
 
-export default function FilterContainer() {
+export default function FilterContainer({
+  setIsSelectMenuOpen,
+}: FilterContainerProps) {
   const { getFolderList } = useTreeStore();
   const folderList = getFolderList();
   const { setSearchFolder, setSearchTag } = useSearchPickStore();
   const { tagList } = useTagStore();
+  const [isFolderFilterOpen, setIsFolderFilterOpen] = useState(false);
+  const [isTagFilterOpen, setIsTagFilterOpen] = useState(false);
 
   const folderOptions = createSearchSelectOptions(
     folderList,
@@ -25,6 +29,17 @@ export default function FilterContainer() {
     setSearchState(queryString.length === 0 ? '' : queryString.join(','));
   };
 
+  useEffect(
+    function isFilterOpen() {
+      if (isFolderFilterOpen || isTagFilterOpen) {
+        setIsSelectMenuOpen(true);
+      } else {
+        setIsSelectMenuOpen(false);
+      }
+    },
+    [isFolderFilterOpen, isTagFilterOpen, setIsSelectMenuOpen]
+  );
+
   return (
     <div className={`${styles.filterContainer} ${styles.showFilterContainer}`}>
       <FilterOptions
@@ -34,6 +49,7 @@ export default function FilterContainer() {
         updateSearchState={(queryString: number[]) =>
           updateSearchState(queryString, setSearchFolder)
         }
+        setIsSelectMenuOpen={setIsFolderFilterOpen}
       />
       <FilterOptions
         title="태그"
@@ -42,7 +58,12 @@ export default function FilterContainer() {
         updateSearchState={(queryString: number[]) =>
           updateSearchState(queryString, setSearchTag)
         }
+        setIsSelectMenuOpen={setIsTagFilterOpen}
       />
     </div>
   );
 }
+
+interface FilterContainerProps {
+  setIsSelectMenuOpen: (isOpen: boolean) => void;
+}
diff --git a/frontend/techpick/src/components/Search2/FilterOptions.tsx b/frontend/techpick/src/components/Search2/FilterOptions.tsx
@@ -11,6 +11,7 @@ export default function FilterOptions({
   icon,
   options,
   updateSearchState,
+  setIsSelectMenuOpen,
 }: TagFilterOptionsProps) {
   const [selectedOptions, setSelectedOptions] = useState<number[]>([]);
 
@@ -32,6 +33,12 @@ export default function FilterOptions({
         closeMenuOnSelect={false}
         onChange={onChange}
         styles={customSelectStyles}
+        onMenuClose={() => {
+          setIsSelectMenuOpen(false);
+        }}
+        onMenuOpen={() => {
+          setIsSelectMenuOpen(true);
+        }}
       />
     </div>
   );
@@ -42,4 +49,5 @@ interface TagFilterOptionsProps {
   icon: React.ReactNode;
   options: SearchSelectOption[];
   updateSearchState: (queryString: number[]) => void;
+  setIsSelectMenuOpen: (isOpen: boolean) => void;
 }
diff --git a/frontend/techpick/src/components/Search2/SearchDialog.tsx b/frontend/techpick/src/components/Search2/SearchDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { OPEN_SEARCH_DIALOG_EVENT } from '@/constants';
@@ -20,6 +20,7 @@ export default function SearchDialog({
   onOpenChange,
 }: SearchDialogProps) {
   const { preFetchSearchPicks, reset } = useSearchPickStore();
+  const [isSelectMenuOpen, setIsSelectMenuOpen] = useState(false);
 
   useEffect(function prefetching() {
     preFetchSearchPicks();
@@ -42,17 +43,27 @@ export default function SearchDialog({
   };
 
   return (
-    <DialogPrimitive.Root open={isOpen} onOpenChange={handleOnClose}>
+    <DialogPrimitive.Root open={isOpen} onOpenChange={handleOnClose} modal>
       <DialogPrimitive.Portal>
         <DialogPrimitive.Overlay className={dialogOverlayStyle} />
-        <DialogPrimitive.Content className={dialogContent}>
-          <DialogPrimitive.Title>
-            <VisuallyHidden>Pick Search</VisuallyHidden>
-          </DialogPrimitive.Title>
+        <DialogPrimitive.Content
+          className={dialogContent}
+          onEscapeKeyDown={(e) => {
+            if (isSelectMenuOpen) {
+              e.preventDefault();
+            }
+          }}
+        >
+          <VisuallyHidden>
+            <DialogPrimitive.Title>Pick Search</DialogPrimitive.Title>
+            <DialogPrimitive.Description>
+              Pick Search Dialog
+            </DialogPrimitive.Description>
+          </VisuallyHidden>
           <div className={searchBar}>
             <SearchInput />
           </div>
-          <FilterContainer />
+          <FilterContainer setIsSelectMenuOpen={setIsSelectMenuOpen} />
           <div className={searchListContainer}>
             <SearchInfiniteScrollList onClose={handleOnClose} />
             <HoverCard />