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

adminfront/package-lock.json

@@ -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",

adminfront/package.json

@@ -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"
   },

adminfront/src/components/ui/toaster.tsx

@@ -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>
+  );
+}

adminfront/src/components/ui/use-toast.ts

@@ -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;
+};

adminfront/src/features/tenants/components/OrgChartUploadModal.tsx

@@ -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,

adminfront/src/features/tenants/routes/TenantAdminsAndOwnersTab.tsx

@@ -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 {

adminfront/src/features/tenants/routes/TenantGroupsPage.tsx

@@ -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 {

adminfront/src/features/tenants/routes/TenantProfilePage.tsx

@@ -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,

adminfront/src/features/tenants/routes/TenantSchemaPage.tsx

@@ -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,

adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx

@@ -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}`);

adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx

@@ -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>

adminfront/src/features/users/UserCreatePage.tsx

@@ -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) {
+    const p = profile as any;
-      setValue("companyCode", profile.companyCode);
+    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(

adminfront/src/features/users/UserDetailPage.tsx

@@ -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]);

adminfront/src/features/users/UserListPage.tsx

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

adminfront/src/features/users/components/UserBulkMoveGroupModal.tsx

@@ -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(() => {

adminfront/src/features/users/utils/csvParser.test.ts

@@ -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", () => {

adminfront/src/main.tsx

@@ -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>,

adminfront/tsconfig.app.json

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