[Fix] table 컴포넌트의 데이터가 없는 경우 ui 추가, 훅 분리, body로 컴포넌트를 받을 수 있도록 수정

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<ReactNode | string | number>
 
-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 (
     <div className={cx('container')}>
@@ -31,16 +36,23 @@ const VerticalTable = ({ tableHead, tableBody, countPerPage, currentPage }: Prop
             ))}
           </tr>
         </thead>
-        <tbody>
-          {croppedTableBody.map((row) => (
-            <tr key={Object.values(row)[0]}>
-              {Object.entries(row).map((rowData, idx) => (
-                <td key={idx}>{rowData[1]}</td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
+        {hasData && (
+          <tbody>
+            {slicedTableBody.map((row) => (
+              <tr key={Object.values(row)[0]}>
+                {Object.values(row).map((data, idx) => (
+                  <td key={data + idx}>{data}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        )}
       </table>
+      {!hasData && (
+        <div className={cx('no-data')} style={{ height: `calc(40px * ${countPerPage}` }}>
+          데이터가 존재하지 않습니다.
+        </div>
+      )}
     </div>
   )
 }

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;
+}

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

shared/utils/slice-array.ts

@@ -0,0 +1,8 @@
+const sliceArray = <T>(array: T[], countPerPage: number, currentPage: number) => {
+  return array.slice(
+    countPerPage * (currentPage - 1),
+    countPerPage * (currentPage - 1) + countPerPage
+  )
+}
+
+export default sliceArray