💡 refactor: margin ではなく gap を使うようにする

src/components/groupDetail/GroupBudget.vue

@@ -9,8 +9,8 @@ const { group } = storeToRefs(groupDetailStore)
 </script>
 
 <template>
-  <div v-if="group" class="flex flex-col">
-    <label class="text-xl">予算</label>
-    <p class="mt-3">{{ group?.budget }} 円</p>
+  <div v-if="group" class="flex flex-col gap-3">
+    <h2 class="text-xl">予算</h2>
+    <p>{{ group?.budget }} 円</p>
   </div>
 </template>

src/components/groupDetail/GroupDescription.vue

@@ -8,9 +8,9 @@ const { group } = storeToRefs(groupDetailStore)
 </script>
 
 <template>
-  <div v-if="group">
-    <p class="text-xl">詳細</p>
-    <div class="flex w-full mt-3">
+  <div v-if="group" class="flex flex-col gap-3">
+    <h2 class="text-xl">詳細</h2>
+    <div class="flex w-full">
       <p class="min-h-32 w-full rounded border border-surface-secondary p-2">
         {{ group.description }}
       </p>

src/components/groupDetail/GroupMembers.vue

@@ -24,9 +24,9 @@ const { absentMemberOptions, isSending, addMembers, removeMember } =
 </script>
 
 <template>
-  <div v-if="group" class="relative flex flex-col justify-between">
-    <p class="text-xl">グループメンバー</p>
-    <div class="mt-3 border border-surface-secondary">
+  <div v-if="group" class="relative flex flex-col gap-3 justify-between">
+    <h2 class="text-xl">グループメンバー</h2>
+    <div class="border border-surface-secondary">
       <ul class="flex flex-col gap-2 px-4 py-3 overflow-y-auto max-h-[50dvh]">
         <li
           v-for="member in group.members"

src/components/groupDetail/GroupName.vue

@@ -5,8 +5,8 @@ import { useGroupDetailStore } from '/@/stores/groupDetail'
 import { useUserStore } from '/@/stores/user'
 
 import type { EditMode } from '/@/components/groupDetail/composables/useGroupInformation'
-import InputText from '/@/components/shared/InputText.vue'
 import EditButton from '/@/components/shared/EditButton.vue'
+import InputText from '/@/components/shared/InputText.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
 
 interface Props {

src/components/groupDetail/GroupOwners.vue

@@ -24,9 +24,9 @@ const { absentOwnerOptions, isSending, addOwners, removeOwner } =
 </script>
 
 <template>
-  <div v-if="group" class="relative flex flex-col justify-between">
-    <p class="text-xl">グループオーナー</p>
-    <div class="mt-3 border border-surface-secondary">
+  <div v-if="group" class="relative flex flex-col gap-3 justify-between">
+    <h2 class="text-xl">グループオーナー</h2>
+    <div class="border border-surface-secondary">
       <ul class="flex flex-col gap-2 px-4 py-3 overflow-y-auto max-h-[50dvh]">
         <li
           v-for="owner in group.owners"

src/components/modal/ModalWrapper.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-const emit = defineEmits<{
-  (e: 'closeModal'): void
-}>()
+const emit = defineEmits<(e: 'closeModal') => void>()
 </script>
 
 <template>

src/components/modal/StatusChangeModal.vue

@@ -5,17 +5,15 @@ import { useToast } from 'vue-toastification'
 import MarkdownTextarea from '/@/components/shared/MarkdownTextarea.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import StatusChip from '/@/components/shared/StatusChip.vue'
+import type { RequestDetail } from '/@/features/request/model'
 import { changeStatusUsecase } from '/@/features/request/usecase'
 import type { RequestStatus } from '/@/features/requestStatus/model'
-import type { RequestDetail } from '/@/features/request/model'
 
 const props = defineProps<{
   request: RequestDetail
   nextStatus: RequestStatus
 }>()
-const emit = defineEmits<{
-  (e: 'closeModal'): void
-}>()
+const emit = defineEmits<(e: 'closeModal') => void>()
 
 const toast = useToast()
 

src/components/newRequest/NewRequestFileForm.vue

@@ -12,15 +12,15 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const emit = defineEmits<{ (e: 'input', value: FileSeed[]): void }>()
+const emit = defineEmits<(e: 'input', value: FileSeed[]) => void>()
 
 const inputRef = ref()
 
 function handleFileChange(e: Event) {
   if (!(e.target instanceof HTMLInputElement) || !e.target.files) {
     return
   }
-  Array.from(e.target.files).forEach(file => {
+  for (const file of Array.from(e.target.files)) {
     const reader = new FileReader()
     reader.readAsDataURL(file)
     reader.onload = () => {
@@ -29,7 +29,7 @@ function handleFileChange(e: Event) {
         { name: file.name, src: reader.result as string, type: file.type }
       ])
     }
-  })
+  }
   if (inputRef.value) {
     inputRef.value.value = null
   }

src/components/newRequest/NewRequestTag.vue

@@ -6,7 +6,7 @@ interface Props {
   tags: Tag[]
 }
 const props = defineProps<Props>()
-const emit = defineEmits<{ (e: 'input', value: Tag[]): void }>()
+const emit = defineEmits<(e: 'input', value: Tag[]) => void>()
 </script>
 
 <template>

src/components/newRequest/NewRequestTargets.vue

@@ -15,7 +15,7 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const emit = defineEmits<{ (e: 'input', value: RequestTarget[]): void }>()
+const emit = defineEmits<(e: 'input', value: RequestTarget[]) => void>()
 
 const userStore = useUserStore()
 const { userOptions } = storeToRefs(userStore)

src/components/newTransaction/NewTransactionTarget.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-import InputText from '/@/components/shared/InputText.vue'
 import { PlusIcon, TrashIcon } from '@heroicons/vue/24/outline'
+import InputText from '/@/components/shared/InputText.vue'
+import SimpleButton from '/@/components/shared/SimpleButton.vue'
 
 interface Props {
   targets: string[]
 }
 
 const props = defineProps<Props>()
-const emit = defineEmits<{ (e: 'input', value: string[]): void }>()
+const emit = defineEmits<(e: 'input', value: string[]) => void>()
 
 function handleEditTarget(index: number, value: string) {
   emit(

src/components/requestDetail/RequestGroup.vue

@@ -57,7 +57,7 @@ const handleUpdateGroup = async () => {
 <template>
   <div class="flex flex-col gap-1">
     <div class="flex items-center justify-between">
-      <div class="text-sm font-bold">グループ</div>
+      <h2 class="text-sm font-bold">グループ</h2>
       <EditButton
         v-if="hasAuthority"
         :is-edit-mode="isEditMode"

src/components/requestDetail/RequestTags.vue

@@ -4,14 +4,14 @@ import { ref } from 'vue'
 
 import { useUserStore } from '/@/stores/user'
 
+import { useToast } from 'vue-toastification'
 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'
-import type { RequestDetail } from '/@/features/request/model'
+import TagsGroup from '/@/components/shared/TagsGroup.vue'
 import { useRequest } from '/@/features/request/composables'
-import { useToast } from 'vue-toastification'
+import type { RequestDetail } from '/@/features/request/model'
+import { editRequestUsecase } from '/@/features/request/usecase'
+import type { Tag } from '/@/features/tag/model'
 
 const props = defineProps<{
   request: RequestDetail
@@ -50,7 +50,7 @@ const handleUpdateTags = async () => {
 <template>
   <div class="flex flex-col gap-1">
     <div class="flex items-center justify-between">
-      <div class="text-sm font-bold">タグ</div>
+      <h2 class="text-sm font-bold">タグ</h2>
       <EditButton
         v-if="hasAuthority"
         :is-edit-mode="isEditMode"

src/components/requestDetail/RequestTargets.vue

@@ -3,15 +3,15 @@ import { storeToRefs } from 'pinia'
 
 import { useUserStore } from '/@/stores/user'
 
-import EditButton from '/@/components/shared/EditButton.vue'
 import { ref } from 'vue'
+import { useToast } from 'vue-toastification'
 import RequestTarget from '/@/components/requestDetail/RequestTarget.vue'
-import type { RequestTargetDetail } from '/@/features/requestTarget/model'
+import EditButton from '/@/components/shared/EditButton.vue'
 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'
+import type { RequestDetail } from '/@/features/request/model'
+import { editRequestUsecase } from '/@/features/request/usecase'
+import type { RequestTargetDetail } from '/@/features/requestTarget/model'
 
 const props = defineProps<{
   request: RequestDetail
@@ -53,7 +53,7 @@ const handleUpdateTargets = async () => {
 <template>
   <div class="flex flex-col gap-2">
     <div class="flex items-center justify-between">
-      <div class="text-sm font-bold">払い戻し対象者</div>
+      <h2 class="text-sm font-bold">払い戻し対象者</h2>
       <div class="flex items-center gap-2">
         <SimpleButton
           v-if="isEditMode"

src/components/requests/RequestItem.vue

@@ -32,11 +32,9 @@ const totalAmount = computed(
     <div class="mx-2 flex items-center justify-center">
       <StatusChip :status="request.status" />
     </div>
-    <div class="flex-grow">
+    <div class="flex-grow flex flex-col gap-2">
       <span class="text-xl">{{ request.title }}</span>
-      <div class="mt-2">
-        <TagsGroup :tags="request.tags" />
-      </div>
+      <TagsGroup :tags="request.tags" />
     </div>
     <div>
       <div class="flex gap-4">

src/components/shared/InputRadioButton.vue

@@ -11,7 +11,7 @@ const props = defineProps<Props>()
 </script>
 
 <template>
-  <div class="space-x-4">
+  <div class="flex gap-4">
     <label
       v-for="option in props.options"
       :key="option.key"

src/components/shared/InputSelectMultiple.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { ChevronDownIcon } from '@heroicons/vue/24/solid';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-
+import { ChevronDownIcon } from '@heroicons/vue/24/solid'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type ValueValue = Record<string, any> | string | null

src/components/shared/InputSelectSingle.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { ChevronDownIcon } from '@heroicons/vue/24/solid';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { ChevronDownIcon } from '@heroicons/vue/24/solid'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type ValueValue = Record<string, any> | string | null
+type ValueValue = Record<string, unknown> | string | null
 
 interface Value {
   key: string

src/components/transactionDetail/EditTransactionForm.vue

@@ -43,7 +43,7 @@ const formattedDate = computed(() => formatDate(props.transaction.createdAt))
 </script>
 
 <template>
-  <form class="mb-4 space-y-2">
+  <form class="flex flex-col gap-2">
     <div class="flex flex-col">
       <label>紐づける申請</label>
       <div class="flex gap-4">

src/components/transactionDetail/TransactionDetail.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { ArrowLongRightIcon } from '@heroicons/vue/24/outline'
 import { computed } from 'vue'
 
 import { formatDate } from '/@/lib/date'
 
+import { ArrowLongRightIcon } from '@heroicons/vue/24/outline'
 import TagsGroup from '/@/components/shared/TagsGroup.vue'
 import type { Transaction } from '/@/features/transaction/model'
 
@@ -16,13 +16,13 @@ const formattedDate = computed(() => formatDate(props.transaction.createdAt))
 </script>
 
 <template>
-  <div class="mb-4 space-y-2">
-    <div>
-      <p class="font-bold">年月日</p>
+  <div class="flex flex-col gap-6">
+    <div class="flex flex-col gap-3">
+      <h2 class="text-xl">年月日</h2>
       <p>{{ formattedDate }}</p>
     </div>
-    <div>
-      <p class="font-bold">入出金</p>
+    <div class="flex flex-col gap-3">
+      <h2 class="text-xl">入出金</h2>
       <div>
         <p>{{ Math.abs(transaction.amount) }}円</p>
         <div
@@ -35,15 +35,13 @@ const formattedDate = computed(() => formatDate(props.transaction.createdAt))
         </div>
       </div>
     </div>
-    <div>
-      <p class="font-bold">取引グループ</p>
+    <div class="flex flex-col gap-3">
+      <h2 class="text-xl">取引グループ</h2>
       <p>{{ transaction.group ? transaction.group.name : 'なし' }}</p>
     </div>
-    <div>
-      <p class="font-bold">タグ</p>
-      <div>
-        <TagsGroup :tags="transaction.tags" />
-      </div>
+    <div class="flex flex-col gap-3">
+      <h2 class="text-xl">タグ</h2>
+      <TagsGroup :tags="transaction.tags" />
     </div>
   </div>
 </template>

src/features/request/model.ts

@@ -3,8 +3,8 @@ import type { DateTime } from 'luxon'
 import type { Group } from '/@/features/group/model'
 import type { RequestComment } from '/@/features/requestComment/model'
 import type {
-  RequestStatusDetail,
-  RequestStatus
+  RequestStatus,
+  RequestStatusDetail
 } from '/@/features/requestStatus/model'
 import type {
   RequestTarget,
@@ -30,6 +30,8 @@ export interface RequestQuerySeed {
   target: string
   since: string
   until: string
+  limit: number
+  offset: number
   tags: string[]
   group: string
 }

src/features/request/repository.ts

@@ -8,8 +8,8 @@ import { convertRequestCommentFromData } from '/@/features/requestComment/conver
 import type { RequestComment } from '/@/features/requestComment/model'
 import { convertRequestStatusFromData } from '/@/features/requestStatus/converter'
 import type {
-  RequestStatusDetail,
-  RequestStatus
+  RequestStatus,
+  RequestStatusDetail
 } from '/@/features/requestStatus/model'
 
 import type {
@@ -31,6 +31,8 @@ const createRequestRepository = () => ({
       querySeed.target,
       querySeed.since,
       querySeed.until,
+      querySeed.limit,
+      querySeed.offset,
       querySeed.tags.join(','),
       querySeed.group
     )