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

pages/[tabId]/common-test.vue

@@ -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">{`// 자동 에러 처리 예제
+              <pre class="text-xs text-blue-800 whitespace-pre-wrap">
-const apiTest = async () => {
+                {`// 자동 에러 처리 예제
-  const response = await useApi<ApiResponse<Object>>(
+                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">{`// 직접 에러 처리 예제
+              <pre class="text-xs text-green-800 whitespace-pre-wrap">
-const apiTestWithCustomError = async () => {
+                {`// 직접 에러 처리 예제
+                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="font-medium text-gray-900 text-sm">{{
-                   <span class="text-xs text-gray-500">{{ result.timestamp }}</span>
+                    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 테스트 예제
+              <pre class="text-xs text-purple-800 whitespace-pre-wrap">
-const testValidEndpoint = async () => {
+                {`// 추가 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]요청한 코드를 찾을 수 없습니다.";

stores/user.ts

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