중간커밋

package.json

@@ -11,6 +11,7 @@
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-qr-reader": "^3.0.0-beta-1",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",

src/components/Tables/ExamplePage/Table.js

@@ -60,7 +60,7 @@ function TableExample() {
         //   };
         // }}
         pageSize={10}
-        dataSource={data ? data.photoList : []}
+        dataSource={data ? data.photolist : []}
       >
         <Column
           title="썸네일"

src/components/Tables/OrdersPage/OrdersPage.js

@@ -1,7 +1,76 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
-function OrdersPage() {
-  return <div>봉세환의 OrdersPage</div>;
-}
+import { useSelector, useDispatch } from 'react-redux';
+import { Segmented, Table, Select } from 'antd';
+import { orderListPagination } from '../../../state/actions-creators/orderListPagination';
+const { Column } = Table;
+
+export default function OrdersPage() {
+  const dispatch = useDispatch();
+  const { data, pending } = useSelector(state => state.orderListPagination); // useSelector???? 시발련아 뭐가문제야
+  console.log(data);
+  const [page, setPage] = useState(1);
+  const [day, setDay] = useState('BOTH');
+
+  const onPageChange = e => {
+    // 페이지네이션 번호 바뀔때 뜸.
+    console.log(e);
+    setPage(e);
+    dispatch(
+      orderListPagination({
+        requestPage: e
+      })
+    );
+  };
 
-export default OrdersPage;
+  useEffect(() => {
+    dispatch(
+      orderListPagination({
+        page: 0
+      })
+    );
+  }, [dispatch]);
+
+  return (
+    <>
+      <Segmented
+        options={['BOTH', 'YB', 'OB']}
+        value={day}
+        onChange={day => {
+          if (day === 'OB') {
+            setDay(day);
+          } else if (day === 'YB') {
+            setDay(day);
+          } else if (day === 'BOTH') {
+            setDay(day);
+          }
+        }}
+      />
+
+      <Table
+        loading={pending}
+        pagination={{
+          current: page,
+          pageSize: 10,
+          total: data ? data.total : 0,
+          showSizeChanger: false,
+          onChange: onPageChange
+        }}
+        key="id"
+        rowKey="id"
+        pageSize={10}
+        dataSource={data ? data.orderList : []}
+      >
+        <Column title="아이디" dataIndex="id" />
+        <Column title="입금자명" dataIndex="user" render={user => user.name} />
+        <Column title="주문금액" dataIndex="price" />
+        <Column title="티켓 매수" dataIndex="howMany" />
+        <Column title="선택 날짜" dataIndex="date" />
+        <Column title="주문 일시" dataIndex="createdAt" />
+        <Column title="주문 상태" dataIndex="status" />
+        <Column title="공짜 티켓 여부" dataIndex="isFree" />
+        <Column title="매니저" dataIndex="admin" />
+      </Table>
+    </>
+  );
+}

src/components/Tickets/CheckPage/CheckPage.js

@@ -1,7 +1,51 @@
-import React from "react";
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { QrReader } from 'react-qr-reader';
+import { checkPage } from '../../../state/actions-creators/CheckPage';
+import { Card } from 'antd';
 
 function CheckPage() {
-  return <div>CheckPage</div>;
+  const [qrScan, setQrScan] = useState('No result');
+  const [uuid, setUuid] = useState([]);
+  // const { data, pending } = useSelector(state => state.checkPage); ??? useSelector 씨발
+  const arr = [];
+
+  const handleScan = (result, error) => {
+    if (!!result) {
+      setQrScan(result.text);
+      console.log('result.rawBytes', result.rawBytes);
+      result.rawBytes.forEach(x => {
+        arr.push(x);
+      });
+      console.log('arr', arr);
+    }
+    if (!!error) {
+      console.log('ERROR!', error);
+    }
+  };
+
+  return (
+    <>
+      <Card title="QR Checker">
+        <Card type="inner" title="QR Code Check">
+          <QrReader
+            delay={300}
+            onResult={handleScan}
+            style={{ width: '100%' }}
+          />
+          <h3>Scanned QR Code Here: {qrScan}</h3>
+        </Card>
+      </Card>
+
+      <button
+        onClick={() => {
+          setUuid([...arr]);
+        }}
+      >
+        {uuid}
+      </button>
+    </>
+  );
 }
 
 export default CheckPage;

src/state/action-types/CheckPage.js

@@ -0,0 +1,3 @@
+export const CHECKING_PENDING = 'CHECKING_PENDING';
+export const CHECKING_SUCCESS = 'CHECKING_SUCCESS';
+export const CHECKING_ERROR = 'CHECKING_ERROR';

src/state/action-types/orderListPagination.js

@@ -0,0 +1,7 @@
+export const ORDERS_PENDING = 'ORDERS_PENDING';
+export const ORDERS_SUCCESS = 'ORDERS_SUCCESS';
+export const ORDERS_ERROR = 'ORDERS_ERROR';
+export const STATE_CHANGE = 'STATE_CHANGE';
+export const STATE_CHANGE_ERROR = 'STATE_CHANGE_ERROR';
+export const SET_FREE_TICKET = 'SET_FREE_TICKET';
+export const SET_FREE_TICKET_ERROR = 'SET_FREE_TICKET_ERROR';

src/state/actions-creators/CheckPage.js

@@ -0,0 +1,27 @@
+import axios from 'axios';
+import {
+  CHECKING_PENDING,
+  CHECKING_SUCCESS,
+  CHECKING_ERROR
+} from '../action-types/CheckPage.js';
+
+export const checkPage =
+  ({ requestPage }, { uuid }, callback) =>
+  async dispatch => {
+    try {
+      dispatch({ type: CHECKING_PENDING });
+
+      const response = await axios.post(
+        `https://api.gosrock.band/v1/tickets/${uuid}/enter`
+      );
+      console.log('서버 응답?', response);
+
+      dispatch({ type: CHECKING_SUCCESS, payload: '조회 성공' });
+
+      // 자동으로 피쳐로 넘어가게끔
+      // callback();
+    } catch (e) {
+      //400 ~
+      dispatch({ type: CHECKING_ERROR, payload: '조회 실패' });
+    }
+  };

src/state/actions-creators/examplePagination.js

@@ -1,39 +1,37 @@
 import axios from 'axios';
 import {
-  EXAMPLE_PAGINATION_PENDING,
-  EXAMPLE_PAGINATION_SUCCESS,
-  EXAMPLE_PAGINATION_ERROR
-} from '../action-types';
+  ORDERS_PENDING,
+  ORDERS_SUCCESS,
+  ORDERS_ERROR,
+  STATE_CHANGE,
+  STATE_CHANGE_ERROR,
+  SET_FREE_TICKET,
+  SET_FREE_TICKET_ERROR
+} from '../action-types/orderListPagination';
 
 export const examplePagination =
   ({ requestPage }, callback) =>
   async dispatch => {
     try {
-      dispatch({ type: EXAMPLE_PAGINATION_PENDING });
+      dispatch({ type: ORDERS_PENDING });
 
       const response = await axios.get(
-        'https://jsonplaceholder.typicode.com/photos',
-        {
-          params: {
-            _page: requestPage,
-            _limit: 10
-          }
-        }
+        'https://api.gosrock.band/v1/tickets/find?order=ASC&page=1&take=10'
       );
       console.log('포토 조회액션', response);
 
       const data = {
-        total: 5000,
+        total: response.data.data.meta.itemCount,
         currentPage: requestPage,
-        photoList: response.data
+        orderList: response.data.data
       };
 
-      dispatch({ type: EXAMPLE_PAGINATION_SUCCESS, payload: data });
+      dispatch({ type: ORDERS_SUCCESS, payload: data });
 
       // 자동으로 피쳐로 넘어가게끔
       // callback();
     } catch (e) {
       //400 ~
-      dispatch({ type: EXAMPLE_PAGINATION_ERROR, payload: '조회 실패' });
+      dispatch({ type: ORDERS_ERROR, payload: '조회 실패' });
     }
   };

src/state/actions-creators/orderListPagination.js

@@ -0,0 +1,37 @@
+import axios from 'axios';
+import {
+  ORDERS_PENDING,
+  ORDERS_SUCCESS,
+  ORDERS_ERROR,
+  STATE_CHANGE,
+  STATE_CHANGE_ERROR,
+  SET_FREE_TICKET,
+  SET_FREE_TICKET_ERROR
+} from '../action-types/orderListPagination.js';
+
+export const orderListPagination =
+  ({ requestPage }, callback) =>
+  async dispatch => {
+    try {
+      dispatch({ type: ORDERS_PENDING });
+
+      const response = await axios.get(
+        'https://api.gosrock.band/v1/tickets/find?order=ASC&page=1&take=10'
+      );
+      console.log('티켓 조회', response);
+
+      const data = {
+        total: response.data.data.meta.itemCount,
+        currentPage: requestPage,
+        photoList: response.data.data.data
+      };
+
+      dispatch({ type: ORDERS_SUCCESS, payload: data });
+
+      // 자동으로 피쳐로 넘어가게끔
+      // callback();
+    } catch (e) {
+      //400 ~
+      dispatch({ type: ORDERS_ERROR, payload: '조회 실패' });
+    }
+  };