feat/グループ詳細のレイアウトを Figma に揃える

src/components/groupDetail/GroupBudget.vue

@@ -2,65 +2,15 @@
 import { storeToRefs } from 'pinia'
 
 import { useGroupDetailStore } from '/@/stores/groupDetail'
-import { useUserStore } from '/@/stores/user'
 
-import type { EditMode } from '/@/components/groupDetail/composables/useGroupInformation'
-import EditButton from '/@/components/shared/EditButton.vue'
-import InputNumber from '/@/components/shared/InputNumber.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-
-interface Props {
-  isEditMode: boolean
-  isSending: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-  (e: 'finishEditing'): void
-}>()
-
-const userStore = useUserStore()
 const groupDetailStore = useGroupDetailStore()
 
-const { group, editedValue } = storeToRefs(groupDetailStore)
-const { canEditGroup } = groupDetailStore
-const { me } = storeToRefs(userStore)
-
-const hasAuthority = canEditGroup(me.value)
+const { group } = storeToRefs(groupDetailStore)
 </script>
 
 <template>
-  <div v-if="!isEditMode && group" class="flex items-center">
-    予算：{{ group.budget }}円
-    <EditButton
-      v-if="hasAuthority"
-      class="ml-1"
-      @click="emit('changeEditMode', 'budget')" />
-  </div>
-  <div v-else class="flex items-center">
-    予算：
-    <InputNumber
-      v-model="editedValue.budget"
-      auto-focus
-      class="mr-1 w-24"
-      :min="1"
-      placeholder="金額" />円
-    <SimpleButton
-      class="ml-2"
-      font-size="sm"
-      padding="sm"
-      @click="emit('changeEditMode', '')">
-      キャンセル
-    </SimpleButton>
-    <SimpleButton
-      class="ml-2"
-      :disabled="props.isSending"
-      font-size="sm"
-      padding="sm"
-      type="success"
-      @click="emit('finishEditing')">
-      完了
-    </SimpleButton>
+  <div v-if="group" class="flex flex-col">
+    <label class="text-xl">予算</label>
+    <p class="mt-3">{{ group?.budget }} 円</p>
   </div>
 </template>

src/components/groupDetail/GroupDescription.vue

@@ -2,74 +2,18 @@
 import { storeToRefs } from 'pinia'
 
 import { useGroupDetailStore } from '/@/stores/groupDetail'
-import { useUserStore } from '/@/stores/user'
 
-import type { EditMode } from '/@/components/groupDetail/composables/useGroupInformation'
-import InputTextarea from '/@/components/shared/InputTextarea.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-
-interface Props {
-  isEditMode: boolean
-  isSending: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-  (e: 'finishEditing'): void
-}>()
-
-const userStore = useUserStore()
 const groupDetailStore = useGroupDetailStore()
-const { group, editedValue } = storeToRefs(groupDetailStore)
-const { canEditGroup } = groupDetailStore
-const { me } = storeToRefs(userStore)
-
-const hasAuthority = canEditGroup(me.value)
+const { group } = storeToRefs(groupDetailStore)
 </script>
 
 <template>
   <div v-if="group">
-    <p>詳細</p>
-    <div v-if="!isEditMode" class="flex w-full">
-      <p class="h-32 w-4/5 rounded border border-surface-secondary pl-1">
+    <p class="text-xl">詳細</p>
+    <div class="flex w-full mt-3">
+      <p class="min-h-32 w-full rounded border border-surface-secondary p-2">
         {{ group.description }}
       </p>
-      <div class="flex items-end">
-        <SimpleButton
-          v-if="hasAuthority"
-          class="ml-2"
-          font-size="sm"
-          padding="sm"
-          @click="emit('changeEditMode', 'description')">
-          編集
-        </SimpleButton>
-      </div>
-    </div>
-    <div v-else class="flex w-full">
-      <InputTextarea
-        v-model="editedValue.description"
-        auto-focus
-        class="w-4/5"
-        placeholder="詳細" />
-      <div class="flex items-end">
-        <SimpleButton
-          class="ml-2"
-          font-size="sm"
-          padding="sm"
-          @click="emit('changeEditMode', '')">
-          キャンセル
-        </SimpleButton>
-        <SimpleButton
-          class="ml-2"
-          :disabled="props.isSending"
-          font-size="sm"
-          padding="sm"
-          type="success"
-          @click="emit('finishEditing')">
-          完了
-        </SimpleButton>
-      </div>
     </div>
   </div>
 </template>

src/components/groupDetail/GroupMembers.vue

@@ -24,43 +24,41 @@ const { absentMemberOptions, isSending, addMembers, removeMember } =
 </script>
 
 <template>
-  <div
-    v-if="group"
-    class="relative flex h-2/5 flex-col justify-between border border-surface-secondary">
-    <p class="bg-surface-primary absolute -top-3 left-2 px-2">
-      グループメンバー
-    </p>
-    <ul class="h-full p-4">
-      <li
-        v-for="member in group.members"
-        :key="member"
-        class="not-first:mt-2 flex items-center justify-between">
-        <div class="flex items-center">
-          <UserIcon class="w-12" :name="userMap[member]" />
-          <p class="mx-1 break-all">{{ userMap[member] }}</p>
-        </div>
+  <div v-if="group" class="relative flex flex-col justify-between">
+    <p class="text-xl">グループメンバー</p>
+    <div class="mt-3 border border-surface-secondary">
+      <ul class="flex flex-col gap-2 px-4 py-3 overflow-y-auto max-h-[50dvh]">
+        <li
+          v-for="member in group.members"
+          :key="member"
+          class="flex items-center justify-between">
+          <div class="flex items-center">
+            <UserIcon class="w-12" :name="userMap[member]" />
+            <p class="mx-1 break-all">{{ userMap[member] }}</p>
+          </div>
+          <button
+            v-if="hasAuthority"
+            class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
+            :disabled="isSending"
+            @click="removeMember(member)">
+            <MinusIcon class="w-6" />
+          </button>
+        </li>
+      </ul>
+      <div v-if="hasAuthority" class="flex p-2 gap-2 w-full">
+        <InputSelectMultiple
+          v-model="membersToBeAdded"
+          class="flex-grow w-1"
+          is-dropdown-above
+          :options="absentMemberOptions"
+          placeholder="追加するメンバーを選択" />
         <button
-          v-if="hasAuthority"
           class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
-          :disabled="isSending"
-          @click="removeMember(member)">
-          <MinusIcon class="w-6" />
+          :disabled="membersToBeAdded.length === 0 || isSending"
+          @click="addMembers(membersToBeAdded)">
+          <PlusIcon class="w-6" />
         </button>
-      </li>
-    </ul>
-    <div v-if="hasAuthority" class="flex p-2">
-      <InputSelectMultiple
-        v-model="membersToBeAdded"
-        class="mr-2 flex-grow"
-        is-dropdown-above
-        :options="absentMemberOptions"
-        placeholder="追加するメンバーを選択" />
-      <button
-        class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
-        :disabled="membersToBeAdded.length === 0 || isSending"
-        @click="addMembers(membersToBeAdded)">
-        <PlusIcon class="w-6" />
-      </button>
+      </div>
     </div>
   </div>
 </template>

src/components/groupDetail/GroupName.vue

@@ -6,6 +6,7 @@ import { useUserStore } from '/@/stores/user'
 
 import type { EditMode } from '/@/components/groupDetail/composables/useGroupInformation'
 import InputText from '/@/components/shared/InputText.vue'
+import EditButton from '/@/components/shared/EditButton.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
 
 interface Props {
@@ -29,8 +30,8 @@ const hasAuthority = canEditGroup(me.value)
 </script>
 
 <template>
-  <div v-if="group" class="flex items-center">
-    <h1 v-if="!isEditMode" class="flex-grow text-3xl">
+  <div v-if="group" class="flex items-center gap-3">
+    <h1 v-if="!props.isEditMode" class="flex-grow text-2xl">
       {{ group.name }}
     </h1>
     <InputText
@@ -39,31 +40,16 @@ const hasAuthority = canEditGroup(me.value)
       auto-focus
       class="flex-grow"
       placeholder="グループ名" />
-    <SimpleButton
-      v-if="hasAuthority && !isEditMode"
-      class="ml-2"
-      font-size="sm"
-      padding="sm"
-      @click="emit('changeEditMode', 'name')">
-      編集
+    <SimpleButton v-if="isEditMode" padding="sm" @click="emit('finishEditing')">
+      完了
     </SimpleButton>
-    <template v-else-if="hasAuthority && isEditMode">
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click="emit('changeEditMode', '')">
-        キャンセル
-      </SimpleButton>
-      <SimpleButton
-        class="ml-2"
-        :disabled="props.isSending"
-        font-size="sm"
-        padding="sm"
-        type="success"
-        @click="emit('finishEditing')">
-        完了
-      </SimpleButton>
-    </template>
+    <EditButton
+      v-if="hasAuthority"
+      :is-edit-mode="props.isEditMode"
+      @click="
+        props.isEditMode
+          ? emit('changeEditMode', '')
+          : emit('changeEditMode', 'name')
+      " />
   </div>
 </template>

src/components/groupDetail/GroupOwners.vue

@@ -24,42 +24,40 @@ const { absentOwnerOptions, isSending, addOwners, removeOwner } =
 </script>
 
 <template>
-  <div
-    v-if="group"
-    class="relative flex h-2/5 flex-col justify-between border border-surface-secondary">
-    <p class="bg-surface-primary absolute -top-3 left-2 px-2">
-      グループオーナー
-    </p>
-    <ul class="h-full p-4">
-      <li
-        v-for="owner in group.owners"
-        :key="owner"
-        class="not-first:mt-2 flex items-center justify-between">
-        <div class="flex items-center">
-          <UserIcon class="w-12" :name="userMap[owner]" />
-          <p class="mx-1 break-all">{{ userMap[owner] }}</p>
-        </div>
+  <div v-if="group" class="relative flex flex-col justify-between">
+    <p class="text-xl">グループオーナー</p>
+    <div class="mt-3 border border-surface-secondary">
+      <ul class="flex flex-col gap-2 px-4 py-3 overflow-y-auto max-h-[50dvh]">
+        <li
+          v-for="owner in group.owners"
+          :key="owner"
+          class="flex items-center justify-between">
+          <div class="flex items-center">
+            <UserIcon class="w-12" :name="userMap[owner]" />
+            <p class="mx-1 break-all">{{ userMap[owner] }}</p>
+          </div>
+          <button
+            v-if="hasAuthority"
+            class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
+            :disabled="isSending"
+            @click="removeOwner(owner)">
+            <MinusIcon class="w-6" />
+          </button>
+        </li>
+      </ul>
+      <div v-if="hasAuthority" class="flex p-2 gap-2">
+        <InputSelectMultiple
+          v-model="ownersToBeAdded"
+          class="flex-grow w-1"
+          :options="absentOwnerOptions"
+          placeholder="追加するオーナーを選択" />
         <button
-          v-if="hasAuthority"
           class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
-          :disabled="isSending"
-          @click="removeOwner(owner)">
-          <MinusIcon class="w-6" />
+          :disabled="ownersToBeAdded.length === 0 || isSending"
+          @click="addOwners(ownersToBeAdded)">
+          <PlusIcon class="w-6" />
         </button>
-      </li>
-    </ul>
-    <div v-if="hasAuthority" class="flex p-2">
-      <InputSelectMultiple
-        v-model="ownersToBeAdded"
-        class="mr-2 flex-grow"
-        :options="absentOwnerOptions"
-        placeholder="追加するオーナーを選択" />
-      <button
-        class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
-        :disabled="ownersToBeAdded.length === 0 || isSending"
-        @click="addOwners(ownersToBeAdded)">
-        <PlusIcon class="w-6" />
-      </button>
+      </div>
     </div>
   </div>
 </template>

src/components/shared/InputSelectMultiple.vue

@@ -181,7 +181,7 @@ const handleKeydown = (e: KeyboardEvent, option: Value) => {
     const length =
       searchQuery.value !== ''
         ? searchedOptions.value.length
-        : props.options?.length ?? 0
+        : (props.options?.length ?? 0)
     focusingListItemIndex.value = (focusingListItemIndex.value + 1) % length
     const buttonEl = listItemRefs.value[focusingListItemIndex.value]
       .firstChild as HTMLButtonElement
@@ -202,7 +202,7 @@ const handleKeydown = (e: KeyboardEvent, option: Value) => {
     const length =
       searchQuery.value !== ''
         ? searchedOptions.value.length
-        : props.options?.length ?? 0
+        : (props.options?.length ?? 0)
     focusingListItemIndex.value =
       (focusingListItemIndex.value - 1 + length) % length
     const buttonEl = listItemRefs.value[focusingListItemIndex.value]
@@ -269,14 +269,12 @@ onUnmounted(() => {
 <template>
   <div
     ref="inputSelectRef"
-    :class="`relative ${
-      disabled && 'cursor-not-allowed'
-    } min-w-72 ${calcWidth}`">
+    :class="`relative ${disabled && 'cursor-not-allowed'} ${calcWidth}`">
     <div
-      class="flex w-full cursor-text items-center rounded border border-surface-secondary py-1 pl-1"
+      class="flex cursor-text items-center rounded border border-surface-secondary py-1 pl-1"
       :class="`${disabled && 'pointer-events-none'}`"
       @click.prevent="handleClick">
-      <div class="flex w-full items-center overflow-x-auto">
+      <div class="flex items-center overflow-x-auto">
         <div
           v-for="selectedValue in selectedValues"
           :key="selectedValue.key"