feat: ディレクトリ構造を調整

src/layouts/SideNavigation.vue

@@ -9,6 +9,10 @@ const route = useRoute()
 <template>
   <nav class="flex flex-col gap-2 py-2 pr-2">
     <SideNavigationButton :is-here="route.path === '/'" path="/" text="home" />
-    <SideNavigationButton :is-here="route.path === '/about'" path="/about" text="about" />
+    <SideNavigationButton
+      :is-here="route.path === '/membership'"
+      path="/membership"
+      text="membership"
+    />
   </nav>
 </template>

src/pages/membership/membershipPage.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>This is an membership page</h1>
+  </div>
+</template>

src/router/index.ts

@@ -1,4 +1,4 @@
-import HomeView from '@/pages/HomeView.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: HomeView,
+      component: homePage,
     },
     {
-      path: '/about',
-      name: 'about',
+      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/AboutPage.vue'),
+      component: () => import('@/pages/membership/membershipPage.vue'),
     },
   ],
 })