@mandujs/mcp 0.12.2 → 0.13.0

package/src/resources/skills/mandu-styling/rules/style-component-slots.md

@@ -1,255 +1,255 @@
----
-title: Slot-based Style Customization
-impact: HIGH
-impactDescription: Flexible style overrides for reusable components
-tags: styling, slots, customization, override
----
-
-## Slot-based Style Customization
-
-**Impact: HIGH (Flexible style overrides for reusable components)**
-
-컴포넌트의 특정 부분만 스타일을 오버라이드할 수 있는 slot 패턴입니다.
-
-## classNames prop 패턴
-
-```tsx
-// app/input/client.tsx
-"use client";
-
-import { cn } from "@/lib/utils";
-
-interface InputClassNames {
-  root?: string;
-  label?: string;
-  input?: string;
-  helper?: string;
-  error?: string;
-}
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  helper?: string;
-  error?: string;
-  classNames?: InputClassNames;
-}
-
-export function InputIsland({
-  label,
-  helper,
-  error,
-  classNames,
-  className,
-  ...props
-}: InputProps) {
-  return (
-    <div className={cn("space-y-2", classNames?.root)}>
-      {label && (
-        <label
-          className={cn(
-            "text-sm font-medium leading-none",
-            classNames?.label
-          )}
-        >
-          {label}
-        </label>
-      )}
-
-      <input
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          error && "border-destructive focus-visible:ring-destructive",
-          classNames?.input,
-          className
-        )}
-        {...props}
-      />
-
-      {helper && !error && (
-        <p className={cn("text-sm text-muted-foreground", classNames?.helper)}>
-          {helper}
-        </p>
-      )}
-
-      {error && (
-        <p className={cn("text-sm text-destructive", classNames?.error)}>
-          {error}
-        </p>
-      )}
-    </div>
-  );
-}
-```
-
-## 사용 예시
-
-```tsx
-<InputIsland
-  label="Email"
-  placeholder="you@example.com"
-  classNames={{
-    root: "max-w-md",
-    label: "text-blue-600",
-    input: "border-2",
-    helper: "italic",
-  }}
-/>
-```
-
-## styles prop 패턴
-
-```tsx
-// app/card/client.tsx
-"use client";
-
-interface CardStyles {
-  root?: React.CSSProperties;
-  header?: React.CSSProperties;
-  content?: React.CSSProperties;
-  footer?: React.CSSProperties;
-}
-
-interface CardProps {
-  styles?: CardStyles;
-  // ...
-}
-
-export function CardIsland({ styles, children }: CardProps) {
-  return (
-    <div className="rounded-lg border" style={styles?.root}>
-      {children}
-    </div>
-  );
-}
-```
-
-## slotProps 패턴 (고급)
-
-```tsx
-// app/modal/client.tsx
-"use client";
-
-interface SlotProps<T extends React.ElementType = "div"> {
-  component?: T;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-interface ModalSlotProps {
-  root?: SlotProps;
-  overlay?: SlotProps;
-  content?: SlotProps<"div" | "form">;
-  header?: SlotProps;
-  body?: SlotProps;
-  footer?: SlotProps;
-}
-
-interface ModalProps {
-  open: boolean;
-  onClose: () => void;
-  slotProps?: ModalSlotProps;
-  children: React.ReactNode;
-}
-
-export function ModalIsland({ open, onClose, slotProps, children }: ModalProps) {
-  if (!open) return null;
-
-  const OverlayComponent = slotProps?.overlay?.component || "div";
-  const ContentComponent = slotProps?.content?.component || "div";
-
-  return (
-    <div
-      className={cn("fixed inset-0 z-50", slotProps?.root?.className)}
-      style={slotProps?.root?.style}
-    >
-      <OverlayComponent
-        className={cn(
-          "fixed inset-0 bg-black/50",
-          slotProps?.overlay?.className
-        )}
-        style={slotProps?.overlay?.style}
-        onClick={onClose}
-      />
-
-      <ContentComponent
-        className={cn(
-          "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
-          "w-full max-w-lg rounded-lg bg-background p-6 shadow-lg",
-          slotProps?.content?.className
-        )}
-        style={slotProps?.content?.style}
-      >
-        {children}
-      </ContentComponent>
-    </div>
-  );
-}
-```
-
-## 사용 예시 (고급)
-
-```tsx
-<ModalIsland
-  open={isOpen}
-  onClose={() => setIsOpen(false)}
-  slotProps={{
-    overlay: {
-      className: "backdrop-blur-sm",
-    },
-    content: {
-      component: "form",
-      className: "max-w-2xl",
-      style: { maxHeight: "80vh" },
-    },
-  }}
->
-  <form onSubmit={handleSubmit}>...</form>
-</ModalIsland>
-```
-
-## Tailwind merge로 안전한 오버라이드
-
-```tsx
-// cn 함수가 충돌을 해결
-<button
-  className={cn(
-    "px-4 py-2 bg-blue-500",  // 기본
-    className                   // 오버라이드: "px-6" → px-6 적용
-  )}
-/>
-```
-
-## 우선순위 명확화
-
-```tsx
-// 1. 기본 스타일 (lowest)
-// 2. variant 스타일
-// 3. classNames prop
-// 4. className prop (highest)
-
-export function Button({
-  variant,
-  classNames,
-  className,
-  ...props
-}) {
-  return (
-    <button
-      className={cn(
-        // 1. Base
-        "inline-flex items-center",
-        // 2. Variant
-        buttonVariants({ variant }),
-        // 3. classNames slot
-        classNames?.button,
-        // 4. className (최우선)
-        className
-      )}
-      {...props}
-    />
-  );
-}
-```
-
-Reference: [Material UI sx prop](https://mui.com/system/getting-started/the-sx-prop/)
+---
+title: Slot-based Style Customization
+impact: HIGH
+impactDescription: Flexible style overrides for reusable components
+tags: styling, slots, customization, override
+---
+
+## Slot-based Style Customization
+
+**Impact: HIGH (Flexible style overrides for reusable components)**
+
+컴포넌트의 특정 부분만 스타일을 오버라이드할 수 있는 slot 패턴입니다.
+
+## classNames prop 패턴
+
+```tsx
+// app/input/client.tsx
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface InputClassNames {
+  root?: string;
+  label?: string;
+  input?: string;
+  helper?: string;
+  error?: string;
+}
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  helper?: string;
+  error?: string;
+  classNames?: InputClassNames;
+}
+
+export function InputIsland({
+  label,
+  helper,
+  error,
+  classNames,
+  className,
+  ...props
+}: InputProps) {
+  return (
+    <div className={cn("space-y-2", classNames?.root)}>
+      {label && (
+        <label
+          className={cn(
+            "text-sm font-medium leading-none",
+            classNames?.label
+          )}
+        >
+          {label}
+        </label>
+      )}
+
+      <input
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          error && "border-destructive focus-visible:ring-destructive",
+          classNames?.input,
+          className
+        )}
+        {...props}
+      />
+
+      {helper && !error && (
+        <p className={cn("text-sm text-muted-foreground", classNames?.helper)}>
+          {helper}
+        </p>
+      )}
+
+      {error && (
+        <p className={cn("text-sm text-destructive", classNames?.error)}>
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+## 사용 예시
+
+```tsx
+<InputIsland
+  label="Email"
+  placeholder="you@example.com"
+  classNames={{
+    root: "max-w-md",
+    label: "text-blue-600",
+    input: "border-2",
+    helper: "italic",
+  }}
+/>
+```
+
+## styles prop 패턴
+
+```tsx
+// app/card/client.tsx
+"use client";
+
+interface CardStyles {
+  root?: React.CSSProperties;
+  header?: React.CSSProperties;
+  content?: React.CSSProperties;
+  footer?: React.CSSProperties;
+}
+
+interface CardProps {
+  styles?: CardStyles;
+  // ...
+}
+
+export function CardIsland({ styles, children }: CardProps) {
+  return (
+    <div className="rounded-lg border" style={styles?.root}>
+      {children}
+    </div>
+  );
+}
+```
+
+## slotProps 패턴 (고급)
+
+```tsx
+// app/modal/client.tsx
+"use client";
+
+interface SlotProps<T extends React.ElementType = "div"> {
+  component?: T;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface ModalSlotProps {
+  root?: SlotProps;
+  overlay?: SlotProps;
+  content?: SlotProps<"div" | "form">;
+  header?: SlotProps;
+  body?: SlotProps;
+  footer?: SlotProps;
+}
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  slotProps?: ModalSlotProps;
+  children: React.ReactNode;
+}
+
+export function ModalIsland({ open, onClose, slotProps, children }: ModalProps) {
+  if (!open) return null;
+
+  const OverlayComponent = slotProps?.overlay?.component || "div";
+  const ContentComponent = slotProps?.content?.component || "div";
+
+  return (
+    <div
+      className={cn("fixed inset-0 z-50", slotProps?.root?.className)}
+      style={slotProps?.root?.style}
+    >
+      <OverlayComponent
+        className={cn(
+          "fixed inset-0 bg-black/50",
+          slotProps?.overlay?.className
+        )}
+        style={slotProps?.overlay?.style}
+        onClick={onClose}
+      />
+
+      <ContentComponent
+        className={cn(
+          "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+          "w-full max-w-lg rounded-lg bg-background p-6 shadow-lg",
+          slotProps?.content?.className
+        )}
+        style={slotProps?.content?.style}
+      >
+        {children}
+      </ContentComponent>
+    </div>
+  );
+}
+```
+
+## 사용 예시 (고급)
+
+```tsx
+<ModalIsland
+  open={isOpen}
+  onClose={() => setIsOpen(false)}
+  slotProps={{
+    overlay: {
+      className: "backdrop-blur-sm",
+    },
+    content: {
+      component: "form",
+      className: "max-w-2xl",
+      style: { maxHeight: "80vh" },
+    },
+  }}
+>
+  <form onSubmit={handleSubmit}>...</form>
+</ModalIsland>
+```
+
+## Tailwind merge로 안전한 오버라이드
+
+```tsx
+// cn 함수가 충돌을 해결
+<button
+  className={cn(
+    "px-4 py-2 bg-blue-500",  // 기본
+    className                   // 오버라이드: "px-6" → px-6 적용
+  )}
+/>
+```
+
+## 우선순위 명확화
+
+```tsx
+// 1. 기본 스타일 (lowest)
+// 2. variant 스타일
+// 3. classNames prop
+// 4. className prop (highest)
+
+export function Button({
+  variant,
+  classNames,
+  className,
+  ...props
+}) {
+  return (
+    <button
+      className={cn(
+        // 1. Base
+        "inline-flex items-center",
+        // 2. Variant
+        buttonVariants({ variant }),
+        // 3. classNames slot
+        classNames?.button,
+        // 4. className (최우선)
+        className
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+Reference: [Material UI sx prop](https://mui.com/system/getting-started/the-sx-prop/)