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