Merge pull request #44 from MARU-EGG/user-autocomplete-refactor

[USER] autocomplete refactor
MARU-EGG · Aug 30, 2024 · 17ef951 · 17ef951
2 parents e4d9c4c + 5e2c192
commit 17ef951
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/src/hooks/use-auto-complete.hooks.ts b/src/hooks/use-auto-complete.hooks.ts
@@ -11,9 +11,10 @@ interface UseAutoCompleteProps {
 export interface AutoCompleteResult {
   content: string;
   id: number;
+  isChecked: boolean;
 }
 
-export const useAutoComplete = ({ content, delay = 1000 }: UseAutoCompleteProps) => {
+export const useAutoComplete = ({ content, delay = 400 }: UseAutoCompleteProps) => {
   const [results, setResults] = useState<AutoCompleteResult[]>([]);
   const [error, setError] = useState<string | null>(null);
   const { type, category } = useTypeStore();

diff --git a/src/ui/components/atom/auto-complete/auto-complete.tsx b/src/ui/components/atom/auto-complete/auto-complete.tsx
@@ -14,15 +14,18 @@ const AutoCompleteList: React.FC<AutoCompleteListProps> = ({ results, onSelect }
   return (
     <div className="mb-4">
       <ul className="z-10 rounded-md bg-white">
-        {results.map((result, index) => (
-          <li
-            key={index}
-            className="cursor-pointer px-[16px] py-2 font-pretendard font-normal text-[#3A3A3A] hover:rounded-md hover:bg-[#F7F7F7]"
-            onClick={() => onSelect(result.content, result.id)}
-          >
-            {result.content}
-          </li>
-        ))}
+        {results.map(
+          (result, index) =>
+            result.isChecked && (
+              <li
+                key={index}
+                className="cursor-pointer px-[16px] py-2 font-pretendard font-normal text-[#3A3A3A] hover:rounded-md hover:bg-[#F7F7F7]"
+                onClick={() => onSelect(result.content, result.id)}
+              >
+                {result.content}
+              </li>
+            ),
+        )}
       </ul>
     </div>
   );