🚀 feat: checkpage, orderpage

.gitignore

@@ -20,5 +20,5 @@
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
-public
+yarn-error.log*              
+public                                                  

package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.7.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "add": "^2.0.6",
     "antd": "^4.21.6",
     "axios": "^0.27.2",
     "moment": "^2.29.4",
@@ -17,6 +19,9 @@
     "react-scripts": "5.0.1",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",
+    "socket.io": "^4.5.1",
+    "socket.io-client": "^4.5.1",
+    "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,9 +1,14 @@
-import React from "react";
-import MainLayout from "./components/MainLayout/MainLayout";
+import React from 'react';
+import MainLayout from './components/MainLayout/MainLayout';
+import CheckPage from './components/Tickets/CheckPage/CheckPage';
+import { Routes, Route } from 'react-router-dom';
 function App({ match }) {
   return (
     <>
-      <MainLayout />
+      <Routes>
+        <Route path="*" element={<MainLayout />} />
+        <Route exact path="/tickets/check" element={<CheckPage />} />
+      </Routes>
     </>
   );
 }

src/apis/users/UsersApi.js

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

src/components/LandingPage/Box.css

@@ -0,0 +1,29 @@
+
+.Box {
+    width: 200px;
+    border-radius: 4px;
+    background: white;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    cursor: pointer;
+  }
+
+
+  .text1 {
+    color: rgb(185, 185, 185);
+    font-size: 14px;
+    justify-content: left;
+    text-align: left;
+    margin-left: 17pt;
+  }
+
+
+  .text2 {
+    margin-left: 17pt;
+    color: rgb(185, 185, 185);
+    font-size: 30px;
+    justify-content: left;
+    text-align: left;
+  }

src/components/LandingPage/Box.js

@@ -0,0 +1,20 @@
+import './Box.css';
+
+export const Box = ({ data, title }) => {
+  return (
+    <div
+      className="Box"
+      style={{
+        marginRight: '20px',
+        float: 'left',
+        marginBottom: '20px'
+      }}
+    >
+      <div>
+        <div className="text1">{title}</div>
+
+        <div className="text2"> {data}</div>
+      </div>
+    </div>
+  );
+};

src/components/LandingPage/LandingPage.js

@@ -1,7 +1,83 @@
-import React from "react";
+import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { Box } from './Box';
+import { LandingPage } from '../../state/actions-creators/LandingPage';
 
-function LandingPage() {
-  return <div>LandingPage</div>;
+function Landing_Page() {
+  const dispatch = useDispatch();
+  const { data } = useSelector(state => state.LandingPage);
+
+  useEffect(() => {
+    dispatch(LandingPage());
+  }, [dispatch]);
+
+  console.log(data);
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <ul>
+        <p
+          style={{ fontWeight: 'bold', fontSize: '14px', marginBottom: '20px' }}
+        >
+          티켓 관련
+        </p>
+
+        {data && (
+          <div>
+            <Box data={data?.totalTicket} title={'링크 발급된 티켓'}>
+              {' '}
+            </Box>
+
+            <Box data={data?.depositedTicket} title={'입금 확인된 티켓'}>
+              {' '}
+            </Box>
+
+            <Box data={data?.income} title={'판매대금'}>
+              {' '}
+            </Box>
+          </div>
+        )}
+
+        <p
+          style={{ fontWeight: 'bold', fontSize: '14px', marginBottom: '20px' }}
+        >
+          입금 관련
+        </p>
+        {data && (
+          <div>
+            <Box data={data?.doneOrder} title={'입금 확인 완료'}>
+              {' '}
+            </Box>
+
+            <Box data={data?.waitOrder} title={'입금 확인 중'}>
+              {' '}
+            </Box>
+
+            <Box data={data?.expireOrder} title={'미입금 처리'}>
+              {' '}
+            </Box>
+          </div>
+        )}
+
+        <p
+          style={{ fontWeight: 'bold', fontSize: '14px', marginBottom: '20px' }}
+        >
+          입장 확인 관련
+        </p>
+        {data && (
+          <div>
+            <Box data={data?.enteredTicket} title={'입장 확인된 티켓'}>
+              {' '}
+            </Box>
+
+            <Box data={data?.nonEnteredTicket} title={'입장 확인 안 된 티켓'}>
+              {' '}
+            </Box>
+          </div>
+        )}
+      </ul>
+    </div>
+  );
 }
 
-export default LandingPage;
+export default Landing_Page;

src/components/MainLayout/MainLayout.js

@@ -154,7 +154,7 @@ class MainLayout extends React.Component {
                 <Route exact path="/table/orders" element={<OrdersPage />} />
                 <Route exact path="/table/tickets" element={<TicketsPage />} />
                 <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>

src/components/Tables/TicketsPage/TicketsPage.js

@@ -1,7 +1,193 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+import { useSelector, useDispatch } from 'react-redux';
+import { Table, Segmented, Select } from 'antd';
+import {
+  ticketPagi,
+  ticketPagination
+} from '../../../state/actions-creators/ticketPagination';
+import { changeState } from '../../../state/actions-creators/ticketPagination';
+
+const { Column } = Table;
+const { Option } = Select;
 
 function TicketsPage() {
-  return <div>ㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㅇㄹ</div>;
+  const dispatch = useDispatch();
+  const { data, pending } = useSelector(state => state.ticketPagination);
+  const [page, setPage] = useState(1);
+  const [value, setValue] = useState('All');
+
+  const onSelectStateHandler = (e, id) => {
+    console.log(' id값 : ', id);
+    dispatch(changeState({ id, e }));
+  };
+
+  const onPageChange = e => {
+    console.log(e);
+    setPage(e);
+    if (value === 'All') {
+      dispatch(
+        ticketPagi(
+          {
+            requestVal: null
+          },
+          { page: e }
+        )
+      );
+    } else {
+      dispatch(
+        ticketPagi(
+          {
+            requestVal: value
+          },
+          {
+            page: e
+          }
+        )
+      );
+    }
+  };
+  console.log(data);
+
+  useEffect(() => {
+    dispatch(
+      ticketPagi(
+        {
+          requestVal: null
+        },
+        { page: 1 }
+      )
+    );
+  }, [dispatch]);
+
+  const handlefilt = value => {
+    if (value === 'All') {
+      dispatch(
+        ticketPagi(
+          {
+            requestVal: null
+          },
+          { page }
+        )
+      );
+    } else {
+      dispatch(
+        ticketPagi(
+          {
+            requestVal: value
+          },
+          { page }
+        )
+      );
+    }
+  };
+
+  //해결법?처음에 나오는 두번 클릭....ㅠ
+
+  return (
+    <>
+      <Segmented
+        options={['All', 'YB', 'OB']}
+        value={value}
+        onChange={value => {
+          if (value === 'OB') {
+            setValue(value);
+            //handlefilt(value);
+            console.log(value);
+            handlefilt(value);
+          } else if (value === 'YB') {
+            setValue(value);
+            //handlefilt(value);
+            console.log(value);
+            handlefilt(value);
+          } else if (value === 'All') {
+            setValue(value);
+            console.log(value);
+            handlefilt(value);
+          }
+        }}
+      />
+      <div style={{ marginBottom: '20px' }} />
+
+      <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.ticketList : []}
+      >
+        <Column title="아이디" dataIndex="id" key="id" />
+        <Column title="url" dataIndex="uuid" key="id" />
+        <Column
+          title="입금자명"
+          dataIndex="user"
+          render={user => user.name}
+          key="id"
+        />
+
+        <Column title="공연 날짜" dataIndex="date" key="id" />
+        <Column
+          title="예매일자"
+          dataIndex="createdAt"
+          render={element => {
+            return moment(element).utc(false).format('MM월DD일 HH:mm');
+          }}
+        />
+        <Column
+          title="업데이트일자"
+          dataIndex="updatedAt"
+          key="id"
+          render={element => {
+            return moment(element).utc(false).format('MM월DD일 HH:mm');
+          }}
+        />
+        <Column
+          title="Action"
+          dataIndex=""
+          render={element => {
+            return (
+              <div style={{ justifyContent: 'space-between', margin: '20px' }}>
+                <Select
+                  defaultValue={element.status}
+                  onSelect={e => onSelectStateHandler(e, element.id)}
+                >
+                  <Option value="입금확인">입금확인</Option>
+                  <Option value="입장완료">입장완료</Option>
+                  <Option value="기한만료" disabled={true}>
+                    기한만료
+                  </Option>
+                  <Option value="확인대기" disabled={true}>
+                    확인대기
+                  </Option>
+                </Select>
+              </div>
+            );
+          }}
+        />
+        <Column
+          title="Admin"
+          dataIndex="admin"
+          render={admin => (admin ? admin.name : null)}
+          key="id"
+        />
+      </Table>
+    </>
+  );
 }
 
 export default TicketsPage;