Clap-452 QA 사항 반영 Moya 4차

src/components/api-logs/ApiLogsFilterBar.vue

@@ -25,14 +25,14 @@
 </template>
 
 <script setup lang="ts">
-import FilterDropdown from '../filters/FilterDropdown.vue'
-import FilterInput from '../filters/FilterInput.vue'
 import { API_LOGS_DIVISION_LIST } from '@/constants/admin'
-import FilterIpAddress from '../filters/FilterIpAddress.vue'
-import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
-import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
 import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
+import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
 import { useLogsParamsStore } from '@/stores/params'
+import FilterDropdown from '../filters/FilterDropdown.vue'
+import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
+import FilterInput from '../filters/FilterInput.vue'
+import FilterIpAddress from '../filters/FilterIpAddress.vue'
 
 const store = useLogsParamsStore()
 store.$reset()

src/components/api-logs/ApiLogsList.vue

@@ -22,18 +22,18 @@
 </template>
 
 <script setup lang="ts">
-import ListPagination from '../lists/ListPagination.vue'
-import ListContainer from '../lists/ListContainer.vue'
+import { useMemberStore } from '@/stores/member'
 import { useLogsParamsStore } from '@/stores/params'
-import ApiLogsListBar from './ApiLogsListBar.vue'
-import ApiLogsListCard from './ApiLogsListCard.vue'
+import type { ApiLogsResponse } from '@/types/admin'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
-import type { ApiLogsResponse } from '@/types/admin'
-import { computed } from 'vue'
-import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+import ListContainer from '../lists/ListContainer.vue'
+import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
+import ApiLogsListBar from './ApiLogsListBar.vue'
+import ApiLogsListCard from './ApiLogsListCard.vue'
 
 const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {

src/components/api-logs/ApiLogsListCard.vue

@@ -13,11 +13,11 @@
 </template>
 
 <script setup lang="ts">
-import type { ListCardProps } from '@/types/common'
-import ListCardTab from '../lists/ListCardTab.vue'
+import { API_LOGS_DIVISION_LIST } from '@/constants/admin'
 import type { ApiLogsListData } from '@/types/admin'
+import type { ListCardProps } from '@/types/common'
 import { formatFullDateTime } from '@/utils/date'
-import { API_LOGS_DIVISION_LIST } from '@/constants/admin'
+import ListCardTab from '../lists/ListCardTab.vue'
 
 const { info } = defineProps<{ info: ApiLogsListData }>()
 const myRequestTabList: ListCardProps[] = [

src/components/charts/LineChart.vue

@@ -9,20 +9,20 @@
 </template>
 
 <script setup lang="ts">
-import { Line } from 'vue-chartjs'
+import type { PeriodType } from '@/types/manager'
 import {
+  CategoryScale,
   Chart as ChartJS,
-  Title,
-  Tooltip,
+  Colors,
+  Filler,
   Legend,
+  LinearScale,
   LineElement,
   PointElement,
-  CategoryScale,
-  LinearScale,
-  Colors,
-  Filler
+  Title,
+  Tooltip
 } from 'chart.js'
-import type { PeriodType } from '@/types/manager'
+import { Line } from 'vue-chartjs'
 import NoContent from '../lists/NoContent.vue'
 
 ChartJS.register(

src/components/charts/PieChart.vue

@@ -15,18 +15,18 @@
 </template>
 
 <script setup lang="ts">
-import { Pie } from 'vue-chartjs'
+import type { PeriodType } from '@/types/manager'
 import {
+  ArcElement,
   Chart as ChartJS,
+  Colors,
+  Legend,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
-  Colors,
-  type ChartEvent,
-  type ActiveElement
+  type ActiveElement,
+  type ChartEvent
 } from 'chart.js'
-import type { PeriodType } from '@/types/manager'
+import { Pie } from 'vue-chartjs'
 import NoContent from '../lists/NoContent.vue'
 ChartJS.register(Title, Tooltip, Legend, ArcElement, Colors)
 

src/components/common/EditInformation.vue

@@ -132,14 +132,14 @@
 import { patchEditInfo } from '@/api/common'
 import { ALLOWED_FILE_EXTENSIONS, ALLOWED_FILE_EXTENSIONS_IMAGE } from '@/constants/common'
 import { useMemberStore } from '@/stores/member'
+import DOMPurify from 'dompurify'
 import { storeToRefs } from 'pinia'
 import { nextTick, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from './FormButtonContainer.vue'
 import FormCheckbox from './FormCheckbox.vue'
 import ImageContainer from './ImageContainer.vue'
 import ModalView from './ModalView.vue'
-import DOMPurify from 'dompurify'
 
 const router = useRouter()
 

src/components/common/ModalView.vue

@@ -9,7 +9,7 @@
         v-if="isOpen"
         class="bg-white rounded-lg shadow-lg px-8 py-8 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[99]">
         <div class="flex flex-col gap-8 w-[300px]">
-          <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-6 relative">
             <div class="flex flex-col items-center gap-2">
               <CommonIcons
                 v-if="type == 'successType'"
@@ -40,7 +40,13 @@
                 type === 'terminate' ? '종료 사유를 입력해주세요' : '반려 사유를 입력해주세요'
               "
               :class="{ 'border border-red-1 placeholder-red-500': isEmpty }"
+              maxlength="40"
               class="flex border w-full border-border-1 px-4 py-3 focus:outline-none resize-none h-[120px]" />
+            <p
+              v-if="type == 'inputType' || type === 'terminate'"
+              class="absolute text-xs top-[calc(100%+4px)] w-full flex justify-end text-body">
+              ({{ textValue.length }}/{{ 40 }})
+            </p>
           </div>
 
           <button
@@ -83,10 +89,10 @@
 
 <script setup lang="ts">
 import { failIcon, successIcon, warningIcon } from '@/constants/iconPath'
+import { useIsOverlayOpenStore } from '@/stores/isOverlayOpen'
 import { onUnmounted, ref, watch } from 'vue'
 import CommonIcons from './CommonIcons.vue'
 import LoadingIcon from './LoadingIcon.vue'
-import { useIsOverlayOpenStore } from '@/stores/isOverlayOpen'
 
 const { isOpen, type, modelValue, isEmpty } = defineProps<{
   isOpen: boolean

src/components/common/TaskCard.vue

@@ -41,6 +41,7 @@
 
 <script setup lang="ts">
 import { bentoIcon } from '@/constants/iconPath'
+import { useIsOverlayOpenStore } from '@/stores/isOverlayOpen'
 import { useTeamBoardParamsStore } from '@/stores/params'
 import type { Status } from '@/types/common'
 import type { TaskCardProps } from '@/types/manager'
@@ -51,7 +52,6 @@ import TaskDetail from '../task-detail/TaskDetail.vue'
 import CommonIcons from './CommonIcons.vue'
 import ImageContainer from './ImageContainer.vue'
 import TaskLabel from './TaskLabel.vue'
-import { useIsOverlayOpenStore } from '@/stores/isOverlayOpen'
 
 const { data } = defineProps<{ data: TaskCardProps; draggable?: boolean }>()
 const emit = defineEmits(['toggleModal'])

src/components/filters/FilterCategory.vue

@@ -76,10 +76,10 @@
 
 <script setup lang="ts">
 import { dropdownIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 import type { Category, FilterCategoryProps, SubCategory } from '@/types/common'
 import { computed, ref, watchEffect } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
-import { useOutsideClick } from '@/hooks/useOutsideClick'
 
 const { categoryList = [], main, sub } = defineProps<FilterCategoryProps>()
 const emit = defineEmits(['update:main', 'update:sub'])

src/components/lists/ListCardTab.vue

@@ -21,8 +21,8 @@
 
 <script setup lang="ts">
 import type { ListCardProps, Status } from '@/types/common'
-import TaskStatus from '../common/TaskStatus.vue'
 import ImageContainer from '../common/ImageContainer.vue'
+import TaskStatus from '../common/TaskStatus.vue'
 
 const { content, width, isTextXs, profileImg, isStatus, isStatusCode, isTextBody } =
   defineProps<ListCardProps>()

src/components/login-logs/LoginLogsFilterBar.vue

@@ -20,12 +20,12 @@
 </template>
 
 <script setup lang="ts">
+import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
+import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
+import { useLogsParamsStore } from '@/stores/params'
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterInput from '../filters/FilterInput.vue'
-import { useLogsParamsStore } from '@/stores/params'
-import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
 import FilterIpAddress from '../filters/FilterIpAddress.vue'
-import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
 
 const store = useLogsParamsStore()
 store.$reset()

src/components/login-logs/LoginLogsListBar.vue

@@ -12,11 +12,11 @@
 </template>
 
 <script setup lang="ts">
-import ListBarTab from '../lists/ListBarTab.vue'
-import { useLogsParamsStore } from '@/stores/params'
 import { LOGS_LIST_BAR_TAB } from '@/constants/admin'
-import { computed } from 'vue'
 import { useLogsParamsChange } from '@/hooks/useLogsParamsChange'
+import { useLogsParamsStore } from '@/stores/params'
+import { computed } from 'vue'
+import ListBarTab from '../lists/ListBarTab.vue'
 
 const { params } = useLogsParamsStore()
 const orderRequest = computed(() => ({

src/components/login-logs/LoginLogsListCard.vue

@@ -13,10 +13,10 @@
 </template>
 
 <script setup lang="ts">
-import type { ListCardProps } from '@/types/common'
-import ListCardTab from '../lists/ListCardTab.vue'
 import type { LoginLogsListData } from '@/types/admin'
+import type { ListCardProps } from '@/types/common'
 import { formatFullDateTime } from '@/utils/date'
+import ListCardTab from '../lists/ListCardTab.vue'
 
 const logStatus = {
   LOGIN: '로그인 시도'

src/components/member-management/MemberManagementFilterBar.vue

@@ -31,10 +31,10 @@
 </template>
 
 <script setup lang="ts">
+import { PAGE_SIZE_LIST, ROLE_LIST } from '@/constants/common'
 import { useMemberManagementParamsStore } from '@/stores/params'
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterInput from '../filters/FilterInput.vue'
-import { PAGE_SIZE_LIST, ROLE_LIST } from '@/constants/common'
 
 const { params } = useMemberManagementParamsStore()
 </script>

src/components/member-management/MemberManagementListBar.vue

@@ -14,9 +14,9 @@
 
 <script setup lang="ts">
 import { MEMBER_MANAGEMENT_LIST_BAR_TAB } from '@/constants/admin'
-import ListBarTab from '../lists/ListBarTab.vue'
 import { useMemberManagementParamsStore } from '@/stores/params'
 import { computed } from 'vue'
+import ListBarTab from '../lists/ListBarTab.vue'
 
 const { params } = useMemberManagementParamsStore()
 const orderRequest = computed(() => ({

src/components/my-request/MyRequestFilterBar.vue

@@ -33,17 +33,17 @@
 </template>
 
 <script setup lang="ts">
+import { getCategory } from '@/api/common'
 import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
+import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
+import { useMemberStore } from '@/stores/member'
 import { useRequestParamsStore } from '@/stores/params'
 import { useQuery } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
 import FilterCategory from '../filters/FilterCategory.vue'
 import FilterDropdown from '../filters/FilterDropdown.vue'
 import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 import FilterInput from '../filters/FilterInput.vue'
-import { getCategory } from '@/api/common'
-import { useMemberStore } from '@/stores/member'
-import { storeToRefs } from 'pinia'
-import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
 
 const store = useRequestParamsStore()
 store.$reset()

src/components/request-history/RequestHistoryListBar.vue

@@ -12,11 +12,11 @@
 </template>
 
 <script setup lang="ts">
-import ListBarTab from '../lists/ListBarTab.vue'
-import { useRequestParamsStore } from '@/stores/params'
 import { REQUEST_HISTORY_LIST_BAR_TAB } from '@/constants/manager'
-import { computed } from 'vue'
 import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
+import { useRequestParamsStore } from '@/stores/params'
+import { computed } from 'vue'
+import ListBarTab from '../lists/ListBarTab.vue'
 
 const { params } = useRequestParamsStore()
 const orderRequest = computed(() => ({

src/components/requested/RequestedFilterBar.vue

@@ -28,16 +28,16 @@
 </template>
 
 <script setup lang="ts">
-import FilterDropdown from '../filters/FilterDropdown.vue'
-import FilterCategory from '../filters/FilterCategory.vue'
-import FilterInput from '../filters/FilterInput.vue'
+import { getCategory } from '@/api/common'
 import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
+import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
+import { useMemberStore } from '@/stores/member'
 import { useRequestParamsStore } from '@/stores/params'
 import { useQuery } from '@tanstack/vue-query'
-import { getCategory } from '@/api/common'
-import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
-import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
+import FilterCategory from '../filters/FilterCategory.vue'
+import FilterDropdown from '../filters/FilterDropdown.vue'
+import FilterInput from '../filters/FilterInput.vue'
 
 const store = useRequestParamsStore()
 store.$reset()

src/components/requested/RequestedList.vue

@@ -22,6 +22,7 @@
 </template>
 
 <script setup lang="ts">
+import { useParseParams } from '@/hooks/useParseParams'
 import { useMemberStore } from '@/stores/member'
 import { useRequestParamsStore } from '@/stores/params'
 import type { RequestedResponse } from '@/types/manager'
@@ -34,7 +35,6 @@ import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
 import RequestedListBar from './RequestedListBar.vue'
 import RequestedListCard from './RequestedListCard.vue'
-import { useParseParams } from '@/hooks/useParseParams'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {

src/components/requested/RequestedListBar.vue

@@ -14,10 +14,10 @@
 
 <script setup lang="ts">
 import { REQUESTED_LIST_BAR_TAB } from '@/constants/manager'
-import ListBarTab from '../lists/ListBarTab.vue'
+import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
 import { useRequestParamsStore } from '@/stores/params'
 import { computed } from 'vue'
-import { useRequestParamsChange } from '@/hooks/useRequestParamsChange'
+import ListBarTab from '../lists/ListBarTab.vue'
 
 const { params } = useRequestParamsStore()
 const orderRequest = computed(() => ({

src/components/requested/RequestedListCard.vue

@@ -60,12 +60,12 @@ import type { RequestedListData } from '@/types/manager'
 import { axiosInstance } from '@/utils/axios'
 import { formatDate } from '@/utils/date'
 import { useQueryClient } from '@tanstack/vue-query'
+import DOMPurify from 'dompurify'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ModalView from '../common/ModalView.vue'
 import ListCardTab from '../lists/ListCardTab.vue'
 import TaskDetail from '../task-detail/TaskDetail.vue'
-import DOMPurify from 'dompurify'
 
 const { info } = defineProps<{ info: RequestedListData }>()
 const requestedTabList: ListCardProps[] = [
@@ -114,6 +114,12 @@ const rejectRequest = async () => {
     backModal.value = true
     return
   }
+  if (rejectReason.value.length > 40) {
+    toggleModal('fail')
+    modalError.value = '40자 이내의 반려 사유를 입력해주세요'
+    backModal.value = true
+    return
+  }
   backModal.value = false
   await axiosInstance.patch(`/api/tasks/${info.taskId}/terminate`, {
     reason: DOMPurify.sanitize(rejectReason.value)