From 2a0c71a0d1925070dffe1ce6038296f842cc2108 Mon Sep 17 00:00:00 2001
From: Steadystudy <sgmin206@naver.com>
Date: Sat, 9 Jul 2022 14:28:42 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Modify/=20=EA=B2=80=EC=83=89=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=88=98=EC=A0=95=20startsWith=20=3D>=20indexOf?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/ttabong/TTaBongModal/index.jsx | 22 +++++++---------------
 src/pages/SearchPage/index.jsx             |  4 ++--
 2 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/feature/ttabong/TTaBongModal/index.jsx b/src/feature/ttabong/TTaBongModal/index.jsx
index a477da3b..7110b5fc 100644
--- a/src/feature/ttabong/TTaBongModal/index.jsx
+++ b/src/feature/ttabong/TTaBongModal/index.jsx
@@ -1,16 +1,13 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useEffect, useCallback } from 'react';
 import * as S from './style';
-import Modal, { useModal } from '../../../components/Modal';
+import Modal from '../../../components/Modal';
 import BaseCardContainer from '../../../components/BaseCardContainer';
-import InputForm from '../../../components/InputForm';
 import UserInfoItem from '../../../components/UserInfoItem';
 import theme from '../../../commons/style/themes';
-import useForm from '../../../hooks/useForm';
-import { getAllUsers, searchUser } from '../../../apis';
+import { getAllUsers } from '../../../apis';
 import { useAuthContext } from '../../../contexts/UserProvider';
 
-const TTaBongModal = ({ checkedUsers, setCheckedUsers, modalProps }) => {
+const TTaBongModal = ({ setCheckedUsers, modalProps }) => {
   const { isModalOn, backgroundRef, handleCloseModal } = modalProps;
 
   const { authUser } = useAuthContext();
@@ -32,13 +29,11 @@ const TTaBongModal = ({ checkedUsers, setCheckedUsers, modalProps }) => {
   }, []);
 
   const handleSearchSubmit = (e) => {
-    e.preventDefault();
-
-    const keyword = e.target.search.value;
+    const keyword = e;
 
     setUsers(
       users.map((user) =>
-        user.fullName.startsWith(keyword)
+        user.fullName.indexOf(keyword) >= 0
           ? { ...user, searched: true }
           : { ...user, searched: false },
       ),
@@ -46,7 +41,7 @@ const TTaBongModal = ({ checkedUsers, setCheckedUsers, modalProps }) => {
   };
 
   const handleUserCheck = (e, userId) => {
-    e.preventDefault(); // 5명까지만
+    e.preventDefault();
 
     const newUsers = users.map((user) =>
       user._id !== userId ? user : { ...user, checked: !user.checked },
@@ -57,7 +52,6 @@ const TTaBongModal = ({ checkedUsers, setCheckedUsers, modalProps }) => {
     if (newCheckdUsers.length > 5) return;
 
     setUsers(newUsers);
-
     setCheckedUsers(newCheckdUsers);
   };
 
@@ -104,6 +98,4 @@ const TTaBongModal = ({ checkedUsers, setCheckedUsers, modalProps }) => {
   );
 };
 
-TTaBongModal.propTypes = {};
-
 export default TTaBongModal;
diff --git a/src/pages/SearchPage/index.jsx b/src/pages/SearchPage/index.jsx
index 79d35b92..e718b34b 100644
--- a/src/pages/SearchPage/index.jsx
+++ b/src/pages/SearchPage/index.jsx
@@ -63,8 +63,8 @@ const SearchPage = () => {
   const handleSubmit = (keyword) => {
     const { users, posts } = items;
 
-    const searchedUsers = users.filter((user) =>
-      user.fullName.startsWith(keyword),
+    const searchedUsers = users.filter(
+      (user) => user.fullName.indexOf(keyword) >= 0,
     );
 
     const searchedPosts = posts.filter((post) =>

From 5681dcfe2cae3b59fd1436fcef91d7605be2d974 Mon Sep 17 00:00:00 2001
From: Steadystudy <sgmin206@naver.com>
Date: Sat, 9 Jul 2022 14:29:12 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Refactor/=20useCallback=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=ED=95=B4=20=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/feature/ttabong/TTaBongModal/index.jsx | 46 ++++++++++++----------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/feature/ttabong/TTaBongModal/index.jsx b/src/feature/ttabong/TTaBongModal/index.jsx
index 7110b5fc..c80977fa 100644
--- a/src/feature/ttabong/TTaBongModal/index.jsx
+++ b/src/feature/ttabong/TTaBongModal/index.jsx
@@ -28,32 +28,38 @@ const TTaBongModal = ({ setCheckedUsers, modalProps }) => {
     fetchAllUsers();
   }, []);
 
-  const handleSearchSubmit = (e) => {
-    const keyword = e;
+  const handleSearchSubmit = useCallback(
+    (e) => {
+      const keyword = e;
 
-    setUsers(
-      users.map((user) =>
-        user.fullName.indexOf(keyword) >= 0
-          ? { ...user, searched: true }
-          : { ...user, searched: false },
-      ),
-    );
-  };
+      setUsers(
+        users.map((user) =>
+          user.fullName.indexOf(keyword) >= 0
+            ? { ...user, searched: true }
+            : { ...user, searched: false },
+        ),
+      );
+    },
+    [users],
+  );
 
-  const handleUserCheck = (e, userId) => {
-    e.preventDefault();
+  const handleUserCheck = useCallback(
+    (e, userId) => {
+      e.preventDefault();
 
-    const newUsers = users.map((user) =>
-      user._id !== userId ? user : { ...user, checked: !user.checked },
-    );
+      const newUsers = users.map((user) =>
+        user._id !== userId ? user : { ...user, checked: !user.checked },
+      );
 
-    const newCheckdUsers = newUsers.filter((user) => user.checked);
+      const newCheckdUsers = newUsers.filter((user) => user.checked);
 
-    if (newCheckdUsers.length > 5) return;
+      if (newCheckdUsers.length > 5) return;
 
-    setUsers(newUsers);
-    setCheckedUsers(newCheckdUsers);
-  };
+      setUsers(newUsers);
+      setCheckedUsers(newCheckdUsers);
+    },
+    [users],
+  );
 
   return (
     <Modal