[티켓,랜딩] 랜딩페이지 통계정보, 티켓 리스트 수정

[티켓,랜딩] 랜딩페이지 통계정보, 티켓 리스트 수정

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/Tables/TicketsPage/TicketsPage.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-
+import moment from 'moment';
 import { useSelector, useDispatch } from 'react-redux';
 import { Table, Segmented, Select } from 'antd';
 import {
@@ -139,8 +139,23 @@ function TicketsPage() {
           render={user => user.name}
           key="id"
         />
+
         <Column title="공연 날짜" dataIndex="date" key="id" />
-        <Column title="예매일자" dataIndex="createdAt" 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=""
@@ -153,8 +168,12 @@ function TicketsPage() {
                 >
                   <Option value="입금확인">입금확인</Option>
                   <Option value="입장완료">입장완료</Option>
-                  <Option value="기한만료">기한만료</Option>
-                  <Option value="확인대기">확인대기</Option>
+                  <Option value="기한만료" disabled={true}>
+                    기한만료
+                  </Option>
+                  <Option value="확인대기" disabled={true}>
+                    확인대기
+                  </Option>
                 </Select>
               </div>
             );

src/state/action-types/LandingPage.js

@@ -0,0 +1,2 @@
+export const LANDING_PAGE_SUCCESS = 'LANDING_PAGE_SUCCESS';
+export const LANDING_PAGE_ERROR = 'LANING_PAGE_ERROR';

src/state/action-types/index.js

@@ -4,3 +4,4 @@ export * from './logout';
 export * from './examplePagination';
 export * from './ticketPagination';
 export * from './usersPage';
+export * from './LandingPage';

src/state/actions-creators/LandingPage.js

@@ -0,0 +1,32 @@
+import axios from 'axios';
+import { LANDING_PAGE_SUCCESS, LANDING_PAGE_ERROR } from '../action-types';
+
+export const LandingPage = callback => async dispatch => {
+  try {
+    const response = await axios.get(
+      `https://api.gosrock.band/v1/orders/report`
+    );
+    console.log(response.data.data);
+
+    const newData = response.data.data;
+    const data = {
+      totalTicket: newData.ticketReport.totalTicket,
+      depositedTicket: newData.ticketReport.depositedTicket,
+      income: newData.income,
+      doneOrder: newData.orderReport.doneOrder,
+      waitOrder: newData.orderReport.waitOrder,
+      expireOrder: newData.orderReport.waitOrder,
+      enteredTicket: newData.enterReport.enteredTicket,
+      nonEnteredTicket: newData.enterReport.nonEnteredTicket
+    };
+
+    dispatch({ type: LANDING_PAGE_SUCCESS, payload: data });
+
+    // 자동으로 피쳐로 넘어가게끔
+    // callback();
+  } catch (e) {
+    //400 ~
+    console.log(e);
+    dispatch({ type: LANDING_PAGE_ERROR, payload: '조회 실패' });
+  }
+};

src/state/actions-creators/index.js

@@ -2,5 +2,6 @@ import { slackMessage } from './slackMessage';
 import { slackValidation } from './slackValidation';
 import { logout } from './logout';
 import { ticketPagination } from './ticketPagination';
+import { LandingPage } from './LandingPage';
 
-export { slackMessage, slackValidation, logout, ticketPagination };
+export { slackMessage, slackValidation, logout, ticketPagination, LandingPage };

src/state/actions-creators/ticketPagination.js

@@ -40,6 +40,7 @@ export const changeState =
     try {
       console.log('ticketId:', id);
       console.log('status:', e);
+
       const response = await axios.patch(
         `https://api.gosrock.band/v1/tickets/status`,
         { ticketId: id, status: e }

src/state/reducers/LandingPage.js

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-anonymous-default-export */
+import { LANDING_PAGE_SUCCESS, LANDING_PAGE_ERROR } from '../action-types';
+
+export default function (
+  state = {
+    data: {
+      totalTicket: 0,
+      depositedTicket: 0,
+      income: 0,
+      doneOrder: 0,
+      waitOrder: 0,
+      expireOrder: 0,
+      enteredTicket: 0,
+      nonEnteredTicket: 0
+    },
+    error: null
+  },
+  action
+) {
+  switch (action.type) {
+    case LANDING_PAGE_SUCCESS:
+      return { ...state, data: action.payload, error: action.payload };
+    case LANDING_PAGE_ERROR:
+      return { ...state, data: [], error: action.payload };
+
+    default:
+      return state;
+  }
+}

src/state/reducers/index.js

@@ -2,6 +2,7 @@ import { combineReducers } from 'redux';
 import { auth } from './auth';
 import examplePagination from './examplePagination';
 import ticketPagination from './ticketPagination';
+import LandingPage from './LandingPage';
 import slackMessage from './slackMessage';
 import usersPage from './usersPage';
 
@@ -10,5 +11,6 @@ export default combineReducers({
   auth: auth,
   examplePagination: examplePagination,
   usersPage: usersPage,
-  ticketPagination: ticketPagination
+  ticketPagination: ticketPagination,
+  LandingPage: LandingPage
 });