관계 옵션별 정보 툴팁 추가

devfront/src/features/clients/ClientRelationsPage.tsx

@@ -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
+                      <div key={relation} className="relative">
-                        key={relation}
+                        <label
-                        className={`flex gap-3 rounded-xl border p-4 transition-all ${
+                          className={`flex gap-3 rounded-xl border p-4 transition-all ${
-                          disabled
+                            disabled
-                            ? "border-border/60 bg-muted/30 opacity-60"
+                              ? "border-border/60 bg-muted/30 opacity-60"
-                            : isSelected
+                              : isSelected
-                              ? "border-primary bg-primary/10 shadow-[0_0_0_1px_rgba(59,130,246,0.35)] ring-1 ring-primary/30"
+                                ? "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"
+                                : "border-border bg-background hover:border-primary/40 hover:bg-muted/20"
-                        }`}
+                          }`}
-                      >
+                        >
-                        <input
+                          <input
-                          type="checkbox"
+                            type="checkbox"
-                          className="mt-1 h-4 w-4 accent-primary"
+                            className="mt-1 h-4 w-4 accent-primary"
-                          checked={isSelected || disabled}
+                            checked={isSelected || disabled}
-                          disabled={disabled}
+                            disabled={disabled}
-                          onChange={() => handleRelationToggle(relation)}
+                            onChange={() => handleRelationToggle(relation)}
-                        />
+                          />
-                        <div className="space-y-1">
+                          <div className="flex-1 space-y-1">
-                          <div
+                            <div className="flex items-start justify-between gap-2">
-                            className={`text-sm font-semibold ${
+                              <div
-                              isSelected && !disabled ? "text-primary" : ""
+                                className={`text-sm font-semibold ${
-                            }`}
+                                  isSelected && !disabled ? "text-primary" : ""
-                          >
+                                }`}
-                            {relationLabel(relation)}
+                              >
+                                {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">
+                        </label>
-                            {relationDescription(relation)}
+                        
+                        {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 ${
+                      </div>
-                              isSelected && !disabled
-                                ? "text-primary/80"
-                                : "text-muted-foreground/80"
-                            }`}
-                          >
-                            {relation}
-                          </div>
-                        </div>
-                      </label>
                     );
                   })}
                 </div>
@@ -630,8 +671,26 @@ function ClientRelationsPage() {
                   <TableRow key={`${item.relation}:${item.subject}`}>
                     <TableCell>
                       <div className="space-y-1">
-                        <div className="font-medium">
+                        <div className="flex flex-col gap-1.5">
-                          {relationLabel(item.relation as RelationOption)}
+                          <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)}

devfront/src/locales/en.toml

@@ -1579,6 +1579,7 @@ user_search_placeholder = "Search by name or email..."
 [ui.dev.clients.relationships.option.admins]
 label = "RP Admin"
 description = "Full administrator relationship for RP operations."
+permits_info = "Has full administrative control over the RP, including config editing, secret management, JWKS, consents, and relationships."
 
 [ui.dev.clients.relationships.option.creator]
 label = "RP Creator"
@@ -1587,38 +1588,47 @@ description = "Marks the operator who created this RP."
 [ui.dev.clients.relationships.option.config_editor]
 label = "RP General Settings"
 description = "Edit the name, redirect URIs, and general metadata."
+permits_info = "Can modify general RP settings such as Name, Redirect URIs, Post-Logout URIs, and metadata."
 
 [ui.dev.clients.relationships.option.secret_viewer]
 label = "Secret View"
 description = "View the Client secret for this RP."
+permits_info = "Can view the Client Secret value in plain text."
 
 [ui.dev.clients.relationships.option.secret_rotator]
 label = "Secret Rotation"
 description = "Rotate and reissue the client secret."
+permits_info = "Can regenerate the Client Secret or expire and rotate existing secrets."
 
 [ui.dev.clients.relationships.option.jwks_viewer]
 label = "JWKS View"
 description = "View JWKS status, cache details, and key summaries."
+permits_info = "Can view JWKS status, cached key information, and key summaries."
 
 [ui.dev.clients.relationships.option.jwks_operator]
 label = "JWKS Operations"
 description = "Run operational actions such as refresh and revoke."
+permits_info = "Can perform JWKS operations such as manual refresh and key revocation."
 
 [ui.dev.clients.relationships.option.consent_viewer]
 label = "Consent View"
 description = "View consent grants for this RP."
+permits_info = "Can view the history of user consents granted to this RP."
 
 [ui.dev.clients.relationships.option.consent_revoker]
 label = "Consent Revoke"
 description = "Revoke consent grants for this RP."
+permits_info = "Can revoke or cancel user consents granted to this RP."
 
 [ui.dev.clients.relationships.option.relationship_viewer]
 label = "Relationship View"
 description = "View direct relations assigned to this RP."
+permits_info = "Can view the list of direct relationships and administrative roles assigned to this RP."
 
 [ui.dev.clients.relationships.option.audit_viewer]
 label = "Audit Log View"
 description = "View DevFront audit logs for this RP."
+permits_info = "Can view DevFront audit logs for all configuration changes and operations on this RP."
 
 [ui.dev.clients.relationships.option.status_operator]
 label = "Status Change"

devfront/src/locales/ko.toml

@@ -1578,6 +1578,7 @@ user_search_placeholder = "이름 또는 이메일 검색..."
 [ui.dev.clients.relationships.option.admins]
 label = "RP 관리자"
 description = "RP 운영 전반을 관리할 수 있는 관리자 관계입니다."
+permits_info = "RP 설정 수정, 시크릿 조회/재발급, JWKS 관리, 동의 조회/회수, 관계 조회/수정 등 모든 운영 권한을 가집니다."
 
 [ui.dev.clients.relationships.option.creator]
 label = "RP 생성자"
@@ -1586,38 +1587,47 @@ description = "이 RP를 생성한 운영 주체를 표시합니다."
 [ui.dev.clients.relationships.option.config_editor]
 label = "RP 일반 설정"
 description = "이름, Redirect URI, 메타데이터 같은 일반 설정을 수정합니다."
+permits_info = "RP 이름, Redirect URIs, 로그아웃 URI, 메타데이터 등 일반 설정을 수정할 수 있습니다."
 
 [ui.dev.clients.relationships.option.secret_viewer]
 label = "시크릿 조회"
 description = "이 RP의 Client secret을 조회합니다."
+permits_info = "RP의 Client Secret 값을 평문으로 확인할 수 있습니다."
 
 [ui.dev.clients.relationships.option.secret_rotator]
 label = "시크릿 재발급"
 description = "Client secret 재발급과 회전을 수행합니다."
+permits_info = "새로운 Client Secret을 발급하거나 기존 시크릿을 만료시키고 회전시킬 수 있습니다."
 
 [ui.dev.clients.relationships.option.jwks_viewer]
 label = "JWKS 조회"
 description = "JWKS 상태, 캐시 정보, 키 요약을 조회합니다."
+permits_info = "RP의 공개키 설정(JWKS) 상태와 캐시된 키 정보를 조회할 수 있습니다."
 
 [ui.dev.clients.relationships.option.jwks_operator]
 label = "JWKS 운영"
 description = "JWKS refresh, revoke 같은 운영 작업을 수행합니다."
+permits_info = "JWKS 캐시를 강제로 갱신하거나 등록된 키를 회수하는 등 키 관리를 수행할 수 있습니다."
 
 [ui.dev.clients.relationships.option.consent_viewer]
 label = "동의 조회"
 description = "이 RP의 consent 내역을 조회합니다."
+permits_info = "사용자가 이 RP에 부여한 개인정보 제공 동의 내역을 조회할 수 있습니다."
 
 [ui.dev.clients.relationships.option.consent_revoker]
 label = "동의 회수"
 description = "이 RP의 consent를 회수합니다."
+permits_info = "사용자의 동의 내역을 강제로 취소하거나 회수할 수 있습니다."
 
 [ui.dev.clients.relationships.option.relationship_viewer]
 label = "관계 조회"
 description = "이 RP에 부여된 direct relation을 조회합니다."
+permits_info = "이 RP에 어떤 사용자가 어떤 관리 권한을 가지고 있는지 목록을 조회할 수 있습니다."
 
 [ui.dev.clients.relationships.option.audit_viewer]
 label = "감사 로그 조회"
 description = "이 RP의 DevFront 감사 로그를 조회합니다."
+permits_info = "이 RP에서 발생한 모든 설정 변경 및 운영 작업에 대한 감사 로그를 조회할 수 있습니다."
 
 [ui.dev.clients.relationships.option.status_operator]
 label = "상태 변경"

devfront/src/locales/template.toml

@@ -1606,50 +1606,62 @@ user_search_placeholder = ""
 [ui.dev.clients.relationships.option.admins]
 label = ""
 description = ""
+permits_info = ""
 
 [ui.dev.clients.relationships.option.creator]
 label = ""
 description = ""
+permits_info = ""
 
 [ui.dev.clients.relationships.option.config_editor]
 label = ""
 description = ""
+permits_info = ""
 
 [ui.dev.clients.relationships.option.secret_viewer]
 label = ""
 description = ""
+permits_info = ""
 
 [ui.dev.clients.relationships.option.secret_rotator]
 label = ""
 description = ""
+permits_info = ""
 
 [ui.dev.clients.relationships.option.jwks_viewer]
 label = ""
 description = ""
+permits_info = ""
 
 [ui.dev.clients.relationships.option.jwks_operator]
 label = ""
 description = ""
+permits_info = ""
 
 [ui.dev.clients.relationships.option.consent_viewer]
 label = ""
 description = ""
+permits_info = ""
 
 [ui.dev.clients.relationships.option.consent_revoker]
 label = ""
 description = ""
+permits_info = ""
 
 [ui.dev.clients.relationships.option.relationship_viewer]
 label = ""
 description = ""
+permits_info = ""
 
 [ui.dev.clients.relationships.option.audit_viewer]
 label = ""
 description = ""
+permits_info = ""
 
 [ui.dev.clients.relationships.option.status_operator]
 label = ""
 description = ""
+permits_info = ""
 
 [ui.dev.clients.help]
 docs_body = ""