조직도 줌 레벨 상향

2026-05-18 18:06:13 +09:00
parent 0b54992309
commit 9112c4fb36
44 changed files with 1000 additions and 1414 deletions
--- a/devfront/src/features/audit/AuditLogsPage.tsx
+++ b/devfront/src/features/audit/AuditLogsPage.tsx
@@ -2,17 +2,20 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import { Download, RefreshCw, Search } from "lucide-react";
 import * as React from "react";
+import { parseAuditDetails } from "../../../../common/core/audit";
+import { AuditLogTable } from "../../../../common/core/components/audit";
+import { PageHeader } from "../../../../common/core/components/page";
+import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
 import { ForbiddenMessage } from "../../components/common/ForbiddenMessage";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card";
-import { Input } from "../../components/ui/input";
 import {
-  parseAuditDetails,
-} from "../../../../common/core/audit";
-import { AuditLogTable } from "../../../../common/core/components/audit";
-import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
-import { PageHeader } from "../../../../common/core/components/page";
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import { Input } from "../../components/ui/input";
 import type { DevAuditLog } from "../../lib/devApi";
 import { fetchDevAuditLogs } from "../../lib/devApi";
 import { t } from "../../lib/i18n";
--- a/devfront/src/features/clients/ClientsPage.tsx
+++ b/devfront/src/features/clients/ClientsPage.tsx
@@ -4,19 +4,19 @@ import { BookOpenText, Filter, Plus, Search, X } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { useAuth } from "react-oidc-context";
 import { Link, useNavigate } from "react-router-dom";
+import { PageHeader } from "../../../../common/core/components/page";
 import {
  SortableTableHead,
  sortableTableHeadBaseClassName,
  sortableTableHeaderClassName,
 } from "../../../../common/core/components/sort";
-import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
-import { PageHeader } from "../../../../common/core/components/page";
 import {
  type SortConfig,
  type SortResolverMap,
  sortItems,
  toggleSort,
 } from "../../../../common/core/utils";
+import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
 import {
  commonTableShellClass,
  commonTableViewportClass,
@@ -330,61 +330,59 @@ function ClientsPage() {
            }
            advancedOpen={isAdvancedFilterOpen}
            advanced={
-              <>
-                <div className="flex flex-wrap items-center gap-6">
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground whitespace-nowrap">
-                      {t("ui.dev.clients.filter.type_label", "Type:")}
-                    </span>
-                    <select
-                      className="h-9 min-w-[140px] rounded-md border border-input bg-background px-3 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30"
-                      value={typeFilter}
-                      onChange={(e) => setTypeFilter(e.target.value)}
-                    >
-                      <option value="all">
-                        {t("ui.dev.clients.filter.type_all", "모든 유형")}
-                      </option>
-                      <option value="private">
-                        {t("ui.dev.clients.type.private", "Server side App")}
-                      </option>
-                      <option value="pkce">
-                        {t("ui.dev.clients.type.pkce", "PKCE")}
-                      </option>
-                    </select>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground whitespace-nowrap">
-                      {t("ui.dev.clients.consents.status_label", "Status:")}
-                    </span>
-                    <select
-                      className="h-9 min-w-[140px] rounded-md border border-input bg-background px-3 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30"
-                      value={statusFilter}
-                      onChange={(e) => setStatusFilter(e.target.value)}
-                    >
-                      <option value="all">
-                        {t("ui.dev.clients.filter.status_all", "모든 상태")}
-                      </option>
-                      <option value="active">
-                        {t("ui.common.status.active", "Active")}
-                      </option>
-                      <option value="inactive">
-                        {t("ui.common.status.inactive", "Inactive")}
-                      </option>
-                    </select>
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="ml-auto text-xs text-muted-foreground"
-                    onClick={() => {
-                      setTypeFilter("all");
-                      setStatusFilter("all");
-                    }}
+              <div className="flex flex-wrap items-center gap-6">
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground whitespace-nowrap">
+                    {t("ui.dev.clients.filter.type_label", "Type:")}
+                  </span>
+                  <select
+                    className="h-9 min-w-[140px] rounded-md border border-input bg-background px-3 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30"
+                    value={typeFilter}
+                    onChange={(e) => setTypeFilter(e.target.value)}
                  >
-                    {t("ui.common.reset", "초기화")}
-                  </Button>
+                    <option value="all">
+                      {t("ui.dev.clients.filter.type_all", "모든 유형")}
+                    </option>
+                    <option value="private">
+                      {t("ui.dev.clients.type.private", "Server side App")}
+                    </option>
+                    <option value="pkce">
+                      {t("ui.dev.clients.type.pkce", "PKCE")}
+                    </option>
+                  </select>
                </div>
-              </>
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground whitespace-nowrap">
+                    {t("ui.dev.clients.consents.status_label", "Status:")}
+                  </span>
+                  <select
+                    className="h-9 min-w-[140px] rounded-md border border-input bg-background px-3 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30"
+                    value={statusFilter}
+                    onChange={(e) => setStatusFilter(e.target.value)}
+                  >
+                    <option value="all">
+                      {t("ui.dev.clients.filter.status_all", "모든 상태")}
+                    </option>
+                    <option value="active">
+                      {t("ui.common.status.active", "Active")}
+                    </option>
+                    <option value="inactive">
+                      {t("ui.common.status.inactive", "Inactive")}
+                    </option>
+                  </select>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="ml-auto text-xs text-muted-foreground"
+                  onClick={() => {
+                    setTypeFilter("all");
+                    setStatusFilter("all");
+                  }}
+                >
+                  {t("ui.common.reset", "초기화")}
+                </Button>
+              </div>
            }
          />
        </CardHeader>
--- a/devfront/src/features/developer-request/DeveloperRequestPage.tsx
+++ b/devfront/src/features/developer-request/DeveloperRequestPage.tsx
@@ -9,6 +9,12 @@ import {
 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useAuth } from "react-oidc-context";
+import { PageHeader } from "../../../../common/core/components/page";
+import {
+  commonStickyTableHeaderClass,
+  commonTableShellClass,
+  commonTableViewportClass,
+} from "../../../../common/ui/table";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import {
@@ -27,12 +33,6 @@ import {
  TableHeader,
  TableRow,
 } from "../../components/ui/table";
-import {
-  commonStickyTableHeaderClass,
-  commonTableShellClass,
-  commonTableViewportClass,
-} from "../../../../common/ui/table";
-import { PageHeader } from "../../../../common/core/components/page";
 import { Textarea } from "../../components/ui/textarea";
 import {
  approveDeveloperRequest,
@@ -199,7 +199,9 @@ export default function DeveloperRequestPage() {
                        {t("ui.dev.request.table.user", "사용자")}
                      </TableHead>
                    )}
-                    <TableHead>{t("ui.dev.request.table.org", "소속")}</TableHead>
+                    <TableHead>
+                      {t("ui.dev.request.table.org", "소속")}
+                    </TableHead>
                    <TableHead>
                      {t("ui.dev.request.table.reason", "신청 사유")}
                    </TableHead>
@@ -237,7 +239,9 @@ export default function DeveloperRequestPage() {
                            </div>
                            {(req.phone || req.role) && (
                              <div className="mt-1 text-xs text-muted-foreground">
-                                {[req.phone, req.role].filter(Boolean).join(" / ")}
+                                {[req.phone, req.role]
+                                  .filter(Boolean)
+                                  .join(" / ")}
                              </div>
                            )}
                          </TableCell>
@@ -323,7 +327,10 @@ export default function DeveloperRequestPage() {
                                  disabled={isActionPending}
                                >
                                  <XCircle className="mr-1 h-3 w-3" />
-                                  {t("ui.dev.request.cancel_approval", "승인 취소")}
+                                  {t(
+                                    "ui.dev.request.cancel_approval",
+                                    "승인 취소",
+                                  )}
                                </Button>
                              </div>
                            ) : (
--- a/devfront/src/features/overview/GlobalOverviewPage.tsx
+++ b/devfront/src/features/overview/GlobalOverviewPage.tsx
@@ -11,6 +11,11 @@ import {
 import { useMemo, useState } from "react";
 import { useAuth } from "react-oidc-context";
 import { useNavigate } from "react-router-dom";
+import {
+  OverviewAxisNotes,
+  OverviewMetric,
+  OverviewSelectionChips,
+} from "../../../../common/core/components/overview";
 import {
  type ClientSummary,
  type RPUsageDailyMetric,
@@ -22,11 +27,6 @@ import {
 } from "../../lib/devApi";
 import { t } from "../../lib/i18n";
 import { resolveProfileRole } from "../../lib/role";
-import {
-  OverviewAxisNotes,
-  OverviewMetric,
-  OverviewSelectionChips,
-} from "../../../../common/core/components/overview";

 type ClientDistribution = {
  activeClients: number;