CLAP-353 Tony.tsx 오류 수정

src/api/common.ts

@@ -12,7 +12,7 @@ export const getNotification = async (pageNum: number, sizeNum: number) => {
 }
 
 export const patchNotificationRead = async (notificationId: number) => {
-  const response = await axiosInstance.patch(`/api/notification/${notificationId}`)
+  const response = await axiosInstance.patch(`/api/notifications/${notificationId}`)
   return response.data
 }
 

src/components/api-logs/ApiLogsList.vue

@@ -31,6 +31,7 @@ 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'
 
 const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {
@@ -47,7 +48,8 @@ const fetchApiLogsList = async () => {
   return response.data
 }
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery<ApiLogsResponse>({
   queryKey: ['apiLogs', params],
   queryFn: fetchApiLogsList,

src/components/common/ModalView.vue

@@ -34,7 +34,7 @@
           <textarea
             v-if="type == 'inputType'"
             v-model="textValue"
-            placeholder="거부 사유를 입력해주세요"
+            placeholder="반려 사유를 입력해주세요"
             class="flex border w-full border-border-1 px-4 py-3 focus:outline-none resize-none h-[120px]" />
         </div>
 
@@ -67,7 +67,7 @@
             type="button"
             class="button-large-red"
             @click="confirmModal">
-            {{ type === 'inputType' ? '거부' : '삭제' }}
+            {{ type === 'inputType' ? '반려' : '삭제' }}
           </button>
         </div>
       </div>

src/components/common/TaskCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full max-w-80 border-l-8 bg-white py-4 pl-6 pr-4 flex flex-col gap-6 rounded-lg shadow-custom hover:bg-background-2 cursor-pointer"
+    class="w-full max-w-80 border-l-8 bg-white p-4 flex flex-col gap-6 rounded-lg shadow-custom hover:bg-background-2 cursor-pointer"
     :class="borderLeft"
     @click="handleModal(data.taskId)">
     <div class="flex flex-col gap-1">
@@ -21,9 +21,9 @@
       <span class="text-xs text-body">{{ data.mainCategoryName }} - {{ data.categoryName }}</span>
     </div>
     <div class="flex justify-between items-end">
-      <span class="text-xs font-bold text-black whitespace-nowrap overflow-hidden text-ellipsis">{{
-        data.taskCode
-      }}</span>
+      <span class="text-xs font-bold text-black whitespace-nowrap overflow-hidden text-ellipsis">
+        {{ data.taskCode }}
+      </span>
       <div class="flex flex-col gap-1 items-end">
         <span class="text-xs font-bold text-body">{{ data.requesterDepartment }}</span>
         <div class="flex items-center gap-1.5">
@@ -34,12 +34,12 @@
         </div>
       </div>
     </div>
-    <TaskDetail
-      v-if="selectedID"
-      :is-approved="data.taskStatus !== 'REQUESTED'"
-      :selected-id="selectedID"
-      :close-task-detail="() => handleModal(null)" />
   </div>
+  <TaskDetail
+    v-if="selectedID"
+    :selected-id="selectedID"
+    :close-task-detail="() => handleModal(null)"
+    click.stop />
 </template>
 
 <script setup lang="ts">
@@ -54,15 +54,17 @@ import ImageContainer from './ImageContainer.vue'
 import TaskDetail from '../task-detail/TaskDetail.vue'
 
 const { data } = defineProps<{ data: TaskCardProps; draggable?: boolean }>()
+const emit = defineEmits(['toggleModal'])
 const selectedID = ref<number | null>(null)
 
 const borderLeft = computed(() => {
   return `border-${statusAsColor(data.taskStatus as Status)}-1`
 })
 
 const handleModal = (id: number | null) => {
-  if (data.taskId) document.body.style.overflow = 'hidden'
+  if (id) document.body.style.overflow = 'hidden'
   else document.body.style.overflow = ''
+  emit('toggleModal')
   selectedID.value = id
 }
 </script>

src/components/requested/RequestedListCard.vue

@@ -28,10 +28,10 @@
         @click.stop="userInfo.isReviewer && toggleModal('reject')"
         :class="
           userInfo.isReviewer
-            ? 'button-medium-primary'
+            ? 'button-medium-default'
             : 'button-medium text-disabled bg-background-1'
         ">
-        거부
+        반려
       </button>
     </div>
   </div>

src/components/statistics/StatisticsCategoryCard.vue

@@ -73,6 +73,7 @@ const mainSeries = computed(() => {
 })
 
 const fetchSubStatistics = async () => {
+  if (!isLogined.value) return
   const response = await axiosInstance.get('/api/tasks/statistics/subcategory', {
     params: {
       periodType: periodType.value,

src/components/task-board/TaskBoard.vue

@@ -1,25 +1,25 @@
 <template>
-  <div class="flex-1 overflow-y-auto">
-    <div class="w-full flex gap-12 sticky top-0 bg-white z-30">
-      <div class="flex flex-1 bg-primary2 rounded-t-lg">
+  <div class="overflow-y-auto">
+    <div class="w-full grid grid-cols-3 gap-12 sticky top-0 bg-white z-30">
+      <div class="flex bg-primary2 rounded-t-lg">
         <span class="text-xs font-bold text-body p-4">
           진행 중 {{ data?.tasksInProgress.length }}
         </span>
       </div>
-      <div class="flex flex-1 bg-primary2 rounded-t-lg">
+      <div class="flex bg-primary2 rounded-t-lg">
         <span class="text-xs font-bold text-body p-4">
           검토 중 {{ data?.tasksInReviewing.length }}
         </span>
       </div>
-      <div class="flex flex-1 bg-primary2 rounded-t-lg">
+      <div class="flex bg-primary2 rounded-t-lg">
         <span class="text-xs font-bold text-body p-4">
           완료 {{ data?.tasksCompleted.length }}
         </span>
       </div>
     </div>
 
-    <div class="w-full flex gap-12 min-h-[calc(100%-48px)]">
-      <div class="flex-1 px-4 pb-4 bg-primary2 rounded-b-lg relative">
+    <div class="w-full grid grid-cols-3 gap-12 min-h-[calc(100%-48px)] overflow-hidden">
+      <div class="grow shrink-0 px-4 pb-4 bg-primary2 rounded-b-lg relative">
         <div class="absolute top-0 left-0 px-4 w-full">
           <div
             v-if="data?.tasksInProgress.length === 0"
@@ -34,17 +34,21 @@
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
-          @change="event => onListChange(event, 'IN_PROGRESS')">
+          @change="event => onListChange(event, 'IN_PROGRESS')"
+          :disabled="isDetailOpen">
           <template #item="{ element }">
-            <TaskCard
-              :key="element.taskId"
-              :data="element"
-              draggable />
+            <div>
+              <TaskCard
+                :key="element.taskId"
+                :data="element"
+                @toggle-modal="isDetailOpen = !isDetailOpen"
+                draggable />
+            </div>
           </template>
         </draggableComponent>
       </div>
 
-      <div class="flex-1 px-4 pb-4 bg-primary2 rounded-b-lg relative">
+      <div class="grow shrink-0 px-4 pb-4 bg-primary2 rounded-b-lg relative">
         <div class="absolute top-0 left-0 px-4 w-full">
           <div
             v-if="data?.tasksInReviewing.length === 0"
@@ -59,17 +63,21 @@
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
-          @change="event => onListChange(event, 'IN_REVIEWING')">
+          @change="event => onListChange(event, 'IN_REVIEWING')"
+          :disabled="isDetailOpen">
           <template #item="{ element }">
-            <TaskCard
-              :key="element.taskId"
-              :data="element"
-              draggable />
+            <div>
+              <TaskCard
+                :key="element.taskId"
+                :data="element"
+                @toggle-modal="isDetailOpen = !isDetailOpen"
+                draggable />
+            </div>
           </template>
         </draggableComponent>
       </div>
 
-      <div class="flex-1 px-4 pb-4 bg-primary2 rounded-b-lg relative">
+      <div class="grow shrink-0 px-4 pb-4 bg-primary2 rounded-b-lg relative">
         <div class="absolute top-0 left-0 px-4 w-full">
           <div
             v-if="data?.tasksCompleted.length === 0"
@@ -84,12 +92,16 @@
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
-          @change="event => onListChange(event, 'COMPLETED')">
+          @change="event => onListChange(event, 'COMPLETED')"
+          :disabled="isDetailOpen">
           <template #item="{ element }">
-            <TaskCard
-              :key="element.taskId"
-              :data="element"
-              draggable />
+            <div>
+              <TaskCard
+                :key="element.taskId"
+                :data="element"
+                @toggle-modal="isDetailOpen = !isDetailOpen"
+                draggable />
+            </div>
           </template>
         </draggableComponent>
       </div>
@@ -104,7 +116,7 @@ import type { Status } from '@/types/common'
 import type { DraggableEvent, TaskCardList } from '@/types/manager'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import draggableComponent from 'vuedraggable'
 import { storeToRefs } from 'pinia'
 import { useParseParams } from '@/hooks/useParseParams'
@@ -177,4 +189,6 @@ const { data } = useQuery<TaskCardList>({
 const tasksInProgress = computed(() => [...(data.value?.tasksInProgress || [])])
 const tasksInReviewing = computed(() => [...(data.value?.tasksInReviewing || [])])
 const tasksCompleted = computed(() => [...(data.value?.tasksCompleted || [])])
+
+const isDetailOpen = ref(false)
 </script>

src/components/task-detail/TaskDetail.vue

@@ -3,7 +3,6 @@
     :onClick="closeTaskDetail"
     class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50 p-12" />
   <div
-    @click.stop
     class="flex flex-col overflow-y-auto rounded-lg w-[calc(100%-96px)] max-w-[1104px] min-w-[768px] h-[calc(100%-96px)] bg-white shadow-custom py-6 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50">
     <TaskDetailTopBar
       v-if="data"
@@ -45,7 +44,7 @@ import TaskDetailTopBar from './TaskDetailTopBar.vue'
 const { closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
 const memberStore = useMemberStore()
-const { info } = storeToRefs(memberStore)
+const { info, isLogined } = storeToRefs(memberStore)
 
 const { data } = useQuery<TaskDetailDatas>({
   queryKey: ['taskDetailUser', selectedId],
@@ -57,6 +56,7 @@ const { data } = useQuery<TaskDetailDatas>({
 
 const { data: historyData } = useQuery<TaskDetailHistoryData>({
   queryKey: ['historyData', selectedId],
-  queryFn: () => getHistory(selectedId)
+  queryFn: () => getHistory(selectedId),
+  enabled: isLogined
 })
 </script>

src/components/task-detail/TaskDetailHistoryFile.vue

@@ -1,19 +1,19 @@
 <template>
   <div :class="['flex w-full', isProcessor ? 'justify-end' : 'justify-start']">
     <div :class="['w-10 h-10 rounded-full pt-1.5', isProcessor ? 'order-3' : 'order-1']">
-      <img
-        :src="history.details.commentFileDetails?.profileImageUrl || '/images/mockProfile.jpg'"
-        class="rounded-full" />
+      <ImageContainer
+        :size="40"
+        :url="history.details.commentFileDetails?.profileImageUrl" />
     </div>
     <div :class="['flex flex-col gap-2 px-4 order-2', isProcessor ? 'items-end' : 'items-start']">
       <p>{{ history.details.commentFileDetails?.nickName }}</p>
       <div
         :class="[
-          'flex max-w-[400px] flex-wrap px-6 py-4 gap-4 items-center text-black rounded-lg',
+          'flex max-w-[400px] px-4 py-3 gap-4 items-center text-black rounded-lg',
           isProcessor ? 'bg-primary2' : 'bg-background-2'
         ]">
         <a
-          class="w-10 h-10 flex items-center justify-center bg-white border border-border-2 rounded-lg"
+          class="w-10 h-10 flex items-center justify-center bg-white border border-border-2 rounded-lg shrink-0 hover:bg-primary2"
           :href="history.details.commentFileDetails?.url"
           download>
           <CommonIcons :name="fileIcon" />
@@ -63,6 +63,7 @@ import { useQueryClient } from '@tanstack/vue-query'
 import { storeToRefs } from 'pinia'
 import { computed, defineProps, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import ImageContainer from '../common/ImageContainer.vue'
 
 const { history, requestorName, taskId } = defineProps<TaskDetailHistoryChatProps>()
 

src/components/task-detail/TaskDetailLabelDropdown.vue

@@ -14,13 +14,16 @@
     </div>
     <div
       v-if="dropdownOpen"
-      class="absolute w-full h-32 overflow-y-auto top-12 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom text-black">
+      class="absolute w-full pb-6 top-12">
       <div
-        v-for="option in labelArr"
-        :key="option.labelId"
-        class="w-full flex text-sm items-center h-10 p-1.5 rounded hover:bg-background-2 cursor-pointer"
-        @click="selectOption(option)">
-        {{ option.labelName }}
+        class="w-full h-32 overflow-y-auto flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom text-black">
+        <div
+          v-for="option in labelArr"
+          :key="option.labelId"
+          class="w-full flex text-sm items-center h-10 p-1.5 rounded hover:bg-background-2 cursor-pointer"
+          @click="selectOption(option)">
+          {{ option.labelName }}
+        </div>
       </div>
     </div>
   </div>

src/components/task-detail/TaskDetailTopBar.vue

@@ -3,20 +3,20 @@
     <div class="flex gap-2 text-sm font-bold">
       <div
         v-if="isApproved && isRequestor"
-        @click="router.push(`/task-request?requestType=re&id=${id}`)"
+        @click="onButtonClick(`/task-request?requestType=re&id=${id}`)"
         class="flex gap-1 items-center cursor-pointer p-1 hover:bg-background-2 rounded">
         <CommonIcons :name="reRequestIcon" />
         <p class="text-body">재요청</p>
       </div>
       <div
         v-if="!isApproved && isRequestor"
-        @click="router.push(`/task-request?requestType=edit&id=${id}`)"
+        @click="onButtonClick(`/task-request?requestType=edit&id=${id}`)"
         class="flex gap-1 items-center cursor-pointer p-1 hover:bg-background-2 rounded">
         <CommonIcons :name="modificationIcon" />
         <p class="text-primary1">요청 수정</p>
       </div>
       <div
-        @click="ApproveTask"
+        @click="onButtonClick(`/request-approve?requestId=${id}`)"
         v-if="isProcessor && !isApproved"
         class="flex gap-1 items-center cursor-pointer p-1 hover:bg-background-2 rounded">
         <CommonIcons :name="approveIcon" />
@@ -104,7 +104,8 @@ const finishCancel = async () => {
   closeTaskDetail()
 }
 
-const ApproveTask = () => {
-  router.push(`/request-approve?requestId=${id}`)
+const onButtonClick = (url: string) => {
+  document.body.style.overflow = ''
+  router.push(url)
 }
 </script>

src/components/task-detail/TaskStatusList.vue

@@ -79,13 +79,13 @@ const closeModal = () => {
 }
 
 const textColor = (taskStatus: Status) => {
-  return currentStatus.value === taskStatus ? 'text-white' : `text-gray-1`
+  return currentStatus.value === taskStatus ? 'text-white' : `text-zinc-400`
 }
 
 const bgColor = (taskStatus: Status) => {
   return currentStatus.value === taskStatus
     ? `bg-${statusAsColor(taskStatus)}-1`
-    : `bg-gray-2${isProcessor ? ' hover:bg-background-1' : ''}`
+    : `bg-zinc-100${isProcessor ? ' hover:bg-zinc-200' : ''}`
 }
 
 const rejectRequest = async () => {

src/components/task-management/CategoryAdd.vue

@@ -114,10 +114,7 @@ const handleSubmit = async () => {
     const categoryId = route.params.id
     if (categoryId) {
       const patchUrl = `/api/managements/categories/${categoryId}`
-      await axiosInstance.patch(patchUrl, {
-        name: categoryForm.value.name,
-        code: categoryForm.value.code
-      })
+      await axiosInstance.patch(patchUrl, categoryForm.value)
     } else {
       const postUrl =
         categoryStep === '1' ? '/api/managements/main-category' : '/api/managements/sub-category'