From 2792d25305dc8b10f48bd07233d42fc6e24ca393 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 26 Apr 2024 18:02:43 +0900
Subject: [PATCH 01/28] =?UTF-8?q?=E7=94=B3=E8=AB=8B=E8=A9=B3=E7=B4=B0?=
 =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE=E4=B8=8A=E3=81=A8=E5=8F=B3?=
 =?UTF-8?q?=E3=81=AE=E8=A6=8B=E3=81=9F=E7=9B=AE=E3=82=92=E3=81=84=E3=81=84?=
 =?UTF-8?q?=E6=84=9F=E3=81=98=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requestDetail/RequestAmount.vue           |  4 +-
 src/components/requestDetail/RequestGroup.vue | 52 +++---------
 src/components/requestDetail/RequestLogs.vue  |  1 +
 .../requestDetail/RequestSidebar.vue          | 15 ++++
 src/components/requestDetail/RequestTags.vue  | 44 ++---------
 .../requestDetail/RequestTarget.vue           | 32 ++++++++
 .../requestDetail/RequestTargets.vue          | 60 +++-----------
 src/components/shared/TagsGroup.vue           | 27 +++----
 src/pages/RequestDetailPage.vue               | 79 ++++---------------
 9 files changed, 110 insertions(+), 204 deletions(-)
 create mode 100644 src/components/requestDetail/RequestSidebar.vue
 create mode 100644 src/components/requestDetail/RequestTarget.vue

diff --git a/src/components/requestDetail/RequestAmount.vue b/src/components/requestDetail/RequestAmount.vue
index 297088c8..c6c26d1a 100644
--- a/src/components/requestDetail/RequestAmount.vue
+++ b/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>
diff --git a/src/components/requestDetail/RequestGroup.vue b/src/components/requestDetail/RequestGroup.vue
index e6d635d2..7378a132 100644
--- a/src/components/requestDetail/RequestGroup.vue
+++ b/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>
diff --git a/src/components/requestDetail/RequestLogs.vue b/src/components/requestDetail/RequestLogs.vue
index 2adc0919..3ef74036 100644
--- a/src/components/requestDetail/RequestLogs.vue
+++ b/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>
 
diff --git a/src/components/requestDetail/RequestSidebar.vue b/src/components/requestDetail/RequestSidebar.vue
new file mode 100644
index 00000000..c12709d6
--- /dev/null
+++ b/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>
diff --git a/src/components/requestDetail/RequestTags.vue b/src/components/requestDetail/RequestTags.vue
index c5b91309..ecd5ba1f 100644
--- a/src/components/requestDetail/RequestTags.vue
+++ b/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>
diff --git a/src/components/requestDetail/RequestTarget.vue b/src/components/requestDetail/RequestTarget.vue
new file mode 100644
index 00000000..15e25c39
--- /dev/null
+++ b/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>
diff --git a/src/components/requestDetail/RequestTargets.vue b/src/components/requestDetail/RequestTargets.vue
index c128a312..acba514c 100644
--- a/src/components/requestDetail/RequestTargets.vue
+++ b/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>
diff --git a/src/components/shared/TagsGroup.vue b/src/components/shared/TagsGroup.vue
index 86947102..d3945f55 100644
--- a/src/components/shared/TagsGroup.vue
+++ b/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>
diff --git a/src/pages/RequestDetailPage.vue b/src/pages/RequestDetailPage.vue
index b5ddc4ad..b6b80961 100644
--- a/src/pages/RequestDetailPage.vue
+++ b/src/pages/RequestDetailPage.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { DateTime } from 'luxon'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
@@ -9,26 +8,16 @@ import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useTagStore } from '/@/stores/tag'
 import { useUserStore } from '/@/stores/user'
 
-import { formatDate } from '/@/lib/date'
 import { toId } from '/@/lib/parseQueryParams'
 
-import NewComment from '/@/components/requestDetail/NewComment.vue'
-import RequestAmount from '/@/components/requestDetail/RequestAmount.vue'
-import RequestContent from '/@/components/requestDetail/RequestContent.vue'
-import RequestGroup from '/@/components/requestDetail/RequestGroup.vue'
 import RequestLogs from '/@/components/requestDetail/RequestLogs.vue'
-import RequestTags from '/@/components/requestDetail/RequestTags.vue'
-import RequestTargets from '/@/components/requestDetail/RequestTargets.vue'
-import RequestTitle from '/@/components/requestDetail/RequestTitle.vue'
-import StatusChangeButtons from '/@/components/requestDetail/StatusChangeButtons.vue'
-import ToTransactionButtons from '/@/components/requestDetail/ToTransactionButtons.vue'
+import RequestSidebar from '/@/components/requestDetail/RequestSidebar.vue'
 import StatusChip from '/@/components/shared/StatusChip.vue'
 import { useFetchGroupsUsecase } from '/@/features/group/usecase'
 import { useFetchRequestUsecase } from '/@/features/request/usecase'
 import { useFetchTagsUsecase } from '/@/features/tag/usecase'
 import { useFetchUsersUsecase } from '/@/features/user/usecase'
 
-import { useRequestDetail } from './composables/useRequestDetail'
 
 const route = useRoute()
 const id = toId(route.params.id)
@@ -37,15 +26,14 @@ const requestDetailStore = useRequestDetailStore()
 const userStore = useUserStore()
 const groupStore = useGroupStore()
 const tagStore = useTagStore()
-const { isUserFetched, userMap } = storeToRefs(userStore)
+const { isUserFetched } = storeToRefs(userStore)
 const { isGroupFetched } = storeToRefs(groupStore)
 const { isTagFetched } = storeToRefs(tagStore)
 
-const { editMode, changeEditMode } = useRequestDetail()
 const { request } = storeToRefs(requestDetailStore)
 
-const formattedDate = computed(() =>
-  formatDate(request.value?.createdAt ?? DateTime.fromISO(''))
+const totalAmount = computed(
+  () => request.value?.targets.reduce((a, target) => a + target.amount, 0) ?? 0
 )
 
 await useFetchRequestUsecase(id)
@@ -66,56 +54,23 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="request !== undefined" class="min-w-160 mx-auto px-12 pt-4">
-    <div class="bottom-bar">
+  <div
+    v-if="request !== undefined"
+    class="mx-auto w-4/5 pt-5 flex flex-col gap-5">
+    <div class="flex flex-col gap-4">
+      <div class="flex gap-2">
+        <h1 class="flex-1 text-2xl">{{ request.title }}</h1>
+        <div>...</div>
+      </div>
       <div class="flex items-center justify-between">
         <StatusChip has-text :status="request.status" />
-        <RequestTitle
-          class="ml-2"
-          :is-edit-mode="editMode === 'title'"
-          @change-edit-mode="changeEditMode($event)" />
-        <div class="ml-2">
-          <StatusChangeButtons />
-        </div>
-      </div>
-      <div class="mt-4 flex justify-between">
-        <RequestTags
-          :is-edit-mode="editMode === 'tags'"
-          @change-edit-mode="changeEditMode($event)" />
-        <div class="flex items-center gap-4">
-          <RequestGroup
-            :is-edit-mode="editMode === 'group'"
-            @change-edit-mode="changeEditMode($event)" />
-          <p>申請者：{{ userMap[request.created_by] }}</p>
-          <p>申請日：{{ formattedDate }}</p>
-          <RequestAmount />
-        </div>
-      </div>
-      <div class="mt-4 flex">
-        <RequestContent
-          :is-edit-mode="editMode === 'content'"
-          @change-edit-mode="changeEditMode($event)" />
-        <RequestTargets
-          :is-edit-mode="editMode === 'targets'"
-          @change-edit-mode="changeEditMode($event)" />
+        <div class="text-3xl font-bold">{{ totalAmount }}円</div>
       </div>
     </div>
-    <div class="flex">
-      <RequestLogs class="w-2/3" />
-      <div class="w-1/3">
-        <ToTransactionButtons />
-        <NewComment />
-      </div>
+    <div class="h-0.25 bg-[#e5e7eb]" />
+    <div class="flex justify-between">
+      <RequestLogs class="basis-2/3" />
+      <RequestSidebar class="basis-1/3" />
     </div>
   </div>
 </template>
-
-<style scoped>
-.bottom-bar::after {
-  content: '';
-  display: block;
-  border: 1px solid #e5e7eb;
-  margin: 12px auto;
-  background-color: #e5e7eb;
-}
-</style>

From 9b7b2faa308b821c6084103e3fec19051a624ed4 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 26 Apr 2024 18:20:26 +0900
Subject: [PATCH 02/28] =?UTF-8?q?=E3=81=84=E3=82=89=E3=81=AA=E3=81=84?=
 =?UTF-8?q?=E3=81=AE=E6=B6=88=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requestDetail/RequestAmount.vue           | 20 -------
 src/components/requestDetail/RequestTitle.vue | 56 -------------------
 2 files changed, 76 deletions(-)
 delete mode 100644 src/components/requestDetail/RequestAmount.vue
 delete mode 100644 src/components/requestDetail/RequestTitle.vue

diff --git a/src/components/requestDetail/RequestAmount.vue b/src/components/requestDetail/RequestAmount.vue
deleted file mode 100644
index c6c26d1a..00000000
--- a/src/components/requestDetail/RequestAmount.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-
-const requestDetailStore = useRequestDetailStore()
-
-const { request } = storeToRefs(requestDetailStore)
-
-const totalAmount = computed(
-  () => request.value?.targets.reduce((a, target) => a + target.amount, 0) ?? 0
-)
-</script>
-
-<template>
-  <div>
-    <span class="text-3xl font-bold">{{ totalAmount }}円</span>
-  </div>
-</template>
diff --git a/src/components/requestDetail/RequestTitle.vue b/src/components/requestDetail/RequestTitle.vue
deleted file mode 100644
index 05be4c60..00000000
--- a/src/components/requestDetail/RequestTitle.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-import { useUserStore } from '/@/stores/user'
-
-import InputText from '/@/components/shared/InputText.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
-}>()
-
-const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isRequestCreator } = requestDetailStore
-const { request, editedValue } = storeToRefs(requestDetailStore)
-const { me } = storeToRefs(userStore)
-
-const hasAuthority = isRequestCreator(me.value)
-</script>
-
-<template>
-  <div v-if="!props.isEditMode && request" class="flex flex-grow">
-    <h1 class="flex-grow text-3xl">
-      {{ request.title }}
-    </h1>
-    <SimpleButton
-      v-if="hasAuthority"
-      class="ml-2"
-      font-size="sm"
-      padding="sm"
-      @click="emit('changeEditMode', 'title')">
-      編集
-    </SimpleButton>
-  </div>
-  <div v-else class="flex flex-grow">
-    <InputText
-      v-model="editedValue.title"
-      class="flex-grow"
-      placeholder="タイトル" />
-    <SimpleButton
-      class="ml-2"
-      font-size="sm"
-      padding="sm"
-      @click.stop="emit('changeEditMode', '')">
-      完了
-    </SimpleButton>
-  </div>
-</template>

From 88331c12d9c6b86e1987cb84b5b62ff1422625b5 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 26 Apr 2024 18:47:00 +0900
Subject: [PATCH 03/28] =?UTF-8?q?=E3=83=AD=E3=82=B0=E3=82=92=E3=81=A1?=
 =?UTF-8?q?=E3=82=87=E3=81=A3=E3=81=A8=E7=9B=B4=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/CommentLog.vue   | 28 +++++++++----------
 src/components/requestDetail/RequestLogs.vue  |  6 ++--
 .../requestDetail/StatusChangeLog.vue         | 17 ++++++-----
 src/components/shared/StatusChip.vue          |  2 +-
 src/components/shared/UserIcon.vue            | 11 ++++----
 src/pages/RequestDetailPage.vue               |  2 +-
 6 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/components/requestDetail/CommentLog.vue b/src/components/requestDetail/CommentLog.vue
index 04d57e43..f87a1037 100644
--- a/src/components/requestDetail/CommentLog.vue
+++ b/src/components/requestDetail/CommentLog.vue
@@ -11,11 +11,9 @@ import MarkdownIt from '/@/components//shared/MarkdownIt.vue'
 import UserIcon from '/@/components/shared/UserIcon.vue'
 import type { RequestComment } from '/@/features/requestComment/model'
 
-interface Props {
+const props = defineProps<{
   comment: RequestComment
-}
-
-const props = defineProps<Props>()
+}>()
 
 const formattedDateAndTime = formatDateAndTime(props.comment.createdAt)
 
@@ -27,19 +25,19 @@ const hash = computed(() => route.hash.substring(1))
 </script>
 
 <template>
-  <div :id="comment.id" class="flex w-full p-2">
-    <UserIcon class="w-12" :name="userMap[comment.user]" />
-    <div class="w-full pl-2">
-      <div class="flex h-12 items-center justify-between">
-        {{ userMap[comment.user] }}がコメントしました。
-        <span>
-          {{ formattedDateAndTime }}
-        </span>
+  <div :id="comment.id" class="w-full flex flex-col gap-3">
+    <div class="flex w-full items-center">
+      <div class="flex items-center gap-4 flex-1">
+        <UserIcon class="w-12" :name="userMap[comment.user]" />
+        <span>{{ userMap[comment.user] }}がコメントしました。</span>
       </div>
+      <time class="text-gray-400" :datetime="comment.createdAt.toISO() ?? ''">
+        {{ formattedDateAndTime }}
+      </time>
+    </div>
+    <div class="ml-15">
       <MarkdownIt
-        :class="`border border-zinc-300 p-1 ${
-          hash === comment.id && 'border-3 border border-yellow-300'
-        }`"
+        class="border border-zinc-300 px-4 py-3 rounded-lg"
         :text="comment.comment" />
     </div>
   </div>
diff --git a/src/components/requestDetail/RequestLogs.vue b/src/components/requestDetail/RequestLogs.vue
index 3ef74036..776fb346 100644
--- a/src/components/requestDetail/RequestLogs.vue
+++ b/src/components/requestDetail/RequestLogs.vue
@@ -8,7 +8,6 @@ import type { RequestComment } from '/@/features/requestComment/model'
 import type { RequestStatusDetail } from '/@/features/requestStatus/model'
 
 import CommentLog from './CommentLog.vue'
-import RequestFiles from './RequestFiles.vue'
 import StatusChangeLog from './StatusChangeLog.vue'
 
 type CommentWithType = RequestComment & { type: 'comment' }
@@ -39,15 +38,14 @@ const logs = computed((): Log[] => {
 </script>
 
 <template>
-  <div v-if="request" class="h-120 overflow-y-scroll p-2">
-    <RequestFiles />
+  <div v-if="request">
     <ul>
       <li
         v-for="(log, i) in logs"
         :key="log.createdAt.toISO() ?? i"
         class="vertical-bar">
         <CommentLog v-if="log.type === 'comment'" :comment="log" />
-        <StatusChangeLog v-if="log.type === 'statusChange'" :log="log" />
+        <StatusChangeLog v-else-if="log.type === 'statusChange'" :log="log" />
       </li>
     </ul>
     <NewComment />
diff --git a/src/components/requestDetail/StatusChangeLog.vue b/src/components/requestDetail/StatusChangeLog.vue
index 48682cee..792bf251 100644
--- a/src/components/requestDetail/StatusChangeLog.vue
+++ b/src/components/requestDetail/StatusChangeLog.vue
@@ -21,13 +21,16 @@ const formattedDateAndTime = formatDateAndTime(props.log.createdAt)
 </script>
 
 <template>
-  <div class="w-5/7 flex items-center pl-12">
-    <UserIcon class="mr-2 w-12" :name="userMap[log.createdBy]" />
-    {{ userMap[log.createdBy] }}
-    が申請の状態を
-    <StatusChip class="mx-2" has-text :status="log.status" />
-    にしました。
-    <div class="ml-auto">
+  <div class="w-full flex items-center">
+    <div class="flex items-center gap-4 flex-1">
+      <UserIcon class="w-12" :name="userMap[log.createdBy]" />
+      <div class="flex items-center gap-2">
+        <span>{{ userMap[log.createdBy] }} が申請の状態を</span>
+        <StatusChip has-text :status="log.status" />
+        <span>にしました。</span>
+      </div>
+    </div>
+    <div class="text-gray-400">
       {{ formattedDateAndTime }}
     </div>
   </div>
diff --git a/src/components/shared/StatusChip.vue b/src/components/shared/StatusChip.vue
index a2de1c62..1360810a 100644
--- a/src/components/shared/StatusChip.vue
+++ b/src/components/shared/StatusChip.vue
@@ -56,7 +56,7 @@ const backgroundColor = computed(() => (status: RequestStatus) => {
 
 <template>
   <div
-    :class="`inline flex items-center rounded-full p-2 text-white ${backgroundColor(
+    :class="`inline flex items-center rounded-3xl px-3 py-2 gap-2 text-white ${backgroundColor(
       status
     )}`"
     :title="statusToJpn(status)">
diff --git a/src/components/shared/UserIcon.vue b/src/components/shared/UserIcon.vue
index bbbd8d50..a6d0a64e 100644
--- a/src/components/shared/UserIcon.vue
+++ b/src/components/shared/UserIcon.vue
@@ -1,13 +1,14 @@
 <script lang="ts" setup>
-interface Props {
+// TODO: sizeも受け取りたい
+defineProps<{
   name: string
-}
-const props = defineProps<Props>()
+}>()
 </script>
 
 <template>
   <img
-    :alt="props.name"
+    :alt="name"
     class="rounded-1/2 h-full p-1"
-    :src="`https://q.trap.jp/api/v3/public/icon/${props.name}`" />
+    :src="`https://q.trap.jp/api/v3/public/icon/${name}`"
+    :title="name" />
 </template>
diff --git a/src/pages/RequestDetailPage.vue b/src/pages/RequestDetailPage.vue
index b6b80961..92d0a921 100644
--- a/src/pages/RequestDetailPage.vue
+++ b/src/pages/RequestDetailPage.vue
@@ -68,7 +68,7 @@ onMounted(() => {
       </div>
     </div>
     <div class="h-0.25 bg-[#e5e7eb]" />
-    <div class="flex justify-between">
+    <div class="flex justify-between gap-20">
       <RequestLogs class="basis-2/3" />
       <RequestSidebar class="basis-1/3" />
     </div>

From 97d9d35032b2e55c9187e3b0a7ca88094e78038b Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 26 Apr 2024 18:48:31 +0900
Subject: [PATCH 04/28] =?UTF-8?q?margin=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/RequestLogs.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/requestDetail/RequestLogs.vue b/src/components/requestDetail/RequestLogs.vue
index 776fb346..3a0c8fd2 100644
--- a/src/components/requestDetail/RequestLogs.vue
+++ b/src/components/requestDetail/RequestLogs.vue
@@ -60,5 +60,7 @@ const logs = computed((): Log[] => {
   height: 36px;
   background-color: #d4d4d8;
   margin-left: 70px;
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
 </style>

From 18f898aa683f1fbf2e5501eb963721d08559309c Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 26 Apr 2024 19:08:19 +0900
Subject: [PATCH 05/28] =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E6=AC=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/NewComment.vue   | 13 ++--
 .../requestDetail/RequestContent.vue          | 60 -------------------
 src/components/requestDetail/RequestLogs.vue  |  1 +
 src/components/shared/InputTextarea.vue       |  2 +-
 src/components/shared/MarkdownTextarea.vue    | 57 ++++++++++--------
 5 files changed, 41 insertions(+), 92 deletions(-)
 delete mode 100644 src/components/requestDetail/RequestContent.vue

diff --git a/src/components/requestDetail/NewComment.vue b/src/components/requestDetail/NewComment.vue
index a96794f7..6938bca2 100644
--- a/src/components/requestDetail/NewComment.vue
+++ b/src/components/requestDetail/NewComment.vue
@@ -13,17 +13,16 @@ const { comment, isSending, submit } = useNewComment(request.value?.id ?? '')
 </script>
 
 <template>
-  <form class="mx-4 w-full">
-    <MarkdownTextarea v-model="comment" placeholder="コメント" />
-    <div class="mt-1">
+  <div class="w-full">
+    <MarkdownTextarea v-model="comment">
       <SimpleButton
-        class="ml-auto"
         :disabled="isSending"
         font-size="md"
         padding="sm"
-        @click.prevent="submit">
+        type="success"
+        @click="submit">
         コメントする
       </SimpleButton>
-    </div>
-  </form>
+    </MarkdownTextarea>
+  </div>
 </template>
diff --git a/src/components/requestDetail/RequestContent.vue b/src/components/requestDetail/RequestContent.vue
deleted file mode 100644
index aa1fbdfc..00000000
--- a/src/components/requestDetail/RequestContent.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-import { useUserStore } from '/@/stores/user'
-
-import InputTextarea from '/@/components/shared/InputTextarea.vue'
-import MarkdownIt from '/@/components/shared/MarkdownIt.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
-}>()
-
-const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isRequestCreator } = requestDetailStore
-const { request, editedValue } = storeToRefs(requestDetailStore)
-const { me } = storeToRefs(userStore)
-
-const hasAuthority = isRequestCreator(me.value)
-</script>
-
-<template>
-  <div class="flex w-3/5">
-    詳細：
-    <div v-if="!props.isEditMode && request" class="flex flex-grow items-end">
-      <MarkdownIt
-        class="h-32 flex-grow overflow-y-scroll border border-gray-300 pl-1"
-        :text="request.content" />
-      <SimpleButton
-        v-if="hasAuthority"
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click="emit('changeEditMode', 'content')">
-        編集
-      </SimpleButton>
-    </div>
-    <div v-else class="flex flex-grow items-end">
-      <InputTextarea
-        v-model="editedValue.content"
-        class="h-30 flex-grow resize-none"
-        placeholder="詳細" />
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click.stop="emit('changeEditMode', '')">
-        完了
-      </SimpleButton>
-    </div>
-  </div>
-</template>
diff --git a/src/components/requestDetail/RequestLogs.vue b/src/components/requestDetail/RequestLogs.vue
index 3a0c8fd2..b2718a17 100644
--- a/src/components/requestDetail/RequestLogs.vue
+++ b/src/components/requestDetail/RequestLogs.vue
@@ -9,6 +9,7 @@ import type { RequestStatusDetail } from '/@/features/requestStatus/model'
 
 import CommentLog from './CommentLog.vue'
 import StatusChangeLog from './StatusChangeLog.vue'
+import NewComment from './NewComment.vue'
 
 type CommentWithType = RequestComment & { type: 'comment' }
 type StatusWithType = RequestStatusDetail & { type: 'statusChange' }
diff --git a/src/components/shared/InputTextarea.vue b/src/components/shared/InputTextarea.vue
index b583b824..20e550a7 100644
--- a/src/components/shared/InputTextarea.vue
+++ b/src/components/shared/InputTextarea.vue
@@ -34,7 +34,7 @@ onMounted(() => {
 <template>
   <textarea
     ref="textareaRef"
-    class="bg-background min-h-32 rounded border border-gray-300 px-1"
+    class="bg-background min-h-32 rounded border border-gray-300 px-3 py-2"
     :placeholder="props.placeholder"
     :required="required"
     :value="props.modelValue"
diff --git a/src/components/shared/MarkdownTextarea.vue b/src/components/shared/MarkdownTextarea.vue
index 1d7e11ec..8ff28c0f 100644
--- a/src/components/shared/MarkdownTextarea.vue
+++ b/src/components/shared/MarkdownTextarea.vue
@@ -24,16 +24,15 @@ const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
 const currentTab = ref<TabType>('input')
 const selectedTemplate = ref('')
 
-const templateOptions = computed(() => {
-  return (
+const templateOptions = computed(
+  () =>
     props.templates?.map(template => {
       return {
         key: template.name,
         value: template.name
       }
     }) ?? []
-  )
-})
+)
 
 function setTemplate(template: string) {
   const foundTemplate = props.templates?.find(t => t.name === template)
@@ -48,43 +47,53 @@ function changeCurrentTab(tab: TabType) {
 </script>
 
 <template>
-  <div>
-    <div class="flex gap-2">
-      <button
-        :class="`w-20 rounded-t py-1 ${
-          currentTab === 'input' ? 'bg-gray-400 text-white' : 'bg-gray-200'
-        }`"
-        @click.prevent="changeCurrentTab('input')">
-        入力
-      </button>
-      <button
-        :class="`w-20 rounded-t py-1 ${
-          currentTab === 'preview' ? 'bg-gray-400 text-white' : 'bg-gray-200'
-        }`"
-        @click.prevent="changeCurrentTab('preview')">
-        プレビュー
-      </button>
+  <div class="flex flex-col rounded border border-gray-300">
+    <div
+      class="flex items-center justify-between rounded-t bg-gray-200 px-4 pt-3">
+      <div class="flex items-center">
+        <button
+          :class="`rounded-t py-2 px-6 ${
+            currentTab === 'input'
+              ? 'bg-white border-t border-x border-gray-300'
+              : 'bg-gray-200'
+          }`"
+          @click="changeCurrentTab('input')">
+          入力
+        </button>
+        <button
+          :class="`rounded-t py-2 px-6 ${
+            currentTab === 'preview'
+              ? 'bg-white border-t border-x border-gray-300'
+              : 'bg-gray-200'
+          }`"
+          @click="changeCurrentTab('preview')">
+          プレビュー
+        </button>
+      </div>
       <InputSelectSingle
         v-if="props.templates !== undefined"
         v-model="selectedTemplate"
-        class="m-1 ml-auto inline-block w-1/3"
+        class="inline-block"
         :options="templateOptions"
         placeholder="テンプレートを選択"
         @option:selected="setTemplate(selectedTemplate)">
       </InputSelectSingle>
     </div>
-    <div>
+    <div class="px-5 py-3">
       <InputTextarea
         v-if="currentTab === 'input'"
         :auto-focus="autoFocus"
-        class="min-h-40 w-full"
+        class="min-h-40 w-full bg-gray-200"
         :model-value="modelValue"
         :placeholder="placeholder"
         @update:model-value="emit('update:modelValue', $event)" />
       <MarkdownIt
         v-if="currentTab === 'preview'"
-        class="min-h-40 w-full overflow-y-scroll border border-gray-500 px-1"
+        class="min-h-40 w-full overflow-y-scroll rounded bg-gray-200 border border-gray-300 px-3 py-2"
         :text="modelValue" />
+      <div class="flex justify-end pt-3">
+        <slot />
+      </div>
     </div>
   </div>
 </template>

From d8eeff92a772fc5af7579955cf841424cda6afa2 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 26 Apr 2024 19:26:37 +0900
Subject: [PATCH 06/28] =?UTF-8?q?=E6=96=87=E5=AD=97=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/CommentLog.vue      | 5 ++++-
 src/components/requestDetail/RequestGroup.vue    | 2 +-
 src/components/requestDetail/RequestTags.vue     | 2 +-
 src/components/requestDetail/RequestTargets.vue  | 2 +-
 src/components/requestDetail/StatusChangeLog.vue | 5 ++++-
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/requestDetail/CommentLog.vue b/src/components/requestDetail/CommentLog.vue
index f87a1037..76671001 100644
--- a/src/components/requestDetail/CommentLog.vue
+++ b/src/components/requestDetail/CommentLog.vue
@@ -29,7 +29,10 @@ const hash = computed(() => route.hash.substring(1))
     <div class="flex w-full items-center">
       <div class="flex items-center gap-4 flex-1">
         <UserIcon class="w-12" :name="userMap[comment.user]" />
-        <span>{{ userMap[comment.user] }}がコメントしました。</span>
+        <div>
+          <span class="font-bold">{{ userMap[comment.user] }}</span>
+          がコメントしました。
+        </div>
       </div>
       <time class="text-gray-400" :datetime="comment.createdAt.toISO() ?? ''">
         {{ formattedDateAndTime }}
diff --git a/src/components/requestDetail/RequestGroup.vue b/src/components/requestDetail/RequestGroup.vue
index 7378a132..d1e839be 100644
--- a/src/components/requestDetail/RequestGroup.vue
+++ b/src/components/requestDetail/RequestGroup.vue
@@ -23,7 +23,7 @@ const groupName = computed(() =>
 <template>
   <div class="flex flex-col gap-1">
     <div class="flex items-center justify-between">
-      <div>グループ</div>
+      <div class="text-sm font-bold">グループ</div>
       <EditButton v-if="hasAuthority" />
     </div>
     <div>
diff --git a/src/components/requestDetail/RequestTags.vue b/src/components/requestDetail/RequestTags.vue
index ecd5ba1f..522ebc71 100644
--- a/src/components/requestDetail/RequestTags.vue
+++ b/src/components/requestDetail/RequestTags.vue
@@ -19,7 +19,7 @@ const hasAuthority = isRequestCreator(me.value)
 <template>
   <div class="flex flex-col gap-1">
     <div class="flex items-center justify-between">
-      <div>タグ</div>
+      <div class="text-sm font-bold">タグ</div>
       <EditButton v-if="hasAuthority" />
     </div>
     <div>
diff --git a/src/components/requestDetail/RequestTargets.vue b/src/components/requestDetail/RequestTargets.vue
index acba514c..fe4f4f30 100644
--- a/src/components/requestDetail/RequestTargets.vue
+++ b/src/components/requestDetail/RequestTargets.vue
@@ -19,7 +19,7 @@ const hasAuthority = isRequestCreator(me.value)
 <template>
   <div class="flex flex-col gap-2">
     <div class="flex items-center justify-between">
-      <div>払い戻し対象者</div>
+      <div class="text-sm font-bold">払い戻し対象者</div>
       <EditButton v-if="hasAuthority" />
     </div>
     <div class="flex flex-col gap-2">
diff --git a/src/components/requestDetail/StatusChangeLog.vue b/src/components/requestDetail/StatusChangeLog.vue
index 792bf251..abfaa1c4 100644
--- a/src/components/requestDetail/StatusChangeLog.vue
+++ b/src/components/requestDetail/StatusChangeLog.vue
@@ -25,7 +25,10 @@ const formattedDateAndTime = formatDateAndTime(props.log.createdAt)
     <div class="flex items-center gap-4 flex-1">
       <UserIcon class="w-12" :name="userMap[log.createdBy]" />
       <div class="flex items-center gap-2">
-        <span>{{ userMap[log.createdBy] }} が申請の状態を</span>
+        <span>
+          <span class="font-bold">{{ userMap[log.createdBy] }}</span>
+          が申請の状態を
+        </span>
         <StatusChip has-text :status="log.status" />
         <span>にしました。</span>
       </div>

From 19f55adbd0dc1629808d50b88a80f79398b9c43f Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 26 Apr 2024 21:07:18 +0900
Subject: [PATCH 07/28] =?UTF-8?q?=E3=82=B0=E3=83=AB=E3=83=BC=E3=83=97?=
 =?UTF-8?q?=E3=81=A8=E3=82=BF=E3=82=B0=E3=81=AE=E7=B7=A8=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/CommentLog.vue   |  2 +-
 src/components/requestDetail/RequestGroup.vue | 40 ++++++++++++++++--
 .../requestDetail/RequestSidebar.vue          |  2 +-
 src/components/requestDetail/RequestTags.vue  | 42 +++++++++++++++++--
 .../requestDetail/StatusChangeLog.vue         |  2 +-
 src/components/requests/RequestItem.vue       |  2 +-
 src/components/shared/EditButton.vue          | 18 +++++++-
 src/features/request/converter.ts             |  4 +-
 src/features/request/model.ts                 |  2 +-
 src/features/requestTarget/mock.ts            |  2 +-
 src/stores/requestDetail.ts                   |  2 +-
 11 files changed, 101 insertions(+), 17 deletions(-)

diff --git a/src/components/requestDetail/CommentLog.vue b/src/components/requestDetail/CommentLog.vue
index 76671001..9bcaabc9 100644
--- a/src/components/requestDetail/CommentLog.vue
+++ b/src/components/requestDetail/CommentLog.vue
@@ -31,7 +31,7 @@ const hash = computed(() => route.hash.substring(1))
         <UserIcon class="w-12" :name="userMap[comment.user]" />
         <div>
           <span class="font-bold">{{ userMap[comment.user] }}</span>
-          がコメントしました。
+          がコメントしました
         </div>
       </div>
       <time class="text-gray-400" :datetime="comment.createdAt.toISO() ?? ''">
diff --git a/src/components/requestDetail/RequestGroup.vue b/src/components/requestDetail/RequestGroup.vue
index d1e839be..8e01c2c0 100644
--- a/src/components/requestDetail/RequestGroup.vue
+++ b/src/components/requestDetail/RequestGroup.vue
@@ -5,29 +5,63 @@ import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import InputSelectSingle from '/@/components/shared/InputSelectSingle.vue'
+import { useGroupStore } from '/@/stores/group'
+import { editRequestUsecase } from '/@/features/request/usecase'
 
 const userStore = useUserStore()
 const requestDetailStore = useRequestDetailStore()
+const groupStore = useGroupStore()
 const { isRequestCreator } = requestDetailStore
 const { request } = storeToRefs(requestDetailStore)
 const { me } = storeToRefs(userStore)
+const { groupOptions } = storeToRefs(groupStore)
 
 const hasAuthority = isRequestCreator(me.value)
 
+const defaultGroup = computed(() =>
+  request.value?.group ? request.value.group.id : null
+)
 const groupName = computed(() =>
   request.value?.group ? request.value.group.name : 'なし'
 )
+
+const isEditMode = ref(false)
+const editedGroup = ref<string | null>(defaultGroup.value)
+const toggleEditGroup = () => {
+  if (isEditMode.value) {
+    editedGroup.value = defaultGroup.value
+  }
+  isEditMode.value = !isEditMode.value
+}
+const handleUpdateGroup = async () => {
+  if (!request.value) return
+  await editRequestUsecase(request.value.id, {
+    ...request.value,
+    group: editedGroup.value
+  })
+  isEditMode.value = false
+}
 </script>
 
 <template>
   <div class="flex flex-col gap-1">
     <div class="flex items-center justify-between">
       <div class="text-sm font-bold">グループ</div>
-      <EditButton v-if="hasAuthority" />
+      <EditButton
+        v-if="hasAuthority"
+        :is-edit-mode="isEditMode"
+        @click="toggleEditGroup" />
     </div>
     <div>
-      {{ groupName }}
+      <span v-if="!isEditMode">{{ groupName }}</span>
+      <div v-else>
+        <InputSelectSingle
+          v-model="editedGroup"
+          :options="groupOptions"
+          @close="handleUpdateGroup" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/requestDetail/RequestSidebar.vue b/src/components/requestDetail/RequestSidebar.vue
index c12709d6..9bbdb709 100644
--- a/src/components/requestDetail/RequestSidebar.vue
+++ b/src/components/requestDetail/RequestSidebar.vue
@@ -5,7 +5,7 @@ import RequestTargets from '/@/components/requestDetail/RequestTargets.vue'
 </script>
 
 <template>
-  <div class="px-12 flex flex-col gap-8">
+  <div class="px-4 flex flex-col gap-8">
     <div class="flex flex-col gap-3">
       <RequestGroup />
       <RequestTags />
diff --git a/src/components/requestDetail/RequestTags.vue b/src/components/requestDetail/RequestTags.vue
index 522ebc71..485294eb 100644
--- a/src/components/requestDetail/RequestTags.vue
+++ b/src/components/requestDetail/RequestTags.vue
@@ -1,11 +1,15 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
+import { computed, ref } from 'vue'
 
 import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
 import TagsGroup from '/@/components/shared/TagsGroup.vue'
+import InputSelectTagWithCreation from '/@/components/shared/InputSelectTagWithCreation.vue'
+import type { Tag } from '/@/features/tag/model'
+import { editRequestUsecase } from '/@/features/request/usecase'
 
 const userStore = useUserStore()
 const requestDetailStore = useRequestDetailStore()
@@ -14,17 +18,49 @@ const { request } = storeToRefs(requestDetailStore)
 const { me } = storeToRefs(userStore)
 
 const hasAuthority = isRequestCreator(me.value)
+
+const defaultTags = computed(() =>
+  request.value?.tags ? request.value.tags : []
+)
+
+const isEditMode = ref(false)
+const editedTags = ref<Tag[]>(request.value?.tags ? request.value.tags : [])
+const toggleEditTags = () => {
+  if (isEditMode.value) {
+    editedTags.value = defaultTags.value
+  }
+  isEditMode.value = !isEditMode.value
+}
+const handleUpdateTags = async () => {
+  if (!request.value) return
+  await editRequestUsecase(request.value.id, {
+    ...request.value,
+    group: request.value.group?.id ?? null, // TODO: デフォルトの値をどこかに置いておく
+    tags: editedTags.value
+  })
+  isEditMode.value = false
+}
 </script>
 
 <template>
   <div class="flex flex-col gap-1">
     <div class="flex items-center justify-between">
       <div class="text-sm font-bold">タグ</div>
-      <EditButton v-if="hasAuthority" />
+      <EditButton
+        v-if="hasAuthority"
+        :is-edit-mode="isEditMode"
+        @click="toggleEditTags" />
     </div>
     <div>
-      <TagsGroup v-if="request?.tags" :tags="request.tags" />
-      <span v-else>なし</span>
+      <div v-if="!isEditMode">
+        <TagsGroup v-if="request?.tags" :tags="request.tags" />
+        <span v-else>なし</span>
+      </div>
+      <div v-else>
+        <InputSelectTagWithCreation
+          v-model="editedTags"
+          @close="handleUpdateTags" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/requestDetail/StatusChangeLog.vue b/src/components/requestDetail/StatusChangeLog.vue
index abfaa1c4..ef301c39 100644
--- a/src/components/requestDetail/StatusChangeLog.vue
+++ b/src/components/requestDetail/StatusChangeLog.vue
@@ -30,7 +30,7 @@ const formattedDateAndTime = formatDateAndTime(props.log.createdAt)
           が申請の状態を
         </span>
         <StatusChip has-text :status="log.status" />
-        <span>にしました。</span>
+        <span>にしました</span>
       </div>
     </div>
     <div class="text-gray-400">
diff --git a/src/components/requests/RequestItem.vue b/src/components/requests/RequestItem.vue
index 06fbd73e..0b36b429 100644
--- a/src/components/requests/RequestItem.vue
+++ b/src/components/requests/RequestItem.vue
@@ -41,7 +41,7 @@ const totalAmount = computed(
     <div>
       <div class="flex gap-4">
         <span v-if="request.group"> グループ：{{ request.group.name }} </span>
-        <span>申請者：{{ userMap[request.created_by] }}</span>
+        <span>申請者：{{ userMap[request.createdBy] }}</span>
         <span>申請日：{{ formattedDate }}</span>
       </div>
       <div class="text-right text-3xl">{{ totalAmount }}円</div>
diff --git a/src/components/shared/EditButton.vue b/src/components/shared/EditButton.vue
index 831c5fbd..15a70bd9 100644
--- a/src/components/shared/EditButton.vue
+++ b/src/components/shared/EditButton.vue
@@ -1,9 +1,23 @@
 <script lang="ts" setup>
-import { PencilIcon } from '@heroicons/vue/24/solid'
+import { PencilIcon, XMarkIcon } from '@heroicons/vue/24/solid'
+
+withDefaults(
+  defineProps<{
+    isEditMode: boolean
+  }>(),
+  {
+    isEditMode: false
+  }
+)
 </script>
 
 <template>
   <button class="inline-block">
-    <PencilIcon class="text-secondary hover:text-secondaryHover h-5 w-5" />
+    <PencilIcon
+      v-if="!isEditMode"
+      class="text-secondary hover:text-secondaryHover h-4 w-4" />
+    <XMarkIcon
+      v-else
+      class="text-secondary hover:text-secondaryHover h-4 w-4" />
   </button>
 </template>
diff --git a/src/features/request/converter.ts b/src/features/request/converter.ts
index 528550d9..842679a0 100644
--- a/src/features/request/converter.ts
+++ b/src/features/request/converter.ts
@@ -15,7 +15,7 @@ import type { Request, RequestDetail } from './model'
 export const convertRequestFromData = (request: RequestData): Request => ({
   id: request.id,
   status: request.status,
-  created_by: request.created_by,
+  createdBy: request.created_by,
   title: request.title,
   content: request.content,
   targets: request.targets.map(convertRequestTargetFromData),
@@ -29,7 +29,7 @@ export const convertRequestDetailFromData = (
 ): RequestDetail => ({
   id: request.id,
   status: request.status,
-  created_by: request.created_by,
+  createdBy: request.created_by,
   title: request.title,
   content: request.content,
   targets: request.targets.map(convertRequestTargetFromData),
diff --git a/src/features/request/model.ts b/src/features/request/model.ts
index ac71aaeb..3f912ef9 100644
--- a/src/features/request/model.ts
+++ b/src/features/request/model.ts
@@ -15,7 +15,7 @@ import type { Tag } from '/@/features/tag/model'
 export interface Request {
   id: string
   status: RequestStatus
-  created_by: string
+  createdBy: string
   title: string
   content: string
   targets: RequestTargetDetail[]
diff --git a/src/features/requestTarget/mock.ts b/src/features/requestTarget/mock.ts
index 34ab6a78..0c2854ca 100644
--- a/src/features/requestTarget/mock.ts
+++ b/src/features/requestTarget/mock.ts
@@ -20,7 +20,7 @@ export const mockRequestTargets: RequestTargetDetail[] = [
     id: '3fa85f64-5717-4562-b3fc-2c963f66afa7',
     amount: 1500,
     target: '3fa85f64-5717-4562-b3fc-2c963f66afa7',
-    paid_at: '2020-01-02',
+    paid_at: null,
     created_at: '2020-01-02'
   }
 ]
diff --git a/src/stores/requestDetail.ts b/src/stores/requestDetail.ts
index 079bde71..1c8332c0 100644
--- a/src/stores/requestDetail.ts
+++ b/src/stores/requestDetail.ts
@@ -30,7 +30,7 @@ export const useRequestDetailStore = defineStore('requestDetail', () => {
 
   const isRequestCreator = computed(() => (user: User | undefined) => {
     if (!user || request.value === undefined) return false
-    return user.id === request.value.created_by
+    return user.id === request.value.createdBy
   })
 
   return {

From 679f110bf76643c63e4e52a6c98d9cacf8742bce Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 26 Apr 2024 21:14:57 +0900
Subject: [PATCH 08/28] =?UTF-8?q?=E9=96=8B=E3=81=91=E3=81=AA=E3=81=8F?=
 =?UTF-8?q?=E3=81=AA=E3=81=A3=E3=81=A6=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/RequestTags.vue  | 2 +-
 src/components/shared/InputSelectMultiple.vue | 2 +-
 src/components/shared/InputSelectSingle.vue   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/requestDetail/RequestTags.vue b/src/components/requestDetail/RequestTags.vue
index 485294eb..1376f3e9 100644
--- a/src/components/requestDetail/RequestTags.vue
+++ b/src/components/requestDetail/RequestTags.vue
@@ -24,7 +24,7 @@ const defaultTags = computed(() =>
 )
 
 const isEditMode = ref(false)
-const editedTags = ref<Tag[]>(request.value?.tags ? request.value.tags : [])
+const editedTags = ref<Tag[]>(defaultTags.value)
 const toggleEditTags = () => {
   if (isEditMode.value) {
     editedTags.value = defaultTags.value
diff --git a/src/components/shared/InputSelectMultiple.vue b/src/components/shared/InputSelectMultiple.vue
index 3c3ae66c..66951ccf 100644
--- a/src/components/shared/InputSelectMultiple.vue
+++ b/src/components/shared/InputSelectMultiple.vue
@@ -114,7 +114,7 @@ const removeValue = (selectedOption: Value) => {
 /* コンポーネント外がクリックされたときの処理 */
 const handleClickOutside = (e: MouseEvent) => {
   const target = e.target as HTMLElement
-  if (inputSelectRef.value === null) return
+  if (inputSelectRef.value === null || !isDropdownOpen.value) return
   if (!inputSelectRef.value.contains(target)) {
     isDropdownOpen.value = false
     emit('close')
diff --git a/src/components/shared/InputSelectSingle.vue b/src/components/shared/InputSelectSingle.vue
index 7e135674..8bd4ac46 100644
--- a/src/components/shared/InputSelectSingle.vue
+++ b/src/components/shared/InputSelectSingle.vue
@@ -82,7 +82,7 @@ const removeValue = () => {
 
 const handleClickOutside = (e: MouseEvent) => {
   const target = e.target as HTMLElement
-  if (inputSelectRef.value === null) return
+  if (inputSelectRef.value === null || !isDropdownOpen.value) return
   if (!inputSelectRef.value.contains(target)) {
     isDropdownOpen.value = false
     emit('close')

From 0d797e193535a9919c2c7408362b7d1aab74e27d Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 11:18:31 +0900
Subject: [PATCH 09/28] =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=88=E3=83=AB?=
 =?UTF-8?q?=E7=B7=A8=E9=9B=86=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requestDetail/RequestHeader.vue           | 50 +++++++++++++++++++
 src/components/shared/InputText.vue           |  2 +-
 src/components/shared/SimpleButton.vue        | 11 ++--
 src/pages/RequestDetailPage.vue               | 21 ++------
 4 files changed, 63 insertions(+), 21 deletions(-)
 create mode 100644 src/components/requestDetail/RequestHeader.vue

diff --git a/src/components/requestDetail/RequestHeader.vue b/src/components/requestDetail/RequestHeader.vue
new file mode 100644
index 00000000..e717c7d6
--- /dev/null
+++ b/src/components/requestDetail/RequestHeader.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+
+import StatusChip from '/@/components/shared/StatusChip.vue'
+import type { RequestDetail } from '/@/features/request/model'
+import SimpleButton from '/@/components/shared/SimpleButton.vue'
+import InputText from '/@/components/shared/InputText.vue'
+import { editRequestUsecase } from '/@/features/request/usecase'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
+
+const totalAmount = computed(() =>
+  props.request.targets.reduce((a, target) => a + target.amount, 0)
+)
+
+const isEditMode = ref(false)
+const editedTitle = ref(props.request.title)
+const toggleEditTitle = () => {
+  isEditMode.value = !isEditMode.value
+}
+const handleUpdateTitle = async () => {
+  await editRequestUsecase(props.request.id, {
+    ...props.request,
+    group: props.request.group?.id ?? null,
+    title: editedTitle.value
+  })
+  isEditMode.value = false
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex gap-2">
+      <h1 v-if="!isEditMode" class="flex-1 text-2xl">{{ request.title }}</h1>
+      <InputText v-else v-model="editedTitle" class="flex-1" />
+      <SimpleButton v-if="!isEditMode" padding="sm" @click="toggleEditTitle">
+        編集
+      </SimpleButton>
+      <SimpleButton v-else padding="sm" @click="handleUpdateTitle">
+        完了
+      </SimpleButton>
+    </div>
+    <div class="flex items-center justify-between">
+      <StatusChip has-text :status="request.status" />
+      <div class="text-3xl font-bold">{{ totalAmount }}円</div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/shared/InputText.vue b/src/components/shared/InputText.vue
index e0fb3fa2..b8e7f94e 100644
--- a/src/components/shared/InputText.vue
+++ b/src/components/shared/InputText.vue
@@ -34,7 +34,7 @@ onMounted(() => {
 <template>
   <input
     ref="inputRef"
-    class="bg-background rounded border border-gray-300 py-1 px-2"
+    class="bg-white rounded border border-gray-300 py-1 px-2"
     :placeholder="props.placeholder"
     :required="props.required"
     :value="props.modelValue"
diff --git a/src/components/shared/SimpleButton.vue b/src/components/shared/SimpleButton.vue
index 49d5037a..befb2b12 100644
--- a/src/components/shared/SimpleButton.vue
+++ b/src/components/shared/SimpleButton.vue
@@ -3,11 +3,16 @@ import { computed } from 'vue'
 
 interface Props {
   type?: 'plain' | 'danger' | 'success'
-  fontSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
-  padding: 'sm' | 'md' | 'lg' | 'xl'
+  fontSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+  padding?: 'sm' | 'md' | 'lg' | 'xl'
   disabled?: boolean
 }
-const props = withDefaults(defineProps<Props>(), { disabled: false })
+const props = withDefaults(defineProps<Props>(), {
+  type: 'plain',
+  disabled: false,
+  fontSize: 'md',
+  padding: 'md'
+})
 
 const typeClass = computed(() => {
   switch (props.type) {
diff --git a/src/pages/RequestDetailPage.vue b/src/pages/RequestDetailPage.vue
index 92d0a921..7459e935 100644
--- a/src/pages/RequestDetailPage.vue
+++ b/src/pages/RequestDetailPage.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { computed, onMounted } from 'vue'
+import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useGroupStore } from '/@/stores/group'
@@ -12,12 +12,11 @@ import { toId } from '/@/lib/parseQueryParams'
 
 import RequestLogs from '/@/components/requestDetail/RequestLogs.vue'
 import RequestSidebar from '/@/components/requestDetail/RequestSidebar.vue'
-import StatusChip from '/@/components/shared/StatusChip.vue'
 import { useFetchGroupsUsecase } from '/@/features/group/usecase'
 import { useFetchRequestUsecase } from '/@/features/request/usecase'
 import { useFetchTagsUsecase } from '/@/features/tag/usecase'
 import { useFetchUsersUsecase } from '/@/features/user/usecase'
-
+import RequestHeader from '/@/components/requestDetail/RequestHeader.vue'
 
 const route = useRoute()
 const id = toId(route.params.id)
@@ -32,10 +31,6 @@ const { isTagFetched } = storeToRefs(tagStore)
 
 const { request } = storeToRefs(requestDetailStore)
 
-const totalAmount = computed(
-  () => request.value?.targets.reduce((a, target) => a + target.amount, 0) ?? 0
-)
-
 await useFetchRequestUsecase(id)
 if (!isGroupFetched.value) {
   await useFetchGroupsUsecase()
@@ -46,6 +41,7 @@ if (!isUserFetched.value) {
 if (!isTagFetched.value) {
   await useFetchTagsUsecase()
 }
+
 onMounted(() => {
   if (route.hash !== '') {
     document.getElementById(route.hash.substring(1))?.scrollIntoView(true)
@@ -57,16 +53,7 @@ onMounted(() => {
   <div
     v-if="request !== undefined"
     class="mx-auto w-4/5 pt-5 flex flex-col gap-5">
-    <div class="flex flex-col gap-4">
-      <div class="flex gap-2">
-        <h1 class="flex-1 text-2xl">{{ request.title }}</h1>
-        <div>...</div>
-      </div>
-      <div class="flex items-center justify-between">
-        <StatusChip has-text :status="request.status" />
-        <div class="text-3xl font-bold">{{ totalAmount }}円</div>
-      </div>
-    </div>
+    <RequestHeader :request="request" />
     <div class="h-0.25 bg-[#e5e7eb]" />
     <div class="flex justify-between gap-20">
       <RequestLogs class="basis-2/3" />

From 3027158accc822d133aaba2690b4c6d2fb57e68d Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 12:32:27 +0900
Subject: [PATCH 10/28] =?UTF-8?q?=E3=82=BF=E3=82=B0=E3=81=AE=E6=96=B0?=
 =?UTF-8?q?=E8=A6=8F=E4=BD=9C=E6=88=90=E3=82=82=E3=81=99=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/request/usecase.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/features/request/usecase.ts b/src/features/request/usecase.ts
index 6357f25d..0508701d 100644
--- a/src/features/request/usecase.ts
+++ b/src/features/request/usecase.ts
@@ -7,6 +7,7 @@ import type { RequestStatus } from '/@/features/requestStatus/model'
 
 import type { RequestSeed } from './model'
 import { useRequestRepository } from './repository'
+import { createTagIfNotExistUsecase } from '/@/features/tag/usecase'
 
 export const useFetchRequestsUsecase = async () => {
   const repository = useRequestRepository()
@@ -49,13 +50,18 @@ export const createRequestUsecase = async (request: RequestSeed) => {
 
 export const editRequestUsecase = async (
   id: string,
-  requestSeed: RequestSeed
+  _requestSeed: RequestSeed
 ) => {
   const repository = useRequestRepository()
   const { request } = storeToRefs(useRequestDetailStore())
   if (!request.value) return
 
   try {
+    const tags = await createTagIfNotExistUsecase(_requestSeed.tags)
+    const requestSeed = {
+      ..._requestSeed,
+      tags
+    }
     const res = await repository.editRequest(id, requestSeed)
     request.value = res
   } catch {

From 98578a4d4ffd6259a5259b22c3f048ab5061892a Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 12:58:32 +0900
Subject: [PATCH 11/28] =?UTF-8?q?=E5=AF=BE=E8=B1=A1=E8=80=85=E3=82=92?=
 =?UTF-8?q?=E7=B7=A8=E9=9B=86=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requestDetail/RequestTarget.vue           | 85 ++++++++++++++++---
 .../requestDetail/RequestTargets.vue          | 22 ++++-
 2 files changed, 91 insertions(+), 16 deletions(-)

diff --git a/src/components/requestDetail/RequestTarget.vue b/src/components/requestDetail/RequestTarget.vue
index 15e25c39..78631ade 100644
--- a/src/components/requestDetail/RequestTarget.vue
+++ b/src/components/requestDetail/RequestTarget.vue
@@ -2,31 +2,92 @@
 import { storeToRefs } from 'pinia'
 
 import { useUserStore } from '/@/stores/user'
-import type { RequestTarget } from '/@/features/requestTarget/model'
+import type {
+  RequestTargetDetail,
+  RequestTarget
+} from '/@/features/requestTarget/model'
 
 import UserIcon from '/@/components/shared/UserIcon.vue'
 import { RouterLink } from 'vue-router'
+import InputSelectSingle from '/@/components/shared/InputSelectSingle.vue'
+import InputNumber from '/@/components/shared/InputNumber.vue'
+import { TrashIcon } from '@heroicons/vue/24/solid'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
+import type { RequestDetail } from '/@/features/request/model'
 
-defineProps<{
-  target: RequestTarget
+import { useNewTransaction } from '/@/pages/composables/useNewTransaction'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  request: RequestDetail
+  isEditMode: boolean
+  target: RequestTargetDetail
 }>()
 
+const { isSending, postTransactionFromRequest } = useNewTransaction()
 const userStore = useUserStore()
-const { userMap } = storeToRefs(userStore)
+const { userMap, userOptions } = storeToRefs(userStore)
+
+const targets = computed(() =>
+  props.request.targets.map(target => target.target)
+)
+const targetOptions = computed(() =>
+  userOptions.value.filter(
+    user =>
+      user.value === props.target.target || !targets.value.includes(user.value)
+  )
+)
+
+const targetModel = defineModel<RequestTarget>('targetModel', {
+  required: true
+})
+
+const handleRemoveTarget = () => {
+  console.log('remove')
+}
 </script>
 
 <template>
-  <div class="flex items-center gap-3 justify-between">
+  <div
+    v-if="!props.isEditMode"
+    class="grid grid-cols-[3fr,1fr,2fr] items-center">
     <div class="flex items-center gap-1">
-      <UserIcon class="w-12" :name="userMap[target.target]" />
-      <span>{{ userMap[target.target] }}</span>
+      <UserIcon class="w-10" :name="userMap[target.target]" />
+      <div class="break-all">{{ userMap[target.target] }}</div>
     </div>
-    <div class="flex gap-3">
-      <span>{{ target.amount }}円</span>
-      <!--TODO: link-->
-      <RouterLink class="text-blue-500 underline" to="/">
+    <div>{{ target.amount }}円</div>
+    <div>
+      <!--TODO: targetのレスポンスにtransactionのidを入れてもらう-->
+      <div v-if="target.paidAt !== null" class="flex items-center gap-2">
+        払い戻し済み
+        <RouterLink
+          class="underline"
+          title="入出金記録へ"
+          :to="`/transactions/`">
+          <ArrowTopRightOnSquareIcon class="w-6" />
+        </RouterLink>
+      </div>
+      <button
+        v-else
+        class="text-blue-500"
+        :disabled="isSending"
+        @click="postTransactionFromRequest(request, target)">
         入出金記録を作成
-      </RouterLink>
+      </button>
+    </div>
+  </div>
+  <div v-else class="flex items-center justify-between">
+    <div class="flex flex-col gap-1">
+      <InputSelectSingle
+        v-model="targetModel.target"
+        :options="targetOptions" />
+      <div><InputNumber v-model="targetModel.amount" />円</div>
+    </div>
+    <div>
+      <button @click="handleRemoveTarget">
+        <TrashIcon class="w-6 text-red-500 cursor-pointer" />
+      </button>
     </div>
   </div>
 </template>
+RequestTarget,RequestTarget,
diff --git a/src/components/requestDetail/RequestTargets.vue b/src/components/requestDetail/RequestTargets.vue
index fe4f4f30..d39b8cbb 100644
--- a/src/components/requestDetail/RequestTargets.vue
+++ b/src/components/requestDetail/RequestTargets.vue
@@ -5,7 +5,9 @@ import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
+import { ref } from 'vue'
 import RequestTarget from '/@/components/requestDetail/RequestTarget.vue'
+import type { RequestTargetDetail } from '/@/features/requestTarget/model'
 
 const userStore = useUserStore()
 const requestDetailStore = useRequestDetailStore()
@@ -14,18 +16,30 @@ const { request } = storeToRefs(requestDetailStore)
 const { me } = storeToRefs(userStore)
 
 const hasAuthority = isRequestCreator(me.value)
+
+const isEditMode = ref(false)
+const editedTargets = ref<RequestTargetDetail[]>(request.value?.targets ?? [])
+const toggleEditTargets = () => {
+  isEditMode.value = !isEditMode.value
+}
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
     <div class="flex items-center justify-between">
       <div class="text-sm font-bold">払い戻し対象者</div>
-      <EditButton v-if="hasAuthority" />
+      <EditButton
+        v-if="hasAuthority"
+        :is-edit-mode="isEditMode"
+        @click="toggleEditTargets" />
     </div>
-    <div class="flex flex-col gap-2">
+    <div v-if="request" class="flex flex-col gap-2">
       <RequestTarget
-        v-for="target in request?.targets"
-        :key="target.target"
+        v-for="(target, i) in request?.targets"
+        :key="target.id"
+        v-model:targetModel="editedTargets[i]"
+        :is-edit-mode="isEditMode"
+        :request="request"
         :target="target" />
     </div>
   </div>

From 4d040fc13e3b70805c0a2ab9f49e368415b378e7 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 12:58:50 +0900
Subject: [PATCH 12/28] =?UTF-8?q?=E5=85=A5=E5=87=BA=E9=87=91=E8=A8=98?=
 =?UTF-8?q?=E9=8C=B2=E3=81=AE=E4=BD=9C=E6=88=90=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/RequestTags.vue |  2 +-
 src/pages/composables/useNewTransaction.ts   | 33 +++++++++++---------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/requestDetail/RequestTags.vue b/src/components/requestDetail/RequestTags.vue
index 1376f3e9..0b7835f1 100644
--- a/src/components/requestDetail/RequestTags.vue
+++ b/src/components/requestDetail/RequestTags.vue
@@ -35,7 +35,7 @@ const handleUpdateTags = async () => {
   if (!request.value) return
   await editRequestUsecase(request.value.id, {
     ...request.value,
-    group: request.value.group?.id ?? null, // TODO: デフォルトの値をどこかに置いておく
+    group: request.value.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
     tags: editedTags.value
   })
   isEditMode.value = false
diff --git a/src/pages/composables/useNewTransaction.ts b/src/pages/composables/useNewTransaction.ts
index 9f6464a3..c29a3f8e 100644
--- a/src/pages/composables/useNewTransaction.ts
+++ b/src/pages/composables/useNewTransaction.ts
@@ -7,6 +7,7 @@ import type { Tag } from '/@/features/tag/model'
 import { createTagIfNotExistUsecase } from '/@/features/tag/usecase'
 import type { TransactionCreateSeed } from '/@/features/transaction/model'
 import { createTransactionUsecase } from '/@/features/transaction/usecase'
+import type { RequestTarget } from '/@/features/requestTarget/model'
 
 export type MoneyDirection = 'toTraP' | 'fromTraP'
 
@@ -56,29 +57,31 @@ export const useNewTransaction = () => {
     isSending.value = false
   }
 
-  const postTransactionFromRequest = async (request: RequestDetail) => {
-    const result = confirm('この申請に紐づけて入出金記録を作成しますか？')
+  const postTransactionFromRequest = async (
+    request: RequestDetail,
+    target: RequestTarget
+  ) => {
+    const result = confirm(
+      `この申請に紐づけて@${target.target}の入出金記録を作成しますか？`
+    )
     if (!result) return
     isSending.value = true
-    const promises: ReturnType<typeof createTransactionUsecase>[] =
-      request.targets.map(target => {
-        const willPostTransaction = {
-          amount: target.amount,
-          targets: [target.target],
-          tags: request.tags,
-          group: request.group?.id ?? null,
-          request: request.id
-        }
-        return createTransactionUsecase(willPostTransaction)
-      })
+    const willPostTransaction = {
+      amount: target.amount,
+      targets: [target.target],
+      tags: request.tags,
+      group: request.group?.id ?? null,
+      request: request.id
+    }
+    let transactionId
     try {
-      await Promise.all(promises)
+      transactionId = await createTransactionUsecase(willPostTransaction)
       toast.success('入出金記録を作成しました')
     } catch {
       toast.error('入出金記録の作成に失敗しました')
     }
     isSending.value = false
-    router.push('/transactions')
+    router.push(`/transactions/${transactionId}`)
   }
 
   return {

From 2140e669a7f0fe7c112ebe16fa8b87d025f148ff Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 13:04:52 +0900
Subject: [PATCH 13/28] =?UTF-8?q?=E7=B7=A8=E9=9B=86=E3=82=92=E7=A2=BA?=
 =?UTF-8?q?=E5=AE=9A=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requestDetail/RequestTarget.vue           |  1 -
 .../requestDetail/RequestTargets.vue          | 29 ++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/requestDetail/RequestTarget.vue b/src/components/requestDetail/RequestTarget.vue
index 78631ade..b23ceae4 100644
--- a/src/components/requestDetail/RequestTarget.vue
+++ b/src/components/requestDetail/RequestTarget.vue
@@ -90,4 +90,3 @@ const handleRemoveTarget = () => {
     </div>
   </div>
 </template>
-RequestTarget,RequestTarget,
diff --git a/src/components/requestDetail/RequestTargets.vue b/src/components/requestDetail/RequestTargets.vue
index d39b8cbb..9c8d0b16 100644
--- a/src/components/requestDetail/RequestTargets.vue
+++ b/src/components/requestDetail/RequestTargets.vue
@@ -8,6 +8,8 @@ import EditButton from '/@/components/shared/EditButton.vue'
 import { ref } from 'vue'
 import RequestTarget from '/@/components/requestDetail/RequestTarget.vue'
 import type { RequestTargetDetail } from '/@/features/requestTarget/model'
+import SimpleButton from '/@/components/shared/SimpleButton.vue'
+import { editRequestUsecase } from '/@/features/request/usecase'
 
 const userStore = useUserStore()
 const requestDetailStore = useRequestDetailStore()
@@ -20,18 +22,37 @@ const hasAuthority = isRequestCreator(me.value)
 const isEditMode = ref(false)
 const editedTargets = ref<RequestTargetDetail[]>(request.value?.targets ?? [])
 const toggleEditTargets = () => {
+  editedTargets.value = request.value?.targets ?? []
   isEditMode.value = !isEditMode.value
 }
+
+const handleUpdateTargets = async () => {
+  if (!request.value) return
+  await editRequestUsecase(request.value.id, {
+    ...request.value,
+    group: request.value.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+    targets: editedTargets.value
+  })
+  isEditMode.value = false
+}
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
     <div class="flex items-center justify-between">
       <div class="text-sm font-bold">払い戻し対象者</div>
-      <EditButton
-        v-if="hasAuthority"
-        :is-edit-mode="isEditMode"
-        @click="toggleEditTargets" />
+      <div class="flex items-center gap-2">
+        <SimpleButton
+          v-if="isEditMode"
+          padding="sm"
+          @click="handleUpdateTargets">
+          完了
+        </SimpleButton>
+        <EditButton
+          v-if="hasAuthority"
+          :is-edit-mode="isEditMode"
+          @click="toggleEditTargets" />
+      </div>
     </div>
     <div v-if="request" class="flex flex-col gap-2">
       <RequestTarget

From 6179ae9b10e78f41c73dead6ec4dd09bffa5d258 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 13:52:39 +0900
Subject: [PATCH 14/28] =?UTF-8?q?=E8=A9=B3=E7=B4=B0=E3=81=AE=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3=E3=82=92=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requestDetail/RequestContent.vue          | 77 +++++++++++++++++++
 src/components/requestDetail/RequestLogs.vue  |  6 +-
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 src/components/requestDetail/RequestContent.vue

diff --git a/src/components/requestDetail/RequestContent.vue b/src/components/requestDetail/RequestContent.vue
new file mode 100644
index 00000000..5a54a96e
--- /dev/null
+++ b/src/components/requestDetail/RequestContent.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+
+import { useUserStore } from '/@/stores/user'
+
+import { formatDateAndTime } from '/@/lib/date'
+
+import MarkdownIt from '/@/components//shared/MarkdownIt.vue'
+import UserIcon from '/@/components/shared/UserIcon.vue'
+import type { RequestDetail } from '/@/features/request/model'
+import { ref } from 'vue'
+import { editRequestUsecase } from '/@/features/request/usecase'
+import EditButton from '/@/components/shared/EditButton.vue'
+import MarkdownTextarea from '/@/components/shared/MarkdownTextarea.vue'
+import SimpleButton from '/@/components/shared/SimpleButton.vue'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
+
+const formattedDateAndTime = formatDateAndTime(props.request.createdAt)
+
+const userStore = useUserStore()
+const { userMap } = storeToRefs(userStore)
+
+const isEditMode = ref(false)
+const editedContent = ref(props.request.content)
+const toggleEditContent = () => {
+  if (isEditMode.value) {
+    editedContent.value = props.request.content
+  }
+  isEditMode.value = !isEditMode.value
+}
+const handleUpdateContent = async () => {
+  if (!props.request) return
+  await editRequestUsecase(props.request.id, {
+    ...props.request,
+    group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+    content: editedContent.value
+  })
+  isEditMode.value = false
+}
+</script>
+
+<template>
+  <div class="w-full flex flex-col gap-3">
+    <div class="flex w-full items-center">
+      <div class="flex items-center gap-4 flex-1">
+        <UserIcon class="w-12" :name="userMap[request.createdBy]" />
+        <div>
+          <span class="font-bold">{{ userMap[request.createdBy] }}</span>
+          がこの申請を作成しました
+        </div>
+      </div>
+      <time class="text-gray-400" :datetime="request.createdAt.toISO() ?? ''">
+        {{ formattedDateAndTime }}
+      </time>
+    </div>
+    <div class="ml-15 flex items-start gap-2">
+      <MarkdownIt
+        v-if="!isEditMode"
+        class="border border-zinc-300 px-4 py-3 rounded-lg flex-1"
+        :text="request.content" />
+      <MarkdownTextarea
+        v-else
+        v-model="editedContent"
+        auto-focus
+        class="flex-1" />
+      <EditButton :is-edit-mode="isEditMode" @click="toggleEditContent" />
+    </div>
+    <div class="flex justify-end">
+      <SimpleButton v-if="isEditMode" padding="sm" @click="handleUpdateContent">
+        完了
+      </SimpleButton>
+    </div>
+  </div>
+</template>
diff --git a/src/components/requestDetail/RequestLogs.vue b/src/components/requestDetail/RequestLogs.vue
index b2718a17..27134b86 100644
--- a/src/components/requestDetail/RequestLogs.vue
+++ b/src/components/requestDetail/RequestLogs.vue
@@ -10,6 +10,7 @@ import type { RequestStatusDetail } from '/@/features/requestStatus/model'
 import CommentLog from './CommentLog.vue'
 import StatusChangeLog from './StatusChangeLog.vue'
 import NewComment from './NewComment.vue'
+import RequestContent from '/@/components/requestDetail/RequestContent.vue'
 
 type CommentWithType = RequestComment & { type: 'comment' }
 type StatusWithType = RequestStatusDetail & { type: 'statusChange' }
@@ -41,8 +42,11 @@ const logs = computed((): Log[] => {
 <template>
   <div v-if="request">
     <ul>
+      <li class="vertical-bar">
+        <RequestContent :request="request" />
+      </li>
       <li
-        v-for="(log, i) in logs"
+        v-for="(log, i) in logs.slice(1)"
         :key="log.createdAt.toISO() ?? i"
         class="vertical-bar">
         <CommentLog v-if="log.type === 'comment'" :comment="log" />

From ab2d8af6ab96cf53965611ff72c361e497719ff3 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 14:00:10 +0900
Subject: [PATCH 15/28] =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E5=85=A8?=
 =?UTF-8?q?=E4=BD=93=E3=81=ABpb=E3=81=A4=E3=81=91=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/RequestDetailPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/RequestDetailPage.vue b/src/pages/RequestDetailPage.vue
index 7459e935..de4a7eb4 100644
--- a/src/pages/RequestDetailPage.vue
+++ b/src/pages/RequestDetailPage.vue
@@ -52,7 +52,7 @@ onMounted(() => {
 <template>
   <div
     v-if="request !== undefined"
-    class="mx-auto w-4/5 pt-5 flex flex-col gap-5">
+    class="mx-auto w-4/5 pt-5 pb-20 flex flex-col gap-5">
     <RequestHeader :request="request" />
     <div class="h-0.25 bg-[#e5e7eb]" />
     <div class="flex justify-between gap-20">

From e832668ec3e623e069c8161c0bb236c3f71feaf8 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 15:25:48 +0900
Subject: [PATCH 16/28] =?UTF-8?q?=E7=8A=B6=E6=85=8B=E5=A4=89=E6=9B=B4?=
 =?UTF-8?q?=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/StatusChangeModal.vue    |  2 +-
 .../requestDetail/RequestHeader.vue           | 18 +++++-
 src/components/shared/FloatingMenu.vue        | 62 +++++++++++++++++++
 src/features/requestStatus/composables.ts     | 40 ++++++++++++
 4 files changed, 120 insertions(+), 2 deletions(-)
 create mode 100644 src/components/shared/FloatingMenu.vue
 create mode 100644 src/features/requestStatus/composables.ts

diff --git a/src/components/modal/StatusChangeModal.vue b/src/components/modal/StatusChangeModal.vue
index 3edf9bc0..06f88835 100644
--- a/src/components/modal/StatusChangeModal.vue
+++ b/src/components/modal/StatusChangeModal.vue
@@ -27,7 +27,7 @@ const { request } = storeToRefs(requestDetailStore)
 
 const comment = ref('')
 
-async function putStatus(nextStatus: RequestStatus, comment: string) {
+const putStatus = async (nextStatus: RequestStatus, comment: string) => {
   try {
     if (request.value === undefined) {
       throw new Error('request is undefined')
diff --git a/src/components/requestDetail/RequestHeader.vue b/src/components/requestDetail/RequestHeader.vue
index e717c7d6..2c880648 100644
--- a/src/components/requestDetail/RequestHeader.vue
+++ b/src/components/requestDetail/RequestHeader.vue
@@ -6,6 +6,8 @@ import type { RequestDetail } from '/@/features/request/model'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import InputText from '/@/components/shared/InputText.vue'
 import { editRequestUsecase } from '/@/features/request/usecase'
+import { useStatusOptions } from '/@/features/requestStatus/composables'
+import FloatingMenu from '/@/components/shared/FloatingMenu.vue'
 
 const props = defineProps<{
   request: RequestDetail
@@ -28,6 +30,9 @@ const handleUpdateTitle = async () => {
   })
   isEditMode.value = false
 }
+
+const showMenu = ref(false)
+const { statusOptions } = useStatusOptions(props.request)
 </script>
 
 <template>
@@ -43,7 +48,18 @@ const handleUpdateTitle = async () => {
       </SimpleButton>
     </div>
     <div class="flex items-center justify-between">
-      <StatusChip has-text :status="request.status" />
+      <div class="relative">
+        <StatusChip
+          has-text
+          :status="request.status"
+          @click.stop="showMenu = true" />
+        <FloatingMenu
+          v-if="showMenu"
+          class="absolute top-12 left-0 w-40"
+          :current-value="request.status"
+          :options="statusOptions"
+          @close-menu="showMenu = false" />
+      </div>
       <div class="text-3xl font-bold">{{ totalAmount }}円</div>
     </div>
   </div>
diff --git a/src/components/shared/FloatingMenu.vue b/src/components/shared/FloatingMenu.vue
new file mode 100644
index 00000000..0d8417bb
--- /dev/null
+++ b/src/components/shared/FloatingMenu.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { RequestStatus } from '/@/features/requestStatus/model'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useModal } from '/@/components/modal/composables/useModal'
+import ModalWrapper from '/@/components/modal/ModalWrapper.vue'
+import StatusChangeModal from '/@/components/modal/StatusChangeModal.vue'
+
+defineProps<{
+  options: { key: string; value: RequestStatus }[]
+  currentValue: RequestStatus
+}>()
+
+const emit = defineEmits<{
+  (e: 'closeMenu'): void
+}>()
+
+const handleSelectOption = (status: RequestStatus) => {
+  // TODO: emitして一般化
+  nextStatus.value = status
+  openModal()
+}
+
+const containerRef = ref<HTMLDivElement | null>(null)
+
+const nextStatus = ref<RequestStatus>()
+const { shouldShowModal, openModal, closeModal } = useModal()
+
+const callback = () => {
+  emit('closeMenu')
+}
+
+onMounted(() => {
+  window.addEventListener('click', callback)
+})
+onUnmounted(() => {
+  window.removeEventListener('click', callback)
+})
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="bg-white rounded-md p-2 flex flex-col gap-2 border"
+    @click.stop="">
+    <div
+      v-for="option in options"
+      :key="option.value"
+      class="hover:bg-gray-200 rounded p-1">
+      <button
+        class="w-full h-full text-left"
+        @click="handleSelectOption(option.value)">
+        {{ option.key }}
+      </button>
+    </div>
+    <ModalWrapper v-if="shouldShowModal" @close-modal="closeModal">
+      <StatusChangeModal
+        v-if="nextStatus"
+        :next-status="nextStatus"
+        @close-modal="closeModal" />
+    </ModalWrapper>
+  </div>
+</template>
diff --git a/src/features/requestStatus/composables.ts b/src/features/requestStatus/composables.ts
new file mode 100644
index 00000000..f469e514
--- /dev/null
+++ b/src/features/requestStatus/composables.ts
@@ -0,0 +1,40 @@
+import type { RequestStatus } from '/@/features/requestStatus/model'
+
+import { storeToRefs } from 'pinia'
+import { useRequestDetailStore } from '/@/stores/requestDetail'
+import { useUserStore } from '/@/stores/user'
+import type { RequestDetail } from '/@/features/request/model'
+import { computed } from 'vue'
+
+export const useStatusOptions = (request: RequestDetail) => {
+  const userStore = useUserStore()
+  const requestDetailStore = useRequestDetailStore()
+  const { isRequestCreator } = requestDetailStore
+
+  const { me, isAdmin } = storeToRefs(userStore)
+  const hasAuthority = isRequestCreator(me.value)
+
+  const showToSubmitted =
+    (hasAuthority && request.status === 'fix_required') ||
+    (isAdmin.value &&
+      (request.status === 'fix_required' || request.status === 'accepted'))
+  const showToRequired = isAdmin.value && request.status === 'submitted'
+  const showToAccepted = isAdmin.value && request.status === 'submitted'
+  const showToRejected = isAdmin.value && request.status === 'submitted'
+
+  const statusOptions = computed<
+    { value: RequestStatus; key: string; show: boolean }[]
+  >(() => [
+    { value: 'submitted', key: '承認待ちにする', show: showToSubmitted }, //TODO: 表示するべきか確認
+    { value: 'rejected', key: '却下する', show: showToRejected },
+    { value: 'fix_required', key: '要修正にする', show: showToRequired },
+    { value: 'accepted', key: '承認する', show: showToAccepted }
+  ])
+  const showStatusOptions = computed(() =>
+    statusOptions.value
+      .filter(option => option.show)
+      .map(option => ({ value: option.value, key: option.key }))
+  )
+
+  return { statusOptions: showStatusOptions.value }
+}

From 7037cdf812f584f357a165839ba3585cbfb69e0a Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 15:31:59 +0900
Subject: [PATCH 17/28] =?UTF-8?q?statuschip=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/RequestHeader.vue |  1 +
 src/components/shared/StatusChip.vue           | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/requestDetail/RequestHeader.vue b/src/components/requestDetail/RequestHeader.vue
index 2c880648..8f30a9d8 100644
--- a/src/components/requestDetail/RequestHeader.vue
+++ b/src/components/requestDetail/RequestHeader.vue
@@ -50,6 +50,7 @@ const { statusOptions } = useStatusOptions(props.request)
     <div class="flex items-center justify-between">
       <div class="relative">
         <StatusChip
+          has-menu
           has-text
           :status="request.status"
           @click.stop="showMenu = true" />
diff --git a/src/components/shared/StatusChip.vue b/src/components/shared/StatusChip.vue
index 1360810a..9e2d19bd 100644
--- a/src/components/shared/StatusChip.vue
+++ b/src/components/shared/StatusChip.vue
@@ -4,7 +4,8 @@ import {
   CloudArrowUpIcon,
   ExclamationTriangleIcon,
   XCircleIcon,
-  CheckCircleIcon
+  CheckCircleIcon,
+  ChevronDownIcon
 } from '@heroicons/vue/24/solid'
 import { computed } from 'vue'
 
@@ -13,10 +14,12 @@ import type { RequestStatus } from '/@/features/requestStatus/model'
 interface Props {
   status: RequestStatus
   hasText?: boolean
+  hasMenu?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  hasText: false
+  hasText: false,
+  hasMenu: false
 })
 
 const statusToJpn = computed(() => (status: RequestStatus) => {
@@ -58,7 +61,7 @@ const backgroundColor = computed(() => (status: RequestStatus) => {
   <div
     :class="`inline flex items-center rounded-3xl px-3 py-2 gap-2 text-white ${backgroundColor(
       status
-    )}`"
+    )}${hasMenu ? ' cursor-pointer' : ''}`"
     :title="statusToJpn(status)">
     <CheckCircleIcon v-if="status === 'accepted'" class="w-6" />
     <ExclamationTriangleIcon v-else-if="status === 'submitted'" class="w-6" />
@@ -69,5 +72,8 @@ const backgroundColor = computed(() => (status: RequestStatus) => {
     <span v-if="props.hasText">
       {{ statusToJpn(status) }}
     </span>
+    <div v-if="hasMenu">
+      <ChevronDownIcon class="w-4" />
+    </div>
   </div>
 </template>

From 0a4b82b4f50a8f7a4acadf77a618b32ad76a5846 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 15:39:01 +0900
Subject: [PATCH 18/28] =?UTF-8?q?=E3=83=AA=E3=83=95=E3=82=A1=E3=82=AF?=
 =?UTF-8?q?=E3=82=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requestDetail/RequestHeader.vue           | 21 +-------
 .../requestDetail/RequestStatusChange.vue     | 50 +++++++++++++++++++
 src/components/shared/FloatingMenu.vue        | 26 +++-------
 3 files changed, 58 insertions(+), 39 deletions(-)
 create mode 100644 src/components/requestDetail/RequestStatusChange.vue

diff --git a/src/components/requestDetail/RequestHeader.vue b/src/components/requestDetail/RequestHeader.vue
index 8f30a9d8..fc6fea16 100644
--- a/src/components/requestDetail/RequestHeader.vue
+++ b/src/components/requestDetail/RequestHeader.vue
@@ -1,13 +1,11 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 
-import StatusChip from '/@/components/shared/StatusChip.vue'
 import type { RequestDetail } from '/@/features/request/model'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import InputText from '/@/components/shared/InputText.vue'
 import { editRequestUsecase } from '/@/features/request/usecase'
-import { useStatusOptions } from '/@/features/requestStatus/composables'
-import FloatingMenu from '/@/components/shared/FloatingMenu.vue'
+import RequestStatusChange from '/@/components/requestDetail/RequestStatusChange.vue'
 
 const props = defineProps<{
   request: RequestDetail
@@ -30,9 +28,6 @@ const handleUpdateTitle = async () => {
   })
   isEditMode.value = false
 }
-
-const showMenu = ref(false)
-const { statusOptions } = useStatusOptions(props.request)
 </script>
 
 <template>
@@ -48,19 +43,7 @@ const { statusOptions } = useStatusOptions(props.request)
       </SimpleButton>
     </div>
     <div class="flex items-center justify-between">
-      <div class="relative">
-        <StatusChip
-          has-menu
-          has-text
-          :status="request.status"
-          @click.stop="showMenu = true" />
-        <FloatingMenu
-          v-if="showMenu"
-          class="absolute top-12 left-0 w-40"
-          :current-value="request.status"
-          :options="statusOptions"
-          @close-menu="showMenu = false" />
-      </div>
+      <RequestStatusChange :request="request" />
       <div class="text-3xl font-bold">{{ totalAmount }}円</div>
     </div>
   </div>
diff --git a/src/components/requestDetail/RequestStatusChange.vue b/src/components/requestDetail/RequestStatusChange.vue
new file mode 100644
index 00000000..46faa757
--- /dev/null
+++ b/src/components/requestDetail/RequestStatusChange.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import StatusChip from '/@/components/shared/StatusChip.vue'
+import type { RequestDetail } from '/@/features/request/model'
+import { useStatusOptions } from '/@/features/requestStatus/composables'
+import FloatingMenu from '/@/components/shared/FloatingMenu.vue'
+import { useModal } from '/@/components/modal/composables/useModal'
+import type { RequestStatus } from '/@/features/requestStatus/model'
+import ModalWrapper from '/@/components/modal/ModalWrapper.vue'
+import StatusChangeModal from '/@/components/modal/StatusChangeModal.vue'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
+
+const handleSelectOption = (status: RequestStatus) => {
+  nextStatus.value = status
+  openModal()
+}
+
+const nextStatus = ref<RequestStatus>()
+const { shouldShowModal, openModal, closeModal } = useModal()
+
+const showMenu = ref(false)
+const { statusOptions } = useStatusOptions(props.request)
+</script>
+
+<template>
+  <div class="relative">
+    <StatusChip
+      has-menu
+      has-text
+      :status="request.status"
+      @click.stop="showMenu = true" />
+    <FloatingMenu
+      v-if="showMenu"
+      class="absolute top-12 left-0 w-40"
+      :current-value="request.status"
+      :options="statusOptions"
+      @close-menu="showMenu = false"
+      @select-option="handleSelectOption" />
+    <ModalWrapper v-if="shouldShowModal" @close-modal="closeModal">
+      <StatusChangeModal
+        v-if="nextStatus"
+        :next-status="nextStatus"
+        @close-modal="closeModal" />
+    </ModalWrapper>
+  </div>
+</template>
diff --git a/src/components/shared/FloatingMenu.vue b/src/components/shared/FloatingMenu.vue
index 0d8417bb..bbc20b7c 100644
--- a/src/components/shared/FloatingMenu.vue
+++ b/src/components/shared/FloatingMenu.vue
@@ -1,30 +1,22 @@
-<script setup lang="ts">
-import type { RequestStatus } from '/@/features/requestStatus/model'
+<script setup lang="ts" generic="T extends string">
 import { onMounted, onUnmounted, ref } from 'vue'
-import { useModal } from '/@/components/modal/composables/useModal'
-import ModalWrapper from '/@/components/modal/ModalWrapper.vue'
-import StatusChangeModal from '/@/components/modal/StatusChangeModal.vue'
 
 defineProps<{
-  options: { key: string; value: RequestStatus }[]
-  currentValue: RequestStatus
+  options: { key: string; value: T }[]
+  currentValue: T
 }>()
 
 const emit = defineEmits<{
   (e: 'closeMenu'): void
+  (e: 'selectOption', value: T): void
 }>()
 
-const handleSelectOption = (status: RequestStatus) => {
-  // TODO: emitして一般化
-  nextStatus.value = status
-  openModal()
+const handleSelectOption = (value: T) => {
+  emit('selectOption', value)
 }
 
 const containerRef = ref<HTMLDivElement | null>(null)
 
-const nextStatus = ref<RequestStatus>()
-const { shouldShowModal, openModal, closeModal } = useModal()
-
 const callback = () => {
   emit('closeMenu')
 }
@@ -52,11 +44,5 @@ onUnmounted(() => {
         {{ option.key }}
       </button>
     </div>
-    <ModalWrapper v-if="shouldShowModal" @close-modal="closeModal">
-      <StatusChangeModal
-        v-if="nextStatus"
-        :next-status="nextStatus"
-        @close-modal="closeModal" />
-    </ModalWrapper>
   </div>
 </template>

From bce6d5333a00079735106aa832c431d1f03c267d Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 15:52:44 +0900
Subject: [PATCH 19/28] =?UTF-8?q?title=E3=82=82=E5=88=86=E5=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../requestDetail/RequestHeader.vue           | 31 ++------------
 src/components/requestDetail/RequestTitle.vue | 41 +++++++++++++++++++
 2 files changed, 44 insertions(+), 28 deletions(-)
 create mode 100644 src/components/requestDetail/RequestTitle.vue

diff --git a/src/components/requestDetail/RequestHeader.vue b/src/components/requestDetail/RequestHeader.vue
index fc6fea16..b4d98089 100644
--- a/src/components/requestDetail/RequestHeader.vue
+++ b/src/components/requestDetail/RequestHeader.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 import type { RequestDetail } from '/@/features/request/model'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import InputText from '/@/components/shared/InputText.vue'
-import { editRequestUsecase } from '/@/features/request/usecase'
 import RequestStatusChange from '/@/components/requestDetail/RequestStatusChange.vue'
+import RequestTitle from '/@/components/requestDetail/RequestTitle.vue'
 
 const props = defineProps<{
   request: RequestDetail
@@ -14,34 +12,11 @@ const props = defineProps<{
 const totalAmount = computed(() =>
   props.request.targets.reduce((a, target) => a + target.amount, 0)
 )
-
-const isEditMode = ref(false)
-const editedTitle = ref(props.request.title)
-const toggleEditTitle = () => {
-  isEditMode.value = !isEditMode.value
-}
-const handleUpdateTitle = async () => {
-  await editRequestUsecase(props.request.id, {
-    ...props.request,
-    group: props.request.group?.id ?? null,
-    title: editedTitle.value
-  })
-  isEditMode.value = false
-}
 </script>
 
 <template>
   <div class="flex flex-col gap-4">
-    <div class="flex gap-2">
-      <h1 v-if="!isEditMode" class="flex-1 text-2xl">{{ request.title }}</h1>
-      <InputText v-else v-model="editedTitle" class="flex-1" />
-      <SimpleButton v-if="!isEditMode" padding="sm" @click="toggleEditTitle">
-        編集
-      </SimpleButton>
-      <SimpleButton v-else padding="sm" @click="handleUpdateTitle">
-        完了
-      </SimpleButton>
-    </div>
+    <RequestTitle :request="request" />
     <div class="flex items-center justify-between">
       <RequestStatusChange :request="request" />
       <div class="text-3xl font-bold">{{ totalAmount }}円</div>
diff --git a/src/components/requestDetail/RequestTitle.vue b/src/components/requestDetail/RequestTitle.vue
new file mode 100644
index 00000000..57b7f3ac
--- /dev/null
+++ b/src/components/requestDetail/RequestTitle.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import type { RequestDetail } from '/@/features/request/model'
+import SimpleButton from '/@/components/shared/SimpleButton.vue'
+import InputText from '/@/components/shared/InputText.vue'
+import { editRequestUsecase } from '/@/features/request/usecase'
+import EditButton from '/@/components/shared/EditButton.vue'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
+
+const isEditMode = ref(false)
+const editedTitle = ref(props.request.title)
+const toggleEditTitle = () => {
+  if (isEditMode.value) {
+    editedTitle.value = props.request.title
+  }
+  isEditMode.value = !isEditMode.value
+}
+const handleUpdateTitle = async () => {
+  await editRequestUsecase(props.request.id, {
+    ...props.request,
+    group: props.request.group?.id ?? null,
+    title: editedTitle.value
+  })
+  isEditMode.value = false
+}
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <h1 v-if="!isEditMode" class="text-2xl">{{ request.title }}</h1>
+    <InputText v-else v-model="editedTitle" auto-focus class="flex-1" />
+    <SimpleButton v-if="isEditMode" padding="sm" @click="handleUpdateTitle">
+      完了
+    </SimpleButton>
+    <EditButton :is-edit-mode="isEditMode" @click="toggleEditTitle" />
+  </div>
+</template>

From 721f671d42406bd9f7c7bac5b691899a1923fbcb Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 16:15:51 +0900
Subject: [PATCH 20/28] =?UTF-8?q?request=E3=82=92undefined=E3=81=A7?=
 =?UTF-8?q?=E5=8F=96=E3=82=89=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=E3=83=AA=E3=83=95=E3=82=A1=E3=82=AF=E3=82=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/NewComment.vue   | 13 ++--
 src/components/requestDetail/RequestGroup.vue | 15 ++--
 src/components/requestDetail/RequestLogs.vue  | 18 ++---
 .../requestDetail/RequestSidebar.vue          | 11 ++-
 src/components/requestDetail/RequestTags.vue  | 23 +++---
 .../requestDetail/RequestTargets.vue          | 17 ++--
 .../requestDetail/StatusChangeButtons.vue     | 77 -------------------
 .../requestDetail/ToTransactionButtons.vue    | 36 ---------
 src/features/request/usecase.ts               |  3 +-
 src/pages/RequestDetailPage.vue               |  9 +--
 src/stores/requestDetail.ts                   | 17 +++-
 11 files changed, 70 insertions(+), 169 deletions(-)
 delete mode 100644 src/components/requestDetail/StatusChangeButtons.vue
 delete mode 100644 src/components/requestDetail/ToTransactionButtons.vue

diff --git a/src/components/requestDetail/NewComment.vue b/src/components/requestDetail/NewComment.vue
index 6938bca2..2347b1fa 100644
--- a/src/components/requestDetail/NewComment.vue
+++ b/src/components/requestDetail/NewComment.vue
@@ -1,15 +1,14 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-
 import { useNewComment } from '/@/components/requestDetail/composables/useNewComment'
 import MarkdownTextarea from '/@/components/shared/MarkdownTextarea.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
+import type { RequestDetail } from '/@/features/request/model'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
 
-const requestDetailStore = useRequestDetailStore()
-const { request } = storeToRefs(requestDetailStore)
-const { comment, isSending, submit } = useNewComment(request.value?.id ?? '')
+const { comment, isSending, submit } = useNewComment(props.request.id)
 </script>
 
 <template>
diff --git a/src/components/requestDetail/RequestGroup.vue b/src/components/requestDetail/RequestGroup.vue
index 8e01c2c0..1c402304 100644
--- a/src/components/requestDetail/RequestGroup.vue
+++ b/src/components/requestDetail/RequestGroup.vue
@@ -9,22 +9,26 @@ import { computed, ref } from 'vue'
 import InputSelectSingle from '/@/components/shared/InputSelectSingle.vue'
 import { useGroupStore } from '/@/stores/group'
 import { editRequestUsecase } from '/@/features/request/usecase'
+import type { RequestDetail } from '/@/features/request/model'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
 
 const userStore = useUserStore()
 const requestDetailStore = useRequestDetailStore()
 const groupStore = useGroupStore()
 const { isRequestCreator } = requestDetailStore
-const { request } = storeToRefs(requestDetailStore)
 const { me } = storeToRefs(userStore)
 const { groupOptions } = storeToRefs(groupStore)
 
 const hasAuthority = isRequestCreator(me.value)
 
 const defaultGroup = computed(() =>
-  request.value?.group ? request.value.group.id : null
+  props.request.group ? props.request.group.id : null
 )
 const groupName = computed(() =>
-  request.value?.group ? request.value.group.name : 'なし'
+  props.request.group ? props.request.group.name : 'なし'
 )
 
 const isEditMode = ref(false)
@@ -36,9 +40,8 @@ const toggleEditGroup = () => {
   isEditMode.value = !isEditMode.value
 }
 const handleUpdateGroup = async () => {
-  if (!request.value) return
-  await editRequestUsecase(request.value.id, {
-    ...request.value,
+  await editRequestUsecase(props.request.id, {
+    ...props.request,
     group: editedGroup.value
   })
   isEditMode.value = false
diff --git a/src/components/requestDetail/RequestLogs.vue b/src/components/requestDetail/RequestLogs.vue
index 27134b86..ac3fd0ff 100644
--- a/src/components/requestDetail/RequestLogs.vue
+++ b/src/components/requestDetail/RequestLogs.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-
 import type { RequestComment } from '/@/features/requestComment/model'
 import type { RequestStatusDetail } from '/@/features/requestStatus/model'
 
@@ -11,24 +8,25 @@ import CommentLog from './CommentLog.vue'
 import StatusChangeLog from './StatusChangeLog.vue'
 import NewComment from './NewComment.vue'
 import RequestContent from '/@/components/requestDetail/RequestContent.vue'
+import type { RequestDetail } from '/@/features/request/model'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
 
 type CommentWithType = RequestComment & { type: 'comment' }
 type StatusWithType = RequestStatusDetail & { type: 'statusChange' }
 
 type Log = CommentWithType | StatusWithType
 
-const requestDetailStore = useRequestDetailStore()
-
-const { request } = storeToRefs(requestDetailStore)
-
 const logs = computed((): Log[] => {
   const comments: CommentWithType[] =
-    request.value?.comments.map(comment => ({
+    props.request.comments.map(comment => ({
       ...comment,
       type: 'comment'
     })) ?? []
   const statuses: StatusWithType[] =
-    request.value?.statuses.map(status => ({
+    props.request?.statuses.map(status => ({
       ...status,
       type: 'statusChange'
     })) ?? []
@@ -53,7 +51,7 @@ const logs = computed((): Log[] => {
         <StatusChangeLog v-else-if="log.type === 'statusChange'" :log="log" />
       </li>
     </ul>
-    <NewComment />
+    <NewComment :request="request" />
   </div>
 </template>
 
diff --git a/src/components/requestDetail/RequestSidebar.vue b/src/components/requestDetail/RequestSidebar.vue
index 9bbdb709..a7c0cb19 100644
--- a/src/components/requestDetail/RequestSidebar.vue
+++ b/src/components/requestDetail/RequestSidebar.vue
@@ -2,14 +2,19 @@
 import RequestGroup from '/@/components/requestDetail/RequestGroup.vue'
 import RequestTags from '/@/components/requestDetail/RequestTags.vue'
 import RequestTargets from '/@/components/requestDetail/RequestTargets.vue'
+import type { RequestDetail } from '/@/features/request/model'
+
+defineProps<{
+  request: RequestDetail
+}>()
 </script>
 
 <template>
   <div class="px-4 flex flex-col gap-8">
     <div class="flex flex-col gap-3">
-      <RequestGroup />
-      <RequestTags />
+      <RequestGroup :request="request" />
+      <RequestTags :request="request" />
     </div>
-    <RequestTargets />
+    <RequestTargets :request="request" />
   </div>
 </template>
diff --git a/src/components/requestDetail/RequestTags.vue b/src/components/requestDetail/RequestTags.vue
index 0b7835f1..d04d6449 100644
--- a/src/components/requestDetail/RequestTags.vue
+++ b/src/components/requestDetail/RequestTags.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
@@ -10,32 +10,31 @@ import TagsGroup from '/@/components/shared/TagsGroup.vue'
 import InputSelectTagWithCreation from '/@/components/shared/InputSelectTagWithCreation.vue'
 import type { Tag } from '/@/features/tag/model'
 import { editRequestUsecase } from '/@/features/request/usecase'
+import type { RequestDetail } from '/@/features/request/model'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
 
 const userStore = useUserStore()
 const requestDetailStore = useRequestDetailStore()
 const { isRequestCreator } = requestDetailStore
-const { request } = storeToRefs(requestDetailStore)
 const { me } = storeToRefs(userStore)
 
 const hasAuthority = isRequestCreator(me.value)
 
-const defaultTags = computed(() =>
-  request.value?.tags ? request.value.tags : []
-)
-
 const isEditMode = ref(false)
-const editedTags = ref<Tag[]>(defaultTags.value)
+const editedTags = ref<Tag[]>(props.request.tags)
 const toggleEditTags = () => {
   if (isEditMode.value) {
-    editedTags.value = defaultTags.value
+    editedTags.value = props.request.tags
   }
   isEditMode.value = !isEditMode.value
 }
 const handleUpdateTags = async () => {
-  if (!request.value) return
-  await editRequestUsecase(request.value.id, {
-    ...request.value,
-    group: request.value.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+  await editRequestUsecase(props.request.id, {
+    ...props.request,
+    group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
     tags: editedTags.value
   })
   isEditMode.value = false
diff --git a/src/components/requestDetail/RequestTargets.vue b/src/components/requestDetail/RequestTargets.vue
index 9c8d0b16..a70c441f 100644
--- a/src/components/requestDetail/RequestTargets.vue
+++ b/src/components/requestDetail/RequestTargets.vue
@@ -10,27 +10,30 @@ import RequestTarget from '/@/components/requestDetail/RequestTarget.vue'
 import type { RequestTargetDetail } from '/@/features/requestTarget/model'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import { editRequestUsecase } from '/@/features/request/usecase'
+import type { RequestDetail } from '/@/features/request/model'
+
+const props = defineProps<{
+  request: RequestDetail
+}>()
 
 const userStore = useUserStore()
 const requestDetailStore = useRequestDetailStore()
 const { isRequestCreator } = requestDetailStore
-const { request } = storeToRefs(requestDetailStore)
 const { me } = storeToRefs(userStore)
 
 const hasAuthority = isRequestCreator(me.value)
 
 const isEditMode = ref(false)
-const editedTargets = ref<RequestTargetDetail[]>(request.value?.targets ?? [])
+const editedTargets = ref<RequestTargetDetail[]>(props.request.targets)
 const toggleEditTargets = () => {
-  editedTargets.value = request.value?.targets ?? []
+  editedTargets.value = props.request.targets
   isEditMode.value = !isEditMode.value
 }
 
 const handleUpdateTargets = async () => {
-  if (!request.value) return
-  await editRequestUsecase(request.value.id, {
-    ...request.value,
-    group: request.value.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+  await editRequestUsecase(props.request.id, {
+    ...props.request,
+    group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
     targets: editedTargets.value
   })
   isEditMode.value = false
diff --git a/src/components/requestDetail/StatusChangeButtons.vue b/src/components/requestDetail/StatusChangeButtons.vue
deleted file mode 100644
index 4d041fe8..00000000
--- a/src/components/requestDetail/StatusChangeButtons.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-import { useUserStore } from '/@/stores/user'
-
-import ModalWrapper from '/@/components/modal/ModalWrapper.vue'
-import StatusChangeModal from '/@/components/modal/StatusChangeModal.vue'
-import { useModal } from '/@/components/modal/composables/useModal'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import type { RequestStatus } from '/@/features/requestStatus/model'
-
-const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isRequestCreator } = requestDetailStore
-const { me, isAdmin } = storeToRefs(userStore)
-
-const { request } = storeToRefs(requestDetailStore)
-
-const nextStatus = ref<RequestStatus>()
-const hasAuthority = isRequestCreator(me.value)
-const { shouldShowModal, openModal, closeModal } = useModal()
-
-const showToSubmitted =
-  (hasAuthority && request.value?.status === 'fix_required') ||
-  (isAdmin.value &&
-    (request.value?.status === 'fix_required' ||
-      request.value?.status === 'accepted'))
-const showToRequired = isAdmin.value && request.value?.status === 'submitted'
-const showToAccepted = isAdmin.value && request.value?.status === 'submitted'
-const showToRejected = isAdmin.value && request.value?.status === 'submitted'
-
-function handleOpenModal(status: RequestStatus) {
-  nextStatus.value = status
-  openModal()
-}
-</script>
-
-<template>
-  <div class="flex gap-4">
-    <SimpleButton
-      v-if="showToSubmitted"
-      font-size="sm"
-      padding="sm"
-      @click.stop="handleOpenModal('submitted')">
-      承認待ちにする
-    </SimpleButton>
-    <SimpleButton
-      v-if="showToRequired"
-      font-size="sm"
-      padding="sm"
-      @click.stop="handleOpenModal('fix_required')">
-      要修正にする
-    </SimpleButton>
-    <SimpleButton
-      v-if="showToAccepted"
-      font-size="sm"
-      padding="sm"
-      @click.stop="handleOpenModal('accepted')">
-      承認済みにする
-    </SimpleButton>
-    <SimpleButton
-      v-if="showToRejected"
-      font-size="sm"
-      padding="sm"
-      @click.stop="handleOpenModal('rejected')">
-      却下する
-    </SimpleButton>
-  </div>
-  <ModalWrapper v-if="shouldShowModal" @close-modal="closeModal">
-    <StatusChangeModal
-      v-if="nextStatus"
-      :next-status="nextStatus"
-      @close-modal="closeModal" />
-  </ModalWrapper>
-</template>
diff --git a/src/components/requestDetail/ToTransactionButtons.vue b/src/components/requestDetail/ToTransactionButtons.vue
deleted file mode 100644
index 4e3325e0..00000000
--- a/src/components/requestDetail/ToTransactionButtons.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { RouterLink } from 'vue-router'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-import { useUserStore } from '/@/stores/user'
-
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import { useNewTransaction } from '/@/pages/composables/useNewTransaction'
-
-const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isSending, postTransactionFromRequest } = useNewTransaction()
-
-const { request } = storeToRefs(requestDetailStore)
-const { isAdmin } = storeToRefs(userStore)
-</script>
-
-<template>
-  <div class="px-1/6 flex flex-col items-center gap-4 py-8">
-    <SimpleButton
-      v-if="isAdmin"
-      class="w-full"
-      :disabled="isSending"
-      font-size="md"
-      padding="sm"
-      @click="request && postTransactionFromRequest(request)">
-      この申請から入出金記録を作成する
-    </SimpleButton>
-    <RouterLink class="w-full" :to="`/transactions?requestID=${request?.id}`">
-      <SimpleButton class="w-full" font-size="md" padding="sm">
-        この申請の入出金記録へ移動
-      </SimpleButton>
-    </RouterLink>
-  </div>
-</template>
diff --git a/src/features/request/usecase.ts b/src/features/request/usecase.ts
index 0508701d..05f8ea24 100644
--- a/src/features/request/usecase.ts
+++ b/src/features/request/usecase.ts
@@ -25,10 +25,9 @@ export const useFetchRequestsUsecase = async () => {
 
 export const useFetchRequestUsecase = async (id: string) => {
   const repository = useRequestRepository()
-  const { request } = storeToRefs(useRequestDetailStore())
 
   try {
-    request.value = await repository.fetchRequest(id)
+    return await repository.fetchRequest(id)
   } catch {
     throw new Error('申請の取得に失敗しました')
   }
diff --git a/src/pages/RequestDetailPage.vue b/src/pages/RequestDetailPage.vue
index de4a7eb4..11dc9c18 100644
--- a/src/pages/RequestDetailPage.vue
+++ b/src/pages/RequestDetailPage.vue
@@ -4,7 +4,6 @@ import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useGroupStore } from '/@/stores/group'
-import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useTagStore } from '/@/stores/tag'
 import { useUserStore } from '/@/stores/user'
 
@@ -21,7 +20,6 @@ import RequestHeader from '/@/components/requestDetail/RequestHeader.vue'
 const route = useRoute()
 const id = toId(route.params.id)
 
-const requestDetailStore = useRequestDetailStore()
 const userStore = useUserStore()
 const groupStore = useGroupStore()
 const tagStore = useTagStore()
@@ -29,9 +27,8 @@ const { isUserFetched } = storeToRefs(userStore)
 const { isGroupFetched } = storeToRefs(groupStore)
 const { isTagFetched } = storeToRefs(tagStore)
 
-const { request } = storeToRefs(requestDetailStore)
+const request = await useFetchRequestUsecase(id)
 
-await useFetchRequestUsecase(id)
 if (!isGroupFetched.value) {
   await useFetchGroupsUsecase()
 }
@@ -56,8 +53,8 @@ onMounted(() => {
     <RequestHeader :request="request" />
     <div class="h-0.25 bg-[#e5e7eb]" />
     <div class="flex justify-between gap-20">
-      <RequestLogs class="basis-2/3" />
-      <RequestSidebar class="basis-1/3" />
+      <RequestLogs class="basis-2/3" :request="request" />
+      <RequestSidebar class="basis-1/3" :request="request" />
     </div>
   </div>
 </template>
diff --git a/src/stores/requestDetail.ts b/src/stores/requestDetail.ts
index 1c8332c0..72e6b303 100644
--- a/src/stores/requestDetail.ts
+++ b/src/stores/requestDetail.ts
@@ -4,12 +4,22 @@ import { computed, ref } from 'vue'
 import type { RequestDetail, RequestSeed } from '/@/features/request/model'
 import type { RequestTarget } from '/@/features/requestTarget/model'
 import type { User } from '/@/features/user/model'
+import { useFetchRequestUsecase } from '/@/features/request/usecase'
 
 export const useRequestDetailStore = defineStore('requestDetail', () => {
-  const request = ref<RequestDetail>()
+  const request = ref<RequestDetail | null>(null)
+
+  const useRequest = async (id: string) => {
+    if (request.value !== null) {
+      return request.value
+    }
+    const newRequest = await useFetchRequestUsecase(id)
+    request.value = newRequest
+    return newRequest
+  }
 
   const targets = computed((): RequestTarget[] => {
-    if (request.value === undefined) {
+    if (request.value === null) {
       return []
     }
     return request.value.targets.map(target => ({
@@ -29,12 +39,13 @@ export const useRequestDetailStore = defineStore('requestDetail', () => {
   })
 
   const isRequestCreator = computed(() => (user: User | undefined) => {
-    if (!user || request.value === undefined) return false
+    if (!user || request.value === null) return false
     return user.id === request.value.createdBy
   })
 
   return {
     request,
+    useRequest,
     targets,
     editMode,
     editedValue,

From cb5d594d04e35cc85eb5d7962b01bd58da8c0f92 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 16:22:34 +0900
Subject: [PATCH 21/28] =?UTF-8?q?=E7=8A=B6=E6=85=8B=E5=A4=89=E6=9B=B4?=
 =?UTF-8?q?=E3=83=A2=E3=83=BC=E3=83=80=E3=83=AB=E3=81=A1=E3=82=87=E3=81=A3?=
 =?UTF-8?q?=E3=81=A8=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/StatusChangeModal.vue    | 41 ++++++++-----------
 .../requestDetail/RequestStatusChange.vue     |  1 +
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/components/modal/StatusChangeModal.vue b/src/components/modal/StatusChangeModal.vue
index 06f88835..98ec85e0 100644
--- a/src/components/modal/StatusChangeModal.vue
+++ b/src/components/modal/StatusChangeModal.vue
@@ -1,38 +1,29 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
 
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-
 import MarkdownTextarea from '/@/components/shared/MarkdownTextarea.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import StatusChip from '/@/components/shared/StatusChip.vue'
 import { changeStatusUsecase } from '/@/features/request/usecase'
 import type { RequestStatus } from '/@/features/requestStatus/model'
+import type { RequestDetail } from '/@/features/request/model'
 
-interface Props {
+const props = defineProps<{
+  request: RequestDetail
   nextStatus: RequestStatus
-}
-
-const props = defineProps<Props>()
+}>()
 const emit = defineEmits<{
   (e: 'closeModal'): void
 }>()
 
 const toast = useToast()
-const requestDetailStore = useRequestDetailStore()
-
-const { request } = storeToRefs(requestDetailStore)
 
 const comment = ref('')
 
 const putStatus = async (nextStatus: RequestStatus, comment: string) => {
   try {
-    if (request.value === undefined) {
-      throw new Error('request is undefined')
-    }
-    await changeStatusUsecase(request.value.id, nextStatus, comment)
+    await changeStatusUsecase(props.request.id, nextStatus, comment)
     toast.success('申請の状態を変更しました')
     emit('closeModal')
   } catch (e) {
@@ -45,23 +36,25 @@ const putStatus = async (nextStatus: RequestStatus, comment: string) => {
 
 <template>
   <div
-    v-if="request"
-    class="absolute inset-0 m-auto h-3/5 w-1/2 bg-white p-4 shadow-lg">
+    class="absolute inset-0 m-auto h-3/5 w-1/2 bg-white shadow-lg flex flex-col gap-6 pt-4 px-12">
     <h1 class="text-center text-3xl">申請の状態変更</h1>
-    <div class="mx-12 mt-8 flex flex-col justify-around gap-4">
-      <div class="mb-4 flex items-center">
-        申請の状態を
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center gap-1">
+        <span>申請の状態を</span>
         <StatusChip class="mx-1" has-text :status="request.status" />
-        から
+        <span>から</span>
         <StatusChip class="mx-1" has-text :status="props.nextStatus" />
-        へ変更します
+        <span>へ変更します</span>
       </div>
-      <MarkdownTextarea v-model="comment" auto-focus placeholder="コメント" />
-      <div class="mt-4 text-center">
+      <MarkdownTextarea
+        v-model="comment"
+        auto-focus
+        placeholder="コメントを入力" />
+      <div class="flex justify-end">
         <SimpleButton
-          class="mb-4 w-60"
           font-size="xl"
           padding="sm"
+          type="success"
           @click="putStatus(nextStatus, comment)">
           申請の状態を変更する
         </SimpleButton>
diff --git a/src/components/requestDetail/RequestStatusChange.vue b/src/components/requestDetail/RequestStatusChange.vue
index 46faa757..5f28b7b0 100644
--- a/src/components/requestDetail/RequestStatusChange.vue
+++ b/src/components/requestDetail/RequestStatusChange.vue
@@ -44,6 +44,7 @@ const { statusOptions } = useStatusOptions(props.request)
       <StatusChangeModal
         v-if="nextStatus"
         :next-status="nextStatus"
+        :request="request"
         @close-modal="closeModal" />
     </ModalWrapper>
   </div>

From eced300246a0d13d046293ee80244f286d06a31f Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 29 Apr 2024 18:02:59 +0900
Subject: [PATCH 22/28] =?UTF-8?q?isRequestCreator=E7=9B=B4=E3=81=97?=
 =?UTF-8?q?=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/RequestGroup.vue |  7 ++--
 src/components/requestDetail/RequestTags.vue  |  7 ++--
 .../requestDetail/RequestTargets.vue          |  9 ++---
 src/features/request/composables.ts           | 12 ++++++
 src/features/requestStatus/composables.ts     |  9 ++---
 src/stores/requestDetail.ts                   | 37 ++-----------------
 6 files changed, 29 insertions(+), 52 deletions(-)
 create mode 100644 src/features/request/composables.ts

diff --git a/src/components/requestDetail/RequestGroup.vue b/src/components/requestDetail/RequestGroup.vue
index 1c402304..fc345424 100644
--- a/src/components/requestDetail/RequestGroup.vue
+++ b/src/components/requestDetail/RequestGroup.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 
-import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
@@ -10,19 +9,19 @@ import InputSelectSingle from '/@/components/shared/InputSelectSingle.vue'
 import { useGroupStore } from '/@/stores/group'
 import { editRequestUsecase } from '/@/features/request/usecase'
 import type { RequestDetail } from '/@/features/request/model'
+import { useRequest } from '/@/features/request/composables'
 
 const props = defineProps<{
   request: RequestDetail
 }>()
 
 const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
 const groupStore = useGroupStore()
-const { isRequestCreator } = requestDetailStore
+const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
 const { groupOptions } = storeToRefs(groupStore)
 
-const hasAuthority = isRequestCreator(me.value)
+const hasAuthority = isRequestCreator.value(me.value)
 
 const defaultGroup = computed(() =>
   props.request.group ? props.request.group.id : null
diff --git a/src/components/requestDetail/RequestTags.vue b/src/components/requestDetail/RequestTags.vue
index d04d6449..46e0422a 100644
--- a/src/components/requestDetail/RequestTags.vue
+++ b/src/components/requestDetail/RequestTags.vue
@@ -2,7 +2,6 @@
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 
-import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
@@ -11,17 +10,17 @@ import InputSelectTagWithCreation from '/@/components/shared/InputSelectTagWithC
 import type { Tag } from '/@/features/tag/model'
 import { editRequestUsecase } from '/@/features/request/usecase'
 import type { RequestDetail } from '/@/features/request/model'
+import { useRequest } from '/@/features/request/composables'
 
 const props = defineProps<{
   request: RequestDetail
 }>()
 
 const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isRequestCreator } = requestDetailStore
+const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
 
-const hasAuthority = isRequestCreator(me.value)
+const hasAuthority = isRequestCreator.value(me.value)
 
 const isEditMode = ref(false)
 const editedTags = ref<Tag[]>(props.request.tags)
diff --git a/src/components/requestDetail/RequestTargets.vue b/src/components/requestDetail/RequestTargets.vue
index a70c441f..c9f775a0 100644
--- a/src/components/requestDetail/RequestTargets.vue
+++ b/src/components/requestDetail/RequestTargets.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 
-import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 
 import EditButton from '/@/components/shared/EditButton.vue'
@@ -11,17 +10,17 @@ import type { RequestTargetDetail } from '/@/features/requestTarget/model'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import { editRequestUsecase } from '/@/features/request/usecase'
 import type { RequestDetail } from '/@/features/request/model'
+import { useRequest } from '/@/features/request/composables'
 
 const props = defineProps<{
   request: RequestDetail
 }>()
 
 const userStore = useUserStore()
-const requestDetailStore = useRequestDetailStore()
-const { isRequestCreator } = requestDetailStore
+const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
 
-const hasAuthority = isRequestCreator(me.value)
+const hasAuthority = isRequestCreator.value(me.value)
 
 const isEditMode = ref(false)
 const editedTargets = ref<RequestTargetDetail[]>(props.request.targets)
@@ -59,7 +58,7 @@ const handleUpdateTargets = async () => {
     </div>
     <div v-if="request" class="flex flex-col gap-2">
       <RequestTarget
-        v-for="(target, i) in request?.targets"
+        v-for="(target, i) in request.targets"
         :key="target.id"
         v-model:targetModel="editedTargets[i]"
         :is-edit-mode="isEditMode"
diff --git a/src/features/request/composables.ts b/src/features/request/composables.ts
new file mode 100644
index 00000000..dfae8758
--- /dev/null
+++ b/src/features/request/composables.ts
@@ -0,0 +1,12 @@
+import { computed } from 'vue'
+import type { RequestDetail } from '/@/features/request/model'
+import type { User } from '/@/features/user/model'
+
+export const useRequest = (request: RequestDetail) => {
+  const isRequestCreator = computed(() => (user: User | undefined) => {
+    if (!user) return false
+    return user.id === request.createdBy
+  })
+
+  return { isRequestCreator }
+}
diff --git a/src/features/requestStatus/composables.ts b/src/features/requestStatus/composables.ts
index f469e514..6c4e5e82 100644
--- a/src/features/requestStatus/composables.ts
+++ b/src/features/requestStatus/composables.ts
@@ -1,18 +1,17 @@
 import type { RequestStatus } from '/@/features/requestStatus/model'
 
 import { storeToRefs } from 'pinia'
-import { useRequestDetailStore } from '/@/stores/requestDetail'
 import { useUserStore } from '/@/stores/user'
 import type { RequestDetail } from '/@/features/request/model'
 import { computed } from 'vue'
+import { useRequest } from '/@/features/request/composables'
 
 export const useStatusOptions = (request: RequestDetail) => {
   const userStore = useUserStore()
-  const requestDetailStore = useRequestDetailStore()
-  const { isRequestCreator } = requestDetailStore
+  const { isRequestCreator } = useRequest(request)
 
   const { me, isAdmin } = storeToRefs(userStore)
-  const hasAuthority = isRequestCreator(me.value)
+  const hasAuthority = isRequestCreator.value(me.value)
 
   const showToSubmitted =
     (hasAuthority && request.status === 'fix_required') ||
@@ -36,5 +35,5 @@ export const useStatusOptions = (request: RequestDetail) => {
       .map(option => ({ value: option.value, key: option.key }))
   )
 
-  return { statusOptions: showStatusOptions.value }
+  return { statusOptions: showStatusOptions }
 }
diff --git a/src/stores/requestDetail.ts b/src/stores/requestDetail.ts
index 72e6b303..33efabc4 100644
--- a/src/stores/requestDetail.ts
+++ b/src/stores/requestDetail.ts
@@ -1,9 +1,7 @@
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
-import type { RequestDetail, RequestSeed } from '/@/features/request/model'
-import type { RequestTarget } from '/@/features/requestTarget/model'
-import type { User } from '/@/features/user/model'
+import type { RequestDetail } from '/@/features/request/model'
 import { useFetchRequestUsecase } from '/@/features/request/usecase'
 
 export const useRequestDetailStore = defineStore('requestDetail', () => {
@@ -18,37 +16,8 @@ export const useRequestDetailStore = defineStore('requestDetail', () => {
     return newRequest
   }
 
-  const targets = computed((): RequestTarget[] => {
-    if (request.value === null) {
-      return []
-    }
-    return request.value.targets.map(target => ({
-      target: target.target,
-      amount: target.amount
-    }))
-  })
-
-  const editMode = ref('')
-  const editedValue = ref<RequestSeed>({
-    createdBy: '',
-    title: '',
-    content: '',
-    targets: [],
-    tags: [],
-    group: null
-  })
-
-  const isRequestCreator = computed(() => (user: User | undefined) => {
-    if (!user || request.value === null) return false
-    return user.id === request.value.createdBy
-  })
-
   return {
     request,
-    useRequest,
-    targets,
-    editMode,
-    editedValue,
-    isRequestCreator
+    useRequest
   }
 })

From 70260773fa29bc2aad7f25f89bab3a629f66d91d Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 30 Apr 2024 23:24:47 +0900
Subject: [PATCH 23/28] =?UTF-8?q?useRequest=E4=BD=BF=E3=81=86=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/RequestDetailPage.vue           |  6 +-
 src/pages/composables/useRequestDetail.ts | 78 -----------------------
 2 files changed, 4 insertions(+), 80 deletions(-)
 delete mode 100644 src/pages/composables/useRequestDetail.ts

diff --git a/src/pages/RequestDetailPage.vue b/src/pages/RequestDetailPage.vue
index 11dc9c18..3265ea5e 100644
--- a/src/pages/RequestDetailPage.vue
+++ b/src/pages/RequestDetailPage.vue
@@ -12,10 +12,10 @@ import { toId } from '/@/lib/parseQueryParams'
 import RequestLogs from '/@/components/requestDetail/RequestLogs.vue'
 import RequestSidebar from '/@/components/requestDetail/RequestSidebar.vue'
 import { useFetchGroupsUsecase } from '/@/features/group/usecase'
-import { useFetchRequestUsecase } from '/@/features/request/usecase'
 import { useFetchTagsUsecase } from '/@/features/tag/usecase'
 import { useFetchUsersUsecase } from '/@/features/user/usecase'
 import RequestHeader from '/@/components/requestDetail/RequestHeader.vue'
+import { useRequestDetailStore } from '/@/stores/requestDetail'
 
 const route = useRoute()
 const id = toId(route.params.id)
@@ -23,11 +23,13 @@ const id = toId(route.params.id)
 const userStore = useUserStore()
 const groupStore = useGroupStore()
 const tagStore = useTagStore()
+const requestDetailStore = useRequestDetailStore()
 const { isUserFetched } = storeToRefs(userStore)
 const { isGroupFetched } = storeToRefs(groupStore)
 const { isTagFetched } = storeToRefs(tagStore)
+const { useRequest } = requestDetailStore
 
-const request = await useFetchRequestUsecase(id)
+const request = await useRequest(id)
 
 if (!isGroupFetched.value) {
   await useFetchGroupsUsecase()
diff --git a/src/pages/composables/useRequestDetail.ts b/src/pages/composables/useRequestDetail.ts
deleted file mode 100644
index 971fc239..00000000
--- a/src/pages/composables/useRequestDetail.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-import { useToast } from 'vue-toastification'
-
-import { useRequestDetailStore } from '/@/stores/requestDetail'
-
-import type { RequestSeed } from '/@/features/request/model'
-import { editRequestUsecase } from '/@/features/request/usecase'
-import type { Tag } from '/@/features/tag/model'
-import { createTagIfNotExistUsecase } from '/@/features/tag/usecase'
-
-export type EditMode =
-  | 'title'
-  | 'content'
-  | 'amount'
-  | 'group'
-  | 'tags'
-  | 'targets'
-  | ''
-
-export const useRequestDetail = () => {
-  const requestDetailStore = useRequestDetailStore()
-  const toast = useToast()
-  const { request, editedValue } = storeToRefs(requestDetailStore)
-
-  const isSending = ref(false)
-  const editMode = ref<EditMode>('')
-
-  const changeEditMode = async (kind: EditMode) => {
-    if (kind !== '') {
-      editMode.value = kind
-      return
-    }
-    if (editMode.value !== 'tags') {
-      const result = confirm(
-        '入出金記録に紐づいている申請のこの情報を変更すると、入出金記録の情報にも変更が反映されます。よろしいですか？'
-      )
-      if (!result) return
-    }
-    if (request.value !== undefined) {
-      await putRequest(request.value.id, editedValue.value)
-    } else {
-      toast.error('申請の更新に失敗しました')
-    }
-    editMode.value = ''
-  }
-
-  const putRequest = async (id: string, requestSeed: RequestSeed) => {
-    isSending.value = true
-    let tags: Tag[]
-    try {
-      tags = await createTagIfNotExistUsecase(requestSeed.tags)
-    } catch {
-      toast.error('新規タグの作成に失敗しました')
-      isSending.value = false
-      return
-    }
-    try {
-      const requestSeedWithNewTags = {
-        ...requestSeed,
-        tags
-      }
-      await editRequestUsecase(id, requestSeedWithNewTags)
-      toast.success('申請を更新しました')
-    } catch (e) {
-      if (e instanceof Error) {
-        toast.error(e.message)
-      }
-    }
-    isSending.value = false
-  }
-
-  return {
-    isSending,
-    editMode,
-    changeEditMode
-  }
-}

From 7e71cb3d50d445d380aa65b35af377bfd46df2c7 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 30 Apr 2024 23:25:10 +0900
Subject: [PATCH 24/28] =?UTF-8?q?markdowntextarea=E3=81=AE=E8=89=B2?=
 =?UTF-8?q?=E3=81=A1=E3=82=87=E3=81=A3=E3=81=A8=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/RequestLogs.vue |  2 +-
 src/components/shared/MarkdownTextarea.vue   | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/requestDetail/RequestLogs.vue b/src/components/requestDetail/RequestLogs.vue
index ac3fd0ff..f56c18f8 100644
--- a/src/components/requestDetail/RequestLogs.vue
+++ b/src/components/requestDetail/RequestLogs.vue
@@ -60,7 +60,7 @@ const logs = computed((): Log[] => {
   content: '';
   display: inline-block;
   width: 4px;
-  height: 36px;
+  height: 24px;
   background-color: #d4d4d8;
   margin-left: 70px;
   margin-top: 8px;
diff --git a/src/components/shared/MarkdownTextarea.vue b/src/components/shared/MarkdownTextarea.vue
index 8ff28c0f..2b9667ae 100644
--- a/src/components/shared/MarkdownTextarea.vue
+++ b/src/components/shared/MarkdownTextarea.vue
@@ -49,13 +49,13 @@ function changeCurrentTab(tab: TabType) {
 <template>
   <div class="flex flex-col rounded border border-gray-300">
     <div
-      class="flex items-center justify-between rounded-t bg-gray-200 px-4 pt-3">
+      class="flex items-center justify-between rounded-t bg-gray-100 px-4 pt-3">
       <div class="flex items-center">
         <button
           :class="`rounded-t py-2 px-6 ${
             currentTab === 'input'
-              ? 'bg-white border-t border-x border-gray-300'
-              : 'bg-gray-200'
+              ? 'bg-background border-t border-x border-gray-300'
+              : 'bg-gray-100'
           }`"
           @click="changeCurrentTab('input')">
           入力
@@ -63,8 +63,8 @@ function changeCurrentTab(tab: TabType) {
         <button
           :class="`rounded-t py-2 px-6 ${
             currentTab === 'preview'
-              ? 'bg-white border-t border-x border-gray-300'
-              : 'bg-gray-200'
+              ? 'bg-background border-t border-x border-gray-300'
+              : 'bg-gray-100'
           }`"
           @click="changeCurrentTab('preview')">
           プレビュー
@@ -83,13 +83,13 @@ function changeCurrentTab(tab: TabType) {
       <InputTextarea
         v-if="currentTab === 'input'"
         :auto-focus="autoFocus"
-        class="min-h-40 w-full bg-gray-200"
+        class="min-h-40 w-full"
         :model-value="modelValue"
         :placeholder="placeholder"
         @update:model-value="emit('update:modelValue', $event)" />
       <MarkdownIt
         v-if="currentTab === 'preview'"
-        class="min-h-40 w-full overflow-y-scroll rounded bg-gray-200 border border-gray-300 px-3 py-2"
+        class="min-h-40 w-full overflow-y-scroll rounded border border-gray-300 px-3 py-2"
         :text="modelValue" />
       <div class="flex justify-end pt-3">
         <slot />

From 143b03a73292854fb474a9fba0bdc12063aaaf85 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 22 May 2024 20:29:44 +0900
Subject: [PATCH 25/28] =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E3=83=8F?=
 =?UTF-8?q?=E3=83=B3=E3=83=89=E3=83=AA=E3=83=B3=E3=82=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/StatusChangeModal.vue    |  6 ++----
 .../requestDetail/RequestContent.vue          | 18 +++++++++++------
 src/components/requestDetail/RequestGroup.vue | 15 ++++++++++----
 src/components/requestDetail/RequestTags.vue  | 17 +++++++++++-----
 .../requestDetail/RequestTarget.vue           | 20 +++++++++++++++++--
 .../requestDetail/RequestTargets.vue          | 17 +++++++++++-----
 src/components/requestDetail/RequestTitle.vue | 18 ++++++++++++-----
 .../composables/useNewComment.ts              |  4 +---
 src/pages/composables/useNewTransaction.ts    |  8 +++++++-
 9 files changed, 88 insertions(+), 35 deletions(-)

diff --git a/src/components/modal/StatusChangeModal.vue b/src/components/modal/StatusChangeModal.vue
index 98ec85e0..39eb859f 100644
--- a/src/components/modal/StatusChangeModal.vue
+++ b/src/components/modal/StatusChangeModal.vue
@@ -26,10 +26,8 @@ const putStatus = async (nextStatus: RequestStatus, comment: string) => {
     await changeStatusUsecase(props.request.id, nextStatus, comment)
     toast.success('申請の状態を変更しました')
     emit('closeModal')
-  } catch (e) {
-    if (e instanceof Error) {
-      toast.error(e.message)
-    }
+  } catch {
+    toast.error('変更に失敗しました')
   }
 }
 </script>
diff --git a/src/components/requestDetail/RequestContent.vue b/src/components/requestDetail/RequestContent.vue
index 5a54a96e..902e4888 100644
--- a/src/components/requestDetail/RequestContent.vue
+++ b/src/components/requestDetail/RequestContent.vue
@@ -13,6 +13,7 @@ import { editRequestUsecase } from '/@/features/request/usecase'
 import EditButton from '/@/components/shared/EditButton.vue'
 import MarkdownTextarea from '/@/components/shared/MarkdownTextarea.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
+import { useToast } from 'vue-toastification'
 
 const props = defineProps<{
   request: RequestDetail
@@ -22,6 +23,7 @@ const formattedDateAndTime = formatDateAndTime(props.request.createdAt)
 
 const userStore = useUserStore()
 const { userMap } = storeToRefs(userStore)
+const toast = useToast()
 
 const isEditMode = ref(false)
 const editedContent = ref(props.request.content)
@@ -32,12 +34,16 @@ const toggleEditContent = () => {
   isEditMode.value = !isEditMode.value
 }
 const handleUpdateContent = async () => {
-  if (!props.request) return
-  await editRequestUsecase(props.request.id, {
-    ...props.request,
-    group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
-    content: editedContent.value
-  })
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+      content: editedContent.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
   isEditMode.value = false
 }
 </script>
diff --git a/src/components/requestDetail/RequestGroup.vue b/src/components/requestDetail/RequestGroup.vue
index fc345424..2b6730a0 100644
--- a/src/components/requestDetail/RequestGroup.vue
+++ b/src/components/requestDetail/RequestGroup.vue
@@ -10,6 +10,7 @@ import { useGroupStore } from '/@/stores/group'
 import { editRequestUsecase } from '/@/features/request/usecase'
 import type { RequestDetail } from '/@/features/request/model'
 import { useRequest } from '/@/features/request/composables'
+import { useToast } from 'vue-toastification'
 
 const props = defineProps<{
   request: RequestDetail
@@ -20,6 +21,7 @@ const groupStore = useGroupStore()
 const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
 const { groupOptions } = storeToRefs(groupStore)
+const toast = useToast()
 
 const hasAuthority = isRequestCreator.value(me.value)
 
@@ -39,10 +41,15 @@ const toggleEditGroup = () => {
   isEditMode.value = !isEditMode.value
 }
 const handleUpdateGroup = async () => {
-  await editRequestUsecase(props.request.id, {
-    ...props.request,
-    group: editedGroup.value
-  })
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: editedGroup.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
   isEditMode.value = false
 }
 </script>
diff --git a/src/components/requestDetail/RequestTags.vue b/src/components/requestDetail/RequestTags.vue
index 46e0422a..d23ca946 100644
--- a/src/components/requestDetail/RequestTags.vue
+++ b/src/components/requestDetail/RequestTags.vue
@@ -11,6 +11,7 @@ import type { Tag } from '/@/features/tag/model'
 import { editRequestUsecase } from '/@/features/request/usecase'
 import type { RequestDetail } from '/@/features/request/model'
 import { useRequest } from '/@/features/request/composables'
+import { useToast } from 'vue-toastification'
 
 const props = defineProps<{
   request: RequestDetail
@@ -19,6 +20,7 @@ const props = defineProps<{
 const userStore = useUserStore()
 const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
+const toast = useToast()
 
 const hasAuthority = isRequestCreator.value(me.value)
 
@@ -31,11 +33,16 @@ const toggleEditTags = () => {
   isEditMode.value = !isEditMode.value
 }
 const handleUpdateTags = async () => {
-  await editRequestUsecase(props.request.id, {
-    ...props.request,
-    group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
-    tags: editedTags.value
-  })
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+      tags: editedTags.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
   isEditMode.value = false
 }
 </script>
diff --git a/src/components/requestDetail/RequestTarget.vue b/src/components/requestDetail/RequestTarget.vue
index b23ceae4..633b1c03 100644
--- a/src/components/requestDetail/RequestTarget.vue
+++ b/src/components/requestDetail/RequestTarget.vue
@@ -17,6 +17,7 @@ import type { RequestDetail } from '/@/features/request/model'
 
 import { useNewTransaction } from '/@/pages/composables/useNewTransaction'
 import { computed } from 'vue'
+import { editRequestUsecase } from '/@/features/request/usecase'
 
 const props = defineProps<{
   request: RequestDetail
@@ -42,8 +43,23 @@ const targetModel = defineModel<RequestTarget>('targetModel', {
   required: true
 })
 
-const handleRemoveTarget = () => {
-  console.log('remove')
+const handleRemoveTarget = async () => {
+  const result = confirm('本当に削除しますか？')
+  if (!result) {
+    return
+  }
+
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null,
+      targets: props.request.targets.filter(
+        target => target.target !== props.target.target
+      )
+    })
+  } catch {
+    alert('削除に失敗しました')
+  }
 }
 </script>
 
diff --git a/src/components/requestDetail/RequestTargets.vue b/src/components/requestDetail/RequestTargets.vue
index c9f775a0..8fb8428e 100644
--- a/src/components/requestDetail/RequestTargets.vue
+++ b/src/components/requestDetail/RequestTargets.vue
@@ -11,6 +11,7 @@ import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import { editRequestUsecase } from '/@/features/request/usecase'
 import type { RequestDetail } from '/@/features/request/model'
 import { useRequest } from '/@/features/request/composables'
+import { useToast } from 'vue-toastification'
 
 const props = defineProps<{
   request: RequestDetail
@@ -19,6 +20,7 @@ const props = defineProps<{
 const userStore = useUserStore()
 const { isRequestCreator } = useRequest(props.request)
 const { me } = storeToRefs(userStore)
+const toast = useToast()
 
 const hasAuthority = isRequestCreator.value(me.value)
 
@@ -30,11 +32,16 @@ const toggleEditTargets = () => {
 }
 
 const handleUpdateTargets = async () => {
-  await editRequestUsecase(props.request.id, {
-    ...props.request,
-    group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
-    targets: editedTargets.value
-  })
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null, // TODO: 関係ないときでも書かないといけないので、デフォルトの値をどこかに置いておく
+      targets: editedTargets.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
   isEditMode.value = false
 }
 </script>
diff --git a/src/components/requestDetail/RequestTitle.vue b/src/components/requestDetail/RequestTitle.vue
index 57b7f3ac..801f7747 100644
--- a/src/components/requestDetail/RequestTitle.vue
+++ b/src/components/requestDetail/RequestTitle.vue
@@ -6,11 +6,14 @@ import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import InputText from '/@/components/shared/InputText.vue'
 import { editRequestUsecase } from '/@/features/request/usecase'
 import EditButton from '/@/components/shared/EditButton.vue'
+import { useToast } from 'vue-toastification'
 
 const props = defineProps<{
   request: RequestDetail
 }>()
 
+const toast = useToast()
+
 const isEditMode = ref(false)
 const editedTitle = ref(props.request.title)
 const toggleEditTitle = () => {
@@ -20,11 +23,16 @@ const toggleEditTitle = () => {
   isEditMode.value = !isEditMode.value
 }
 const handleUpdateTitle = async () => {
-  await editRequestUsecase(props.request.id, {
-    ...props.request,
-    group: props.request.group?.id ?? null,
-    title: editedTitle.value
-  })
+  try {
+    await editRequestUsecase(props.request.id, {
+      ...props.request,
+      group: props.request.group?.id ?? null,
+      title: editedTitle.value
+    })
+    toast.success('更新しました')
+  } catch {
+    toast.error('更新に失敗しました')
+  }
   isEditMode.value = false
 }
 </script>
diff --git a/src/components/requestDetail/composables/useNewComment.ts b/src/components/requestDetail/composables/useNewComment.ts
index 4b7bde53..1597789d 100644
--- a/src/components/requestDetail/composables/useNewComment.ts
+++ b/src/components/requestDetail/composables/useNewComment.ts
@@ -20,9 +20,7 @@ export const useNewComment = (requestId: string) => {
       comment.value = ''
       toast.success('コメントを送信しました')
     } catch (e) {
-      if (e instanceof Error) {
-        toast.error(e.message)
-      }
+      toast.error('送信に失敗しました')
     }
     isSending.value = false
   }
diff --git a/src/pages/composables/useNewTransaction.ts b/src/pages/composables/useNewTransaction.ts
index c29a3f8e..ed6f7bca 100644
--- a/src/pages/composables/useNewTransaction.ts
+++ b/src/pages/composables/useNewTransaction.ts
@@ -8,12 +8,16 @@ import { createTagIfNotExistUsecase } from '/@/features/tag/usecase'
 import type { TransactionCreateSeed } from '/@/features/transaction/model'
 import { createTransactionUsecase } from '/@/features/transaction/usecase'
 import type { RequestTarget } from '/@/features/requestTarget/model'
+import { storeToRefs } from 'pinia'
+import { useUserStore } from '/@/stores/user'
 
 export type MoneyDirection = 'toTraP' | 'fromTraP'
 
 export const useNewTransaction = () => {
   const toast = useToast()
   const router = useRouter()
+  const userStore = useUserStore()
+  const { userMap } = storeToRefs(userStore)
 
   const isSending = ref(false)
 
@@ -62,7 +66,9 @@ export const useNewTransaction = () => {
     target: RequestTarget
   ) => {
     const result = confirm(
-      `この申請に紐づけて@${target.target}の入出金記録を作成しますか？`
+      `この申請に紐づけて@${
+        userMap.value[target.target]
+      }の入出金記録を作成しますか？`
     )
     if (!result) return
     isSending.value = true

From fc6bd650d782c8d084f12efa8763e6bf88eaab37 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 22 May 2024 20:39:25 +0900
Subject: [PATCH 26/28] =?UTF-8?q?=E6=A8=A9=E9=99=90=E5=91=A8=E3=82=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/NewComment.vue         |  2 +-
 src/components/requestDetail/RequestContent.vue     |  9 ++++++++-
 .../requestDetail/RequestStatusChange.vue           |  2 +-
 src/components/requestDetail/RequestTarget.vue      |  4 ++--
 src/components/requestDetail/RequestTitle.vue       | 13 ++++++++++++-
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/requestDetail/NewComment.vue b/src/components/requestDetail/NewComment.vue
index 2347b1fa..b0d4bb78 100644
--- a/src/components/requestDetail/NewComment.vue
+++ b/src/components/requestDetail/NewComment.vue
@@ -17,7 +17,7 @@ const { comment, isSending, submit } = useNewComment(props.request.id)
       <SimpleButton
         :disabled="isSending"
         font-size="md"
-        padding="sm"
+        padding="md"
         type="success"
         @click="submit">
         コメントする
diff --git a/src/components/requestDetail/RequestContent.vue b/src/components/requestDetail/RequestContent.vue
index 902e4888..d38471ff 100644
--- a/src/components/requestDetail/RequestContent.vue
+++ b/src/components/requestDetail/RequestContent.vue
@@ -14,6 +14,7 @@ import EditButton from '/@/components/shared/EditButton.vue'
 import MarkdownTextarea from '/@/components/shared/MarkdownTextarea.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import { useToast } from 'vue-toastification'
+import { useRequest } from '/@/features/request/composables'
 
 const props = defineProps<{
   request: RequestDetail
@@ -24,7 +25,10 @@ const formattedDateAndTime = formatDateAndTime(props.request.createdAt)
 const userStore = useUserStore()
 const { userMap } = storeToRefs(userStore)
 const toast = useToast()
+const { isRequestCreator } = useRequest(props.request)
+const { me } = storeToRefs(userStore)
 
+const hasAuthority = isRequestCreator.value(me.value)
 const isEditMode = ref(false)
 const editedContent = ref(props.request.content)
 const toggleEditContent = () => {
@@ -72,7 +76,10 @@ const handleUpdateContent = async () => {
         v-model="editedContent"
         auto-focus
         class="flex-1" />
-      <EditButton :is-edit-mode="isEditMode" @click="toggleEditContent" />
+      <EditButton
+        v-if="hasAuthority"
+        :is-edit-mode="isEditMode"
+        @click="toggleEditContent" />
     </div>
     <div class="flex justify-end">
       <SimpleButton v-if="isEditMode" padding="sm" @click="handleUpdateContent">
diff --git a/src/components/requestDetail/RequestStatusChange.vue b/src/components/requestDetail/RequestStatusChange.vue
index 5f28b7b0..ea70998b 100644
--- a/src/components/requestDetail/RequestStatusChange.vue
+++ b/src/components/requestDetail/RequestStatusChange.vue
@@ -29,7 +29,7 @@ const { statusOptions } = useStatusOptions(props.request)
 <template>
   <div class="relative">
     <StatusChip
-      has-menu
+      :has-menu="statusOptions.length !== 0"
       has-text
       :status="request.status"
       @click.stop="showMenu = true" />
diff --git a/src/components/requestDetail/RequestTarget.vue b/src/components/requestDetail/RequestTarget.vue
index 633b1c03..ad02713c 100644
--- a/src/components/requestDetail/RequestTarget.vue
+++ b/src/components/requestDetail/RequestTarget.vue
@@ -27,7 +27,7 @@ const props = defineProps<{
 
 const { isSending, postTransactionFromRequest } = useNewTransaction()
 const userStore = useUserStore()
-const { userMap, userOptions } = storeToRefs(userStore)
+const { userMap, userOptions, isAdmin } = storeToRefs(userStore)
 
 const targets = computed(() =>
   props.request.targets.map(target => target.target)
@@ -84,7 +84,7 @@ const handleRemoveTarget = async () => {
         </RouterLink>
       </div>
       <button
-        v-else
+        v-else-if="isAdmin"
         class="text-blue-500"
         :disabled="isSending"
         @click="postTransactionFromRequest(request, target)">
diff --git a/src/components/requestDetail/RequestTitle.vue b/src/components/requestDetail/RequestTitle.vue
index 801f7747..f63994ac 100644
--- a/src/components/requestDetail/RequestTitle.vue
+++ b/src/components/requestDetail/RequestTitle.vue
@@ -7,15 +7,23 @@ import InputText from '/@/components/shared/InputText.vue'
 import { editRequestUsecase } from '/@/features/request/usecase'
 import EditButton from '/@/components/shared/EditButton.vue'
 import { useToast } from 'vue-toastification'
+import { useUserStore } from '/@/stores/user'
+import { useRequest } from '/@/features/request/composables'
+import { storeToRefs } from 'pinia'
 
 const props = defineProps<{
   request: RequestDetail
 }>()
 
+const userStore = useUserStore()
+const { isRequestCreator } = useRequest(props.request)
+const { me } = storeToRefs(userStore)
 const toast = useToast()
 
+const hasAuthority = isRequestCreator.value(me.value)
 const isEditMode = ref(false)
 const editedTitle = ref(props.request.title)
+
 const toggleEditTitle = () => {
   if (isEditMode.value) {
     editedTitle.value = props.request.title
@@ -44,6 +52,9 @@ const handleUpdateTitle = async () => {
     <SimpleButton v-if="isEditMode" padding="sm" @click="handleUpdateTitle">
       完了
     </SimpleButton>
-    <EditButton :is-edit-mode="isEditMode" @click="toggleEditTitle" />
+    <EditButton
+      v-if="hasAuthority"
+      :is-edit-mode="isEditMode"
+      @click="toggleEditTitle" />
   </div>
 </template>

From 251423fc7c531809a6db4780523fcc7cc8d0532c Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 22 May 2024 20:44:57 +0900
Subject: [PATCH 27/28] =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E3=83=8F?=
 =?UTF-8?q?=E3=83=B3=E3=83=89=E3=83=AA=E3=83=B3=E3=82=B0=E6=BC=8F=E3=82=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/RequestTargets.vue | 4 ++++
 src/components/shared/InputSelectSingle.vue     | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/requestDetail/RequestTargets.vue b/src/components/requestDetail/RequestTargets.vue
index 8fb8428e..e8e4eb5a 100644
--- a/src/components/requestDetail/RequestTargets.vue
+++ b/src/components/requestDetail/RequestTargets.vue
@@ -32,6 +32,10 @@ const toggleEditTargets = () => {
 }
 
 const handleUpdateTargets = async () => {
+  if (editedTargets.value.some(target => target.target === null)) {
+    toast.error('払い戻し対象者を選択してください')
+    return
+  }
   try {
     await editRequestUsecase(props.request.id, {
       ...props.request,
diff --git a/src/components/shared/InputSelectSingle.vue b/src/components/shared/InputSelectSingle.vue
index 8bd4ac46..474fd8c3 100644
--- a/src/components/shared/InputSelectSingle.vue
+++ b/src/components/shared/InputSelectSingle.vue
@@ -76,7 +76,7 @@ const selectValue = (selectedOption: Value) => {
 }
 const removeValue = () => {
   setTimeout(() => {
-    emit('update:modelValue', '')
+    emit('update:modelValue', null)
   }, 10)
 }
 

From 58def1bbb709c416d700a9755fb3a1ee2b8a602c Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 22 May 2024 20:46:18 +0900
Subject: [PATCH 28/28] =?UTF-8?q?hash=E3=81=AE=E5=87=A6=E7=90=86=E4=B8=80?=
 =?UTF-8?q?=E6=97=A6=E6=B6=88=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/requestDetail/CommentLog.vue | 5 -----
 src/pages/RequestDetailPage.vue             | 7 -------
 2 files changed, 12 deletions(-)

diff --git a/src/components/requestDetail/CommentLog.vue b/src/components/requestDetail/CommentLog.vue
index 9bcaabc9..c4f33e14 100644
--- a/src/components/requestDetail/CommentLog.vue
+++ b/src/components/requestDetail/CommentLog.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
 
 import { useUserStore } from '/@/stores/user'
 
@@ -19,9 +17,6 @@ const formattedDateAndTime = formatDateAndTime(props.comment.createdAt)
 
 const userStore = useUserStore()
 const { userMap } = storeToRefs(userStore)
-
-const route = useRoute()
-const hash = computed(() => route.hash.substring(1))
 </script>
 
 <template>
diff --git a/src/pages/RequestDetailPage.vue b/src/pages/RequestDetailPage.vue
index 3265ea5e..4272a663 100644
--- a/src/pages/RequestDetailPage.vue
+++ b/src/pages/RequestDetailPage.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useGroupStore } from '/@/stores/group'
@@ -40,12 +39,6 @@ if (!isUserFetched.value) {
 if (!isTagFetched.value) {
   await useFetchTagsUsecase()
 }
-
-onMounted(() => {
-  if (route.hash !== '') {
-    document.getElementById(route.hash.substring(1))?.scrollIntoView(true)
-  }
-})
 </script>
 
 <template>