bio_frontend/pages/[tabId]/index.vue

<template>
  <div
    class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4"
  >
    <div class="max-w-4xl mx-auto">
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          Integrated Bio Foundry Platform(pages/[tabId]/index.vue)
        </h1>
        <p class="text-xl text-gray-600">
          통합 바이오 파운드리 플랫폼에 오신 것을 환영합니다
        </p>

        <!-- 사용자 환영 메시지 -->
        <div
          v-if="userStore.isLoggedIn"
          class="mt-6 p-4 bg-white rounded-lg shadow-md inline-block"
        >
          <p class="text-lg text-gray-800 mb-2">
            안녕하세요,
            <span class="font-semibold text-blue-600">{{
              userStore.user?.name
            }}</span
            >님!
          </p>
          <p class="text-sm text-gray-600">
            <button
              class="mr-2 bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded"
              @click="apiTest"
            >
              자동 에러 처리
            </button>
            <button
              class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded"
              @click="apiTestWithCustomError"
            >
              직접 에러 처리
            </button>
          </p>
        </div>
        <div
          v-else
          class="mt-6 p-4 bg-yellow-50 rounded-lg shadow-md inline-block"
        >
          <p class="text-lg text-gray-800 mb-2">로그인이 필요합니다</p>
          <NuxtLink
            to="/login"
            class="inline-block mt-2 bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
          >
            로그인하기
          </NuxtLink>
        </div>
      </div>

      <!-- Tailwind CSS 테스트 섹션 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div
          class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"
        >
          <div
            class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mb-4 mx-auto"
          >
            <span class="text-white font-bold">1</span>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Feature 1</h3>
          <p class="text-gray-600">Tailwind CSS가 정상 작동하고 있습니다!</p>
        </div>

        <div
          class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"
        >
          <div
            class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mb-4 mx-auto"
          >
            <span class="text-white font-bold">2</span>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Feature 2</h3>
          <p class="text-gray-600">반응형 디자인이 적용되었습니다.</p>
        </div>

        <div
          class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"
        >
          <div
            class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mb-4 mx-auto"
          >
            <span class="text-white font-bold">3</span>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Feature 3</h3>
          <p class="text-gray-600">모던한 UI 컴포넌트를 사용할 수 있습니다.</p>
        </div>
      </div>

      <!-- 버튼 테스트 -->
      <div class="text-center space-x-4">
        <button
          class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
        >
          Primary Button
        </button>
        <button
          class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
        >
          Secondary Button
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  title: "Home",
  description: "Welcome to our Nuxt.js application",
});

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>
.home {
  padding: 2rem;
  text-align: center;
}

h1 {
  color: #00dc82;
  margin-bottom: 1rem;
}
</style>