[API 개선] useApi 함수에 에러 처리 옵션 추가 및 사용 예시 업데이트

pages/[tabId]/index.vue

@@ -29,13 +29,16 @@
           </p>
           <p class="text-sm text-gray-600">
             <button
-              @click="
-                useApi<ApiResponse<{}>>('/files/download/1756167537354001', {
-                  method: 'get',
-                })
-              "
+              class="mr-2 bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded"
+              @click="apiTest"
             >
-              Test
+              자동 에러 처리
+            </button>
+            <button
+              class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded"
+              @click="apiTestWithCustomError"
+            >
+              직접 에러 처리
             </button>
           </p>
         </div>
@@ -119,6 +122,47 @@ definePageMeta({
 });
 
 const userStore = useUserStore();
+
+// 테스트 다운로드 함수 (자동 에러 처리)
+const apiTest = async () => {
+  const response = await useApi<ApiResponse<object>>(
+    "/admin/common-codes/USER_STATUS_ACTIVE222"
+  );
+
+  if (response) {
+    console.log("response:", response);
+  }
+};
+
+// 직접 에러 처리하는 함수 예시
+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("[errorCustomHandler]요청한 코드를 찾을 수 없습니다.");
+    } else if (error.response?.status === 403) {
+      alert("[errorCustomHandler]접근 권한이 없습니다.");
+    } else if (error.response?.status >= 500) {
+      alert(
+        "[errorCustomHandler]서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요."
+      );
+    } else {
+      alert("[errorCustomHandler]알 수 없는 오류가 발생했습니다.");
+    }
+  }
+};
 </script>
 
 <style scoped>