@mandujs/mcp 0.12.2 → 0.13.0

package/src/resources/skills/mandu-ui/rules/ui-radix-patterns.md

@@ -1,213 +1,213 @@
----
-title: Radix UI Patterns
-impact: HIGH
-impactDescription: Accessible headless primitives for custom components
-tags: ui, radix, headless, primitives
----
-
-## Radix UI Patterns
-
-**Impact: HIGH (Accessible headless primitives for custom components)**
-
-Radix UI를 직접 사용하여 커스텀 컴포넌트를 만들 때의 패턴입니다.
-
-**설치:**
-
-```bash
-# 개별 패키지
-bun add @radix-ui/react-dialog
-bun add @radix-ui/react-dropdown-menu
-bun add @radix-ui/react-popover
-bun add @radix-ui/react-tabs
-bun add @radix-ui/react-tooltip
-```
-
-## Dialog 커스텀 구현
-
-```tsx
-// components/ui/custom-dialog.tsx
-"use client";
-
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = ({ className, ...props }) => (
-  <DialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out",
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-);
-
-const DialogContent = ({ className, children, ...props }) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      className={cn(
-        "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2",
-        "rounded-lg border bg-background p-6 shadow-lg",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-);
-
-export { Dialog, DialogTrigger, DialogContent, DialogClose };
-```
-
-## Dropdown Menu 패턴
-
-```tsx
-// components/ui/custom-dropdown.tsx
-"use client";
-
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { cn } from "@/lib/utils";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuContent = ({ className, sideOffset = 4, ...props }) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[side=bottom]:slide-in-from-top-2",
-        "data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-);
-
-const DropdownMenuItem = ({ className, ...props }) => (
-  <DropdownMenuPrimitive.Item
-    className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-      "focus:bg-accent focus:text-accent-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  />
-);
-
-export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem };
-```
-
-## Island에서 사용
-
-```tsx
-// app/user-menu/client.tsx
-"use client";
-
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from "@/components/ui/custom-dropdown";
-
-export function UserMenuIsland({ user }: { user: { name: string; avatar: string } }) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button className="flex items-center gap-2 rounded-full p-1 hover:bg-accent">
-          <img src={user.avatar} alt="" className="h-8 w-8 rounded-full" />
-          <span className="sr-only">User menu</span>
-        </button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onSelect={() => navigate("/profile")}>
-          Profile
-        </DropdownMenuItem>
-        <DropdownMenuItem onSelect={() => navigate("/settings")}>
-          Settings
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          onSelect={() => logout()}
-          className="text-destructive"
-        >
-          Logout
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-```
-
-## Tooltip 패턴
-
-```tsx
-// components/ui/tooltip.tsx
-"use client";
-
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { cn } from "@/lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = ({ className, sideOffset = 4, ...props }) => (
-  <TooltipPrimitive.Content
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm shadow-md",
-      "animate-in fade-in-0 zoom-in-95",
-      className
-    )}
-    {...props}
-  />
-);
-
-// 사용
-<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <button>Hover me</button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Tooltip text</p>
-    </TooltipContent>
-  </Tooltip>
-</TooltipProvider>
-```
-
-## data-state 스타일링
-
-```css
-/* Radix는 상태를 data-* 속성으로 노출 */
-[data-state="open"] { /* 열림 상태 */ }
-[data-state="closed"] { /* 닫힘 상태 */ }
-[data-state="active"] { /* 활성 상태 */ }
-[data-disabled] { /* 비활성화 */ }
-[data-highlighted] { /* 키보드 포커스 */ }
-```
-
-Reference: [Radix UI Documentation](https://www.radix-ui.com/primitives)
+---
+title: Radix UI Patterns
+impact: HIGH
+impactDescription: Accessible headless primitives for custom components
+tags: ui, radix, headless, primitives
+---
+
+## Radix UI Patterns
+
+**Impact: HIGH (Accessible headless primitives for custom components)**
+
+Radix UI를 직접 사용하여 커스텀 컴포넌트를 만들 때의 패턴입니다.
+
+**설치:**
+
+```bash
+# 개별 패키지
+bun add @radix-ui/react-dialog
+bun add @radix-ui/react-dropdown-menu
+bun add @radix-ui/react-popover
+bun add @radix-ui/react-tabs
+bun add @radix-ui/react-tooltip
+```
+
+## Dialog 커스텀 구현
+
+```tsx
+// components/ui/custom-dialog.tsx
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = ({ className, ...props }) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+);
+
+const DialogContent = ({ className, children, ...props }) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2",
+        "rounded-lg border bg-background p-6 shadow-lg",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+);
+
+export { Dialog, DialogTrigger, DialogContent, DialogClose };
+```
+
+## Dropdown Menu 패턴
+
+```tsx
+// components/ui/custom-dropdown.tsx
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuContent = ({ className, sideOffset = 4, ...props }) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[side=bottom]:slide-in-from-top-2",
+        "data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+);
+
+const DropdownMenuItem = ({ className, ...props }) => (
+  <DropdownMenuPrimitive.Item
+    className={cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+);
+
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem };
+```
+
+## Island에서 사용
+
+```tsx
+// app/user-menu/client.tsx
+"use client";
+
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/ui/custom-dropdown";
+
+export function UserMenuIsland({ user }: { user: { name: string; avatar: string } }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className="flex items-center gap-2 rounded-full p-1 hover:bg-accent">
+          <img src={user.avatar} alt="" className="h-8 w-8 rounded-full" />
+          <span className="sr-only">User menu</span>
+        </button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onSelect={() => navigate("/profile")}>
+          Profile
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => navigate("/settings")}>
+          Settings
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => logout()}
+          className="text-destructive"
+        >
+          Logout
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+```
+
+## Tooltip 패턴
+
+```tsx
+// components/ui/tooltip.tsx
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = ({ className, sideOffset = 4, ...props }) => (
+  <TooltipPrimitive.Content
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm shadow-md",
+      "animate-in fade-in-0 zoom-in-95",
+      className
+    )}
+    {...props}
+  />
+);
+
+// 사용
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <button>Hover me</button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Tooltip text</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+```
+
+## data-state 스타일링
+
+```css
+/* Radix는 상태를 data-* 속성으로 노출 */
+[data-state="open"] { /* 열림 상태 */ }
+[data-state="closed"] { /* 닫힘 상태 */ }
+[data-state="active"] { /* 활성 상태 */ }
+[data-disabled] { /* 비활성화 */ }
+[data-highlighted] { /* 키보드 포커스 */ }
+```
+
+Reference: [Radix UI Documentation](https://www.radix-ui.com/primitives)