diff --git a/shared/ui/table/vertical/index.tsx b/shared/ui/table/vertical/index.tsx index 580adee3..8e658582 100644 --- a/shared/ui/table/vertical/index.tsx +++ b/shared/ui/table/vertical/index.tsx @@ -1,25 +1,30 @@ +// import { TABLE_DATA } from '@/app/admin/notices/tabledata' +import { ReactNode } from 'react' + import classNames from 'classnames/bind' import { DailyAnalysisModel, MonthlyAnalysisModel } from '@/shared/types/strategy-details-data' +import sliceArray from '@/shared/utils/slice-array' import styles from './styles.module.scss' const cx = classNames.bind(styles) -type TableBodyDataType = DailyAnalysisModel | MonthlyAnalysisModel +type TableBodyDataType = + | DailyAnalysisModel + | MonthlyAnalysisModel + | Array -interface Props { +export interface VerticalTableProps { tableHead: string[] tableBody: TableBodyDataType[] countPerPage: number currentPage: number } -const VerticalTable = ({ tableHead, tableBody, countPerPage, currentPage }: Props) => { - const croppedTableBody = tableBody.slice( - countPerPage * (currentPage - 1), - countPerPage * (currentPage - 1) + countPerPage - ) +const VerticalTable = ({ tableHead, tableBody, countPerPage, currentPage }: VerticalTableProps) => { + const hasData = tableBody.length > 0 + const slicedTableBody = sliceArray(tableBody, countPerPage, currentPage) return (
@@ -31,16 +36,23 @@ const VerticalTable = ({ tableHead, tableBody, countPerPage, currentPage }: Prop ))} - - {croppedTableBody.map((row) => ( - - {Object.entries(row).map((rowData, idx) => ( - {rowData[1]} - ))} - - ))} - + {hasData && ( + + {slicedTableBody.map((row) => ( + + {Object.values(row).map((data, idx) => ( + {data} + ))} + + ))} + + )} + {!hasData && ( +
+ 데이터가 존재하지 않습니다. +
+ )}
) } diff --git a/shared/ui/table/vertical/styles.module.scss b/shared/ui/table/vertical/styles.module.scss index cbc413ca..17ea63ed 100644 --- a/shared/ui/table/vertical/styles.module.scss +++ b/shared/ui/table/vertical/styles.module.scss @@ -17,3 +17,11 @@ } } } + +.no-data { + display: flex; + justify-content: center; + margin-top: 80px; + color: $color-gray-600; + @include typo-b1; +} diff --git a/shared/ui/table/vertical/table.stories.tsx b/shared/ui/table/vertical/table.stories.tsx index 1097dfe4..21b3fb8e 100644 --- a/shared/ui/table/vertical/table.stories.tsx +++ b/shared/ui/table/vertical/table.stories.tsx @@ -93,4 +93,10 @@ Primary.args = { countPerPage: 7, } +export const NoData = Table.bind({}) +NoData.args = { + // @ts-expect-error rornlcksg + tableBody: [], +} + export default meta diff --git a/shared/utils/slice-array.ts b/shared/utils/slice-array.ts new file mode 100644 index 00000000..9e96d6f8 --- /dev/null +++ b/shared/utils/slice-array.ts @@ -0,0 +1,8 @@ +const sliceArray = (array: T[], countPerPage: number, currentPage: number) => { + return array.slice( + countPerPage * (currentPage - 1), + countPerPage * (currentPage - 1) + countPerPage + ) +} + +export default sliceArray