2.5 권한 기반 UI 노출 제어(빠른 액션/관리자 메뉴)

src/app/components/QuickActions.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { usePermission } from "@/lib/usePermission";
+
+export function QuickActions() {
+  const { can } = usePermission();
+  const canWrite = can("POST", "CREATE");
+  const isAdmin = can("ADMIN", "ADMINISTER") || can("BOARD", "MODERATE");
+  return (
+    <div style={{ display: "flex", gap: 8 }}>
+      {canWrite && <button>글쓰기</button>}
+      {isAdmin && <button>관리자</button>}
+    </div>
+  );
+}
+
+

src/app/page.tsx

@@ -1,8 +1,10 @@
 import Image from "next/image";
+import { QuickActions } from "@/app/components/QuickActions";
 
 export default function Home() {
   return (
     <div className="">
+      <QuickActions />
     </div>
   );
 }

todolist.txt

@@ -10,7 +10,7 @@
 2.2 권한 enum/매핑 정의(리소스/액션) o
 2.3 서버 권한 미들웨어 적용(API 보호 라우트 지정) o
 2.4 페이지/컴포넌트 가드 훅 구현(usePermission) o
-2.5 권한 기반 UI 노출 제어(빠른 액션/관리자 메뉴)
+2.5 권한 기반 UI 노출 제어(빠른 액션/관리자 메뉴) o
 
 [로그인/인증]
 3.1 로그인/가입 폼 검증(Zod) 및 오류 UX