시설물 검색 ui 수정
This commit is contained in:
yschoi
+552
-378
File diff suppressed because it is too large
Load Diff
@@ -18,8 +18,8 @@ const UITab2 = React.forwardRef<
|
||||
UITabProps
|
||||
>(({defaultValue, tabList, children}, ref)=>{
|
||||
return (
|
||||
<Tabs defaultValue={defaultValue || tabList[0]?.value} className={"w-full space-x-1"}>
|
||||
<TabsList className="flex space-x-1">
|
||||
<Tabs defaultValue={defaultValue || tabList[0]?.value} className={"w-full"}>
|
||||
<TabsList className="flex">
|
||||
{tabList.map((tab) => (
|
||||
<TabsTrigger
|
||||
key={tab.value}
|
||||
|
||||
@@ -14,18 +14,32 @@ type UiTableProps = {
|
||||
className?: string;
|
||||
resetPageNo?: boolean;
|
||||
cur?: number;
|
||||
}
|
||||
height?: string; // ✅ 추가된 prop
|
||||
};
|
||||
|
||||
type UiHeadProps = {
|
||||
id: string;
|
||||
title: string;
|
||||
align?: string;
|
||||
}
|
||||
};
|
||||
|
||||
export function UiTable2({ tableData, headlist, pageSize, total, children, headName, cellClick, onPageChange, className = '', resetPageNo = false, cur }: UiTableProps) {
|
||||
export function UiTable2({
|
||||
tableData,
|
||||
headlist,
|
||||
pageSize,
|
||||
total,
|
||||
children,
|
||||
headName,
|
||||
cellClick,
|
||||
onPageChange,
|
||||
className = '',
|
||||
resetPageNo = false,
|
||||
cur,
|
||||
height = '45vh', // ✅ 기본값 설정
|
||||
}: UiTableProps) {
|
||||
const [idx, setIdx] = useState<number>(-1);
|
||||
|
||||
const [curState, setCurState] = useState<number>(cur ?? 1);
|
||||
|
||||
useEffect(() => {
|
||||
setCurState(cur ?? 1);
|
||||
}, [cur]);
|
||||
@@ -40,7 +54,7 @@ export function UiTable2({ tableData, headlist, pageSize, total, children, headN
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurState(page);
|
||||
onPageChange(page);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCellClick = (index: number, headId: string) => {
|
||||
if (cellClick) {
|
||||
@@ -50,58 +64,91 @@ export function UiTable2({ tableData, headlist, pageSize, total, children, headN
|
||||
};
|
||||
|
||||
const startIdx = (curState - 1) * pageSize;
|
||||
const endIdx = startIdx + pageSize;
|
||||
|
||||
return (
|
||||
<>
|
||||
{headName ? (
|
||||
{headName && (
|
||||
<div className="card-header">
|
||||
<h3 className="text-2xl font-medium text-label">{headName}</h3>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<h3 className="text-2xl font-medium text-label">{headName}</h3>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div className={`card !m-[1.2rem] !p-0r w-full relative ${className}`}>
|
||||
<div>
|
||||
)}
|
||||
|
||||
<div className={`card !m-[1.2rem] !p-0 relative ${className}`}>
|
||||
{/* ✅ 외부에서 조절 가능한 높이 적용 */}
|
||||
<div className="overflow-auto" style={{ height }}>
|
||||
<Table variant="secondary" className="w-full">
|
||||
{/* 스크롤 관련 div 제거 */}
|
||||
<TableHeader className="bg-white">
|
||||
{children ? (
|
||||
<>{children}</>
|
||||
) : (
|
||||
<TableRow>
|
||||
{headlist?.map((head) => (
|
||||
<TableHead key={head.id}
|
||||
{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">
|
||||
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>
|
||||
))}
|
||||
|
||||
<TableBody className="text-center">
|
||||
{tableData.length > 0 ? (
|
||||
tableData.map((el, index) => (
|
||||
<TableRow key={index + "row"}>
|
||||
{headlist.map((head) => (
|
||||
<TableCell
|
||||
key={head.id + index}
|
||||
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)}
|
||||
>
|
||||
{typeof el[head.id] === 'number'
|
||||
? String(el[head.id]).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
||||
: String(el[head.id] ?? '')}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={headlist.length} className="p-0">
|
||||
{/* ✅ 높이 보장 + 가운데 정렬용 div */}
|
||||
<div className="flex justify-center items-center text-gray-500" style={{ height: `calc(${height} - 70px)` }}>
|
||||
<span className="text-xl">🔍 검색 결과가 없습니다.</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
{/* 페이지네이션을 sticky 하단에 고정 */}
|
||||
{total > 0 && (
|
||||
<div className="sticky left-0 right-0 bottom-0 bg-white z-20 border-t border-gray-200">
|
||||
<UiPageNations total={total} cur={curState} pageSize={pageSize} onPageChange={handlePageChange} />
|
||||
|
||||
{/* 페이지네이션 하단 고정 */}
|
||||
{ (
|
||||
<div className="sticky left-0 right-0 bottom-0 bg-white z-20 mt-5">
|
||||
<UiPageNations
|
||||
total={total}
|
||||
cur={curState}
|
||||
pageSize={pageSize}
|
||||
onPageChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user