Vue 3 프론트엔드

examples/b2b-admin/web-vue/
├── src/
│   ├── main.ts              # 앱 진입점
│   ├── App.vue              # 루트 컴포넌트
│   ├── api/
│   │   └── client.ts        # API 클라이언트 (React와 동일)
│   ├── types/
│   │   └── api.ts           # 타입 정의 (React와 동일)
│   ├── composables/         # Vue Hooks (React의 hooks/)
│   │   ├── useHealth.ts
│   │   └── useProjects.ts
│   ├── router/
│   │   └── index.ts         # Vue Router 설정
│   ├── components/
│   │   ├── HealthStatus.vue
│   │   ├── AppLayout.vue
│   │   ├── ProjectForm.vue
│   │   └── ProjectCard.vue
│   └── pages/
│       ├── ProjectsPage.vue
│       └── ProjectDetailPage.vue
├── package.json
├── vite.config.ts
└── tailwind.config.js

// composables/useProjects.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query';
import { computed, type Ref } from 'vue';
import { apiClient } from '../api/client';

export function useProjects(page: Ref<number> = ref(1)) {
  return useQuery({
    queryKey: computed(() => ['projects', page.value]),
    queryFn: () =>
      apiClient.get(`/api/v1/projects?page=${page.value}`),
  });
}

export function useCreateProject() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (data) =>
      apiClient.post('/api/v1/projects', data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['projects'] });
    },
  });
}

<script setup lang="ts">
import { ref } from 'vue';
import { useCreateProject } from '../composables/useProjects';

const name = ref('');
const description = ref('');
const { mutate: createProject, isPending } = useCreateProject();

const handleSubmit = () => {
  if (!name.value.trim()) return;

  createProject(
    { name: name.value.trim(), description: description.value.trim() },
    {
      onSuccess: () => {
        name.value = '';
        description.value = '';
      },
    }
  );
};
</script>

<template>
  <form @submit.prevent="handleSubmit" class="space-y-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">
        프로젝트 이름
      </label>
      <input
        v-model="name"
        type="text"
        class="w-full px-3 py-2 border border-gray-300 rounded-lg"
        placeholder="프로젝트 이름 입력"
        required
      />
    </div>
    <button
      type="submit"
      :disabled="isPending"
      class="w-full bg-blue-600 text-white py-2 rounded-lg"
    >
      {{ isPending ? '생성 중...' : '프로젝트 생성' }}
    </button>
  </form>
</template>

# 1. 백엔드 실행 (Hono 권장)
cd examples/b2b-admin/api-hono
npm install
npm run dev

# 2. Vue 프론트엔드 실행 (새 터미널)
cd examples/b2b-admin/web-vue
npm install
npm run dev

# 브라우저에서 http://localhost:5174 접속