feat: 테이블 테두리 및 라운드 제거, 검색 필터 제목 제거
- 모든 테이블 컴포넌트의 외곽 테두리(border) 제거 - 테이블 컨테이너의 라운드(rounded-lg) 제거 - 테이블 행 구분선(border-b)은 유지하여 데이터 구분 - FlowWidget과 TableListComponent에 동일한 스타일 적용 - 검색 필터 영역의 회색 배경(bg-muted/30) 제거 - 검색 필터 제목 제거 - AdvancedSearchFilters 컴포넌트의 '검색 필터' 제목 제거
This commit is contained in:
kjs
@@ -67,13 +67,13 @@ export const MenuTable: React.FC<MenuTableProps> = ({
|
||||
const getLevelBadge = (level: number) => {
|
||||
switch (level) {
|
||||
case 0:
|
||||
return "bg-primary/20 text-blue-800";
|
||||
return "bg-primary/20 text-primary";
|
||||
case 1:
|
||||
return "bg-green-100 text-green-800";
|
||||
return "bg-success/20 text-success";
|
||||
case 2:
|
||||
return "bg-yellow-100 text-yellow-800";
|
||||
return "bg-warning/20 text-warning";
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800";
|
||||
return "bg-muted/50 text-muted-foreground";
|
||||
}
|
||||
};
|
||||
|
||||
@@ -131,8 +131,8 @@ export const MenuTable: React.FC<MenuTableProps> = ({
|
||||
onClick={() => onToggleStatus(menuId)}
|
||||
className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
|
||||
status === "active"
|
||||
? "bg-green-100 text-green-800 hover:bg-green-200"
|
||||
: "bg-gray-100 text-gray-800 hover:bg-gray-200"
|
||||
? "bg-success/20 text-success hover:bg-success/30"
|
||||
: "bg-muted/50 text-muted-foreground hover:bg-muted"
|
||||
}`}
|
||||
>
|
||||
{status === "active"
|
||||
@@ -145,12 +145,12 @@ export const MenuTable: React.FC<MenuTableProps> = ({
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{title && <h3 className="text-lg font-semibold">{title}</h3>}
|
||||
<div className="rounded-lg border">
|
||||
<div className="bg-card shadow-sm">
|
||||
<div className="max-h-[calc(100vh-350px)] overflow-auto">
|
||||
<Table noWrapper>
|
||||
<TableHeader className="sticky top-0 z-20 bg-gray-50 shadow-sm">
|
||||
<TableRow>
|
||||
<TableHead className="w-12 bg-gray-50 font-semibold text-gray-700">
|
||||
<TableHeader className="sticky top-0 z-20 bg-muted/50 shadow-sm">
|
||||
<TableRow className="bg-muted/50 hover:bg-muted/50">
|
||||
<TableHead className="h-12 w-12 bg-muted/50 text-sm font-semibold">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={
|
||||
@@ -161,22 +161,22 @@ export const MenuTable: React.FC<MenuTableProps> = ({
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead className="w-1/3 bg-gray-50 font-semibold text-gray-700">
|
||||
<TableHead className="h-12 w-1/3 bg-muted/50 text-sm font-semibold">
|
||||
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_NAME)}
|
||||
</TableHead>
|
||||
<TableHead className="w-16 bg-gray-50 font-semibold text-gray-700">
|
||||
<TableHead className="h-12 w-16 bg-muted/50 text-sm font-semibold">
|
||||
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_SEQUENCE)}
|
||||
</TableHead>
|
||||
<TableHead className="w-24 bg-gray-50 font-semibold text-gray-700">
|
||||
<TableHead className="h-12 w-24 bg-muted/50 text-sm font-semibold">
|
||||
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_COMPANY)}
|
||||
</TableHead>
|
||||
<TableHead className="w-48 bg-gray-50 font-semibold text-gray-700">
|
||||
<TableHead className="h-12 w-48 bg-muted/50 text-sm font-semibold">
|
||||
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_URL)}
|
||||
</TableHead>
|
||||
<TableHead className="w-20 bg-gray-50 font-semibold text-gray-700">
|
||||
<TableHead className="h-12 w-20 bg-muted/50 text-sm font-semibold">
|
||||
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_STATUS)}
|
||||
</TableHead>
|
||||
<TableHead className="w-32 bg-gray-50 font-semibold text-gray-700">
|
||||
<TableHead className="h-12 w-32 bg-muted/50 text-sm font-semibold">
|
||||
{getText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_ACTIONS)}
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
@@ -199,8 +199,8 @@ export const MenuTable: React.FC<MenuTableProps> = ({
|
||||
const parentObjId = menu.parent_obj_id || menu.PARENT_OBJ_ID || "";
|
||||
|
||||
return (
|
||||
<TableRow key={`${objid}-${lev}-${parentObjId}`} className="hover:bg-gray-50">
|
||||
<TableCell>
|
||||
<TableRow key={`${objid}-${lev}-${parentObjId}`} className="transition-colors hover:bg-muted/50">
|
||||
<TableCell className="h-16">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedMenus.has(objid)}
|
||||
@@ -209,21 +209,21 @@ export const MenuTable: React.FC<MenuTableProps> = ({
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-left">
|
||||
<TableCell className="h-16 text-left text-sm">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-mono text-sm text-gray-400">{getTreeIndentation(lev)}</span>
|
||||
<span className="font-mono text-sm text-muted-foreground">{getTreeIndentation(lev)}</span>
|
||||
<span
|
||||
className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${getLevelBadge(lev)}`}
|
||||
>
|
||||
L{lev}
|
||||
</span>
|
||||
<div className="flex items-center space-x-1">
|
||||
<span className="font-medium text-gray-900">{getDisplayText(menu)}</span>
|
||||
<span className="text-sm font-medium text-foreground">{getDisplayText(menu)}</span>
|
||||
{/* 하위 메뉴가 있는 경우에만 토글 버튼 표시 */}
|
||||
{menus.some((m) => (m.parent_obj_id || m.PARENT_OBJ_ID) === objid) && (
|
||||
<button
|
||||
onClick={() => onToggleExpand(objid)}
|
||||
className="ml-2 rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
|
||||
className="ml-2 rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
>
|
||||
<svg
|
||||
className={`h-4 w-4 transition-transform ${expandedMenus.has(objid) ? "rotate-90" : ""}`}
|
||||
@@ -238,22 +238,22 @@ export const MenuTable: React.FC<MenuTableProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{seq}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">
|
||||
<TableCell className="h-16 text-sm">{seq}</TableCell>
|
||||
<TableCell className="h-16 text-sm text-muted-foreground">
|
||||
<div className="flex flex-col">
|
||||
<span
|
||||
className={`font-medium ${companyName && companyName !== getText(MENU_MANAGEMENT_KEYS.STATUS_UNSPECIFIED) ? "text-green-600" : "text-gray-500"}`}
|
||||
className={`font-medium ${companyName && companyName !== getText(MENU_MANAGEMENT_KEYS.STATUS_UNSPECIFIED) ? "text-success" : "text-muted-foreground"}`}
|
||||
>
|
||||
{companyCode === "*"
|
||||
? getText(MENU_MANAGEMENT_KEYS.FILTER_COMPANY_COMMON)
|
||||
: companyName || getText(MENU_MANAGEMENT_KEYS.STATUS_UNSPECIFIED)}
|
||||
</span>
|
||||
{companyCode && companyCode !== "" && (
|
||||
<span className="font-mono text-xs text-gray-400">{companyCode}</span>
|
||||
<span className="font-mono text-xs text-muted-foreground/70">{companyCode}</span>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-left text-sm text-muted-foreground">
|
||||
<TableCell className="h-16 text-left text-sm text-muted-foreground">
|
||||
<div className="max-w-[200px]">
|
||||
{menuUrl ? (
|
||||
<div className="group relative">
|
||||
@@ -269,20 +269,20 @@ export const MenuTable: React.FC<MenuTableProps> = ({
|
||||
{menuUrl}
|
||||
</div>
|
||||
{menuUrl.length > 30 && (
|
||||
<div className="absolute top-full left-0 z-20 mt-1 hidden max-w-xs rounded-lg bg-gray-900 p-3 text-sm text-white shadow-lg group-hover:block">
|
||||
<div className="mb-2 text-xs text-gray-300">Full URL</div>
|
||||
<div className="break-all text-white">{menuUrl}</div>
|
||||
<div className="mt-2 text-xs text-gray-400">Click to copy</div>
|
||||
<div className="absolute top-full left-0 z-20 mt-1 hidden max-w-xs rounded-lg bg-popover p-3 text-sm text-popover-foreground shadow-lg group-hover:block">
|
||||
<div className="mb-2 text-xs text-muted-foreground">Full URL</div>
|
||||
<div className="break-all">{menuUrl}</div>
|
||||
<div className="mt-2 text-xs text-muted-foreground">Click to copy</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
<span className="text-muted-foreground/70">-</span>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{getStatusBadge(status, objid)}</TableCell>
|
||||
<TableCell>
|
||||
<TableCell className="h-16 text-sm">{getStatusBadge(status, objid)}</TableCell>
|
||||
<TableCell className="h-16">
|
||||
<div className="flex flex-nowrap gap-1">
|
||||
{lev === 1 && (
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user