💄 feat: スタンプを押した人と数の表示を変更

src/components/Main/MainView/MessageElement/StampDetailElement.vue

@@ -1,23 +1,27 @@
 <template>
   <div :class="$style.container">
     <div>
-      {{ ':' + stampName + ': from' }}
+      {{ ':' + stampName + ': from ' }}
+    </div>
+    <div v-for="user in stamp.users" :key="user.id" :class="$style.contents">
+      <stamp-detail-element-content
+        :user-id="user.id"
+        :count="user.count"
+        :class="$style.content"
+      />
+      <span v-if="!isLastUser(user)" :class="$style.delimiter"> / </span>
     </div>
-    <stamp-detail-element-content
-      v-for="user in stamp.users"
-      :key="user.id"
-      :user-id="user.id"
-      :count="user.count"
-      :class="$style.content"
-    />
   </div>
 </template>
 
 <script lang="ts" setup>
 import StampDetailElementContent from './StampDetailElementContent.vue'
 import { computed } from 'vue'
 import { useStampsStore } from '/@/store/entities/stamps'
-import type { MessageStampById } from '/@/lib/messageStampList'
+import type {
+  StampRecordPerUser,
+  MessageStampById
+} from '/@/lib/messageStampList'
 
 const props = defineProps<{
   stamp: MessageStampById
@@ -28,17 +32,23 @@ const { stampsMap } = useStampsStore()
 const stampName = computed(
   () => stampsMap.value.get(props.stamp.id)?.name ?? ''
 )
+
+const isLastUser = (user: StampRecordPerUser) =>
+  user === props.stamp.users[props.stamp.users.length - 1]
 </script>
 
 <style lang="scss" module>
 .container {
   display: flex;
   flex-wrap: wrap;
 }
+.contents {
+  display: flex;
+}
 .content {
-  &::before {
-    white-space: pre;
-    content: ' ';
-  }
+  padding: 0 0.2rem;
+}
+.delimiter {
+  @include color-ui-secondary-inactive;
 }
 </style>

src/components/Main/MainView/MessageElement/StampDetailElementContent.vue

@@ -1,7 +1,7 @@
 <template>
-  <div :class="$style.container" @click="openModal">
+  <div :class="$style.clickable" @click="openModal">
     {{ user?.displayName ?? 'unknown' }}
-    <span :class="$style.numberWrap">
+    <span v-if="count > 1" :class="$style.numberWrap">
       <spin-number :value="count" />
     </span>
   </div>
@@ -26,9 +26,10 @@ const { openModal } = useUserModalOpener(toRef(props, 'userId'))
 </script>
 
 <style lang="scss" module>
-.container {
+.clickable {
   display: flex;
   cursor: pointer;
+  gap: 2px;
 }
 .numberWrap {
   display: flex;

src/lib/messageStampList.ts

@@ -1,6 +1,15 @@
 import type { MessageStamp } from '@traptitech/traq'
 import type { StampId, UserId } from '/@/types/entity-ids'
 
+/**
+ * ユーザー、そのユーザーの押した数と最初に押した時間
+ */
+export interface StampRecordPerUser {
+  id: UserId
+  count: number
+  createdAt: Date
+}
+
 /**
  * StampIdで整理されたMessageStamp
  */
@@ -20,7 +29,7 @@ export interface MessageStampById {
   /**
    * ユーザー、そのユーザーの押した数と最初に押した時間
    */
-  users: Array<{ id: UserId; count: number; createdAt: Date }>
+  users: Array<StampRecordPerUser>
   /**
    * 一番最初に押された時間
    */