From a9d38fff0957ecf36c0a89cb39507c1de20e3798 Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Thu, 18 Jul 2024 01:15:19 +0900
Subject: [PATCH 1/9] feat: update data retrieval method for attendees

---
 apps/web/app/composables/useAuth.ts        |  6 +-
 apps/web/app/composables/useSupabase.ts    |  6 +-
 apps/web/app/pages/namecard/[id]/index.vue | 66 +++++++++++++++-------
 apps/web/app/pages/namecard/index.vue      | 12 ++--
 4 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/apps/web/app/composables/useAuth.ts b/apps/web/app/composables/useAuth.ts
index 89d4e9f8..cd54f17e 100644
--- a/apps/web/app/composables/useAuth.ts
+++ b/apps/web/app/composables/useAuth.ts
@@ -30,9 +30,5 @@ export function useAuth() {
    return data.user
   }
 
-  const authUserId = getUser().then(user => {
-    return user.id
-  }).catch(()=> null)
-
-  return { signIn, signOut, authUserId }
+  return { signIn, signOut, getUser }
 }
diff --git a/apps/web/app/composables/useSupabase.ts b/apps/web/app/composables/useSupabase.ts
index e78165ea..5c86b2a0 100644
--- a/apps/web/app/composables/useSupabase.ts
+++ b/apps/web/app/composables/useSupabase.ts
@@ -20,6 +20,10 @@ export function useSupabase() {
     return await client.from(table).select().eq('role', role)
   }
 
+  async function fetchAttendeeDataByUserId(table: Extract<Table, 'attendees'>, userId:string) {
+    return await client.from(table).select().eq('user_id', userId)
+  }
+
   async function upsertSpeaker(table: Extract<Table, 'speakers'>, target: FormSpeaker) {
     const targetData = { ...target }
 
@@ -52,5 +56,5 @@ export function useSupabase() {
     await client.storage.from(bucket).upload(filePath, file)
   }
 
-  return { fetchData, fetchAttendeeData, upsertSpeaker, upsertSponsor, upsertAttendee, upsertStaff, uploadAvatar }
+  return { fetchData, fetchAttendeeData, fetchAttendeeDataByUserId, upsertSpeaker, upsertSponsor, upsertAttendee, upsertStaff, uploadAvatar }
 }
diff --git a/apps/web/app/pages/namecard/[id]/index.vue b/apps/web/app/pages/namecard/[id]/index.vue
index 17766a24..678a9f72 100644
--- a/apps/web/app/pages/namecard/[id]/index.vue
+++ b/apps/web/app/pages/namecard/[id]/index.vue
@@ -1,23 +1,45 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from '#i18n'
-import { navigateTo, useRoute } from '#imports'
+import { navigateTo, useRoute, useAsyncData, useAuthSession, useAuth } from '#imports'
 import CreationStatus, { type Status } from '~/components/namecard/CreationStatus.vue'
+import CreationProcess from '~/components/namecard/CreationProcess.vue'
 import type { NamecardUser } from '@vuejs-jp/model'
+import { useSupabase } from '~/composables/useSupabase'
 
 const route = useRoute()
 const { t } = useI18n()
 
+const { fetchAttendeeDataByUserId } = useSupabase()
+// TODO 認証確認をどこまで正確に行うか
+const { getUser } = useAuth()
+const { hasAuth } = useAuthSession()
+
+const { data: authUserId } = await useAsyncData('authUserId', async () => {
+  return (await getUser()).id
+})
+
+const { data: attendeeByUserId } = await useAsyncData('attendeeByUserId', async () => {
+  return await fetchAttendeeDataByUserId('attendees', authUserId.value ?? '')
+})
+
+const userData = computed(() => {
+  return attendeeByUserId.value?.data?.[0]
+})
+
 const statusKey = computed<Status>(() => {
-  // TODO テーブルから取得する
-  return 'not_created'
+  // TODO テーブルのどの箇所を参照して全ステータスを判定する？
+  if (userData.value?.activated_at) {
+    return 'inquiry_in_progress'
+  } else {
+    return 'not_created'
+  }
 })
 const user = computed<NamecardUser>(() => {
-  // TODO テーブルから取得する
   return {
-    display_name: 'jiyuujin',
-    avatar_url: '',
-    role: 'attendee',
+    display_name: userData.value?.display_name ?? '',
+    avatar_url: userData.value?.avatar_url ?? '',
+    role: userData.value?.role ?? '',
   }
 })
 
@@ -27,23 +49,27 @@ function handleLinkButton() {
 </script>
 <template>
   <NuxtLayout name="namecard-base">
-    <CreationStatus :status-key="statusKey" class="creation-status" />
-    <VFNamecard23 :user="user" class="namecard" />
-    <VFLinkButton
-      is="button"
-      background-color="vue-green/200"
-      color="white"
-      class="edit-button"
-      @click="handleLinkButton"
-      >{{ t('namecard.edit') }}</VFLinkButton
-    >
-    <!-- TODO 作成フロー・注記挿入 -->
+    <div class="namecard-user-root">
+      <CreationStatus :status-key="statusKey" class="creation-status" />
+      <VFNamecard23 :user="user" class="namecard" />
+      <VFLinkButton
+        is="button"
+        background-color="vue-green/200"
+        color="white"
+        class="edit-button"
+        @click="handleLinkButton"
+        >{{ t('namecard.edit') }}</VFLinkButton
+      >
+      <CreationProcess />
+    </div>
   </NuxtLayout>
 </template>
 
 <style scoped>
 @import url('~/assets/media.css');
-
+.namecard-user-root {
+  text-align: center;
+}
 .creation-status {
   margin: 0 auto calc(var(--unit) * 2.5);
 }
@@ -56,7 +82,7 @@ function handleLinkButton() {
   align-items: center;
   width: 198px;
   height: 66px;
-  margin: 0 auto calc(var(--unit) * 5);
+  margin: 0 auto calc(var(--unit) * 7.5);
 }
 
 /* TODO モバイル版スタイル */
diff --git a/apps/web/app/pages/namecard/index.vue b/apps/web/app/pages/namecard/index.vue
index 7e6e7569..143fa103 100644
--- a/apps/web/app/pages/namecard/index.vue
+++ b/apps/web/app/pages/namecard/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import type { AuthProvider } from '@vuejs-jp/model'
 import { useAuth } from '~/composables/useAuth'
 import { useAuthSession } from '#imports'
-import { createError, useRuntimeConfig, navigateTo } from '#imports'
+import { createError, useRuntimeConfig, navigateTo, useAsyncData } from '#imports'
 import { useI18n } from '#i18n'
 import MarkDownText from '~/components/MarkDownText.vue'
 import CreationProcess from '~/components/namecard/CreationProcess.vue'
@@ -16,12 +16,16 @@ if (!config.public.enableRegisterNamecard) {
 
 const { t } = useI18n()
 const showDialog = ref(false)
-const { signIn, authUserId } = useAuth()
+const { signIn, getUser } = useAuth()
 const { hasAuth } = useAuthSession()
 
+const { data: authUserId } = await useAsyncData('authUserId', async () => {
+  return (await getUser()).id
+})
+
 function handleClickButton(type: 'open' | 'close') {
   if (type === 'open') {
-    if (hasAuth?.value) return navigateTo(`/namecard/${authUserId}/`)
+    if (hasAuth?.value && authUserId.value) return navigateTo(`/namecard/${authUserId.value}/`)
     showDialog.value = true
   } else {
     showDialog.value = false
@@ -29,7 +33,7 @@ function handleClickButton(type: 'open' | 'close') {
 }
 
 function handleSignIn(provider: Extract<AuthProvider, 'github' | 'google'>) {
-  signIn(provider, `/namecard/${authUserId}/`)
+  signIn(provider, `/namecard/${authUserId.value}/`)
 }
 </script>
 

From c93ae8317a1ec98491c101a207d212049c427f53 Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Thu, 18 Jul 2024 01:16:13 +0900
Subject: [PATCH 2/9] style: style: adjust styles in CreationStatus

---
 apps/web/app/components/namecard/CreationStatus.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/components/namecard/CreationStatus.vue b/apps/web/app/components/namecard/CreationStatus.vue
index 7baee077..37b72ef7 100644
--- a/apps/web/app/components/namecard/CreationStatus.vue
+++ b/apps/web/app/components/namecard/CreationStatus.vue
@@ -42,11 +42,11 @@ const backgroundColor = computed(() => {
 
 <style scoped>
 .creation-status-root {
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   align-items: center;
-  width: 166px;
   height: 38px;
   border-radius: 38px;
+  padding: 0 38px;
 }
 </style>

From a26b44d93609bf3eeb8aa65dea92f1c79730a518 Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Fri, 19 Jul 2024 04:47:28 +0900
Subject: [PATCH 3/9] feat: refactor: atendee information retrieval into a
 composable

---
 apps/web/app/composables/useNamecard.ts    | 49 ++++++++++++++++++++++
 apps/web/app/pages/namecard/[id]/index.vue | 47 +++------------------
 2 files changed, 55 insertions(+), 41 deletions(-)
 create mode 100644 apps/web/app/composables/useNamecard.ts

diff --git a/apps/web/app/composables/useNamecard.ts b/apps/web/app/composables/useNamecard.ts
new file mode 100644
index 00000000..d755b2ea
--- /dev/null
+++ b/apps/web/app/composables/useNamecard.ts
@@ -0,0 +1,49 @@
+import { computed } from 'vue'
+import { useSupabase, useAsyncData, useAuth } from '#imports'
+import type { Status } from '~/components/namecard/CreationStatus.vue'
+import type { Attendee } from '@vuejs-jp/model'
+
+
+export async function useNamecard() {
+  const { fetchAttendeeDataByUserId } = useSupabase()
+  const { getUser } = useAuth()
+
+  const { data: authUserId } = await useAsyncData('authUserId', async () => {
+    return (await getUser()).id
+  })
+
+  const { data: attendeeByUserId } = await useAsyncData('attendeeByUserId', async () => {
+    return await fetchAttendeeDataByUserId('attendees', authUserId.value ?? '')
+  })
+
+  const userData = computed(() => {
+    return attendeeByUserId.value?.data?.[0]
+  })
+
+  const statusKey = computed<Status>(() => {
+    // TODO テーブルのどの箇所を参照して全ステータスを判定する？
+    if (userData.value?.activated_at) {
+      return 'inquiry_in_progress'
+    } else {
+      return 'not_created'
+    }
+  })
+
+  const attendee = computed<Attendee>(() => {
+    // TODO time 系は空文字じゃない方が良い。supabase側で設定できるのか、フロント側でnew Date使うのか？
+    return {
+      id: userData.value?.id ?? '',
+      user_id: userData.value?.user_id ?? '',
+      activated_at: userData.value?.activated_at ?? '',
+      created_at: userData.value?.created_at ?? '',
+      updated_at: userData.value?.updated_at ?? '',
+      display_name: userData.value?.display_name ?? '',
+      email: userData.value?.email ?? '',
+      provider: userData.value?.provider ?? '',
+      avatar_url: userData.value?.avatar_url ?? '',
+      role: userData.value?.role ?? '',
+      receipt_id: userData.value?.receipt_id ?? '',
+    }
+  })
+  return { authUserId, userData, statusKey, attendee }
+}
\ No newline at end of file
diff --git a/apps/web/app/pages/namecard/[id]/index.vue b/apps/web/app/pages/namecard/[id]/index.vue
index 678a9f72..c666b0a9 100644
--- a/apps/web/app/pages/namecard/[id]/index.vue
+++ b/apps/web/app/pages/namecard/[id]/index.vue
@@ -1,57 +1,22 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useI18n } from '#i18n'
-import { navigateTo, useRoute, useAsyncData, useAuthSession, useAuth } from '#imports'
-import CreationStatus, { type Status } from '~/components/namecard/CreationStatus.vue'
+import { navigateTo } from '#imports'
+import CreationStatus from '~/components/namecard/CreationStatus.vue'
 import CreationProcess from '~/components/namecard/CreationProcess.vue'
-import type { NamecardUser } from '@vuejs-jp/model'
-import { useSupabase } from '~/composables/useSupabase'
+import { useNamecard } from '~/composables/useNamecard'
 
-const route = useRoute()
 const { t } = useI18n()
-
-const { fetchAttendeeDataByUserId } = useSupabase()
-// TODO 認証確認をどこまで正確に行うか
-const { getUser } = useAuth()
-const { hasAuth } = useAuthSession()
-
-const { data: authUserId } = await useAsyncData('authUserId', async () => {
-  return (await getUser()).id
-})
-
-const { data: attendeeByUserId } = await useAsyncData('attendeeByUserId', async () => {
-  return await fetchAttendeeDataByUserId('attendees', authUserId.value ?? '')
-})
-
-const userData = computed(() => {
-  return attendeeByUserId.value?.data?.[0]
-})
-
-const statusKey = computed<Status>(() => {
-  // TODO テーブルのどの箇所を参照して全ステータスを判定する？
-  if (userData.value?.activated_at) {
-    return 'inquiry_in_progress'
-  } else {
-    return 'not_created'
-  }
-})
-const user = computed<NamecardUser>(() => {
-  return {
-    display_name: userData.value?.display_name ?? '',
-    avatar_url: userData.value?.avatar_url ?? '',
-    role: userData.value?.role ?? '',
-  }
-})
+const { authUserId, statusKey, attendee } = await useNamecard()
 
 function handleLinkButton() {
-  navigateTo(`/namecard/${route.params.id}/edit/`)
+  navigateTo(`/namecard/${authUserId.value}/edit/`)
 }
 </script>
 <template>
   <NuxtLayout name="namecard-base">
     <div class="namecard-user-root">
       <CreationStatus :status-key="statusKey" class="creation-status" />
-      <VFNamecard23 :user="user" class="namecard" />
+      <VFNamecard23 :user="attendee" class="namecard" />
       <VFLinkButton
         is="button"
         background-color="vue-green/200"

From 5b8e6b076d0c684e6c516d2f602e3a7fafee71a5 Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Fri, 19 Jul 2024 04:48:54 +0900
Subject: [PATCH 4/9] feat: add i18n support for the login dialog

---
 apps/web/app/components/namecard/CreationProcess.vue | 2 +-
 apps/web/app/lang/en.json                            | 7 +++++--
 apps/web/app/lang/ja.json                            | 7 +++++--
 apps/web/app/pages/namecard/index.vue                | 4 ++--
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/apps/web/app/components/namecard/CreationProcess.vue b/apps/web/app/components/namecard/CreationProcess.vue
index 6ae739e1..d7551d46 100644
--- a/apps/web/app/components/namecard/CreationProcess.vue
+++ b/apps/web/app/components/namecard/CreationProcess.vue
@@ -18,7 +18,7 @@ const { color } = useColor()
       }"
       class="title"
     >
-      {{ t('namecard.creation-process.title') }}
+      {{ t('namecard.creation_process.title') }}
     </h2>
     <ol
       :style="{
diff --git a/apps/web/app/lang/en.json b/apps/web/app/lang/en.json
index d9275b78..9fa173ad 100644
--- a/apps/web/app/lang/en.json
+++ b/apps/web/app/lang/en.json
@@ -127,8 +127,11 @@
     "title_edit": "Create/Edit Name Card",
     "edit": "Edit",
     "login": "Login",
-    "namecard-samples-alt": "Name card samples",
-    "creation-process": {
+    "dialog_message": "To create a name card, you need to purchase a ticket in advance. After purchasing your ticket, log in using one of the following social accounts and register the necessary information.",
+    "namecard_samples_alt": "Name card samples",
+    "complete_message": "We will now verify your order number. You can check the status of the order number verification on the name card page. Please ensure that the verification is successfully completed before the editing deadline.",
+    "lets_share": "Share your created name card on social media!",
+    "creation_process": {
       "title": "Name Card Creation Process"
     },
     "creation_status": {
diff --git a/apps/web/app/lang/ja.json b/apps/web/app/lang/ja.json
index 8f0b7cef..4ce54bd0 100644
--- a/apps/web/app/lang/ja.json
+++ b/apps/web/app/lang/ja.json
@@ -145,8 +145,11 @@
     "title_edit": "ネームカード作成・編集",
     "edit": "編集する",
     "login": "ログインする",
-    "namecard-samples-alt": "ネームカードのサンプル",
-    "creation-process": {
+    "dialog_message": "ネームカードを作成するには、あらかじめチケットの購入が必要です。チケット購入後、以下のいずれかのソーシャルアカウントからログインし、必要な情報をご登録ください。",
+    "namecard_samples_alt": "ネームカードのサンプル",
+    "complete_message": "これから注文番号の照合を行います。注文番号照合の状況はネームカードページのステータスで確認できます。編集期限前に照合が正常に完了したことを確認してください。",
+    "lets_share": "作成したネームカードをSNSでシェアしよう！",
+    "creation_process": {
       "title": "ネームカード作成の流れ"
     },
     "creation_status": {
diff --git a/apps/web/app/pages/namecard/index.vue b/apps/web/app/pages/namecard/index.vue
index 143fa103..5364a5f2 100644
--- a/apps/web/app/pages/namecard/index.vue
+++ b/apps/web/app/pages/namecard/index.vue
@@ -46,14 +46,14 @@ function handleSignIn(provider: Extract<AuthProvider, 'github' | 'google'>) {
       @on-close="handleClickButton('close')"
       @sign-in="handleSignIn"
       ><p>
-        ネームカードを作成するには、あらかじめチケットの購入が必要です。チケット購入後、以下のいずれかのソーシャルアカウントからログインし、必要な情報をご登録ください。
+        {{ t('namecard.dialog_message') }}
       </p></VFIntegrationDialog
     >
     <div class="namecard-root">
       <img
         class="namecard-samples"
         src="/namecard/namecard-samples.png"
-        :alt="t('namecard.namecard-samples-alt')"
+        :alt="t('namecard.namecard_samples_alt')"
       />
       <div class="lead-sentence">
         <MarkDownText path="namecard_lead" />

From d9ef28a0663922ed53b0128bf0b7de68029a8e26 Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Fri, 19 Jul 2024 04:50:54 +0900
Subject: [PATCH 5/9] feat: implement completion page

---
 .../components/namecard/CreationStatus.vue    | 46 ++++++---
 .../app/pages/namecard/[id]/edit/complete.vue | 95 +++++++++++++++----
 packages/composable/lib/useColor.ts           |  1 +
 packages/model/lib/color.ts                   |  1 +
 4 files changed, 111 insertions(+), 32 deletions(-)

diff --git a/apps/web/app/components/namecard/CreationStatus.vue b/apps/web/app/components/namecard/CreationStatus.vue
index 37b72ef7..477112f7 100644
--- a/apps/web/app/components/namecard/CreationStatus.vue
+++ b/apps/web/app/components/namecard/CreationStatus.vue
@@ -9,8 +9,11 @@ const { color } = useColor()
 export type Status = 'not_created' | 'inquiry_in_progress' | 'inquiry_failed' | 'inquiry_completed'
 type Props = {
   statusKey: Status
+  size?: 'small' | 'medium'
 }
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+})
 
 const backgroundColor = computed(() => {
   switch (props.statusKey) {
@@ -24,18 +27,37 @@ const backgroundColor = computed(() => {
       return color('gray/100')
   }
 })
+
+const style = computed(() => {
+  const baseStyle = {
+    color: color('white'),
+    backgroundColor: backgroundColor.value,
+  }
+  switch (props.size) {
+    case 'small':
+      return {
+        ...baseStyle,
+        height: '24px',
+        borderRadius: '24px',
+        padding: '0 20px',
+        fontWeight: fontWeight('heading/700'),
+        fontSize: fontSize('body/100'),
+      }
+    default:
+      return {
+        ...baseStyle,
+        height: '38px',
+        borderRadius: '38px',
+        padding: '0 38px',
+        fontWeight: fontWeight('heading/700'),
+        fontSize: fontSize('heading/200'),
+      }
+  }
+})
 </script>
 
 <template>
-  <div
-    class="creation-status-root"
-    :style="{
-      fontWeight: fontWeight('heading/700'),
-      fontSize: fontSize('heading/200'),
-      color: color('white'),
-      backgroundColor: backgroundColor,
-    }"
-  >
+  <div class="creation-status-root" :style="style">
     {{ t(`namecard.creation_status.${statusKey}`) }}
   </div>
 </template>
@@ -45,8 +67,6 @@ const backgroundColor = computed(() => {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  height: 38px;
-  border-radius: 38px;
-  padding: 0 38px;
+  line-height: 1;
 }
 </style>
diff --git a/apps/web/app/pages/namecard/[id]/edit/complete.vue b/apps/web/app/pages/namecard/[id]/edit/complete.vue
index db749b16..c1cda55e 100644
--- a/apps/web/app/pages/namecard/[id]/edit/complete.vue
+++ b/apps/web/app/pages/namecard/[id]/edit/complete.vue
@@ -1,28 +1,85 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useI18n } from '#i18n'
-import CreationStatus, { type Status } from '~/components/namecard/CreationStatus.vue'
-import type { NamecardUser } from '@vuejs-jp/model'
+import { useColor, useTypography } from '@vuejs-jp/composable'
+import CreationStatus from '~/components/namecard/CreationStatus.vue'
+import { useNamecard } from '~/composables/useNamecard'
 
 const { t } = useI18n()
-const statusKey = computed<Status>(() => {
-  // TODO テーブルから取得する
-  return 'inquiry_in_progress'
-})
-const user = computed<NamecardUser>(() => {
-  // TODO テーブルから取得する
-  return {
-    display_name: 'jiyuujin',
-    avatar_url: '',
-    role: 'attendee',
-  }
-})
+const { fontWeight, fontSize } = useTypography()
+const { color } = useColor()
+
+const { authUserId, statusKey, attendee } = await useNamecard()
 </script>
 <template>
   <NuxtLayout name="namecard-base">
-    <p>{{ t('namecard.form.registrationCompleted') }}</p>
-    <!-- TODO テキスト&SNSリンク追加 -->
-    <CreationStatus :status-key="statusKey" class="creation-status" />
-    <VFNamecard23 :user="user" class="namecard" />
+    <div class="namecard-complete-root">
+      <h2
+        :style="{
+          fontWeight: fontWeight('heading/700'),
+          fontSize: fontSize('heading/300'),
+          color: color('vue-green/100'),
+        }"
+        class="sub-title"
+      >
+        {{ t('namecard.form.registrationCompleted') }}
+      </h2>
+      <div class="complete-message">
+        <p
+          :style="{
+            fontWeight: fontWeight('body/400'),
+            fontSize: fontSize('body/400'),
+            color: color('vue-blue'),
+          }"
+        >
+          {{ t('namecard.complete_message') }}
+        </p>
+      </div>
+      <VFComment :title="t('namecard.lets_share')" class="share-comment" />
+      <div class="sns-buttons">
+        <!-- TODO  Web Share API 利用 & スタイル調整 -->
+        <VFIconButton
+          name="x"
+          color="black"
+          :href="`/namecard/${authUserId}/share/`"
+          can-hover
+          class="sns-button"
+        />
+        <!-- TODO facebook追加 -->
+        <!--         <VFIconButton
+          class="sns-button"
+          name="facebook"
+          :href="`/namecard/${authUserId}/share/`"
+          can-hover
+        /> -->
+      </div>
+      <CreationStatus :status-key="statusKey" size="small" class="creation-status" />
+      <!-- TODO 24に置き換え&smallサイズ指定 -->
+      <VFNamecard23 :user="attendee" class="namecard-preview" />
+    </div>
   </NuxtLayout>
 </template>
+<style scoped>
+@import url('~/assets/media.css');
+
+.namecard-complete-root {
+  text-align: center;
+}
+.sub-title {
+  margin-bottom: calc(var(--unit) * 5);
+}
+.complete-message {
+  text-align: left;
+  line-height: 1.8;
+  padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
+  margin-bottom: calc(var(--unit) * 5);
+  background-color: #e7eff7;
+}
+.share-comment,
+.creation-status {
+  margin-bottom: calc(var(--unit) * 2.5);
+}
+
+.namecard-preview {
+  margin: 0 auto;
+}
+</style>
diff --git a/packages/composable/lib/useColor.ts b/packages/composable/lib/useColor.ts
index 4c5ff873..bdeaa8f7 100644
--- a/packages/composable/lib/useColor.ts
+++ b/packages/composable/lib/useColor.ts
@@ -5,6 +5,7 @@ export function useColor() {
   const color = (text: Color) =>
     match<Color>(text)
       .with('white', () => '#ffffff')
+      .with('black', () => '#000000')
       .with('vue-blue', () => '#35495e')
       .with('vue-green', () => '#42b883')
       .with('vue-green/100', () => '#42B883')
diff --git a/packages/model/lib/color.ts b/packages/model/lib/color.ts
index cc745baf..af13984d 100644
--- a/packages/model/lib/color.ts
+++ b/packages/model/lib/color.ts
@@ -1,5 +1,6 @@
 export type Color =
   | 'white'
+  | 'black'
   | 'vue-blue'
   | 'vue-green'
   | 'vue-green/100'

From 5bd68e3e87174e765c002f805667c36fd661564f Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Sat, 20 Jul 2024 02:17:37 +0900
Subject: [PATCH 6/9] feat(namecard): roughly create form input and completion
 screens

---
 .../app/components/namecard/ImageUploader.vue | 253 +++++++++++++++++-
 apps/web/app/lang/en.json                     |   6 +-
 apps/web/app/lang/ja.json                     |   6 +-
 .../app/pages/namecard/[id]/edit/index.vue    | 124 ++++++---
 apps/web/app/pages/namecard/index.vue         |   2 +-
 5 files changed, 346 insertions(+), 45 deletions(-)

diff --git a/apps/web/app/components/namecard/ImageUploader.vue b/apps/web/app/components/namecard/ImageUploader.vue
index 9e690fd1..638cb401 100644
--- a/apps/web/app/components/namecard/ImageUploader.vue
+++ b/apps/web/app/components/namecard/ImageUploader.vue
@@ -1,25 +1,256 @@
 <script setup lang="ts">
-import { useTypography } from '@vuejs-jp/composable'
+import { computed } from 'vue'
+import { useI18n } from '#i18n'
+import { onMounted, ref } from 'vue'
+import { useColor, useTypography } from '@vuejs-jp/composable'
 
-type Props = {
-  label: string
+interface DragDropProps {
+  fileAccept: string
 }
-defineProps<Props>()
 
+defineProps<DragDropProps>()
+const isDragEnter = ref(false)
+
+const emit = defineEmits<{
+  'check-files': [e: Event, value: File[]]
+}>()
+
+const { t } = useI18n()
+const onDropFile = (e: DragEvent) => {
+  e.preventDefault()
+  if (e.dataTransfer?.files) {
+    fileName.value = e.dataTransfer.files[0].name
+    emit('check-files', e, Array.from(e.dataTransfer.files))
+  }
+}
+
+const fileName = ref<string | null>(null)
+
+function handleCloseButton() {
+  fileName.value = null
+}
+
+// TODO input要素をクリックしているわけではないので、実質この処理が死んでいる。
+// TODO inputクリック時の動作を実装する必要がある。
+const onFileInputChange = (event: Event) => {
+  event.preventDefault()
+  const { target } = event
+  if (!(target instanceof HTMLInputElement)) return
+
+  if (target.files) {
+    fileName.value = target.files[0].name
+    emit('check-files', event, Array.from(target.files))
+  }
+}
+
+const { color: updateColor } = useColor()
 const { fontWeight, fontSize } = useTypography()
+
+const hover = ref(false)
+const hoverIn = () => {
+  hover.value = true
+}
+const hoverOut = () => {
+  hover.value = false
+}
+
+const buttonStyle = computed(() => {
+  if (hover.value) {
+    return {
+      fontWeight: fontWeight('heading/200'),
+      color: updateColor('white'),
+      backgroundColor: updateColor('vue-blue'),
+      boxShadow: '0 2px 10px rgba(53, 73, 94, 14%)',
+    }
+  }
+  return {
+    fontWeight: fontWeight('heading/200'),
+    color: updateColor('vue-blue'),
+    backgroundColor: updateColor('white'),
+  }
+})
+
+onMounted(() => {
+  window.ondrop = (e) => {
+    e.preventDefault()
+  }
+  window.ondragover = (e) => {
+    e.preventDefault()
+  }
+})
 </script>
 
 <template>
-  <!-- TODO 画像アップローダーのブラッシュアップ -->
-  <VFDragDropArea
+  <label
+    for="fileupload"
+    class="drag-drop-area-root"
     :style="{
+      fontSize: fontSize('body/300'),
       fontWeight: fontWeight('heading/100'),
-      fontSize: fontSize('heading/100'),
+      color: updateColor('vue-green/200'),
     }"
   >
-    {{ label }}
-    <VFCssResetButton class="select-button" />
-  </VFDragDropArea>
+    {{ t('namecard.form.label_avatar') }}
+    <div v-if="fileName" class="file-name-area">
+      <p class="file-name">{{ fileName }}</p>
+      <VFIconButton
+        class="icon-close"
+        color="vue-blue"
+        name="close"
+        can-hover
+        @click="handleCloseButton"
+      />
+    </div>
+    <button
+      v-else
+      draggable="true"
+      class="drag-drop-area"
+      :class="{ '-isDragEnter': isDragEnter }"
+      @dragenter="() => (isDragEnter = true)"
+      @dragleave="() => (isDragEnter = false)"
+      @dragover.prevent
+      @drop.prevent="onDropFile"
+      @mouseover="hoverIn"
+      @mouseleave="hoverOut"
+      @focus="hoverIn"
+      @blur="hoverOut"
+    >
+      <div class="message-area">
+        <p
+          class="label"
+          :style="{
+            fontSize: fontSize('body/400'),
+            fontWeight: fontWeight('heading/200'),
+            color: updateColor('vue-blue'),
+          }"
+        >
+          {{ t('namecard.form.drag_and_drop') }}
+        </p>
+        <p
+          class="label or"
+          :style="{
+            fontSize: fontSize('body/200'),
+            fontWeight: fontWeight('body/300'),
+            color: updateColor('vue-blue'),
+          }"
+        >
+          {{ t('namecard.form.or') }}
+        </p>
+        <p class="select-button" :style="buttonStyle">{{ t('namecard.form.select_file') }}</p>
+      </div>
+      <input
+        id="fileUpload"
+        type="file"
+        name="avatar"
+        :accept="fileAccept"
+        @change="onFileInputChange"
+      />
+    </button>
+    <span
+      class="annotation"
+      :style="{
+        fontSize: fontSize('body/300'),
+        fontWeight: fontWeight('body/300'),
+        color: updateColor('vue-blue'),
+      }"
+    >
+      {{ t('namecard.form.annotation_avatar') }}
+    </span>
+    <!--   TODO エラー制御
+    <Typography v-if="errorMessage" variant="body/200" color="sangosyo/200">{{
+      errorMessage
+    }}</Typography> -->
+  </label>
 </template>
 
-<style scoped></style>
+<style scoped>
+@import url('~/assets/media.css');
+
+.drag-drop-area-root {
+  display: inline-block;
+}
+.drag-drop-area {
+  width: 100%;
+  margin: calc(var(--unit) * 1.5) auto;
+  border: 1px solid #e1e1e1;
+  border-radius: 6px;
+  background-color: #fff;
+  color: var(--color-vue-blue);
+  cursor: pointer;
+}
+.drag-drop-area:hover {
+  transition: 0.2s;
+  box-shadow: 0 2px 10px rgba(53, 73, 94, 14%);
+}
+.file-name-area {
+  width: 100%;
+  margin: calc(var(--unit) * 1.5) auto;
+  border: 1px solid #e1e1e1;
+  border-radius: 6px;
+  background: #c6cacf40;
+  color: var(--color-vue-blue);
+  padding: calc(var(--unit) * 3);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.file-name {
+  flex-grow: 1;
+  text-align: center;
+}
+.icon-close {
+  display: inline-block;
+  text-align: right;
+}
+.message-area {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: var(--height-input-area);
+  width: 100%;
+  padding: calc(var(--unit) * 3);
+  text-align: center;
+  cursor: pointer;
+}
+.label {
+  margin-bottom: calc(var(--unit) * 1.5);
+}
+.select-button {
+  --height-button: 50px;
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  height: var(--height-button);
+  padding: 0 43px;
+  margin: 0 auto;
+  border: 2px solid var(--color-vue-blue);
+  border-radius: var(--height-button);
+}
+#fileUpload {
+  display: none;
+}
+/* .uploadarea {
+  position: relative;
+  display: grid;
+  margin: 40px auto;
+  place-items: center;
+  width: 100%;
+  height: 214px;
+  cursor: pointer;
+}
+.uploadarea input {
+  display: none;
+}
+.uploadarea p {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  margin: 0;
+  width: 100%;
+  text-align: center;
+} */
+</style>
diff --git a/apps/web/app/lang/en.json b/apps/web/app/lang/en.json
index 9fa173ad..9dd05bae 100644
--- a/apps/web/app/lang/en.json
+++ b/apps/web/app/lang/en.json
@@ -145,10 +145,14 @@
       "label_avatar": "アバター／Avatar",
       "label_order_number": "Order Number",
       "annotation_name": "Up to 12 full-width characters (24 half-width characters)",
+      "annotation_avatar": "*  Upload a square image (aspect ratio 1:1) for your avatar.",
       "annotation_order_number": "* The order number can be found in the receipt data included in the email sent by Peatix when you purchase a ticket.",
       "placeholder_order_number": "Please enter the order number",
       "submit": "Submit",
-      "registrationCompleted": "The name card information has been successfully registered!"
+      "registrationCompleted": "The name card information has been successfully registered!",
+      "drag_and_drop": "Drag & drop a file",
+      "or": "or",
+      "select_file": "Select a file"
     }
   }
 }
diff --git a/apps/web/app/lang/ja.json b/apps/web/app/lang/ja.json
index 4ce54bd0..ac07a879 100644
--- a/apps/web/app/lang/ja.json
+++ b/apps/web/app/lang/ja.json
@@ -163,10 +163,14 @@
       "label_avatar": "アバター／Avatar",
       "label_order_number": "注文番号",
       "annotation_name": "※全角12文字（半角24文字）まで",
+      "annotation_avatar": "※アバターは正方形（比率1:1）の画像をアップロードしてください。",
       "annotation_order_number": "※注文番号は、チケット購入時にPeatixから送信されるメール内に含まれる領収データから確認できます。",
       "placeholder_order_number": "注文番号を入力してください",
       "submit": "確定する",
-      "registrationCompleted": "ネームカードの情報登録が完了しました！"
+      "registrationCompleted": "ネームカードの情報登録が完了しました！",
+      "drag_and_drop": "ファイルをドラッグ＆ドロップ",
+      "or": "または",
+      "select_file": "ファイルを選択"
     }
   }
 }
diff --git a/apps/web/app/pages/namecard/[id]/edit/index.vue b/apps/web/app/pages/namecard/[id]/edit/index.vue
index 14ad459a..d6a66eb0 100644
--- a/apps/web/app/pages/namecard/[id]/edit/index.vue
+++ b/apps/web/app/pages/namecard/[id]/edit/index.vue
@@ -1,56 +1,94 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, watchEffect } from 'vue'
+import { useSupabase } from '~/composables/useSupabase'
+import { useSupabaseStorage } from '~/composables/useSupabaseStorage'
 import { useI18n } from '#i18n'
-import CreationStatus, { type Status } from '~/components/namecard/CreationStatus.vue'
+import CreationStatus from '~/components/namecard/CreationStatus.vue'
+// import ImageUploader from '~/components/namecard/ImageUploader.vue'
+import { navigateTo } from '#imports'
+import { useNamecard } from '~/composables/useNamecard'
 import ImageUploader from '~/components/namecard/ImageUploader.vue'
-import type { NamecardUser } from '@vuejs-jp/model'
-import { navigateTo, useRoute } from '#imports'
 
 const { t } = useI18n()
-const route = useRoute()
+const { authUserId, statusKey, attendee } = await useNamecard()
+const { upsertAttendee, uploadAvatar } = useSupabase()
+const { getFullAvatarUrl } = useSupabaseStorage()
 
 // TODO useFormとは別でコンポーザブルを作成する
 const name = ref('')
-const orderNumber = ref('')
+const receiptId = ref('')
 const isSubmitting = ref(true)
-function onSubmit(e: any) {
-  // TODO フォーム送信処理追加
-  e.preventDefault()
-  navigateTo(`/namecard/${route.params.id}/edit/complete/`)
-}
 
 const updateName = (e: any) => {
   name.value = e.target.value
 }
-const updateOrderNumber = (e: any) => {
-  orderNumber.value = e.target.value
+const updateReceiptId = (e: any) => {
+  receiptId.value = e.target.value
 }
 
-const statusKey = computed<Status>(() => {
-  // TODO テーブルから取得する
-  return 'not_created'
+const newAttendee = ref({
+  ...attendee.value,
 })
-const user = computed<NamecardUser>(() => {
-  // TODO form から取得する
-  return {
-    display_name: 'jiyuujin',
-    avatar_url: '',
-    role: 'attendee',
-  }
+
+name.value = newAttendee.value?.display_name ?? ''
+receiptId.value = newAttendee.value?.receipt_id ?? ''
+
+watchEffect(() => {
+  newAttendee.value.display_name = name.value
+  newAttendee.value.receipt_id = receiptId.value
 })
+
+const avatarPreview = ref<string>()
+const checkFiles = (e: Event, files: File[]) => {
+  e.preventDefault()
+  if (files.length === 0) return
+
+  const file = files[0]
+
+  let reader = new FileReader()
+  reader.readAsDataURL(file)
+  reader.onload = (e) => {
+    avatarPreview.value = e.target?.result as string
+  }
+  // const filename = file.name
+  const fileExt = file.name.split('.').pop()
+  const filePath = `/${Math.random()}.${fileExt}`
+
+  uploadAvatar(filePath, file)
+
+  newAttendee.value.avatar_url = getFullAvatarUrl(filePath)
+  // TODO avatarPreviewを利用してプレビューを表示するか、既存の実装を利用するか検討
+  // newAttendee.value.avatar_url = avatarPreview.value ?? ''
+}
+function onSubmit(e: Event) {
+  console.log('🤩🤩onSubmit')
+  // TODO フォーム送信処理追加
+  // TODO updated_atに現在時刻を追加する必要ある？supabaseの機能でなんかない？
+  e.preventDefault()
+
+  const submitEvent = e as SubmitEvent
+  const submitter = submitEvent.submitter as HTMLElement
+
+  if (submitter && submitter.id === 'submit-button') {
+    upsertAttendee('attendees', newAttendee.value)
+
+    navigateTo(`/namecard/${authUserId.value}/edit/complete/`)
+  }
+}
 </script>
 <template>
   <NuxtLayout name="namecard-base">
     <div class="namecard-edit-root">
       <div class="preview-wrapper">
-        <VFNamecard23 :user="user" class="namecard" />
+        <VFNamecard23 :user="newAttendee" class="namecard" />
         <CreationStatus :status-key="statusKey" class="creation-status" />
       </div>
       <div class="form-wrapper">
-        <form @submit="onSubmit">
+        <form @submit.prevent="onSubmit">
           <VFInputField
             id="name"
             v-model="name"
+            class="name"
             name="name"
             :label="t('namecard.form.label_name')"
             :placeholder="`${t('form.form_placeholder_example')}${t('form.form_name_placeholder')}`"
@@ -60,23 +98,28 @@ const user = computed<NamecardUser>(() => {
             @input="updateName"
             @blur="validateName"
           />
-          <ImageUploader :label="t('namecard.form.label_avatar')" />
-          <!-- TODO 領収書データ を外部リンク化する -->
+          <ImageUploader
+            class="image-uploader"
+            file-accept="image/*"
+            @check-files.prevent="checkFiles"
+          />
+          <!-- TODO 領収書データ を外部リンク化する Nuxt Content使う -->
           <VFInputField
             id="orderNumber"
-            v-model="orderNumber"
+            v-model="receiptId"
+            class="order-number"
             name="orderNumber"
             :label="t('namecard.form.label_order_number')"
             :placeholder="t('namecard.form.placeholder_order_number')"
             required
             :annotation="t('namecard.form.annotation_order_number')"
             :error="orderNumberError"
-            @input="updateOrderNumber"
+            @input="updateReceiptId"
             @blur="validateOrderNumbere"
           />
           <div class="form-buttons">
-            <!-- TODO ボタンのスタイルを追加する -->
-            <VFSubmitButton :disabled="!isSubmitting">
+            <!-- TODO ボタン キャンセルボタン disable の制御 スタイルを追加する disable の制御も -->
+            <VFSubmitButton id="submit-button" :disabled="!isSubmitting">
               {{ $t('namecard.form.submit') }}
             </VFSubmitButton>
           </div>
@@ -98,5 +141,24 @@ const user = computed<NamecardUser>(() => {
 .form-wrapper {
   text-align: left;
 }
+
+.name,
+.image-uploader {
+  margin-bottom: calc(var(--unit) * 5);
+}
+.order-number {
+  margin-bottom: calc(var(--unit) * 10);
+}
+
+:deep(.input-root) {
+  font-size: var(--font-size-body300);
+  font-weight: 700;
+  color: var(--color-vue-green200);
+}
+:deep(.annotation) {
+  font-weight: 500;
+  color: var(--color-vue-blue);
+}
+
 /* TODO モバイル版スタイル */
 </style>
diff --git a/apps/web/app/pages/namecard/index.vue b/apps/web/app/pages/namecard/index.vue
index 5364a5f2..fe46a2ae 100644
--- a/apps/web/app/pages/namecard/index.vue
+++ b/apps/web/app/pages/namecard/index.vue
@@ -37,7 +37,7 @@ function handleSignIn(provider: Extract<AuthProvider, 'github' | 'google'>) {
 }
 </script>
 
-<!-- TODO i18n対応, モバイル対応 -->
+<!-- TODO モバイル対応 -->
 <template>
   <NuxtLayout name="namecard-base">
     <VFIntegrationDialog

From 06d890c7518c98ba25b45db10fcc54a4873dc62b Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Sun, 21 Jul 2024 03:16:19 +0900
Subject: [PATCH 7/9] feat: update ImageUploader component

---
 .../app/components/namecard/ImageUploader.vue | 84 +++++--------------
 apps/web/app/lang/ja.json                     |  2 +-
 .../app/pages/namecard/[id]/edit/index.vue    | 60 ++++++-------
 3 files changed, 55 insertions(+), 91 deletions(-)

diff --git a/apps/web/app/components/namecard/ImageUploader.vue b/apps/web/app/components/namecard/ImageUploader.vue
index 638cb401..233eeb14 100644
--- a/apps/web/app/components/namecard/ImageUploader.vue
+++ b/apps/web/app/components/namecard/ImageUploader.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useI18n } from '#i18n'
 import { onMounted, ref } from 'vue'
 import { useColor, useTypography } from '@vuejs-jp/composable'
@@ -15,6 +14,8 @@ const emit = defineEmits<{
   'check-files': [e: Event, value: File[]]
 }>()
 
+const fileName = ref<string | null>()
+
 const { t } = useI18n()
 const onDropFile = (e: DragEvent) => {
   e.preventDefault()
@@ -24,14 +25,11 @@ const onDropFile = (e: DragEvent) => {
   }
 }
 
-const fileName = ref<string | null>(null)
-
-function handleCloseButton() {
+function handleCloseButton(e: Event) {
   fileName.value = null
+  emit('check-files', e, [])
 }
 
-// TODO input要素をクリックしているわけではないので、実質この処理が死んでいる。
-// TODO inputクリック時の動作を実装する必要がある。
 const onFileInputChange = (event: Event) => {
   event.preventDefault()
   const { target } = event
@@ -46,30 +44,6 @@ const onFileInputChange = (event: Event) => {
 const { color: updateColor } = useColor()
 const { fontWeight, fontSize } = useTypography()
 
-const hover = ref(false)
-const hoverIn = () => {
-  hover.value = true
-}
-const hoverOut = () => {
-  hover.value = false
-}
-
-const buttonStyle = computed(() => {
-  if (hover.value) {
-    return {
-      fontWeight: fontWeight('heading/200'),
-      color: updateColor('white'),
-      backgroundColor: updateColor('vue-blue'),
-      boxShadow: '0 2px 10px rgba(53, 73, 94, 14%)',
-    }
-  }
-  return {
-    fontWeight: fontWeight('heading/200'),
-    color: updateColor('vue-blue'),
-    backgroundColor: updateColor('white'),
-  }
-})
-
 onMounted(() => {
   window.ondrop = (e) => {
     e.preventDefault()
@@ -110,10 +84,6 @@ onMounted(() => {
       @dragleave="() => (isDragEnter = false)"
       @dragover.prevent
       @drop.prevent="onDropFile"
-      @mouseover="hoverIn"
-      @mouseleave="hoverOut"
-      @focus="hoverIn"
-      @blur="hoverOut"
     >
       <div class="message-area">
         <p
@@ -136,10 +106,10 @@ onMounted(() => {
         >
           {{ t('namecard.form.or') }}
         </p>
-        <p class="select-button" :style="buttonStyle">{{ t('namecard.form.select_file') }}</p>
       </div>
       <input
         id="fileUpload"
+        class="select-button"
         type="file"
         name="avatar"
         :accept="fileAccept"
@@ -176,7 +146,6 @@ onMounted(() => {
   border-radius: 6px;
   background-color: #fff;
   color: var(--color-vue-blue);
-  cursor: pointer;
 }
 .drag-drop-area:hover {
   transition: 0.2s;
@@ -201,6 +170,7 @@ onMounted(() => {
 .icon-close {
   display: inline-block;
   text-align: right;
+  height: 22px;
 }
 .message-area {
   display: inline-flex;
@@ -209,48 +179,38 @@ onMounted(() => {
   align-items: center;
   height: var(--height-input-area);
   width: 100%;
-  padding: calc(var(--unit) * 3);
+  padding: calc(var(--unit) * 3) calc(var(--unit) * 3) 0;
   text-align: center;
-  cursor: pointer;
 }
 .label {
   margin-bottom: calc(var(--unit) * 1.5);
 }
-.select-button {
+#fileUpload {
+  font-size: 0;
+}
+::file-selector-button {
   --height-button: 50px;
 
   display: inline-flex;
   justify-content: center;
   align-items: center;
 
+  font-size: var(--font-size-body400);
+  font-weight: 700;
+  color: var(--color-vue-blue);
+  background-color: var(--color-white);
+
   height: var(--height-button);
   padding: 0 43px;
-  margin: 0 auto;
+  margin: 0 auto calc(var(--unit) * 3);
   border: 2px solid var(--color-vue-blue);
   border-radius: var(--height-button);
-}
-#fileUpload {
-  display: none;
-}
-/* .uploadarea {
-  position: relative;
-  display: grid;
-  margin: 40px auto;
-  place-items: center;
-  width: 100%;
-  height: 214px;
   cursor: pointer;
 }
-.uploadarea input {
-  display: none;
+::file-selector-button:hover {
+  transition: 0.2s;
+  color: var(--color-white);
+  background-color: var(--color-vue-blue);
+  box-shadow: 0 2px 10px rgba(53, 73, 94, 14%);
 }
-.uploadarea p {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translate(0, -50%);
-  margin: 0;
-  width: 100%;
-  text-align: center;
-} */
 </style>
diff --git a/apps/web/app/lang/ja.json b/apps/web/app/lang/ja.json
index ac07a879..a43b0045 100644
--- a/apps/web/app/lang/ja.json
+++ b/apps/web/app/lang/ja.json
@@ -156,7 +156,7 @@
       "not_created": "未作成",
       "inquiry_in_progress": "注文番号照会中",
       "inquiry_failed": "注文番号照会失敗",
-      "inquiry_completed": "注文番号照合完了"
+      "inquiry_completed": "注文番号照会完了"
     },
     "form": {
       "label_name": "お名前／Name",
diff --git a/apps/web/app/pages/namecard/[id]/edit/index.vue b/apps/web/app/pages/namecard/[id]/edit/index.vue
index d6a66eb0..87e0a5ba 100644
--- a/apps/web/app/pages/namecard/[id]/edit/index.vue
+++ b/apps/web/app/pages/namecard/[id]/edit/index.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
 import { useSupabase } from '~/composables/useSupabase'
-import { useSupabaseStorage } from '~/composables/useSupabaseStorage'
 import { useI18n } from '#i18n'
 import CreationStatus from '~/components/namecard/CreationStatus.vue'
-// import ImageUploader from '~/components/namecard/ImageUploader.vue'
 import { navigateTo } from '#imports'
 import { useNamecard } from '~/composables/useNamecard'
 import ImageUploader from '~/components/namecard/ImageUploader.vue'
@@ -12,12 +10,12 @@ import ImageUploader from '~/components/namecard/ImageUploader.vue'
 const { t } = useI18n()
 const { authUserId, statusKey, attendee } = await useNamecard()
 const { upsertAttendee, uploadAvatar } = useSupabase()
-const { getFullAvatarUrl } = useSupabaseStorage()
 
-// TODO useFormとは別でコンポーザブルを作成する
 const name = ref('')
 const receiptId = ref('')
-const isSubmitting = ref(true)
+const isSubmitting = computed(() => {
+  return name.value && receiptId.value && filePathRef.value && fileRef.value
+})
 
 const updateName = (e: any) => {
   name.value = e.target.value
@@ -26,6 +24,8 @@ const updateReceiptId = (e: any) => {
   receiptId.value = e.target.value
 }
 
+const namecard = ref({ ...attendee.value })
+
 const newAttendee = ref({
   ...attendee.value,
 })
@@ -36,41 +36,45 @@ receiptId.value = newAttendee.value?.receipt_id ?? ''
 watchEffect(() => {
   newAttendee.value.display_name = name.value
   newAttendee.value.receipt_id = receiptId.value
+  namecard.value.display_name = name.value
+  namecard.value.receipt_id = receiptId.value
 })
 
-const avatarPreview = ref<string>()
+const filePathRef = ref<string | null>(null)
+const fileRef = ref<File | null>(null)
+
 const checkFiles = (e: Event, files: File[]) => {
   e.preventDefault()
-  if (files.length === 0) return
-
-  const file = files[0]
-
-  let reader = new FileReader()
-  reader.readAsDataURL(file)
-  reader.onload = (e) => {
-    avatarPreview.value = e.target?.result as string
+  if (files.length === 0) {
+    filePathRef.value = null
+    fileRef.value = null
+    namecard.value.avatar_url = ''
+  } else {
+    const file = files[0]
+
+    let reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = (e) => {
+      namecard.value.avatar_url = e.target?.result as string
+    }
+    const fileExt = file.name.split('.').pop()
+    const filePath = `/${Math.random()}.${fileExt}`
+
+    fileRef.value = file
+    filePathRef.value = filePath
   }
-  // const filename = file.name
-  const fileExt = file.name.split('.').pop()
-  const filePath = `/${Math.random()}.${fileExt}`
-
-  uploadAvatar(filePath, file)
-
-  newAttendee.value.avatar_url = getFullAvatarUrl(filePath)
-  // TODO avatarPreviewを利用してプレビューを表示するか、既存の実装を利用するか検討
-  // newAttendee.value.avatar_url = avatarPreview.value ?? ''
 }
+
 function onSubmit(e: Event) {
-  console.log('🤩🤩onSubmit')
-  // TODO フォーム送信処理追加
   // TODO updated_atに現在時刻を追加する必要ある？supabaseの機能でなんかない？
   e.preventDefault()
 
   const submitEvent = e as SubmitEvent
   const submitter = submitEvent.submitter as HTMLElement
 
-  if (submitter && submitter.id === 'submit-button') {
+  if (submitter && submitter.id === 'submit-button' && filePathRef.value && fileRef.value) {
     upsertAttendee('attendees', newAttendee.value)
+    uploadAvatar(filePathRef.value, fileRef.value)
 
     navigateTo(`/namecard/${authUserId.value}/edit/complete/`)
   }
@@ -80,7 +84,7 @@ function onSubmit(e: Event) {
   <NuxtLayout name="namecard-base">
     <div class="namecard-edit-root">
       <div class="preview-wrapper">
-        <VFNamecard23 :user="newAttendee" class="namecard" />
+        <VFNamecard23 :user="namecard" class="namecard" />
         <CreationStatus :status-key="statusKey" class="creation-status" />
       </div>
       <div class="form-wrapper">

From c80fefb1b846d92ba04506d43b71f3d65625cecd Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Sun, 21 Jul 2024 05:27:52 +0900
Subject: [PATCH 8/9] :feat(namecard) add share page

---
 apps/web/app/composables/useNamecard.ts    |  4 +-
 apps/web/app/lang/en.json                  |  3 +
 apps/web/app/lang/ja.json                  |  3 +
 apps/web/app/pages/namecard/[id]/share.vue | 91 +++++++++++++++++++++-
 4 files changed, 97 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/composables/useNamecard.ts b/apps/web/app/composables/useNamecard.ts
index d755b2ea..25035ec0 100644
--- a/apps/web/app/composables/useNamecard.ts
+++ b/apps/web/app/composables/useNamecard.ts
@@ -4,7 +4,7 @@ import type { Status } from '~/components/namecard/CreationStatus.vue'
 import type { Attendee } from '@vuejs-jp/model'
 
 
-export async function useNamecard() {
+export async function useNamecard(userId?:string) {
   const { fetchAttendeeDataByUserId } = useSupabase()
   const { getUser } = useAuth()
 
@@ -13,7 +13,7 @@ export async function useNamecard() {
   })
 
   const { data: attendeeByUserId } = await useAsyncData('attendeeByUserId', async () => {
-    return await fetchAttendeeDataByUserId('attendees', authUserId.value ?? '')
+    return await fetchAttendeeDataByUserId('attendees', authUserId.value ?? userId ?? '')
   })
 
   const userData = computed(() => {
diff --git a/apps/web/app/lang/en.json b/apps/web/app/lang/en.json
index 9dd05bae..f2491157 100644
--- a/apps/web/app/lang/en.json
+++ b/apps/web/app/lang/en.json
@@ -6,6 +6,9 @@
   "not_found": "The page you are looking for cannot be found.",
   "prefix_year": "",
   "suffix_year": "2024",
+  "invite_vue_fes": "Would you like to join Vue Fes Japan 2024 as well?",
+  "share_namecard": "Let's share this name card on social media!",
+  "official_site": "Vue Fes Japan Official Website",
   "top_page": {
     "latest_information": "Get the latest information on our official social media",
     "date": "October 19th, 2024",
diff --git a/apps/web/app/lang/ja.json b/apps/web/app/lang/ja.json
index a43b0045..fb80a575 100644
--- a/apps/web/app/lang/ja.json
+++ b/apps/web/app/lang/ja.json
@@ -6,6 +6,9 @@
   "not_found": "お探しのページが見つかりません。",
   "prefix_year": "2024",
   "suffix_year": "",
+  "invite_vue_fes": "あなたもVue Fes Japan 2024に参加しませんか？",
+  "share_namecard": "このネームカードをSNSでシェアしよう！",
+  "official_site": "Vue Fes Japan 2024公式サイト",
   "day_of_week": {
     "sunday": "日",
     "monday": "月",
diff --git a/apps/web/app/pages/namecard/[id]/share.vue b/apps/web/app/pages/namecard/[id]/share.vue
index 11645e02..c9c04c11 100644
--- a/apps/web/app/pages/namecard/[id]/share.vue
+++ b/apps/web/app/pages/namecard/[id]/share.vue
@@ -1,2 +1,89 @@
-<script setup lang="ts"></script>
-<template></template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { createError, useHead, useRoute } from '#imports'
+import { useI18n } from '#i18n'
+import { useNamecard } from '~/composables/useNamecard'
+import { conferenceTitle, linkUrl, ogSpeakerDescription } from '~/utils/constants'
+import { generalOg, twitterOg } from '~/utils/og.constants'
+import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
+
+const { t } = useI18n()
+const route = useRoute()
+const id = route.params.id as string
+const { attendee } = await useNamecard(id)
+if (!attendee) {
+  throw createError({ statusCode: 404, statusMessage: 'Attendee not found' })
+}
+
+const currentLocale = useLocaleCurrent().locale
+
+const officialSiteUrl = computed(() => {
+  return currentLocale.value === 'ja' ? linkUrl : `${linkUrl}/en`
+})
+
+// TODO OGタグの設定
+useHead({
+  titleTemplate: (titleChunk) => `${conferenceTitle}`,
+  meta: [
+    ...generalOg({
+      title: `${conferenceTitle}`,
+      description: ogSpeakerDescription,
+      url: `${linkUrl}namecard/${id}/share`,
+    }),
+    ...twitterOg({
+      title: `${conferenceTitle}`,
+      description: ogSpeakerDescription,
+      url: `${linkUrl}namecard/${id}/share`,
+    }),
+  ],
+})
+</script>
+<template>
+  <div class="namecard-share-root">
+    <VFOgCard23 class="namecard" :user="attendee" />
+    <VFComment class="invite-comment" :title="t('invite_vue_fes')" />
+    <VFLinkButton
+      class="link-button"
+      :href="officialSiteUrl"
+      background-color="vue-green/200"
+      color="white"
+      >{{ t('official_site') }}</VFLinkButton
+    >
+    <VFComment class="share-namecard" :title="t('share_namecard')" />
+    <!-- TODO snsアイコン&リンク設置 -->
+    <ul class="sns-list">
+      <li>x</li>
+      <li>facebook</li>
+      <li>copy</li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.namecard-share-root {
+  --header-height: calc(var(--unit) * 10);
+  --content-padding: calc(var(--unit) * 15);
+  padding-top: calc(var(--header-height) + var(--content-padding));
+  padding-bottom: var(--content-padding);
+  max-width: 960px;
+  margin: 0 auto;
+}
+.namecard {
+  max-width: 960px;
+  margin: 0 auto calc(var(--unit) * 7.5);
+}
+.invite-comment {
+  margin: 0 auto calc(var(--unit) * 2.5);
+}
+.link-button {
+  --height-button: 66px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 400px;
+  height: var(--height-button);
+  border-radius: var(--height-button);
+  margin: 0 auto calc(var(--unit) * 7.5);
+}
+</style>

From 7a6456d88929d6cd50f68a676303ab54a96f82df Mon Sep 17 00:00:00 2001
From: KannoStanfoot <kanno@stanfoot.com>
Date: Sun, 21 Jul 2024 05:56:12 +0900
Subject: [PATCH 9/9] enhance(namecard): UI implementation for the edit page

---
 .../app/components/namecard/ImageUploader.vue |  4 ++--
 apps/web/app/composables/useLocale.ts         |  1 +
 .../en/namecard_annotation_order_number.md    |  1 +
 .../ja/namecard_annotation_order_number.md    |  1 +
 apps/web/app/lang/en.json                     |  1 -
 apps/web/app/lang/ja.json                     |  1 -
 .../app/pages/namecard/[id]/edit/index.vue    | 21 ++++++++++++-------
 packages/model/lib/path.ts                    |  1 +
 .../ui/components/forms/InputField.stories.ts |  1 -
 packages/ui/components/forms/InputField.vue   |  4 +---
 10 files changed, 20 insertions(+), 16 deletions(-)
 create mode 100644 apps/web/app/content/en/namecard_annotation_order_number.md
 create mode 100644 apps/web/app/content/ja/namecard_annotation_order_number.md

diff --git a/apps/web/app/components/namecard/ImageUploader.vue b/apps/web/app/components/namecard/ImageUploader.vue
index 233eeb14..17e254c9 100644
--- a/apps/web/app/components/namecard/ImageUploader.vue
+++ b/apps/web/app/components/namecard/ImageUploader.vue
@@ -116,7 +116,7 @@ onMounted(() => {
         @change="onFileInputChange"
       />
     </button>
-    <span
+    <p
       class="annotation"
       :style="{
         fontSize: fontSize('body/300'),
@@ -125,7 +125,7 @@ onMounted(() => {
       }"
     >
       {{ t('namecard.form.annotation_avatar') }}
-    </span>
+    </p>
     <!--   TODO エラー制御
     <Typography v-if="errorMessage" variant="body/200" color="sangosyo/200">{{
       errorMessage
diff --git a/apps/web/app/composables/useLocale.ts b/apps/web/app/composables/useLocale.ts
index 36aa476d..b41a7197 100644
--- a/apps/web/app/composables/useLocale.ts
+++ b/apps/web/app/composables/useLocale.ts
@@ -35,6 +35,7 @@ export function useLocale(path: Path) {
       .with('namecard_process_3', () => `/${locale.value}/namecard_process_3`)
       .with('namecard_process_4', () => `/${locale.value}/namecard_process_4`)
       .with('namecard_process_alert', () => `/${locale.value}/namecard_process_alert`)
+      .with('namecard_annotation_order_number', () => `/${locale.value}/namecard_annotation_order_number`)
       .exhaustive(),
   )
 
diff --git a/apps/web/app/content/en/namecard_annotation_order_number.md b/apps/web/app/content/en/namecard_annotation_order_number.md
new file mode 100644
index 00000000..3e1ab5da
--- /dev/null
+++ b/apps/web/app/content/en/namecard_annotation_order_number.md
@@ -0,0 +1 @@
+\* The order number can be found in the [receipt data](https://help-attendee.peatix.com/ja-JP/support/solutions/articles/44001821741) included in the email sent by Peatix when you purchase a ticket.
diff --git a/apps/web/app/content/ja/namecard_annotation_order_number.md b/apps/web/app/content/ja/namecard_annotation_order_number.md
new file mode 100644
index 00000000..cd5bca1f
--- /dev/null
+++ b/apps/web/app/content/ja/namecard_annotation_order_number.md
@@ -0,0 +1 @@
+※注文番号は、チケット購入時にPeatixから送信されるメール内に含まれる[領収データ](https://help-attendee.peatix.com/ja-JP/support/solutions/articles/44001821741)から確認できます。
diff --git a/apps/web/app/lang/en.json b/apps/web/app/lang/en.json
index f2491157..bdb553ed 100644
--- a/apps/web/app/lang/en.json
+++ b/apps/web/app/lang/en.json
@@ -149,7 +149,6 @@
       "label_order_number": "Order Number",
       "annotation_name": "Up to 12 full-width characters (24 half-width characters)",
       "annotation_avatar": "*  Upload a square image (aspect ratio 1:1) for your avatar.",
-      "annotation_order_number": "* The order number can be found in the receipt data included in the email sent by Peatix when you purchase a ticket.",
       "placeholder_order_number": "Please enter the order number",
       "submit": "Submit",
       "registrationCompleted": "The name card information has been successfully registered!",
diff --git a/apps/web/app/lang/ja.json b/apps/web/app/lang/ja.json
index fb80a575..8fef50a4 100644
--- a/apps/web/app/lang/ja.json
+++ b/apps/web/app/lang/ja.json
@@ -167,7 +167,6 @@
       "label_order_number": "注文番号",
       "annotation_name": "※全角12文字（半角24文字）まで",
       "annotation_avatar": "※アバターは正方形（比率1:1）の画像をアップロードしてください。",
-      "annotation_order_number": "※注文番号は、チケット購入時にPeatixから送信されるメール内に含まれる領収データから確認できます。",
       "placeholder_order_number": "注文番号を入力してください",
       "submit": "確定する",
       "registrationCompleted": "ネームカードの情報登録が完了しました！",
diff --git a/apps/web/app/pages/namecard/[id]/edit/index.vue b/apps/web/app/pages/namecard/[id]/edit/index.vue
index 87e0a5ba..9c0db553 100644
--- a/apps/web/app/pages/namecard/[id]/edit/index.vue
+++ b/apps/web/app/pages/namecard/[id]/edit/index.vue
@@ -79,13 +79,15 @@ function onSubmit(e: Event) {
     navigateTo(`/namecard/${authUserId.value}/edit/complete/`)
   }
 }
+
+// TODO バリデート、エラー制御を追加する
 </script>
 <template>
   <NuxtLayout name="namecard-base">
     <div class="namecard-edit-root">
       <div class="preview-wrapper">
         <VFNamecard23 :user="namecard" class="namecard" />
-        <CreationStatus :status-key="statusKey" class="creation-status" />
+        <CreationStatus :status-key="statusKey" size="small" class="creation-status" />
       </div>
       <div class="form-wrapper">
         <form @submit.prevent="onSubmit">
@@ -97,17 +99,16 @@ function onSubmit(e: Event) {
             :label="t('namecard.form.label_name')"
             :placeholder="`${t('form.form_placeholder_example')}${t('form.form_name_placeholder')}`"
             required
-            :annotation="t('namecard.form.annotation_name')"
             :error="nameError"
             @input="updateName"
             @blur="validateName"
-          />
+            ><p class="annotation">{{ t('namecard.form.annotation_name') }}</p></VFInputField
+          >
           <ImageUploader
             class="image-uploader"
             file-accept="image/*"
             @check-files.prevent="checkFiles"
           />
-          <!-- TODO 領収書データ を外部リンク化する Nuxt Content使う -->
           <VFInputField
             id="orderNumber"
             v-model="receiptId"
@@ -116,13 +117,13 @@ function onSubmit(e: Event) {
             :label="t('namecard.form.label_order_number')"
             :placeholder="t('namecard.form.placeholder_order_number')"
             required
-            :annotation="t('namecard.form.annotation_order_number')"
             :error="orderNumberError"
             @input="updateReceiptId"
             @blur="validateOrderNumbere"
-          />
+            ><div class="annotation"><MarkDownText path="namecard_annotation_order_number" /></div
+          ></VFInputField>
           <div class="form-buttons">
-            <!-- TODO ボタン キャンセルボタン disable の制御 スタイルを追加する disable の制御も -->
+            <!-- TODO ボタン キャンセルボタン スタイルを追加する -->
             <VFSubmitButton id="submit-button" :disabled="!isSubmitting">
               {{ $t('namecard.form.submit') }}
             </VFSubmitButton>
@@ -142,6 +143,9 @@ function onSubmit(e: Event) {
   margin: 0 auto;
   gap: 0 calc(var(--unit) * 8);
 }
+.namecard {
+  margin-bottom: calc(var(--unit) * 2);
+}
 .form-wrapper {
   text-align: left;
 }
@@ -159,7 +163,8 @@ function onSubmit(e: Event) {
   font-weight: 700;
   color: var(--color-vue-green200);
 }
-:deep(.annotation) {
+.annotation,
+.annotation:deep(p) {
   font-weight: 500;
   color: var(--color-vue-blue);
 }
diff --git a/packages/model/lib/path.ts b/packages/model/lib/path.ts
index c0ee7f6a..6e9bc183 100644
--- a/packages/model/lib/path.ts
+++ b/packages/model/lib/path.ts
@@ -26,3 +26,4 @@ export type Path =
   | 'namecard_process_3'
   | 'namecard_process_4'
   | 'namecard_process_alert'
+  | 'namecard_annotation_order_number'
diff --git a/packages/ui/components/forms/InputField.stories.ts b/packages/ui/components/forms/InputField.stories.ts
index c269f43b..089ae2a4 100644
--- a/packages/ui/components/forms/InputField.stories.ts
+++ b/packages/ui/components/forms/InputField.stories.ts
@@ -42,7 +42,6 @@ export const Error: Story = {
     label: 'お名前',
     placeholder: '山田太郎',
     errorMessage: 'エラーメッセージが表示されます',
-    annotation:'※全角12文字（半角24文字）まで'
   },
 }
 
diff --git a/packages/ui/components/forms/InputField.vue b/packages/ui/components/forms/InputField.vue
index 5f0514b5..e81148cb 100644
--- a/packages/ui/components/forms/InputField.vue
+++ b/packages/ui/components/forms/InputField.vue
@@ -15,7 +15,6 @@ interface Props extends /* @vue-ignore */ _InputFieldProps {
   label: string
   /* Error Message */
   errorMessage?: string
-  annotation?: string
 }
 type Emits = {
   blur: [value: string]
@@ -30,7 +29,6 @@ withDefaults(defineProps<Props>(), {
   disabled: false,
   label: '',
   errorMessage: '',
-  annotation: '',
 })
 
 const emit = defineEmits<Emits>()
@@ -71,7 +69,7 @@ const { fontWeight, fontSize } = useTypography()
       :disabled="disabled"
       @blur="handleBlur"
     />
-    <span v-if="annotation" class="annotation">{{ annotation }}</span>
+    <slot />
     <Typography v-if="errorMessage" variant="body/200" color="sangosyo/200">{{
       errorMessage
     }}</Typography>