diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..7f69505
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,30 @@
+## ✨ 작업 배경 [#](#background)
+
+
+
+
+
+
+
+
+✔️ Related issues #
+
+
+
+
+
+
+## 💻 작업 내용 [#](#work_detail)
+
+
+
+
+
+
+## 🏃 기능 동작 시연 [#](#prove)
+
+
+
+## 💬 코멘트 [#](#comments)
+
+
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index 9377de1..bd4aae6 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..a2795e2
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 dhlab-fe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/package.json b/package.json
index 9e20e10..458bc81 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
"types": "dist/index.d.ts",
"files": [
"dist",
- "README.md"
+ "README.md",
+ "LICENSE"
],
"scripts": {
"build": "rollup -c",
@@ -37,8 +38,7 @@
"peerDependencies": {
"@tanstack/react-query": "^4.0.0 || ^5.0.0",
"react": "^17.0.0 || ^18.0.0",
- "react-dom": "^17.0.0 || ^18.0.0",
- "react-error-boundary": "^4.0.0"
+ "react-dom": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"axios": {
@@ -49,6 +49,7 @@
}
},
"dependencies": {
+ "react-error-boundary": "^4.0.0",
"ts-pattern": "^5.0.0"
},
"devDependencies": {
@@ -63,12 +64,12 @@
"@testing-library/user-event": "^14.6.1",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
+ "@vitest/coverage-v8": "^3.2.4",
"axios": "^1.10.0",
"jsdom": "^26.1.0",
"ky": "^1.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "react-error-boundary": "^4.0.0",
"rollup": "^4.0.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"tslib": "^2.8.1",
diff --git a/src/components/__tests__/api-error-boundary.integration.test.tsx b/src/components/__tests__/api-error-boundary.integration.test.tsx
index e9d83bb..bada966 100644
--- a/src/components/__tests__/api-error-boundary.integration.test.tsx
+++ b/src/components/__tests__/api-error-boundary.integration.test.tsx
@@ -12,7 +12,7 @@ import {
it,
vi,
} from "vitest";
-import type { PartialErrorConfig } from "../../types/api-error";
+import type { TPartialErrorConfig } from "../../types/api-error";
import { ApiErrorBoundary } from "../api-error-boundary";
// Mock HTTPError (실제 HTTPError를 사용하되 Response 객체 생성)
@@ -196,7 +196,7 @@ describe("ApiErrorBoundary Integration Tests", () => {
describe("커스텀 설정", () => {
it("커스텀 fallback 컴포넌트를 사용해야 함", async () => {
- const customConfig: PartialErrorConfig = {
+ const customConfig: TPartialErrorConfig = {
404: {
type: "custom",
fallback: (
@@ -218,7 +218,7 @@ describe("ApiErrorBoundary Integration Tests", () => {
});
it("커스텀 fallback 함수를 사용해야 함", async () => {
- const customConfig: PartialErrorConfig = {
+ const customConfig: TPartialErrorConfig = {
404: {
type: "custom",
fallback: (error, resetErrorBoundary) => (
@@ -307,7 +307,7 @@ describe("ApiErrorBoundary Integration Tests", () => {
describe("onError 콜백", () => {
it("에러 발생 시 onError 콜백이 호출되어야 함", async () => {
const onErrorSpy = vi.fn();
- const customConfig: PartialErrorConfig = {
+ const customConfig: TPartialErrorConfig = {
404: {
type: "default",
message: "오류가 발생했습니다.",
diff --git a/src/components/__tests__/error-boundary.test.tsx b/src/components/__tests__/error-boundary.test.tsx
new file mode 100644
index 0000000..d400ae5
--- /dev/null
+++ b/src/components/__tests__/error-boundary.test.tsx
@@ -0,0 +1,359 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+ afterAll,
+ afterEach,
+ beforeAll,
+ describe,
+ expect,
+ it,
+ vi,
+} from "vitest";
+import { ErrorBoundary } from "../error-boundary";
+
+// Mock 컴포넌트들
+const NormalComponent = () => 정상적인 컴포넌트
;
+
+const ErrorComponent = ({ message = "Test error" }: { message?: string }) => {
+ throw new Error(message);
+};
+
+const NetworkErrorComponent = () => {
+ const error = new Error("Network connection failed");
+ error.name = "NetworkError";
+ throw error;
+};
+
+const CustomErrorComponent = ({ code = 404 }: { code?: number }) => {
+ const error = new Error(`Error ${code}`);
+ error.name = code.toString();
+ throw error;
+};
+
+// Custom Fallback Component
+const CustomFallbackComponent = ({ error, resetErrorBoundary }: any) => (
+
+
Custom Error: {error.message}
+
+
+);
+
+describe("ErrorBoundary", () => {
+ const originalConsoleError = console.error;
+
+ beforeAll(() => {
+ console.error = vi.fn();
+ });
+
+ afterAll(() => {
+ console.error = originalConsoleError;
+ });
+
+ afterEach(() => {
+ vi.clearAllMocks();
+ });
+
+ describe("정상 동작", () => {
+ it("에러가 없을 때 자식 컴포넌트가 정상적으로 렌더링되어야 함", () => {
+ render(
+ Error: {error.message}
}
+ >
+
+ ,
+ );
+
+ expect(screen.getByText("정상적인 컴포넌트")).toBeInTheDocument();
+ });
+ });
+
+ describe("에러 처리", () => {
+ it("기본 에러를 처리하고 fallbackRender를 사용해야 함", async () => {
+ render(
+ (
+
+
에러 발생: {error.message}
+
+
Error: {error.message}
}
+ >
+
+ ,
+ );
+
+ await waitFor(() => {
+ expect(onError).toHaveBeenCalledWith(
+ expect.objectContaining({
+ message: "Callback test error",
+ }),
+ expect.any(Object),
+ );
+ });
+ });
+ });
+
+ describe("ignoreError 기능", () => {
+ it("문자열 패턴으로 에러를 무시해야 함", () => {
+ expect(() => {
+ render(
+ Error: {error.message}
}
+ >
+
+ ,
+ );
+ }).toThrow("Network connection failed");
+ });
+
+ it("숫자 패턴으로 에러를 무시해야 함", () => {
+ expect(() => {
+ render(
+ Error: {error.message}
}
+ >
+
+ ,
+ );
+ }).toThrow("Error 404");
+ });
+
+ it("함수 패턴으로 에러를 무시해야 함", () => {
+ const ignoreFunction = vi.fn().mockReturnValue(true);
+
+ expect(() => {
+ render(
+ Error: {error.message}
}
+ >
+
+ ,
+ );
+ }).toThrow("Function test error");
+ });
+
+ it("무시하지 않는 에러는 정상적으로 처리해야 함", async () => {
+ const onError = vi.fn();
+
+ render(
+ Error: {error.message}
}
+ >
+
+ ,
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText("Error: Different error")).toBeInTheDocument();
+ expect(onError).toHaveBeenCalledWith(
+ expect.objectContaining({
+ message: "Different error",
+ }),
+ expect.any(Object),
+ );
+ });
+ });
+
+ it("여러 무시 조건을 함께 사용할 수 있어야 함", () => {
+ expect(() => {
+ render(
+ error.message.includes("timeout"),
+ ]}
+ fallbackRender={({ error }) => Error: {error.message}
}
+ >
+
+ ,
+ );
+ }).toThrow("Request timeout occurred");
+ });
+ });
+
+ describe("에러 경계 리셋", () => {
+ it("resetErrorBoundary 호출 시 에러 상태가 초기화되어야 함", async () => {
+ const user = userEvent.setup();
+ let hasError = true;
+
+ const ConditionalErrorComponent = () => {
+ if (hasError) {
+ throw new Error("Conditional error");
+ }
+ return No error now
;
+ };
+
+ render(
+ (
+
+
Error: {error.message}
+
+
Reset successful
;
+ };
+
+ const { rerender } = render(
+ Error: {error.message}
}
+ >
+
+ ,
+ );
+
+ // 에러 상태 확인
+ await waitFor(() => {
+ expect(
+ screen.getByText("Error: Reset keys test error"),
+ ).toBeInTheDocument();
+ });
+
+ // 에러 조건 해제 후 resetKeys 변경
+ hasError = false;
+ rerender(
+ Error: {error.message}
}
+ >
+
+ ,
+ );
+
+ // 에러가 해결되어 정상 컴포넌트가 렌더링되어야 함
+ await waitFor(() => {
+ expect(screen.getByText("Reset successful")).toBeInTheDocument();
+ });
+ });
+
+ it("onReset 콜백이 호출되어야 함", async () => {
+ const user = userEvent.setup();
+ const onReset = vi.fn();
+
+ render(
+ (
+
+
Error: {error.message}
+
+