From b48a1bf693633adec43c16bbd36526ee5ecdd891 Mon Sep 17 00:00:00 2001 From: yoonc01 Date: Sun, 18 Aug 2024 15:26:18 +0900 Subject: [PATCH 1/8] Indicator api done --- admin/src/components/header/TabHeader.jsx | 2 +- .../src/pages/AnalyticsPage/AnalyticsPage.jsx | 52 ------------------- admin/src/pages/Indicator/Dau.jsx | 28 ++++++++++ admin/src/pages/Indicator/Indicator.jsx | 48 +++++++++++++++++ .../TableHeader.jsx | 0 .../{AnalyticsPage => Indicator}/TableRow.jsx | 7 ++- 6 files changed, 82 insertions(+), 55 deletions(-) delete mode 100644 admin/src/pages/AnalyticsPage/AnalyticsPage.jsx create mode 100644 admin/src/pages/Indicator/Dau.jsx create mode 100644 admin/src/pages/Indicator/Indicator.jsx rename admin/src/pages/{AnalyticsPage => Indicator}/TableHeader.jsx (100%) rename admin/src/pages/{AnalyticsPage => Indicator}/TableRow.jsx (89%) diff --git a/admin/src/components/header/TabHeader.jsx b/admin/src/components/header/TabHeader.jsx index d036ec4..5012099 100644 --- a/admin/src/components/header/TabHeader.jsx +++ b/admin/src/components/header/TabHeader.jsx @@ -11,7 +11,7 @@ function TabHeader() { - + ); } diff --git a/admin/src/pages/AnalyticsPage/AnalyticsPage.jsx b/admin/src/pages/AnalyticsPage/AnalyticsPage.jsx deleted file mode 100644 index 0d7c58d..0000000 --- a/admin/src/pages/AnalyticsPage/AnalyticsPage.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import TableHeader from '@/pages/AnalyticsPage/TableHeader'; -import TableRow from '@/pages/AnalyticsPage/TableRow'; - -function AnalyticsPage() { - const [row, setRow] = useState(0); - const [col, setCol] = useState(0); - const [data, setData] = useState([]); - - useEffect(() => { - setRow(6); - setCol(8); - setData([ - [ - 0.0, 66.66666666666666, 66.66666666666666, 66.66666666666666, - 33.33333333333333, 33.33333333333333, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, - 0.0, - ], - [ - 0.0, 0.0, 33.33333333333333, 66.66666666666666, 33.33333333333333, - 33.33333333333333, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, - ], - [0.0, 0.0, 0.0, 50.0, 75.0, 25.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], - [ - 0.0, 0.0, 0.0, 0.0, 33.33333333333333, 33.33333333333333, 0.0, 0.0, 0.0, - 0.0, 0.0, 0.0, 0.0, 0.0, - ], - [0.0, 0.0, 0.0, 0.0, 0.0, 25.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], - [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], - [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], - [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], - [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], - [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], - ]); - }, []); - - return ( -
-
- Day N Retention & DAU -
-
- - {Array.from({ length: row }).map((_, index) => ( - - ))} -
-
- ); -} - -export default AnalyticsPage; diff --git a/admin/src/pages/Indicator/Dau.jsx b/admin/src/pages/Indicator/Dau.jsx new file mode 100644 index 0000000..fff2a65 --- /dev/null +++ b/admin/src/pages/Indicator/Dau.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +function Dau({ data }) { + return ( +
+
Dau
+
+ 시작일 기준 +
+ {data.map((value, index) => ( +
+ {/* 추후 null은 0으로 변경되어 올 예정 지금은 임시방편 */} + {value === null ? 0 : value} +
+ ))} +
+ ); +} + +Dau.propTypes = { + data: PropTypes.array.isRequired, +}; + +export default Dau; diff --git a/admin/src/pages/Indicator/Indicator.jsx b/admin/src/pages/Indicator/Indicator.jsx new file mode 100644 index 0000000..05424ff --- /dev/null +++ b/admin/src/pages/Indicator/Indicator.jsx @@ -0,0 +1,48 @@ +import React, { useEffect, useState } from 'react'; +import TableHeader from '@/pages/Indicator/TableHeader'; +import TableRow from '@/pages/Indicator/TableRow'; +import Dau from '@/pages/Indicator/Dau'; +import { getIndicator } from '@/api/Indicator/index'; + +function Indicator() { + const [row, setRow] = useState(0); + const [col, setCol] = useState(0); + const [dayNRetention, setDayNRetention] = useState([]); + const [dau, setDau] = useState([]); + + useEffect(() => { + const getData = async () => { + try { + const response = await getIndicator(); + const dayNRetention = response.dayNRetention; + console.log(response); + console.log(dayNRetention); + const dau = response.dau; + setRow(dayNRetention.length); + setCol(dayNRetention[0].length); + setDayNRetention(dayNRetention); + setDau(dau); + } catch (error) { + console.log(error); + } + }; + getData(); + }, []); + + return ( +
+
+ Day N Retention & DAU +
+
+ + {Array.from({ length: row }).map((_, index) => ( + + ))} + +
+
+ ); +} + +export default Indicator; diff --git a/admin/src/pages/AnalyticsPage/TableHeader.jsx b/admin/src/pages/Indicator/TableHeader.jsx similarity index 100% rename from admin/src/pages/AnalyticsPage/TableHeader.jsx rename to admin/src/pages/Indicator/TableHeader.jsx diff --git a/admin/src/pages/AnalyticsPage/TableRow.jsx b/admin/src/pages/Indicator/TableRow.jsx similarity index 89% rename from admin/src/pages/AnalyticsPage/TableRow.jsx rename to admin/src/pages/Indicator/TableRow.jsx index e0855a9..5fbb112 100644 --- a/admin/src/pages/AnalyticsPage/TableRow.jsx +++ b/admin/src/pages/Indicator/TableRow.jsx @@ -2,15 +2,18 @@ import React from 'react'; import PropTypes from 'prop-types'; function TableRow({ data, day }) { + let start; return (
Day {day}
-
User
+
+ {data.shift()} +
100%
{data.map((value, index) => { - if (value === 0.0) return null; + if (value === -1) return null; return (
Date: Sun, 18 Aug 2024 15:26:54 +0900 Subject: [PATCH 2/8] change AnalysticPage to Indicator --- admin/src/router.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/admin/src/router.jsx b/admin/src/router.jsx index bd6457c..b2fc11a 100644 --- a/admin/src/router.jsx +++ b/admin/src/router.jsx @@ -11,7 +11,7 @@ import UploadPrize from '@/pages/UploadPrize/UploadPrize'; import Login from '@/pages/login/Login'; import ProtectedRoute from '@/pages/ProtectedRoute'; import ErrorPage from '@/pages/ErrorPage'; -import AnalyticsPage from '@/pages/AnalyticsPage/AnalyticsPage'; +import Indicator from '@/pages/Indicator/Indicator'; const router = createBrowserRouter([ { @@ -55,8 +55,8 @@ const router = createBrowserRouter([ element: , }, { - path: 'analyticsPage', - element: , + path: 'Indicator', + element: , }, ], }, From 2a0bd72547c8d3c45ce04fefde07e65e0aed6395 Mon Sep 17 00:00:00 2001 From: yoonc01 Date: Sun, 18 Aug 2024 16:19:59 +0900 Subject: [PATCH 3/8] use index api --- admin/src/api/UploadReward/index.js | 12 ++--------- admin/src/pages/UploadReward/UploadReward.jsx | 21 +++++++++++-------- 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/admin/src/api/UploadReward/index.js b/admin/src/api/UploadReward/index.js index c2894ce..af542b9 100644 --- a/admin/src/api/UploadReward/index.js +++ b/admin/src/api/UploadReward/index.js @@ -1,13 +1,5 @@ -import { post } from '@/api/_index'; +import { post } from '@/api/index'; -const postQuizReward = (file, quizDate) => - post( - '/admin/quiz-reward', - { - file, - quizDate, - }, - true, - ); +const postQuizReward = body => post('/admin/quiz-reward', body); export { postQuizReward }; diff --git a/admin/src/pages/UploadReward/UploadReward.jsx b/admin/src/pages/UploadReward/UploadReward.jsx index 27ec489..e4363cd 100644 --- a/admin/src/pages/UploadReward/UploadReward.jsx +++ b/admin/src/pages/UploadReward/UploadReward.jsx @@ -1,17 +1,17 @@ -import React, { useState, useEffect, useContext } from 'react'; -import JSZip from 'jszip'; -import BlackButton from '@/components/buttons/BlackButton'; +import React, { useState, useContext } from 'react'; import AdminEditHeader from '@/components/header/AdminEditHeader'; -import { postQuizReward } from '@/api/UploadReward'; +import BlackButton from '@/components/buttons/BlackButton'; import ModalFrame from '@/components/modal/ModalFrame'; +import { postQuizReward } from '@/api/UploadReward'; import { DateContext } from '@/context/dateContext'; +import useFormData from '@/hooks/useFormData'; import '@/styles/global.css'; +import JSZip from 'jszip'; function UploadReward() { const [errorMessage, setErrorMessage] = useState(''); const [isLoading, setIsLoading] = useState(false); const [selectedFile, setSelectedFile] = useState(null); // 파일 객체를 저장할 상태 - const [totalReward, setTotalReward] = useState(null); const introduce = '파일을 여기로 드래그하거나 클릭하여 선택'; const [openModal, setOpenModal] = useState(false); const { dateInfo } = useContext(DateContext); @@ -19,9 +19,8 @@ function UploadReward() { '폴더 안에 들어가서 파일만을 선택하여 압축한 zip 파일을 업로드해주세요.', ); - useEffect(() => { - setTotalReward(5); // 가져오는 api TODO - }, []); + const totalReward = 5; + const createFormData = useFormData(); const handleClick = () => { if (!selectedFile) { @@ -32,9 +31,13 @@ function UploadReward() { }; const handleSubmit = async () => { + const body = createFormData({ + file: selectedFile, + quizDate: dateInfo, + }); try { setIsLoading(true); - const response = await postQuizReward(selectedFile, dateInfo); + const response = await postQuizReward(body); setOpenModal(false); if (response.message === 'success') { setProcessMessage('파일 업로드를 완료했습니다.'); From 828e497e25bb68cbf6c00a8c802b941eaead04cd Mon Sep 17 00:00:00 2001 From: yoonc01 Date: Sun, 18 Aug 2024 16:20:29 +0900 Subject: [PATCH 4/8] remove api that I used --- admin/src/api/_index.js | 58 ----------------------------------------- 1 file changed, 58 deletions(-) delete mode 100644 admin/src/api/_index.js diff --git a/admin/src/api/_index.js b/admin/src/api/_index.js deleted file mode 100644 index 7fc6ff9..0000000 --- a/admin/src/api/_index.js +++ /dev/null @@ -1,58 +0,0 @@ -const ApiRequest = async (url, method, body, isFormData) => { - const accessToken = sessionStorage.getItem('userInfo'); - - try { - const options = { - method, - headers: { - ...(accessToken && { - Authorization: `Bearer ${accessToken}`, - }), - ...(isFormData ? {} : { 'Content-Type': 'application/json' }), - }, - credentials: 'include', - }; - - if (body) { - options.body = isFormData ? createFormData(body) : JSON.stringify(body); - } - - const response = await fetch( - `${import.meta.env.VITE_API_URL}${url}`, - options, - ); - const result = await response.json(); - return result; - } catch (error) { - console.log('API 통신 실패 : ', error); - throw error; - } -}; - -const createFormData = body => { - const formData = new FormData(); - for (const key in body) { - formData.append(key, body[key]); - } - return formData; -}; - -export const post = (url, body, isFormData = false) => { - return ApiRequest(url, 'POST', body, isFormData); -}; - -export const get = (url, isFormData = false) => { - return ApiRequest(url, 'GET', null, isFormData); -}; - -export const put = (url, body, isFormData = false) => { - return ApiRequest(url, 'PUT', body, isFormData); -}; - -export const patch = (url, body, isFormData = false) => { - return ApiRequest(url, 'PATCH', body, isFormData); -}; - -export const del = (url, body, isFormData = false) => { - return ApiRequest(url, 'DELETE', body, isFormData); -}; From 66023dfa9ee8b79261c41631052a3bfffc45aac5 Mon Sep 17 00:00:00 2001 From: yoonc01 Date: Sun, 18 Aug 2024 16:26:07 +0900 Subject: [PATCH 5/8] use index api --- admin/src/api/UploadPrize/index.js | 12 ++---------- admin/src/pages/UploadPrize/UploadPrize.jsx | 9 ++++++++- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/admin/src/api/UploadPrize/index.js b/admin/src/api/UploadPrize/index.js index 52b49a2..ee3c12e 100644 --- a/admin/src/api/UploadPrize/index.js +++ b/admin/src/api/UploadPrize/index.js @@ -1,14 +1,6 @@ -import { post, get } from '@/api/_index'; +import { post, get } from '@/api/index'; -const postPrize = (file, ranking) => - post( - '/admin/draw-prize', - { - file, - ranking, - }, - true, - ); +const postPrize = body => post('/admin/draw-prize', body); const getProbability = () => get('/admin/draw-probability'); diff --git a/admin/src/pages/UploadPrize/UploadPrize.jsx b/admin/src/pages/UploadPrize/UploadPrize.jsx index dc0c9b2..a4e20ab 100644 --- a/admin/src/pages/UploadPrize/UploadPrize.jsx +++ b/admin/src/pages/UploadPrize/UploadPrize.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'; import BlackButton from '@/components/buttons/BlackButton'; import ModalFrame from '@/components/modal/ModalFrame'; import { postPrize, getProbability } from '@/api/UploadPrize'; +import useFormData from '@/hooks/useFormData'; import '@/styles/global.css'; import JSZip from 'jszip'; @@ -19,6 +20,8 @@ function UploadPrize() { const [openChangeModal, setOpenChangeModal] = useState(false); const [openSubmitModal, setOpenSubmitModal] = useState(false); + const createFormData = useFormData(); + useEffect(() => { const get = async () => { const response = await getProbability(); @@ -59,9 +62,13 @@ function UploadPrize() { }; const handleSubmit = async () => { + const body = createFormData({ + file: selectedFile, + ranking: rank, + }); try { setIsLoading(true); - const response = await postPrize(selectedFile, rank); + const response = await postPrize(body); setOpenSubmitModal(false); if (response.message === 'success') { setProcessMessage('파일 업로드를 완료했습니다.'); From 07b00a8ea262de363537d83740ad5c6f6ee08692 Mon Sep 17 00:00:00 2001 From: yoonc01 Date: Sun, 18 Aug 2024 16:31:00 +0900 Subject: [PATCH 6/8] changed totalReward --- admin/src/pages/UploadReward/UploadReward.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/admin/src/pages/UploadReward/UploadReward.jsx b/admin/src/pages/UploadReward/UploadReward.jsx index e4363cd..54afb67 100644 --- a/admin/src/pages/UploadReward/UploadReward.jsx +++ b/admin/src/pages/UploadReward/UploadReward.jsx @@ -19,7 +19,7 @@ function UploadReward() { '폴더 안에 들어가서 파일만을 선택하여 압축한 zip 파일을 업로드해주세요.', ); - const totalReward = 5; + const totalReward = 500; const createFormData = useFormData(); const handleClick = () => { From 213e0377e1e2816688a5ad159baf2f344b80d1eb Mon Sep 17 00:00:00 2001 From: yoonc01 Date: Sun, 18 Aug 2024 16:41:55 +0900 Subject: [PATCH 7/8] add Api in Indicator --- admin/src/api/Indicator/index.js | 5 +++++ admin/src/pages/Indicator/Indicator.jsx | 2 -- admin/src/pages/Indicator/TableRow.jsx | 15 ++++++++++++--- 3 files changed, 17 insertions(+), 5 deletions(-) create mode 100644 admin/src/api/Indicator/index.js diff --git a/admin/src/api/Indicator/index.js b/admin/src/api/Indicator/index.js new file mode 100644 index 0000000..729457d --- /dev/null +++ b/admin/src/api/Indicator/index.js @@ -0,0 +1,5 @@ +import { get } from '@/api/index'; + +const getIndicator = () => get('/admin/indicator'); + +export { getIndicator }; diff --git a/admin/src/pages/Indicator/Indicator.jsx b/admin/src/pages/Indicator/Indicator.jsx index 05424ff..1f42cf7 100644 --- a/admin/src/pages/Indicator/Indicator.jsx +++ b/admin/src/pages/Indicator/Indicator.jsx @@ -15,8 +15,6 @@ function Indicator() { try { const response = await getIndicator(); const dayNRetention = response.dayNRetention; - console.log(response); - console.log(dayNRetention); const dau = response.dau; setRow(dayNRetention.length); setCol(dayNRetention[0].length); diff --git a/admin/src/pages/Indicator/TableRow.jsx b/admin/src/pages/Indicator/TableRow.jsx index 5fbb112..928fd5c 100644 --- a/admin/src/pages/Indicator/TableRow.jsx +++ b/admin/src/pages/Indicator/TableRow.jsx @@ -2,18 +2,21 @@ import React from 'react'; import PropTypes from 'prop-types'; function TableRow({ data, day }) { - let start; + let null_box = 0; return (
- Day {day} + {day} 일차
{data.shift()}
100%
{data.map((value, index) => { - if (value === -1) return null; + if (value === -1) { + null_box++; + return null; + } return (
); })} + {Array.from({ length: null_box }).map((_, index) => ( +
+ ))}
); } From d001742e31438fdae0802f8e5b816b0993f8fbe8 Mon Sep 17 00:00:00 2001 From: yoonc01 Date: Sun, 18 Aug 2024 19:32:18 +0900 Subject: [PATCH 8/8] 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} +