diff --git a/.pnp.cjs b/.pnp.cjs index 249245a..079eb7f 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -39,6 +39,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["@swc/plugin-styled-components", "npm:1.5.87"],\ ["@tanstack/react-query", "virtual:80e4d76db020c97a35892c7ad887c9d6e3dd4aecb7a2044e07b00527e59285ab299ea90004d6b5cb08544f24c5454957ff60a0a17a6821f2f306f9d305397128#npm:4.35.7"],\ ["@tanstack/react-query-devtools", "virtual:80e4d76db020c97a35892c7ad887c9d6e3dd4aecb7a2044e07b00527e59285ab299ea90004d6b5cb08544f24c5454957ff60a0a17a6821f2f306f9d305397128#npm:4.35.7"],\ + ["@tanstack/react-table", "virtual:80e4d76db020c97a35892c7ad887c9d6e3dd4aecb7a2044e07b00527e59285ab299ea90004d6b5cb08544f24c5454957ff60a0a17a6821f2f306f9d305397128#npm:8.11.7"],\ ["@types/date-fns", "npm:2.6.0"],\ ["@types/node", "npm:20.5.7"],\ ["@types/react", "npm:18.2.25"],\ @@ -4001,6 +4002,42 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ + ["@tanstack/react-table", [\ + ["npm:8.11.7", {\ + "packageLocation": "./.yarn/cache/@tanstack-react-table-npm-8.11.7-19453719b7-47aaf7b94e.zip/node_modules/@tanstack/react-table/",\ + "packageDependencies": [\ + ["@tanstack/react-table", "npm:8.11.7"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:80e4d76db020c97a35892c7ad887c9d6e3dd4aecb7a2044e07b00527e59285ab299ea90004d6b5cb08544f24c5454957ff60a0a17a6821f2f306f9d305397128#npm:8.11.7", {\ + "packageLocation": "./.yarn/__virtual__/@tanstack-react-table-virtual-eab6fed312/0/cache/@tanstack-react-table-npm-8.11.7-19453719b7-47aaf7b94e.zip/node_modules/@tanstack/react-table/",\ + "packageDependencies": [\ + ["@tanstack/react-table", "virtual:80e4d76db020c97a35892c7ad887c9d6e3dd4aecb7a2044e07b00527e59285ab299ea90004d6b5cb08544f24c5454957ff60a0a17a6821f2f306f9d305397128#npm:8.11.7"],\ + ["@tanstack/table-core", "npm:8.11.7"],\ + ["@types/react", "npm:18.2.25"],\ + ["@types/react-dom", "npm:18.2.7"],\ + ["react", "npm:18.2.0"],\ + ["react-dom", "virtual:80e4d76db020c97a35892c7ad887c9d6e3dd4aecb7a2044e07b00527e59285ab299ea90004d6b5cb08544f24c5454957ff60a0a17a6821f2f306f9d305397128#npm:18.2.0"]\ + ],\ + "packagePeers": [\ + "@types/react-dom",\ + "@types/react",\ + "react-dom",\ + "react"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ + ["@tanstack/table-core", [\ + ["npm:8.11.7", {\ + "packageLocation": "./.yarn/cache/@tanstack-table-core-npm-8.11.7-ea21014ab0-0db445806a.zip/node_modules/@tanstack/table-core/",\ + "packageDependencies": [\ + ["@tanstack/table-core", "npm:8.11.7"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@tootallnate/once", [\ ["npm:2.0.0", {\ "packageLocation": "./.yarn/cache/@tootallnate-once-npm-2.0.0-e36cf4f140-ad87447820.zip/node_modules/@tootallnate/once/",\ @@ -9944,6 +9981,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["@swc/plugin-styled-components", "npm:1.5.87"],\ ["@tanstack/react-query", "virtual:80e4d76db020c97a35892c7ad887c9d6e3dd4aecb7a2044e07b00527e59285ab299ea90004d6b5cb08544f24c5454957ff60a0a17a6821f2f306f9d305397128#npm:4.35.7"],\ ["@tanstack/react-query-devtools", "virtual:80e4d76db020c97a35892c7ad887c9d6e3dd4aecb7a2044e07b00527e59285ab299ea90004d6b5cb08544f24c5454957ff60a0a17a6821f2f306f9d305397128#npm:4.35.7"],\ + ["@tanstack/react-table", "virtual:80e4d76db020c97a35892c7ad887c9d6e3dd4aecb7a2044e07b00527e59285ab299ea90004d6b5cb08544f24c5454957ff60a0a17a6821f2f306f9d305397128#npm:8.11.7"],\ ["@types/date-fns", "npm:2.6.0"],\ ["@types/node", "npm:20.5.7"],\ ["@types/react", "npm:18.2.25"],\ diff --git a/.yarn/cache/@tanstack-react-table-npm-8.11.7-19453719b7-47aaf7b94e.zip b/.yarn/cache/@tanstack-react-table-npm-8.11.7-19453719b7-47aaf7b94e.zip new file mode 100644 index 0000000..23249e1 Binary files /dev/null and b/.yarn/cache/@tanstack-react-table-npm-8.11.7-19453719b7-47aaf7b94e.zip differ diff --git a/.yarn/cache/@tanstack-table-core-npm-8.11.7-ea21014ab0-0db445806a.zip b/.yarn/cache/@tanstack-table-core-npm-8.11.7-ea21014ab0-0db445806a.zip new file mode 100644 index 0000000..64293fc Binary files /dev/null and b/.yarn/cache/@tanstack-table-core-npm-8.11.7-ea21014ab0-0db445806a.zip differ diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index 2728803..f4aa0d5 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/app/enrollment-check/page.tsx b/app/enrollment-check/page.tsx new file mode 100644 index 0000000..39f497f --- /dev/null +++ b/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 ( + + + 등록 확인 + + + + + + ); +} + +export default EnrollmentCheckPage; diff --git a/components/common/table/index.tsx b/components/common/table/index.tsx new file mode 100644 index 0000000..9db43e6 --- /dev/null +++ b/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 = { + name: string; + data: T[]; + columns: ColumnDef[]; + noDataMessage?: string; + useMinHeight?: boolean; +}; +export type TableRenderSubRowComponent = (props: { + row: Row; +}) => React.ReactElement; + +export function Table(props: TableProps) { + const { useMinHeight = true, data, columns, noDataMessage } = props; + const { getHeaderGroups, getRowModel } = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + }); + + const isNoData = getRowModel().rows.length === 0; + + return ( + + + {getHeaderGroups().map((headerGroup) => ( + // eslint-disable-next-line react/jsx-key + + {headerGroup.headers.map((header) => + header.isPlaceholder ? null : ( + + {flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ) + )} + + ))} + + + {isNoData ? ( + + {noDataMessage} + + ) : ( + getRowModel().rows.map((row) => ( + + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + + )) + )} + + + ); +} + +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; +`; diff --git a/components/domains/enrollment-check/index.ts b/components/domains/enrollment-check/index.ts new file mode 100644 index 0000000..0e948df --- /dev/null +++ b/components/domains/enrollment-check/index.ts @@ -0,0 +1 @@ +export * from "./table"; diff --git a/components/domains/enrollment-check/table/deleteAdmin/index.tsx b/components/domains/enrollment-check/table/deleteAdmin/index.tsx new file mode 100644 index 0000000..6249e17 --- /dev/null +++ b/components/domains/enrollment-check/table/deleteAdmin/index.tsx @@ -0,0 +1,22 @@ +import styled, { css } from "styled-components"; + +export function DeleteAdmin() { + return 삭제하기; +} + +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]}; + `; + }} +`; diff --git a/components/domains/enrollment-check/table/index.tsx b/components/domains/enrollment-check/table/index.tsx new file mode 100644 index 0000000..9b00d57 --- /dev/null +++ b/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[] = [ + { 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 ; + }, + }, +]; + +const data: any[] = [ + { + id: 1, + created_at: "2023.11.12", + genre: "공연", + title: "현대무용<시차적>", + admin_name: "최병현", + status: "검수중", + is_approved: "반려", + selling: "10/29", + }, +]; + +export function EnrollmentCheckTable() { + return ( + +
+ {`전체 ${data.length}건`} +
+ + + ); +} diff --git a/package.json b/package.json index 38e5cb9..e580fe0 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 812367f..10b3135 100644 --- a/yarn.lock +++ b/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