[v1.0.0] 프로덕션 최종 수정

Gosrock · Aug 14, 2022 · 051a105 · 051a105
2 parents 9bd6ae8 + b9a44b1
commit 051a105
Show file tree

Hide file tree

Showing 31 changed files with 105 additions and 140 deletions.
diff --git a/public/errorSound.mp3 b/public/errorSound.mp3
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Ticket_Overall-Admin-Page for the 22nd Gosrock Concert"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>고스락 관리자 페이지</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/notificationSound.mp3 b/public/notificationSound.mp3
diff --git a/public/qrSound.mp3 b/public/qrSound.mp3
diff --git a/public/successSound.mp3 b/public/successSound.mp3
diff --git a/src/components/AuthPage/LoginPage.js b/src/components/AuthPage/LoginPage.js
@@ -30,15 +30,13 @@ function LoginPage() {
 
   useEffect(() => {
     if (error) {
-      console.log(error);
       alert(error.errorMessage);
     }
     // pending 도 여기서 관리가능
     // 다시 테스트
   }, [error]);
 
   const onSendMessageNumberHandler = () => {
-    console.log(phoneNumber, slackEmail);
     if (!phoneNumber.length) {
       return alert('전화번호를 입력해 주세요');
     }

diff --git a/src/components/LandingPage/LandingPage.js b/src/components/LandingPage/LandingPage.js
@@ -12,8 +12,6 @@ function Landing_Page() {
     dispatch(LandingPage());
   }, [dispatch]);
 
-  console.log(data);
-
   return (
     <div style={{ display: 'flex' }}>
       <ul>

diff --git a/src/components/MainLayout/MainLayout.js b/src/components/MainLayout/MainLayout.js
@@ -51,18 +51,15 @@ class MainLayout extends React.Component {
   };
 
   onCollapse = collapsed => {
-    console.log(collapsed);
     this.setState({ collapsed });
   };
   menuClick = ({ item, key, keyPath, domEvent }) => {
-    console.log(keyToInfo[key].link);
     this.props.navigate(keyToInfo[key].link);
     this.setState({ clickedkeyPath: keyPath.reverse() });
   };
 
   render() {
     const { collapsed, clickedkeyPath } = this.state;
-    console.log(window.location.pathname);
     return (
       <Layout style={{ minHeight: '100vh' }}>
         <Sider

diff --git a/src/components/Tables/OrdersPage/OrdersPage.js b/src/components/Tables/OrdersPage/OrdersPage.js
@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import moment from 'moment';
 import { useSelector, useDispatch } from 'react-redux';
-import { Segmented, Table, Select, message, Modal } from 'antd';
+import { Segmented, Table, Select, message, Modal, Tag } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
 import {
   orderListPagination,
   orderListReq
@@ -17,16 +18,15 @@ const { Option } = Select;
 export default function OrdersPage() {
   const dispatch = useDispatch();
   const { data, pending } = useSelector(state => state.orderListPagination);
-  console.log(data);
   const [page, setPage] = useState(1);
   const [day, setDay] = useState('ALL');
+  const [option, setOption] = useState('총');
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [id, setID] = useState('');
   const [orderPrice, setOrderPrice] = useState('xx');
 
   const onPageChange = e => {
     // 페이지네이션 번호 바뀔때 뜸.
-    console.log(e);
     setPage(e);
 
     if (day === 'ALL') {
@@ -50,7 +50,6 @@ export default function OrdersPage() {
   };
 
   const handleSetFreeSelector = id => {
-    console.log('id', id);
     dispatch(orderPriceChange({ id }));
   };
 
@@ -77,14 +76,35 @@ export default function OrdersPage() {
 
   return (
     <div>
-      <Segmented
-        options={['ALL', 'BOTH', 'YB', 'OB']}
-        value={day}
-        onChange={day => {
-          setDay(day);
-          handleSegment(day);
-        }}
-      />
+      <div style={{ display: 'flex' }}>
+        <Segmented
+          options={['ALL', 'BOTH', 'YB', 'OB']}
+          value={day}
+          onChange={day => {
+            setDay(day);
+            handleSegment(day);
+            if (day === 'ALL') {
+              setOption('총');
+            } else if (day === 'BOTH') {
+              setOption('양일권');
+            } else {
+              setOption(day);
+            }
+          }}
+        />
+        <Tag
+          icon={<UserOutlined />}
+          color="default"
+          style={{
+            margin: '4px 0 0 10px',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '50%'
+          }}
+        >
+          {option} 주문 수: {data ? data.total : ''}
+        </Tag>
+      </div>
       <Table
         loading={pending}
         pagination={{

diff --git a/src/components/Tables/TicketsPage/TicketsPage.js b/src/components/Tables/TicketsPage/TicketsPage.js
@@ -1,7 +1,8 @@
+import { DollarCircleOutlined } from '@ant-design/icons';
 import React, { useState, useEffect } from 'react';
 import moment from 'moment';
 import { useSelector, useDispatch } from 'react-redux';
-import { Table, Segmented, Select, message } from 'antd';
+import { Space, Tag, Table, Segmented, Select, message } from 'antd';
 import {
   ticketPagi,
   ticketPagination
@@ -18,12 +19,10 @@ function TicketsPage() {
   const [value, setValue] = useState('All');
 
   const onSelectStateHandler = (e, id) => {
-    console.log(' id값 : ', id);
     dispatch(changeState({ id, e }, message));
   };
 
   const onPageChange = e => {
-    console.log(e);
     setPage(e);
     if (value === 'All') {
       dispatch(
@@ -47,7 +46,6 @@ function TicketsPage() {
       );
     }
   };
-  console.log(data);
 
   useEffect(() => {
     dispatch(
@@ -94,27 +92,35 @@ function TicketsPage() {
 
   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>
+        <Space size="middle">
+          <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);
+              }
+            }}
+          />
+          <Tag icon={<DollarCircleOutlined />} color="default">
+            총 티켓 수:{data ? data.meta.itemCount : ''}
+          </Tag>
+        </Space>
+      </div>
+
       <div style={{ marginBottom: '20px' }} />
 
       <Table
@@ -131,7 +137,6 @@ function TicketsPage() {
         // onRow={(record, rowIndex) => {
         //   return {
         //     onClick: event => {
-        //       console.log(event, record);
         //       onStopClickHandler(record);
         //     } // click row
         //   };

diff --git a/src/components/Tables/UsersPage/Table.js b/src/components/Tables/UsersPage/Table.js
@@ -13,7 +13,6 @@ function UsersPageTable() {
   const [page, setPage] = useState(1);
 
   const onPageChange = e => {
-    console.log('page', { data });
     // 페이지네이션 번호 바뀔때 뜸.
     setPage(e);
     dispatch(
@@ -26,7 +25,6 @@ function UsersPageTable() {
   };
 
   useEffect(() => {
-    console.log('search option: ', option.searchOption, option.searchString);
     dispatch(
       usersPage({
         searchOption: option ? option.searchOption : '',

diff --git a/src/components/Tickets/CheckPage/CheckPage.js b/src/components/Tickets/CheckPage/CheckPage.js
@@ -14,18 +14,14 @@ import { message } from 'antd';
 function CheckPage() {
   const dispatch = useDispatch();
   const location = useLocation();
-  const sucAudio = new Audio(process.env.PUBLIC_URL + '/successSound.mp3');
-  const errAudio = new Audio(process.env.PUBLIC_URL + '/errorSound.mp3');
+  const qrAudio = new Audio(process.env.PUBLIC_URL + '/qrSound.mp3');
 
   const { data, pending, count } = useSelector(state => state.checkPage);
 
   useEffect(() => {
     if (!history.location.state) {
       history.push('ticket/checkenter');
     }
-
-    // console.log('history.location.state:', history.location.state); //result: '{date: 'OB', cam: 'environment'}'
-    // console.log('location:', location); //result: '{pathname: '/tickets/check', search: '', hash: '', state: {…}, key: 'xf82gqmb'}'
   }, [location]);
 
   const handleScan = (result, error) => {
@@ -34,13 +30,11 @@ function CheckPage() {
         { uuid: result ? result.text : null },
         { date: history.location.state.date },
         message,
-        { sucAudio },
-        { errAudio }
+        { qrAudio }
       )
     );
 
     dispatch(checkCount());
-    // console.log('count:', count);
   };
 
   return (

diff --git a/src/contexts/socketProvider.js b/src/contexts/socketProvider.js
@@ -11,6 +11,9 @@ const SocketProvider = ({ children }) => {
   const dispatch = useDispatch();
   const { accessToken } = useSelector(state => state.auth);
   const placement = 'bottomRight';
+  const notificationAudio = new Audio(
+    process.env.PUBLIC_URL + '/notificationSound.mp3'
+  );
 
   const socket = io('https://api.gosrock.band/socket/admin', {
     auth: {
@@ -19,9 +22,7 @@ const SocketProvider = ({ children }) => {
   });
 
   useEffect(() => {
-    socket.on('connect', data => {
-      console.log('connection server', data);
-    });
+    socket.on('connect', data => {});
     socket.on('enter', data => {
       dispatch(
         enterPage({
@@ -43,18 +44,15 @@ const SocketProvider = ({ children }) => {
             <CloseCircleOutlined style={{ color: '#cc8989' }} />
           )
       });
+      notificationAudio.play();
     });
 
     return () => {
       socket.close();
     };
   }, []);
 
-  socket.on('connect_error', err => {
-    console.log(err instanceof Error); // true
-    console.log(err.message); // not authorized
-    console.log(err.data); // { content: "Please retry later" }
-  });
+  socket.on('connect_error', err => {});
 
   return <SocketContext.Provider>{children}</SocketContext.Provider>;
 };

diff --git a/src/hoc/AuthPass.js b/src/hoc/AuthPass.js
@@ -8,8 +8,6 @@ const requireAuth =
   ({ ...props }) => {
     const { authenticated } = useSelector(state => state.auth);
 
-    console.log('인증 부분 검사', authenticated, !authenticated);
-
     return authenticated === false ? (
       <Component {...props} />
     ) : (

diff --git a/src/hoc/requireAuth.js b/src/hoc/requireAuth.js
@@ -1,14 +1,12 @@
-import React from "react";
-import { Navigate } from "react-router-dom";
+import React from 'react';
+import { Navigate } from 'react-router-dom';
 
-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';
 
 const requireAuth =
-  (Component) =>
+  Component =>
   ({ ...props }) => {
-    const { authenticated } = useSelector((state) => state.auth);
-
-    console.log("인증 부분 검사", authenticated, !authenticated);
+    const { authenticated } = useSelector(state => state.auth);
 
     return authenticated !== false ? (
       <Component {...props} />

diff --git a/src/state/actions-creators/CheckPage.js b/src/state/actions-creators/CheckPage.js
@@ -8,10 +8,9 @@ import {
 import { store } from '../storeSetting.js';
 
 export const checkPage =
-  ({ uuid }, { date }, message, { sucAudio }, { errAudio }, callback) =>
+  ({ uuid }, { date }, message, { qrAudio }, callback) =>
   async dispatch => {
     const { checkPage } = store.getState();
-    // console.log();
     if (uuid && checkPage.count > 4) {
       try {
         dispatch({ type: CHECKING_PENDING });
@@ -22,10 +21,8 @@ export const checkPage =
             date: `${date}`
           }
         );
-        console.log('서버 응답?', response);
-        console.log('uuid, date: ', uuid, ',,,,', date);
 
-        sucAudio.play();
+        qrAudio.play();
         message.success('조회에 성공했습니다. 입장이 가능합니다.');
         dispatch({ type: CHECKING_SUCCESS, payload: '조회 성공' });
 
@@ -34,11 +31,9 @@ export const checkPage =
       } catch (e) {
         //400 ~ 에러 타입에 따라서 경고메세지 다르게 표시
         // dispatch({ type: CHECKING_ERROR, payload: error });
-        // console.log('ERROR: ', error.response.data.error.message);
         const ERROR = e.response.data.error.message;
-        console.log('ERROR:', ERROR);
 
-        errAudio.play();
+        qrAudio.play();
         message.warn(`${ERROR}`);
         dispatch({ type: CHECKING_ERROR, payload: e });
       }