🚀 feat: 입금자명, 전화번호로 유저 검색 기능 #4

Gosrock · Aug 3, 2022 · fe4a70e · fe4a70e
1 parent e649fbb
commit fe4a70e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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 = {