diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index 99199d163..9635a7e21 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -1,78 +1,50 @@
-'use client';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
+import UiPageNations from "./uiPageNations";
 
-import { useEffect, useState } from "react";
-import { 
-  Pagination, 
-  PaginationContent, 
-  PaginationItem, 
-  PaginationPrevious, 
-  PaginationLink, 
-  PaginationNext 
-} from "./lib/pagination";
-
-interface CommonPageNationsProps {
-  total: number;
-  cur: number;
+type UiTableProps = {
+  headName: React.ReactNode | undefined;
+  tableData: { [key: string]: string | number | boolean }[];
+  headlist: UiHeadProps[];
   pageSize: number;
+  total: number;
+  children: React.ReactNode | undefined;
+  cellClick : ((index:number|undefined)=>void) | undefined;
 }
 
-export default function UiPageNations(commonPageNationsProps: CommonPageNationsProps) {
-  const [pageProps, setPageProps] = useState(commonPageNationsProps);
+type UiHeadProps = {
+  id: string;
+  title: string;
+}
 
-  useEffect(() => {
-    setPageProps(commonPageNationsProps);
-  }, [commonPageNationsProps]);
-
-  const totalPages = Math.ceil(pageProps.total / pageProps.pageSize);
-  const pagesPerGroup = 10;
-  const currentGroup = Math.floor((pageProps.cur - 1) / pagesPerGroup);
-  const startPage = currentGroup * pagesPerGroup + 1;
-  const endPage = Math.min(startPage + pagesPerGroup - 1, totalPages);
-
-  const handlePageChange = (page: number) => {
-    setPageProps({ ...pageProps, cur: page });
-  };
+export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick }: UiTableProps) {
+  const cur = 1;
 
   return (
-    <Pagination>
-      <PaginationContent>
-
-        {/* 이전 그룹으로 이동 */}
-        <PaginationItem>
-          <PaginationPrevious 
-            href="#" 
-            onClick={() => {
-              if (startPage > 1) handlePageChange(startPage - 1);
-            }} 
-          />
-        </PaginationItem>
-
-        {/* 현재 그룹 페이지들 표시 */}
-        {
-          Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((pageNum) => (
-            <PaginationItem key={pageNum}>
-              <PaginationLink 
-                href="#" 
-                isActive={pageNum === pageProps.cur}
-                onClick={() => handlePageChange(pageNum)}
-              >
-                {pageNum}
-              </PaginationLink>
-            </PaginationItem>
-          ))
-        }
-
-        {/* 다음 그룹으로 이동 */}
-        <PaginationItem>
-          <PaginationNext 
-            href="#" 
-            onClick={() => {
-              if (endPage < totalPages) handlePageChange(endPage + 1);
-            }} 
-          />
-        </PaginationItem>
-
-      </PaginationContent>
-    </Pagination>
+    <>
+      {headName ? <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">{headName}</h3>
+        </div> : <></>}
+      <div className="card !m-[1.2rem] max-h-[40rem] overflow-auto !p-0r">
+        <Table>
+          <TableHeader>
+          {children ? <>{children}</> : <TableRow>
+            {headlist?.map((head) => (
+              <TableHead key={head.id}>{head.title}</TableHead>
+            ))}
+          </TableRow>}
+        </TableHeader>
+        <TableBody className='text-center'>
+          {tableData?.map((el: { [key: string]: string | number | boolean }, index) => (
+            <TableRow key={index + "row"} >
+              {headlist?.map((head) => (
+                <TableCell className="cursor-pointer" onClick={()=>cellClick && cellClick(index)} key={head.id + index}>{el[head.id]}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+        </Table>
+        {total <= 0 ? <></> : <UiPageNations total={total} cur={cur} pageSize={pageSize} />}
+      </div>
+    </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/common/business_components/src/ui/table/uiPageNations.tsx b/packages/common/business_components/src/ui/table/uiPageNations.tsx
index a7b788d71..99199d163 100644
--- a/packages/common/business_components/src/ui/table/uiPageNations.tsx
+++ b/packages/common/business_components/src/ui/table/uiPageNations.tsx
@@ -1,46 +1,78 @@
-'use client'
-
+'use client';
 
 import { useEffect, useState } from "react";
-import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationLink, PaginationNext } from "./lib/pagination";
-
+import { 
+  Pagination, 
+  PaginationContent, 
+  PaginationItem, 
+  PaginationPrevious, 
+  PaginationLink, 
+  PaginationNext 
+} from "./lib/pagination";
 
 interface CommonPageNationsProps {
-    total: number;
-    cur: number;
-    pageSize: number;
+  total: number;
+  cur: number;
+  pageSize: number;
 }
 
 export default function UiPageNations(commonPageNationsProps: CommonPageNationsProps) {
-    
-    const [pageProps, setPageProps] = useState(commonPageNationsProps);
+  const [pageProps, setPageProps] = useState(commonPageNationsProps);
 
+  useEffect(() => {
+    setPageProps(commonPageNationsProps);
+  }, [commonPageNationsProps]);
 
-    useEffect(() => {  
-        setPageProps(commonPageNationsProps);
-    }  ,[commonPageNationsProps]);
+  const totalPages = Math.ceil(pageProps.total / pageProps.pageSize);
+  const pagesPerGroup = 10;
+  const currentGroup = Math.floor((pageProps.cur - 1) / pagesPerGroup);
+  const startPage = currentGroup * pagesPerGroup + 1;
+  const endPage = Math.min(startPage + pagesPerGroup - 1, totalPages);
 
+  const handlePageChange = (page: number) => {
+    setPageProps({ ...pageProps, cur: page });
+  };
 
-    return(
-        <Pagination>
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious href="#" />
-          </PaginationItem>
+  return (
+    <Pagination>
+      <PaginationContent>
+
+        {/* 이전 그룹으로 이동 */}
+        <PaginationItem>
+          <PaginationPrevious 
+            href="#" 
+            onClick={() => {
+              if (startPage > 1) handlePageChange(startPage - 1);
+            }} 
+          />
+        </PaginationItem>
+
+        {/* 현재 그룹 페이지들 표시 */}
         {
-                Array.from({length:Math.ceil(commonPageNationsProps.total/commonPageNationsProps.pageSize)},(_,i)=>i+1).map((el,index)=>(
-                <PaginationItem key={index}>
-                    <PaginationLink href= '#'>{el}</PaginationLink>
-                </PaginationItem>
-                ))
-         }
-            <PaginationItem>
-                <PaginationNext href="#" />
+          Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((pageNum) => (
+            <PaginationItem key={pageNum}>
+              <PaginationLink 
+                href="#" 
+                isActive={pageNum === pageProps.cur}
+                onClick={() => handlePageChange(pageNum)}
+              >
+                {pageNum}
+              </PaginationLink>
             </PaginationItem>
-         
-   
-       
-        </PaginationContent>
-      </Pagination>
-    );
+          ))
+        }
+
+        {/* 다음 그룹으로 이동 */}
+        <PaginationItem>
+          <PaginationNext 
+            href="#" 
+            onClick={() => {
+              if (endPage < totalPages) handlePageChange(endPage + 1);
+            }} 
+          />
+        </PaginationItem>
+
+      </PaginationContent>
+    </Pagination>
+  );
 }
\ No newline at end of file