feat: UiTable2 컴포넌트 default, 데이터 없을 시 처리

apps/sn/app/map/SearchModal.tsx

@@ -414,6 +414,7 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
         console.log('필터링된 API 결과(데이터):', res.data.data);
         setTableData(res.data.data || []);
         setTableCount(res.data.count || []);
+        console.log('tableCount 상태 업데이트 후:', res.data.count); // tableCount 로그 추가
         setShowTable(true);
       })
       .catch(err => {

packages/common/business_components/src/ui/table/index-2.tsx

@@ -59,44 +59,54 @@ export function UiTable2({ tableData, headlist, pageSize, total, children, headN
           <h3 className="text-2xl font-medium text-label">{headName}</h3>
         </div>
       ) : null}
-      <div className={`card !m-[1.2rem] !p-0r w-full relative ${className}`}>
-        <div>
-          <Table variant="secondary" className="w-full">
-            {/* 스크롤 관련 div 제거 */}
-            <TableHeader className="bg-white">
-              {children ? (
-                <>{children}</>
-              ) : (
-                <TableRow>
-                  {headlist?.map((head) => (
-                    <TableHead key={head.id}
-                      className="min-w-[120px] max-w-[180px] w-[150px] 
+      <div className={`card !m-[1.2rem] !p-0r w-full relative flex flex-col ${className}`}
+        style={{ height: tableData && tableData.length > 0 ? 'auto' : 'calc(100% - 2.4rem)' }} // 데이터 있을 땐 auto, 없을 땐 부모 높이 채움
+      >
+        {/* 테이블 또는 "데이터 없음" 메시지를 담는 컨테이너, flex-grow로 공간 차지 및 스크롤 처리 */}
+        <div className="overflow-auto flex-grow">
+          {(!tableData || tableData.length === 0) ? (
+            // "데이터 없음" 메시지를 flex를 이용해 수직/수평 중앙 정렬
+            <div className="flex items-center justify-center h-full text-gray-500">
+              조회된 데이터가 없습니다.
+            </div>
+          ) : (
+            <Table variant="secondary" className="w-full">
+              {/* 스크롤 관련 div 제거 */}
+              <TableHeader className="bg-white">
+                {children ? (
+                  <>{children}</>
+                ) : (
+                  <TableRow>
+                    {headlist?.map((head) => (
+                      <TableHead key={head.id}
+                        className="min-w-[120px] max-w-[180px] w-[150px] 
                     text-center whitespace-nowrap overflow-hidden 
                     text-ellipsis bg-white">
-                      {head.title}
-                    </TableHead>
-                  ))}
-                </TableRow>
-              )}
-            </TableHeader>
-            <TableBody className='text-center'>
-              {tableData.map((el: { [key: string]: string | number | boolean | object }, index) => (
-                <TableRow key={index + "row"}>
-                  {headlist?.map((head) => (
-                    <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(startIdx + index, head.id)}
-                      key={head.id + index}
-                    >
-                      {typeof el[head.id] === 'number' ? String(el[head.id]).replace(/\B(?=(\d{3})+(?!\d))/g, ",") : String(el[head.id] ?? '')}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+                        {head.title}
+                      </TableHead>
+                    ))}
+                  </TableRow>
+                )}
+              </TableHeader>
+              <TableBody className='text-center'>
+                {tableData.map((el: { [key: string]: string | number | boolean | object }, index) => (
+                  <TableRow key={index + "row"}>
+                    {headlist?.map((head) => (
+                      <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(startIdx + index, head.id)}
+                        key={head.id + index}
+                      >
+                        {typeof el[head.id] === 'number' ? String(el[head.id]).replace(/\B(?=(\d{3})+(?!\d))/g, ",") : String(el[head.id] ?? '')}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
         </div>
         {/* 페이지네이션을 sticky 하단에 고정 */}
         {total > 0 && (