feat: membershipページにユーザータイプ選択コンポーネントを追加

Author: reiroop

src/pages/membership/MemberShipPageUserTypeSelect.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { UserType } from './types/userType'
+
+const getUserTypeSelectURL = (userType: UserType) => {
+  return {
+    name: 'membership',
+    query: { user_type: userType },
+  }
+}
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <RouterLink :to="getUserTypeSelectURL('new')"> 新規入部 </RouterLink>
+    <RouterLink :to="getUserTypeSelectURL('rejoin')"> 再入部 </RouterLink>
+    <RouterLink :to="getUserTypeSelectURL('active')"> 継続所属 </RouterLink>
+  </div>
+</template>

src/pages/membership/membershipPage.vue

@@ -1,5 +1,14 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+import MemberShipPageUserTypeSelect from './MemberShipPageUserTypeSelect.vue'
+
+const route = useRoute()
+</script>
+
 <template>
-  <div>
-    <h1>This is an membership page</h1>
+  <div class="flex flex-col gap-2">
+    <MemberShipPageUserTypeSelect />
+    <div>route.query.user_type: {{ route.query.user_type }}</div>
   </div>
 </template>

src/pages/membership/types/userType.ts

@@ -0,0 +1 @@
+export type UserType = 'new' | 'rejoin' | 'active'

src/router/index.ts

@@ -1,4 +1,4 @@
-import homePage from '@/pages/homePage.vue'
+import HomePage from '@/pages/HomePage.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
@@ -7,15 +7,15 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: homePage,
+      component: HomePage,
     },
     {
       path: '/membership',
       name: 'membership',
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import('@/pages/membership/membershipPage.vue'),
+      component: () => import('@/pages/membership/MembershipPage.vue'),
     },
   ],
 })