From fe4a70e556c16e822d170de45fde7a1fd32c1e21 Mon Sep 17 00:00:00 2001
From: kongnayeon <seoultownroad@naver.com>
Date: Wed, 3 Aug 2022 22:48:00 +0900
Subject: [PATCH] =?UTF-8?q?:rocket:=20feat:=20=EC=9E=85=EA=B8=88=EC=9E=90?=
 =?UTF-8?q?=EB=AA=85,=20=EC=A0=84=ED=99=94=EB=B2=88=ED=98=B8=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9C=A0=EC=A0=80=20=EA=B2=80=EC=83=89=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?#4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tables/UsersPage/Table.js      |  5 ++-
 src/components/Tables/UsersPage/UserSearch.js | 42 +++++++++++++++----
 src/state/actions-creators/usersPage.js       |  7 +++-
 3 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/components/Tables/UsersPage/Table.js b/src/components/Tables/UsersPage/Table.js
index ba8daca..7361f99 100644
--- a/src/components/Tables/UsersPage/Table.js
+++ b/src/components/Tables/UsersPage/Table.js
@@ -13,10 +13,11 @@ function UsersPageTable() {
 
   const onPageChange = e => {
     // 페이지네이션 번호 바뀔때 뜸.
-    console.log(e);
     setPage(e);
     dispatch(
       usersPage({
+        searchOption: '',
+        searchString: '',
         requestPage: e
       })
     );
@@ -25,6 +26,8 @@ function UsersPageTable() {
   useEffect(() => {
     dispatch(
       usersPage({
+        searchOption: '',
+        searchString: '',
         requestPage: 1
       })
     );
diff --git a/src/components/Tables/UsersPage/UserSearch.js b/src/components/Tables/UsersPage/UserSearch.js
index 58976d0..888c9b5 100644
--- a/src/components/Tables/UsersPage/UserSearch.js
+++ b/src/components/Tables/UsersPage/UserSearch.js
@@ -1,19 +1,42 @@
-import { Button, Input, Select } from 'antd';
-import React, { useState } from 'react';
+import { Input, Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { usersPage } from '../../../state/actions-creators/usersPage';
 const { Option } = Select;
 
 function UserSearch() {
-  const [searchOption, setSearchOption] = useState('입금자명');
+  const dispatch = useDispatch();
+  const [searchOption, setSearchOption] = useState('searchName');
+  const [searchString, setSearchString] = useState('');
 
   const onOptionChange = e => {
-    console.log(e);
     if (e === '1') {
-      setSearchOption('입금자명');
+      setSearchOption('searchName');
     } else {
-      setSearchOption('전화번호');
+      setSearchOption('phoneNumber');
     }
   };
 
+  const onSearch = e => {
+    setSearchString(e);
+  };
+
+  const handleEnter = e => {
+    if (e.key === 'Enter') {
+      onSearch(e.target.value);
+    }
+  };
+
+  useEffect(() => {
+    dispatch(
+      usersPage({
+        searchOption: `${searchOption}=`,
+        searchString: `${encodeURI(searchString)}&`,
+        requestPage: 1
+      })
+    );
+  }, [searchOption, searchString]);
+
   return (
     <>
       <div className="site-input-group-wrapper">
@@ -26,13 +49,14 @@ function UserSearch() {
               전화번호
             </Option>
           </Select>
-          <Input
+          <Input.Search
             style={{
               width: 'calc(100% - 200px)'
             }}
-            placeholder={`${searchOption} 입력`}
+            placeholder="search text"
+            onSearch={onSearch}
+            onKeyPress={handleEnter}
           />
-          <Button type="primary">검색</Button>
         </Input.Group>
         <br />
       </div>
diff --git a/src/state/actions-creators/usersPage.js b/src/state/actions-creators/usersPage.js
index 58b0a79..34b7ee6 100644
--- a/src/state/actions-creators/usersPage.js
+++ b/src/state/actions-creators/usersPage.js
@@ -6,15 +6,18 @@ import {
 } from '../action-types';
 
 export const usersPage =
-  ({ requestPage }, callback) =>
+  ({ searchOption, searchString, requestPage }, callback) =>
   async dispatch => {
     try {
       dispatch({ type: USER_PAGE_PENDING });
 
       const response = await axios.get(
-        `https://api.gosrock.band/v1/users/all?order=ASC&page=${requestPage}&take=10`
+        `https://api.gosrock.band/v1/users/all?${searchOption}${searchString}order=ASC&page=${requestPage}&take=10`
       );
 
+      console.log(
+        `https://api.gosrock.band/v1/users/all?${searchOption}${searchString}order=ASC&page=${requestPage}&take=10`
+      );
       console.log('포토 조회액션1', response);
 
       const data = {