style(enrollment-check): 등록 확인 테이블 추가

ISSUES CLOSED: #110

app/enrollment-check/page.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { SpacerSkleton } from "@/components/common/spacer";
+import Typography from "@/components/common/text/Typography";
+import { EnrollmentCheckTable } from "@/components/domains/enrollment-check";
+
+function EnrollmentCheckPage() {
+  return (
+    <SpacerSkleton id="main-content" type="vertical" gap={72}>
+      <SpacerSkleton type="vertical" align="center">
+        <Typography typo="headline">등록 확인</Typography>
+      </SpacerSkleton>
+      <SpacerSkleton type="vertical" gap={44}>
+        <EnrollmentCheckTable />
+      </SpacerSkleton>
+    </SpacerSkleton>
+  );
+}
+
+export default EnrollmentCheckPage;

components/common/table/index.tsx

@@ -0,0 +1,119 @@
+import { Fragment } from "react";
+import type { ColumnDef, Row } from "@tanstack/react-table";
+import {
+  getCoreRowModel,
+  useReactTable,
+  flexRender,
+} from "@tanstack/react-table";
+import styled, { css } from "styled-components";
+
+export type TableProps<T> = {
+  name: string;
+  data: T[];
+  columns: ColumnDef<T>[];
+  noDataMessage?: string;
+  useMinHeight?: boolean;
+};
+export type TableRenderSubRowComponent<T> = (props: {
+  row: Row<T>;
+}) => React.ReactElement;
+
+export function Table<T>(props: TableProps<T>) {
+  const { useMinHeight = true, data, columns, noDataMessage } = props;
+  const { getHeaderGroups, getRowModel } = useReactTable<T>({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const isNoData = getRowModel().rows.length === 0;
+
+  return (
+    <TableContainer>
+      <thead>
+        {getHeaderGroups().map((headerGroup) => (
+          // eslint-disable-next-line react/jsx-key
+          <tr className="row head">
+            {headerGroup.headers.map((header) =>
+              header.isPlaceholder ? null : (
+                <TableTh key={header.id} width={header.column.getSize()}>
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+                </TableTh>
+              )
+            )}
+          </tr>
+        ))}
+      </thead>
+      <TableBody useMinHeight={useMinHeight}>
+        {isNoData ? (
+          <NoDataComponent useMinHeight={useMinHeight}>
+            {noDataMessage}
+          </NoDataComponent>
+        ) : (
+          getRowModel().rows.map((row) => (
+            <Fragment key={row.id}>
+              <tr className="row body">
+                {row.getVisibleCells().map((cell) => (
+                  <TableTd key={cell.id} width={cell.column.getSize()}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableTd>
+                ))}
+              </tr>
+            </Fragment>
+          ))
+        )}
+      </TableBody>
+    </TableContainer>
+  );
+}
+
+const TableContainer = styled.table`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .row {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    border-top: 1px solid ${({ theme: { colors } }) => colors.secondary[400]};
+  }
+`;
+
+const tableCellStyle = css`
+  padding: 16px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  word-break: break-all;
+`;
+
+const TableTh = styled.th<{ width: number }>`
+  ${tableCellStyle}
+  min-width: ${({ width }) => width}px;
+  color: ${({ theme: { colors } }) => colors.secondary[900]};
+`;
+
+const TableTd = styled.td<{ width: number }>`
+  ${tableCellStyle}
+  min-width: ${({ width }) => width}px;
+  color: ${({ theme: { colors } }) => colors.secondary[500]};
+`;
+
+const TableBody = styled.tbody<{ useMinHeight: boolean }>`
+  min-height: ${({ useMinHeight }) => (useMinHeight ? "560px" : "auto")};
+  display: flex;
+  flex-direction: column;
+`;
+
+const NoDataComponent = styled.div<{ useMinHeight: boolean }>`
+  width: 100%;
+  height: ${({ useMinHeight }) => (useMinHeight ? "560px" : "auto")};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

components/domains/enrollment-check/index.ts

@@ -0,0 +1 @@
+export * from "./table";

components/domains/enrollment-check/table/deleteAdmin/index.tsx

@@ -0,0 +1,22 @@
+import styled, { css } from "styled-components";
+
+export function DeleteAdmin() {
+  return <DeleteButton>삭제하기</DeleteButton>;
+}
+
+const DeleteButton = styled.button`
+  ${({ theme }) => {
+    const { colors } = theme;
+
+    return css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      padding: 5px 0;
+      border: 1px solid ${colors.secondary[400]};
+      border-radius: 4px;
+      color: ${colors.secondary[400]};
+    `;
+  }}
+`;

components/domains/enrollment-check/table/index.tsx

@@ -0,0 +1,74 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import { SpacerSkleton } from "@/components/common/spacer";
+import { Table } from "@/components/common/table";
+import Typography from "@/components/common/text/Typography";
+import { DeleteAdmin } from "./deleteAdmin";
+
+const column: ColumnDef<any>[] = [
+  { id: "id", header: "번호", accessorFn: (row) => row.id, size: 28 },
+  {
+    id: "created_at",
+    header: "등록일",
+    accessorFn: (row) => row.created_at,
+    size: 77,
+  },
+  { id: "genre", header: "장르", accessorFn: (row) => row.genre, size: 28 },
+  { id: "title", header: "작품명", accessorFn: (row) => row.title, size: 245 },
+  {
+    id: "admin_name",
+    header: "관리자명",
+    accessorFn: (row) => row.admin_name,
+    size: 56,
+  },
+  {
+    id: "status",
+    header: "상태",
+    accessorFn: (row) => row.status,
+    size: 50,
+  },
+  {
+    id: "is_approved",
+    header: "승인",
+    accessorFn: (row) => row.is_approved,
+    size: 40,
+  },
+  {
+    id: "selling",
+    header: "판매현황",
+    accessorFn: (row) => row.selling,
+    size: 132,
+  },
+  {
+    id: "admin",
+    header: "관리",
+    accessorFn: (row) => row.admin,
+    size: 72,
+    cell(props) {
+      return <DeleteAdmin />;
+    },
+  },
+];
+
+const data: any[] = [
+  {
+    id: 1,
+    created_at: "2023.11.12",
+    genre: "공연",
+    title: "현대무용<시차적>",
+    admin_name: "최병현",
+    status: "검수중",
+    is_approved: "반려",
+    selling: "10/29",
+  },
+];
+
+export function EnrollmentCheckTable() {
+  return (
+    <SpacerSkleton type="vertical" gap={44}>
+      <div>
+        <Typography typo="subhead03">{`전체 ${data.length}건`}</Typography>
+      </div>
+      <Table name="enrollment-check-table" columns={column} data={data} />
+    </SpacerSkleton>
+  );
+}

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@newnivers/react": "^0.0.7",
     "@tanstack/react-query": "^4.33.0",
+    "@tanstack/react-table": "^8.11.7",
     "aws-sdk": "^2.1467.0",
     "axios": "0.27.2",
     "date-fns": "^2.30.0",

yarn.lock

@@ -2512,6 +2512,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-table@npm:^8.11.7":
+  version: 8.11.7
+  resolution: "@tanstack/react-table@npm:8.11.7"
+  dependencies:
+    "@tanstack/table-core": 8.11.7
+  peerDependencies:
+    react: ">=16"
+    react-dom: ">=16"
+  checksum: 47aaf7b94e32de136a218f9afafbae832949560020f344fdbda69bad80d4c4f8be1eff0c4b1b4628e4966b1cda9db0cd219fea1c6815cdbcf042db00b789b026
+  languageName: node
+  linkType: hard
+
+"@tanstack/table-core@npm:8.11.7":
+  version: 8.11.7
+  resolution: "@tanstack/table-core@npm:8.11.7"
+  checksum: 0db445806a85d2a226225c7a6b31dae0e8be477172c0cabb796ccb2766bfec4c6a8930ebbaa7b4d410de170e1c41f2005bb47762677c059aecba69d65d22e496
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -7447,6 +7466,7 @@ __metadata:
     "@swc/plugin-styled-components": ^1.5.74
     "@tanstack/react-query": ^4.33.0
     "@tanstack/react-query-devtools": ^4.33.0
+    "@tanstack/react-table": ^8.11.7
     "@types/date-fns": ^2.6.0
     "@types/node": 20.5.7
     "@types/react": ^18.2.25