⚡️ impl project menber

src/components/Projects/ProjectMember.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { User } from '/@/lib/apis'
+import UserIcon from '/@/components/UI/UserIcon.vue'
+import FormProjectDuration from '/@/components/UI/FormProjectDuration.vue'
+import Icon from '/@/components/UI/Icon.vue'
+import { ref } from 'vue'
+interface Props {
+  user: User
+}
+
+defineProps<Props>()
+const duration = ref({
+  since: {
+    year: 2021,
+    semester: 1
+  },
+  until: undefined
+})
+
+const emit = defineEmits<{
+  (e: 'delete', value: string): void
+}>()
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="$style.content">
+      <user-icon :user-id="user.id" :size="48" />
+      <p :class="$style.name">{{ user.name }}</p>
+      <form-project-duration v-model="duration" since-required />
+    </div>
+    <div @click="emit('delete', user.id)">
+      <icon :size="32" name="mdi:delete" :class="$style.icon" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+
+  border: 1px solid $color-primary-text;
+  border-radius: 8px;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.icon {
+  color: $color-secondary;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+</style>

src/pages/ProjectNew.vue

@@ -11,6 +11,7 @@ import FormTextArea from '/@/components/UI/FormTextArea.vue'
 import { useToast } from 'vue-toastification'
 import FormProjectDuration from '/@/components/UI/FormProjectDuration.vue'
 import MemberInput from '/@/components/UI/MemberInput.vue'
+import ProjectMember from '/@/components/Projects/ProjectMember.vue'
 
 const toast = useToast()
 
@@ -43,6 +44,10 @@ const createProject = async () => {
   isSending.value = false
 }
 const members = ref<User[]>([])
+
+const handleDelete = (id: string) => {
+  members.value = members.value.filter(member => member.id !== id)
+}
 </script>
 
 <template>
@@ -85,6 +90,13 @@ const members = ref<User[]>([])
       </labeled-form>
       <labeled-form label="メンバー" :class="$style.labeledForm">
         <member-input v-model="members" :class="$style.memberInput" />
+        <div v-for="(user, id) in members" :key="id">
+          <project-member
+            :user="user"
+            :class="$style.projectMember"
+            @delete="handleDelete"
+          />
+        </div>
       </labeled-form>
     </form>
     <div :class="$style.buttonContainer">
@@ -139,8 +151,11 @@ const members = ref<User[]>([])
 }
 
 .memberInput {
-  margin-bottom: 2rem;
-  margin-left: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.projectMember {
+  margin-bottom: 0.5rem;
 }
 </style>
 '