@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.
- package/README.md +367 -367
- package/package.json +2 -2
- package/src/activity-monitor.ts +847 -847
- package/src/adapters/index.ts +20 -20
- package/src/adapters/monitor-adapter.ts +100 -100
- package/src/adapters/tool-adapter.ts +88 -88
- package/src/executor/error-handler.ts +250 -250
- package/src/executor/index.ts +22 -22
- package/src/executor/tool-executor.ts +148 -148
- package/src/hooks/config-watcher.ts +174 -174
- package/src/hooks/index.ts +23 -23
- package/src/hooks/mcp-hooks.ts +227 -227
- package/src/index.ts +106 -106
- package/src/logging/index.ts +15 -15
- package/src/logging/mcp-transport.ts +134 -134
- package/src/registry/index.ts +13 -13
- package/src/registry/mcp-tool-registry.ts +298 -298
- package/src/resources/skills/guides.ts +1136 -1136
- package/src/resources/skills/index.ts +12 -12
- package/src/resources/skills/loader.ts +218 -218
- package/src/resources/skills/mandu-composition/SKILL.md +91 -91
- package/src/resources/skills/mandu-composition/metadata.json +13 -13
- package/src/resources/skills/mandu-composition/rules/_sections.md +26 -26
- package/src/resources/skills/mandu-composition/rules/_template.md +77 -77
- package/src/resources/skills/mandu-composition/rules/comp-arch-avoid-boolean-props.md +146 -146
- package/src/resources/skills/mandu-composition/rules/comp-arch-compound-components.md +164 -164
- package/src/resources/skills/mandu-composition/rules/comp-island-event.md +161 -161
- package/src/resources/skills/mandu-composition/rules/comp-island-slot-split.md +167 -167
- package/src/resources/skills/mandu-composition/rules/comp-pattern-children.md +149 -149
- package/src/resources/skills/mandu-composition/rules/comp-state-context-interface.md +148 -148
- package/src/resources/skills/mandu-composition/rules/comp-state-lift-state.md +150 -150
- package/src/resources/skills/mandu-deployment/SKILL.md +92 -92
- package/src/resources/skills/mandu-deployment/_sections.md +41 -41
- package/src/resources/skills/mandu-deployment/_template.md +38 -38
- package/src/resources/skills/mandu-deployment/metadata.json +13 -13
- package/src/resources/skills/mandu-deployment/rules/deploy-build-bun.md +109 -109
- package/src/resources/skills/mandu-deployment/rules/deploy-build-output.md +115 -115
- package/src/resources/skills/mandu-deployment/rules/deploy-cicd-github.md +219 -219
- package/src/resources/skills/mandu-deployment/rules/deploy-docker-bun.md +150 -150
- package/src/resources/skills/mandu-deployment/rules/deploy-docker-compose.md +223 -223
- package/src/resources/skills/mandu-deployment/rules/deploy-platform-fly.md +152 -152
- package/src/resources/skills/mandu-deployment/rules/deploy-platform-render.md +179 -179
- package/src/resources/skills/mandu-deployment/rules/deploy-platform-supabase.md +323 -323
- package/src/resources/skills/mandu-deployment/rules/deploy-platform-vercel.md +140 -140
- package/src/resources/skills/mandu-fs-routes/SKILL.md +82 -82
- package/src/resources/skills/mandu-fs-routes/metadata.json +12 -12
- package/src/resources/skills/mandu-fs-routes/rules/_sections.md +36 -36
- package/src/resources/skills/mandu-fs-routes/rules/_template.md +69 -69
- package/src/resources/skills/mandu-fs-routes/rules/routes-api-methods.md +65 -65
- package/src/resources/skills/mandu-fs-routes/rules/routes-dynamic-param.md +93 -93
- package/src/resources/skills/mandu-fs-routes/rules/routes-naming-page.md +55 -55
- package/src/resources/skills/mandu-guard/SKILL.md +129 -129
- package/src/resources/skills/mandu-guard/metadata.json +12 -12
- package/src/resources/skills/mandu-guard/rules/_sections.md +36 -36
- package/src/resources/skills/mandu-guard/rules/_template.md +82 -82
- package/src/resources/skills/mandu-guard/rules/guard-config-rules.md +100 -100
- package/src/resources/skills/mandu-guard/rules/guard-layer-direction.md +76 -76
- package/src/resources/skills/mandu-guard/rules/guard-preset-mandu.md +81 -81
- package/src/resources/skills/mandu-guard/rules/guard-validate-import.md +80 -80
- package/src/resources/skills/mandu-hydration/SKILL.md +91 -91
- package/src/resources/skills/mandu-hydration/metadata.json +12 -12
- package/src/resources/skills/mandu-hydration/rules/_sections.md +31 -31
- package/src/resources/skills/mandu-hydration/rules/_template.md +72 -72
- package/src/resources/skills/mandu-hydration/rules/hydration-data-event.md +109 -109
- package/src/resources/skills/mandu-hydration/rules/hydration-directive-use-client.md +55 -55
- package/src/resources/skills/mandu-hydration/rules/hydration-island-setup.md +113 -113
- package/src/resources/skills/mandu-hydration/rules/hydration-priority-visible.md +68 -68
- package/src/resources/skills/mandu-performance/SKILL.md +85 -85
- package/src/resources/skills/mandu-performance/metadata.json +14 -14
- package/src/resources/skills/mandu-performance/rules/_sections.md +31 -31
- package/src/resources/skills/mandu-performance/rules/_template.md +64 -64
- package/src/resources/skills/mandu-performance/rules/perf-async-defer-await.md +103 -103
- package/src/resources/skills/mandu-performance/rules/perf-async-parallel.md +95 -95
- package/src/resources/skills/mandu-performance/rules/perf-bun-file.md +124 -124
- package/src/resources/skills/mandu-performance/rules/perf-bun-serve.md +125 -125
- package/src/resources/skills/mandu-performance/rules/perf-bundle-imports.md +80 -80
- package/src/resources/skills/mandu-performance/rules/perf-bundle-island-lazy.md +145 -145
- package/src/resources/skills/mandu-performance/rules/perf-cache-react.md +98 -98
- package/src/resources/skills/mandu-performance/rules/perf-render-transitions.md +154 -154
- package/src/resources/skills/mandu-security/SKILL.md +87 -87
- package/src/resources/skills/mandu-security/metadata.json +13 -13
- package/src/resources/skills/mandu-security/rules/_sections.md +31 -31
- package/src/resources/skills/mandu-security/rules/_template.md +74 -74
- package/src/resources/skills/mandu-security/rules/sec-auth-guard.md +127 -127
- package/src/resources/skills/mandu-security/rules/sec-env-management.md +133 -133
- package/src/resources/skills/mandu-security/rules/sec-input-validate.md +148 -148
- package/src/resources/skills/mandu-security/rules/sec-protect-csrf.md +146 -146
- package/src/resources/skills/mandu-security/rules/sec-protect-headers.md +138 -138
- package/src/resources/skills/mandu-slot/SKILL.md +85 -85
- package/src/resources/skills/mandu-slot/metadata.json +12 -12
- package/src/resources/skills/mandu-slot/rules/_sections.md +36 -36
- package/src/resources/skills/mandu-slot/rules/_template.md +63 -63
- package/src/resources/skills/mandu-slot/rules/slot-basic-structure.md +38 -38
- package/src/resources/skills/mandu-slot/rules/slot-ctx-response.md +56 -56
- package/src/resources/skills/mandu-slot/rules/slot-guard-auth.md +59 -59
- package/src/resources/skills/mandu-slot/rules/slot-http-methods.md +64 -64
- package/src/resources/skills/mandu-styling/SKILL.md +154 -154
- package/src/resources/skills/mandu-styling/_sections.md +43 -43
- package/src/resources/skills/mandu-styling/_template.md +32 -32
- package/src/resources/skills/mandu-styling/metadata.json +15 -15
- package/src/resources/skills/mandu-styling/rules/style-component-compound.md +235 -235
- package/src/resources/skills/mandu-styling/rules/style-component-slots.md +255 -255
- package/src/resources/skills/mandu-styling/rules/style-component-tokens.md +205 -205
- package/src/resources/skills/mandu-styling/rules/style-island-animations.md +272 -272
- package/src/resources/skills/mandu-styling/rules/style-island-scoping.md +167 -167
- package/src/resources/skills/mandu-styling/rules/style-island-variants.md +221 -221
- package/src/resources/skills/mandu-styling/rules/style-perf-critical.md +209 -209
- package/src/resources/skills/mandu-styling/rules/style-perf-purge.md +192 -192
- package/src/resources/skills/mandu-styling/rules/style-setup-modules.md +162 -162
- package/src/resources/skills/mandu-styling/rules/style-setup-panda.md +164 -164
- package/src/resources/skills/mandu-styling/rules/style-setup-tailwind.md +170 -170
- package/src/resources/skills/mandu-styling/rules/style-tailwind-v4-gotchas.md +179 -179
- package/src/resources/skills/mandu-styling/rules/style-theme-darkmode.md +229 -229
- package/src/resources/skills/mandu-testing/SKILL.md +99 -99
- package/src/resources/skills/mandu-testing/metadata.json +13 -13
- package/src/resources/skills/mandu-testing/rules/_sections.md +26 -26
- package/src/resources/skills/mandu-testing/rules/_template.md +65 -65
- package/src/resources/skills/mandu-testing/rules/test-component-island.md +195 -195
- package/src/resources/skills/mandu-testing/rules/test-e2e-playwright.md +196 -196
- package/src/resources/skills/mandu-testing/rules/test-mock-fetch.md +219 -219
- package/src/resources/skills/mandu-testing/rules/test-slot-unit.md +192 -192
- package/src/resources/skills/mandu-ui/SKILL.md +117 -117
- package/src/resources/skills/mandu-ui/_sections.md +23 -23
- package/src/resources/skills/mandu-ui/_template.md +32 -32
- package/src/resources/skills/mandu-ui/metadata.json +13 -13
- package/src/resources/skills/mandu-ui/rules/ui-accessibility-aria.md +232 -232
- package/src/resources/skills/mandu-ui/rules/ui-accessibility-focus.md +238 -238
- package/src/resources/skills/mandu-ui/rules/ui-composition-patterns.md +259 -259
- package/src/resources/skills/mandu-ui/rules/ui-island-integration.md +258 -258
- package/src/resources/skills/mandu-ui/rules/ui-radix-patterns.md +213 -213
- package/src/resources/skills/mandu-ui/rules/ui-shadcn-setup.md +209 -209
- package/src/resources/skills/recipes.ts +932 -932
- package/src/tools/generate.ts +7 -4
- package/src/tools/guard.ts +17 -4
- package/src/tools/hydration.ts +10 -10
- package/src/tools/project.ts +334 -334
- package/src/tools/runtime.ts +497 -497
- package/src/tools/seo.ts +417 -417
- package/src/tools/spec.ts +80 -159
- package/src/utils/project.ts +22 -12
- 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/)
|