@mandujs/mcp 0.38.12 → 0.39.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (183) hide show
  1. package/README.md +3 -3
  2. package/package.json +3 -5
  3. package/src/activity-adapter.ts +23 -23
  4. package/src/activity-monitor.ts +39 -10
  5. package/src/adapters/index.ts +20 -20
  6. package/src/adapters/monitor-adapter.ts +100 -100
  7. package/src/adapters/tool-adapter.ts +90 -90
  8. package/src/executor/index.ts +22 -22
  9. package/src/executor/tool-executor.ts +148 -148
  10. package/src/hooks/config-watcher.ts +173 -173
  11. package/src/hooks/index.ts +23 -23
  12. package/src/hooks/mcp-hooks.ts +227 -227
  13. package/src/index.ts +5 -5
  14. package/src/logging/index.ts +15 -15
  15. package/src/logging/mcp-transport.ts +134 -134
  16. package/src/new-resources.ts +2 -2
  17. package/src/profiles.ts +25 -54
  18. package/src/prompts.ts +4 -4
  19. package/src/registry/index.ts +13 -13
  20. package/src/registry/mcp-tool-registry.ts +298 -298
  21. package/src/resources/generated-skills/catalog.ts +36 -0
  22. package/src/resources/generated-skills/mandu-agent-workflow/SKILL.md +48 -0
  23. package/src/resources/generated-skills/mandu-contract/SKILL.md +20 -0
  24. package/src/resources/generated-skills/mandu-fs-routes/SKILL.md +19 -0
  25. package/src/resources/generated-skills/mandu-guard/SKILL.md +20 -0
  26. package/src/resources/generated-skills/mandu-hydration/SKILL.md +19 -0
  27. package/src/resources/generated-skills/mandu-testing/SKILL.md +20 -0
  28. package/src/resources/handlers.ts +3 -3
  29. package/src/resources/skills/guides.ts +49 -49
  30. package/src/resources/skills/index.ts +12 -12
  31. package/src/resources/skills/loader.ts +8 -35
  32. package/src/resources/skills/recipes.ts +28 -28
  33. package/src/server.ts +1 -1
  34. package/src/tools/agent.ts +479 -409
  35. package/src/tools/ate-exemplar.ts +92 -92
  36. package/src/tools/ate-flakes.ts +90 -90
  37. package/src/tools/ate-mutate.ts +103 -103
  38. package/src/tools/ate-mutation-report.ts +64 -64
  39. package/src/tools/ate-oracle-pending.ts +49 -49
  40. package/src/tools/ate-oracle-replay.ts +44 -44
  41. package/src/tools/ate-oracle-verdict.ts +70 -70
  42. package/src/tools/ate-prompt.ts +146 -146
  43. package/src/tools/ate-run.ts +1 -1
  44. package/src/tools/ate.ts +38 -38
  45. package/src/tools/brain.ts +6 -6
  46. package/src/tools/composite.ts +19 -61
  47. package/src/tools/contract.ts +11 -9
  48. package/src/tools/deploy-plan.ts +2 -2
  49. package/src/tools/deploy-preview.ts +316 -316
  50. package/src/tools/design.ts +825 -825
  51. package/src/tools/docs.ts +350 -350
  52. package/src/tools/generate.ts +4 -3
  53. package/src/tools/guard.ts +1 -1
  54. package/src/tools/history.ts +1 -1
  55. package/src/tools/hydration.ts +64 -64
  56. package/src/tools/index.ts +0 -118
  57. package/src/tools/kitchen.ts +72 -72
  58. package/src/tools/lint.ts +226 -226
  59. package/src/tools/loop-close.ts +175 -175
  60. package/src/tools/negotiate.ts +263 -263
  61. package/src/tools/resource.ts +1 -1
  62. package/src/tools/run-tests.ts +424 -424
  63. package/src/tools/runtime.ts +1 -1
  64. package/src/tools/seo.ts +1 -1
  65. package/src/tools/slot-validation.ts +19 -19
  66. package/src/tools/spec.ts +201 -201
  67. package/src/tools/transaction.ts +1 -1
  68. package/src/tx-lock.ts +73 -73
  69. package/src/utils/runtime-control.ts +52 -52
  70. package/src/utils/withWarnings.ts +1 -1
  71. package/src/resources/skills/mandu-agent-workflow/SKILL.md +0 -124
  72. package/src/resources/skills/mandu-agent-workflow/metadata.json +0 -7
  73. package/src/resources/skills/mandu-composition/SKILL.md +0 -131
  74. package/src/resources/skills/mandu-composition/metadata.json +0 -13
  75. package/src/resources/skills/mandu-composition/rules/_sections.md +0 -26
  76. package/src/resources/skills/mandu-composition/rules/_template.md +0 -77
  77. package/src/resources/skills/mandu-composition/rules/comp-arch-avoid-boolean-props.md +0 -146
  78. package/src/resources/skills/mandu-composition/rules/comp-arch-compound-components.md +0 -164
  79. package/src/resources/skills/mandu-composition/rules/comp-island-event.md +0 -161
  80. package/src/resources/skills/mandu-composition/rules/comp-island-slot-split.md +0 -167
  81. package/src/resources/skills/mandu-composition/rules/comp-pattern-children.md +0 -149
  82. package/src/resources/skills/mandu-composition/rules/comp-state-context-interface.md +0 -148
  83. package/src/resources/skills/mandu-composition/rules/comp-state-lift-state.md +0 -150
  84. package/src/resources/skills/mandu-deployment/SKILL.md +0 -135
  85. package/src/resources/skills/mandu-deployment/_sections.md +0 -41
  86. package/src/resources/skills/mandu-deployment/_template.md +0 -38
  87. package/src/resources/skills/mandu-deployment/metadata.json +0 -13
  88. package/src/resources/skills/mandu-deployment/rules/db-provider-supabase.md +0 -300
  89. package/src/resources/skills/mandu-deployment/rules/deploy-build-bun.md +0 -109
  90. package/src/resources/skills/mandu-deployment/rules/deploy-build-output.md +0 -115
  91. package/src/resources/skills/mandu-deployment/rules/deploy-cicd-github.md +0 -219
  92. package/src/resources/skills/mandu-deployment/rules/deploy-docker-bun.md +0 -150
  93. package/src/resources/skills/mandu-deployment/rules/deploy-docker-compose.md +0 -223
  94. package/src/resources/skills/mandu-deployment/rules/deploy-platform-fly.md +0 -152
  95. package/src/resources/skills/mandu-deployment/rules/deploy-platform-render.md +0 -179
  96. package/src/resources/skills/mandu-deployment/rules/deploy-platform-vercel.md +0 -140
  97. package/src/resources/skills/mandu-fs-routes/SKILL.md +0 -122
  98. package/src/resources/skills/mandu-fs-routes/metadata.json +0 -12
  99. package/src/resources/skills/mandu-fs-routes/rules/_sections.md +0 -36
  100. package/src/resources/skills/mandu-fs-routes/rules/_template.md +0 -69
  101. package/src/resources/skills/mandu-fs-routes/rules/routes-api-methods.md +0 -65
  102. package/src/resources/skills/mandu-fs-routes/rules/routes-dynamic-param.md +0 -93
  103. package/src/resources/skills/mandu-fs-routes/rules/routes-naming-page.md +0 -55
  104. package/src/resources/skills/mandu-guard/SKILL.md +0 -162
  105. package/src/resources/skills/mandu-guard/metadata.json +0 -12
  106. package/src/resources/skills/mandu-guard/rules/_sections.md +0 -36
  107. package/src/resources/skills/mandu-guard/rules/_template.md +0 -82
  108. package/src/resources/skills/mandu-guard/rules/guard-config-rules.md +0 -100
  109. package/src/resources/skills/mandu-guard/rules/guard-layer-direction.md +0 -76
  110. package/src/resources/skills/mandu-guard/rules/guard-preset-mandu.md +0 -81
  111. package/src/resources/skills/mandu-guard/rules/guard-validate-import.md +0 -80
  112. package/src/resources/skills/mandu-hydration/SKILL.md +0 -139
  113. package/src/resources/skills/mandu-hydration/metadata.json +0 -12
  114. package/src/resources/skills/mandu-hydration/rules/_sections.md +0 -31
  115. package/src/resources/skills/mandu-hydration/rules/_template.md +0 -72
  116. package/src/resources/skills/mandu-hydration/rules/hydration-data-event.md +0 -109
  117. package/src/resources/skills/mandu-hydration/rules/hydration-directive-use-client.md +0 -55
  118. package/src/resources/skills/mandu-hydration/rules/hydration-island-setup.md +0 -160
  119. package/src/resources/skills/mandu-hydration/rules/hydration-priority-visible.md +0 -91
  120. package/src/resources/skills/mandu-performance/SKILL.md +0 -125
  121. package/src/resources/skills/mandu-performance/metadata.json +0 -14
  122. package/src/resources/skills/mandu-performance/rules/_sections.md +0 -31
  123. package/src/resources/skills/mandu-performance/rules/_template.md +0 -64
  124. package/src/resources/skills/mandu-performance/rules/perf-async-defer-await.md +0 -103
  125. package/src/resources/skills/mandu-performance/rules/perf-async-parallel.md +0 -95
  126. package/src/resources/skills/mandu-performance/rules/perf-bun-file.md +0 -124
  127. package/src/resources/skills/mandu-performance/rules/perf-bun-serve.md +0 -125
  128. package/src/resources/skills/mandu-performance/rules/perf-bundle-imports.md +0 -80
  129. package/src/resources/skills/mandu-performance/rules/perf-bundle-island-lazy.md +0 -145
  130. package/src/resources/skills/mandu-performance/rules/perf-cache-react.md +0 -98
  131. package/src/resources/skills/mandu-performance/rules/perf-render-transitions.md +0 -154
  132. package/src/resources/skills/mandu-security/SKILL.md +0 -127
  133. package/src/resources/skills/mandu-security/metadata.json +0 -13
  134. package/src/resources/skills/mandu-security/rules/_sections.md +0 -31
  135. package/src/resources/skills/mandu-security/rules/_template.md +0 -74
  136. package/src/resources/skills/mandu-security/rules/sec-auth-guard.md +0 -127
  137. package/src/resources/skills/mandu-security/rules/sec-env-management.md +0 -133
  138. package/src/resources/skills/mandu-security/rules/sec-input-validate.md +0 -148
  139. package/src/resources/skills/mandu-security/rules/sec-protect-csrf.md +0 -146
  140. package/src/resources/skills/mandu-security/rules/sec-protect-headers.md +0 -138
  141. package/src/resources/skills/mandu-slot/SKILL.md +0 -125
  142. package/src/resources/skills/mandu-slot/metadata.json +0 -12
  143. package/src/resources/skills/mandu-slot/rules/_sections.md +0 -36
  144. package/src/resources/skills/mandu-slot/rules/_template.md +0 -63
  145. package/src/resources/skills/mandu-slot/rules/slot-basic-structure.md +0 -38
  146. package/src/resources/skills/mandu-slot/rules/slot-ctx-response.md +0 -56
  147. package/src/resources/skills/mandu-slot/rules/slot-guard-auth.md +0 -59
  148. package/src/resources/skills/mandu-slot/rules/slot-http-methods.md +0 -64
  149. package/src/resources/skills/mandu-styling/SKILL.md +0 -196
  150. package/src/resources/skills/mandu-styling/_sections.md +0 -43
  151. package/src/resources/skills/mandu-styling/_template.md +0 -32
  152. package/src/resources/skills/mandu-styling/metadata.json +0 -15
  153. package/src/resources/skills/mandu-styling/rules/style-component-compound.md +0 -235
  154. package/src/resources/skills/mandu-styling/rules/style-component-slots.md +0 -255
  155. package/src/resources/skills/mandu-styling/rules/style-component-tokens.md +0 -205
  156. package/src/resources/skills/mandu-styling/rules/style-island-animations.md +0 -272
  157. package/src/resources/skills/mandu-styling/rules/style-island-scoping.md +0 -167
  158. package/src/resources/skills/mandu-styling/rules/style-island-variants.md +0 -221
  159. package/src/resources/skills/mandu-styling/rules/style-perf-critical.md +0 -209
  160. package/src/resources/skills/mandu-styling/rules/style-perf-purge.md +0 -192
  161. package/src/resources/skills/mandu-styling/rules/style-setup-modules.md +0 -162
  162. package/src/resources/skills/mandu-styling/rules/style-setup-panda.md +0 -164
  163. package/src/resources/skills/mandu-styling/rules/style-setup-tailwind.md +0 -170
  164. package/src/resources/skills/mandu-styling/rules/style-tailwind-v4-gotchas.md +0 -179
  165. package/src/resources/skills/mandu-styling/rules/style-theme-darkmode.md +0 -229
  166. package/src/resources/skills/mandu-testing/SKILL.md +0 -132
  167. package/src/resources/skills/mandu-testing/metadata.json +0 -13
  168. package/src/resources/skills/mandu-testing/rules/_sections.md +0 -26
  169. package/src/resources/skills/mandu-testing/rules/_template.md +0 -65
  170. package/src/resources/skills/mandu-testing/rules/test-component-island.md +0 -195
  171. package/src/resources/skills/mandu-testing/rules/test-e2e-playwright.md +0 -196
  172. package/src/resources/skills/mandu-testing/rules/test-mock-fetch.md +0 -219
  173. package/src/resources/skills/mandu-testing/rules/test-slot-unit.md +0 -192
  174. package/src/resources/skills/mandu-ui/SKILL.md +0 -159
  175. package/src/resources/skills/mandu-ui/_sections.md +0 -23
  176. package/src/resources/skills/mandu-ui/_template.md +0 -32
  177. package/src/resources/skills/mandu-ui/metadata.json +0 -13
  178. package/src/resources/skills/mandu-ui/rules/ui-accessibility-aria.md +0 -232
  179. package/src/resources/skills/mandu-ui/rules/ui-accessibility-focus.md +0 -238
  180. package/src/resources/skills/mandu-ui/rules/ui-composition-patterns.md +0 -259
  181. package/src/resources/skills/mandu-ui/rules/ui-island-integration.md +0 -258
  182. package/src/resources/skills/mandu-ui/rules/ui-radix-patterns.md +0 -213
  183. package/src/resources/skills/mandu-ui/rules/ui-shadcn-setup.md +0 -209
package/src/resources/skills/mandu-ui/rules/ui-accessibility-focus.md DELETED
@@ -1,238 +0,0 @@
1
- ---
2
- title: Focus Management
3
- impact: HIGH
4
- impactDescription: Keyboard navigation and focus handling
5
- tags: ui, accessibility, focus, keyboard
6
- ---
7
-
8
- ## Focus Management
9
-
10
- **Impact: HIGH (Keyboard navigation and focus handling)**
11
-
12
- 키보드 사용자를 위한 포커스 관리와 네비게이션을 구현하세요.
13
-
14
- ## Focus Visible 스타일
15
-
16
- ```css
17
- /* globals.css */
18
- @layer base {
19
- /* 키보드 포커스만 표시 (마우스 클릭은 제외) */
20
- *:focus {
21
- outline: none;
22
- }
23
-
24
- *:focus-visible {
25
- @apply outline-2 outline-offset-2 outline-ring;
26
- }
27
-
28
- /* 커스텀 focus ring */
29
- .focus-ring {
30
- @apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
31
- }
32
- }
33
- ```
34
-
35
- ## Tailwind Focus 유틸리티
36
-
37
- ```tsx
38
- <button
39
- className={cn(
40
- "rounded-md px-4 py-2",
41
- // focus-visible만 스타일링 (키보드 포커스)
42
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
43
- )}
44
- >
45
- Click me
46
- </button>
47
- ```
48
-
49
- ## Focus Trap
50
-
51
- ```bash
52
- bun add focus-trap-react
53
- ```
54
-
55
- ```tsx
56
- // app/modal/client.tsx
57
- "use client";
58
-
59
- import FocusTrap from "focus-trap-react";
60
- import { useEffect, useRef } from "react";
61
-
62
- export function ModalIsland({ open, onClose, children }) {
63
- const closeButtonRef = useRef<HTMLButtonElement>(null);
64
-
65
- // ESC로 닫기
66
- useEffect(() => {
67
- const handleKeyDown = (e: KeyboardEvent) => {
68
- if (e.key === "Escape") onClose();
69
- };
70
-
71
- if (open) {
72
- document.addEventListener("keydown", handleKeyDown);
73
- return () => document.removeEventListener("keydown", handleKeyDown);
74
- }
75
- }, [open, onClose]);
76
-
77
- if (!open) return null;
78
-
79
- return (
80
- <FocusTrap
81
- focusTrapOptions={{
82
- initialFocus: () => closeButtonRef.current,
83
- allowOutsideClick: true,
84
- }}
85
- >
86
- <div className="fixed inset-0 z-50">
87
- <div className="fixed inset-0 bg-black/50" onClick={onClose} />
88
- <div
89
- role="dialog"
90
- aria-modal="true"
91
- className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg"
92
- >
93
- <button
94
- ref={closeButtonRef}
95
- onClick={onClose}
96
- className="absolute top-4 right-4"
97
- >
98
- Close
99
- </button>
100
- {children}
101
- </div>
102
- </div>
103
- </FocusTrap>
104
- );
105
- }
106
- ```
107
-
108
- ## Roving Focus
109
-
110
- ```tsx
111
- // app/toolbar/client.tsx
112
- "use client";
113
-
114
- import { useState, useRef, KeyboardEvent } from "react";
115
-
116
- export function ToolbarIsland() {
117
- const [focusedIndex, setFocusedIndex] = useState(0);
118
- const buttonsRef = useRef<(HTMLButtonElement | null)[]>([]);
119
-
120
- const items = ["Bold", "Italic", "Underline"];
121
-
122
- const handleKeyDown = (e: KeyboardEvent, index: number) => {
123
- let newIndex = index;
124
-
125
- switch (e.key) {
126
- case "ArrowRight":
127
- newIndex = (index + 1) % items.length;
128
- break;
129
- case "ArrowLeft":
130
- newIndex = (index - 1 + items.length) % items.length;
131
- break;
132
- case "Home":
133
- newIndex = 0;
134
- break;
135
- case "End":
136
- newIndex = items.length - 1;
137
- break;
138
- default:
139
- return;
140
- }
141
-
142
- e.preventDefault();
143
- setFocusedIndex(newIndex);
144
- buttonsRef.current[newIndex]?.focus();
145
- };
146
-
147
- return (
148
- <div role="toolbar" aria-label="Text formatting">
149
- {items.map((item, index) => (
150
- <button
151
- key={item}
152
- ref={(el) => (buttonsRef.current[index] = el)}
153
- tabIndex={focusedIndex === index ? 0 : -1}
154
- onKeyDown={(e) => handleKeyDown(e, index)}
155
- onFocus={() => setFocusedIndex(index)}
156
- className="px-3 py-1 rounded hover:bg-gray-100 focus-visible:ring-2"
157
- >
158
- {item}
159
- </button>
160
- ))}
161
- </div>
162
- );
163
- }
164
- ```
165
-
166
- ## Skip Link
167
-
168
- ```tsx
169
- // app/layout.tsx
170
- export default function RootLayout({ children }) {
171
- return (
172
- <html>
173
- <body>
174
- {/* 첫 번째 요소로 Skip Link */}
175
- <a
176
- href="#main-content"
177
- className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-white focus:rounded-md focus:shadow-lg"
178
- >
179
- Skip to main content
180
- </a>
181
-
182
- <header>{/* ... */}</header>
183
-
184
- <main id="main-content" tabIndex={-1}>
185
- {children}
186
- </main>
187
- </body>
188
- </html>
189
- );
190
- }
191
- ```
192
-
193
- ## 포커스 복원
194
-
195
- ```tsx
196
- // hooks/useFocusReturn.ts
197
- import { useRef, useEffect } from "react";
198
-
199
- export function useFocusReturn(isOpen: boolean) {
200
- const previousFocusRef = useRef<HTMLElement | null>(null);
201
-
202
- useEffect(() => {
203
- if (isOpen) {
204
- // 열릴 때 현재 포커스 저장
205
- previousFocusRef.current = document.activeElement as HTMLElement;
206
- } else if (previousFocusRef.current) {
207
- // 닫힐 때 포커스 복원
208
- previousFocusRef.current.focus();
209
- previousFocusRef.current = null;
210
- }
211
- }, [isOpen]);
212
- }
213
-
214
- // 사용
215
- export function DialogIsland({ open, onClose }) {
216
- useFocusReturn(open);
217
-
218
- // ...
219
- }
220
- ```
221
-
222
- ## Tab Order 관리
223
-
224
- ```tsx
225
- // 올바른 tabIndex 사용
226
- <div>
227
- {/* tabIndex="0": 자연스러운 탭 순서에 포함 */}
228
- <div tabIndex={0} role="button">Focusable div</div>
229
-
230
- {/* tabIndex="-1": 프로그래밍으로만 포커스 가능 */}
231
- <div tabIndex={-1} ref={focusTargetRef}>Focus target</div>
232
-
233
- {/* 양수 tabIndex는 피하기 */}
234
- {/* ❌ tabIndex={1} - 탭 순서 혼란 */}
235
- </div>
236
- ```
237
-
238
- Reference: [WAI-ARIA Focus Management](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/)
package/src/resources/skills/mandu-ui/rules/ui-composition-patterns.md DELETED
@@ -1,259 +0,0 @@
1
- ---
2
- title: UI Composition Patterns
3
- impact: MEDIUM
4
- impactDescription: Reusable and flexible component composition
5
- tags: ui, composition, patterns, reusable
6
- ---
7
-
8
- ## UI Composition Patterns
9
-
10
- **Impact: MEDIUM (Reusable and flexible component composition)**
11
-
12
- 재사용 가능하고 유연한 UI 컴포넌트 조합 패턴입니다.
13
-
14
- ## Slot Pattern (asChild)
15
-
16
- ```tsx
17
- // components/ui/button.tsx
18
- import { Slot } from "@radix-ui/react-slot";
19
-
20
- interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
21
- asChild?: boolean;
22
- }
23
-
24
- export function Button({ asChild, ...props }: ButtonProps) {
25
- const Comp = asChild ? Slot : "button";
26
- return <Comp className={cn(buttonVariants())} {...props} />;
27
- }
28
- ```
29
-
30
- ```tsx
31
- // 사용: Link에 Button 스타일 적용
32
- import Link from "next/link";
33
- import { Button } from "@/components/ui/button";
34
-
35
- <Button asChild variant="outline">
36
- <Link href="/about">About</Link>
37
- </Button>
38
-
39
- // 결과: <a> 태그에 Button 스타일이 적용됨
40
- ```
41
-
42
- ## Render Props
43
-
44
- ```tsx
45
- // components/data-table.tsx
46
- interface DataTableProps<T> {
47
- data: T[];
48
- renderRow: (item: T, index: number) => React.ReactNode;
49
- renderEmpty?: () => React.ReactNode;
50
- }
51
-
52
- export function DataTable<T>({ data, renderRow, renderEmpty }: DataTableProps<T>) {
53
- if (data.length === 0) {
54
- return renderEmpty?.() || <p>No data</p>;
55
- }
56
-
57
- return (
58
- <table>
59
- <tbody>
60
- {data.map((item, index) => (
61
- <tr key={index}>{renderRow(item, index)}</tr>
62
- ))}
63
- </tbody>
64
- </table>
65
- );
66
- }
67
- ```
68
-
69
- ```tsx
70
- // 사용
71
- <DataTable
72
- data={users}
73
- renderRow={(user) => (
74
- <>
75
- <td>{user.name}</td>
76
- <td>{user.email}</td>
77
- </>
78
- )}
79
- renderEmpty={() => <EmptyState icon={UserIcon} message="No users found" />}
80
- />
81
- ```
82
-
83
- ## Polymorphic Components
84
-
85
- ```tsx
86
- // components/ui/text.tsx
87
- type TextProps<T extends React.ElementType = "p"> = {
88
- as?: T;
89
- size?: "sm" | "md" | "lg";
90
- weight?: "normal" | "medium" | "bold";
91
- } & Omit<React.ComponentPropsWithoutRef<T>, "as" | "size" | "weight">;
92
-
93
- export function Text<T extends React.ElementType = "p">({
94
- as,
95
- size = "md",
96
- weight = "normal",
97
- className,
98
- ...props
99
- }: TextProps<T>) {
100
- const Component = as || "p";
101
-
102
- return (
103
- <Component
104
- className={cn(
105
- // Size
106
- { sm: "text-sm", md: "text-base", lg: "text-lg" }[size],
107
- // Weight
108
- { normal: "font-normal", medium: "font-medium", bold: "font-bold" }[weight],
109
- className
110
- )}
111
- {...props}
112
- />
113
- );
114
- }
115
- ```
116
-
117
- ```tsx
118
- // 사용
119
- <Text as="h1" size="lg" weight="bold">Title</Text>
120
- <Text as="span" size="sm">Caption</Text>
121
- <Text>Default paragraph</Text>
122
- ```
123
-
124
- ## Container/Presenter Pattern
125
-
126
- ```tsx
127
- // Container: 로직 담당
128
- // app/user-profile/client.tsx
129
- "use client";
130
-
131
- import { useState, useEffect } from "react";
132
- import { UserProfileView } from "./view";
133
-
134
- export function UserProfileIsland({ userId }: { userId: string }) {
135
- const [user, setUser] = useState(null);
136
- const [loading, setLoading] = useState(true);
137
-
138
- useEffect(() => {
139
- fetch(`/api/users/${userId}`)
140
- .then(res => res.json())
141
- .then(data => {
142
- setUser(data);
143
- setLoading(false);
144
- });
145
- }, [userId]);
146
-
147
- if (loading) return <UserProfileView.Skeleton />;
148
- if (!user) return <UserProfileView.Error />;
149
-
150
- return <UserProfileView user={user} />;
151
- }
152
- ```
153
-
154
- ```tsx
155
- // Presenter: UI 담당
156
- // app/user-profile/view.tsx
157
- import { Avatar } from "@/components/ui/avatar";
158
- import { Card, CardHeader, CardContent } from "@/components/ui/card";
159
- import { Skeleton } from "@/components/ui/skeleton";
160
-
161
- interface UserProfileViewProps {
162
- user: { name: string; email: string; avatar: string };
163
- }
164
-
165
- export function UserProfileView({ user }: UserProfileViewProps) {
166
- return (
167
- <Card>
168
- <CardHeader>
169
- <Avatar src={user.avatar} alt={user.name} />
170
- <h2>{user.name}</h2>
171
- </CardHeader>
172
- <CardContent>
173
- <p>{user.email}</p>
174
- </CardContent>
175
- </Card>
176
- );
177
- }
178
-
179
- UserProfileView.Skeleton = function Skeleton() {
180
- return (
181
- <Card>
182
- <CardHeader>
183
- <Skeleton className="h-12 w-12 rounded-full" />
184
- <Skeleton className="h-4 w-32" />
185
- </CardHeader>
186
- </Card>
187
- );
188
- };
189
-
190
- UserProfileView.Error = function Error() {
191
- return <Card><p>Failed to load user</p></Card>;
192
- };
193
- ```
194
-
195
- ## Layout Components
196
-
197
- ```tsx
198
- // components/layout/stack.tsx
199
- interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
200
- gap?: "sm" | "md" | "lg";
201
- direction?: "row" | "column";
202
- align?: "start" | "center" | "end";
203
- justify?: "start" | "center" | "end" | "between";
204
- }
205
-
206
- export function Stack({
207
- gap = "md",
208
- direction = "column",
209
- align = "start",
210
- justify = "start",
211
- className,
212
- ...props
213
- }: StackProps) {
214
- return (
215
- <div
216
- className={cn(
217
- "flex",
218
- direction === "column" ? "flex-col" : "flex-row",
219
- { sm: "gap-2", md: "gap-4", lg: "gap-6" }[gap],
220
- { start: "items-start", center: "items-center", end: "items-end" }[align],
221
- { start: "justify-start", center: "justify-center", end: "justify-end", between: "justify-between" }[justify],
222
- className
223
- )}
224
- {...props}
225
- />
226
- );
227
- }
228
- ```
229
-
230
- ```tsx
231
- // 사용
232
- <Stack gap="lg" align="center">
233
- <Avatar />
234
- <Stack gap="sm">
235
- <Text weight="bold">{name}</Text>
236
- <Text size="sm">{email}</Text>
237
- </Stack>
238
- </Stack>
239
- ```
240
-
241
- ## Higher-Order Island
242
-
243
- ```tsx
244
- // hoc/withIslandState.tsx
245
- export function withIslandState<T>(
246
- WrappedComponent: React.ComponentType<T & { state: any; setState: any }>
247
- ) {
248
- return function IslandWrapper(props: T) {
249
- const [state, setState] = useState({});
250
-
251
- return <WrappedComponent {...props} state={state} setState={setState} />;
252
- };
253
- }
254
-
255
- // 사용
256
- const EnhancedForm = withIslandState(FormComponent);
257
- ```
258
-
259
- Reference: [React Patterns](https://reactpatterns.com/)