From 65db79bcee1b2eadeffa4bf370bf142a883e775a Mon Sep 17 00:00:00 2001 From: hoyoen Date: Mon, 25 Nov 2024 02:34:25 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20table=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EC=9D=98=20=EB=8D=B0=EC=9D=B4=ED=84=B0=EA=B0=80=20?= =?UTF-8?q?=EC=97=86=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20ui=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80,=20=ED=9B=85=20=EB=B6=84=EB=A6=AC,=20body=EB=A1=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EB=B0=9B?= =?UTF-8?q?=EC=9D=84=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(#111)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../vertical/hooks/use-vertical-table.ts | 19 ++++++++ shared/ui/table/vertical/index.tsx | 43 ++++++++++++------- shared/ui/table/vertical/styles.module.scss | 8 ++++ shared/ui/table/vertical/table.stories.tsx | 6 +++ 4 files changed, 60 insertions(+), 16 deletions(-) create mode 100644 shared/ui/table/vertical/hooks/use-vertical-table.ts diff --git a/shared/ui/table/vertical/hooks/use-vertical-table.ts b/shared/ui/table/vertical/hooks/use-vertical-table.ts new file mode 100644 index 00000000..9661e9de --- /dev/null +++ b/shared/ui/table/vertical/hooks/use-vertical-table.ts @@ -0,0 +1,19 @@ +import { VerticalTableProps } from '..' + +type ArgsType = Pick + +const useVerticalTable = ({ tableBody, countPerPage, currentPage }: ArgsType) => { + const hasData = tableBody.length > 0 + + const croppedTableBody = tableBody.slice( + countPerPage * (currentPage - 1), + countPerPage * (currentPage - 1) + countPerPage + ) + + return { + hasData, + croppedTableBody, + } +} + +export default useVerticalTable diff --git a/shared/ui/table/vertical/index.tsx b/shared/ui/table/vertical/index.tsx index 580adee3..e5b1aad4 100644 --- a/shared/ui/table/vertical/index.tsx +++ b/shared/ui/table/vertical/index.tsx @@ -1,25 +1,29 @@ +// 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 useVerticalTable from './hooks/use-vertical-table' 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, croppedTableBody } = useVerticalTable({ tableBody, countPerPage, currentPage }) return (
@@ -31,16 +35,23 @@ const VerticalTable = ({ tableHead, tableBody, countPerPage, currentPage }: Prop ))} - - {croppedTableBody.map((row) => ( - - {Object.entries(row).map((rowData, idx) => ( - {rowData[1]} - ))} - - ))} - + {hasData && ( + + {croppedTableBody.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 From 2f6f47e3870d4a09ffd3e426e595602fecfb41d7 Mon Sep 17 00:00:00 2001 From: kimpra Date: Fri, 29 Nov 2024 14:19:07 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=82=B4=EC=9D=98=20?= =?UTF-8?q?=EC=9C=A0=ED=8B=B8=20=ED=95=A8=EC=88=98=20=EA=B5=AC=EC=A1=B0=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC=20(#111)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- shared/ui/table/vertical/index.tsx | 7 ++++--- shared/utils/slice-array.ts | 8 ++++++++ 2 files changed, 12 insertions(+), 3 deletions(-) create mode 100644 shared/utils/slice-array.ts diff --git a/shared/ui/table/vertical/index.tsx b/shared/ui/table/vertical/index.tsx index e5b1aad4..8e658582 100644 --- a/shared/ui/table/vertical/index.tsx +++ b/shared/ui/table/vertical/index.tsx @@ -4,8 +4,8 @@ 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 useVerticalTable from './hooks/use-vertical-table' import styles from './styles.module.scss' const cx = classNames.bind(styles) @@ -23,7 +23,8 @@ export interface VerticalTableProps { } const VerticalTable = ({ tableHead, tableBody, countPerPage, currentPage }: VerticalTableProps) => { - const { hasData, croppedTableBody } = useVerticalTable({ tableBody, countPerPage, currentPage }) + const hasData = tableBody.length > 0 + const slicedTableBody = sliceArray(tableBody, countPerPage, currentPage) return (
@@ -37,7 +38,7 @@ const VerticalTable = ({ tableHead, tableBody, countPerPage, currentPage }: Vert {hasData && ( - {croppedTableBody.map((row) => ( + {slicedTableBody.map((row) => ( {Object.values(row).map((data, idx) => ( {data} 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 From 0d8485e082a93f21b222c5b82d768a66cfaee4f1 Mon Sep 17 00:00:00 2001 From: kimpra Date: Fri, 29 Nov 2024 14:56:10 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20=EB=B6=88?= =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20=ED=9B=85=20=EC=A0=9C=EA=B1=B0=20?= =?UTF-8?q?(#111)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../vertical/hooks/use-vertical-table.ts | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100644 shared/ui/table/vertical/hooks/use-vertical-table.ts diff --git a/shared/ui/table/vertical/hooks/use-vertical-table.ts b/shared/ui/table/vertical/hooks/use-vertical-table.ts deleted file mode 100644 index 9661e9de..00000000 --- a/shared/ui/table/vertical/hooks/use-vertical-table.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { VerticalTableProps } from '..' - -type ArgsType = Pick - -const useVerticalTable = ({ tableBody, countPerPage, currentPage }: ArgsType) => { - const hasData = tableBody.length > 0 - - const croppedTableBody = tableBody.slice( - countPerPage * (currentPage - 1), - countPerPage * (currentPage - 1) + countPerPage - ) - - return { - hasData, - croppedTableBody, - } -} - -export default useVerticalTable