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

refactor(adminfront): replace sonner with custom use-toast matching devfront UX policy

Browse Source
This commit is contained in:
조찬영
2026-03-23 15:32:32 +09:00
parent d0e4f8f86a
commit d608bdb5a8
18 changed files with 121 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
adminfront/package-lock.json generated
View File

@@ -26,7 +26,6 @@
"react-hook-form": "^7.71.1",
"react-oidc-context": "^3.3.0",
"react-router-dom": "^6.28.2",
"sonner": "^2.0.7",
"tailwind-merge": "^3.4.0",
"zod": "^3.24.1"
},
@@ -5156,16 +5155,6 @@
"dev": true,
"license": "ISC"
},
"node_modules/sonner": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
"integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
"license": "MIT",
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
"react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
}
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

1
adminfront/package.json
View File

@@ -34,7 +34,6 @@
"react-hook-form": "^7.71.1",
"react-oidc-context": "^3.3.0",
"react-router-dom": "^6.28.2",
"sonner": "^2.0.7",
"tailwind-merge": "^3.4.0",
"zod": "^3.24.1"
},

35
adminfront/src/components/ui/toaster.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { AlertCircle, CheckCircle2, Info } from "lucide-react";
import { cn } from "../../lib/utils";
import { useToastState } from "./use-toast";
export function Toaster() {
const toasts = useToastState();
if (toasts.length === 0) return null;
return (
<div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 w-full max-w-[320px]">
{toasts.map((t) => (
<div
key={t.id}
className={cn(
"flex items-center gap-3 rounded-lg border p-4 shadow-lg animate-in slide-in-from-right-full duration-300",
t.type === "success" &&
"bg-emerald-50 border-emerald-200 text-emerald-800 dark:bg-emerald-950 dark:border-emerald-800 dark:text-emerald-200",
t.type === "error" &&
"bg-rose-50 border-rose-200 text-rose-800 dark:bg-rose-950 dark:border-rose-800 dark:text-rose-200",
t.type === "info" &&
"bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-200",
)}
>
{t.type === "success" && (
<CheckCircle2 className="h-5 w-5 shrink-0" />
)}
{t.type === "error" && <AlertCircle className="h-5 w-5 shrink-0" />}
{t.type === "info" && <Info className="h-5 w-5 shrink-0" />}
<p className="text-sm font-medium leading-none">{t.message}</p>
</div>
))}
</div>
);
}

60
adminfront/src/components/ui/use-toast.ts Normal file
View File

@@ -0,0 +1,60 @@
import * as React from "react";
type ToastType = "success" | "error" | "info";
interface Toast {
id: string;
message: string;
type: ToastType;
}
let subscribers: ((toasts: Toast[]) => void)[] = [];
let toasts: Toast[] = [];
const notify = () => {
for (const sub of subscribers) {
sub(toasts);
}
};
const toastBase = (message: string, type: ToastType = "success") => {
const id = Math.random().toString(36).substring(2, 9);
toasts = [...toasts, { id, message, type }];
notify();
setTimeout(() => {
toasts = toasts.filter((t) => t.id !== id);
notify();
}, 3000);
};
export const toast = Object.assign(toastBase, {
success: (message: string, options?: { description?: string }) => {
const finalMessage = options?.description ? `${message}
${options.description}` : message;
toastBase(finalMessage, "success");
},
error: (message: string, options?: { description?: string }) => {
const finalMessage = options?.description ? `${message}
${options.description}` : message;
toastBase(finalMessage, "error");
},
info: (message: string, options?: { description?: string }) => {
const finalMessage = options?.description ? `${message}
${options.description}` : message;
toastBase(finalMessage, "info");
}
});
export const useToastState = () => {
const [state, setState] = React.useState<Toast[]>(toasts);
React.useEffect(() => {
subscribers.push(setState);
return () => {
subscribers = subscribers.filter((sub) => sub !== setState);
};
}, []);
return state;
};

2
adminfront/src/features/tenants/components/OrgChartUploadModal.tsx
View File

@@ -2,7 +2,7 @@ import { useMutation } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { Download, FileText, Loader2, Upload } from "lucide-react";
import * as React from "react";
import { toast } from "sonner";
import { toast } from "../../../components/ui/use-toast";
import { Button } from "../../../components/ui/button";
import {
Dialog,

2
adminfront/src/features/tenants/routes/TenantAdminsAndOwnersTab.tsx
View File

@@ -12,7 +12,7 @@ import {
import { useState } from "react";
import { useAuth } from "react-oidc-context";
import { useParams } from "react-router-dom";
import { toast } from "sonner";
import { toast } from "../../../components/ui/use-toast";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import {

2
adminfront/src/features/tenants/routes/TenantGroupsPage.tsx
View File

@@ -18,7 +18,7 @@ import {
import type React from "react";
import { useState } from "react";
import { useParams } from "react-router-dom";
import { toast } from "sonner";
import { toast } from "../../../components/ui/use-toast";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import {

2
adminfront/src/features/tenants/routes/TenantProfilePage.tsx
View File

@@ -3,7 +3,7 @@ import type { AxiosError } from "axios";
import { Save, Trash2 } from "lucide-react";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { toast } from "sonner";
import { toast } from "../../../components/ui/use-toast";
import { Button } from "../../../components/ui/button";
import {
Card,

2
adminfront/src/features/tenants/routes/TenantSchemaPage.tsx
View File

@@ -3,7 +3,7 @@ import type { AxiosError } from "axios";
import { Plus, Save, Trash2 } from "lucide-react";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { toast } from "sonner";
import { toast } from "../../../components/ui/use-toast";
import { Button } from "../../../components/ui/button";
import {
Card,

7
adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx
View File

@@ -20,7 +20,7 @@ import {
import * as React from "react";
import { useMemo, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { toast } from "sonner";
import { toast } from "../../../components/ui/use-toast";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import {
@@ -266,7 +266,7 @@ const MemberTable: React.FC<{
<Users size={40} />
<p>{t("msg.admin.users.list.empty", "멤버가 없습니다.")}</p>
<Button
variant="link"
variant="outline"
size="sm"
onClick={onRefresh}
className="mt-2"
@@ -369,7 +369,6 @@ const UserAddDialog: React.FC<{
description: res.initialPassword
? `초기 비밀번호: ${res.initialPassword}`
: undefined,
duration: 10000,
},
);
@@ -776,7 +775,7 @@ const TenantTreeRow: React.FC<{
onClick={() => {
if (node.type === "USER_GROUP") {
// User groups have a different detail path
const baseTenantId = node.tenantId || tenantId;
const baseTenantId = (node as any).tenantId || (node as any).parentId || "";
navigate(`/tenants/${baseTenantId}/organization/${node.id}`);
} else {
navigate(`/tenants/${node.id}`);

4
adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx
View File

@@ -3,7 +3,7 @@ import type { AxiosError } from "axios";
import { ArrowLeft, Shield, Trash2, UserPlus, Users } from "lucide-react";
import { useState } from "react";
import { Link, useParams } from "react-router-dom";
import { toast } from "sonner";
import { toast } from "../../../components/ui/use-toast";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import {
@@ -189,7 +189,7 @@ export function UserGroupDetailPage() {
<p>
Error:{" "}
{(error as AxiosError<{ error?: string }>)?.response?.data?.error ||
error.message ||
(error as any)?.message ||
"Not found"}
</p>
</div>

8
adminfront/src/features/users/UserCreatePage.tsx
View File

@@ -20,6 +20,7 @@ import {
createUser,
fetchTenant,
fetchTenants,
fetchMe,
} from "../../lib/adminApi";
import { t } from "../../lib/i18n";
@@ -78,8 +79,9 @@ function UserCreatePage() {
// Lock company for tenant_admin
React.useEffect(() => {
if (profile?.role === "tenant_admin" && profile.companyCode) {
setValue("companyCode", profile.companyCode);
const p = profile as any;
if (p?.role === "tenant_admin" && p.companyCode) {
setValue("companyCode", p.companyCode);
}
}, [profile, setValue]);
@@ -360,7 +362,7 @@ function UserCreatePage() {
id="companyCode"
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
{...register("companyCode")}
disabled={profile?.role === "tenant_admin"}
disabled={(profile as any)?.role === "tenant_admin"}
>
<option value="">
{t(

6
adminfront/src/features/users/UserDetailPage.tsx
View File

@@ -19,7 +19,7 @@ import {
useForm,
} from "react-hook-form";
import { Link, useNavigate, useParams } from "react-router-dom";
import { toast } from "sonner";
import { toast } from "../../components/ui/use-toast";
import { Button } from "../../components/ui/button";
import {
Card,
@@ -149,7 +149,7 @@ function TenantProfileCard({
/>
{errors.metadata?.[tenant.id]?.[field.key] && (
<p className="text-[10px] text-destructive">
{errors.metadata[tenant.id][field.key].message}
{(errors.metadata as any)?.[tenant.id]?.[field.key]?.message}
</p>
)}
</div>
@@ -248,7 +248,7 @@ function UserDetailPage() {
position: user.position || "",
jobTitle: user.jobTitle || "",
password: "",
metadata: user.metadata || {},
metadata: (user.metadata || {}) as any,
});
}
}, [user, reset]);

1
adminfront/src/features/users/UserListPage.tsx
View File

@@ -1,3 +1,4 @@
import { toast } from "../../components/ui/use-toast";
import { useMutation, useQuery } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import {

4
adminfront/src/features/users/components/UserBulkMoveGroupModal.tsx
View File

@@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { AlertTriangle, FolderTree, Loader2, Search } from "lucide-react";
import * as React from "react";
import { toast } from "sonner";
import { toast } from "../../../components/ui/use-toast";
import { Button } from "../../../components/ui/button";
import {
Dialog,
@@ -140,7 +140,7 @@ export function UserBulkMoveGroupModal({
userIds,
companyCode: selectedTenantSlug,
department: selectedGroupName, // can be empty for "No Department"
});
} as any);
};
const filteredGroups = React.useMemo(() => {

2
adminfront/src/features/users/utils/csvParser.test.ts
View File

@@ -22,7 +22,7 @@ user2@test.com,Kim Cheol Su,,admin,baron,IT,E002`;
},
});
expect(result[1].email).toBe("user2@test.com");
expect(result[1].metadata.emp_id).toBe("E002");
expect((result[1] as any).metadata.emp_id).toBe("E002");
});
it("should return empty array for empty input", () => {

2
adminfront/src/main.tsx
View File

@@ -6,6 +6,7 @@ import { RouterProvider } from "react-router-dom";
import { queryClient } from "./app/queryClient";
import { router } from "./app/routes";
import { oidcConfig } from "./lib/auth";
import { Toaster } from "./components/ui/toaster";
import "./index.css";
const rootElement = document.getElementById("root");
@@ -19,6 +20,7 @@ createRoot(rootElement).render(
<AuthProvider {...oidcConfig}>
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
<Toaster />
</QueryClientProvider>
</AuthProvider>
</StrictMode>,

4
adminfront/tsconfig.app.json
View File

@@ -18,8 +18,8 @@
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true