From 39f5c8accf31bdad93b1700a611bd00f8d9ccd71 Mon Sep 17 00:00:00 2001
From: kimkyuhong <bobo3766@naver.com>
Date: Wed, 20 Nov 2024 23:51:37 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A3=BC=EC=9A=A9=EC=9D=B4=20=EC=9D=98?=
 =?UTF-8?q?=EA=B2=AC=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/hook/useMultiSelect.ts  | 22 ++++++++++++++++++----
 src/page/deleted/index.tsx         | 21 ++-------------------
 src/page/handover/HandoverPage.tsx | 23 +++--------------------
 3 files changed, 23 insertions(+), 43 deletions(-)

diff --git a/src/common/hook/useMultiSelect.ts b/src/common/hook/useMultiSelect.ts
index b628ed145..234ff02f0 100644
--- 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
index 14e872b85..b99aadc45 100644
--- 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
index 2df43ebb8..d7f7d7efd 100644
--- 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);