124 lines
3.8 KiB
Vue
124 lines
3.8 KiB
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
|
||
|
|
</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>
|