@mandujs/mcp 0.12.2 → 0.13.0

package/src/resources/skills/mandu-composition/rules/comp-arch-compound-components.md

@@ -1,164 +1,164 @@
----
-title: Structure Islands as Compound Components
-impact: HIGH
-impactDescription: Enables flexible composition without prop drilling
-tags: composition, compound, architecture, island
----
-
-## Structure Islands as Compound Components
-
-**Impact: HIGH (Enables flexible composition without prop drilling)**
-
-복잡한 Island를 컴파운드 컴포넌트로 구조화하세요. 각 서브컴포넌트는 props가 아닌 context로 공유 상태에 접근합니다.
-
-**Incorrect (모놀리식 컴포넌트):**
-
-```tsx
-// app/composer/client.tsx
-"use client";
-
-function ComposerIsland({
-  renderHeader,
-  renderFooter,
-  renderActions,
-  showAttachments,
-  showFormatting,
-  showEmojis,
-}: Props) {
-  const [input, setInput] = useState("");
-
-  return (
-    <form>
-      {renderHeader?.()}
-      <Input value={input} onChange={setInput} />
-      {showAttachments && <Attachments />}
-      {renderFooter ? (
-        renderFooter()
-      ) : (
-        <Footer>
-          {showFormatting && <Formatting />}
-          {showEmojis && <Emojis />}
-          {renderActions?.()}
-        </Footer>
-      )}
-    </form>
-  );
-}
-```
-
-**Correct (컴파운드 Island):**
-
-```tsx
-// app/composer/client.tsx
-"use client";
-
-import { createContext, use, useState, useCallback } from "react";
-
-// Context 정의
-interface ComposerContextValue {
-  state: { input: string; attachments: File[] };
-  actions: {
-    updateInput: (text: string) => void;
-    submit: () => void;
-  };
-}
-
-const ComposerContext = createContext<ComposerContextValue | null>(null);
-
-// Provider
-function ComposerProvider({ children, onSubmit }: ProviderProps) {
-  const [input, setInput] = useState("");
-  const [attachments, setAttachments] = useState<File[]>([]);
-
-  const submit = useCallback(() => {
-    onSubmit?.({ input, attachments });
-    setInput("");
-    setAttachments([]);
-  }, [input, attachments, onSubmit]);
-
-  return (
-    <ComposerContext value={{
-      state: { input, attachments },
-      actions: { updateInput: setInput, submit },
-    }}>
-      {children}
-    </ComposerContext>
-  );
-}
-
-// 서브컴포넌트들
-function ComposerFrame({ children }: { children: React.ReactNode }) {
-  return <form onSubmit={(e) => e.preventDefault()}>{children}</form>;
-}
-
-function ComposerInput() {
-  const { state, actions } = use(ComposerContext)!;
-  return (
-    <textarea
-      value={state.input}
-      onChange={(e) => actions.updateInput(e.target.value)}
-      placeholder="Type a message..."
-    />
-  );
-}
-
-function ComposerSubmit() {
-  const { actions } = use(ComposerContext)!;
-  return <button onClick={actions.submit}>Send</button>;
-}
-
-function ComposerEmojis() {
-  const { actions } = use(ComposerContext)!;
-  return (
-    <EmojiPicker onSelect={(emoji) => {
-      actions.updateInput((prev) => prev + emoji);
-    }} />
-  );
-}
-
-// 컴파운드로 export
-export const Composer = {
-  Provider: ComposerProvider,
-  Frame: ComposerFrame,
-  Input: ComposerInput,
-  Submit: ComposerSubmit,
-  Emojis: ComposerEmojis,
-  Attachments: ComposerAttachments,
-  Formatting: ComposerFormatting,
-};
-```
-
-**사용법:**
-
-```tsx
-// app/chat/page.tsx
-import { Composer } from "../composer/client";
-
-export default function ChatPage() {
-  return (
-    <div>
-      <h1>Chat</h1>
-
-      {/* 필요한 조각만 조합 */}
-      <Composer.Provider onSubmit={handleSubmit}>
-        <Composer.Frame>
-          <Composer.Input />
-          <footer>
-            <Composer.Emojis />
-            <Composer.Submit />
-          </footer>
-        </Composer.Frame>
-      </Composer.Provider>
-    </div>
-  );
-}
-```
-
-## 장점
-
-- 소비자가 필요한 것만 명시적으로 조합
-- 숨겨진 조건문 없음
-- state/actions가 Provider에 의해 주입됨
-- 같은 컴포넌트 구조를 다양한 구현과 재사용 가능
-
-Reference: [Compound Components Pattern](https://www.patterns.dev/react/compound-pattern)
+---
+title: Structure Islands as Compound Components
+impact: HIGH
+impactDescription: Enables flexible composition without prop drilling
+tags: composition, compound, architecture, island
+---
+
+## Structure Islands as Compound Components
+
+**Impact: HIGH (Enables flexible composition without prop drilling)**
+
+복잡한 Island를 컴파운드 컴포넌트로 구조화하세요. 각 서브컴포넌트는 props가 아닌 context로 공유 상태에 접근합니다.
+
+**Incorrect (모놀리식 컴포넌트):**
+
+```tsx
+// app/composer/client.tsx
+"use client";
+
+function ComposerIsland({
+  renderHeader,
+  renderFooter,
+  renderActions,
+  showAttachments,
+  showFormatting,
+  showEmojis,
+}: Props) {
+  const [input, setInput] = useState("");
+
+  return (
+    <form>
+      {renderHeader?.()}
+      <Input value={input} onChange={setInput} />
+      {showAttachments && <Attachments />}
+      {renderFooter ? (
+        renderFooter()
+      ) : (
+        <Footer>
+          {showFormatting && <Formatting />}
+          {showEmojis && <Emojis />}
+          {renderActions?.()}
+        </Footer>
+      )}
+    </form>
+  );
+}
+```
+
+**Correct (컴파운드 Island):**
+
+```tsx
+// app/composer/client.tsx
+"use client";
+
+import { createContext, use, useState, useCallback } from "react";
+
+// Context 정의
+interface ComposerContextValue {
+  state: { input: string; attachments: File[] };
+  actions: {
+    updateInput: (text: string) => void;
+    submit: () => void;
+  };
+}
+
+const ComposerContext = createContext<ComposerContextValue | null>(null);
+
+// Provider
+function ComposerProvider({ children, onSubmit }: ProviderProps) {
+  const [input, setInput] = useState("");
+  const [attachments, setAttachments] = useState<File[]>([]);
+
+  const submit = useCallback(() => {
+    onSubmit?.({ input, attachments });
+    setInput("");
+    setAttachments([]);
+  }, [input, attachments, onSubmit]);
+
+  return (
+    <ComposerContext value={{
+      state: { input, attachments },
+      actions: { updateInput: setInput, submit },
+    }}>
+      {children}
+    </ComposerContext>
+  );
+}
+
+// 서브컴포넌트들
+function ComposerFrame({ children }: { children: React.ReactNode }) {
+  return <form onSubmit={(e) => e.preventDefault()}>{children}</form>;
+}
+
+function ComposerInput() {
+  const { state, actions } = use(ComposerContext)!;
+  return (
+    <textarea
+      value={state.input}
+      onChange={(e) => actions.updateInput(e.target.value)}
+      placeholder="Type a message..."
+    />
+  );
+}
+
+function ComposerSubmit() {
+  const { actions } = use(ComposerContext)!;
+  return <button onClick={actions.submit}>Send</button>;
+}
+
+function ComposerEmojis() {
+  const { actions } = use(ComposerContext)!;
+  return (
+    <EmojiPicker onSelect={(emoji) => {
+      actions.updateInput((prev) => prev + emoji);
+    }} />
+  );
+}
+
+// 컴파운드로 export
+export const Composer = {
+  Provider: ComposerProvider,
+  Frame: ComposerFrame,
+  Input: ComposerInput,
+  Submit: ComposerSubmit,
+  Emojis: ComposerEmojis,
+  Attachments: ComposerAttachments,
+  Formatting: ComposerFormatting,
+};
+```
+
+**사용법:**
+
+```tsx
+// app/chat/page.tsx
+import { Composer } from "../composer/client";
+
+export default function ChatPage() {
+  return (
+    <div>
+      <h1>Chat</h1>
+
+      {/* 필요한 조각만 조합 */}
+      <Composer.Provider onSubmit={handleSubmit}>
+        <Composer.Frame>
+          <Composer.Input />
+          <footer>
+            <Composer.Emojis />
+            <Composer.Submit />
+          </footer>
+        </Composer.Frame>
+      </Composer.Provider>
+    </div>
+  );
+}
+```
+
+## 장점
+
+- 소비자가 필요한 것만 명시적으로 조합
+- 숨겨진 조건문 없음
+- state/actions가 Provider에 의해 주입됨
+- 같은 컴포넌트 구조를 다양한 구현과 재사용 가능
+
+Reference: [Compound Components Pattern](https://www.patterns.dev/react/compound-pattern)

package/src/resources/skills/mandu-composition/rules/comp-island-event.md

@@ -1,161 +1,161 @@
----
-title: Communicate Between Islands with useIslandEvent
-impact: MEDIUM
-impactDescription: Enables Island-to-Island data flow
-tags: composition, island, event, communication
----
-
-## Communicate Between Islands with useIslandEvent
-
-**Impact: MEDIUM (Enables Island-to-Island data flow)**
-
-Island는 기본적으로 격리되어 있습니다. `useIslandEvent`를 사용하여 Island 간 통신하세요.
-
-**Incorrect (전역 상태 공유):**
-
-```tsx
-// ❌ 전역 변수로 Island 간 통신
-let globalCount = 0;
-
-// Island A
-export function CounterIsland() {
-  const [count, setCount] = useState(globalCount);
-  // 다른 Island와 동기화되지 않음
-}
-```
-
-**Correct (useIslandEvent):**
-
-```tsx
-// Island A: Counter (이벤트 발송)
-"use client";
-
-import { useState } from "react";
-import { useIslandEvent } from "@mandujs/core/client";
-
-export function CounterIsland() {
-  const [count, setCount] = useState(0);
-  const { emit } = useIslandEvent<{ count: number }>("counter-update");
-
-  const increment = () => {
-    const newCount = count + 1;
-    setCount(newCount);
-    emit({ count: newCount });  // 다른 Island에 알림
-  };
-
-  return <button onClick={increment}>Count: {count}</button>;
-}
-```
-
-```tsx
-// Island B: Display (이벤트 수신)
-"use client";
-
-import { useState } from "react";
-import { useIslandEvent } from "@mandujs/core/client";
-
-export function DisplayIsland() {
-  const [lastCount, setLastCount] = useState(0);
-
-  useIslandEvent<{ count: number }>("counter-update", (data) => {
-    setLastCount(data.count);  // 카운터 업데이트에 반응
-  });
-
-  return <p>Last count received: {lastCount}</p>;
-}
-```
-
-## 실용적인 패턴
-
-### 장바구니 업데이트
-
-```tsx
-// Product Island
-function ProductIsland({ product }) {
-  const { emit } = useIslandEvent("cart-update");
-
-  const addToCart = () => {
-    emit({ action: "add", productId: product.id, quantity: 1 });
-  };
-
-  return <button onClick={addToCart}>Add to Cart</button>;
-}
-
-// Cart Island
-function CartIsland() {
-  const [items, setItems] = useState([]);
-
-  useIslandEvent<CartEvent>("cart-update", ({ action, productId, quantity }) => {
-    if (action === "add") {
-      setItems(prev => [...prev, { productId, quantity }]);
-    }
-  });
-
-  return <CartSummary items={items} />;
-}
-
-// Header Cart Badge Island
-function CartBadgeIsland() {
-  const [count, setCount] = useState(0);
-
-  useIslandEvent<CartEvent>("cart-update", ({ action }) => {
-    if (action === "add") setCount(c => c + 1);
-    if (action === "remove") setCount(c => c - 1);
-  });
-
-  return <span className="badge">{count}</span>;
-}
-```
-
-### 필터 동기화
-
-```tsx
-// Filter Island
-function FilterIsland() {
-  const { emit } = useIslandEvent("filter-change");
-  const [filters, setFilters] = useState({});
-
-  const updateFilter = (key, value) => {
-    const newFilters = { ...filters, [key]: value };
-    setFilters(newFilters);
-    emit(newFilters);
-  };
-
-  return <FilterControls filters={filters} onChange={updateFilter} />;
-}
-
-// Product List Island
-function ProductListIsland({ initialProducts }) {
-  const [products, setProducts] = useState(initialProducts);
-
-  useIslandEvent<Filters>("filter-change", async (filters) => {
-    const filtered = await fetchProducts(filters);
-    setProducts(filtered);
-  });
-
-  return <ProductGrid products={products} />;
-}
-```
-
-## API 요약
-
-```typescript
-// 이벤트 발송
-const { emit } = useIslandEvent<T>(eventName);
-emit(data);
-
-// 이벤트 수신
-useIslandEvent<T>(eventName, (data) => { ... });
-
-// 발송 + 수신
-const { emit } = useIslandEvent<T>(eventName, (data) => { ... });
-```
-
-## 언제 useIslandEvent를 사용하나?
-
-| 상황 | 권장 방법 |
-|------|-----------|
-| 같은 Island 내 상태 공유 | useState/useContext |
-| 부모-자식 Island | props |
-| 형제 Island 간 통신 | **useIslandEvent** |
-| 페이지 전체 상태 | slot + server state |
+---
+title: Communicate Between Islands with useIslandEvent
+impact: MEDIUM
+impactDescription: Enables Island-to-Island data flow
+tags: composition, island, event, communication
+---
+
+## Communicate Between Islands with useIslandEvent
+
+**Impact: MEDIUM (Enables Island-to-Island data flow)**
+
+Island는 기본적으로 격리되어 있습니다. `useIslandEvent`를 사용하여 Island 간 통신하세요.
+
+**Incorrect (전역 상태 공유):**
+
+```tsx
+// ❌ 전역 변수로 Island 간 통신
+let globalCount = 0;
+
+// Island A
+export function CounterIsland() {
+  const [count, setCount] = useState(globalCount);
+  // 다른 Island와 동기화되지 않음
+}
+```
+
+**Correct (useIslandEvent):**
+
+```tsx
+// Island A: Counter (이벤트 발송)
+"use client";
+
+import { useState } from "react";
+import { useIslandEvent } from "@mandujs/core/client";
+
+export function CounterIsland() {
+  const [count, setCount] = useState(0);
+  const { emit } = useIslandEvent<{ count: number }>("counter-update");
+
+  const increment = () => {
+    const newCount = count + 1;
+    setCount(newCount);
+    emit({ count: newCount });  // 다른 Island에 알림
+  };
+
+  return <button onClick={increment}>Count: {count}</button>;
+}
+```
+
+```tsx
+// Island B: Display (이벤트 수신)
+"use client";
+
+import { useState } from "react";
+import { useIslandEvent } from "@mandujs/core/client";
+
+export function DisplayIsland() {
+  const [lastCount, setLastCount] = useState(0);
+
+  useIslandEvent<{ count: number }>("counter-update", (data) => {
+    setLastCount(data.count);  // 카운터 업데이트에 반응
+  });
+
+  return <p>Last count received: {lastCount}</p>;
+}
+```
+
+## 실용적인 패턴
+
+### 장바구니 업데이트
+
+```tsx
+// Product Island
+function ProductIsland({ product }) {
+  const { emit } = useIslandEvent("cart-update");
+
+  const addToCart = () => {
+    emit({ action: "add", productId: product.id, quantity: 1 });
+  };
+
+  return <button onClick={addToCart}>Add to Cart</button>;
+}
+
+// Cart Island
+function CartIsland() {
+  const [items, setItems] = useState([]);
+
+  useIslandEvent<CartEvent>("cart-update", ({ action, productId, quantity }) => {
+    if (action === "add") {
+      setItems(prev => [...prev, { productId, quantity }]);
+    }
+  });
+
+  return <CartSummary items={items} />;
+}
+
+// Header Cart Badge Island
+function CartBadgeIsland() {
+  const [count, setCount] = useState(0);
+
+  useIslandEvent<CartEvent>("cart-update", ({ action }) => {
+    if (action === "add") setCount(c => c + 1);
+    if (action === "remove") setCount(c => c - 1);
+  });
+
+  return <span className="badge">{count}</span>;
+}
+```
+
+### 필터 동기화
+
+```tsx
+// Filter Island
+function FilterIsland() {
+  const { emit } = useIslandEvent("filter-change");
+  const [filters, setFilters] = useState({});
+
+  const updateFilter = (key, value) => {
+    const newFilters = { ...filters, [key]: value };
+    setFilters(newFilters);
+    emit(newFilters);
+  };
+
+  return <FilterControls filters={filters} onChange={updateFilter} />;
+}
+
+// Product List Island
+function ProductListIsland({ initialProducts }) {
+  const [products, setProducts] = useState(initialProducts);
+
+  useIslandEvent<Filters>("filter-change", async (filters) => {
+    const filtered = await fetchProducts(filters);
+    setProducts(filtered);
+  });
+
+  return <ProductGrid products={products} />;
+}
+```
+
+## API 요약
+
+```typescript
+// 이벤트 발송
+const { emit } = useIslandEvent<T>(eventName);
+emit(data);
+
+// 이벤트 수신
+useIslandEvent<T>(eventName, (data) => { ... });
+
+// 발송 + 수신
+const { emit } = useIslandEvent<T>(eventName, (data) => { ... });
+```
+
+## 언제 useIslandEvent를 사용하나?
+
+| 상황 | 권장 방법 |
+|------|-----------|
+| 같은 Island 내 상태 공유 | useState/useContext |
+| 부모-자식 Island | props |
+| 형제 Island 간 통신 | **useIslandEvent** |
+| 페이지 전체 상태 | slot + server state |