diff --git a/src/components/MainLayout/MainLayout.js b/src/components/MainLayout/MainLayout.js
index 04ecbcc..c1a2042 100644
--- a/src/components/MainLayout/MainLayout.js
+++ b/src/components/MainLayout/MainLayout.js
@@ -1,36 +1,38 @@
-import { Layout, Menu, Breadcrumb } from "antd";
+import { Layout, Menu, Breadcrumb } from 'antd';
 import {
   SortAscendingOutlined,
   GlobalOutlined,
   UserOutlined,
   IdcardOutlined,
-  CompassOutlined,
-} from "@ant-design/icons";
-import React from "react";
-import { withNavigation } from "../../hoc/withRouterForClass";
-import { Route, Routes } from "react-router-dom";
-import "./MainLayout.css";
-import LandingPage from "../LandingPage/LandingPage";
-import UsersPage from "../Tables/UsersPage/UsersPage";
-import TicketsPage from "../Tables/TicketsPage/TicketsPage";
-import OrdersPage from "../Tables/OrdersPage/OrdersPage";
-import EnterPage from "../Tickets/EnterPage/EnterPage";
-import CheckPage from "../Tickets/CheckPage/CheckPage";
-import AccoutPage from "../AccountPage/AccoutPage";
+  CompassOutlined
+} from '@ant-design/icons';
+import React from 'react';
+import { withNavigation } from '../../hoc/withRouterForClass';
+import { Route, Routes } from 'react-router-dom';
+import './MainLayout.css';
+import LandingPage from '../LandingPage/LandingPage';
+import UsersPage from '../Tables/UsersPage/UsersPage';
+import TicketsPage from '../Tables/TicketsPage/TicketsPage';
+import OrdersPage from '../Tables/OrdersPage/OrdersPage';
+import EnterPage from '../Tickets/EnterPage/EnterPage';
+import CheckPage from '../Tickets/CheckPage/CheckPage';
+import AccoutPage from '../AccountPage/AccoutPage';
+import ExamplePage from '../Tables/ExamplePage/ExamplePage';
 
 const { Content, Footer, Sider } = Layout;
 
 const keyToInfo = {
-  main1: { text: "랜딩 페이지", link: "/landing" },
-  main2: { text: "유저 페이지", link: "/table/users" },
-  main3: { text: "주문목록 페이지", link: "/table/orders" },
-  main4: { text: "티켓 페이지", link: "/table/tickets" },
-  main5: { text: "실시간 티켓 입장확인", link: "/tickets/enter" },
-  main6: { text: "카메라 입장 확인", link: "/tickets/check" },
-  main7: { text: "계정", link: "/accounts" },
+  main1: { text: '랜딩 페이지', link: '/landing' },
+  main2: { text: '유저 페이지', link: '/table/users' },
+  main3: { text: '주문목록 페이지', link: '/table/orders' },
+  main4: { text: '티켓 페이지', link: '/table/tickets' },
+  main5: { text: '실시간 티켓 입장확인', link: '/tickets/enter' },
+  main6: { text: '카메라 입장 확인', link: '/tickets/check' },
+  main7: { text: '계정', link: '/accounts' },
+  main8: { text: '예시페이지네이션', link: '/example' }
 };
 
-let clickedkeyPath = ["main1"];
+let clickedkeyPath = ['main1'];
 for (let key in keyToInfo) {
   if (keyToInfo[key].link === window.location.pathname)
     clickedkeyPath = [`${key}`];
@@ -39,10 +41,10 @@ for (let key in keyToInfo) {
 class MainLayout extends React.Component {
   state = {
     collapsed: false,
-    clickedkeyPath: clickedkeyPath,
+    clickedkeyPath: clickedkeyPath
   };
 
-  onCollapse = (collapsed) => {
+  onCollapse = collapsed => {
     console.log(collapsed);
     this.setState({ collapsed });
   };
@@ -56,18 +58,18 @@ class MainLayout extends React.Component {
     const { collapsed, clickedkeyPath } = this.state;
     console.log(window.location.pathname);
     return (
-      <Layout style={{ minHeight: "100vh" }}>
+      <Layout style={{ minHeight: '100vh' }}>
         <Sider
           // theme={"light"}
           collapsible
           collapsed={collapsed}
           onCollapse={this.onCollapse}
           style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            height: "%100",
-            background: "black",
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            height: '%100',
+            background: 'black'
           }}
         >
           <div className="logo"> zetciti </div>
@@ -78,56 +80,63 @@ class MainLayout extends React.Component {
             style={{
               // display: "flex",
               // flexDirection: "column",
-              background: "black",
+              background: 'black',
 
-              marginTop: "auto 0",
-              height: "%100",
+              marginTop: 'auto 0',
+              height: '%100'
             }}
             onClick={this.menuClick}
           >
             <Menu.Item key="main1" icon={<UserOutlined />}>
-              {keyToInfo["main1"].text}
+              {keyToInfo['main1'].text}
             </Menu.Item>
             <Menu.Item key="main2" icon={<GlobalOutlined />}>
-              {keyToInfo["main2"].text}
+              {keyToInfo['main2'].text}
             </Menu.Item>
             <Menu.Item key="main3" icon={<CompassOutlined />}>
-              {keyToInfo["main3"].text}
+              {keyToInfo['main3'].text}
             </Menu.Item>
             <Menu.Item
               key="main4"
               icon={<SortAscendingOutlined />}
-              style={{ marginTop: "auto" }}
+              style={{ marginTop: 'auto' }}
             >
-              {keyToInfo["main4"].text}
+              {keyToInfo['main4'].text}
             </Menu.Item>
             <Menu.Item
               key="main5"
               icon={<IdcardOutlined />}
-              style={{ marginTop: "auto" }}
+              style={{ marginTop: 'auto' }}
             >
-              {keyToInfo["main5"].text}
+              {keyToInfo['main5'].text}
             </Menu.Item>
             <Menu.Item
               key="main6"
               icon={<IdcardOutlined />}
-              style={{ marginTop: "auto" }}
+              style={{ marginTop: 'auto' }}
             >
-              {keyToInfo["main6"].text}
+              {keyToInfo['main6'].text}
             </Menu.Item>
             <Menu.Item
               key="main7"
               icon={<IdcardOutlined />}
-              style={{ marginTop: "auto" }}
+              style={{ marginTop: 'auto' }}
             >
-              {keyToInfo["main7"].text}
+              {keyToInfo['main7'].text}
+            </Menu.Item>
+            <Menu.Item
+              key="main8"
+              icon={<IdcardOutlined />}
+              style={{ marginTop: 'auto' }}
+            >
+              {keyToInfo['main8'].text}
             </Menu.Item>
           </Menu>
         </Sider>
         <Layout className="site-layout">
-          <Content style={{ margin: "0 16px" }}>
-            <Breadcrumb style={{ margin: "16px 0" }}>
-              {clickedkeyPath.map((e) => {
+          <Content style={{ margin: '0 16px' }}>
+            <Breadcrumb style={{ margin: '16px 0' }}>
+              {clickedkeyPath.map(e => {
                 return (
                   <Breadcrumb.Item key={keyToInfo[e].text}>
                     {keyToInfo[e].text}
@@ -147,10 +156,11 @@ class MainLayout extends React.Component {
                 <Route exact path="/tickets/enter" element={<EnterPage />} />
                 <Route exact path="/tickets/check" element={<CheckPage />} />
                 <Route exact path="/accounts" element={<AccoutPage />} />
+                <Route exact path="/example" element={<ExamplePage />} />
               </Routes>
             </div>
           </Content>
-          <Footer style={{ textAlign: "center" }}>
+          <Footer style={{ textAlign: 'center' }}>
             gosrock ©2022 Created by gosrock
           </Footer>
         </Layout>
diff --git a/src/components/Tables/ExamplePage/ExamplePage.js b/src/components/Tables/ExamplePage/ExamplePage.js
new file mode 100644
index 0000000..83b819b
--- /dev/null
+++ b/src/components/Tables/ExamplePage/ExamplePage.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import TableExample from './Table';
+
+function ExamplePage() {
+  return (
+    <div>
+      <TableExample />
+    </div>
+  );
+}
+
+export default ExamplePage;
diff --git a/src/components/Tables/ExamplePage/Table.js b/src/components/Tables/ExamplePage/Table.js
new file mode 100644
index 0000000..9db4410
--- /dev/null
+++ b/src/components/Tables/ExamplePage/Table.js
@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from 'react';
+
+import { useSelector, useDispatch } from 'react-redux';
+import { Avatar, Table } from 'antd';
+import { examplePagination } from '../../../state/actions-creators/examplePagination';
+const { Column } = Table;
+
+function TableExample() {
+  const dispatch = useDispatch();
+  const { data, pending } = useSelector(state => state.examplePagination);
+  const [page, setPage] = useState(1);
+
+  const onPageChange = e => {
+    // 페이지네이션 번호 바뀔때 뜸.
+    console.log(e);
+    setPage(e);
+    dispatch(
+      examplePagination({
+        requestPage: e
+      })
+    );
+  };
+
+  useEffect(() => {
+    dispatch(
+      examplePagination({
+        page: 0
+      })
+    );
+  }, [dispatch]);
+
+  // 받을 수 있는 정보 목록
+  //   {
+  //     "albumId": 1,
+  //     "id": 11,
+  //     "title": "nihil at amet non hic quia qui",
+  //     "url": "https://via.placeholder.com/600/1ee8a4",
+  //     "thumbnailUrl": "https://via.placeholder.com/150/1ee8a4"
+  //   },
+
+  return (
+    <>
+      <Table
+        loading={pending}
+        pagination={{
+          current: page,
+          pageSize: 10,
+          total: data ? data.total : 0,
+          showSizeChanger: false,
+          onChange: onPageChange
+        }}
+        key="id"
+        rowKey="id"
+        // onRow={(record, rowIndex) => {
+        //   return {
+        //     onClick: event => {
+        //       console.log(event, record);
+        //       onStopClickHandler(record);
+        //     } // click row
+        //   };
+        // }}
+        pageSize={10}
+        dataSource={data ? data.photoList : []}
+      >
+        <Column
+          title="썸네일"
+          dataIndex="thumbnailUrl"
+          key="id"
+          render={element => {
+            return <Avatar src={element} />;
+          }}
+        />
+        <Column title="앨범 아이디" dataIndex="id" key="id" />
+        <Column title="제목" dataIndex="title" key="id" />
+
+        <Column
+          title="관리"
+          // dataindex 정보를 안주면 render 의 element 가 행 하나의 값이 들어가게됨
+          dataIndex=""
+          key="id"
+          render={element => {
+            return (
+              <button
+                key={element.id}
+                style={{
+                  backgroundColor: 'inherit',
+                  border: 'none',
+                  fontWeight: 700
+                }}
+                onClick={() => console.log(element)}
+              >
+                클릭 이벤트 콘솔 창 확인
+              </button>
+            );
+          }}
+        />
+      </Table>
+    </>
+  );
+}
+
+export default TableExample;
diff --git a/src/state/action-types/examplePagination.js b/src/state/action-types/examplePagination.js
new file mode 100644
index 0000000..df61ec9
--- /dev/null
+++ b/src/state/action-types/examplePagination.js
@@ -0,0 +1,4 @@
+//유저 조회 디스패치 관련
+export const EXAMPLE_PAGINATION_PENDING = 'EXAMPLE_PAGINATION_PENDING';
+export const EXAMPLE_PAGINATION_SUCCESS = 'EXAMPLE_PAGINATION_SUCCESS';
+export const EXAMPLE_PAGINATION_ERROR = 'EXAMPLE_PAGINATION_ERROR';
diff --git a/src/state/action-types/index.js b/src/state/action-types/index.js
index cdf3163..30692f0 100644
--- a/src/state/action-types/index.js
+++ b/src/state/action-types/index.js
@@ -1,3 +1,4 @@
-export * from "./slackMessage";
-export * from "./slackValidation";
-export * from "./logout";
+export * from './slackMessage';
+export * from './slackValidation';
+export * from './logout';
+export * from './examplePagination';
diff --git a/src/state/action-types/keywordList.js b/src/state/action-types/keywordList.js
deleted file mode 100644
index 772c5a8..0000000
--- a/src/state/action-types/keywordList.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const KEYWORD_LIST_PENDING = "KEYWORD_LIST_PENDING";
-export const KEYWORD_LIST_SUCCESS = "KEYWORD_LIST_SUCCESS";
-export const KEYWORD_LIST_ERROR = "KEYWORD_LIST_ERROR";
diff --git a/src/state/actions-creators/examplePagination.js b/src/state/actions-creators/examplePagination.js
new file mode 100644
index 0000000..57a5f20
--- /dev/null
+++ b/src/state/actions-creators/examplePagination.js
@@ -0,0 +1,39 @@
+import axios from 'axios';
+import {
+  EXAMPLE_PAGINATION_PENDING,
+  EXAMPLE_PAGINATION_SUCCESS,
+  EXAMPLE_PAGINATION_ERROR
+} from '../action-types';
+
+export const examplePagination =
+  ({ requestPage }, callback) =>
+  async dispatch => {
+    try {
+      dispatch({ type: EXAMPLE_PAGINATION_PENDING });
+
+      const response = await axios.get(
+        'https://jsonplaceholder.typicode.com/photos',
+        {
+          params: {
+            _page: requestPage,
+            _limit: 10
+          }
+        }
+      );
+      console.log('포토 조회액션', response);
+
+      const data = {
+        total: 5000,
+        currentPage: requestPage,
+        photoList: response.data
+      };
+
+      dispatch({ type: EXAMPLE_PAGINATION_SUCCESS, payload: data });
+
+      // 자동으로 피쳐로 넘어가게끔
+      // callback();
+    } catch (e) {
+      //400 ~
+      dispatch({ type: EXAMPLE_PAGINATION_ERROR, payload: '조회 실패' });
+    }
+  };
diff --git a/src/state/actions-creators/keywordList.js b/src/state/actions-creators/keywordList.js
deleted file mode 100644
index dd69885..0000000
--- a/src/state/actions-creators/keywordList.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import axios from "axios";
-import {
-  KEYWORD_LIST_PENDING,
-  KEYWORD_LIST_SUCCESS,
-  KEYWORD_LIST_ERROR,
-} from "../action-types";
-
-export const keywordList =
-  ({ page, searchString }, callback) =>
-  async (dispatch) => {
-    try {
-      dispatch({ type: KEYWORD_LIST_PENDING });
-
-      const response = await axios.get("/api/admin/keyword", {
-        params: {
-          page,
-          searchString,
-        },
-      });
-
-      const data = {
-        searchString: searchString,
-        keywordCount: response.data.data.keywordCount,
-        totalPage: response.data.data.totalPage,
-        currentPage: page,
-        keywordList: response.data.data.keywordList,
-      };
-
-      dispatch({ type: KEYWORD_LIST_SUCCESS, payload: data });
-
-      // 자동으로 피쳐로 넘어가게끔
-      // callback();
-    } catch (e) {
-      //400 ~
-      console.log(e.response.data);
-
-      dispatch({ type: KEYWORD_LIST_ERROR, payload: "조회 실패" });
-    }
-  };
diff --git a/src/state/reducers/examplePagination.js b/src/state/reducers/examplePagination.js
new file mode 100644
index 0000000..14d7673
--- /dev/null
+++ b/src/state/reducers/examplePagination.js
@@ -0,0 +1,68 @@
+import {
+  EXAMPLE_PAGINATION_PENDING,
+  EXAMPLE_PAGINATION_SUCCESS,
+  EXAMPLE_PAGINATION_ERROR
+} from '../action-types';
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default function (
+  state = {
+    data: {
+      totalPage: 0,
+      currentPage: 1,
+      userList: []
+    },
+    error: null,
+    pending: false
+  },
+  action
+) {
+  switch (action.type) {
+    // case USER_STATE_TO_STOP_SUCCESS:
+    //   // 해당 변경된 아이디를 찾아서 정보를 변경합니다.
+    //   console.log("asdfasdfadsfas", action.payload);
+    //   const newUserList = state.data.userList.map((element) => {
+    //     if (element._id === action.payload._id) {
+    //       console.log("find", element._id);
+    //       return action.payload;
+    //     }
+    //     return element;
+    //   });
+    //   return {
+    //     ...state,
+    //     data: {
+    //       userCount: state.data.userCount,
+    //       totalPage: state.data.totalPage,
+    //       currentPage: state.data.currentPage,
+    //       userList: newUserList,
+    //     },
+    //     error: null,
+    //   };
+    // case USER_STATE_TO_NORMAL_SUCCESS:
+    //   const newNORMALUserList = state.data.userList.map((element) => {
+    //     if (element._id === action.payload._id) {
+    //       console.log("find", element._id);
+    //       return action.payload;
+    //     }
+    //     return element;
+    //   });
+    //   return {
+    //     ...state,
+    //     data: {
+    //       userCount: state.data.userCount,
+    //       totalPage: state.data.totalPage,
+    //       currentPage: state.data.currentPage,
+    //       userList: newNORMALUserList,
+    //     },
+    //     error: null,
+    //   };
+    case EXAMPLE_PAGINATION_PENDING:
+      return { ...state, data: action.payload, error: null, pending: true };
+    case EXAMPLE_PAGINATION_SUCCESS:
+      return { ...state, data: action.payload, error: null, pending: false };
+    case EXAMPLE_PAGINATION_ERROR:
+      return { ...state, data: [], error: action.payload, pending: false };
+    default:
+      return state;
+  }
+}
diff --git a/src/state/reducers/index.js b/src/state/reducers/index.js
index 5735626..7c28c67 100644
--- a/src/state/reducers/index.js
+++ b/src/state/reducers/index.js
@@ -1,8 +1,10 @@
-import { combineReducers } from "redux";
-import { auth } from "./auth";
-import slackMessage from "./slackMessage";
+import { combineReducers } from 'redux';
+import { auth } from './auth';
+import examplePagination from './examplePagination';
+import slackMessage from './slackMessage';
 
 export default combineReducers({
   slackMessage: slackMessage,
   auth: auth,
+  examplePagination: examplePagination
 });
diff --git a/src/state/reducers/keywordList.js b/src/state/reducers/keywordList.js
deleted file mode 100644
index baac2ea..0000000
--- a/src/state/reducers/keywordList.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-  // GET_SGGSEARCH,
-  KEYWORD_LIST_PENDING,
-  KEYWORD_LIST_SUCCESS,
-  KEYWORD_LIST_ERROR,
-} from "../action-types";
-
-// eslint-disable-next-line import/no-anonymous-default-export
-export default function (
-  state = {
-    data: {
-      keywordCount: 0,
-      totalPage: 0,
-      currentPage: 0,
-      keywordList: [],
-      searchString: "",
-    },
-    error: null,
-  },
-  action
-) {
-  switch (action.type) {
-    case KEYWORD_LIST_PENDING:
-      return { ...state, data: [], error: null };
-    case KEYWORD_LIST_SUCCESS:
-      return { ...state, data: action.payload, error: null };
-    case KEYWORD_LIST_ERROR:
-      return { ...state, data: [], error: action.payload };
-    default:
-      return state;
-  }
-}
diff --git a/src/state/reducers/userLookup.js b/src/state/reducers/userLookup.js
deleted file mode 100644
index ba4a340..0000000
--- a/src/state/reducers/userLookup.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
-  // GET_SGGSEARCH,
-  GET_USER_LOOKUP,
-  GET_USER_LOOKUP_SUCCESS,
-  GET_USER_LOOKUP_ERROR,
-  USER_STATE_TO_STOP_SUCCESS,
-  USER_STATE_TO_NORMAL_SUCCESS,
-} from "../action-types";
-
-// eslint-disable-next-line import/no-anonymous-default-export
-export default function (
-  state = {
-    data: {
-      userCount: 0,
-      totalPage: 0,
-      currentPage: 0,
-      userList: [],
-    },
-    error: null,
-  },
-  action
-) {
-  switch (action.type) {
-    case USER_STATE_TO_STOP_SUCCESS:
-      // 해당 변경된 아이디를 찾아서 정보를 변경합니다.
-      console.log("asdfasdfadsfas", action.payload);
-      const newUserList = state.data.userList.map((element) => {
-        if (element._id === action.payload._id) {
-          console.log("find", element._id);
-          return action.payload;
-        }
-        return element;
-      });
-      return {
-        ...state,
-        data: {
-          userCount: state.data.userCount,
-          totalPage: state.data.totalPage,
-          currentPage: state.data.currentPage,
-          userList: newUserList,
-        },
-        error: null,
-      };
-    case USER_STATE_TO_NORMAL_SUCCESS:
-      const newNORMALUserList = state.data.userList.map((element) => {
-        if (element._id === action.payload._id) {
-          console.log("find", element._id);
-          return action.payload;
-        }
-        return element;
-      });
-      return {
-        ...state,
-        data: {
-          userCount: state.data.userCount,
-          totalPage: state.data.totalPage,
-          currentPage: state.data.currentPage,
-          userList: newNORMALUserList,
-        },
-        error: null,
-      };
-    case GET_USER_LOOKUP:
-      return { ...state, data: action.payload, error: null };
-    case GET_USER_LOOKUP_SUCCESS:
-      return { ...state, data: action.payload, error: null };
-    case GET_USER_LOOKUP_ERROR:
-      return { ...state, data: [], error: action.payload };
-    default:
-      return state;
-  }
-}