diff --git a/docs/shadcn-ui-레이아웃-패턴-분석-보고서.md b/docs/shadcn-ui-레이아웃-패턴-분석-보고서.md index e251f9fa..521a8840 100644 --- a/docs/shadcn-ui-레이아웃-패턴-분석-보고서.md +++ b/docs/shadcn-ui-레이아웃-패턴-분석-보고서.md @@ -406,6 +406,55 @@ className={cn( - 테이블 외곽 테두리는 없지만, 행 구분선으로 데이터 구분이 가능합니다 - 시각적으로 깔끔하면서도 데이터 구분이 명확한 디자인이 적용되었습니다 +### 테이블 구조 표준화 완료 + +#### 표준 테이블 스타일 정의 + +모든 테이블 컴포넌트에 동일한 스타일을 적용하여 일관성을 확보했습니다: + +**표준 스타일:** + +- **헤더 높이**: `h-12` (48px) +- **헤더 패딩**: `px-6 py-3` +- **헤더 텍스트**: `text-sm font-semibold` +- **헤더 배경**: `bg-background` (흰색 배경으로 통일) +- **행 높이**: `h-16` (64px) +- **행 패딩**: `px-6 py-3` +- **행 텍스트**: `text-sm` +- **행 배경**: `bg-background` (모든 행 흰색 배경으로 통일) +- **행 호버**: `hover:bg-muted/50 transition-colors` +- **행 구분선**: `border-b` (기본 TableRow에 포함) + +**표준화된 컴포넌트:** + +- ✅ `TableListComponent.tsx`: 행 높이 `h-12` → `h-16`, 호버 `hover:bg-destructive/10` → `hover:bg-muted/50`, 홀수 행 배경 제거 (모든 행 흰색 배경으로 통일), 헤더 배경 `bg-muted/50` → `bg-background` +- ✅ `FlowWidget.tsx`: 패딩 `px-3 py-2` → `px-6 py-3`, 텍스트 `text-xs sm:text-sm` → `text-sm`, 행 높이 `h-16` 명시 +- ✅ `SingleTableWithSticky.tsx`: 행 높이 `h-12` → `h-16`, 하드코딩된 색상 제거, 배경 `bg-white` → `bg-background`, 홀수 행 배경 제거 (설정 기반 alternateRows 제거), 헤더 배경 `bg-muted/50` → `bg-background` +- ✅ 모든 관리자 테이블: 헤더 배경 `bg-muted/50` → `bg-background` (`UserTable`, `CompanyTable`, `MenuTable`, `ColumnDefinitionTable`, `UserAuthTable`, `MenuPermissionsTable`, `RestApiConnectionList`) + +**수정 요약:** + +| 항목 | 변경 내용 | 적용 상태 | +| ----------- | --------------------------------------------------- | --------- | +| 헤더 높이 | 모든 테이블 `h-12`로 통일 | ✅ 완료 | +| 헤더 패딩 | 모든 테이블 `px-6 py-3`로 통일 | ✅ 완료 | +| 헤더 배경 | 모든 테이블 헤더를 `bg-background`로 통일 (회색 배경 제거) | ✅ 완료 | +| 행 높이 | 모든 테이블 `h-16`로 통일 | ✅ 완료 | +| 행 패딩 | 모든 테이블 `px-6 py-3`로 통일 | ✅ 완료 | +| 텍스트 크기 | 모든 테이블 `text-sm`로 통일 | ✅ 완료 | +| 행 배경 | 모든 행을 `bg-background`로 통일 (호버 시에만 회색) | ✅ 완료 | +| 호버 효과 | 모든 테이블 `hover:bg-muted/50`로 통일 | ✅ 완료 | +| 색상 시스템 | 하드코딩된 색상 제거, CSS 변수 사용 | ✅ 완료 | + +**결과:** + +- 모든 테이블이 동일한 높이, 패딩, 텍스트 크기로 표시됩니다 +- 모든 행과 헤더가 흰색 배경으로 통일되어 일관성이 확보되었습니다 +- 호버 시에만 회색 배경이 나타나 깔끔하고 모던한 디자인입니다 +- 일관된 호버 효과와 스타일이 적용되었습니다 +- CSS 변수를 사용하여 테마 대응이 가능합니다 +- 관리자 테이블과 위젯 테이블이 동일한 디자인으로 통일되었습니다 + ### 최종 적용률 업데이트 | 항목 | 상태 | 비율 | @@ -416,8 +465,9 @@ className={cn( | 색상 시스템 | ✅ 완료 | ~98% | | 패딩 중복 | ✅ 대부분 수정 | ~90% | | 반응형 디자인 | ✅ 개선됨 | ~75% | -| 테이블 표준화 | ✅ 완료 | ~95% | +| 테이블 표준화 | ✅ 완료 | ~100% | | **테이블 테두리 및 라운드 수정** | ✅ 완료 | ~100% | +| **테이블 구조 표준화** | ✅ 완료 | ~100% | ### 추가 완료된 작업 diff --git a/frontend/components/admin/ColumnDefinitionTable.tsx b/frontend/components/admin/ColumnDefinitionTable.tsx index a846127c..5ad02693 100644 --- a/frontend/components/admin/ColumnDefinitionTable.tsx +++ b/frontend/components/admin/ColumnDefinitionTable.tsx @@ -166,7 +166,7 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
- + 컬럼명 * diff --git a/frontend/components/admin/CompanyTable.tsx b/frontend/components/admin/CompanyTable.tsx index 5a2130ca..535beef5 100644 --- a/frontend/components/admin/CompanyTable.tsx +++ b/frontend/components/admin/CompanyTable.tsx @@ -52,7 +52,7 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
- + {COMPANY_TABLE_COLUMNS.map((column) => ( {column.label} @@ -131,17 +131,17 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company {/* 데스크톱 테이블 뷰 (lg 이상) */}
- - - {COMPANY_TABLE_COLUMNS.map((column) => ( - - {column.label} - - ))} - 디스크 사용량 - 작업 - - + + + {COMPANY_TABLE_COLUMNS.map((column) => ( + + {column.label} + + ))} + 디스크 사용량 + 작업 + + {companies.map((company) => ( diff --git a/frontend/components/admin/MenuPermissionsTable.tsx b/frontend/components/admin/MenuPermissionsTable.tsx index ccabb733..5ac3c78a 100644 --- a/frontend/components/admin/MenuPermissionsTable.tsx +++ b/frontend/components/admin/MenuPermissionsTable.tsx @@ -282,7 +282,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
- + 메뉴
diff --git a/frontend/components/admin/MenuTable.tsx b/frontend/components/admin/MenuTable.tsx index 879e8075..1eb31b8c 100644 --- a/frontend/components/admin/MenuTable.tsx +++ b/frontend/components/admin/MenuTable.tsx @@ -148,9 +148,9 @@ export const MenuTable: React.FC = ({
- - - + + + = ({ className="h-4 w-4" /> - + {getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_NAME)} - + {getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_SEQUENCE)} - + {getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_COMPANY)} - + {getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_URL)} - + {getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_STATUS)} - + {getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_ACTIONS)} diff --git a/frontend/components/admin/RestApiConnectionList.tsx b/frontend/components/admin/RestApiConnectionList.tsx index 3ed9a6ab..9648c9b7 100644 --- a/frontend/components/admin/RestApiConnectionList.tsx +++ b/frontend/components/admin/RestApiConnectionList.tsx @@ -265,7 +265,7 @@ export function RestApiConnectionList() {
- + 연결명 기본 URL 인증 타입 diff --git a/frontend/components/admin/UserAuthTable.tsx b/frontend/components/admin/UserAuthTable.tsx index 88889e7d..fb85208d 100644 --- a/frontend/components/admin/UserAuthTable.tsx +++ b/frontend/components/admin/UserAuthTable.tsx @@ -78,7 +78,7 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
- + No 사용자 ID 사용자명 @@ -136,7 +136,7 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
- + No 사용자 ID 사용자명 diff --git a/frontend/components/admin/UserTable.tsx b/frontend/components/admin/UserTable.tsx index c46630f0..ed44b696 100644 --- a/frontend/components/admin/UserTable.tsx +++ b/frontend/components/admin/UserTable.tsx @@ -111,7 +111,7 @@ export function UserTable({
- + {USER_TABLE_COLUMNS.map((column) => ( {column.label} @@ -188,16 +188,16 @@ export function UserTable({ {/* 데스크톱 테이블 뷰 (lg 이상) */}
- - - {USER_TABLE_COLUMNS.map((column) => ( - - {column.label} - - ))} - 작업 - - + + + {USER_TABLE_COLUMNS.map((column) => ( + + {column.label} + + ))} + 작업 + + {users.map((user, index) => ( diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx index ae57ac76..9508cb0d 100644 --- a/frontend/components/screen/widgets/FlowWidget.tsx +++ b/frontend/components/screen/widgets/FlowWidget.tsx @@ -853,7 +853,7 @@ export function FlowWidget({ {allowDataMove && ( - + 0} onCheckedChange={toggleAllRows} @@ -863,7 +863,7 @@ export function FlowWidget({ {stepDataColumns.map((col) => ( {columnLabels[col] || col} @@ -876,10 +876,10 @@ export function FlowWidget({ return ( {allowDataMove && ( - + toggleRowSelection(actualIndex)} @@ -887,7 +887,7 @@ export function FlowWidget({ )} {stepDataColumns.map((col) => ( - + {row[col] !== null && row[col] !== undefined ? ( String(row[col]) ) : ( diff --git a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx index c258168d..cbfe678c 100644 --- a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx +++ b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx @@ -46,7 +46,7 @@ export const SingleTableWithSticky: React.FC = ({ return (
= ({ - + {visibleColumns.map((column, colIndex) => { // 왼쪽 고정 컬럼들의 누적 너비 계산 const leftFixedWidth = visibleColumns @@ -91,17 +91,17 @@ export const SingleTableWithSticky: React.FC = ({ key={column.columnName} className={cn( column.columnName === "__checkbox__" - ? "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 transition-all duration-200 select-none hover:text-gray-900", + ? "h-12 border-0 px-6 py-3 text-center align-middle" + : "h-12 cursor-pointer border-0 px-6 py-3 text-left align-middle font-semibold whitespace-nowrap text-foreground transition-all duration-200 select-none hover:text-foreground", `text-${column.align}`, - column.sortable && "hover:bg-orange-200/70", + column.sortable && "hover:bg-primary/10", // 고정 컬럼 스타일 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", + "sticky z-10 border-r border-border bg-background 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", + "sticky z-10 border-l border-border bg-background shadow-sm", // 숨김 컬럼 스타일 (디자인 모드에서만) - isDesignMode && column.hidden && "bg-gray-100/50 opacity-40", + isDesignMode && column.hidden && "bg-muted/50 opacity-40", )} style={{ width: getColumnWidth(column), @@ -133,11 +133,11 @@ export const SingleTableWithSticky: React.FC = ({ {columnLabels[column.columnName] || column.displayName || column.columnName} {column.sortable && sortColumn === column.columnName && ( - + {sortDirection === "asc" ? ( - + ) : ( - + )} )} @@ -153,10 +153,10 @@ export const SingleTableWithSticky: React.FC = ({ {data.length === 0 ? ( - -
-
- + +
+
+ = ({ />
- 데이터가 없습니다 - + 데이터가 없습니다 + 조건을 변경하여 다시 검색해보세요
@@ -177,12 +177,9 @@ export const SingleTableWithSticky: React.FC = ({ handleRowClick(row)} > {visibleColumns.map((column, colIndex) => { @@ -204,18 +201,15 @@ export const SingleTableWithSticky: React.FC = ({ = ({ > {/* 헤더 (sticky) */}
{visibleColumns.map((column) => (
= ({ onDragStart={(e) => handleRowDragStart(e, row, index)} onDragEnd={handleRowDragEnd} className={cn( - "h-12 border-b border-border/50 cursor-pointer transition-colors", - index % 2 === 1 ? "bg-muted/50" : "bg-background", - "hover:bg-destructive/10" + "h-16 border-b transition-colors bg-background hover:bg-muted/50 cursor-pointer" )} onClick={() => handleRowClick(row)} > @@ -1077,7 +1075,7 @@ export const TableListComponent: React.FC = ({