From 740ac25dfe0dae552ddcdf7daaf7025a2e859abb Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Wed, 1 Jan 2025 15:45:24 +0900
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20membership=E3=83=9A=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E3=81=AB=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC=E3=82=BF?=
 =?UTF-8?q?=E3=82=A4=E3=83=97=E9=81=B8=E6=8A=9E=E3=82=B3=E3=83=B3=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MemberShipPageUserTypeSelect.vue           | 18 ++++++++++++++++++
 src/pages/membership/MembershipPage.vue        | 14 ++++++++++++++
 src/pages/membership/membershipPage.vue        |  5 -----
 src/pages/membership/types/userType.ts         |  1 +
 src/router/index.ts                            |  6 +++---
 5 files changed, 36 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/membership/MemberShipPageUserTypeSelect.vue
 create mode 100644 src/pages/membership/MembershipPage.vue
 delete mode 100644 src/pages/membership/membershipPage.vue
 create mode 100644 src/pages/membership/types/userType.ts

diff --git a/src/pages/membership/MemberShipPageUserTypeSelect.vue b/src/pages/membership/MemberShipPageUserTypeSelect.vue
new file mode 100644
index 0000000..69dbe3f
--- /dev/null
+++ b/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>
diff --git a/src/pages/membership/MembershipPage.vue b/src/pages/membership/MembershipPage.vue
new file mode 100644
index 0000000..60ecf23
--- /dev/null
+++ b/src/pages/membership/MembershipPage.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+import MemberShipPageUserTypeSelect from './MemberShipPageUserTypeSelect.vue';
+
+const route = useRoute()
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <MemberShipPageUserTypeSelect />
+    <div>route.query.user_type: {{ route.query.user_type }}</div>
+  </div>
+</template>
diff --git a/src/pages/membership/membershipPage.vue b/src/pages/membership/membershipPage.vue
deleted file mode 100644
index fbb1268..0000000
--- a/src/pages/membership/membershipPage.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <h1>This is an membership page</h1>
-  </div>
-</template>
diff --git a/src/pages/membership/types/userType.ts b/src/pages/membership/types/userType.ts
new file mode 100644
index 0000000..97f6762
--- /dev/null
+++ b/src/pages/membership/types/userType.ts
@@ -0,0 +1 @@
+export type UserType = 'new' | 'rejoin' | 'active'
diff --git a/src/router/index.ts b/src/router/index.ts
index 753bdf4..6cedfaa 100644
--- a/src/router/index.ts
+++ b/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,7 +7,7 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: homePage,
+      component: HomePage,
     },
     {
       path: '/membership',
@@ -15,7 +15,7 @@ const router = createRouter({
       // 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'),
     },
   ],
 })

From 4e361e453515057ef1a0fafdbfb9eef152ce2034 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Wed, 1 Jan 2025 15:54:50 +0900
Subject: [PATCH 2/5] npm run format

---
 src/pages/membership/MembershipPage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/membership/MembershipPage.vue b/src/pages/membership/MembershipPage.vue
index 60ecf23..40951ff 100644
--- a/src/pages/membership/MembershipPage.vue
+++ b/src/pages/membership/MembershipPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router';
+import { useRoute } from 'vue-router'
 
-import MemberShipPageUserTypeSelect from './MemberShipPageUserTypeSelect.vue';
+import MemberShipPageUserTypeSelect from './MemberShipPageUserTypeSelect.vue'
 
 const route = useRoute()
 </script>

From 01feaff05f45185ee6f188055867d414c8a5b269 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Wed, 1 Jan 2025 21:29:04 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20/membership=20=E3=81=AB=E3=83=A6?=
 =?UTF-8?q?=E3=83=BC=E3=82=B6=E3=83=BC=E3=81=AE=E7=8A=B6=E6=85=8B=E9=81=B8?=
 =?UTF-8?q?=E6=8A=9E=E3=81=8A=E3=82=88=E3=81=B3=E3=83=AD=E3=82=B0=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=83=BB=E3=83=A1=E3=83=BC=E3=83=AB=E3=82=A2=E3=83=89?=
 =?UTF-8?q?=E3=83=AC=E3=82=B9=E8=AA=8D=E8=A8=BC=E3=81=AE=E3=83=97=E3=83=AD?=
 =?UTF-8?q?=E3=83=88=E3=82=BF=E3=82=A4=E3=83=97=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composable/parseRouteQuery.ts             |  9 ++++++
 src/pages/login/LoginPage.vue                 | 11 +++++++
 .../MemberShipPageUserTypeSelect.vue          | 18 -----------
 .../MemberShipPageUserTypeSelector.vue        | 17 +++++++++++
 .../MemberShipPageUserTypeSelectorButton.vue  | 19 ++++++++++++
 src/pages/membership/MembershipPage.vue       | 30 +++++++++++++++++--
 .../membership/MembershipPageLoginLink.vue    | 13 ++++++++
 .../MembershipPageVerifyEmailLink.vue         | 13 ++++++++
 src/pages/verify-email/VerifyEmailPage.vue    | 11 +++++++
 src/router/index.ts                           | 10 +++++++
 10 files changed, 130 insertions(+), 21 deletions(-)
 create mode 100644 src/composable/parseRouteQuery.ts
 create mode 100644 src/pages/login/LoginPage.vue
 delete mode 100644 src/pages/membership/MemberShipPageUserTypeSelect.vue
 create mode 100644 src/pages/membership/MemberShipPageUserTypeSelector.vue
 create mode 100644 src/pages/membership/MemberShipPageUserTypeSelectorButton.vue
 create mode 100644 src/pages/membership/MembershipPageLoginLink.vue
 create mode 100644 src/pages/membership/MembershipPageVerifyEmailLink.vue
 create mode 100644 src/pages/verify-email/VerifyEmailPage.vue

diff --git a/src/composable/parseRouteQuery.ts b/src/composable/parseRouteQuery.ts
new file mode 100644
index 0000000..f0c9a8c
--- /dev/null
+++ b/src/composable/parseRouteQuery.ts
@@ -0,0 +1,9 @@
+import type { LocationQueryValue } from 'vue-router'
+
+export const parseRouteQuery = (query: LocationQueryValue | LocationQueryValue[]) => {
+  if (Array.isArray(query)) {
+    return query.filter((v): v is string => typeof v === 'string')
+  } else {
+    return typeof query === 'string' ? [query] : ['']
+  }
+}
diff --git a/src/pages/login/LoginPage.vue b/src/pages/login/LoginPage.vue
new file mode 100644
index 0000000..a393bcc
--- /dev/null
+++ b/src/pages/login/LoginPage.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { parseRouteQuery } from '@/composable/parseRouteQuery'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const redirectParams = parseRouteQuery(route.query.redirect)
+</script>
+
+<template>
+  <RouterLink :to="redirectParams[0]"> ログインする </RouterLink>
+</template>
diff --git a/src/pages/membership/MemberShipPageUserTypeSelect.vue b/src/pages/membership/MemberShipPageUserTypeSelect.vue
deleted file mode 100644
index 69dbe3f..0000000
--- a/src/pages/membership/MemberShipPageUserTypeSelect.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<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>
diff --git a/src/pages/membership/MemberShipPageUserTypeSelector.vue b/src/pages/membership/MemberShipPageUserTypeSelector.vue
new file mode 100644
index 0000000..d58074f
--- /dev/null
+++ b/src/pages/membership/MemberShipPageUserTypeSelector.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import MemberShipPageUserTypeSelectorButton from './MemberShipPageUserTypeSelectorButton.vue'
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <MemberShipPageUserTypeSelectorButton userType="new">
+      新規入部
+    </MemberShipPageUserTypeSelectorButton>
+    <MemberShipPageUserTypeSelectorButton userType="rejoin">
+      再入部
+    </MemberShipPageUserTypeSelectorButton>
+    <MemberShipPageUserTypeSelectorButton userType="active">
+      継続所属
+    </MemberShipPageUserTypeSelectorButton>
+  </div>
+</template>
diff --git a/src/pages/membership/MemberShipPageUserTypeSelectorButton.vue b/src/pages/membership/MemberShipPageUserTypeSelectorButton.vue
new file mode 100644
index 0000000..377359c
--- /dev/null
+++ b/src/pages/membership/MemberShipPageUserTypeSelectorButton.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router'
+import type { UserType } from './types/userType'
+
+const { userType } = defineProps<{ userType: UserType }>()
+
+const route = useRoute()
+const router = useRouter()
+const replaceUserTypeQuery = (userType: UserType) => {
+  const newQuery = { ...route.query, user_type: userType }
+  router.replace({ query: newQuery })
+}
+</script>
+
+<template>
+  <button @click="replaceUserTypeQuery(userType)">
+    <slot></slot>
+  </button>
+</template>
diff --git a/src/pages/membership/MembershipPage.vue b/src/pages/membership/MembershipPage.vue
index 40951ff..206f06a 100644
--- a/src/pages/membership/MembershipPage.vue
+++ b/src/pages/membership/MembershipPage.vue
@@ -1,14 +1,38 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-import MemberShipPageUserTypeSelect from './MemberShipPageUserTypeSelect.vue'
+import MemberShipPageVerifyEmailLink from '@/pages/membership/MembershipPageVerifyEmailLink.vue'
+import MemberShipPageUserTypeSelector from './MemberShipPageUserTypeSelector.vue'
+import MembershipPageLoginLink from './MembershipPageLoginLink.vue'
 
 const route = useRoute()
+
+const isLoggedIn = ref(false)
+const hasIsctAddress = ref(false)
+const hasCustomerObjectOnTraqId = ref(false)
+const isUserTypeActive = computed(() => route.query.user_type === 'active')
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
-    <MemberShipPageUserTypeSelect />
-    <div>route.query.user_type: {{ route.query.user_type }}</div>
+    <div v-if="isLoggedIn">
+      <div v-if="!hasCustomerObjectOnTraqId && !hasIsctAddress">
+        isct アドレスの認証が必要です
+        <MemberShipPageVerifyEmailLink />
+      </div>
+      <div v-else>請求書情報入力へ</div>
+    </div>
+    <div v-else>
+      <MemberShipPageUserTypeSelector />
+      <div v-if="isUserTypeActive">
+        ログインが必要です
+        <MembershipPageLoginLink />
+      </div>
+      <div v-else-if="!hasIsctAddress">
+        isct アドレスの認証が必要です <MemberShipPageVerifyEmailLink />
+      </div>
+      <div v-else>請求書情報入力へ</div>
+    </div>
   </div>
 </template>
diff --git a/src/pages/membership/MembershipPageLoginLink.vue b/src/pages/membership/MembershipPageLoginLink.vue
new file mode 100644
index 0000000..333abcc
--- /dev/null
+++ b/src/pages/membership/MembershipPageLoginLink.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const getLoginPageURL = {
+  path: '/login',
+  query: { redirect: route.fullPath },
+}
+</script>
+
+<template>
+  <RouterLink :to="getLoginPageURL">ログインへ</RouterLink>
+</template>
diff --git a/src/pages/membership/MembershipPageVerifyEmailLink.vue b/src/pages/membership/MembershipPageVerifyEmailLink.vue
new file mode 100644
index 0000000..bfd5aa2
--- /dev/null
+++ b/src/pages/membership/MembershipPageVerifyEmailLink.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const getVerifyEmailPageURL = {
+  path: '/verify-email',
+  query: { redirect: route.fullPath },
+}
+</script>
+
+<template>
+  <RouterLink :to="getVerifyEmailPageURL">isct アドレスの認証へ</RouterLink>
+</template>
diff --git a/src/pages/verify-email/VerifyEmailPage.vue b/src/pages/verify-email/VerifyEmailPage.vue
new file mode 100644
index 0000000..900d5ca
--- /dev/null
+++ b/src/pages/verify-email/VerifyEmailPage.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { parseRouteQuery } from '@/composable/parseRouteQuery'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const redirectParams = parseRouteQuery(route.query.redirect)
+</script>
+
+<template>
+  <RouterLink :to="redirectParams[0]"> isct アドレスを認証する </RouterLink>
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 6cedfaa..8172189 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,6 +17,16 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('@/pages/membership/MembershipPage.vue'),
     },
+    {
+      path: '/verify-email',
+      name: 'verify-email',
+      component: () => import('@/pages/verify-email/VerifyEmailPage.vue'),
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('@/pages/login/LoginPage.vue'),
+    },
   ],
 })
 

From 1a542bb9639b9b526bacca81cbd5a05b13a1b5fe Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Thu, 2 Jan 2025 00:51:07 +0900
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20membership=E3=83=9A=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=83=AD=E3=82=B8=E3=83=83?=
 =?UTF-8?q?=E3=82=AF=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/membership/MembershipPage.vue | 72 ++++++++++++++++++-------
 1 file changed, 54 insertions(+), 18 deletions(-)

diff --git a/src/pages/membership/MembershipPage.vue b/src/pages/membership/MembershipPage.vue
index 206f06a..48d0311 100644
--- a/src/pages/membership/MembershipPage.vue
+++ b/src/pages/membership/MembershipPage.vue
@@ -8,31 +8,67 @@ import MembershipPageLoginLink from './MembershipPageLoginLink.vue'
 
 const route = useRoute()
 
+const isUserTypeNew = computed(() => route.query.user_type === 'new')
+const isUserTypeRejoin = computed(() => route.query.user_type === 'rejoin')
+const isUserTypeActive = computed(() => route.query.user_type === 'active')
+const isUserTypeQueryValid = computed(
+  () => isUserTypeNew.value || isUserTypeRejoin.value || isUserTypeActive.value,
+)
+
 const isLoggedIn = ref(false)
-const hasIsctAddress = ref(false)
+const hasVerifiedMailAddress = ref(false)
 const hasCustomerObjectOnTraqId = ref(false)
-const isUserTypeActive = computed(() => route.query.user_type === 'active')
+const shouldShowUserTypeSelector = computed(() => !isLoggedIn.value)
+const needUserTypeSelect = computed(() => !isLoggedIn.value && !isUserTypeQueryValid.value)
+const needMailAddressInput = computed(
+  () =>
+    (isLoggedIn.value && !hasCustomerObjectOnTraqId.value && !hasVerifiedMailAddress.value) ||
+    (!isLoggedIn.value &&
+      (isUserTypeNew.value || isUserTypeRejoin.value) &&
+      !hasVerifiedMailAddress.value),
+)
+const needLogin = computed(() => isUserTypeActive.value && !isLoggedIn.value)
+
+const hasCustomerObjectOnMailAddress = ref(false)
+const hasTraQIdOnCustomerObject = ref(false)
+const hasCustomerObject = computed(
+  () => hasCustomerObjectOnMailAddress.value || hasCustomerObjectOnTraqId.value,
+)
+const canShowInvoiceForm = computed(
+  () =>
+    (isLoggedIn.value && (hasCustomerObjectOnTraqId.value || hasVerifiedMailAddress.value)) ||
+    (!isLoggedIn.value &&
+      (isUserTypeNew.value || isUserTypeRejoin.value) &&
+      hasVerifiedMailAddress.value),
+)
+const needTraqIdInput = computed(
+  () =>
+    isUserTypeRejoin.value &&
+    (!hasCustomerObjectOnMailAddress.value || !hasTraQIdOnCustomerObject.value),
+)
+const needNameInput = computed(() => !hasCustomerObject.value)
+const hasValidTraqId = computed(() => !needTraqIdInput.value && false)
+const hasName = computed(() => !needNameInput.value && false)
+const canShowInvoiceInfoConfirm = computed(
+  () => needNameInput.value && hasValidTraqId.value && hasName.value,
+)
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
-    <div v-if="isLoggedIn">
-      <div v-if="!hasCustomerObjectOnTraqId && !hasIsctAddress">
-        isct アドレスの認証が必要です
-        <MemberShipPageVerifyEmailLink />
-      </div>
-      <div v-else>請求書情報入力へ</div>
-    </div>
-    <div v-else>
+    <div v-if="shouldShowUserTypeSelector">
       <MemberShipPageUserTypeSelector />
-      <div v-if="isUserTypeActive">
-        ログインが必要です
-        <MembershipPageLoginLink />
-      </div>
-      <div v-else-if="!hasIsctAddress">
-        isct アドレスの認証が必要です <MemberShipPageVerifyEmailLink />
-      </div>
-      <div v-else>請求書情報入力へ</div>
     </div>
+    <div v-if="needUserTypeSelect">新規入部、再入部、継続所属のいずれかを選択してください</div>
+    <div v-if="needMailAddressInput">
+      isct アドレスの認証が必要です <MemberShipPageVerifyEmailLink />
+    </div>
+    <div v-if="needLogin">
+      ログインが必要です
+      <MembershipPageLoginLink />
+    </div>
+    <div v-if="canShowInvoiceForm && needTraqIdInput">traQ ID を入力してください</div>
+    <div v-if="canShowInvoiceForm && needNameInput">名前を入力してください</div>
+    <div v-if="canShowInvoiceInfoConfirm">請求書発行のための情報を確認してください</div>
   </div>
 </template>

From d209d474e7ac4cc20e25f8100f4982785128af2b Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Thu, 2 Jan 2025 13:11:59 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=E3=83=A1=E3=83=B3=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E3=82=B7=E3=83=83=E3=83=97=E3=83=9A=E3=83=BC=E3=82=B8?=
 =?UTF-8?q?=E3=81=AB=E3=83=86=E3=82=AD=E3=82=B9=E3=83=88=E5=85=A5=E5=8A=9B?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=97=E3=80=81traQ=20ID=E3=81=8A?=
 =?UTF-8?q?=E3=82=88=E3=81=B3=E5=90=8D=E5=89=8D=E3=81=AE=E5=85=A5=E5=8A=9B?=
 =?UTF-8?q?=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/membership/MembershipPage.vue       | 23 ++++++++----
 .../membership/MembershipPageInputText.vue    | 36 +++++++++++++++++++
 2 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/membership/MembershipPageInputText.vue

diff --git a/src/pages/membership/MembershipPage.vue b/src/pages/membership/MembershipPage.vue
index 48d0311..d7af180 100644
--- a/src/pages/membership/MembershipPage.vue
+++ b/src/pages/membership/MembershipPage.vue
@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router'
 
 import MemberShipPageVerifyEmailLink from '@/pages/membership/MembershipPageVerifyEmailLink.vue'
 import MemberShipPageUserTypeSelector from './MemberShipPageUserTypeSelector.vue'
+import MembershipPageInputText from './MembershipPageInputText.vue'
 import MembershipPageLoginLink from './MembershipPageLoginLink.vue'
 
 const route = useRoute()
@@ -16,7 +17,7 @@ const isUserTypeQueryValid = computed(
 )
 
 const isLoggedIn = ref(false)
-const hasVerifiedMailAddress = ref(false)
+const hasVerifiedMailAddress = ref(true)
 const hasCustomerObjectOnTraqId = ref(false)
 const shouldShowUserTypeSelector = computed(() => !isLoggedIn.value)
 const needUserTypeSelect = computed(() => !isLoggedIn.value && !isUserTypeQueryValid.value)
@@ -46,9 +47,11 @@ const needTraqIdInput = computed(
     isUserTypeRejoin.value &&
     (!hasCustomerObjectOnMailAddress.value || !hasTraQIdOnCustomerObject.value),
 )
+const traqIdInput = ref('')
 const needNameInput = computed(() => !hasCustomerObject.value)
-const hasValidTraqId = computed(() => !needTraqIdInput.value && false)
-const hasName = computed(() => !needNameInput.value && false)
+const nameInput = ref('')
+const hasValidTraqId = computed(() => !needTraqIdInput.value || traqIdInput.value.length > 0)
+const hasName = computed(() => !needNameInput.value || nameInput.value.length > 0)
 const canShowInvoiceInfoConfirm = computed(
   () => needNameInput.value && hasValidTraqId.value && hasName.value,
 )
@@ -60,15 +63,21 @@ const canShowInvoiceInfoConfirm = computed(
       <MemberShipPageUserTypeSelector />
     </div>
     <div v-if="needUserTypeSelect">新規入部、再入部、継続所属のいずれかを選択してください</div>
-    <div v-if="needMailAddressInput">
+    <div v-if="needMailAddressInput" class="flex flex-col gap-2">
       isct アドレスの認証が必要です <MemberShipPageVerifyEmailLink />
     </div>
-    <div v-if="needLogin">
+    <div v-if="needLogin" class="flex flex-col gap-2">
       ログインが必要です
       <MembershipPageLoginLink />
     </div>
-    <div v-if="canShowInvoiceForm && needTraqIdInput">traQ ID を入力してください</div>
-    <div v-if="canShowInvoiceForm && needNameInput">名前を入力してください</div>
+    <div v-if="canShowInvoiceForm && needTraqIdInput" class="flex flex-col gap-2">
+      traQ ID を入力してください
+      <MembershipPageInputText v-model="traqIdInput" />
+    </div>
+    <div v-if="canShowInvoiceForm && needNameInput" class="flex flex-col gap-2">
+      名前を入力してください
+      <MembershipPageInputText v-model="nameInput" />
+    </div>
     <div v-if="canShowInvoiceInfoConfirm">請求書発行のための情報を確認してください</div>
   </div>
 </template>
diff --git a/src/pages/membership/MembershipPageInputText.vue b/src/pages/membership/MembershipPageInputText.vue
new file mode 100644
index 0000000..b65ea19
--- /dev/null
+++ b/src/pages/membership/MembershipPageInputText.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue'
+
+const model = defineModel<string>({ required: true })
+const { autoFocus, className, required, placeholder } = withDefaults(
+  defineProps<{
+    autoFocus?: boolean
+    className?: string
+    required?: boolean
+    placeholder?: string
+  }>(),
+  {
+    autoFocus: false,
+    className: 'rounded border px-1',
+    required: false,
+    placeholder: '',
+  },
+)
+const inputRef = useTemplateRef('input-ref')
+
+onMounted(() => {
+  if (autoFocus) {
+    inputRef.value?.focus()
+  }
+})
+</script>
+
+<template>
+  <input
+    ref="input-ref"
+    :class="className"
+    :placeholder="placeholder"
+    :required="required"
+    v-model="model"
+  />
+</template>