🚀 feat: 검색 옵션, 검색창, 검색 버튼 #4

src/apis/users/UsersApi.js

@@ -0,0 +1,3 @@
+const { default: axios } = require('axios');
+
+const { default: InstanceSetting } = require('../common/instance.api');

src/components/Tables/UsersPage/Table.js

@@ -22,10 +22,9 @@ function UsersPageTable() {
   };
 
   useEffect(() => {
-    setPage(page + 1);
     dispatch(
       usersPage({
-        requestPage: page
+        requestPage: 1
       })
     );
   }, [dispatch]);
@@ -52,14 +51,6 @@ function UsersPageTable() {
         }}
         key="id"
         rowKey="id"
-        // onRow={(record, rowIndex) => {
-        //   return {
-        //     onClick: event => {
-        //       console.log(event, record);
-        //       onStopClickHandler(record);
-        //     } // click row
-        //   };
-        // }}
         pageSize={10}
         dataSource={data ? data.userList : []}
       >

src/components/Tables/UsersPage/UserSearch.js

@@ -0,0 +1,43 @@
+import { Button, Input, Select } from 'antd';
+import React, { useState } from 'react';
+const { Option } = Select;
+
+function UserSearch() {
+  const [searchOption, setSearchOption] = useState('입금자명');
+
+  const onOptionChange = e => {
+    console.log(e);
+    if (e === '1') {
+      setSearchOption('입금자명');
+    } else {
+      setSearchOption('전화번호');
+    }
+  };
+
+  return (
+    <>
+      <div className="site-input-group-wrapper">
+        <Input.Group compact>
+          <Select defaultValue="입금자명" onChange={onOptionChange}>
+            <Option key="1" value="1">
+              입금자명
+            </Option>
+            <Option key="2" value="2">
+              전화번호
+            </Option>
+          </Select>
+          <Input
+            style={{
+              width: 'calc(100% - 200px)'
+            }}
+            placeholder={`${searchOption} 입력`}
+          />
+          <Button type="primary">검색</Button>
+        </Input.Group>
+        <br />
+      </div>
+    </>
+  );
+}
+
+export default UserSearch;

src/components/Tables/UsersPage/UsersPage.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import UsersPageTable from './Table';
+import UserSearch from './UserSearch';
 
 function UsersPage() {
   return (
     <div>
+      <UserSearch />
       <UsersPageTable />
     </div>
   );