@mandujs/core 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 (173) hide show
  1. package/README.ko.md +304 -304
  2. package/README.md +653 -653
  3. package/package.json +1 -1
  4. package/src/brain/architecture/analyzer.ts +28 -26
  5. package/src/brain/doctor/analyzer.ts +1 -1
  6. package/src/bundler/build.ts +91 -91
  7. package/src/bundler/css.ts +302 -302
  8. package/src/bundler/dev.ts +0 -1
  9. package/src/change/history.ts +3 -3
  10. package/src/change/snapshot.ts +10 -9
  11. package/src/change/transaction.ts +2 -2
  12. package/src/client/Link.tsx +227 -227
  13. package/src/client/globals.ts +44 -44
  14. package/src/client/hooks.ts +267 -267
  15. package/src/client/index.ts +5 -5
  16. package/src/client/island.ts +8 -8
  17. package/src/client/router.ts +435 -435
  18. package/src/client/runtime.ts +23 -23
  19. package/src/client/serialize.ts +404 -404
  20. package/src/client/window-state.ts +101 -101
  21. package/src/config/mandu.ts +94 -96
  22. package/src/config/validate.ts +213 -215
  23. package/src/config/watcher.ts +311 -311
  24. package/src/constants.ts +40 -40
  25. package/src/content/content-layer.ts +314 -314
  26. package/src/content/content.test.ts +433 -433
  27. package/src/content/data-store.ts +245 -245
  28. package/src/content/digest.ts +133 -133
  29. package/src/content/index.ts +164 -164
  30. package/src/content/loader-context.ts +172 -172
  31. package/src/content/loaders/api.ts +216 -216
  32. package/src/content/loaders/file.ts +169 -169
  33. package/src/content/loaders/glob.ts +252 -252
  34. package/src/content/loaders/index.ts +34 -34
  35. package/src/content/loaders/types.ts +137 -137
  36. package/src/content/meta-store.ts +209 -209
  37. package/src/content/types.ts +282 -282
  38. package/src/content/watcher.ts +135 -135
  39. package/src/contract/client-safe.test.ts +42 -42
  40. package/src/contract/client-safe.ts +114 -114
  41. package/src/contract/client.ts +16 -16
  42. package/src/contract/define.ts +459 -459
  43. package/src/contract/handler.ts +10 -10
  44. package/src/contract/normalize.test.ts +276 -276
  45. package/src/contract/normalize.ts +404 -404
  46. package/src/contract/registry.test.ts +206 -206
  47. package/src/contract/registry.ts +568 -568
  48. package/src/contract/schema.ts +48 -48
  49. package/src/contract/types.ts +58 -58
  50. package/src/contract/validator.ts +32 -32
  51. package/src/devtools/ai/context-builder.ts +375 -375
  52. package/src/devtools/ai/index.ts +25 -25
  53. package/src/devtools/ai/mcp-connector.ts +465 -465
  54. package/src/devtools/client/catchers/error-catcher.ts +327 -327
  55. package/src/devtools/client/catchers/index.ts +18 -18
  56. package/src/devtools/client/catchers/network-proxy.ts +363 -363
  57. package/src/devtools/client/components/index.ts +39 -39
  58. package/src/devtools/client/components/kitchen-root.tsx +362 -362
  59. package/src/devtools/client/components/mandu-character.tsx +241 -241
  60. package/src/devtools/client/components/overlay.tsx +368 -368
  61. package/src/devtools/client/components/panel/errors-panel.tsx +259 -259
  62. package/src/devtools/client/components/panel/guard-panel.tsx +244 -244
  63. package/src/devtools/client/components/panel/index.ts +32 -32
  64. package/src/devtools/client/components/panel/islands-panel.tsx +304 -304
  65. package/src/devtools/client/components/panel/network-panel.tsx +292 -292
  66. package/src/devtools/client/components/panel/panel-container.tsx +259 -259
  67. package/src/devtools/client/filters/context-filters.ts +282 -282
  68. package/src/devtools/client/filters/index.ts +16 -16
  69. package/src/devtools/client/index.ts +63 -63
  70. package/src/devtools/client/persistence.ts +335 -335
  71. package/src/devtools/client/state-manager.ts +478 -478
  72. package/src/devtools/design-tokens.ts +263 -263
  73. package/src/devtools/hook/create-hook.ts +207 -207
  74. package/src/devtools/hook/index.ts +13 -13
  75. package/src/devtools/index.ts +439 -439
  76. package/src/devtools/init.ts +266 -266
  77. package/src/devtools/protocol.ts +237 -237
  78. package/src/devtools/server/index.ts +17 -17
  79. package/src/devtools/server/source-context.ts +444 -444
  80. package/src/devtools/types.ts +319 -319
  81. package/src/devtools/worker/index.ts +25 -25
  82. package/src/devtools/worker/redaction-worker.ts +222 -222
  83. package/src/devtools/worker/worker-manager.ts +409 -409
  84. package/src/error/classifier.ts +2 -2
  85. package/src/error/domains.ts +265 -265
  86. package/src/error/formatter.ts +32 -32
  87. package/src/error/result.ts +46 -46
  88. package/src/error/stack-analyzer.ts +5 -0
  89. package/src/error/types.ts +6 -6
  90. package/src/errors/extractor.ts +409 -409
  91. package/src/errors/index.ts +19 -19
  92. package/src/filling/auth.ts +308 -308
  93. package/src/filling/context.ts +569 -569
  94. package/src/filling/deps.ts +238 -238
  95. package/src/generator/contract-glue.ts +2 -1
  96. package/src/generator/generate.ts +12 -10
  97. package/src/generator/index.ts +3 -3
  98. package/src/generator/templates.ts +80 -79
  99. package/src/guard/analyzer.ts +360 -360
  100. package/src/guard/ast-analyzer.ts +806 -806
  101. package/src/guard/auto-correct.ts +1 -1
  102. package/src/guard/check.ts +128 -128
  103. package/src/guard/contract-guard.ts +9 -9
  104. package/src/guard/file-type.test.ts +24 -24
  105. package/src/guard/presets/atomic.ts +70 -70
  106. package/src/guard/presets/clean.ts +77 -77
  107. package/src/guard/presets/cqrs.test.ts +35 -14
  108. package/src/guard/presets/fsd.ts +79 -79
  109. package/src/guard/presets/hexagonal.ts +68 -68
  110. package/src/guard/presets/index.ts +291 -291
  111. package/src/guard/reporter.ts +445 -445
  112. package/src/guard/rules.ts +12 -12
  113. package/src/guard/statistics.ts +578 -578
  114. package/src/guard/suggestions.ts +358 -358
  115. package/src/guard/types.ts +348 -348
  116. package/src/guard/validator.ts +834 -834
  117. package/src/guard/watcher.ts +404 -404
  118. package/src/index.ts +1 -0
  119. package/src/intent/index.ts +310 -310
  120. package/src/island/index.ts +304 -304
  121. package/src/logging/index.ts +22 -22
  122. package/src/logging/transports.ts +365 -365
  123. package/src/paths.test.ts +47 -0
  124. package/src/paths.ts +47 -0
  125. package/src/plugins/index.ts +38 -38
  126. package/src/plugins/registry.ts +377 -377
  127. package/src/plugins/types.ts +363 -363
  128. package/src/report/build.ts +1 -1
  129. package/src/report/index.ts +1 -1
  130. package/src/router/fs-patterns.ts +387 -387
  131. package/src/router/fs-routes.ts +344 -401
  132. package/src/router/fs-scanner.ts +497 -497
  133. package/src/router/fs-types.ts +270 -278
  134. package/src/router/index.ts +81 -81
  135. package/src/runtime/boundary.tsx +232 -232
  136. package/src/runtime/compose.ts +222 -222
  137. package/src/runtime/lifecycle.ts +381 -381
  138. package/src/runtime/logger.test.ts +345 -345
  139. package/src/runtime/logger.ts +677 -677
  140. package/src/runtime/router.test.ts +476 -476
  141. package/src/runtime/router.ts +105 -105
  142. package/src/runtime/security.ts +155 -155
  143. package/src/runtime/server.ts +24 -24
  144. package/src/runtime/session-key.ts +328 -328
  145. package/src/runtime/ssr.ts +367 -367
  146. package/src/runtime/streaming-ssr.ts +1245 -1245
  147. package/src/runtime/trace.ts +144 -144
  148. package/src/seo/index.ts +214 -214
  149. package/src/seo/integration/ssr.ts +307 -307
  150. package/src/seo/render/basic.ts +427 -427
  151. package/src/seo/render/index.ts +143 -143
  152. package/src/seo/render/jsonld.ts +539 -539
  153. package/src/seo/render/opengraph.ts +191 -191
  154. package/src/seo/render/robots.ts +116 -116
  155. package/src/seo/render/sitemap.ts +137 -137
  156. package/src/seo/render/twitter.ts +126 -126
  157. package/src/seo/resolve/index.ts +353 -353
  158. package/src/seo/resolve/opengraph.ts +143 -143
  159. package/src/seo/resolve/robots.ts +73 -73
  160. package/src/seo/resolve/title.ts +94 -94
  161. package/src/seo/resolve/twitter.ts +73 -73
  162. package/src/seo/resolve/url.ts +97 -97
  163. package/src/seo/routes/index.ts +290 -290
  164. package/src/seo/types.ts +575 -575
  165. package/src/slot/validator.ts +39 -39
  166. package/src/spec/index.ts +3 -3
  167. package/src/spec/load.ts +76 -76
  168. package/src/spec/lock.ts +56 -56
  169. package/src/utils/bun.ts +8 -8
  170. package/src/utils/lru-cache.ts +75 -75
  171. package/src/utils/safe-io.ts +188 -188
  172. package/src/utils/string-safe.ts +298 -298
  173. package/src/watcher/rules.ts +5 -5
@@ -1,81 +1,81 @@
1
- /**
2
- * FS Routes Module
3
- *
4
- * 파일 시스템 기반 라우팅 시스템
5
- *
6
- * @module router
7
- *
8
- * @example
9
- * ```typescript
10
- * import { scanRoutes, generateManifest, watchFSRoutes } from "@mandujs/core/router";
11
- *
12
- * // 간편 스캔
13
- * const result = await scanRoutes("/path/to/project");
14
- * console.log(result.routes);
15
- *
16
- * // 매니페스트 생성
17
- * const { manifest } = await generateManifest("/path/to/project", {
18
- * outputPath: ".mandu/manifest.json"
19
- * });
20
- *
21
- * // 감시 모드
22
- * const watcher = await watchFSRoutes("/path/to/project", {
23
- * onChange: (result) => console.log("Routes updated!")
24
- * });
25
- * ```
26
- */
27
-
28
- // Types
29
- export type {
30
- // Segment types
31
- SegmentType,
32
- RouteSegment,
33
-
34
- // File types
35
- ScannedFileType,
36
- ScannedFile,
37
-
38
- // Route config
39
- FSRouteConfig,
40
-
41
- // Scanner config
42
- FSScannerConfig,
43
-
44
- // Results
45
- ScanResult,
46
- ScanError,
47
- ScanStats,
48
- } from "./fs-types";
49
-
50
- export { DEFAULT_SCANNER_CONFIG, FILE_PATTERNS, SEGMENT_PATTERNS } from "./fs-types";
51
-
52
- // Pattern utilities
53
- export {
54
- parseSegment,
55
- parseSegments,
56
- segmentsToPattern,
57
- pathToPattern,
58
- detectFileType,
59
- isPrivateFolder,
60
- isGroupFolder,
61
- generateRouteId,
62
- calculateRoutePriority,
63
- sortRoutesByPriority,
64
- validateSegments,
65
- patternsConflict,
66
- } from "./fs-patterns";
67
-
68
- // Scanner
69
- export { FSScanner, createFSScanner, scanRoutes } from "./fs-scanner";
70
-
71
- // Generator
72
- export type { GenerateResult, GenerateOptions, RouteChangeCallback, FSRoutesWatcher } from "./fs-routes";
73
-
74
- export {
75
- fsRouteToRouteSpec,
76
- scanResultToManifest,
77
- mergeManifests,
78
- generateManifest,
79
- watchFSRoutes,
80
- formatRoutesForCLI,
81
- } from "./fs-routes";
1
+ /**
2
+ * FS Routes Module
3
+ *
4
+ * 파일 시스템 기반 라우팅 시스템
5
+ *
6
+ * @module router
7
+ *
8
+ * @example
9
+ * ```typescript
10
+ * import { scanRoutes, generateManifest, watchFSRoutes } from "@mandujs/core/router";
11
+ *
12
+ * // 간편 스캔
13
+ * const result = await scanRoutes("/path/to/project");
14
+ * console.log(result.routes);
15
+ *
16
+ * // 매니페스트 생성
17
+ * const { manifest } = await generateManifest("/path/to/project", {
18
+ * outputPath: ".mandu/manifest.json"
19
+ * });
20
+ *
21
+ * // 감시 모드
22
+ * const watcher = await watchFSRoutes("/path/to/project", {
23
+ * onChange: (result) => console.log("Routes updated!")
24
+ * });
25
+ * ```
26
+ */
27
+
28
+ // Types
29
+ export type {
30
+ // Segment types
31
+ SegmentType,
32
+ RouteSegment,
33
+
34
+ // File types
35
+ ScannedFileType,
36
+ ScannedFile,
37
+
38
+ // Route config
39
+ FSRouteConfig,
40
+
41
+ // Scanner config
42
+ FSScannerConfig,
43
+
44
+ // Results
45
+ ScanResult,
46
+ ScanError,
47
+ ScanStats,
48
+ } from "./fs-types";
49
+
50
+ export { DEFAULT_SCANNER_CONFIG, FILE_PATTERNS, SEGMENT_PATTERNS } from "./fs-types";
51
+
52
+ // Pattern utilities
53
+ export {
54
+ parseSegment,
55
+ parseSegments,
56
+ segmentsToPattern,
57
+ pathToPattern,
58
+ detectFileType,
59
+ isPrivateFolder,
60
+ isGroupFolder,
61
+ generateRouteId,
62
+ calculateRoutePriority,
63
+ sortRoutesByPriority,
64
+ validateSegments,
65
+ patternsConflict,
66
+ } from "./fs-patterns";
67
+
68
+ // Scanner
69
+ export { FSScanner, createFSScanner, scanRoutes } from "./fs-scanner";
70
+
71
+ // Generator
72
+ export type { GenerateResult, GenerateOptions, RouteChangeCallback, FSRoutesWatcher } from "./fs-routes";
73
+
74
+ export {
75
+ fsRouteToRouteSpec,
76
+ scanResultToManifest,
77
+ resolveAutoLinks,
78
+ generateManifest,
79
+ watchFSRoutes,
80
+ formatRoutesForCLI,
81
+ } from "./fs-routes";
@@ -1,232 +1,232 @@
1
- /**
2
- * Mandu Boundary Components
3
- *
4
- * Loading (Suspense) 및 Error (ErrorBoundary) UI 래퍼
5
- *
6
- * @module runtime/boundary
7
- */
8
-
9
- import React, { Suspense, Component, type ReactNode, type ErrorInfo } from "react";
10
-
11
- // ═══════════════════════════════════════════════════════════════════════════
12
- // Types
13
- // ═══════════════════════════════════════════════════════════════════════════
14
-
15
- export interface LoadingBoundaryProps {
16
- /** 로딩 중 표시할 컴포넌트 */
17
- fallback: ReactNode;
18
- /** 자식 컴포넌트 */
19
- children: ReactNode;
20
- }
21
-
22
- export interface ErrorBoundaryProps {
23
- /** 에러 발생 시 표시할 컴포넌트 */
24
- fallback: React.ComponentType<ErrorFallbackProps>;
25
- /** 자식 컴포넌트 */
26
- children: ReactNode;
27
- /** 에러 발생 시 콜백 */
28
- onError?: (error: Error, errorInfo: ErrorInfo) => void;
29
- }
30
-
31
- export interface ErrorFallbackProps {
32
- /** 발생한 에러 */
33
- error: Error;
34
- /** 에러 정보 */
35
- errorInfo?: ErrorInfo;
36
- /** 리셋 함수 (에러 상태 초기화) */
37
- resetError: () => void;
38
- }
39
-
40
- interface ErrorBoundaryState {
41
- hasError: boolean;
42
- error: Error | null;
43
- errorInfo: ErrorInfo | null;
44
- }
45
-
46
- // ═══════════════════════════════════════════════════════════════════════════
47
- // Loading Boundary (Suspense Wrapper)
48
- // ═══════════════════════════════════════════════════════════════════════════
49
-
50
- /**
51
- * Loading Boundary - Suspense 래퍼
52
- *
53
- * @example
54
- * ```tsx
55
- * <LoadingBoundary fallback={<Loading />}>
56
- * <AsyncComponent />
57
- * </LoadingBoundary>
58
- * ```
59
- */
60
- export function LoadingBoundary({ fallback, children }: LoadingBoundaryProps): JSX.Element {
61
- return <Suspense fallback={fallback}>{children}</Suspense>;
62
- }
63
-
64
- // ═══════════════════════════════════════════════════════════════════════════
65
- // Error Boundary (Class Component)
66
- // ═══════════════════════════════════════════════════════════════════════════
67
-
68
- /**
69
- * Error Boundary - 에러 캐치 및 fallback UI 표시
70
- *
71
- * @example
72
- * ```tsx
73
- * <ErrorBoundary fallback={ErrorFallback}>
74
- * <RiskyComponent />
75
- * </ErrorBoundary>
76
- * ```
77
- */
78
- export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
79
- constructor(props: ErrorBoundaryProps) {
80
- super(props);
81
- this.state = {
82
- hasError: false,
83
- error: null,
84
- errorInfo: null,
85
- };
86
- }
87
-
88
- static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
89
- return { hasError: true, error };
90
- }
91
-
92
- componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
93
- this.setState({ errorInfo });
94
- this.props.onError?.(error, errorInfo);
95
- }
96
-
97
- resetError = (): void => {
98
- this.setState({
99
- hasError: false,
100
- error: null,
101
- errorInfo: null,
102
- });
103
- };
104
-
105
- render(): ReactNode {
106
- const { hasError, error, errorInfo } = this.state;
107
- const { fallback: Fallback, children } = this.props;
108
-
109
- if (hasError && error) {
110
- return (
111
- <Fallback
112
- error={error}
113
- errorInfo={errorInfo ?? undefined}
114
- resetError={this.resetError}
115
- />
116
- );
117
- }
118
-
119
- return children;
120
- }
121
- }
122
-
123
- // ═══════════════════════════════════════════════════════════════════════════
124
- // Default Fallback Components
125
- // ═══════════════════════════════════════════════════════════════════════════
126
-
127
- /**
128
- * 기본 로딩 컴포넌트
129
- */
130
- export function DefaultLoading(): JSX.Element {
131
- return (
132
- <div
133
- style={{
134
- display: "flex",
135
- justifyContent: "center",
136
- alignItems: "center",
137
- padding: "2rem",
138
- color: "#666",
139
- }}
140
- >
141
- <div>Loading...</div>
142
- </div>
143
- );
144
- }
145
-
146
- /**
147
- * 기본 에러 컴포넌트
148
- */
149
- export function DefaultError({ error, resetError }: ErrorFallbackProps): JSX.Element {
150
- return (
151
- <div
152
- style={{
153
- padding: "2rem",
154
- backgroundColor: "#fff3f3",
155
- border: "1px solid #ffcccc",
156
- borderRadius: "8px",
157
- margin: "1rem",
158
- }}
159
- >
160
- <h2 style={{ color: "#cc0000", marginTop: 0 }}>Something went wrong</h2>
161
- <pre
162
- style={{
163
- backgroundColor: "#f5f5f5",
164
- padding: "1rem",
165
- borderRadius: "4px",
166
- overflow: "auto",
167
- fontSize: "0.875rem",
168
- }}
169
- >
170
- {error.message}
171
- </pre>
172
- <button
173
- onClick={resetError}
174
- style={{
175
- marginTop: "1rem",
176
- padding: "0.5rem 1rem",
177
- backgroundColor: "#cc0000",
178
- color: "white",
179
- border: "none",
180
- borderRadius: "4px",
181
- cursor: "pointer",
182
- }}
183
- >
184
- Try again
185
- </button>
186
- </div>
187
- );
188
- }
189
-
190
- // ═══════════════════════════════════════════════════════════════════════════
191
- // Combined Boundary
192
- // ═══════════════════════════════════════════════════════════════════════════
193
-
194
- export interface PageBoundaryProps {
195
- /** 로딩 컴포넌트 (옵션) */
196
- loadingComponent?: ReactNode;
197
- /** 에러 컴포넌트 (옵션) */
198
- errorComponent?: React.ComponentType<ErrorFallbackProps>;
199
- /** 자식 컴포넌트 */
200
- children: ReactNode;
201
- /** 에러 발생 시 콜백 */
202
- onError?: (error: Error, errorInfo: ErrorInfo) => void;
203
- }
204
-
205
- /**
206
- * Page Boundary - Loading + Error 래퍼
207
- *
208
- * @example
209
- * ```tsx
210
- * <PageBoundary
211
- * loadingComponent={<CustomLoading />}
212
- * errorComponent={CustomError}
213
- * >
214
- * <PageContent />
215
- * </PageBoundary>
216
- * ```
217
- */
218
- export function PageBoundary({
219
- loadingComponent,
220
- errorComponent,
221
- children,
222
- onError,
223
- }: PageBoundaryProps): JSX.Element {
224
- const LoadingFallback = loadingComponent ?? <DefaultLoading />;
225
- const ErrorFallback = errorComponent ?? DefaultError;
226
-
227
- return (
228
- <ErrorBoundary fallback={ErrorFallback} onError={onError}>
229
- <LoadingBoundary fallback={LoadingFallback}>{children}</LoadingBoundary>
230
- </ErrorBoundary>
231
- );
232
- }
1
+ /**
2
+ * Mandu Boundary Components
3
+ *
4
+ * Loading (Suspense) 및 Error (ErrorBoundary) UI 래퍼
5
+ *
6
+ * @module runtime/boundary
7
+ */
8
+
9
+ import React, { Suspense, Component, type ReactNode, type ErrorInfo } from "react";
10
+
11
+ // ═══════════════════════════════════════════════════════════════════════════
12
+ // Types
13
+ // ═══════════════════════════════════════════════════════════════════════════
14
+
15
+ export interface LoadingBoundaryProps {
16
+ /** 로딩 중 표시할 컴포넌트 */
17
+ fallback: ReactNode;
18
+ /** 자식 컴포넌트 */
19
+ children: ReactNode;
20
+ }
21
+
22
+ export interface ErrorBoundaryProps {
23
+ /** 에러 발생 시 표시할 컴포넌트 */
24
+ fallback: React.ComponentType<ErrorFallbackProps>;
25
+ /** 자식 컴포넌트 */
26
+ children: ReactNode;
27
+ /** 에러 발생 시 콜백 */
28
+ onError?: (error: Error, errorInfo: ErrorInfo) => void;
29
+ }
30
+
31
+ export interface ErrorFallbackProps {
32
+ /** 발생한 에러 */
33
+ error: Error;
34
+ /** 에러 정보 */
35
+ errorInfo?: ErrorInfo;
36
+ /** 리셋 함수 (에러 상태 초기화) */
37
+ resetError: () => void;
38
+ }
39
+
40
+ interface ErrorBoundaryState {
41
+ hasError: boolean;
42
+ error: Error | null;
43
+ errorInfo: ErrorInfo | null;
44
+ }
45
+
46
+ // ═══════════════════════════════════════════════════════════════════════════
47
+ // Loading Boundary (Suspense Wrapper)
48
+ // ═══════════════════════════════════════════════════════════════════════════
49
+
50
+ /**
51
+ * Loading Boundary - Suspense 래퍼
52
+ *
53
+ * @example
54
+ * ```tsx
55
+ * <LoadingBoundary fallback={<Loading />}>
56
+ * <AsyncComponent />
57
+ * </LoadingBoundary>
58
+ * ```
59
+ */
60
+ export function LoadingBoundary({ fallback, children }: LoadingBoundaryProps): JSX.Element {
61
+ return <Suspense fallback={fallback}>{children}</Suspense>;
62
+ }
63
+
64
+ // ═══════════════════════════════════════════════════════════════════════════
65
+ // Error Boundary (Class Component)
66
+ // ═══════════════════════════════════════════════════════════════════════════
67
+
68
+ /**
69
+ * Error Boundary - 에러 캐치 및 fallback UI 표시
70
+ *
71
+ * @example
72
+ * ```tsx
73
+ * <ErrorBoundary fallback={ErrorFallback}>
74
+ * <RiskyComponent />
75
+ * </ErrorBoundary>
76
+ * ```
77
+ */
78
+ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
79
+ constructor(props: ErrorBoundaryProps) {
80
+ super(props);
81
+ this.state = {
82
+ hasError: false,
83
+ error: null,
84
+ errorInfo: null,
85
+ };
86
+ }
87
+
88
+ static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
89
+ return { hasError: true, error };
90
+ }
91
+
92
+ componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
93
+ this.setState({ errorInfo });
94
+ this.props.onError?.(error, errorInfo);
95
+ }
96
+
97
+ resetError = (): void => {
98
+ this.setState({
99
+ hasError: false,
100
+ error: null,
101
+ errorInfo: null,
102
+ });
103
+ };
104
+
105
+ render(): ReactNode {
106
+ const { hasError, error, errorInfo } = this.state;
107
+ const { fallback: Fallback, children } = this.props;
108
+
109
+ if (hasError && error) {
110
+ return (
111
+ <Fallback
112
+ error={error}
113
+ errorInfo={errorInfo ?? undefined}
114
+ resetError={this.resetError}
115
+ />
116
+ );
117
+ }
118
+
119
+ return children;
120
+ }
121
+ }
122
+
123
+ // ═══════════════════════════════════════════════════════════════════════════
124
+ // Default Fallback Components
125
+ // ═══════════════════════════════════════════════════════════════════════════
126
+
127
+ /**
128
+ * 기본 로딩 컴포넌트
129
+ */
130
+ export function DefaultLoading(): JSX.Element {
131
+ return (
132
+ <div
133
+ style={{
134
+ display: "flex",
135
+ justifyContent: "center",
136
+ alignItems: "center",
137
+ padding: "2rem",
138
+ color: "#666",
139
+ }}
140
+ >
141
+ <div>Loading...</div>
142
+ </div>
143
+ );
144
+ }
145
+
146
+ /**
147
+ * 기본 에러 컴포넌트
148
+ */
149
+ export function DefaultError({ error, resetError }: ErrorFallbackProps): JSX.Element {
150
+ return (
151
+ <div
152
+ style={{
153
+ padding: "2rem",
154
+ backgroundColor: "#fff3f3",
155
+ border: "1px solid #ffcccc",
156
+ borderRadius: "8px",
157
+ margin: "1rem",
158
+ }}
159
+ >
160
+ <h2 style={{ color: "#cc0000", marginTop: 0 }}>Something went wrong</h2>
161
+ <pre
162
+ style={{
163
+ backgroundColor: "#f5f5f5",
164
+ padding: "1rem",
165
+ borderRadius: "4px",
166
+ overflow: "auto",
167
+ fontSize: "0.875rem",
168
+ }}
169
+ >
170
+ {error.message}
171
+ </pre>
172
+ <button
173
+ onClick={resetError}
174
+ style={{
175
+ marginTop: "1rem",
176
+ padding: "0.5rem 1rem",
177
+ backgroundColor: "#cc0000",
178
+ color: "white",
179
+ border: "none",
180
+ borderRadius: "4px",
181
+ cursor: "pointer",
182
+ }}
183
+ >
184
+ Try again
185
+ </button>
186
+ </div>
187
+ );
188
+ }
189
+
190
+ // ═══════════════════════════════════════════════════════════════════════════
191
+ // Combined Boundary
192
+ // ═══════════════════════════════════════════════════════════════════════════
193
+
194
+ export interface PageBoundaryProps {
195
+ /** 로딩 컴포넌트 (옵션) */
196
+ loadingComponent?: ReactNode;
197
+ /** 에러 컴포넌트 (옵션) */
198
+ errorComponent?: React.ComponentType<ErrorFallbackProps>;
199
+ /** 자식 컴포넌트 */
200
+ children: ReactNode;
201
+ /** 에러 발생 시 콜백 */
202
+ onError?: (error: Error, errorInfo: ErrorInfo) => void;
203
+ }
204
+
205
+ /**
206
+ * Page Boundary - Loading + Error 래퍼
207
+ *
208
+ * @example
209
+ * ```tsx
210
+ * <PageBoundary
211
+ * loadingComponent={<CustomLoading />}
212
+ * errorComponent={CustomError}
213
+ * >
214
+ * <PageContent />
215
+ * </PageBoundary>
216
+ * ```
217
+ */
218
+ export function PageBoundary({
219
+ loadingComponent,
220
+ errorComponent,
221
+ children,
222
+ onError,
223
+ }: PageBoundaryProps): JSX.Element {
224
+ const LoadingFallback = loadingComponent ?? <DefaultLoading />;
225
+ const ErrorFallback = errorComponent ?? DefaultError;
226
+
227
+ return (
228
+ <ErrorBoundary fallback={ErrorFallback} onError={onError}>
229
+ <LoadingBoundary fallback={LoadingFallback}>{children}</LoadingBoundary>
230
+ </ErrorBoundary>
231
+ );
232
+ }