From 184a2672d402947bd80b084dcf62bc2aad5efafa Mon Sep 17 00:00:00 2001
From: yoonc01 <yoonc01@hotmail.com>
Date: Wed, 14 Aug 2024 17:56:58 +0900
Subject: [PATCH] add AdminEventStatus page but not done

---
 admin/src/App.jsx                             |   2 +-
 .../AdminEventStatus/AdminEventStatus.jsx     |   8 ++
 .../pages/AdminEventStatus/RadioButton.jsx    |  25 ++++
 .../pages/AdminEventStatus/TableComponent.jsx | 130 ++++++++++++++++++
 admin/src/pages/AdminEventStatus/TableRow.jsx |  23 ++++
 admin/src/styles/global.css                   |   7 +
 6 files changed, 194 insertions(+), 1 deletion(-)
 create mode 100644 admin/src/pages/AdminEventStatus/AdminEventStatus.jsx
 create mode 100644 admin/src/pages/AdminEventStatus/RadioButton.jsx
 create mode 100644 admin/src/pages/AdminEventStatus/TableComponent.jsx
 create mode 100644 admin/src/pages/AdminEventStatus/TableRow.jsx
 create mode 100644 admin/src/styles/global.css

diff --git a/admin/src/App.jsx b/admin/src/App.jsx
index e0f9dfb..dacc082 100644
--- a/admin/src/App.jsx
+++ b/admin/src/App.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import AdminEventStatus from './pages/AdminEventStatus/AdminEventStatus';
+import AdminEventStatus from '@/pages/AdminEventStatus/AdminEventStatus';
 
 function App() {
   return (
diff --git a/admin/src/pages/AdminEventStatus/AdminEventStatus.jsx b/admin/src/pages/AdminEventStatus/AdminEventStatus.jsx
new file mode 100644
index 0000000..e3865a8
--- /dev/null
+++ b/admin/src/pages/AdminEventStatus/AdminEventStatus.jsx
@@ -0,0 +1,8 @@
+import React, { useEffect } from 'react';
+import TableComponent from '@/pages/AdminEventStatus/TableComponent';
+
+function AdminEventStatus() {
+  return <TableComponent />;
+}
+
+export default AdminEventStatus;
diff --git a/admin/src/pages/AdminEventStatus/RadioButton.jsx b/admin/src/pages/AdminEventStatus/RadioButton.jsx
new file mode 100644
index 0000000..ec8f2ad
--- /dev/null
+++ b/admin/src/pages/AdminEventStatus/RadioButton.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function RadioButton({ value, rowsPerPage, onChange }) {
+  return (
+    <label className="flex items-center gap-2">
+      <input
+        type="radio"
+        value={value}
+        checked={rowsPerPage === value}
+        onChange={onChange}
+        className="w-[20px] h-[20px]"
+      />
+      {value}개씩 보기
+    </label>
+  );
+}
+
+RadioButton.propTypes = {
+  value: PropTypes.number.isRequired,
+  rowsPerPage: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default RadioButton;
diff --git a/admin/src/pages/AdminEventStatus/TableComponent.jsx b/admin/src/pages/AdminEventStatus/TableComponent.jsx
new file mode 100644
index 0000000..aaa0baf
--- /dev/null
+++ b/admin/src/pages/AdminEventStatus/TableComponent.jsx
@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import TableRow from '@/pages/AdminEventStatus/TableRow';
+import RadioButton from '@/pages/AdminEventStatus/RadioButton';
+
+const TableComponent = () => {
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [totalRows, setTotalRows] = useState(-1);
+  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' },
+  ]);
+
+  useEffect(() => {
+    getCurrentPageData(currentPage);
+  }, [rowsPerPage, currentPage]);
+
+  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);
+
+  const handleRowsPerPageChange = event => {
+    setRowsPerPage(Number(event.target.value));
+    setCurrentPage(1);
+  };
+
+  const handlePageChange = newPage => {
+    setCurrentPage(newPage);
+  };
+
+  const getCurrentPageData = currentPage => {
+    // try{
+    // const data //API 통신
+    // }
+    //setPageData(data); // data의 정보 array 가져오기
+  };
+
+  return (
+    <div className="flex flex-col text-nowrap w-[90%]">
+      <div className="h-screen">
+        <div className="flex justify-between py-400">
+          <div className="text-body-3-regular">전체 {totalRows}</div>
+          <div className="flex gap-6">
+            <RadioButton
+              value={10}
+              rowsPerPage={rowsPerPage}
+              onChange={handleRowsPerPageChange}
+            />
+            <RadioButton
+              value={30}
+              rowsPerPage={rowsPerPage}
+              onChange={handleRowsPerPageChange}
+            />
+            <RadioButton
+              value={50}
+              rowsPerPage={rowsPerPage}
+              onChange={handleRowsPerPageChange}
+            />
+          </div>
+        </div>
+        <div className="flex">
+          <div className="set-center w-[275px] border border-black">순번</div>
+          <div className="flex-1 border border-black set-center">전화번호</div>
+          <div className="flex-1 border border-black set-center">응모 시간</div>
+          <div className="flex-1 border border-black set-center">응모 결과</div>
+        </div>
+        {pageData.map(item => (
+          <TableRow
+            id={item.id}
+            phoneNumber={item.phoneNumber}
+            time={item.time}
+            result={item.result}
+            key={item.id}
+          />
+        ))}
+        <div className="flex justify-center gap-2 mt-10">
+          <button
+            onClick={() => handlePageChange(Math.max(1, currentPage - 10))}
+            disabled={1 === currentPage}
+          >
+            &laquo; {/* << 기호 */}
+          </button>
+          <button
+            onClick={() => handlePageChange(currentPage - 1)}
+            disabled={currentPage === 1}
+          >
+            &lt;
+          </button>
+          {Array.from({ length: endPage - startPage + 1 }).map((_, index) => (
+            <button
+              key={index}
+              onClick={() => handlePageChange(startPage + index)}
+              className={`${
+                currentPage === startPage + index ? 'font-bold' : 'font-normal'
+              }`}
+            >
+              {startPage + index}
+            </button>
+          ))}
+          <button
+            onClick={() => handlePageChange(currentPage + 1)}
+            disabled={currentPage === 1}
+          >
+            &gt;
+          </button>
+          <button
+            onClick={() =>
+              handlePageChange(Math.min(totalPages, currentPage + 10))
+            }
+            disabled={currentPage === totalPages}
+          >
+            &raquo; {/* >> 기호 */}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TableComponent;
diff --git a/admin/src/pages/AdminEventStatus/TableRow.jsx b/admin/src/pages/AdminEventStatus/TableRow.jsx
new file mode 100644
index 0000000..37836a1
--- /dev/null
+++ b/admin/src/pages/AdminEventStatus/TableRow.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '@/styles/global.css';
+
+function TableRow({ id, phoneNumber, time, result }) {
+  return (
+    <div className="flex bg-neutral-white h-[50px]">
+      <div className="set-center w-[275px] border border-black">{id}</div>
+      <div className="flex-1 border border-black set-center">{phoneNumber}</div>
+      <div className="flex-1 border border-black set-center">{time}</div>
+      <div className="flex-1 border border-black set-center">{result}</div>
+    </div>
+  );
+}
+
+TableRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  phoneNumber: PropTypes.string.isRequired,
+  time: PropTypes.string.isRequired,
+  result: PropTypes.string.isRequired,
+};
+
+export default TableRow;
diff --git a/admin/src/styles/global.css b/admin/src/styles/global.css
new file mode 100644
index 0000000..524e624
--- /dev/null
+++ b/admin/src/styles/global.css
@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.set-center {
+  @apply flex items-center justify-center;
+}