tab, component, popup 변경

pages/[tabId]/admin/resource.vue

@@ -14,7 +14,7 @@
 </template>
   
 <script setup lang="ts">
-import {colDefs} from '../../composables/grids/resourceGrid'
+import {colDefs} from '../../../composables/grids/resourceGrid'
 
 definePageMeta({
     title: '리소스 관리'

pages/[tabId]/index.vue

@@ -0,0 +1,123 @@
+<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
+        </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.userName
+            }}</span
+            >님!
+          </p>
+          <p class="text-sm text-gray-600">
+            {{ userStore.isAdmin ? "관리자" : "사용자" }} 권한으로
+            로그인되었습니다.
+          </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">
+import { useUserStore } from "~/stores/user";
+
+// 페이지 메타데이터 설정
+definePageMeta({
+  title: "Home",
+  description: "Welcome to our Nuxt.js application",
+});
+
+const userStore = useUserStore();
+</script>
+
+<style scoped>
+.home {
+  padding: 2rem;
+  text-align: center;
+}
+
+h1 {
+  color: #00dc82;
+  margin-bottom: 1rem;
+}
+</style>

pages/[tabId]/sampleList.vue

@@ -0,0 +1,20 @@
+<template>
+    <ContentsWrapper> <!-- wrapper(title) 추가 -->
+        <template #actions> <!--title 우측 버튼 설정-->
+            <button>스케쥴 확인</button>
+            <button @click="addSamplePopupShow = true">샘플 등록</button>
+        </template>
+        <!--메인 콘텐츠 영역-->
+        <input type="text" >
+        <addSamplePopup v-model:show="addSamplePopupShow" />
+    </ContentsWrapper>
+</template>
+<script setup lang="ts">
+    import addSamplePopup from '../popup/addSamplePopup.vue';
+    // title(wrapper) 설정
+    definePageMeta({
+        title: '조회 결과'
+    })
+
+    const addSamplePopupShow = ref(false);
+</script>

pages/[tabId]/tui.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ToastGrid from '../components/ToastGrid.vue';
+import ToastGrid from '@/components/base/ToastGrid.vue';
 
 const data = [
   {

pages/index.vue

@@ -100,6 +100,13 @@
 
 <script setup lang="ts">
 import { useUserStore } from "~/stores/user";
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+onMounted(()=> {
+  router.push('/1/') 
+})
+
 
 // 페이지 메타데이터 설정
 definePageMeta({
@@ -108,6 +115,7 @@ definePageMeta({
 });
 
 const userStore = useUserStore();
+
 </script>
 
 <style scoped>

pages/popup/addSamplePopup.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <PopupWrapper width="1000px" height="600px" v-model:show="show">
+      <template #top>
+        <h2>의뢰 선택</h2>
+      </template>
+  
+      <template #middle>
+        <ToastGrid :ref="sampleListRef" :data="data" :columns="columns" :rowHeaders="rowHeader"/>
+      </template>
+  
+      <template #bottom>
+        <button>선택</button>
+      </template>
+    </PopupWrapper>
+  </div>
+</template>
+  
+<script setup lang="ts">
+
+const show = defineModel('show', {type: Boolean, default:false});
+
+
+const sampleListRef = ref();
+
+const data= [
+  {name : "TEXT", user : "TEXT", end : "TEXT" },
+  {name : "TEXT", user : "TEXT", end : "TEXT" }
+];
+
+const rowHeader = ['rowNum'];
+
+const columns = [
+  { header: '의뢰 이름', name: 'name', width: 300 },
+  { header: '의뢰자', name: 'user' },
+  { header: '마감일자', name: 'end' },
+]
+</script>