From 75e9831907fb80bc5d5bdb7918828c658be0cf04 Mon Sep 17 00:00:00 2001 From: sohot8653 Date: Mon, 22 Sep 2025 13:16:16 +0900 Subject: [PATCH] =?UTF-8?q?[UI=20=EA=B0=9C=EC=84=A0]=20API=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=9D=98=20?= =?UTF-8?q?=EC=9E=90=EB=8F=99=20=EB=B0=8F=20=EC=A7=81=EC=A0=91=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EC=B2=98=EB=A6=AC=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=84=B9=EC=85=98=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8,=20?= =?UTF-8?q?=EC=98=88=EC=A0=9C=20=EC=86=8C=EC=8A=A4=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=B6=94=EA=B0=80=20API=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EA=B8=B0=EB=8A=A5=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/[tabId]/common-test.vue | 454 +++++++++++++++++----------------- stores/user.ts | 1 + 2 files changed, 232 insertions(+), 223 deletions(-) diff --git a/pages/[tabId]/common-test.vue b/pages/[tabId]/common-test.vue index 78bfbd5..f068e1f 100644 --- a/pages/[tabId]/common-test.vue +++ b/pages/[tabId]/common-test.vue @@ -11,222 +11,234 @@

- -
- -
- -
-
-
- 1 -
-

- 자동 에러 처리 테스트 -

-
-

- useApi 함수의 자동 에러 처리 기능을 테스트합니다. 에러가 발생하면 - 자동으로 alert가 표시됩니다. -

-
- -
-

결과:

- 
{{
-                   autoErrorResult
-                 }}
-
-
- -
-
예제 소스:
- 
{`// 자동 에러 처리 예제
-const apiTest = async () => {
-  const response = await useApi>(
-    "/admin/common-codes/USER_STATUS_ACTIVE222"
-  );
-  
-  if (response) {
-    console.log("response:", response);
-  }
-};`}
-
-
+ +
+ +
+ +
+
+
+ 1 +
+

+ 자동 에러 처리 테스트 +

+
+

+ useApi 함수의 자동 에러 처리 기능을 테스트합니다. 에러가 발생하면 + 자동으로 alert가 표시됩니다. +

+
+ +
+

결과:

+ 
{{
+                  autoErrorResult
+                }}
+
+
+ +
+
예제 소스:
+ 
+                {`// 자동 에러 처리 예제
+                const apiTest = async () => {
+                  const response = await useApi<ApiResponse<object>>(
+                    "/admin/common-codes/USER_STATUS_ACTIVE222"
+                  );
+                  
+                  if (response) {
+                    console.log("response:", response);
+                  }
+                };`}
+
+
+
- -
-
-
- 2 -
-

- 직접 에러 처리 테스트 -

-
-

- useApi 함수의 직접 에러 처리 기능을 테스트합니다. 에러 타입에 따른 - 세밀한 처리를 확인할 수 있습니다. -

-
- -
-

결과:

- 
{{
-                   customErrorResult
-                 }}
-
-
- -
-
예제 소스:
- 
{`// 직접 에러 처리 예제
-const apiTestWithCustomError = async () => {
-  try {
-    const response = await useApi>(
-      "/admin/common-codes/USER_STATUS_ACTIVE222",
-      {
-        handleError: false, // 에러를 직접 처리
-        showAlert: false,   // alert 표시 안함
-      }
-    );
-    
-    if (response) {
-      console.log("response:", response);
-    }
-  } catch (error: any) {
-    // 에러 타입에 따른 세밀한 처리
-    if (error.response?.status === 404) {
-      alert("요청한 코드를 찾을 수 없습니다.");
-    } else if (error.response?.status === 403) {
-      alert("접근 권한이 없습니다.");
-    } else if (error.response?.status >= 500) {
-      alert("서버 오류가 발생했습니다.");
-    } else {
-      alert("알 수 없는 오류가 발생했습니다.");
-    }
-  }
-};`}
-
-
-
+ +
+
+
+ 2 +
+

+ 직접 에러 처리 테스트 +

+
+

+ useApi 함수의 직접 에러 처리 기능을 테스트합니다. 에러 타입에 따른 + 세밀한 처리를 확인할 수 있습니다. +

+
+ +
+

결과:

+ 
{{
+                  customErrorResult
+                }}
+
+
+ +
+
예제 소스:
+ 
+                {`// 직접 에러 처리 예제
+                const apiTestWithCustomError = async () => {
+                  try {
+                    const response = await useApi<ApiResponse<object>>(
+                      "/admin/common-codes/USER_STATUS_ACTIVE222",
+                      {
+                        handleError: false, // 에러를 직접 처리
+                        showAlert: false,   // alert 표시 안함
+                      }
+                    );
+                    
+                    if (response) {
+                      console.log("response:", response);
+                    }
+                  } catch (error: any) {
+                    // 에러 타입에 따른 세밀한 처리
+                    if (error.response?.status === 404) {
+                      alert("요청한 코드를 찾을 수 없습니다.");
+                    } else if (error.response?.status === 403) {
+                      alert("접근 권한이 없습니다.");
+                    } else if (error.response?.status >= 500) {
+                      alert("서버 오류가 발생했습니다.");
+                    } else {
+                      alert("알 수 없는 오류가 발생했습니다.");
+                    }
+                  }
+                };`}
+
+
+
+
- -
-
-
-
- 3 -
-

추가 API 테스트

-
-

- 다양한 API 엔드포인트를 테스트할 수 있습니다. -

+ +
+
+
+
+ 3 +
+

+ 추가 API 테스트 +

+
+

+ 다양한 API 엔드포인트를 테스트할 수 있습니다. +

-
- +
+ - + - -
+ +
-
-

추가 테스트 결과:

-
-
- {{ result.title }} - {{ result.timestamp }} -
- 
{{
-                   result.data
-                 }}
-
-
- - -
-
예제 소스:
- 
{`// 추가 API 테스트 예제
-const testValidEndpoint = async () => {
-  try {
-    const response = await useApi>(
-      "/admin/common-codes/USER_STATUS_ACTIVE",
-      {
-        handleError: false,
-        showAlert: false,
-      }
-    );
-    
-    console.log("성공:", response);
-  } catch (error: any) {
-    console.log("에러:", error.message);
-  }
-};
+            

+              
추가 테스트 결과:

+              

+                

+                  {{
+                    result.title
+                  }}
+                  {{
+                    result.timestamp
+                  }}
+                

+                
{{
+                  result.data
+                }}

+              

+            

 
-const testNetworkError = async () => {
-  try {
-    const response = await useApi>(
-      "/non-existent-endpoint",
-      {
-        handleError: false,
-        showAlert: false,
-      }
-    );
-  } catch (error: any) {
-    console.log("네트워크 에러:", error.message);
-  }
-};`}
-
-
-
-
+ +
+
예제 소스:
+ 
+                {`// 추가 API 테스트 예제
+                const testValidEndpoint = async () => {
+                  try {
+                    const response = await useApi<ApiResponse<object>>(
+                      "/admin/common-codes/USER_STATUS_ACTIVE",
+                      {
+                        handleError: false,
+                        showAlert: false,
+                      }
+                    );
+                    
+                    console.log("성공:", response);
+                  } catch (error: any) {
+                    console.log("에러:", error.message);
+                  }
+                };
+
+                const testNetworkError = async () => {
+                  try {
+                    const response = await useApi<ApiResponse<object>>(
+                      "/non-existent-endpoint",
+                      {
+                        handleError: false,
+                        showAlert: false,
+                      }
+                    );
+                  } catch (error: any) {
+                    console.log("네트워크 에러:", error.message);
+                  }
+                };`}
+
+
+
+
+
@@ -279,21 +291,17 @@ const apiTest = async () => { isLoading.value = true; autoErrorResult.value = ""; - try { - const response = await useApi>( - "/admin/common-codes/USER_STATUS_ACTIVE222" - ); + const response = await useApi>( + "/admin/common-codes/USER_STATUS_ACTIVE222" + ); - if (response) { - autoErrorResult.value = `성공: ${JSON.stringify(response, null, 2)}`; - } else { - autoErrorResult.value = "응답이 없습니다."; - } - } catch (error: any) { - autoErrorResult.value = `에러 발생: ${error.message || "알 수 없는 에러"}`; - } finally { - isLoading.value = false; + if (response) { + autoErrorResult.value = `성공: ${JSON.stringify(response, null, 2)}`; + } else { + autoErrorResult.value = "응답이 없습니다."; } + + isLoading.value = false; }; // 직접 에러 처리하는 함수 예시 @@ -316,7 +324,7 @@ const apiTestWithCustomError = async () => { customErrorResult.value = "응답이 없습니다."; } } catch (error: any) { - // 에러 타입에 따른 세밀한 처리 + // 에러 타입에 처리 let errorMessage = ""; if (error.response?.status === 404) { errorMessage = "[errorCustomHandler]요청한 코드를 찾을 수 없습니다."; diff --git a/stores/user.ts b/stores/user.ts index 36bfc7c..3e9ff39 100644 --- a/stores/user.ts +++ b/stores/user.ts @@ -14,6 +14,7 @@ export const useUserStore = defineStore( interface LoginData { userId: string; + name: string; } // 액션 const login = async (userId: string, password: string) => {