diff --git a/packages/common/business_components/src/ui/dialog_ui/index.tsx b/packages/common/business_components/src/ui/dialog_ui/index.tsx
index bbb27d327..df7fffd3a 100644
--- a/packages/common/business_components/src/ui/dialog_ui/index.tsx
+++ b/packages/common/business_components/src/ui/dialog_ui/index.tsx
@@ -1,7 +1,7 @@
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader } from "@common/components";
 import { cn } from "../../lib/utils";
 
-type ModalType = { 
+type ModalType = {
   bodyClass: string;
   body: React.ReactNode;
   open?: boolean;
@@ -10,43 +10,45 @@ type ModalType = {
   noFooterYn?: 'N' | 'Y';
   headerTitle?: string;
   footerContent?: React.ReactNode;
+  useDirectRender?: boolean;
 }
 
-export function UiModal({ 
-  bodyClass,  
-  body, 
-  open, 
+export function UiModal({
+  bodyClass,
+  body,
+  open,
   onOpenChange,
   noHeaderYn = 'N',
   noFooterYn = 'N',
   headerTitle,
-  footerContent
+  footerContent,
+  useDirectRender = false
 }: ModalType) {
- 
+
   return (
     <>
-        <Dialog open={open} onOpenChange={onOpenChange}>
+      <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent className={bodyClass}>
-        {noHeaderYn === 'N' && (
-              <DialogHeader>
-                <DialogDescription>
-                  {headerTitle}
-                </DialogDescription>
-              </DialogHeader>
-            )}
-            {(open && body) ?
-            <div> {body}</div>:<></>
-            
-            
-            
-            } 
-            {noFooterYn === 'N' && (
-              <DialogFooter className="sm:justify-start">
-                {footerContent}
-              </DialogFooter>
-            )}
-          </DialogContent>
-        </Dialog>
+          {noHeaderYn === 'N' && (
+            <DialogHeader>
+              <DialogDescription>
+                {headerTitle}
+              </DialogDescription>
+            </DialogHeader>
+          )}
+          {(open && body) ?
+            useDirectRender
+              ? body
+              : <div>{body}</div>
+            : <></>
+          }
+          {noFooterYn === 'N' && (
+            <DialogFooter className="sm:justify-start">
+              {footerContent}
+            </DialogFooter>
+          )}
+        </DialogContent>
+      </Dialog>
     </>
   );
 }
diff --git a/packages/common/business_components/src/ui/table/index-2.tsx b/packages/common/business_components/src/ui/table/index-2.tsx
index b6a9750b0..9756d2dfa 100644
--- a/packages/common/business_components/src/ui/table/index-2.tsx
+++ b/packages/common/business_components/src/ui/table/index-2.tsx
@@ -110,9 +110,7 @@ export function UiTable2({
                             ? 'text-right'
                             : head.align === 'center'
                               ? 'text-center'
-                              : typeof el[head.id] === 'number'
-                                ? 'text-right'
-                                : 'text-center'
+                              : 'text-center'
                           }
                           ${cellClick && idx === index ? '!font-[1000] cursor-pointer' :
                             cellClick ? 'cursor-pointer' : ''}
@@ -141,7 +139,7 @@ export function UiTable2({
         </div>
 
         {/* 페이지네이션 하단 고정 */}
-        { (
+        {(
           <div className="sticky left-0 right-0 bottom-0 bg-white z-20 mt-5">
             <UiPageNations
               total={total}
diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index cd25bc8db..fe720abc0 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -9,28 +9,28 @@ import { boolean } from "zod";
 
 type UiTableProps = {
   headName: React.ReactNode | undefined;
-  tableData: { [key: string]:any}[];
+  tableData: { [key: string]: any }[];
   headlist: UiHeadProps[];
   pageSize: number;
   total: number;
-  cellClick : ((index:number|undefined, headId:string)=>void   )| undefined;
+  cellClick: ((index: number | undefined, headId: string) => void) | undefined;
   onPageChange: (page: number) => void;
   className?: string;
   resetPageNo?: boolean;
   children?: React.ReactNode | undefined;
   boldArray?: number[];
   resetSelection?: boolean;
-  index?:number;
+  index?: number;
 }
 
 type UiHeadProps = {
   id: string;
   title: string;
   align?: string;
-  visible?:boolean;
+  visible?: boolean;
 }
 
-export function UiTable({ tableData, headlist, pageSize, total, headName, children, cellClick, onPageChange, className = '', resetPageNo = false, boldArray = [], resetSelection = false, index=-1 }: UiTableProps) {
+export function UiTable({ tableData, headlist, pageSize, total, headName, children, cellClick, onPageChange, className = '', resetPageNo = false, boldArray = [], resetSelection = false, index = -1 }: UiTableProps) {
   const [cur, setCur] = useState<number>(1);
   const [idx, setIdx] = useState<number>(index);
   const [isCheck, seIsCheck] = useState<boolean>(false);
@@ -54,77 +54,75 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr
     onPageChange(page);
   }
 
-  const handleCellClick = (index: number,headId:string )=> {
+  const handleCellClick = (index: number, headId: string) => {
     if (cellClick) {
-      cellClick(index,headId);
+      cellClick(index, headId);
       setIdx(index);
     }
   };
 
-  
+
   return (
     <>
       {headName ? <div className="card-header">
         <h3 className="text-2xl font-medium text-label">{headName}</h3>
-        </div> : <></>}
+      </div> : <></>}
       <div className={`card !m-[1.2rem] !p-0r ${className}`}>
         <Table variant="secondary">
           <TableHeader className="font-bold">
             {children ? children : <HeadMakeColSpan upHeadList={headlist} />}
           </TableHeader>
           <TableBody className='text-center'>
-            {tableData.length > 0 ? tableData?.map((el: { [key: string]: any}, index) => (
+            {tableData.length > 0 ? tableData?.map((el: { [key: string]: any }, index) => (
               <TableRow key={`row-${index}`}>
                 {headlist
-                .filter((item) => item.visible != false)
-                .map((head) => (
-                  head.id && head.id.length > 1 && (
-                    boldArray.includes(index) 
-                    ?
-                     <TableCell 
-                      className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : typeof el[head.id] === 'number' ? 'text-right' : 'text-center'} ${
-                        cellClick && idx === index ? '!font-[1000] cursor-pointer' : 
-                        cellClick ? 'cursor-pointer' : ''
-                      } !font-bold`}
-                      onClick={() => handleCellClick(index, head.id)}
-                      key={`cell-${head.id}-${index}`}
-                    >
-                      {typeof el[head.id] !== 'number'?String(el[head.id] ?? ''): String(el[head.id]).includes('.') 
-                        ? String(el[head.id]).split('.').map((part, index) => 
-                            index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
-                          ).join('.')
-                        : String(el[head.id] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
-                    </TableCell>
-                    :
-                    <TableCell 
-                      className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : typeof el[head.id] === 'number' ? 'text-right' : 'text-center'} ${
-                        cellClick && idx === index ? '!font-[1000] cursor-pointer' : 
-                        cellClick ? 'cursor-pointer' : ''
-                      }`}
-                      onClick={() => handleCellClick(index, head.id)}
-                      key={`cell-${head.id}-${index}`}
-                    >
-                      {typeof el[head.id] === 'boolean'
-                      ?<Checkbox
-                        checked={el[head.id] === true}
-                        onCheckedChange={(checked) => {
-                          el[head.id]= checked;
-                        }}
-                      >
-                        <Check className="h-6 w-6 text-primary" />
-                      </Checkbox>
-                      :
-                      typeof el[head.id] !== 'number'?
-                      String(el[head.id] ?? ''):
-                       String(el[head.id]).includes('.') 
-                        ? String(el[head.id]).split('.').map((part, index) => 
-                            index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
-                      ).join('.')
-                     :
-                        String(el[head.id] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
-                    </TableCell>
-                  )
-                ))}
+                  .filter((item) => item.visible != false)
+                  .map((head) => (
+                    head.id && head.id.length > 1 && (
+                      boldArray.includes(index)
+                        ?
+                        <TableCell
+                          className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : 'text-center'} ${cellClick && idx === index ? '!font-[1000] cursor-pointer' :
+                              cellClick ? 'cursor-pointer' : ''
+                            } !font-bold`}
+                          onClick={() => handleCellClick(index, head.id)}
+                          key={`cell-${head.id}-${index}`}
+                        >
+                          {typeof el[head.id] !== 'number' ? String(el[head.id] ?? '') : String(el[head.id]).includes('.')
+                            ? String(el[head.id]).split('.').map((part, index) =>
+                              index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
+                            ).join('.')
+                            : String(el[head.id] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
+                        </TableCell>
+                        :
+                        <TableCell
+                          className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : 'text-center'} ${cellClick && idx === index ? '!font-[1000] cursor-pointer' :
+                              cellClick ? 'cursor-pointer' : ''
+                            }`}
+                          onClick={() => handleCellClick(index, head.id)}
+                          key={`cell-${head.id}-${index}`}
+                        >
+                          {typeof el[head.id] === 'boolean'
+                            ? <Checkbox
+                              checked={el[head.id] === true}
+                              onCheckedChange={(checked) => {
+                                el[head.id] = checked;
+                              }}
+                            >
+                              <Check className="h-6 w-6 text-primary" />
+                            </Checkbox>
+                            :
+                            typeof el[head.id] !== 'number' ?
+                              String(el[head.id] ?? '') :
+                              String(el[head.id]).includes('.')
+                                ? String(el[head.id]).split('.').map((part, index) =>
+                                  index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
+                                ).join('.')
+                                :
+                                String(el[head.id] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
+                        </TableCell>
+                    )
+                  ))}
               </TableRow>
             )) : <></>}
           </TableBody>