대시보드 기능 추가

devfront/src/features/dashboard/DashboardPage.tsx

@@ -9,15 +9,19 @@ import {
   ShieldCheck,
 } from "lucide-react";
 import { type ReactNode, useMemo, useState } from "react";
+import { useAuth } from "react-oidc-context";
+import { useNavigate } from "react-router-dom";
 import {
   type ClientSummary,
   fetchClients,
+  fetchDeveloperRequestStatus,
   fetchDevRPUsageDaily,
   fetchDevStats,
   type RPUsageDailyMetric,
   type RPUsagePeriod,
 } from "../../lib/devApi";
 import { t } from "../../lib/i18n";
+import { resolveProfileRole } from "../../lib/role";
 
 type ClientDistribution = {
   activeClients: number;
@@ -141,8 +145,7 @@ function summarizeSeries(rows: RPUsageDailyMetric[]): SeriesSummary[] {
         right.loginRequests +
         right.otherRequests -
         (left.loginRequests + left.otherRequests),
-    )
-    .slice(0, 5);
+    );
 }
 
 function buildMultiLineSeries(rows: RPUsageDailyMetric[]): MultiLineSeries[] {
@@ -222,6 +225,17 @@ function getISOWeekThursday(year: number, month: number, day: number) {
   return date;
 }
 
+function formatDate(value?: string) {
+  if (!value) {
+    return "-";
+  }
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) {
+    return value;
+  }
+  return parsed.toLocaleDateString();
+}
+
 function formatPeriodLabel(date: string, period: RPUsagePeriod) {
   const parts = parseDateParts(date);
   if (!parts) {
@@ -280,20 +294,17 @@ function RPUsageMixedChart({
   const colors = palette ?? usageChartPalettes[0];
   const daily = summarizeDaily(rows);
   const series = summarizeSeries(rows);
+  const topSeries = series.slice(0, 5);
+  const seriesByKey = new Map(series.map((item) => [item.key, item]));
   const chartWidth = 720;
   const chartHeight = 230;
   const padX = 48;
-  const padTop = 32;
+  const padTop = 40;
   const padBottom = 34;
   const innerWidth = chartWidth - padX * 2;
   const innerHeight = chartHeight - padTop - padBottom;
-  const maxValue = Math.max(
-    1,
-    ...daily.map((point) => point.loginRequests + point.otherRequests),
-    ...daily.map((point) => point.loginRequests),
-  );
+  const maxValue = Math.max(1, ...daily.map((point) => point.loginRequests));
   const slot = daily.length > 0 ? innerWidth / daily.length : innerWidth;
-  const barWidth = Math.min(28, Math.max(10, slot * 0.42));
   const y = (value: number) =>
     padTop + innerHeight - (value / maxValue) * innerHeight;
   const x = (index: number) => padX + slot * index + slot / 2;
@@ -325,40 +336,6 @@ function RPUsageMixedChart({
           className="h-[235px] min-w-[720px] w-full"
         >
           <title>{t("ui.dev.dashboard.chart.aria", "RP 요청 현황")}</title>
-          <g transform="translate(510 10)">
-            <rect
-              x="0"
-              y="3"
-              width="10"
-              height="10"
-              rx="2"
-              fill={colors.bar}
-              fillOpacity="0.7"
-            />
-            <text x="16" y="12" className="fill-muted-foreground text-[11px]">
-              {t("ui.dev.dashboard.chart.other_requests", "기타 요청")}
-            </text>
-            {!multiLinePoints || multiLinePoints.length === 0 ? (
-              <>
-                <line
-                  x1="78"
-                  x2="98"
-                  y1="8"
-                  y2="8"
-                  stroke={colors.line}
-                  strokeWidth="3"
-                  strokeLinecap="round"
-                />
-                <text
-                  x="104"
-                  y="12"
-                  className="fill-muted-foreground text-[11px]"
-                >
-                  {t("ui.dev.dashboard.chart.login_requests", "로그인 요청")}
-                </text>
-              </>
-            ) : null}
-          </g>
           {[0, 0.25, 0.5, 0.75, 1].map((ratio) => {
             const gridY = padTop + innerHeight * ratio;
             const label = Math.round(maxValue * (1 - ratio));
@@ -386,18 +363,8 @@ function RPUsageMixedChart({
           })}
           {daily.map((point, index) => {
             const center = x(index);
-            const otherHeight = (point.otherRequests / maxValue) * innerHeight;
             return (
               <g key={point.date}>
-                <rect
-                  x={center - barWidth / 2}
-                  y={padTop + innerHeight - otherHeight}
-                  width={barWidth}
-                  height={otherHeight}
-                  rx="3"
-                  fill={colors.bar}
-                  fillOpacity="0.7"
-                />
                 <text
                   x={center}
                   y={chartHeight - 12}
@@ -459,30 +426,56 @@ function RPUsageMixedChart({
         </svg>
       </div>
 
+      <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+        <span>
+          {t("ui.dev.dashboard.chart.x_axis", "X축: 기간")}
+        </span>
+        <span>
+          {t("ui.dev.dashboard.chart.y_axis", "Y축: 로그인 요청 수")}
+        </span>
+      </div>
+
       {multiLinePoints && multiLinePoints.length > 0 ? (
         <div className="grid gap-x-6 gap-y-2 border-t border-border/60 pt-2 text-xs md:grid-cols-2 xl:grid-cols-3">
           {multiLinePoints.map((item) => (
-            <div key={item.key} className="flex min-w-0 items-center gap-2">
+            <div
+              key={item.key}
+              className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1"
+            >
               <span
                 className="h-2.5 w-2.5 rounded-full"
                 style={{ backgroundColor: item.color.line }}
               />
-              <span className="truncate font-medium">{item.clientLabel}</span>
+              <span className="font-medium">{item.clientLabel}</span>
+              {seriesByKey.get(item.key) ? (
+                <span className="whitespace-nowrap tabular-nums text-muted-foreground">
+                  {t(
+                    "ui.dev.dashboard.chart.series",
+                    "로그인 {{login}} / 사용자 {{subjects}}",
+                    {
+                      login: seriesByKey.get(item.key)!.loginRequests.toLocaleString(),
+                      subjects: seriesByKey.get(item.key)!.uniqueSubjects.toLocaleString(),
+                    },
+                  )}
+                </span>
+              ) : null}
             </div>
           ))}
         </div>
-      ) : series.length > 0 ? (
+      ) : topSeries.length > 0 ? (
         <div className="grid gap-x-6 gap-y-2 border-t border-border/60 pt-2 text-xs md:grid-cols-2 xl:grid-cols-3">
-          {series.map((item) => (
-            <div key={item.key} className="flex min-w-0 items-center gap-2">
-              <span className="truncate font-medium">{item.clientLabel}</span>
-              <span className="ml-auto whitespace-nowrap tabular-nums">
+          {topSeries.map((item) => (
+            <div
+              key={item.key}
+              className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1"
+            >
+              <span className="font-medium">{item.clientLabel}</span>
+              <span className="whitespace-nowrap tabular-nums text-muted-foreground">
                 {t(
                   "ui.dev.dashboard.chart.series",
-                  "로그인 {{login}} / 기타 {{other}} / 사용자 {{subjects}}",
+                  "로그인 {{login}} / 사용자 {{subjects}}",
                   {
                     login: item.loginRequests.toLocaleString(),
-                    other: item.otherRequests.toLocaleString(),
                     subjects: item.uniqueSubjects.toLocaleString(),
                   },
                 )}
@@ -496,9 +489,23 @@ function RPUsageMixedChart({
 }
 
 function DashboardPage() {
+  const navigate = useNavigate();
+  const auth = useAuth();
+  const hasAccessToken = Boolean(auth.user?.access_token);
+  const userProfile = auth.user?.profile as Record<string, unknown> | undefined;
+  const role = resolveProfileRole(userProfile);
+  const tenantId = userProfile?.tenant_id as string | undefined;
   const [period, setPeriod] = useState<RPUsagePeriod>("day");
   const [selectedClientIds, setSelectedClientIds] = useState<string[]>([]);
   const usageDays = period === "day" ? 14 : period === "week" ? 84 : 90;
+  const {
+    data: requestStatus,
+    isLoading: isLoadingRequestStatus,
+  } = useQuery({
+    queryKey: ["developer-request", tenantId],
+    queryFn: () => fetchDeveloperRequestStatus(tenantId),
+    enabled: hasAccessToken && role === "user",
+  });
   const statsQuery = useQuery({
     queryKey: ["dev-dashboard-stats"],
     queryFn: fetchDevStats,
@@ -520,6 +527,17 @@ function DashboardPage() {
   });
 
   const clients = clientsQuery.data?.items ?? [];
+  const hasDeveloperAccess =
+    role === "super_admin" ||
+    role === "tenant_admin" ||
+    role === "rp_admin" ||
+    requestStatus?.status === "approved";
+  const isDeveloperRequestPending = requestStatus?.status === "pending";
+  const canRequestDeveloperAccess =
+    (role === "user" || role === "tenant_member") &&
+    !isLoadingRequestStatus &&
+    !hasDeveloperAccess &&
+    !isDeveloperRequestPending;
   const distribution = useMemo(
     () => buildClientDistribution(clients),
     [clients],
@@ -607,6 +625,68 @@ function DashboardPage() {
     setSelectedClientIds([]);
   };
 
+  if (
+    (role === "user" || role === "tenant_member") &&
+    isLoadingRequestStatus
+  ) {
+    return (
+      <div className="p-8 text-center">
+        {t("ui.common.loading", "Loading...")}
+      </div>
+    );
+  }
+
+  if (!hasDeveloperAccess) {
+    return (
+      <div className="rounded-xl border border-border/60 bg-card p-8 text-center">
+        <div className="space-y-3">
+          <h2 className="text-2xl font-semibold tracking-tight">
+            {t("ui.dev.nav.overview", "개요")}
+          </h2>
+          <p className="font-medium text-foreground">
+            {isDeveloperRequestPending
+              ? t(
+                  "msg.dev.dashboard.access_pending",
+                  "개발자 권한 신청을 검토 중입니다.",
+                )
+              : t(
+                  "msg.dev.dashboard.access_denied",
+                  "개요는 개발자 권한이 있어야 볼 수 있습니다.",
+                )}
+          </p>
+          <p className="text-sm text-muted-foreground">
+            {isDeveloperRequestPending
+              ? t(
+                  "msg.dev.dashboard.access_pending_detail",
+                  "super admin이 승인하면 개요와 개발자 기능을 사용할 수 있습니다.",
+                )
+              : t(
+                  "msg.dev.dashboard.access_denied_detail",
+                  "개발자 권한 신청 페이지에서 신청을 등록한 뒤 승인을 받아주세요.",
+                )}
+          </p>
+          {(isDeveloperRequestPending || canRequestDeveloperAccess) && (
+            <button
+              type="button"
+              className="font-bold text-primary hover:underline"
+              onClick={() => navigate("/developer-requests")}
+            >
+              {isDeveloperRequestPending
+                ? t(
+                    "ui.dev.nav.developer_request",
+                    "개발자 권한 신청",
+                  )
+                : t(
+                    "ui.dev.welcome.btn_request",
+                    "개발자 등록 신청하기",
+                  )}
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-4 animate-in fade-in duration-500">
       <div className="flex flex-wrap items-end justify-between gap-4">
@@ -730,7 +810,7 @@ function DashboardPage() {
         )}
       </section>
 
-      <div className="grid gap-4 lg:grid-cols-[1.1fr,0.9fr]">
+      <div className="grid gap-4 lg:grid-cols-[0.9fr,1.1fr]">
         <section className="rounded-xl border border-border/60 bg-card p-6">
           <div className="flex items-center gap-2">
             <Layers3 size={18} className="text-primary" />
@@ -744,10 +824,10 @@ function DashboardPage() {
           <p className="mt-1 text-sm text-muted-foreground">
             {t(
               "msg.dev.dashboard.distribution.description",
-              "애플리케이션 유형과 headless login 사용 현황을 빠르게 확인합니다.",
+              "애플리케이션 유형 분포와 server side app의 headless login 사용 현황을 빠르게 확인합니다.",
             )}
           </p>
-          <div className="mt-4 grid gap-3 sm:grid-cols-3">
+          <div className="mt-4 grid gap-3 sm:grid-cols-2">
             <div className="rounded-xl border border-border/60 bg-secondary/30 p-4">
               <p className="text-sm text-muted-foreground">
                 {t("ui.dev.dashboard.distribution.private", "Server side App")}
@@ -755,6 +835,15 @@ function DashboardPage() {
               <p className="mt-2 text-2xl font-semibold tabular-nums">
                 {distribution.privateClients.toLocaleString()}
               </p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {t(
+                  "ui.dev.dashboard.distribution.headless_hint",
+                  "이 중 Headless Login 사용 {{count}}",
+                  {
+                    count: distribution.headlessClients.toLocaleString(),
+                  },
+                )}
+              </p>
             </div>
             <div className="rounded-xl border border-border/60 bg-secondary/30 p-4">
               <p className="text-sm text-muted-foreground">
@@ -764,14 +853,6 @@ function DashboardPage() {
                 {distribution.pkceClients.toLocaleString()}
               </p>
             </div>
-            <div className="rounded-xl border border-border/60 bg-secondary/30 p-4">
-              <p className="text-sm text-muted-foreground">
-                {t("ui.dev.dashboard.distribution.headless", "Headless Login")}
-              </p>
-              <p className="mt-2 text-2xl font-semibold tabular-nums">
-                {distribution.headlessClients.toLocaleString()}
-              </p>
-            </div>
           </div>
         </section>
 
@@ -803,7 +884,7 @@ function DashboardPage() {
                   className="flex items-center justify-between gap-3 rounded-lg border border-border/40 px-3 py-2"
                 >
                   <div className="min-w-0">
-                    <p className="truncate font-medium">
+                    <p className="truncate font-semibold">
                       {client.name || t("ui.dev.clients.untitled", "Untitled")}
                     </p>
                     <p className="truncate text-xs text-muted-foreground">
@@ -828,6 +909,10 @@ function DashboardPage() {
                           ? t("ui.dev.clients.status.inactive", "비활성")
                           : client.status || "-"}
                     </p>
+                    <p>
+                      {t("ui.dev.clients.table.created_at", "생성일")}{" "}
+                      {formatDate(client.createdAt)}
+                    </p>
                   </div>
                 </div>
               ))