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

pages/[tabId]/common-test.vue

@@ -11,222 +11,234 @@
         </p>
       </div>
 
-             <!-- API 테스트 섹션 -->
-       <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
-         <!-- 좌측: 자동 에러 처리 테스트 -->
-         <div class="lg:col-span-2 space-y-6">
-           <!-- 자동 에러 처리 테스트 -->
-           <div class="bg-white rounded-lg shadow-md p-6">
-             <div class="flex items-center mb-4">
-               <div
-                 class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3"
-               >
-                 <span class="text-white font-bold text-sm">1</span>
-               </div>
-               <h3 class="text-xl font-semibold text-gray-900">
-                 자동 에러 처리 테스트
-               </h3>
-             </div>
-             <p class="text-gray-600 mb-4">
-               useApi 함수의 자동 에러 처리 기능을 테스트합니다. 에러가 발생하면
-               자동으로 alert가 표시됩니다.
-             </p>
-             <div class="space-y-3">
-               <button
-                 class="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors"
-                 :disabled="isLoading"
-                 @click="apiTest"
-               >
-                 {{ isLoading ? "테스트 중..." : "자동 에러 처리 테스트" }}
-               </button>
-               <div
-                 v-if="autoErrorResult"
-                 class="mt-3 p-3 bg-gray-50 rounded border"
-               >
-                 <h4 class="font-medium text-gray-900 mb-2">결과:</h4>
-                 <pre class="text-sm text-gray-700 whitespace-pre-wrap">{{
-                   autoErrorResult
-                 }}</pre>
-               </div>
-             </div>
-             <!-- 예제 소스 -->
-             <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>>(
-    "/admin/common-codes/USER_STATUS_ACTIVE222"
-  );
-  
-  if (response) {
-    console.log("response:", response);
-  }
-};`}</apiresponse<object></pre>
-             </div>
-           </div>
+      <!-- API 테스트 섹션 -->
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
+        <!-- 좌측: 자동 에러 처리 테스트 -->
+        <div class="lg:col-span-2 space-y-6">
+          <!-- 자동 에러 처리 테스트 -->
+          <div class="bg-white rounded-lg shadow-md p-6">
+            <div class="flex items-center mb-4">
+              <div
+                class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3"
+              >
+                <span class="text-white font-bold text-sm">1</span>
+              </div>
+              <h3 class="text-xl font-semibold text-gray-900">
+                자동 에러 처리 테스트
+              </h3>
+            </div>
+            <p class="text-gray-600 mb-4">
+              useApi 함수의 자동 에러 처리 기능을 테스트합니다. 에러가 발생하면
+              자동으로 alert가 표시됩니다.
+            </p>
+            <div class="space-y-3">
+              <button
+                class="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors"
+                :disabled="isLoading"
+                @click="apiTest"
+              >
+                {{ isLoading ? "테스트 중..." : "자동 에러 처리 테스트" }}
+              </button>
+              <div
+                v-if="autoErrorResult"
+                class="mt-3 p-3 bg-gray-50 rounded border"
+              >
+                <h4 class="font-medium text-gray-900 mb-2">결과:</h4>
+                <pre class="text-sm text-gray-700 whitespace-pre-wrap">{{
+                  autoErrorResult
+                }}</pre>
+              </div>
+            </div>
+            <!-- 예제 소스 -->
+            <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&lt;ApiResponse&lt;object&gt;&gt;(
+                    "/admin/common-codes/USER_STATUS_ACTIVE222"
+                  );
+                  
+                  if (response) {
+                    console.log("response:", response);
+                  }
+                };`}
+              </pre>
+            </div>
+          </div>
 
-           <!-- 직접 에러 처리 테스트 -->
-           <div class="bg-white rounded-lg shadow-md p-6">
-             <div class="flex items-center mb-4">
-               <div
-                 class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-3"
-               >
-                 <span class="text-white font-bold text-sm">2</span>
-               </div>
-               <h3 class="text-xl font-semibold text-gray-900">
-                 직접 에러 처리 테스트
-               </h3>
-             </div>
-             <p class="text-gray-600 mb-4">
-               useApi 함수의 직접 에러 처리 기능을 테스트합니다. 에러 타입에 따른
-               세밀한 처리를 확인할 수 있습니다.
-             </p>
-             <div class="space-y-3">
-               <button
-                 class="w-full bg-green-500 hover:bg-green-600 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors"
-                 :disabled="isLoadingCustom"
-                 @click="apiTestWithCustomError"
-               >
-                 {{ isLoadingCustom ? "테스트 중..." : "직접 에러 처리 테스트" }}
-               </button>
-               <div
-                 v-if="customErrorResult"
-                 class="mt-3 p-3 bg-gray-50 rounded border"
-               >
-                 <h4 class="font-medium text-gray-900 mb-2">결과:</h4>
-                 <pre class="text-sm text-gray-700 whitespace-pre-wrap">{{
-                   customErrorResult
-                 }}</pre>
-               </div>
-             </div>
-             <!-- 예제 소스 -->
-             <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 () => {
-  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("알 수 없는 오류가 발생했습니다.");
-    }
-  }
-};`}</apiresponse<object></pre>
-             </div>
-           </div>
-         </div>
+          <!-- 직접 에러 처리 테스트 -->
+          <div class="bg-white rounded-lg shadow-md p-6">
+            <div class="flex items-center mb-4">
+              <div
+                class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-3"
+              >
+                <span class="text-white font-bold text-sm">2</span>
+              </div>
+              <h3 class="text-xl font-semibold text-gray-900">
+                직접 에러 처리 테스트
+              </h3>
+            </div>
+            <p class="text-gray-600 mb-4">
+              useApi 함수의 직접 에러 처리 기능을 테스트합니다. 에러 타입에 따른
+              세밀한 처리를 확인할 수 있습니다.
+            </p>
+            <div class="space-y-3">
+              <button
+                class="w-full bg-green-500 hover:bg-green-600 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors"
+                :disabled="isLoadingCustom"
+                @click="apiTestWithCustomError"
+              >
+                {{ isLoadingCustom ? "테스트 중..." : "직접 에러 처리 테스트" }}
+              </button>
+              <div
+                v-if="customErrorResult"
+                class="mt-3 p-3 bg-gray-50 rounded border"
+              >
+                <h4 class="font-medium text-gray-900 mb-2">결과:</h4>
+                <pre class="text-sm text-gray-700 whitespace-pre-wrap">{{
+                  customErrorResult
+                }}</pre>
+              </div>
+            </div>
+            <!-- 예제 소스 -->
+            <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 () => {
+                  try {
+                    const response = await useApi&lt;ApiResponse&lt;object&gt;&gt;(
+                      "/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("알 수 없는 오류가 발생했습니다.");
+                    }
+                  }
+                };`}
+              </pre>
+            </div>
+          </div>
+        </div>
 
-         <!-- 우측: 추가 API 테스트 -->
-         <div class="lg:col-span-1">
-           <div class="bg-white rounded-lg shadow-md p-6">
-             <div class="flex items-center mb-4">
-               <div
-                 class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-3"
-               >
-                 <span class="text-white font-bold text-sm">3</span>
-               </div>
-               <h3 class="text-xl font-semibold text-gray-900">추가 API 테스트</h3>
-             </div>
-             <p class="text-gray-600 mb-4">
-               다양한 API 엔드포인트를 테스트할 수 있습니다.
-             </p>
+        <!-- 우측: 추가 API 테스트 -->
+        <div class="lg:col-span-1">
+          <div class="bg-white rounded-lg shadow-md p-6">
+            <div class="flex items-center mb-4">
+              <div
+                class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-3"
+              >
+                <span class="text-white font-bold text-sm">3</span>
+              </div>
+              <h3 class="text-xl font-semibold text-gray-900">
+                추가 API 테스트
+              </h3>
+            </div>
+            <p class="text-gray-600 mb-4">
+              다양한 API 엔드포인트를 테스트할 수 있습니다.
+            </p>
 
-             <div class="space-y-3">
-               <button
-                 class="w-full bg-purple-500 hover:bg-purple-600 disabled:bg-gray-400 text-white font-medium py-2 px-4 rounded-lg transition-colors"
-                 :disabled="isLoadingValid"
-                 @click="testValidEndpoint"
-               >
-                 {{ isLoadingValid ? "테스트 중..." : "유효한 엔드포인트" }}
-               </button>
+            <div class="space-y-3">
+              <button
+                class="w-full bg-purple-500 hover:bg-purple-600 disabled:bg-gray-400 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+                :disabled="isLoadingValid"
+                @click="testValidEndpoint"
+              >
+                {{ isLoadingValid ? "테스트 중..." : "유효한 엔드포인트" }}
+              </button>
 
-               <button
-                 class="w-full bg-red-500 hover:bg-red-600 disabled:bg-gray-400 text-white font-medium py-2 px-4 rounded-lg transition-colors"
-                 :disabled="isLoadingNetwork"
-                 @click="testNetworkError"
-               >
-                 {{ isLoadingNetwork ? "테스트 중..." : "네트워크 에러" }}
-               </button>
+              <button
+                class="w-full bg-red-500 hover:bg-red-600 disabled:bg-gray-400 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+                :disabled="isLoadingNetwork"
+                @click="testNetworkError"
+              >
+                {{ isLoadingNetwork ? "테스트 중..." : "네트워크 에러" }}
+              </button>
 
-               <button
-                 class="w-full bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
-                 @click="clearResults"
-               >
-                 결과 초기화
-               </button>
-             </div>
+              <button
+                class="w-full bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+                @click="clearResults"
+              >
+                결과 초기화
+              </button>
+            </div>
 
-             <div v-if="additionalResults.length > 0" class="mt-4 space-y-3">
-               <h4 class="font-medium text-gray-900">추가 테스트 결과:</h4>
-               <div
-                 v-for="(result, index) in additionalResults"
-                 :key="index"
-                 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>
-                 </div>
-                 <pre class="text-xs text-gray-700 whitespace-pre-wrap">{{
-                   result.data
-                 }}</pre>
-               </div>
-             </div>
-             
-             <!-- 예제 소스 -->
-             <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 () => {
-  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);
-  }
-};
+            <div v-if="additionalResults.length > 0" class="mt-4 space-y-3">
+              <h4 class="font-medium text-gray-900">추가 테스트 결과:</h4>
+              <div
+                v-for="(result, index) in additionalResults"
+                :key="index"
+                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>
+                </div>
+                <pre class="text-xs text-gray-700 whitespace-pre-wrap">{{
+                  result.data
+                }}</pre>
+              </div>
+            </div>
 
-const testNetworkError = async () => {
-  try {
-    const response = await useApi<ApiResponse<Object>>(
-      "/non-existent-endpoint",
-      {
-        handleError: false,
-        showAlert: false,
-      }
-    );
-  } catch (error: any) {
-    console.log("네트워크 에러:", error.message);
-  }
-};`}</apiresponse<object></apiresponse<object></pre>
-             </div>
-           </div>
-         </div>
-       </div>
+            <!-- 예제 소스 -->
+            <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 () => {
+                  try {
+                    const response = await useApi&lt;ApiResponse&lt;object&gt;&gt;(
+                      "/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&lt;ApiResponse&lt;object&gt;&gt;(
+                      "/non-existent-endpoint",
+                      {
+                        handleError: false,
+                        showAlert: false,
+                      }
+                    );
+                  } catch (error: any) {
+                    console.log("네트워크 에러:", error.message);
+                  }
+                };`}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
 
       <!-- 사용법 가이드 -->
       <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
@@ -279,21 +291,17 @@ const apiTest = async () => {
   isLoading.value = true;
   autoErrorResult.value = "";
 
-  try {
-    const response = await useApi<ApiResponse<object>>(
-      "/admin/common-codes/USER_STATUS_ACTIVE222"
-    );
+  const response = await useApi<ApiResponse<object>>(
+    "/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]요청한 코드를 찾을 수 없습니다.";

stores/user.ts

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