adminfront/devfront 상단바 프로필 메뉴 UI 통일

devfront/src/components/layout/AppLayout.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import {
   BadgeCheck,
+  ChevronDown,
   LogOut,
   Moon,
   NotebookTabs,
@@ -15,7 +16,6 @@ import { fetchMe } from "../../features/auth/authApi";
 import { t } from "../../lib/i18n";
 import { resolveProfileRole } from "../../lib/role";
 import LanguageSelector from "../common/LanguageSelector";
-import { Badge } from "../ui/badge";
 import { Toaster } from "../ui/toaster";
 
 const navItems = [
@@ -42,7 +42,10 @@ function AppLayout() {
     return stored === "dark" ? "dark" : "light";
   });
   const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
-  const [isRefreshingSession, setIsRefreshingSession] = useState(false);
+  const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(() => {
+    const stored = window.localStorage.getItem("baron_session_expiry_enabled");
+    return stored !== "false";
+  });
   const [nowMs, setNowMs] = useState(() => Date.now());
 
   const hasAccessToken = Boolean(auth.user?.access_token);
@@ -100,19 +103,19 @@ function AppLayout() {
   };
 
   const profileName =
+    profile?.name?.trim() ||
     auth.user?.profile?.name?.toString().trim() ||
     auth.user?.profile?.preferred_username?.toString().trim() ||
     auth.user?.profile?.nickname?.toString().trim() ||
     t("ui.dev.profile.unknown_name", "Unknown User");
   const profileEmail =
+    profile?.email?.trim() ||
     auth.user?.profile?.email?.toString().trim() ||
     t("ui.dev.profile.unknown_email", "unknown@example.com");
   const profileInitial = profileName.charAt(0).toUpperCase();
   const currentRole = resolveProfileRole(
     auth.user?.profile as Record<string, unknown> | undefined,
   );
-
-  // Use profile.role from API if available, otherwise fallback to local role
   const displayRoleKey = profile?.role || currentRole;
 
   const isDevConsoleAllowed = [
@@ -132,62 +135,55 @@ function AppLayout() {
 
   let sessionToneClass =
     "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
-  let sessionText = t("ui.dev.session.active", "세션 만료 시간 확인 중");
+  let sessionText = t("ui.dev.session.active", "세션 활성");
 
   if (remainingMs === null) {
     sessionToneClass = "border-border bg-card text-muted-foreground";
-    sessionText = t("ui.dev.session.unknown", "세션 만료 시간 확인 불가");
+    sessionText = t("ui.dev.session.unknown", "알 수 없음");
   } else if (remainingMs <= 0) {
     sessionToneClass =
       "border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300";
-    sessionText = t("ui.dev.session.expired", "세션 만료됨");
+    sessionText = t("ui.dev.session.expired", "세션 만료");
+  } else if (
+    remainingMinutes !== null &&
+    remainingSeconds !== null &&
+    remainingMinutes <= 5
+  ) {
+    sessionToneClass =
+      "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
+    sessionText = t(
+      "ui.dev.session.expiring",
+      "만료 임박: {{minutes}}분 {{seconds}}초 남음",
+      {
+        minutes: remainingMinutes,
+        seconds: remainingSeconds,
+      },
+    );
   } else {
-    if (
-      remainingMinutes !== null &&
-      remainingSeconds !== null &&
-      remainingMinutes <= 5
-    ) {
-      sessionToneClass =
-        "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
-      sessionText = t(
-        "ui.dev.session.expiring",
-        "만료 임박: {{minutes}}분 {{seconds}}초 남음",
-        {
-          minutes: remainingMinutes,
-          seconds: remainingSeconds,
-        },
-      );
-    } else {
-      sessionText = t(
-        "ui.dev.session.remaining",
-        "만료까지 {{minutes}}분 {{seconds}}초",
-        {
-          minutes: remainingMinutes ?? 0,
-          seconds: remainingSeconds ?? 0,
-        },
-      );
-    }
+    sessionText = t(
+      "ui.dev.session.remaining",
+      "만료 예정: {{minutes}}분 {{seconds}}초 남음",
+      {
+        minutes: remainingMinutes ?? 0,
+        seconds: remainingSeconds ?? 0,
+      },
+    );
   }
 
-  const handleRefreshSessionExpiry = async () => {
-    if (isRefreshingSession) {
-      return;
-    }
-    setIsRefreshingSession(true);
-    try {
-      await auth.signinSilent();
-      setNowMs(Date.now());
-      setIsProfileMenuOpen(false);
-    } catch (error) {
-      console.error("Failed to refresh session expiry:", error);
-    } finally {
-      setIsRefreshingSession(false);
-    }
+  const handleSessionExpiryToggle = () => {
+    setIsSessionExpiryEnabled((prev) => {
+      const next = !prev;
+      window.localStorage.setItem(
+        "baron_session_expiry_enabled",
+        String(next),
+      );
+      return next;
+    });
   };
 
   return (
     <div className="grid min-h-screen bg-background text-foreground md:grid-cols-[240px,1fr]">
-      <aside className="border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur flex flex-col justify-between">
+      <aside className="flex flex-col justify-between border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur">
         <div>
           <div className="flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6">
             <div className="flex items-center gap-3 md:flex-col md:items-start">
@@ -238,11 +234,11 @@ function AppLayout() {
         </div>
 
         <div>
-          <div className="px-3 pt-4 border-t border-border/50">
+          <div className="border-t border-border/50 px-3 pt-4">
             <button
               type="button"
               onClick={handleLogout}
-              className="w-full flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+              className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
             >
               <LogOut size={18} />
               <span>{t("ui.dev.nav.logout", "Logout")}</span>
@@ -284,14 +280,16 @@ function AppLayout() {
                   ? t("ui.common.theme_light", "Light")
                   : t("ui.common.theme_dark", "Dark")}
               </button>
-              <span
-                className={[
-                  "hidden rounded-full border px-3 py-2 text-xs font-medium md:inline-flex",
-                  sessionToneClass,
-                ].join(" ")}
-              >
-                {sessionText}
-              </span>
+              {isSessionExpiryEnabled ? (
+                <span
+                  className={[
+                    "hidden rounded-full border px-3 py-2 text-xs font-medium md:inline-flex",
+                    sessionToneClass,
+                  ].join(" ")}
+                >
+                  {sessionText}
+                </span>
+              ) : null}
               <div className="relative" ref={profileMenuRef}>
                 <button
                   type="button"
@@ -312,6 +310,10 @@ function AppLayout() {
                       {profileEmail}
                     </p>
                   </div>
+                  <ChevronDown
+                    size={14}
+                    className={`transition-transform duration-200 ${isProfileMenuOpen ? "rotate-180" : ""}`}
+                  />
                 </button>
                 {isProfileMenuOpen ? (
                   <div
@@ -321,7 +323,7 @@ function AppLayout() {
                     <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
                       {t("ui.dev.profile.menu_title", "Account")}
                     </p>
-                    <div className="mt-2 rounded-lg border border-border px-3 py-3 flex flex-col gap-2">
+                    <div className="mt-2 flex flex-col gap-2 rounded-lg border border-border px-3 py-3">
                       <div>
                         <p className="truncate text-sm font-semibold text-foreground">
                           {profileName}
@@ -331,22 +333,58 @@ function AppLayout() {
                         </p>
                       </div>
                       <div className="flex items-center pt-1">
-                        <Badge
-                          variant="outline"
-                          className="text-[10px] px-2 py-0"
-                        >
+                        <span className="inline-flex items-center rounded-full bg-sky-500/10 px-2.5 py-1 text-[10px] font-semibold text-sky-700 dark:text-sky-300">
                           {t(
-                            `ui.common.role.${displayRoleKey}`,
+                            `ui.admin.role.${displayRoleKey}`,
                             displayRoleKey.toUpperCase(),
                           )}
-                        </Badge>
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="mt-2 rounded-lg border border-border px-3 py-3">
+                      <div className="flex items-center justify-between gap-3">
+                        <div>
+                          <p className="text-sm font-medium text-foreground">
+                            {t("ui.dev.session.expired", "세션 만료")}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {isSessionExpiryEnabled
+                              ? sessionText
+                              : t(
+                                  "ui.dev.session.disabled",
+                                  "세션 만료 표시 비활성화",
+                                )}
+                          </p>
+                        </div>
+                        <button
+                          type="button"
+                          role="switch"
+                          aria-checked={isSessionExpiryEnabled}
+                          onClick={handleSessionExpiryToggle}
+                          className={[
+                            "relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition",
+                            isSessionExpiryEnabled
+                              ? "bg-primary"
+                              : "bg-muted",
+                          ].join(" ")}
+                        >
+                          <span
+                            className={[
+                              "inline-block h-5 w-5 rounded-full bg-white transition",
+                              isSessionExpiryEnabled
+                                ? "translate-x-5"
+                                : "translate-x-1",
+                            ].join(" ")}
+                          />
+                        </button>
                       </div>
                     </div>
 
                     <button
                       type="button"
                       role="menuitem"
-                      className="mt-2 w-full flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-foreground transition hover:bg-muted/20"
+                      className="mt-2 flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-foreground transition hover:bg-muted/20"
                       onClick={() => {
                         navigate("/profile");
                         setIsProfileMenuOpen(false);
@@ -355,22 +393,10 @@ function AppLayout() {
                       <UserIcon size={16} className="text-muted-foreground" />
                       <span>{t("ui.dev.profile.title", "내 정보")}</span>
                     </button>
-
                     <button
                       type="button"
                       role="menuitem"
-                      className="mt-2 w-full rounded-lg border border-border px-3 py-2 text-left text-sm text-foreground transition hover:bg-muted/20 disabled:cursor-not-allowed disabled:opacity-60"
-                      onClick={handleRefreshSessionExpiry}
-                      disabled={isRefreshingSession}
-                    >
-                      {isRefreshingSession
-                        ? t("ui.dev.session.refreshing", "Refreshing...")
-                        : t("ui.dev.session.refresh", "Refresh session expiry")}
-                    </button>
-                    <button
-                      type="button"
-                      role="menuitem"
-                      className="mt-2 w-full flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
+                      className="mt-2 flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
                       onClick={handleLogout}
                     >
                       <LogOut size={16} />
@@ -392,4 +418,3 @@ function AppLayout() {
 }
 
 export default AppLayout;
-// force reload