Merge pull request #285 from traPtitech/fix/user_icon

ユーザーアイコンを修正

Author: mehm8128

src/components/Contest/ContestTeamItem.vue

@@ -10,8 +10,8 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const userIds = computed(() =>
-  props.contestTeam.members.map(member => member.id)
+const userNames = computed(() =>
+  props.contestTeam.members.map(member => member.name)
 )
 </script>
 
@@ -25,7 +25,7 @@ const userIds = computed(() =>
         <p :class="$style.name">{{ contestTeam.name }}</p>
         <p :class="$style.result">{{ contestTeam.result }}</p>
       </div>
-      <user-icons :user-ids="userIds" />
+      <user-icons :user-names="userNames" />
     </div>
   </router-link>
 </template>

src/components/Event/EventHostItem.vue

@@ -11,7 +11,7 @@ defineProps<Props>()
 
 <template>
   <div :class="$style.container">
-    <user-icon :user-id="host.name" :size="48" />
+    <user-icon :user-name="host.name" :size="48" />
     <p :class="$style.name">{{ host.name }}</p>
   </div>
 </template>

src/components/Projects/ProjectMember.vue

@@ -28,7 +28,7 @@ const shouldShowDurationError = computed(
   <div :class="$style.container">
     <div :class="$style.content">
       <div :class="$style.user">
-        <user-icon :user-id="user.id" :size="48" />
+        <user-icon :user-name="user.name" :size="48" />
         <p :class="$style.name">{{ user.name }}</p>
         <button
           :class="[$style.deleteButton, $style.sp]"

src/components/UI/MemberInput.vue

@@ -85,7 +85,7 @@ const onClose = () => {
     </template>
     <template #option="{ name }">
       <div :class="$style.item">
-        <user-icon :user-id="name" />
+        <user-icon :user-name="name" />
         <p>{{ name }}</p>
       </div>
     </template>

src/components/UI/UserIcon.vue

@@ -1,14 +1,12 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 interface Props {
-  userId: string
+  userName: string
   size?: number
 }
 const props = withDefaults(defineProps<Props>(), { size: 24 })
 const src = computed(
-  () =>
-    // TODO: userIdから画像を読み込む `https://q.trap.jp/api/v3/public/icon/${props.userId}`
-    `https://q.trap.jp/api/v3/public/icon/toshi00`
+  () => `https://q.trap.jp/api/v3/public/icon/${props.userName}`
 )
 
 const styles = computed(() => ({

src/components/UI/UserIcons.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import UserIcon from '/@/components/UI/UserIcon.vue'
 interface Props {
-  userIds: string[]
+  userNames: string[]
 }
 
 defineProps<Props>()
@@ -10,13 +10,13 @@ defineProps<Props>()
 <template>
   <div :class="$style.userIcons">
     <user-icon
-      v-for="(userId, i) in userIds.slice(0, 3)"
-      :key="userId"
-      :user-id="userId"
+      v-for="(userName, i) in userNames.slice(0, 3)"
+      :key="userName"
+      :user-name="userName"
       :class="$style.userIcon"
       :style="{ left: `${i * 16}px` }"
     />
-    <span v-if="userIds.length > 3">+{{ userIds.length - 3 }}</span>
+    <span v-if="userNames.length > 3">+{{ userNames.length - 3 }}</span>
   </div>
 </template>
 

src/components/User/UserProfileDesktop.vue

@@ -14,7 +14,7 @@ defineProps<Props>()
 
 <template>
   <div :class="$style.profileContainer">
-    <user-icon :user-id="user.id" :size="128" />
+    <user-icon :user-name="user.name" :size="128" />
     <div>
       <div :class="$style.nameContainer">
         <p :class="$style.name">{{ user.name }}</p>

src/components/User/UserProfileMobile.vue

@@ -15,7 +15,7 @@ defineProps<Props>()
 <template>
   <div>
     <div :class="$style.iconAndNameContainer">
-      <user-icon :user-id="user.id" :size="64" />
+      <user-icon :user-name="user.name" :size="64" />
       <div :class="$style.nameContainer">
         <p :class="$style.name">{{ user.name }}</p>
         <!-- <p :class="$style.realName">{{ user.realName }}</p> -->