feat: initialize gateway frontend with Vue 3, Vite, and Tailwind CSS
- Set up pnpm workspace with necessary dependencies including esbuild and vue-demi. - Create initial HTML structure for the frontend application. - Implement main App component with Vue Router integration. - Add global styles using Tailwind CSS and custom theme variables. - Define TypeScript environment for Vue components. - Create a default layout component for consistent page structure. - Set up Vue Router with a home view route. - Implement authentication store using Pinia for user management. - Create utility for tRPC client setup. - Develop HomeView component with login functionality and server status placeholder. - Configure TypeScript for Node with composite and strict options. - Set up Vite configuration for Vue and Tailwind CSS integration.
This commit is contained in:
@@ -0,0 +1,107 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import DefaultLayout from '../layouts/DefaultLayout.vue';
|
||||
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
|
||||
const handleLogin = () => {
|
||||
console.log('Login attempt:', username.value);
|
||||
// tRPC 호출 로직이 들어갈 자리
|
||||
};
|
||||
|
||||
const handleJoin = () => {
|
||||
console.log('Join attempt');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DefaultLayout>
|
||||
<div class="max-w-4xl mx-auto py-12 px-4 flex flex-col items-center space-y-12">
|
||||
<!-- Logo / Title -->
|
||||
<div class="text-center">
|
||||
<h2 class="text-4xl font-serif font-bold text-white tracking-widest">삼국지 모의전투 HiDCHe</h2>
|
||||
</div>
|
||||
|
||||
<!-- Login Box -->
|
||||
<div class="w-full max-w-md bg-zinc-800 border border-zinc-700 rounded shadow-2xl overflow-hidden">
|
||||
<div class="bg-zinc-700 px-6 py-2 text-center font-bold text-white border-b border-zinc-600">
|
||||
로그인
|
||||
</div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<label class="w-20 text-sm font-medium">계정명</label>
|
||||
<input
|
||||
v-model="username"
|
||||
type="text"
|
||||
class="flex-grow bg-zinc-900 border border-zinc-600 rounded px-3 py-1.5 text-white focus:outline-none focus:border-blue-500"
|
||||
placeholder="계정명"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<label class="w-20 text-sm font-medium">비밀번호</label>
|
||||
<input
|
||||
v-model="password"
|
||||
type="password"
|
||||
class="flex-grow bg-zinc-900 border border-zinc-600 rounded px-3 py-1.5 text-white focus:outline-none focus:border-blue-500"
|
||||
placeholder="비밀번호"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex space-x-2 pt-2">
|
||||
<button
|
||||
@click="handleJoin"
|
||||
class="flex-1 bg-yellow-600 hover:bg-yellow-500 text-black font-bold py-2 rounded transition-colors flex items-center justify-center space-x-2"
|
||||
>
|
||||
<span>가입 & 로그인</span>
|
||||
</button>
|
||||
<button
|
||||
@click="handleLogin"
|
||||
class="flex-[2] bg-blue-700 hover:bg-blue-600 text-white font-bold py-2 rounded transition-colors"
|
||||
>
|
||||
로그인
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Server Status Placeholder -->
|
||||
<div class="w-full max-w-2xl bg-zinc-900 border border-zinc-800 rounded-lg overflow-hidden shadow-xl">
|
||||
<div class="bg-zinc-800 px-4 py-2 border-b border-zinc-700 flex justify-between items-center">
|
||||
<span class="font-bold text-sm">체 현황</span>
|
||||
<span class="text-xs text-zinc-400">西紀 197年 7月 秋</span>
|
||||
</div>
|
||||
<div class="aspect-video bg-zinc-950 relative flex items-center justify-center">
|
||||
<!-- Map Placeholder -->
|
||||
<div class="text-zinc-700 text-lg italic">지도 이미지 및 현황 데이터 영역</div>
|
||||
|
||||
<!-- Example of a city dot if we wanted to mock it -->
|
||||
<div class="absolute bottom-4 right-4 text-[10px] text-blue-400">도시명 표기 끄기</div>
|
||||
</div>
|
||||
<div class="p-4 bg-black text-xs space-y-1 font-mono">
|
||||
<div class="flex items-start space-x-2">
|
||||
<span class="text-blue-400">◆</span>
|
||||
<span>197년 7월: [대회] 황제 수장의 명으로 전력전 대회가 개최됩니다! 천하의 영웅들을 모집하고 있습니다!</span>
|
||||
</div>
|
||||
<div class="flex items-start space-x-2">
|
||||
<span class="text-cyan-400">●</span>
|
||||
<span>197년 7월: [재난] 탐라 호토에 메뚜기 떼가 발생하여 도시가 황폐해지고 있습니다.</span>
|
||||
</div>
|
||||
<div class="flex items-start space-x-2">
|
||||
<span class="text-green-400">●</span>
|
||||
<span>197년 7월: [자금] 가을이 되어 봉록에 따라 군량이 지급됩니다.</span>
|
||||
</div>
|
||||
<div class="flex items-start space-x-2">
|
||||
<span class="text-red-400">●</span>
|
||||
<span>197년 4월: [재난] 남피, 무안에 홍수로 인해 피해가 급증하고 있습니다.</span>
|
||||
</div>
|
||||
<!-- ... more logs ... -->
|
||||
<div class="text-zinc-600 pt-2 italic text-center">최근 진행 상황 로그 (Placeholder)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Custom styles for the home view */
|
||||
</style>
|
||||
Reference in New Issue
Block a user