사용자 관리 페이지 구현

develop-pix · Oct 22, 2023 · 73413c3 · 73413c3
1 parent 607c898
commit 73413c3
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 114 deletions.
diff --git a/src/components/manage-user/UserManage.tsx b/src/components/manage-user/UserManage.tsx
@@ -0,0 +1,123 @@
+import { Box } from "@mui/material";
+import Table from "../reuse/table/Table";
+import { customColors } from "../../styles/base/Variable.style";
+import { UserTableColumn } from "../../interface/UserManage.interface";
+import { useState } from "react";
+import SearchInput from "../reuse/input/SearchInput";
+
+export default function UserManage() {
+  const [search, setSearch] = useState<string>("");
+  const [page, setPage] = useState<number>(0);
+  const [rowCount, setRowCount] = useState<number>(100); // 데이터 개수 = 총 회원가입자 수
+
+  /* 표 제목 및 포맷 설정 */
+  const tablecolumns: UserTableColumn[] = [
+    {
+      id: "nickname",
+      label: "닉네임",
+      minWidth: 150,
+      align: "center",
+    },
+    { id: "account", label: "계정", minWidth: 120 },
+    {
+      id: "join_date",
+      label: "제목",
+      minWidth: 150,
+    },
+    {
+      id: "review",
+      label: "리뷰 / 지점 / 이벤트",
+      minWidth: 150,
+      align: "center",
+    },
+    {
+      id: "withdrawal_date",
+      label: "탈퇴일",
+      minWidth: 120,
+    },
+  ];
+
+  const tablerows = Array.from({ length: 100 }, (unused, index) => ({
+    nickname: "C02",
+    account: "jsee53@gmail.com",
+    join_date: "2023/10/21",
+    review: `${index + 1} / ${index + 2} / ${index + 3}`,
+    withdrawal_date: "9999/99/99",
+  }));
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        margin: "40px 0px 40px 0px",
+        minWidth: "65vw",
+      }}
+    >
+      <Box sx={{ width: "70%" }}>
+        <Box
+          sx={{
+            display: "flex",
+            width: "100%",
+            justifyContent: "space-between",
+          }}
+        >
+          <Box sx={{ display: "flex" }}>
+            <Box
+              sx={{
+                fontWeight: "600",
+                borderColor: `${customColors.color_border_gray}`,
+                borderBottom: "none",
+                padding: "13px 10px 5px 10px",
+                borderRadius: "10px 10px 0 0",
+                backgroundColor: `${customColors.main}`,
+                fontSize: "18px",
+              }}
+            >
+              사용자 관리
+            </Box>
+            <Box
+              sx={{
+                fontWeight: "600",
+                borderColor: `${customColors.color_border_gray}`,
+                borderBottom: "none",
+                padding: "13px 10px 5px 10px",
+                borderRadius: "10px 10px 0 0",
+                backgroundColor: `${customColors.main}`,
+                fontSize: "18px",
+              }}
+            >
+              알림 전송
+            </Box>
+          </Box>
+
+          <Box sx={{ display: "flex", gap: "50px" }}>
+            <SearchInput search={search} setSearch={setSearch} />
+          </Box>
+        </Box>
+        <Table
+          columns={tablecolumns}
+          rows={tablerows}
+          page={page}
+          setPage={setPage}
+        />
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          margin: "50px 40px 0 40px",
+          border: "2px solid",
+          borderColor: `${customColors.main}`,
+          borderRadius: "10px",
+          padding: "10px",
+          alignItems: "center",
+          height: "40px",
+          fontSize: "18px",
+        }}
+      >
+        <Box>총 회원가입자 수 : {rowCount}</Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/components/manage-user/UserManageForm.tsx b/src/components/manage-user/UserManageForm.tsx
@@ -1,24 +1,13 @@
 import SideBar from "../reuse/sidebar/SideBar";
-import UserManageTable from "./UserManageTable";
 import Box from "@mui/material/Box";
+import UserManage from "./UserManage";
 
 // 유저 관리 페이지
 export default function UserManageForm() {
-  // 임의의 100개의 사용자 데이터 배열 생성
-  const userData = Array.from({ length: 100 }, () => ({
-    nickname: "C02",
-    email: "jsee53@gmail.com",
-    join_date: "2023/10/21",
-    review: "1",
-    branch: "2",
-    event: "3",
-    withdrawal_date: "9999/99/99",
-  }));
-
   return (
     <Box sx={{ display: "flex" }}>
       <SideBar />
-      <UserManageTable data={userData} />
+      <UserManage />
     </Box>
   );
 }
diff --git a/src/components/manage-user/UserManageTable.tsx b/src/components/manage-user/UserManageTable.tsx
diff --git a/src/interface/UserManage.interface.ts b/src/interface/UserManage.interface.ts
@@ -1,9 +1,9 @@
-export interface UserManageTableType {
-  nickname: string;
-  email: string;
-  join_date: string;
-  review: string;
-  branch: string;
-  event: string;
-  withdrawal_date: string;
+import { jsx } from "@emotion/react";
+
+export interface UserTableColumn {
+  id: "nickname" | "account" | "join_date" | "review" | "withdrawal_date";
+  label: string;
+  minWidth?: number;
+  align?: "right" | "left" | "center" | "inherit" | "justify" | undefined;
+  format?: (value: string) => jsx.JSX.Element;
 }
diff --git a/src/interface/reuse/Table.interface.ts b/src/interface/reuse/Table.interface.ts
@@ -4,7 +4,7 @@ export interface TableProps {
   columns: Column[];
   // 사용하는 컴포넌트 추가할떄 마다 타입 추가 해야함
   // ex) rows: EventRow[] | UserRow[] | BranchRow[]
-  rows: EventRow[];
+  rows: EventRow[] | UserRow[];
   page: number;
   setPage: React.Dispatch<React.SetStateAction<number>>;
 }
@@ -28,3 +28,13 @@ interface EventRow {
   term: string;
   hashtag: string;
 }
+
+/* UserManage 표 데이터 */
+interface UserRow {
+  [id: string]: string | number;
+  nickname: string;
+  account: string;
+  join_date: string;
+  review: string;
+  withdrawal_date: string;
+}