fix: 주용이 의견 반영

Team-Tiki · Nov 20, 2024 · 39f5c8a · 39f5c8a
1 parent d553507
commit 39f5c8a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 43 deletions.
diff --git a/src/common/hook/useMultiSelect.ts b/src/common/hook/useMultiSelect.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 type DataHasIdKey<T> = {
   [key in keyof T]: T[key];
@@ -10,6 +10,7 @@ type DataHasIdKey<T> = {
  */
 export const useMultiSelect = <T extends object>(identifier: keyof T, data: DataHasIdKey<T>[]) => {
   const [ids, setIds] = useState<number[]>([]);
+  const [canSelect, setCanSelect] = useState(false);
 
   const handleItemClick = (id: number) => {
     if (ids.includes(id)) {
@@ -35,9 +36,22 @@ export const useMultiSelect = <T extends object>(identifier: keyof T, data: Data
     }
   };
 
-  const handleReset = () => {
-    setIds([]);
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && canSelect) {
+        setCanSelect(false);
+
+        setIds([]);
+      }
+    };
+    window.addEventListener('keydown', handleKeyPress);
+
+    return () => window.removeEventListener('keydown', handleKeyPress);
+  }, [canSelect]);
+
+  const handleCanSelect = () => {
+    setCanSelect(!canSelect);
   };
 
-  return { ids, handleItemClick, handleAllClick, handleReset };
+  return { ids, canSelect, handleItemClick, handleAllClick, handleCanSelect };
 };
diff --git a/src/page/deleted/index.tsx b/src/page/deleted/index.tsx
@@ -1,5 +1,3 @@
-import { useEffect, useState } from 'react';
-
 import Button from '@/common/component/Button/Button';
 import Flex from '@/common/component/Flex/Flex';
 import Select from '@/common/component/Select/Select';
@@ -27,22 +25,7 @@ const tmpData: File[] = [
 
 const DeletedPage = () => {
   const { isOpen, toggle } = useOverlay();
-  const { ids, handleItemClick, handleAllClick, handleReset } = useMultiSelect<File>('fileId', tmpData);
-
-  const [canSelect, setCanSelect] = useState(false);
-
-  useEffect(() => {
-    const handleKeyPress = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && canSelect) {
-        setCanSelect(false);
-
-        handleReset();
-      }
-    };
-    window.addEventListener('keydown', handleKeyPress);
-
-    return () => window.removeEventListener('keydown', handleKeyPress);
-  }, [canSelect, handleReset]);
+  const { ids, canSelect, handleItemClick, handleAllClick, handleCanSelect } = useMultiSelect<File>('fileId', tmpData);
 
   return (
     <ContentBox
@@ -61,7 +44,7 @@ const DeletedPage = () => {
               <Button variant="tertiary">영구삭제</Button>
             </Flex>
           ) : (
-            <Button onClick={() => setCanSelect(true)} variant="tertiary">
+            <Button onClick={handleCanSelect} variant="tertiary">
               선택
             </Button>
           )}

diff --git a/src/page/handover/HandoverPage.tsx b/src/page/handover/HandoverPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import IcSearch from '@/common/asset/svg/ic_search.svg?react';
 import Button from '@/common/component/Button/Button';
@@ -16,34 +16,17 @@ import { FILTER_OPTION, NOTE_DUMMY } from '@/page/handover/constant/noteList';
 import ContentBox from '@/shared/component/ContentBox/ContentBox';
 
 const HandoverPage = () => {
-  const [canSelect, setCanSelect] = useState(false);
   const [sortOption, setSortOption] = useState('');
   const [searchValue, setSearchValue] = useState('');
 
   const { isOpen, close, toggle } = useOverlay();
   const ref = useOutsideClick<HTMLDivElement>(close);
-  const { ids, handleItemClick, handleAllClick, handleReset } = useMultiSelect<(typeof NOTE_DUMMY)[0]>(
+
+  const { ids, canSelect, handleItemClick, handleAllClick, handleCanSelect } = useMultiSelect<(typeof NOTE_DUMMY)[0]>(
     'id',
     NOTE_DUMMY
   );
 
-  useEffect(() => {
-    const handleKeyPress = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && canSelect) {
-        setCanSelect(false);
-
-        handleReset();
-      }
-    };
-    window.addEventListener('keydown', handleKeyPress);
-
-    return () => window.removeEventListener('keydown', handleKeyPress);
-  }, [canSelect, handleReset]);
-
-  const handleCanSelect = () => {
-    setCanSelect(!canSelect);
-  };
-
   const handleSortOption = (id: string) => {
     setSortOption(id);