@mandujs/mcp 0.13.0 → 0.17.0

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

@@ -1,259 +1,259 @@
----
-title: UI Composition Patterns
-impact: MEDIUM
-impactDescription: Reusable and flexible component composition
-tags: ui, composition, patterns, reusable
----
-
-## UI Composition Patterns
-
-**Impact: MEDIUM (Reusable and flexible component composition)**
-
-재사용 가능하고 유연한 UI 컴포넌트 조합 패턴입니다.
-
-## Slot Pattern (asChild)
-
-```tsx
-// components/ui/button.tsx
-import { Slot } from "@radix-ui/react-slot";
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  asChild?: boolean;
-}
-
-export function Button({ asChild, ...props }: ButtonProps) {
-  const Comp = asChild ? Slot : "button";
-  return <Comp className={cn(buttonVariants())} {...props} />;
-}
-```
-
-```tsx
-// 사용: Link에 Button 스타일 적용
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-
-<Button asChild variant="outline">
-  <Link href="/about">About</Link>
-</Button>
-
-// 결과: <a> 태그에 Button 스타일이 적용됨
-```
-
-## Render Props
-
-```tsx
-// components/data-table.tsx
-interface DataTableProps<T> {
-  data: T[];
-  renderRow: (item: T, index: number) => React.ReactNode;
-  renderEmpty?: () => React.ReactNode;
-}
-
-export function DataTable<T>({ data, renderRow, renderEmpty }: DataTableProps<T>) {
-  if (data.length === 0) {
-    return renderEmpty?.() || <p>No data</p>;
-  }
-
-  return (
-    <table>
-      <tbody>
-        {data.map((item, index) => (
-          <tr key={index}>{renderRow(item, index)}</tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-```
-
-```tsx
-// 사용
-<DataTable
-  data={users}
-  renderRow={(user) => (
-    <>
-      <td>{user.name}</td>
-      <td>{user.email}</td>
-    </>
-  )}
-  renderEmpty={() => <EmptyState icon={UserIcon} message="No users found" />}
-/>
-```
-
-## Polymorphic Components
-
-```tsx
-// components/ui/text.tsx
-type TextProps<T extends React.ElementType = "p"> = {
-  as?: T;
-  size?: "sm" | "md" | "lg";
-  weight?: "normal" | "medium" | "bold";
-} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "size" | "weight">;
-
-export function Text<T extends React.ElementType = "p">({
-  as,
-  size = "md",
-  weight = "normal",
-  className,
-  ...props
-}: TextProps<T>) {
-  const Component = as || "p";
-
-  return (
-    <Component
-      className={cn(
-        // Size
-        { sm: "text-sm", md: "text-base", lg: "text-lg" }[size],
-        // Weight
-        { normal: "font-normal", medium: "font-medium", bold: "font-bold" }[weight],
-        className
-      )}
-      {...props}
-    />
-  );
-}
-```
-
-```tsx
-// 사용
-<Text as="h1" size="lg" weight="bold">Title</Text>
-<Text as="span" size="sm">Caption</Text>
-<Text>Default paragraph</Text>
-```
-
-## Container/Presenter Pattern
-
-```tsx
-// Container: 로직 담당
-// app/user-profile/client.tsx
-"use client";
-
-import { useState, useEffect } from "react";
-import { UserProfileView } from "./view";
-
-export function UserProfileIsland({ userId }: { userId: string }) {
-  const [user, setUser] = useState(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    fetch(`/api/users/${userId}`)
-      .then(res => res.json())
-      .then(data => {
-        setUser(data);
-        setLoading(false);
-      });
-  }, [userId]);
-
-  if (loading) return <UserProfileView.Skeleton />;
-  if (!user) return <UserProfileView.Error />;
-
-  return <UserProfileView user={user} />;
-}
-```
-
-```tsx
-// Presenter: UI 담당
-// app/user-profile/view.tsx
-import { Avatar } from "@/components/ui/avatar";
-import { Card, CardHeader, CardContent } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-
-interface UserProfileViewProps {
-  user: { name: string; email: string; avatar: string };
-}
-
-export function UserProfileView({ user }: UserProfileViewProps) {
-  return (
-    <Card>
-      <CardHeader>
-        <Avatar src={user.avatar} alt={user.name} />
-        <h2>{user.name}</h2>
-      </CardHeader>
-      <CardContent>
-        <p>{user.email}</p>
-      </CardContent>
-    </Card>
-  );
-}
-
-UserProfileView.Skeleton = function Skeleton() {
-  return (
-    <Card>
-      <CardHeader>
-        <Skeleton className="h-12 w-12 rounded-full" />
-        <Skeleton className="h-4 w-32" />
-      </CardHeader>
-    </Card>
-  );
-};
-
-UserProfileView.Error = function Error() {
-  return <Card><p>Failed to load user</p></Card>;
-};
-```
-
-## Layout Components
-
-```tsx
-// components/layout/stack.tsx
-interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
-  gap?: "sm" | "md" | "lg";
-  direction?: "row" | "column";
-  align?: "start" | "center" | "end";
-  justify?: "start" | "center" | "end" | "between";
-}
-
-export function Stack({
-  gap = "md",
-  direction = "column",
-  align = "start",
-  justify = "start",
-  className,
-  ...props
-}: StackProps) {
-  return (
-    <div
-      className={cn(
-        "flex",
-        direction === "column" ? "flex-col" : "flex-row",
-        { sm: "gap-2", md: "gap-4", lg: "gap-6" }[gap],
-        { start: "items-start", center: "items-center", end: "items-end" }[align],
-        { start: "justify-start", center: "justify-center", end: "justify-end", between: "justify-between" }[justify],
-        className
-      )}
-      {...props}
-    />
-  );
-}
-```
-
-```tsx
-// 사용
-<Stack gap="lg" align="center">
-  <Avatar />
-  <Stack gap="sm">
-    <Text weight="bold">{name}</Text>
-    <Text size="sm">{email}</Text>
-  </Stack>
-</Stack>
-```
-
-## Higher-Order Island
-
-```tsx
-// hoc/withIslandState.tsx
-export function withIslandState<T>(
-  WrappedComponent: React.ComponentType<T & { state: any; setState: any }>
-) {
-  return function IslandWrapper(props: T) {
-    const [state, setState] = useState({});
-
-    return <WrappedComponent {...props} state={state} setState={setState} />;
-  };
-}
-
-// 사용
-const EnhancedForm = withIslandState(FormComponent);
-```
-
-Reference: [React Patterns](https://reactpatterns.com/)
+---
+title: UI Composition Patterns
+impact: MEDIUM
+impactDescription: Reusable and flexible component composition
+tags: ui, composition, patterns, reusable
+---
+
+## UI Composition Patterns
+
+**Impact: MEDIUM (Reusable and flexible component composition)**
+
+재사용 가능하고 유연한 UI 컴포넌트 조합 패턴입니다.
+
+## Slot Pattern (asChild)
+
+```tsx
+// components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean;
+}
+
+export function Button({ asChild, ...props }: ButtonProps) {
+  const Comp = asChild ? Slot : "button";
+  return <Comp className={cn(buttonVariants())} {...props} />;
+}
+```
+
+```tsx
+// 사용: Link에 Button 스타일 적용
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+<Button asChild variant="outline">
+  <Link href="/about">About</Link>
+</Button>
+
+// 결과: <a> 태그에 Button 스타일이 적용됨
+```
+
+## Render Props
+
+```tsx
+// components/data-table.tsx
+interface DataTableProps<T> {
+  data: T[];
+  renderRow: (item: T, index: number) => React.ReactNode;
+  renderEmpty?: () => React.ReactNode;
+}
+
+export function DataTable<T>({ data, renderRow, renderEmpty }: DataTableProps<T>) {
+  if (data.length === 0) {
+    return renderEmpty?.() || <p>No data</p>;
+  }
+
+  return (
+    <table>
+      <tbody>
+        {data.map((item, index) => (
+          <tr key={index}>{renderRow(item, index)}</tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+```
+
+```tsx
+// 사용
+<DataTable
+  data={users}
+  renderRow={(user) => (
+    <>
+      <td>{user.name}</td>
+      <td>{user.email}</td>
+    </>
+  )}
+  renderEmpty={() => <EmptyState icon={UserIcon} message="No users found" />}
+/>
+```
+
+## Polymorphic Components
+
+```tsx
+// components/ui/text.tsx
+type TextProps<T extends React.ElementType = "p"> = {
+  as?: T;
+  size?: "sm" | "md" | "lg";
+  weight?: "normal" | "medium" | "bold";
+} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "size" | "weight">;
+
+export function Text<T extends React.ElementType = "p">({
+  as,
+  size = "md",
+  weight = "normal",
+  className,
+  ...props
+}: TextProps<T>) {
+  const Component = as || "p";
+
+  return (
+    <Component
+      className={cn(
+        // Size
+        { sm: "text-sm", md: "text-base", lg: "text-lg" }[size],
+        // Weight
+        { normal: "font-normal", medium: "font-medium", bold: "font-bold" }[weight],
+        className
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+```tsx
+// 사용
+<Text as="h1" size="lg" weight="bold">Title</Text>
+<Text as="span" size="sm">Caption</Text>
+<Text>Default paragraph</Text>
+```
+
+## Container/Presenter Pattern
+
+```tsx
+// Container: 로직 담당
+// app/user-profile/client.tsx
+"use client";
+
+import { useState, useEffect } from "react";
+import { UserProfileView } from "./view";
+
+export function UserProfileIsland({ userId }: { userId: string }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(`/api/users/${userId}`)
+      .then(res => res.json())
+      .then(data => {
+        setUser(data);
+        setLoading(false);
+      });
+  }, [userId]);
+
+  if (loading) return <UserProfileView.Skeleton />;
+  if (!user) return <UserProfileView.Error />;
+
+  return <UserProfileView user={user} />;
+}
+```
+
+```tsx
+// Presenter: UI 담당
+// app/user-profile/view.tsx
+import { Avatar } from "@/components/ui/avatar";
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface UserProfileViewProps {
+  user: { name: string; email: string; avatar: string };
+}
+
+export function UserProfileView({ user }: UserProfileViewProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <Avatar src={user.avatar} alt={user.name} />
+        <h2>{user.name}</h2>
+      </CardHeader>
+      <CardContent>
+        <p>{user.email}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
+UserProfileView.Skeleton = function Skeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-12 w-12 rounded-full" />
+        <Skeleton className="h-4 w-32" />
+      </CardHeader>
+    </Card>
+  );
+};
+
+UserProfileView.Error = function Error() {
+  return <Card><p>Failed to load user</p></Card>;
+};
+```
+
+## Layout Components
+
+```tsx
+// components/layout/stack.tsx
+interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+  gap?: "sm" | "md" | "lg";
+  direction?: "row" | "column";
+  align?: "start" | "center" | "end";
+  justify?: "start" | "center" | "end" | "between";
+}
+
+export function Stack({
+  gap = "md",
+  direction = "column",
+  align = "start",
+  justify = "start",
+  className,
+  ...props
+}: StackProps) {
+  return (
+    <div
+      className={cn(
+        "flex",
+        direction === "column" ? "flex-col" : "flex-row",
+        { sm: "gap-2", md: "gap-4", lg: "gap-6" }[gap],
+        { start: "items-start", center: "items-center", end: "items-end" }[align],
+        { start: "justify-start", center: "justify-center", end: "justify-end", between: "justify-between" }[justify],
+        className
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+```tsx
+// 사용
+<Stack gap="lg" align="center">
+  <Avatar />
+  <Stack gap="sm">
+    <Text weight="bold">{name}</Text>
+    <Text size="sm">{email}</Text>
+  </Stack>
+</Stack>
+```
+
+## Higher-Order Island
+
+```tsx
+// hoc/withIslandState.tsx
+export function withIslandState<T>(
+  WrappedComponent: React.ComponentType<T & { state: any; setState: any }>
+) {
+  return function IslandWrapper(props: T) {
+    const [state, setState] = useState({});
+
+    return <WrappedComponent {...props} state={state} setState={setState} />;
+  };
+}
+
+// 사용
+const EnhancedForm = withIslandState(FormComponent);
+```
+
+Reference: [React Patterns](https://reactpatterns.com/)