申請詳細ページの上と右の見た目をいい感じに

src/components/requestDetail/RequestAmount.vue

@@ -14,7 +14,7 @@ const totalAmount = computed(
 </script>
 
 <template>
-  <div v-if="request" class="flex items-center">
-    <span class="text-2xl">金額：{{ totalAmount }}円</span>
+  <div>
+    <span class="text-3xl font-bold">{{ totalAmount }}円</span>
   </div>
 </template>

src/components/requestDetail/RequestGroup.vue

@@ -1,63 +1,33 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 
-import { useGroupStore } from '/@/stores/group'
 import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
-import InputSelectSingle from '/@/components/shared/InputSelectSingle.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import type { EditMode } from '/@/pages/composables/useRequestDetail'
-
-interface Props {
-  isEditMode: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-}>()
+import { computed } from 'vue'
 
 const userStore = useUserStore()
-const groupStore = useGroupStore()
 const requestDetailStore = useRequestDetailStore()
 const { isRequestCreator } = requestDetailStore
-const { groupOptions } = storeToRefs(groupStore)
-const { request, editedValue } = storeToRefs(requestDetailStore)
+const { request } = storeToRefs(requestDetailStore)
 const { me } = storeToRefs(userStore)
 
 const hasAuthority = isRequestCreator(me.value)
 
-const handleComplete = () => {
-  emit('changeEditMode', '')
-}
+const groupName = computed(() =>
+  request.value?.group ? request.value.group.name : 'なし'
+)
 </script>
 
 <template>
-  <div class="flex items-center">
-    グループ：
-    <div v-if="!props.isEditMode && request">
-      <span v-if="!request.group">なし</span>
-      <span v-else>{{ request.group.name }}</span>
-      <EditButton
-        v-if="hasAuthority"
-        class="ml-1"
-        @click="emit('changeEditMode', 'group')" />
+  <div class="flex flex-col gap-1">
+    <div class="flex items-center justify-between">
+      <div>グループ</div>
+      <EditButton v-if="hasAuthority" />
     </div>
-    <div v-else class="flex">
-      <InputSelectSingle
-        v-model="editedValue.group"
-        class="w-52"
-        :options="groupOptions"
-        placeholder="グループ" />
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click.stop="handleComplete">
-        完了
-      </SimpleButton>
+    <div>
+      {{ groupName }}
     </div>
   </div>
 </template>

src/components/requestDetail/RequestLogs.vue

@@ -50,6 +50,7 @@ const logs = computed((): Log[] => {
         <StatusChangeLog v-if="log.type === 'statusChange'" :log="log" />
       </li>
     </ul>
+    <NewComment />
   </div>
 </template>
 

src/components/requestDetail/RequestSidebar.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import RequestGroup from '/@/components/requestDetail/RequestGroup.vue'
+import RequestTags from '/@/components/requestDetail/RequestTags.vue'
+import RequestTargets from '/@/components/requestDetail/RequestTargets.vue'
+</script>
+
+<template>
+  <div class="px-12 flex flex-col gap-8">
+    <div class="flex flex-col gap-3">
+      <RequestGroup />
+      <RequestTags />
+    </div>
+    <RequestTargets />
+  </div>
+</template>

src/components/requestDetail/RequestTags.vue

@@ -5,54 +5,26 @@ import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
-import InputSelectTagWithCreation from '/@/components/shared/InputSelectTagWithCreation.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import TagsGroup from '/@/components/shared/TagsGroup.vue'
-import type { EditMode } from '/@/pages/composables/useRequestDetail'
-
-interface Props {
-  isEditMode: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-}>()
 
 const userStore = useUserStore()
 const requestDetailStore = useRequestDetailStore()
 const { isRequestCreator } = requestDetailStore
-const { request, editedValue } = storeToRefs(requestDetailStore)
+const { request } = storeToRefs(requestDetailStore)
 const { me } = storeToRefs(userStore)
 
 const hasAuthority = isRequestCreator(me.value)
-
-const handleComplete = () => {
-  emit('changeEditMode', '')
-}
 </script>
 
 <template>
-  <div class="flex items-center">
-    <div v-if="!props.isEditMode && request" class="pb-2">
-      タグ：
-      <span v-if="request.tags.length === 0">なし</span>
-      <TagsGroup v-else :tags="request.tags" />
-      <EditButton
-        v-if="hasAuthority"
-        class="ml-1"
-        @click="emit('changeEditMode', 'tags')" />
+  <div class="flex flex-col gap-1">
+    <div class="flex items-center justify-between">
+      <div>タグ</div>
+      <EditButton v-if="hasAuthority" />
     </div>
-    <div v-else class="flex items-center">
-      タグ：
-      <InputSelectTagWithCreation v-model="editedValue.tags" />
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click.stop="handleComplete">
-        完了
-      </SimpleButton>
+    <div>
+      <TagsGroup v-if="request?.tags" :tags="request.tags" />
+      <span v-else>なし</span>
     </div>
   </div>
 </template>

src/components/requestDetail/RequestTarget.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+
+import { useUserStore } from '/@/stores/user'
+import type { RequestTarget } from '/@/features/requestTarget/model'
+
+import UserIcon from '/@/components/shared/UserIcon.vue'
+import { RouterLink } from 'vue-router'
+
+defineProps<{
+  target: RequestTarget
+}>()
+
+const userStore = useUserStore()
+const { userMap } = storeToRefs(userStore)
+</script>
+
+<template>
+  <div class="flex items-center gap-3 justify-between">
+    <div class="flex items-center gap-1">
+      <UserIcon class="w-12" :name="userMap[target.target]" />
+      <span>{{ userMap[target.target] }}</span>
+    </div>
+    <div class="flex gap-3">
+      <span>{{ target.amount }}円</span>
+      <!--TODO: link-->
+      <RouterLink class="text-blue-500 underline" to="/">
+        入出金記録を作成
+      </RouterLink>
+    </div>
+  </div>
+</template>

src/components/requestDetail/RequestTargets.vue

@@ -1,68 +1,32 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
 
 import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
-import InputSelectMultiple from '/@/components/shared/InputSelectMultiple.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import type { EditMode } from '/@/pages/composables/useRequestDetail'
-
-interface Props {
-  isEditMode: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-}>()
+import RequestTarget from '/@/components/requestDetail/RequestTarget.vue'
 
 const userStore = useUserStore()
 const requestDetailStore = useRequestDetailStore()
 const { isRequestCreator } = requestDetailStore
-const { request, editedValue } = storeToRefs(requestDetailStore)
-const { me, userOptions, userMap } = storeToRefs(userStore)
-
-const formattedTargets = computed(
-  () =>
-    request.value?.targets
-      .map(target => userMap.value[target.target])
-      .join(', ') ?? ''
-)
+const { request } = storeToRefs(requestDetailStore)
+const { me } = storeToRefs(userStore)
 
 const hasAuthority = isRequestCreator(me.value)
-
-const handleComplete = () => {
-  emit('changeEditMode', '')
-}
 </script>
 
 <template>
-  <div>
-    <div v-if="!props.isEditMode">
-      払い戻し対象者：
-      {{ formattedTargets }}
-      <EditButton
-        v-if="hasAuthority"
-        class="ml-1"
-        @click="emit('changeEditMode', 'targets')" />
+  <div class="flex flex-col gap-2">
+    <div class="flex items-center justify-between">
+      <div>払い戻し対象者</div>
+      <EditButton v-if="hasAuthority" />
     </div>
-    <div v-else class="flex items-center">
-      払い戻し対象者：
-      <InputSelectMultiple
-        v-model="editedValue.targets"
-        :options="userOptions"
-        placeholder="払い戻し対象者"
-        uniq-key="target" />
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click.stop="handleComplete">
-        完了
-      </SimpleButton>
+    <div class="flex flex-col gap-2">
+      <RequestTarget
+        v-for="target in request?.targets"
+        :key="target.target"
+        :target="target" />
     </div>
   </div>
 </template>

src/components/shared/TagsGroup.vue

@@ -3,26 +3,23 @@ import type { Tag } from '/@/features/tag/model'
 
 interface Props {
   tags: Tag[]
-  limit?: number //1-indexedでlimitを指定
+  limit?: number
 }
 
-const props = withDefaults(defineProps<Props>(), { limit: 20 })
+const props = withDefaults(defineProps<Props>(), { limit: 4 })
 
-const slicedTags = props.tags.slice(
-  0,
-  !(props.tags.length > props.limit) ? props.tags.length : props.limit
-)
+const slicedTags = props.tags.slice(0, props.limit)
 const tagToolTip = props.tags.map(tag => tag.name).join(', ')
 </script>
 
 <template>
-  <span
-    v-for="(tag, index) in slicedTags"
-    :key="tag.id"
-    class="border-dark-600 rounded border p-0.5"
-    :class="index !== 0 ? 'ml-2' : ''"
-    :title="tagToolTip">
-    {{ tag.name }}
-  </span>
-  <span v-if="limit !== 0 && tags.length > limit"> ...</span>
+  <div class="flex items-center gap-2" :title="tagToolTip">
+    <div
+      v-for="tag in slicedTags"
+      :key="tag.id"
+      class="border-dark-600 rounded border p-0.5">
+      {{ tag.name }}
+    </div>
+    <span v-if="limit !== 0 && tags.length > limit"> ...</span>
+  </div>
 </template>