From d001742e31438fdae0802f8e5b816b0993f8fbe8 Mon Sep 17 00:00:00 2001 From: yoonc01 Date: Sun, 18 Aug 2024 19:32:18 +0900 Subject: [PATCH] add api in AdminEventStatus --- admin/src/api/AdminEventStatus/index.js | 8 +++ admin/src/components/header/TabHeader.jsx | 2 +- admin/src/pages/AdminEventStatus/EntryRow.jsx | 2 +- .../src/pages/AdminEventStatus/EntryTable.jsx | 56 +++++++++--------- .../src/pages/AdminEventStatus/PrizeTable.jsx | 57 +++++++++++-------- 5 files changed, 68 insertions(+), 57 deletions(-) create mode 100644 admin/src/api/AdminEventStatus/index.js diff --git a/admin/src/api/AdminEventStatus/index.js b/admin/src/api/AdminEventStatus/index.js new file mode 100644 index 0000000..910360c --- /dev/null +++ b/admin/src/api/AdminEventStatus/index.js @@ -0,0 +1,8 @@ +import { get } from '@/api/index'; + +const getDrawHistory = (page, limit, sort = 'desc') => + get(`/admin/draw-history?page=${page}&limit=${limit}&sort=${sort}`); + +const getDrawRemaining = () => get('/admin/draw-remaining'); + +export { getDrawHistory, getDrawRemaining }; diff --git a/admin/src/components/header/TabHeader.jsx b/admin/src/components/header/TabHeader.jsx index 5012099..9dd5f3f 100644 --- a/admin/src/components/header/TabHeader.jsx +++ b/admin/src/components/header/TabHeader.jsx @@ -8,9 +8,9 @@ function TabHeader() { - + ); diff --git a/admin/src/pages/AdminEventStatus/EntryRow.jsx b/admin/src/pages/AdminEventStatus/EntryRow.jsx index 27743a4..db4aa3c 100644 --- a/admin/src/pages/AdminEventStatus/EntryRow.jsx +++ b/admin/src/pages/AdminEventStatus/EntryRow.jsx @@ -17,7 +17,7 @@ EntryRow.propTypes = { id: PropTypes.number.isRequired, phoneNumber: PropTypes.string.isRequired, time: PropTypes.string.isRequired, - result: PropTypes.string.isRequired, + result: PropTypes.number.isRequired, }; export default EntryRow; diff --git a/admin/src/pages/AdminEventStatus/EntryTable.jsx b/admin/src/pages/AdminEventStatus/EntryTable.jsx index c70fd06..0086922 100644 --- a/admin/src/pages/AdminEventStatus/EntryTable.jsx +++ b/admin/src/pages/AdminEventStatus/EntryTable.jsx @@ -1,32 +1,30 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import EntryRow from '@/pages/AdminEventStatus/EntryRow'; import RadioButton from '@/pages/AdminEventStatus/RadioButton'; import PageButton from '@/pages/AdminEventStatus/PageButton'; +import { getDrawHistory } from '@/api/AdminEventStatus'; const EntryTable = () => { const [rowsPerPage, setRowsPerPage] = useState(10); - const [totalRows, setTotalRows] = useState(-1); + const [totalRows, setTotalRows] = useState(0); const [currentPage, setCurrentPage] = useState(1); - const [pageData, setPageData] = useState([ - { id: 1, phoneNumber: '10', time: 's', result: '1' }, - { id: 2, phoneNumber: '10', time: 's', result: '1' }, - { id: 3, phoneNumber: '10', time: 's', result: '1' }, - { id: 4, phoneNumber: '10', time: 's', result: '1' }, - { id: 5, phoneNumber: '10', time: 's', result: '1' }, - { id: 6, phoneNumber: '10', time: 's', result: '1' }, - { id: 7, phoneNumber: '10', time: 's', result: '1' }, - { id: 8, phoneNumber: '10', time: 's', result: '1' }, - ]); + const [pageData, setPageData] = useState([]); + const [totalPages, setTotalPages] = useState(0); + const [sort, setSort] = useState('desc'); + const table = useRef(null); useEffect(() => { - getCurrentPageData(currentPage); - }, [rowsPerPage, currentPage]); + const getData = async () => { + const response = await getDrawHistory(currentPage - 1, rowsPerPage, sort); + const { drawHistories, totalPages, totalItems } = response; + setPageData(drawHistories); + setTotalPages(totalPages); + //setTotalRows(response.totalItems); + setTotalRows(totalPages * rowsPerPage); + }; + getData(); + }, [rowsPerPage, currentPage, sort]); - useEffect(() => { - setTotalRows(156); //TODO API 통신으로 가져오기 및 데이터를 가져오기 - }, []); - - const totalPages = Math.ceil(totalRows / rowsPerPage); const startPage = Math.floor((currentPage - 1) / 10) * 10 + 1; const endPage = Math.min(startPage + 9, totalPages); @@ -37,17 +35,11 @@ const EntryTable = () => { const handlePageChange = newPage => { setCurrentPage(newPage); - }; - - const getCurrentPageData = currentPage => { - // try{ - // const data //API 통신 - // } - //setPageData(data); // data의 정보 array 가져오기 + table.current.scrollIntoView(); }; return ( -
+
전체 {totalRows}
@@ -69,7 +61,11 @@ const EntryTable = () => {
-
순번
+
+ 순번 + + +
전화번호
응모 시간
응모 결과
@@ -78,8 +74,8 @@ const EntryTable = () => { ))} diff --git a/admin/src/pages/AdminEventStatus/PrizeTable.jsx b/admin/src/pages/AdminEventStatus/PrizeTable.jsx index 18a85c3..36cc50d 100644 --- a/admin/src/pages/AdminEventStatus/PrizeTable.jsx +++ b/admin/src/pages/AdminEventStatus/PrizeTable.jsx @@ -1,39 +1,46 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import { getDrawRemaining } from '@/api/AdminEventStatus'; function PrizeTable() { - //TODO api 통신으로 정보 가져오기 + const [remaining, setRemaining] = useState([]); + + useEffect(() => { + const getData = async () => { + const remaining = await getDrawRemaining(); + setRemaining(remaining.drawRemaining); + }; + getData(); + }, []); + return ( - - - - - - + + + + + - - - - - - + {remaining + .filter(item => item.ranking > 1) + .map(value => ( + + ))}
- 잔여 상품 수 / 전체 개수 - 1등2등3등4등5등2등3등4등5등
- nn/nn - - nn/nn - - nn/nn - - nn/nn - - nn/nn + + 잔여 상품 수 / 전체 개수 + {value.nowStock} / {value.totalStock} +