leejisun9/bio_frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[UI 개선] API 테스트 페이지의 자동 및 직접 에러 처리 테스트 섹션 업데이트, 예제 소스 코드 수정 및 추가 API 테스트 기능 개선

Browse Source
This commit is contained in:
sohot8653
2025-09-22 13:16:16 +09:00
parent 221e250814
commit 75e9831907
2 changed files with 232 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
pages/[tabId]/common-test.vue
View File

@@ -52,16 +52,18 @@
<!-- 예제 소스 -->
<div class="mt-4 p-3 bg-blue-50 rounded border">
<h5 class="font-medium text-blue-900 mb-2">예제 소스:</h5>
<pre class="text-xs text-blue-800 whitespace-pre-wrap">{`// 자동 에러 처리 예제
const apiTest = async () => {
const response = await useApi<ApiResponse<Object>>(
<pre class="text-xs text-blue-800 whitespace-pre-wrap">
{`// 자동 에러 처리 예제
const apiTest = async () => {
const response = await useApi&lt;ApiResponse&lt;object&gt;&gt;(
"/admin/common-codes/USER_STATUS_ACTIVE222"
);
if (response) {
console.log("response:", response);
}
};`}</apiresponse<object></pre>
};`}
</pre>
</div>
</div>
@@ -102,10 +104,11 @@ const apiTest = async () => {
<!-- 예제 소스 -->
<div class="mt-4 p-3 bg-green-50 rounded border">
<h5 class="font-medium text-green-900 mb-2">예제 소스:</h5>
<pre class="text-xs text-green-800 whitespace-pre-wrap">{`// 직접 에러 처리 예제
const apiTestWithCustomError = async () => {
<pre class="text-xs text-green-800 whitespace-pre-wrap">
{`// 직접 에러 처리 예제
const apiTestWithCustomError = async () => {
try {
const response = await useApi<ApiResponse<Object>>(
const response = await useApi&lt;ApiResponse&lt;object&gt;&gt;(
"/admin/common-codes/USER_STATUS_ACTIVE222",
{
handleError: false, // 에러를 직접 처리
@@ -128,7 +131,8 @@ const apiTestWithCustomError = async () => {
alert("알 수 없는 오류가 발생했습니다.");
}
}
};`}</apiresponse<object></pre>
};`}
</pre>
</div>
</div>
</div>
@@ -142,7 +146,9 @@ const apiTestWithCustomError = async () => {
>
<span class="text-white font-bold text-sm">3</span>
</div>
<h3 class="text-xl font-semibold text-gray-900">추가 API 테스트</h3>
<h3 class="text-xl font-semibold text-gray-900">
추가 API 테스트
</h3>
</div>
<p class="text-gray-600 mb-4">
다양한 API 엔드포인트를 테스트할 수 있습니다.
@@ -181,8 +187,12 @@ const apiTestWithCustomError = async () => {
class="p-3 bg-gray-50 rounded border"
>
<div class="flex justify-between items-center mb-2">
<span class="font-medium text-gray-900 text-sm">{{ result.title }}</span>
<span class="text-xs text-gray-500">{{ result.timestamp }}</span>
<span class="font-medium text-gray-900 text-sm">{{
result.title
}}</span>
<span class="text-xs text-gray-500">{{
result.timestamp
}}</span>
</div>
<pre class="text-xs text-gray-700 whitespace-pre-wrap">{{
result.data
@@ -193,10 +203,11 @@ const apiTestWithCustomError = async () => {
<!-- 예제 소스 -->
<div class="mt-4 p-3 bg-purple-50 rounded border">
<h5 class="font-medium text-purple-900 mb-2">예제 소스:</h5>
<pre class="text-xs text-purple-800 whitespace-pre-wrap">{`// 추가 API 테스트 예제
const testValidEndpoint = async () => {
<pre class="text-xs text-purple-800 whitespace-pre-wrap">
{`// 추가 API 테스트 예제
const testValidEndpoint = async () => {
try {
const response = await useApi<ApiResponse<Object>>(
const response = await useApi&lt;ApiResponse&lt;object&gt;&gt;(
"/admin/common-codes/USER_STATUS_ACTIVE",
{
handleError: false,
@@ -208,11 +219,11 @@ const testValidEndpoint = async () => {
} catch (error: any) {
console.log("에러:", error.message);
}
};
};
const testNetworkError = async () => {
const testNetworkError = async () => {
try {
const response = await useApi<ApiResponse<Object>>(
const response = await useApi&lt;ApiResponse&lt;object&gt;&gt;(
"/non-existent-endpoint",
{
handleError: false,
@@ -222,7 +233,8 @@ const testNetworkError = async () => {
} catch (error: any) {
console.log("네트워크 에러:", error.message);
}
};`}</apiresponse<object></apiresponse<object></pre>
};`}
</pre>
</div>
</div>
</div>
@@ -279,7 +291,6 @@ const apiTest = async () => {
isLoading.value = true;
autoErrorResult.value = "";
try {
const response = await useApi<ApiResponse<object>>(
"/admin/common-codes/USER_STATUS_ACTIVE222"
);
@@ -289,11 +300,8 @@ const apiTest = async () => {
} else {
autoErrorResult.value = "응답이 없습니다.";
}
} catch (error: any) {
autoErrorResult.value = `에러 발생: ${error.message || "알 수 없는 에러"}`;
} finally {
isLoading.value = false;
}
};
// 직접 에러 처리하는 함수 예시
@@ -316,7 +324,7 @@ const apiTestWithCustomError = async () => {
customErrorResult.value = "응답이 없습니다.";
}
} catch (error: any) {
// 에러 타입에 따른 세밀한 처리
// 에러 타입에 처리
let errorMessage = "";
if (error.response?.status === 404) {
errorMessage = "[errorCustomHandler]요청한 코드를 찾을 수 없습니다.";

1
stores/user.ts
View File

@@ -14,6 +14,7 @@ export const useUserStore = defineStore(
interface LoginData {
userId: string;
name: string;
}
// 액션
const login = async (userId: string, password: string) => {