kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

관계 옵션별 정보 툴팁 추가

Browse Source
This commit is contained in:
김용연
2026-04-30 12:00:40 +09:00
parent 894565d87e
commit 67b3420d00
4 changed files with 131 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
devfront/src/features/clients/ClientRelationsPage.tsx
View File

@@ -1,6 +1,6 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { ArrowLeft, Link2, Plus, Trash2 } from "lucide-react";
import { ArrowLeft, Info, Link2, Plus, Trash2, X } from "lucide-react";
import { useDeferredValue, useMemo, useState } from "react";
import { useAuth } from "react-oidc-context";
import { Link, useParams } from "react-router-dom";
@@ -62,6 +62,10 @@ function relationDescription(relation: RelationOption) {
);
}
function relationPermitsInfo(relation: RelationOption) {
return t(`ui.dev.clients.relationships.option.${relation}.permits_info`, "");
}
function formatUserLabel(user: DevAssignableUser) {
const primary = user.name.trim() || user.email.trim();
return `${primary} (${user.email.trim()})`;
@@ -81,6 +85,7 @@ function ClientRelationsPage() {
null,
);
const [isSearchOpen, setIsSearchOpen] = useState(false);
const [infoRelation, setInfoRelation] = useState<RelationOption | null>(null);
const systemRole = resolveProfileRole(
auth.user?.profile as Record<string, unknown> | undefined,
@@ -307,6 +312,12 @@ function ClientRelationsPage() {
}
};
const handleInfoToggle = (event: React.MouseEvent, relation: RelationOption) => {
event.preventDefault();
event.stopPropagation();
setInfoRelation(prev => (prev === relation ? null : relation));
};
if (!clientId) {
return (
<div className="p-8 text-center">
@@ -498,46 +509,76 @@ function ClientRelationsPage() {
const disabled =
selectedUserExistingRelations.has(relation);
const isSelected = selectedRelations.includes(relation);
const isInfoVisible = infoRelation === relation;
return (
<label
key={relation}
className={`flex gap-3 rounded-xl border p-4 transition-all ${
disabled
? "border-border/60 bg-muted/30 opacity-60"
: isSelected
? "border-primary bg-primary/10 shadow-[0_0_0_1px_rgba(59,130,246,0.35)] ring-1 ring-primary/30"
: "border-border bg-background hover:border-primary/40 hover:bg-muted/20"
}`}
>
<input
type="checkbox"
className="mt-1 h-4 w-4 accent-primary"
checked={isSelected || disabled}
disabled={disabled}
onChange={() => handleRelationToggle(relation)}
/>
<div className="space-y-1">
<div
className={`text-sm font-semibold ${
isSelected && !disabled ? "text-primary" : ""
}`}
>
{relationLabel(relation)}
<div key={relation} className="relative">
<label
className={`flex gap-3 rounded-xl border p-4 transition-all ${
disabled
? "border-border/60 bg-muted/30 opacity-60"
: isSelected
? "border-primary bg-primary/10 shadow-[0_0_0_1px_rgba(59,130,246,0.35)] ring-1 ring-primary/30"
: "border-border bg-background hover:border-primary/40 hover:bg-muted/20"
}`}
>
<input
type="checkbox"
className="mt-1 h-4 w-4 accent-primary"
checked={isSelected || disabled}
disabled={disabled}
onChange={() => handleRelationToggle(relation)}
/>
<div className="flex-1 space-y-1">
<div className="flex items-start justify-between gap-2">
<div
className={`text-sm font-semibold ${
isSelected && !disabled ? "text-primary" : ""
}`}
>
{relationLabel(relation)}
</div>
<button
type="button"
className={`rounded-full p-0.5 transition-colors ${
isInfoVisible
? "text-primary"
: "text-muted-foreground/60 hover:text-primary"
}`}
onClick={(e) => handleInfoToggle(e, relation)}
>
{isInfoVisible ? (
<X className="h-3.5 w-3.5" />
) : (
<Info className="h-3.5 w-3.5" />
)}
</button>
</div>
<div className="text-xs text-muted-foreground">
{relationDescription(relation)}
</div>
<div
className={`text-[11px] uppercase tracking-wide ${
isSelected && !disabled
? "text-primary/80"
: "text-muted-foreground/80"
}`}
>
{relation}
</div>
</div>
<div className="text-xs text-muted-foreground">
{relationDescription(relation)}
</label>
{isInfoVisible && (
<div className="mt-2 animate-in fade-in slide-in-from-top-1 rounded-lg border border-primary/20 bg-primary/5 p-3 text-xs leading-relaxed text-foreground shadow-sm">
<div className="flex items-center gap-1.5 font-bold text-primary mb-1">
<Info className="h-3 w-3" />
{t("ui.common.info", "상세 권한 안내")}
</div>
{relationPermitsInfo(relation)}
</div>
<div
className={`text-[11px] uppercase tracking-wide ${
isSelected && !disabled
? "text-primary/80"
: "text-muted-foreground/80"
}`}
>
{relation}
</div>
</div>
</label>
)}
</div>
);
})}
</div>
@@ -630,8 +671,26 @@ function ClientRelationsPage() {
<TableRow key={`${item.relation}:${item.subject}`}>
<TableCell>
<div className="space-y-1">
<div className="font-medium">
{relationLabel(item.relation as RelationOption)}
<div className="flex flex-col gap-1.5">
<div className="flex items-center gap-2 font-medium">
<span>{relationLabel(item.relation as RelationOption)}</span>
<button
type="button"
className={`rounded-full p-0.5 transition-colors ${
infoRelation === item.relation
? "text-primary"
: "text-muted-foreground/60 hover:text-primary"
}`}
onClick={(e) => handleInfoToggle(e, item.relation as RelationOption)}
>
<Info className="h-3.5 w-3.5" />
</button>
</div>
{infoRelation === item.relation && (
<div className="animate-in fade-in slide-in-from-top-1 rounded border border-primary/20 bg-primary/5 p-2 text-[11px] leading-relaxed text-foreground max-w-[250px]">
{relationPermitsInfo(item.relation as RelationOption)}
</div>
)}
</div>
<div className="text-xs text-muted-foreground">
{relationDescription(item.relation as RelationOption)}