@mandujs/mcp 0.13.0 → 0.17.0

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 (136) hide show
  1. package/README.md +102 -7
  2. package/package.json +3 -2
  3. package/src/adapters/index.ts +20 -20
  4. package/src/adapters/monitor-adapter.ts +100 -100
  5. package/src/adapters/tool-adapter.ts +88 -88
  6. package/src/executor/error-handler.ts +250 -250
  7. package/src/executor/index.ts +22 -22
  8. package/src/executor/tool-executor.ts +148 -148
  9. package/src/hooks/config-watcher.ts +174 -174
  10. package/src/hooks/index.ts +23 -23
  11. package/src/hooks/mcp-hooks.ts +227 -227
  12. package/src/logging/index.ts +15 -15
  13. package/src/logging/mcp-transport.ts +134 -134
  14. package/src/registry/index.ts +13 -13
  15. package/src/registry/mcp-tool-registry.ts +298 -298
  16. package/src/resources/skills/guides.ts +1136 -1136
  17. package/src/resources/skills/index.ts +12 -12
  18. package/src/resources/skills/loader.ts +218 -218
  19. package/src/resources/skills/mandu-composition/SKILL.md +91 -91
  20. package/src/resources/skills/mandu-composition/metadata.json +13 -13
  21. package/src/resources/skills/mandu-composition/rules/_sections.md +26 -26
  22. package/src/resources/skills/mandu-composition/rules/_template.md +77 -77
  23. package/src/resources/skills/mandu-composition/rules/comp-arch-avoid-boolean-props.md +146 -146
  24. package/src/resources/skills/mandu-composition/rules/comp-arch-compound-components.md +164 -164
  25. package/src/resources/skills/mandu-composition/rules/comp-island-event.md +161 -161
  26. package/src/resources/skills/mandu-composition/rules/comp-island-slot-split.md +167 -167
  27. package/src/resources/skills/mandu-composition/rules/comp-pattern-children.md +149 -149
  28. package/src/resources/skills/mandu-composition/rules/comp-state-context-interface.md +148 -148
  29. package/src/resources/skills/mandu-composition/rules/comp-state-lift-state.md +150 -150
  30. package/src/resources/skills/mandu-deployment/SKILL.md +92 -92
  31. package/src/resources/skills/mandu-deployment/_sections.md +41 -41
  32. package/src/resources/skills/mandu-deployment/_template.md +38 -38
  33. package/src/resources/skills/mandu-deployment/metadata.json +13 -13
  34. package/src/resources/skills/mandu-deployment/rules/deploy-build-bun.md +109 -109
  35. package/src/resources/skills/mandu-deployment/rules/deploy-build-output.md +115 -115
  36. package/src/resources/skills/mandu-deployment/rules/deploy-cicd-github.md +219 -219
  37. package/src/resources/skills/mandu-deployment/rules/deploy-docker-bun.md +150 -150
  38. package/src/resources/skills/mandu-deployment/rules/deploy-docker-compose.md +223 -223
  39. package/src/resources/skills/mandu-deployment/rules/deploy-platform-fly.md +152 -152
  40. package/src/resources/skills/mandu-deployment/rules/deploy-platform-render.md +179 -179
  41. package/src/resources/skills/mandu-deployment/rules/deploy-platform-supabase.md +323 -323
  42. package/src/resources/skills/mandu-deployment/rules/deploy-platform-vercel.md +140 -140
  43. package/src/resources/skills/mandu-fs-routes/SKILL.md +82 -82
  44. package/src/resources/skills/mandu-fs-routes/metadata.json +12 -12
  45. package/src/resources/skills/mandu-fs-routes/rules/_sections.md +36 -36
  46. package/src/resources/skills/mandu-fs-routes/rules/_template.md +69 -69
  47. package/src/resources/skills/mandu-fs-routes/rules/routes-api-methods.md +65 -65
  48. package/src/resources/skills/mandu-fs-routes/rules/routes-dynamic-param.md +93 -93
  49. package/src/resources/skills/mandu-fs-routes/rules/routes-naming-page.md +55 -55
  50. package/src/resources/skills/mandu-guard/SKILL.md +129 -129
  51. package/src/resources/skills/mandu-guard/metadata.json +12 -12
  52. package/src/resources/skills/mandu-guard/rules/_sections.md +36 -36
  53. package/src/resources/skills/mandu-guard/rules/_template.md +82 -82
  54. package/src/resources/skills/mandu-guard/rules/guard-config-rules.md +100 -100
  55. package/src/resources/skills/mandu-guard/rules/guard-layer-direction.md +76 -76
  56. package/src/resources/skills/mandu-guard/rules/guard-preset-mandu.md +81 -81
  57. package/src/resources/skills/mandu-guard/rules/guard-validate-import.md +80 -80
  58. package/src/resources/skills/mandu-hydration/SKILL.md +91 -91
  59. package/src/resources/skills/mandu-hydration/metadata.json +12 -12
  60. package/src/resources/skills/mandu-hydration/rules/_sections.md +31 -31
  61. package/src/resources/skills/mandu-hydration/rules/_template.md +72 -72
  62. package/src/resources/skills/mandu-hydration/rules/hydration-data-event.md +109 -109
  63. package/src/resources/skills/mandu-hydration/rules/hydration-directive-use-client.md +55 -55
  64. package/src/resources/skills/mandu-hydration/rules/hydration-island-setup.md +113 -113
  65. package/src/resources/skills/mandu-hydration/rules/hydration-priority-visible.md +68 -68
  66. package/src/resources/skills/mandu-performance/SKILL.md +85 -85
  67. package/src/resources/skills/mandu-performance/metadata.json +14 -14
  68. package/src/resources/skills/mandu-performance/rules/_sections.md +31 -31
  69. package/src/resources/skills/mandu-performance/rules/_template.md +64 -64
  70. package/src/resources/skills/mandu-performance/rules/perf-async-defer-await.md +103 -103
  71. package/src/resources/skills/mandu-performance/rules/perf-async-parallel.md +95 -95
  72. package/src/resources/skills/mandu-performance/rules/perf-bun-file.md +124 -124
  73. package/src/resources/skills/mandu-performance/rules/perf-bun-serve.md +125 -125
  74. package/src/resources/skills/mandu-performance/rules/perf-bundle-imports.md +80 -80
  75. package/src/resources/skills/mandu-performance/rules/perf-bundle-island-lazy.md +145 -145
  76. package/src/resources/skills/mandu-performance/rules/perf-cache-react.md +98 -98
  77. package/src/resources/skills/mandu-performance/rules/perf-render-transitions.md +154 -154
  78. package/src/resources/skills/mandu-security/SKILL.md +87 -87
  79. package/src/resources/skills/mandu-security/metadata.json +13 -13
  80. package/src/resources/skills/mandu-security/rules/_sections.md +31 -31
  81. package/src/resources/skills/mandu-security/rules/_template.md +74 -74
  82. package/src/resources/skills/mandu-security/rules/sec-auth-guard.md +127 -127
  83. package/src/resources/skills/mandu-security/rules/sec-env-management.md +133 -133
  84. package/src/resources/skills/mandu-security/rules/sec-input-validate.md +148 -148
  85. package/src/resources/skills/mandu-security/rules/sec-protect-csrf.md +146 -146
  86. package/src/resources/skills/mandu-security/rules/sec-protect-headers.md +138 -138
  87. package/src/resources/skills/mandu-slot/SKILL.md +85 -85
  88. package/src/resources/skills/mandu-slot/metadata.json +12 -12
  89. package/src/resources/skills/mandu-slot/rules/_sections.md +36 -36
  90. package/src/resources/skills/mandu-slot/rules/_template.md +63 -63
  91. package/src/resources/skills/mandu-slot/rules/slot-basic-structure.md +38 -38
  92. package/src/resources/skills/mandu-slot/rules/slot-ctx-response.md +56 -56
  93. package/src/resources/skills/mandu-slot/rules/slot-guard-auth.md +59 -59
  94. package/src/resources/skills/mandu-slot/rules/slot-http-methods.md +64 -64
  95. package/src/resources/skills/mandu-styling/SKILL.md +154 -154
  96. package/src/resources/skills/mandu-styling/_sections.md +43 -43
  97. package/src/resources/skills/mandu-styling/_template.md +32 -32
  98. package/src/resources/skills/mandu-styling/metadata.json +15 -15
  99. package/src/resources/skills/mandu-styling/rules/style-component-compound.md +235 -235
  100. package/src/resources/skills/mandu-styling/rules/style-component-slots.md +255 -255
  101. package/src/resources/skills/mandu-styling/rules/style-component-tokens.md +205 -205
  102. package/src/resources/skills/mandu-styling/rules/style-island-animations.md +272 -272
  103. package/src/resources/skills/mandu-styling/rules/style-island-scoping.md +167 -167
  104. package/src/resources/skills/mandu-styling/rules/style-island-variants.md +221 -221
  105. package/src/resources/skills/mandu-styling/rules/style-perf-critical.md +209 -209
  106. package/src/resources/skills/mandu-styling/rules/style-perf-purge.md +192 -192
  107. package/src/resources/skills/mandu-styling/rules/style-setup-modules.md +162 -162
  108. package/src/resources/skills/mandu-styling/rules/style-setup-panda.md +164 -164
  109. package/src/resources/skills/mandu-styling/rules/style-setup-tailwind.md +170 -170
  110. package/src/resources/skills/mandu-styling/rules/style-tailwind-v4-gotchas.md +179 -179
  111. package/src/resources/skills/mandu-styling/rules/style-theme-darkmode.md +229 -229
  112. package/src/resources/skills/mandu-testing/SKILL.md +99 -99
  113. package/src/resources/skills/mandu-testing/metadata.json +13 -13
  114. package/src/resources/skills/mandu-testing/rules/_sections.md +26 -26
  115. package/src/resources/skills/mandu-testing/rules/_template.md +65 -65
  116. package/src/resources/skills/mandu-testing/rules/test-component-island.md +195 -195
  117. package/src/resources/skills/mandu-testing/rules/test-e2e-playwright.md +196 -196
  118. package/src/resources/skills/mandu-testing/rules/test-mock-fetch.md +219 -219
  119. package/src/resources/skills/mandu-testing/rules/test-slot-unit.md +192 -192
  120. package/src/resources/skills/mandu-ui/SKILL.md +117 -117
  121. package/src/resources/skills/mandu-ui/_sections.md +23 -23
  122. package/src/resources/skills/mandu-ui/_template.md +32 -32
  123. package/src/resources/skills/mandu-ui/metadata.json +13 -13
  124. package/src/resources/skills/mandu-ui/rules/ui-accessibility-aria.md +232 -232
  125. package/src/resources/skills/mandu-ui/rules/ui-accessibility-focus.md +238 -238
  126. package/src/resources/skills/mandu-ui/rules/ui-composition-patterns.md +259 -259
  127. package/src/resources/skills/mandu-ui/rules/ui-island-integration.md +258 -258
  128. package/src/resources/skills/mandu-ui/rules/ui-radix-patterns.md +213 -213
  129. package/src/resources/skills/mandu-ui/rules/ui-shadcn-setup.md +209 -209
  130. package/src/resources/skills/recipes.ts +932 -932
  131. package/src/tools/ate.ts +219 -0
  132. package/src/tools/index.ts +4 -1
  133. package/src/tools/project.ts +334 -334
  134. package/src/tools/runtime.ts +497 -497
  135. package/src/tools/seo.ts +417 -417
  136. package/src/utils/withWarnings.ts +83 -83
@@ -1,238 +1,238 @@
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/)
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/)