개발자 권한을 페이지별로 선택/부여 가능하도록 개선

devfront/src/features/clients/ClientGeneralPage.tsx

@@ -30,6 +30,7 @@ import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
 import { Switch } from "../../components/ui/switch";
 import { Textarea } from "../../components/ui/textarea";
+import { DeveloperAccessRequestCard } from "../../components/common/DeveloperAccessRequestCard";
 import { toast } from "../../components/ui/use-toast";
 import type {
   ClientStatus,
@@ -54,6 +55,7 @@ import { t } from "../../lib/i18n";
 import { resolveProfileRole } from "../../lib/role";
 import { cn } from "../../lib/utils";
 import { fetchMe, type UserProfile } from "../auth/authApi";
+import { useDeveloperAccessGate } from "../developer-access/developerAccessGate";
 import { ClientDetailTabs } from "./ClientDetailTabs";
 import { AllowedTenantBadge } from "./components/AllowedTenantBadge";
 
@@ -358,16 +360,27 @@ function ClientGeneralPage() {
   const hasAccessToken = Boolean(auth.user?.access_token);
   const clientId = params.id;
   const isCreate = !clientId;
-  const systemRole = resolveProfileRole(
-    auth.user?.profile as Record<string, unknown> | undefined,
-  );
-  const { data: me } = useQuery<UserProfile>({
+  const userProfile = auth.user?.profile as Record<string, unknown> | undefined;
+  const systemRole = resolveProfileRole(userProfile);
+  const { data: me, isLoading: isLoadingMe } = useQuery<UserProfile>({
     queryKey: ["userMe"],
     queryFn: fetchMe,
     enabled: hasAccessToken,
   });
   const currentUserId = me?.id ?? auth.user?.profile.sub;
   const effectiveSystemRole = me?.role?.trim() || systemRole;
+  const {
+    hasDeveloperAccess: hasClientCreateAccess,
+    isDeveloperRequestPending,
+    canRequestDeveloperAccess,
+    isLoadingDeveloperAccessGate,
+  } = useDeveloperAccessGate({
+    hasAccessToken,
+    profileRole: effectiveSystemRole,
+    tenantId: userProfile?.tenant_id as string | undefined,
+    requiredPages: ["client_create"],
+    isLoadingIdentity: isLoadingMe,
+  });
   const { data, isLoading, error } = useQuery({
     queryKey: ["client", clientId],
     queryFn: () => fetchClient(clientId as string),
@@ -1161,10 +1174,44 @@ function ClientGeneralPage() {
     }
   };
 
-  if (!isCreate && isLoading) {
+  if ((isCreate && isLoadingDeveloperAccessGate) || (!isCreate && isLoading)) {
     return (
       <div className="p-8 text-center">
-        {t("msg.dev.clients.general.loading", "Loading client...")}
+        {t(
+          "msg.dev.clients.general.loading",
+          isCreate ? "Loading client creation..." : "Loading client...",
+        )}
+      </div>
+    );
+  }
+  if (isCreate && !hasClientCreateAccess) {
+    return (
+      <div className="p-8">
+        <div className="mx-auto max-w-2xl">
+          <DeveloperAccessRequestCard
+            title={t("ui.dev.clients.general.title_create", "Create Client")}
+            isPending={isDeveloperRequestPending}
+            canRequest={canRequestDeveloperAccess}
+            pendingMessage={t(
+              "msg.dev.clients.general.create_pending",
+              "개발자 권한 신청을 검토 중입니다.",
+            )}
+            deniedMessage={t(
+              "msg.dev.clients.general.create_forbidden",
+              "이 RP를 생성할 권한이 없습니다.",
+            )}
+            pendingDetailMessage={t(
+              "msg.dev.clients.general.create_pending_detail",
+              "super admin이 승인하면 연동 앱을 추가할 수 있습니다.",
+            )}
+            deniedDetailMessage={t(
+              "msg.dev.clients.general.create_forbidden_detail",
+              "개발자 권한 신청에서 연동 앱 추가 권한을 선택한 뒤 승인받아주세요.",
+            )}
+            actionLabel={t("ui.dev.welcome.btn_request", "개발자 등록 신청하기")}
+            onAction={() => navigate("/developer-requests")}
+          />
+        </div>
       </div>
     );
   }