프론트엔드 UI/UX 개선사항 복구 및 테이블 스타일링 통일
- 테이블 헤더 스타일링 개선 (더 진한 배경색, 오렌지 호버 효과) - 파일첨부 컴포넌트 개선 (뚝뚝 잘리는 문제 해결, 패딩/아이콘 크기 조정) - 카드 디스플레이 스타일링 개선 (명확한 테두리, 오렌지 호버 효과) - 라벨 표시 기능 수정 (드롭다운 라벨링 문제, 체크박스 풀리는 문제 해결) - 패널 및 레이아웃 개선 (카드 간격 통일, 주황색 영역 추가) - CSS 통일성 작업 (Select 컴포넌트 너비 w-48로 조정) - 정렬 화살표 표시 조건 수정 (정렬된 컬럼에서만 화살표 표시) - 테이블 스타일링 통일 (SingleTableWithSticky, TableListComponent, InteractiveDataTable)
This commit is contained in:
leeheejin
@@ -46,10 +46,11 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative h-full overflow-auto rounded-xl border border-gray-200/60 bg-gradient-to-br from-white to-gray-50/30 shadow-sm"
|
||||
className="relative h-full overflow-x-auto overflow-y-auto rounded-2xl border border-gray-200/40 bg-white shadow-sm backdrop-blur-sm"
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
maxHeight: "100%", // 최대 높이 제한으로 스크롤 활성화
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
@@ -57,12 +58,12 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
|
||||
className="w-full"
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
tableLayout: "fixed",
|
||||
minWidth: "100%",
|
||||
tableLayout: "auto", // 테이블 크기 자동 조정
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
<TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-gradient-to-r from-slate-50 to-blue-50/30 border-b border-gray-200/60" : "bg-gradient-to-r from-slate-50 to-blue-50/30 border-b border-gray-200/60"}>
|
||||
<TableHeader className={tableConfig.stickyHeader ? "sticky top-0 z-20 bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm border-b border-gray-200/40" : "bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm border-b border-gray-200/40"}>
|
||||
<TableRow className="border-b border-gray-200/40">
|
||||
{visibleColumns.map((column, colIndex) => {
|
||||
// 왼쪽 고정 컬럼들의 누적 너비 계산
|
||||
@@ -84,23 +85,28 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
|
||||
key={column.columnName}
|
||||
className={cn(
|
||||
column.columnName === "__checkbox__"
|
||||
? "h-12 border-0 px-4 py-3 text-center align-middle"
|
||||
: "h-12 cursor-pointer border-0 px-4 py-3 text-left align-middle font-semibold whitespace-nowrap text-slate-700 select-none transition-all duration-200",
|
||||
? "h-12 border-0 px-6 py-4 text-center align-middle"
|
||||
: "h-12 cursor-pointer border-0 px-6 py-4 text-left align-middle font-semibold whitespace-nowrap text-gray-700 select-none transition-all duration-200 hover:text-gray-900",
|
||||
`text-${column.align}`,
|
||||
<<<<<<< HEAD
|
||||
column.sortable && "hover:bg-orange-50 hover:text-orange-700",
|
||||
=======
|
||||
column.sortable && "hover:bg-orange-200/70",
|
||||
>>>>>>> 8c19d57ced949bde4c9ffcce6544791d3e4b051f
|
||||
// 고정 컬럼 스타일
|
||||
column.fixed === "left" && "sticky z-10 border-r border-gray-200/60 bg-gradient-to-r from-slate-50 to-blue-50/30 shadow-sm",
|
||||
column.fixed === "right" && "sticky z-10 border-l border-gray-200/60 bg-gradient-to-r from-slate-50 to-blue-50/30 shadow-sm",
|
||||
column.fixed === "left" && "sticky z-10 border-r border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
|
||||
column.fixed === "right" && "sticky z-10 border-l border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 shadow-sm",
|
||||
// 숨김 컬럼 스타일 (디자인 모드에서만)
|
||||
isDesignMode && column.hidden && "bg-gray-100/50 opacity-40",
|
||||
)}
|
||||
style={{
|
||||
width: getColumnWidth(column),
|
||||
minWidth: getColumnWidth(column),
|
||||
maxWidth: getColumnWidth(column),
|
||||
minWidth: "100px", // 최소 너비 보장
|
||||
maxWidth: "300px", // 최대 너비 제한
|
||||
boxSizing: "border-box",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
|
||||
// sticky 위치 설정
|
||||
...(column.fixed === "left" && { left: leftFixedWidth }),
|
||||
...(column.fixed === "right" && { right: rightFixedWidth }),
|
||||
@@ -155,9 +161,9 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
|
||||
<TableRow
|
||||
key={`row-${index}`}
|
||||
className={cn(
|
||||
"h-12 cursor-pointer border-b border-gray-100/60 leading-none transition-all duration-200",
|
||||
tableConfig.tableStyle?.hoverEffect && "hover:bg-gradient-to-r hover:from-blue-50/30 hover:to-indigo-50/20 hover:shadow-sm",
|
||||
tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gradient-to-r from-slate-50/30 to-gray-50/20",
|
||||
"h-12 cursor-pointer border-b border-gray-100/40 leading-none transition-all duration-200",
|
||||
tableConfig.tableStyle?.hoverEffect && "hover:bg-gradient-to-r hover:from-orange-50/80 hover:to-orange-100/60 hover:shadow-sm",
|
||||
tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/30",
|
||||
)}
|
||||
style={{ minHeight: "48px", height: "48px", lineHeight: "1" }}
|
||||
onClick={() => handleRowClick(row)}
|
||||
@@ -181,17 +187,19 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
|
||||
<TableCell
|
||||
key={`cell-${column.columnName}`}
|
||||
className={cn(
|
||||
"h-12 px-4 py-3 align-middle text-sm whitespace-nowrap text-slate-600 transition-all duration-200",
|
||||
"h-12 px-6 py-4 align-middle text-sm whitespace-nowrap text-gray-600 transition-all duration-200",
|
||||
`text-${column.align}`,
|
||||
// 고정 컬럼 스타일
|
||||
column.fixed === "left" && "sticky z-10 border-r border-gray-200/60 bg-white/90 backdrop-blur-sm",
|
||||
column.fixed === "right" && "sticky z-10 border-l border-gray-200/60 bg-white/90 backdrop-blur-sm",
|
||||
column.fixed === "left" && "sticky z-10 border-r border-gray-200/40 bg-white/90 backdrop-blur-sm",
|
||||
column.fixed === "right" && "sticky z-10 border-l border-gray-200/40 bg-white/90 backdrop-blur-sm",
|
||||
)}
|
||||
style={{
|
||||
minHeight: "48px",
|
||||
height: "48px",
|
||||
verticalAlign: "middle",
|
||||
width: getColumnWidth(column),
|
||||
minWidth: "100px", // 최소 너비 보장
|
||||
maxWidth: "300px", // 최대 너비 제한
|
||||
boxSizing: "border-box",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
|
||||
@@ -298,7 +298,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
width: "100%", // 컨테이너 전체 너비 사용
|
||||
maxWidth: "100%", // 최대 너비 제한
|
||||
height: "auto", // 항상 자동 높이로 테이블 크기에 맞춤
|
||||
minHeight: isDesignMode ? `${Math.min(optimalHeight, 400)}px` : `${optimalHeight}px`, // 최소 높이 보장
|
||||
minHeight: isDesignMode ? "200px" : "300px", // 최소 높이만 보장
|
||||
maxHeight: isDesignMode ? "600px" : "800px", // 최대 높이 제한으로 스크롤 활성화
|
||||
...component.style,
|
||||
...style,
|
||||
display: "flex",
|
||||
@@ -1315,8 +1316,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
<div
|
||||
style={{ ...componentStyle, zIndex: 10 }} // 🎯 componentStyle + z-index 추가
|
||||
className={cn(
|
||||
"rounded-lg border border-gray-200 bg-white shadow-md shadow-blue-100/50",
|
||||
"relative overflow-hidden", // 🎯 항상 overflow-hidden 적용 + relative 추가
|
||||
"relative overflow-hidden",
|
||||
"bg-white border border-gray-200/60",
|
||||
"rounded-2xl shadow-sm",
|
||||
"backdrop-blur-sm",
|
||||
"transition-all duration-300 ease-out",
|
||||
isSelected && "ring-2 ring-blue-500/20 shadow-lg shadow-blue-500/10",
|
||||
className,
|
||||
)}
|
||||
{...domProps}
|
||||
@@ -1324,7 +1329,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
{/* 헤더 */}
|
||||
{tableConfig.showHeader && (
|
||||
<div
|
||||
<<<<<<< HEAD
|
||||
className="flex items-center justify-between border-b border-gray-200 bg-gray-100 px-6 py-4"
|
||||
=======
|
||||
className="flex items-center justify-between border-b border-gray-200/40 bg-gradient-to-r from-slate-50/80 to-gray-50/60 px-6 py-5"
|
||||
>>>>>>> 8c19d57ced949bde4c9ffcce6544791d3e4b051f
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
@@ -1333,14 +1342,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
{(tableConfig.title || tableLabel) && (
|
||||
<h3 className="text-lg font-semibold text-gray-900">{tableConfig.title || tableLabel}</h3>
|
||||
<h3 className="text-xl font-semibold text-gray-800 tracking-tight">{tableConfig.title || tableLabel}</h3>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
{/* 선택된 항목 정보 표시 */}
|
||||
{selectedRows.size > 0 && (
|
||||
<div className="flex items-center space-x-2 rounded-md bg-blue-50 px-3 py-1">
|
||||
<div className="flex items-center space-x-2 rounded-full bg-blue-50/80 px-4 py-2 backdrop-blur-sm">
|
||||
<span className="text-sm font-medium text-blue-700">{selectedRows.size}개 선택됨</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -1351,15 +1360,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
size="sm"
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
style={buttonStyle}
|
||||
className="group relative rounded-lg shadow-sm [&:hover]:opacity-90"
|
||||
className="group relative rounded-xl border-gray-200/60 bg-white/80 backdrop-blur-sm shadow-sm hover:shadow-md transition-all duration-200 hover:bg-gray-50/80"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="relative">
|
||||
<RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} style={{ color: buttonTextColor }} />
|
||||
{loading && <div className="absolute -inset-1 animate-pulse rounded-full bg-blue-200/30"></div>}
|
||||
<RefreshCw className={cn("h-4 w-4 text-gray-600", loading && "animate-spin")} />
|
||||
{loading && <div className="absolute -inset-1 animate-pulse rounded-full bg-blue-100/40"></div>}
|
||||
</div>
|
||||
<span className="text-sm font-medium" style={{ color: buttonTextColor }}>
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
{loading ? "새로고침 중..." : "새로고침"}
|
||||
</span>
|
||||
</div>
|
||||
@@ -1399,7 +1407,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
|
||||
{/* 테이블 컨텐츠 */}
|
||||
<div
|
||||
className={`w-full overflow-hidden ${localPageSize >= 50 ? "flex-1" : ""}`}
|
||||
className={`w-full overflow-auto flex-1`}
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
@@ -1478,20 +1486,20 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
// 기존 테이블 (가로 스크롤이 필요 없는 경우)
|
||||
<div className="w-full overflow-hidden">
|
||||
// 기존 테이블 (가로 스크롤이 필요한 경우)
|
||||
<div className="w-full overflow-x-auto overflow-y-auto">
|
||||
<Table
|
||||
className="w-full"
|
||||
style={{
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
tableLayout: "fixed", // 테이블 크기 고정
|
||||
minWidth: "100%",
|
||||
tableLayout: "auto", // 테이블 크기 자동 조정
|
||||
}}
|
||||
>
|
||||
<TableHeader
|
||||
className={cn(
|
||||
tableConfig.stickyHeader ? "sticky top-0 z-20" : "",
|
||||
"border-b border-gray-200 bg-gray-100/80",
|
||||
"border-b border-gray-200/40 bg-gradient-to-r from-slate-50/90 to-gray-50/70 backdrop-blur-sm",
|
||||
)}
|
||||
>
|
||||
<TableRow
|
||||
@@ -1508,7 +1516,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
<TableHead
|
||||
key={column.columnName}
|
||||
style={{
|
||||
width: column.width ? `${column.width}px` : undefined,
|
||||
width: column.width ? `${column.width}px` : "150px", // 기본 너비 설정
|
||||
minWidth: "100px", // 최소 너비 보장
|
||||
maxWidth: "300px", // 최대 너비 제한
|
||||
minHeight: "48px !important",
|
||||
height: "48px !important",
|
||||
verticalAlign: "middle",
|
||||
@@ -1516,14 +1526,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
boxSizing: "border-box",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap", // 텍스트 줄바꿈 방지
|
||||
}}
|
||||
className={cn(
|
||||
"h-12 px-4 py-3 align-middle text-sm font-semibold text-gray-800",
|
||||
"h-12 px-6 py-4 align-middle text-sm font-semibold text-gray-700",
|
||||
"transition-colors duration-200 ease-out",
|
||||
column.columnName === "__checkbox__"
|
||||
? "text-center"
|
||||
: "cursor-pointer whitespace-nowrap select-none",
|
||||
: "cursor-pointer whitespace-nowrap select-none hover:text-gray-900",
|
||||
`text-${column.align}`,
|
||||
column.sortable && "transition-colors duration-150 hover:bg-orange-100",
|
||||
column.sortable && "hover:bg-orange-200/70",
|
||||
)}
|
||||
onClick={() => column.sortable && handleSort(column.columnName)}
|
||||
>
|
||||
@@ -1568,14 +1580,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
onDragStart={(e) => handleRowDragStart(e, row, index)}
|
||||
onDragEnd={handleRowDragEnd}
|
||||
className={cn(
|
||||
"group relative h-12 cursor-pointer border-b border-gray-100 transition-all duration-200",
|
||||
"group relative h-12 cursor-pointer border-b border-gray-100/60 transition-all duration-200",
|
||||
// 기본 스타일
|
||||
tableConfig.tableStyle?.hoverEffect &&
|
||||
"hover:bg-gradient-to-r hover:from-orange-200 hover:to-orange-300/90 hover:shadow-sm",
|
||||
tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-100/80",
|
||||
"hover:bg-gradient-to-r hover:from-orange-50/80 hover:to-orange-100/60 hover:shadow-sm",
|
||||
tableConfig.tableStyle?.alternateRows && index % 2 === 1 && "bg-gray-50/40",
|
||||
// 드래그 상태 스타일 (미묘하게)
|
||||
draggedRowIndex === index &&
|
||||
"border-blue-200 bg-gradient-to-r from-blue-50 to-blue-100/40 shadow-sm",
|
||||
"border-blue-200/60 bg-gradient-to-r from-blue-50/60 to-indigo-50/40 shadow-sm",
|
||||
isDragging && draggedRowIndex !== index && "opacity-70",
|
||||
// 드래그 가능 표시
|
||||
!isDesignMode && "hover:cursor-grab active:cursor-grabbing",
|
||||
@@ -1593,14 +1605,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
<TableCell
|
||||
key={column.columnName}
|
||||
className={cn(
|
||||
"h-12 px-4 py-3 align-middle text-sm transition-all duration-200",
|
||||
"h-12 px-6 py-4 align-middle text-sm transition-all duration-200 text-gray-600",
|
||||
`text-${column.align}`,
|
||||
)}
|
||||
style={{
|
||||
minHeight: "48px",
|
||||
height: "48px",
|
||||
verticalAlign: "middle",
|
||||
width: column.width ? `${column.width}px` : undefined,
|
||||
width: column.width ? `${column.width}px` : "150px", // 기본 너비 설정
|
||||
minWidth: "100px", // 최소 너비 보장
|
||||
maxWidth: "300px", // 최대 너비 제한
|
||||
boxSizing: "border-box",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
@@ -1718,7 +1732,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
|
||||
// 데이터는 useEffect에서 자동으로 다시 로드됨
|
||||
}}
|
||||
className="rounded-lg border border-slate-200 bg-white/80 px-3 py-2 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:border-slate-300 hover:bg-white"
|
||||
className="rounded-xl border border-gray-200/60 bg-white/80 backdrop-blur-sm px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300/60 hover:bg-white hover:shadow-md"
|
||||
>
|
||||
{(tableConfig.pagination?.pageSizeOptions || [10, 20, 50, 100]).map((size) => (
|
||||
<option key={size} value={size}>
|
||||
@@ -1729,13 +1743,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
)}
|
||||
|
||||
{/* 페이지네이션 버튼 */}
|
||||
<div className="flex items-center space-x-2 rounded-lg border border-gray-200 bg-white p-1 shadow-sm">
|
||||
<div className="flex items-center space-x-2 rounded-xl border border-gray-200/60 bg-white/80 backdrop-blur-sm p-1 shadow-sm">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(1)}
|
||||
disabled={currentPage === 1}
|
||||
className="h-8 w-8 p-0 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-50"
|
||||
className="h-8 w-8 p-0 rounded-lg border-gray-200/60 hover:border-gray-300/60 hover:bg-gray-50/80 hover:text-gray-700 disabled:opacity-50 transition-all duration-200"
|
||||
>
|
||||
<ChevronsLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
@@ -1744,13 +1758,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className="h-8 w-8 p-0 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-50"
|
||||
className="h-8 w-8 p-0 rounded-lg border-gray-200/60 hover:border-gray-300/60 hover:bg-gray-50/80 hover:text-gray-700 disabled:opacity-50 transition-all duration-200"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center rounded-md border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 py-1">
|
||||
<span className="text-sm font-semibold text-blue-800">{currentPage}</span>
|
||||
<div className="flex items-center rounded-lg border border-gray-200/40 bg-gradient-to-r from-gray-50/80 to-slate-50/60 px-4 py-2 backdrop-blur-sm">
|
||||
<span className="text-sm font-semibold text-gray-800">{currentPage}</span>
|
||||
<span className="mx-2 font-light text-gray-400">/</span>
|
||||
<span className="text-sm font-medium text-gray-600">{totalPages}</span>
|
||||
</div>
|
||||
@@ -1760,7 +1774,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
className="h-8 w-8 p-0 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-50"
|
||||
className="h-8 w-8 p-0 rounded-lg border-gray-200/60 hover:border-gray-300/60 hover:bg-gray-50/80 hover:text-gray-700 disabled:opacity-50 transition-all duration-200"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
@@ -1769,7 +1783,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
||||
size="sm"
|
||||
onClick={() => handlePageChange(totalPages)}
|
||||
disabled={currentPage === totalPages}
|
||||
className="h-8 w-8 p-0 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-50"
|
||||
className="h-8 w-8 p-0 rounded-lg border-gray-200/60 hover:border-gray-300/60 hover:bg-gray-50/80 hover:text-gray-700 disabled:opacity-50 transition-all duration-200"
|
||||
>
|
||||
<ChevronsRight className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user