fix(rolesList): cross-tenant row 식별 + 메뉴 트리 스크롤 보강

cross-tenant fan-out 결과에서 회사 A·B 의 동일 objid 가 합본에 들어와
React key 중복 경고 발생 + isSelected 가 회사 구분 못 하던 문제.

- li key: role.objid → \`\${company_code}-\${objid}\` 조합으로 unique
- isSelected 비교: objid + company_code 둘 다 매칭
- selectedRole 유효성 체크(useEffect)에도 company_code 매칭 추가

추가:
- 메뉴 전체 트리구조에 자체 스크롤 (maxHeight: calc(100vh - 32rem))
- thead sticky top-0 + bg-muted (투명도 제거) → 스크롤 시 헤더 가려짐 해소

SUPER_ADMIN cross-tenant 정책 변경 없음 (모든 회사 합본 표시 유지),
React 식별만 정확해지는 fix.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hjjeong
2026-05-07 16:51:16 +09:00
parent b782bb298f
commit 3280be8bd4
@@ -180,7 +180,11 @@ export default function RolesPage() {
// 선택 유효성
useEffect(() => {
if (!selectedRole) return;
if (!roleGroups.find((r) => r.objid === selectedRole.objid)) {
if (
!roleGroups.find(
(r) => r.objid === selectedRole.objid && r.company_code === selectedRole.company_code,
)
) {
setSelectedRole(null);
}
}, [roleGroups, selectedRole]);
@@ -665,10 +669,12 @@ export default function RolesPage() {
) : (
<ul className="divide-y">
{filteredRoleGroups.map((role) => {
const isSelected = selectedRole?.objid === role.objid;
const isSelected =
selectedRole?.objid === role.objid &&
selectedRole?.company_code === role.company_code;
return (
<li
key={role.objid}
key={`${role.company_code ?? "_"}-${role.objid}`}
onClick={() => setSelectedRole(role)}
className={cn(
"group cursor-pointer p-2.5 transition-colors",
@@ -922,9 +928,9 @@ export default function RolesPage() {
</p>
) : (
<div className="overflow-x-auto">
<div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: "calc(100vh - 32rem)" }}>
<table className="w-full text-sm">
<thead className="bg-muted/40">
<thead className="bg-muted sticky top-0 z-10">
<tr>
<th className="py-2.5 pl-3 text-left text-xs font-semibold w-[40%]">