CLAP-311 Token 관련 핸들링 완료

src/components/my-request/MyRequestFilterBar.vue

@@ -42,14 +42,17 @@ import FilterDropdownMulti from '../filters/FilterDropdownMulti.vue'
 import FilterInput from '../filters/FilterInput.vue'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { getCategory } from '@/api/common'
+import { useMemberStore } from '@/stores/member'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery({
   queryKey: ['category'],
-  queryFn: getCategory
+  queryFn: getCategory,
+  enabled: !!isLogined
 })
 </script>

src/components/my-request/MyRequestList.vue

@@ -33,6 +33,7 @@ import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
 import MyRequestListBar from './MyRequestListBar.vue'
 import MyRequestListCard from './MyRequestListCard.vue'
+import { useMemberStore } from '@/stores/member'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
@@ -46,9 +47,11 @@ const fetchMyRequestList = async () => {
   return response.data
 }
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery<MyRequestResponse>({
   queryKey: ['myRequest', params],
-  queryFn: fetchMyRequestList
+  queryFn: fetchMyRequestList,
+  enabled: !!isLogined
 })
 
 const totalPage = computed(() => {

src/components/my-task/MyTaskList.vue

@@ -33,6 +33,7 @@ import type { MyTaskResponse } from '@/types/manager'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 import NoContent from '../lists/NoContent.vue'
+import { useMemberStore } from '@/stores/member'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
@@ -46,9 +47,11 @@ const fetchMyTaskList = async () => {
   return response.data
 }
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery<MyTaskResponse>({
   queryKey: ['myTask', params],
-  queryFn: fetchMyTaskList
+  queryFn: fetchMyTaskList,
+  enabled: !!isLogined
 })
 
 const totalPage = computed(() => {

src/components/request-history/RequestHistoryList.vue

@@ -33,6 +33,7 @@ import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 import type { RequestHistoryResponse } from '@/types/manager'
 import NoContent from '../lists/NoContent.vue'
+import { useMemberStore } from '@/stores/member'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
@@ -46,9 +47,11 @@ const fetchRequestHistoryList = async () => {
   return response.data
 }
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery<RequestHistoryResponse>({
   queryKey: ['requestHistory', params],
-  queryFn: fetchRequestHistoryList
+  queryFn: fetchRequestHistoryList,
+  enabled: !!isLogined
 })
 
 const totalPage = computed(() => {

src/components/request-task/CategoryDropDown.vue

@@ -17,8 +17,8 @@
       ref="htmlRef"
       class="relative flex">
       <div
-        class="flex w-full h-11 items-center rounded p-4 border border-border-1 cursor-pointer text-black"
-        :class="isDisabled ? 'bg-background-2' : 'bg-white'"
+        class="flex w-full h-11 items-center rounded p-4 border border-border-1 text-black"
+        :class="isDisabled ? 'bg-background-2 cursor-default' : 'bg-white cursor-pointer'"
         @click="toggleDropdown">
         <p :class="{ 'text-disabled': !modelValue?.name }">
           {{ modelValue?.name ?? labelName + '를 선택해주세요' }}

src/components/requested/RequestedList.vue

@@ -33,6 +33,7 @@ import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 import type { RequestedResponse } from '@/types/manager'
 import NoContent from '../lists/NoContent.vue'
+import { useMemberStore } from '@/stores/member'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
@@ -46,9 +47,11 @@ const fetchRequestedList = async () => {
   return response.data
 }
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery<RequestedResponse>({
   queryKey: ['requested', params],
-  queryFn: fetchRequestedList
+  queryFn: fetchRequestedList,
+  enabled: !!isLogined
 })
 
 const totalPage = computed(() => {

src/components/requested/RequestedListCard.vue

@@ -30,7 +30,7 @@
 
   <ModalView
     :is-open="isModalVisible.reject"
-    @update:model-value="value => (rejectReason = value)"
+    @update:model-value="value => (rejectReason = value || '')"
     type="inputType"
     @close="closeModal"
     @click="rejectRequest">

src/components/statistics/StatisticsCard.vue

@@ -35,6 +35,7 @@ import type { PeriodType } from '@/types/manager'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import type { StatisticsData } from '@/types/admin'
+import { useMemberStore } from '@/stores/member'
 
 const { title, statisticsType, chartType } = defineProps<{
   title: string
@@ -64,9 +65,11 @@ const fetchStatistics = async () => {
   return response.data
 }
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery<StatisticsData[]>({
   queryKey: computed(() => [statisticsType, periodType]),
-  queryFn: fetchStatistics
+  queryFn: fetchStatistics,
+  enabled: !!isLogined
 })
 
 const labels = computed(() => {

src/components/statistics/StatisticsCategoryCard.vue

@@ -37,6 +37,7 @@ import type { PeriodType } from '@/types/manager'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import type { StatisticsData } from '@/types/admin'
+import { useMemberStore } from '@/stores/member'
 
 const periodType = ref<PeriodType>('DAY')
 const changePeriod = (newPeriodType: PeriodType) => {
@@ -56,9 +57,11 @@ const fetchMainStatistics = async () => {
 
   return response.data
 }
+const { isLogined } = useMemberStore()
 const { data: mainData } = useQuery<StatisticsData[]>({
   queryKey: computed(() => ['REQUEST_BY_CATEGORY', periodType]),
-  queryFn: fetchMainStatistics
+  queryFn: fetchMainStatistics,
+  enabled: !!isLogined
 })
 const mainLabels = computed(() => {
   return mainData.value?.map(el => el.key) || []

src/components/task-detail/TaskDetail.vue

@@ -7,7 +7,7 @@
     <div
       v-if="selectedId"
       @click.stop
-      class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1104px] min-w-[768px] h-[calc(100%-96px)] bg-white shadow-custom p-6 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50">
+      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"
         :is-approved="isApproved"
@@ -17,8 +17,8 @@
         :isRequestor="data?.requesterNickName === info.nickname" />
       <div
         v-if="data"
-        class="w-full flex gap-6 relative overflow-y-auto">
-        <div class="w-full flex flex-col gap-y-8 overflow-y-auto scrollbar-hide">
+        class="w-full flex relative overflow-y-auto">
+        <div class="w-full flex flex-col gap-y-8 overflow-y-auto scrollbar-hide p-6">
           <TaskDetailLeft :data="data" />
           <div class="w-full h-[1px] bg-border-1 shrink-0"></div>
           <TaskDetailHistory

src/components/task-detail/TaskDetailDropdown.vue

@@ -1,43 +1,43 @@
 <template>
-  <div>
-    <div class="relative flex">
+  <div
+    ref="htmlRef"
+    class="relative flex">
+    <div
+      class="task-detail-dropdown"
+      @click="toggleDropdown">
+      <div class="flex gap-2">
+        <div class="w-6 h-6 rounded-full overflow-hidden">
+          <img
+            src="/images/mockProfile.jpg"
+            alt="userProfile" />
+        </div>
+        <p class="text-black">
+          {{ modelValue }}
+        </p>
+      </div>
+      <CommonIcons
+        :name="dropdownIcon"
+        :class="['ml-auto', { 'rotate-180': dropdownOpen }]" />
+    </div>
+    <div
+      v-if="dropdownOpen"
+      class="task-detail-dropdown-option-list">
       <div
-        class="task-detail-dropdown"
-        @click="toggleDropdown">
-        <div class="flex gap-2">
+        v-for="option in options"
+        :key="option"
+        class="task-detail-dropdown-option justify-between"
+        @click="selectOption(option)">
+        <div class="flex gap-2 items-center">
           <div class="w-6 h-6 rounded-full overflow-hidden">
             <img
-              src="/images/mockProfile.jpg"
+              :src="processor.profileUrl"
               alt="userProfile" />
           </div>
-          <p class="text-black">
-            {{ modelValue }}
+          <p class="text-sm">
+            {{ option }}
           </p>
         </div>
-        <CommonIcons
-          :name="dropdownIcon"
-          :class="['ml-auto', { 'rotate-180': dropdownOpen }]" />
-      </div>
-      <div
-        v-if="dropdownOpen"
-        class="task-detail-dropdown-option-list">
-        <div
-          v-for="option in options"
-          :key="option"
-          class="task-detail-dropdown-option justify-between"
-          @click="selectOption(option)">
-          <div class="flex gap-2 items-center">
-            <div class="w-6 h-6 rounded-full overflow-hidden">
-              <img
-                :src="processor.profileUrl"
-                alt="userProfile" />
-            </div>
-            <p class="text-sm">
-              {{ option }}
-            </p>
-          </div>
-          <p class="text-primary1 text-xs">잔여 작업 : {{ 3 }}</p>
-        </div>
+        <p class="text-primary1 text-xs">잔여 작업 : {{ 3 }}</p>
       </div>
     </div>
   </div>
@@ -48,6 +48,7 @@ import { dropdownIcon } from '@/constants/iconPath'
 import type { TaskDetailDropdownProps } from '@/types/user'
 import { ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { options, modelValue, processor } = defineProps<TaskDetailDropdownProps>()
 const emit = defineEmits(['update:modelValue'])
@@ -61,4 +62,6 @@ const selectOption = (option: string) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }
+
+const { htmlRef } = useOutsideClick(() => dropdownOpen.value && toggleDropdown())
 </script>

src/components/task-detail/TaskDetailLeft.vue

@@ -14,11 +14,11 @@
     </div>
     <div>
       <p class="task-detail">부가 설명</p>
-      <p class="px-6 py-4 bg-primary2 rounded-lg font-normal min-h-[120px]">
+      <p class="px-6 py-4 bg-primary2 rounded-lg font-normal min-h-[120px] whitespace-pre-wrap">
         {{ data.description }}
       </p>
     </div>
-    <div>
+    <div v-if="data.attachmentResponses.length !== 0">
       <p class="task-detail">첨부 파일</p>
       <TaskDetailFiles :files="data.attachmentResponses" />
     </div>

src/components/task-detail/TaskDetailManagerDropdown.vue

@@ -1,47 +1,43 @@
 <template>
-  <div>
+  <div
+    ref="htmlRef"
+    class="relative flex">
     <div
-      ref="htmlRef"
-      class="relative flex">
+      class="task-detail-manager-dropdown"
+      @click="toggleDropdown">
+      <div class="flex gap-2 items-center">
+        <div class="w-5 h-5 rounded-full overflow-hidden">
+          <img
+            :src="modelValue?.imageUrl || '/images/mockProfile.jpg'"
+            alt="userProfile" />
+        </div>
+        <p>
+          {{ modelValue?.nickname }}
+        </p>
+      </div>
+      <CommonIcons
+        :name="dropdownIcon"
+        :class="['ml-auto', { 'rotate-180': dropdownOpen }]" />
+    </div>
+    <div
+      v-if="dropdownOpen"
+      class="request-task-dropdown-option-list">
       <div
-        class="task-detail-manager-dropdown"
-        @click="toggleDropdown">
-        <div class="flex gap-2 items-center">
-          <div
-            v-if="modelValue"
-            class="w-5 h-5 rounded-full overflow-hidden">
+        v-for="option in managerArr"
+        :key="option.memberId"
+        class="request-task-dropdown-option justify-between"
+        @click="selectOption(option)">
+        <div class="flex gap-2">
+          <div class="w-5 h-5 rounded-full overflow-hidden">
             <img
-              :src="modelValue?.imageUrl || '/images/mockProfile.jpg'"
+              :src="option.imageUrl || '/images/mockProfile.jpg'"
               alt="userProfile" />
           </div>
           <p>
-            {{ modelValue?.nickname }}
+            {{ option.nickname }}
           </p>
         </div>
-        <CommonIcons
-          :name="dropdownIcon"
-          :class="['ml-auto', { 'rotate-180': dropdownOpen }]" />
-      </div>
-      <div
-        v-if="dropdownOpen"
-        class="request-task-dropdown-option-list">
-        <div
-          v-for="option in managerArr"
-          :key="option.memberId"
-          class="request-task-dropdown-option justify-between"
-          @click="selectOption(option)">
-          <div class="flex gap-2">
-            <div class="w-5 h-5 rounded-full overflow-hidden">
-              <img
-                :src="option.imageUrl || '/images/mockProfile.jpg'"
-                alt="userProfile" />
-            </div>
-            <p>
-              {{ option.nickname }}
-            </p>
-          </div>
-          <p class="text-primary1 text-xs">잔여 작업 : {{ option.remainingTasks }}</p>
-        </div>
+        <p class="text-primary1 text-xs">잔여 작업 : {{ option.remainingTasks }}</p>
       </div>
     </div>
   </div>

src/components/task-detail/TaskDetailRight.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sticky top-0 min-w-60 flex flex-col gap-y-6 pb-6 text-black overflow-y-auto">
+  <div class="sticky top-0 w-[280px] shrink-0 flex flex-col gap-y-6 text-black overflow-y-auto p-6">
     <div>
       <p class="task-detail">고유코드</p>
       <p class="text-sm text-black">{{ data.taskCode || '-' }}</p>