feat(namecard): add base ui on user page

Author: genj11

apps/web/app/lang/en.json

@@ -120,5 +120,15 @@
   "privacy": {
     "title": "Privacy Policy",
     "button": "Back to Top"
+  },
+  "namecard": {
+    "title_edit": "Create/Edit Name Card",
+    "edit": "edit",
+    "creation_status": {
+      "not_created": "not created",
+      "inquiry_in_progress": "inquiry in progress",
+      "inquiry_failed": "inquiry failed",
+      "inquiry_completed": "inquiry complete"
+    }
   }
-}
+}

apps/web/app/lang/ja.json

@@ -138,5 +138,15 @@
   "privacy": {
     "title": "プライバシーポリシー",
     "button": "トップに戻る"
+  },
+  "namecard": {
+    "title_edit": "ネームカード作成・編集",
+    "edit": "編集する",
+    "creation_status": {
+      "not_created": "未作成",
+      "inquiry_in_progress": "注文番号照会中",
+      "inquiry_failed": "注文番号照会失敗",
+      "inquiry_completed": "注文番号照合完了"
+    }
   }
-}
+}

apps/web/app/pages/namecard/[id]/index.vue

@@ -1,15 +1,76 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from '#i18n'
+import CreationStatus, { type Status } from '~/components/namecard/CreationStatus.vue'
+import { useColor, useTypography } from '@vuejs-jp/composable'
+import type { NamecardUser } from '@vuejs-jp/model'
+
+const { t } = useI18n()
+const { fontWeight, fontSize } = useTypography()
+const { color } = useColor()
+
+const statusKey = computed<Status>(() => {
+  // TODO テーブルから取得する
+  return 'not_created'
+})
+const user = computed<NamecardUser>(() => {
+  // TODO テーブルから取得する
+  return {
+    display_name: 'jiyuujin',
+    avatar_url: '',
+    role: 'attendee',
+  }
+})
+</script>
 <template>
   <div class="name-card-user-root">
-    <VFLinkButton is="button" background-color="vue-green/200" color="white" href=""
-      >hoge</VFLinkButton
+    <h1
+      :style="{
+        fontWeight: fontWeight('heading/700'),
+        fontSize: fontSize('heading/700'),
+        color: color('vue-blue'),
+      }"
+      class="title"
     >
+      {{ t('namecard.title_edit') }}
+    </h1>
+    <CreationStatus :status-key="statusKey" class="creation-status" />
+    <VFNamecard23 :user="user" class="namecard" />
+    <VFLinkButton
+      is="button"
+      background-color="vue-green/200"
+      color="white"
+      href=""
+      class="edit-button"
+      >{{ t('namecard.edit') }}</VFLinkButton
+    >
+    <!-- TODO 作成フロー・注記挿入 -->
   </div>
 </template>
 
 <style scoped>
+@import url('~/assets/media.css');
+
 .name-card-user-root {
   --header-height: calc(var(--unit) * 10);
-  padding-top: var(--header-height);
+  padding-top: calc(var(--header-height) + var(--unit) * 15);
+  text-align: center;
+}
+.title {
+  margin-bottom: calc(var(--unit) * 5);
+}
+.creation-status {
+  margin: 0 auto calc(var(--unit) * 2.5);
+}
+.namecard {
+  margin: 0 auto calc(var(--unit) * 5);
+}
+.edit-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 198px;
+  height: 66px;
+  margin: 0 auto calc(var(--unit) * 5);
 }
 </style>