feat: メンバーシップページにテキスト入力コンポーネントを追加し、traQ IDおよび名前の入力を実装

Author: reiroop

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>

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>