[Fix/#242] RBAC Role 판정 오류 수정 및 워크스페이스 선택 새로고침 유지

src/components/common/textarea/TextareaField.tsx

@@ -47,7 +47,7 @@ export default function TextareaField({
         rows={minRows}
         value={value}
         className={twMerge(
-          "w-full rounded-2xl px-5 py-4 ring-1 ring-primary-400/30 outline-none transition-colors duration-200 ease-out overflow-hidden placeholder:text-text-placeholder text-text-title font-body1",
+          "w-full rounded-2xl px-5 py-4 ring-1 ring-primary-400/30 outline-none transition-colors duration-200 ease-out overflow-hidden placeholder:text-text-placeholder text-text-title disabled:text-text-muted font-body1",
           disabled
             ? "bg-surface-200 cursor-not-allowed"
             : "hover:bg-surface-200 hover:ring-primary-400/40 focus-within:bg-surface-100 focus-within:ring-2 focus-within:ring-primary-400/50",

src/components/sidebar/Sidebar.tsx

@@ -1,5 +1,6 @@
 import type { Dispatch, FocusEvent, SetStateAction } from "react";
 import { useCallback, useMemo } from "react";
+import { useParams } from "react-router-dom";
 import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
@@ -12,6 +13,7 @@ import { isPathMatch } from "@/utils/navigation/pathMatch";
 import { applyWorkspacePathsToNav } from "@/utils/navigation/workspaceNavPaths";
 
 import { useComingSoon } from "@/hooks/common/useComingSoon";
+import { useCoreQuery } from "@/hooks/customQuery";
 import {
   needsIntegrationAttention,
   usePlatformConnections,
@@ -24,6 +26,7 @@ import { SidebarItem } from "./SidebarItem";
 import { SubMenu } from "./SubMenu";
 import { WorkspaceSwitcher } from "./WorkspaceSwitcher";
 
+import { getMyWorkspaces } from "@/api/workspace/org";
 import CollapseIcon from "@/assets/icon/chevron/chervon-left.svg?react";
 import ChevronIcon from "@/assets/icon/chevron/chevron-up.svg?react";
 import useWorkspaceStore from "@/store/useWorkspaceStore";
@@ -93,7 +96,26 @@ export default function Sidebar() {
   const { showComingSoon } = useComingSoon();
 
   const selectedOrgId = useWorkspaceStore((s) => s.selectedOrgId);
-  const myRole = useWorkspaceStore((s) => s.myRole);
+  const myRoleFromStore = useWorkspaceStore((s) => s.myRole);
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+  const { data: workspaces } = useCoreQuery(["my-workspaces"], getMyWorkspaces);
+
+  const myRole = useMemo(() => {
+    if (!workspaces) return null;
+
+    const parsedWorkspaceId = workspaceId ? Number(workspaceId) : null;
+    const getRoleByOrgId = (orgId: number | null) => {
+      if (orgId == null || !Number.isFinite(orgId) || orgId <= 0) return null;
+      return workspaces.find((w) => w.orgId === orgId)?.myRole ?? null;
+    };
+
+    return (
+      getRoleByOrgId(parsedWorkspaceId) ??
+      getRoleByOrgId(selectedOrgId) ??
+      myRoleFromStore
+    );
+  }, [workspaceId, selectedOrgId, workspaces, myRoleFromStore]);
+
   const { data: platformConnections } = usePlatformConnections();
   const showIntegrationsAttention = useMemo(
     () => needsIntegrationAttention(platformConnections),

src/layout/workspace/WorkspaceManageLayout.tsx

@@ -1,18 +1,50 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { Outlet, useParams } from "react-router-dom";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
 
+import { useCoreQuery } from "@/hooks/customQuery";
+
+import { getMyWorkspaces, saveSelectedWorkspace } from "@/api/workspace/org";
 import useWorkspaceStore from "@/store/useWorkspaceStore";
 
 export default function WorkspaceManageLayout() {
   const { workspaceId } = useParams();
   const setSelectedOrgId = useWorkspaceStore((s) => s.setSelectedOrgId);
 
-  useEffect(() => {
+  const queryClient = useQueryClient();
+  const setMyRole = useWorkspaceStore((s) => s.setMyRole);
+  const { data: workspaces } = useCoreQuery(["my-workspaces"], getMyWorkspaces);
+
+  const { mutate: saveWorkspace } = useMutation({
+    mutationFn: (orgId: number) => saveSelectedWorkspace(orgId),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["my-workspaces"] }),
+        queryClient.invalidateQueries({ queryKey: ["savedWorkspace"] }),
+      ]);
+    },
+    onError: () => {
+      toast.error("워크스페이스 변경에 실패했습니다. 다시 시도해 주세요");
+    },
+  });
+
+  const parsedWorkspaceId = useMemo(() => {
     const id = workspaceId ? Number(workspaceId) : NaN;
-    if (Number.isFinite(id) && id > 0) {
-      setSelectedOrgId(id);
-    }
-  }, [workspaceId, setSelectedOrgId]);
+    return Number.isFinite(id) && id > 0 ? id : null;
+  }, [workspaceId]);
+
+  useEffect(() => {
+    if (parsedWorkspaceId === null) return;
+    setSelectedOrgId(parsedWorkspaceId);
+    saveWorkspace(parsedWorkspaceId);
+  }, [parsedWorkspaceId, setSelectedOrgId, saveWorkspace]);
+
+  useEffect(() => {
+    if (parsedWorkspaceId == null || !workspaces) return;
+    const workspace = workspaces.find((w) => w.orgId === parsedWorkspaceId);
+    if (workspace) setMyRole(workspace.myRole);
+  }, [parsedWorkspaceId, workspaces, setMyRole]);
 
   return (
     <section className="flex w-full min-w-0 flex-col">

src/pages/workspace/WorkspaceSetting.tsx

@@ -5,7 +5,7 @@ import { toast } from "sonner";
 
 import type { IApiErrorResponse } from "@/types/common/common";
 
-import useIsAdmin from "@/hooks/auth/useIsAdmin";
+import { useCoreQuery } from "@/hooks/customQuery";
 
 import Button from "@/components/common/button/Button";
 import Card from "@/components/common/card/Card";
@@ -17,6 +17,7 @@ import WorkspaceSettingLoading from "@/components/workspace/WorkspaceSettingLoad
 
 import {
   deleteWorkspace,
+  getMyWorkspaces,
   getWorkspace,
   updateWorkspace,
 } from "@/api/workspace/org";
@@ -25,9 +26,15 @@ import WarnIcon from "@/assets/icon/common/warn-circle.svg?react";
 import { getImageUrl } from "@/lib/getImageUrl";
 
 export default function WorkspaceSetting() {
-  const isAdmin = useIsAdmin();
   const navigate = useNavigate();
   const { workspaceId } = useParams();
+
+  const { data: workspaces } = useCoreQuery(["my-workspaces"], getMyWorkspaces);
+  const isAdmin = useMemo(() => {
+    if (!workspaceId || !workspaces) return false;
+    const workspace = workspaces.find((w) => w.orgId === Number(workspaceId));
+    return workspace?.myRole === "ADMIN";
+  }, [workspaceId, workspaces]);
   const queryClient = useQueryClient();
 
   const orgId = useMemo(() => {
@@ -254,7 +261,7 @@ export default function WorkspaceSetting() {
                   <Button
                     variant="custom"
                     type="button"
-                    className="h-7! rounded-3xl border border-surface-400 bg-surface-100 px-4 font-body2 text-text-auth-sub transition-colors duration-200 ease-in-out hover:bg-surface-200"
+                    className="h-7! rounded-3xl border border-surface-400 bg-surface-100 px-4 font-body2 text-text-auth-sub transition-colors duration-200 ease-in-out hover:bg-surface-200 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-surface-100"
                     onClick={openFilePicker}
                     aria-label="로고 이미지 업로드 버튼"
                     disabled={!isAdmin || saving || deleting}
@@ -264,7 +271,7 @@ export default function WorkspaceSetting() {
                   <Button
                     variant="custom"
                     type="button"
-                    className="h-7! rounded-3xl border border-surface-400 bg-surface-100 px-4 font-body2 text-text-auth-sub transition-colors duration-200 ease-in-out hover:bg-surface-200"
+                    className="h-7! rounded-3xl border border-surface-400 bg-surface-100 px-4 font-body2 text-text-auth-sub transition-colors duration-200 ease-in-out hover:bg-surface-200 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-surface-100"
                     onClick={onResetLogo}
                     aria-label="로고 이미지 초기화 버튼"
                     disabled={!isAdmin || saving || deleting}

src/styles/base.css

@@ -18,6 +18,10 @@ body,
   padding: 0;
 }
 
-button {
+button:not(:disabled) {
   cursor: pointer;
 }
+
+button:disabled:not(.cursor-wait) {
+  cursor: not-allowed;
+}