CLAP-331 코드 점검

src/components/EditInformation.vue

@@ -18,11 +18,10 @@
 
     <div class="profile">
       <p class="text-body text-xs font-bold">프로필 사진</p>
-      <img
-        v-if="previewUrl || info.profileImageUrl"
-        :src="previewUrl || info.profileImageUrl"
-        alt="프로필 이미지"
-        class="w-24 h-24 rounded-full object-cover border mt-3" />
+      <ImageContainer
+        class="mt-3"
+        :url="previewUrl || info.profileImageUrl"
+        :size="96" />
 
       <label
         for="fileInput"
@@ -104,6 +103,7 @@ const router = useRouter()
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
 import { patchEditInfo } from '@/api/common'
+import ImageContainer from './common/ImageContainer.vue'
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)

src/components/TaskCard.vue

@@ -5,12 +5,14 @@
     @click="onTaskClick">
     <div class="flex flex-col gap-1">
       <div class="flex justify-between items-center gap-4">
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 overflow-hidden">
           <TaskLabel
             v-if="data.labelInfo"
             :color="data.labelInfo.labelColor"
             :content="data.labelInfo.labelName" />
-          <span class="text-black">{{ data.title }}</span>
+          <span class="text-black text-ellipsis overflow-hidden whitespace-nowrap">{{
+            data.title
+          }}</span>
         </div>
         <CommonIcons
           v-if="draggable"
@@ -19,13 +21,15 @@
       <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">{{ 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">
-          <div class="w-4 h-4 rounded-full bg-background-1 overflow-hidden">
-            <img :src="data.requesterImageUrl" />
-          </div>
+          <ImageContainer
+            :url="data.requesterImageUrl"
+            :size="16" />
           <span class="text-xs font-bold text-black">{{ data.requesterNickname }}</span>
         </div>
       </div>
@@ -41,6 +45,7 @@ import type { TaskCardProps } from '@/types/manager'
 import CommonIcons from './common/CommonIcons.vue'
 import { statusAsColor } from '@/utils/statusAsColor'
 import TaskLabel from './common/TaskLabel.vue'
+import ImageContainer from './common/ImageContainer.vue'
 
 const { data } = defineProps<{ data: TaskCardProps; draggable?: boolean }>()
 

src/components/api-logs/ApiLogsList.vue

@@ -30,6 +30,7 @@ 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'
 
 const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {
@@ -46,9 +47,11 @@ const fetchApiLogsList = async () => {
   return response.data
 }
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery<ApiLogsResponse>({
   queryKey: ['apiLogs', params],
-  queryFn: fetchApiLogsList
+  queryFn: fetchApiLogsList,
+  enabled: !!isLogined
 })
 
 const totalPage = computed(() => {

src/components/common/ImageContainer.vue

@@ -0,0 +1,16 @@
+<template>
+  <div
+    :style="{ width: `${size}px`, height: `${size}px` }"
+    class="rounded-full overflow-hidden flex justify-center items-center shrink-0">
+    <img
+      :src="url || defaultProfile"
+      alt="프로필 이미지"
+      class="w-full h-full object-cover" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import defaultProfile from '@/assets/deafultProfile.png'
+
+const { url, size } = defineProps<{ url?: string; size: number }>()
+</script>

src/components/login-logs/LoginLogsList.vue

@@ -32,6 +32,7 @@ import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 import type { LoginLogsResponse } from '@/types/admin'
 import NoContent from '../lists/NoContent.vue'
+import { useMemberStore } from '@/stores/member'
 
 const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {
@@ -48,9 +49,11 @@ const fetchLoginLogsList = async () => {
   return response.data
 }
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery<LoginLogsResponse>({
   queryKey: ['loginLogs', params],
-  queryFn: fetchLoginLogsList
+  queryFn: fetchLoginLogsList,
+  enabled: isLogined
 })
 
 const totalPage = computed(() => {

src/components/member-management/MemberManagementList.vue

@@ -32,6 +32,7 @@ import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
 import MemberManagementListBar from './MemberManagementListBar.vue'
 import MemberManagementListCard from './MemberManagementListCard.vue'
+import { useMemberStore } from '@/stores/member'
 
 const { params } = useMemberManagementParamsStore()
 const onPageChange = (value: number) => {
@@ -42,9 +43,11 @@ const fetchMemberList = async () => {
   return response.data
 }
 
+const { isLogined } = useMemberStore()
 const { data } = useQuery<MemberManagementResponse>({
   queryKey: ['member', params],
-  queryFn: fetchMemberList
+  queryFn: fetchMemberList,
+  enabled: isLogined
 })
 
 const totalPage = computed(() => {

src/components/my-request/MyRequestFilterBar.vue

@@ -53,6 +53,6 @@ const { isLogined } = useMemberStore()
 const { data } = useQuery({
   queryKey: ['category'],
   queryFn: getCategory,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 </script>

src/components/my-request/MyRequestList.vue

@@ -51,7 +51,7 @@ const { isLogined } = useMemberStore()
 const { data } = useQuery<MyRequestResponse>({
   queryKey: ['myRequest', params],
   queryFn: fetchMyRequestList,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 
 const totalPage = computed(() => {

src/components/my-request/MyRequestListCard.vue

@@ -12,6 +12,7 @@
       :is-status="tab.isStatus" />
   </div>
   <TaskDetail
+    v-if="selectedID"
     :is-approved="info.taskStatus !== 'REQUESTED'"
     :selected-id="selectedID"
     :close-task-detail="() => handleModal(null)" />

src/components/my-task/MyTaskFilterBar.vue

@@ -42,14 +42,17 @@ import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
 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-task/MyTaskList.vue

@@ -51,7 +51,7 @@ const { isLogined } = useMemberStore()
 const { data } = useQuery<MyTaskResponse>({
   queryKey: ['myTask', params],
   queryFn: fetchMyTaskList,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 
 const totalPage = computed(() => {

src/components/my-task/MyTaskListCard.vue

@@ -12,6 +12,7 @@
       :is-status="tab.isStatus" />
   </div>
   <TaskDetail
+    v-if="selectedID"
     :is-approved="info.taskStatus !== 'REQUESTED'"
     :selected-id="selectedID"
     :close-task-detail="() => handleModal(null)" />

src/components/request-approve/LabelDropdown.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="text-xs mb-2 text-body font-bold">구분</div>
-    <div class="relative flex">
+    <div
+      ref="htmlRef"
+      class="relative flex">
       <div
         class="flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black"
         @click="toggleDropdown">
@@ -34,6 +36,7 @@ import type { LabelDataTypes } from '@/types/common'
 import type { LabelDropdownProps } from '@/types/user'
 import { onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { modelValue, placeholderText } = defineProps<LabelDropdownProps>()
 const emit = defineEmits(['update:modelValue'])
@@ -53,4 +56,6 @@ const selectOption = (option: LabelDataTypes) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }
+
+const { htmlRef } = useOutsideClick(() => dropdownOpen.value && toggleDropdown())
 </script>

src/components/request-approve/ManagerDropdown.vue

@@ -9,18 +9,16 @@
         담당자를 선택해주세요
       </p>
     </div>
-    <div class="relative flex">
+    <div
+      ref="htmlRef"
+      class="relative flex">
       <div
         class="request-task-dropdown"
         @click="toggleDropdown">
         <div class="flex gap-2 items-center">
-          <div
-            v-if="modelValue"
-            class="w-6 h-6 rounded-full overflow-hidden">
-            <img
-              :src="modelValue?.imageUrl || '/images/mockProfile.jpg'"
-              alt="userProfile" />
-          </div>
+          <ImageContainer
+            :size="24"
+            :url="modelValue?.imageUrl" />
           <p :class="{ 'text-disabled': !modelValue }">
             {{ modelValue?.nickname || placeholderText }}
           </p>
@@ -38,11 +36,9 @@
           class="request-task-dropdown-option justify-between"
           @click="selectOption(option)">
           <div class="flex gap-2">
-            <div class="w-6 h-6 rounded-full overflow-hidden">
-              <img
-                :src="option.imageUrl || '/images/mockProfile.jpg'"
-                alt="userProfile" />
-            </div>
+            <ImageContainer
+              :size="24"
+              :url="option.imageUrl" />
             <p>
               {{ option.nickname }}
             </p>
@@ -61,6 +57,8 @@ import type { ManagerTypes } from '@/types/manager'
 import type { ManagerDropdownProps } from '@/types/user'
 import { computed, onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import ImageContainer from '../common/ImageContainer.vue'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 
 const { placeholderText, modelValue, isInvalidate } = defineProps<ManagerDropdownProps>()
 const emit = defineEmits(['update:modelValue'])
@@ -81,4 +79,6 @@ const selectOption = (option: ManagerTypes) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }
+
+const { htmlRef } = useOutsideClick(() => dropdownOpen.value && toggleDropdown())
 </script>

src/components/request-history/RequestHistoryFilterBar.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/request-history/RequestHistoryList.vue

@@ -51,7 +51,7 @@ const { isLogined } = useMemberStore()
 const { data } = useQuery<RequestHistoryResponse>({
   queryKey: ['requestHistory', params],
   queryFn: fetchRequestHistoryList,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 
 const totalPage = computed(() => {

src/components/request-history/RequestHistoryListCard.vue

@@ -12,6 +12,7 @@
       :is-status="tab.isStatus" />
   </div>
   <TaskDetail
+    v-if="selectedID"
     :is-approved="info.taskStatus !== 'REQUESTED'"
     :selected-id="selectedID"
     :close-task-detail="() => handleModal(null)" />

src/components/requested/RequestedFilterBar.vue

@@ -36,14 +36,17 @@ import { useRequestParamsStore } from '@/stores/params'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
 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/requested/RequestedList.vue

@@ -51,7 +51,7 @@ const { isLogined } = useMemberStore()
 const { data } = useQuery<RequestedResponse>({
   queryKey: ['requested', params],
   queryFn: fetchRequestedList,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 
 const totalPage = computed(() => {

src/components/requested/RequestedListCard.vue

@@ -24,6 +24,7 @@
     </div>
   </div>
   <TaskDetail
+    v-if="selectedID"
     :is-approved="true"
     :selected-id="selectedID"
     :close-task-detail="() => handleModal(null)" />

src/components/statistics/StatisticsCard.vue

@@ -69,7 +69,7 @@ const { isLogined } = useMemberStore()
 const { data } = useQuery<StatisticsData[]>({
   queryKey: computed(() => [statisticsType, periodType]),
   queryFn: fetchStatistics,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 
 const labels = computed(() => {

src/components/statistics/StatisticsCategoryCard.vue

@@ -23,7 +23,7 @@
           :labels="subLabels"
           :series="subSeries"
           :period-type="periodType"
-          :content="mainCategory && '1차 카테고리를 선택해주세요'" />
+          :content="!mainCategory ? '1차 카테고리를 선택해주세요' : ''" />
       </div>
     </div>
   </div>
@@ -61,7 +61,7 @@ const { isLogined } = useMemberStore()
 const { data: mainData } = useQuery<StatisticsData[]>({
   queryKey: computed(() => ['REQUEST_BY_CATEGORY', periodType]),
   queryFn: fetchMainStatistics,
-  enabled: !!isLogined
+  enabled: isLogined
 })
 const mainLabels = computed(() => {
   return mainData.value?.map(el => el.key) || []
@@ -83,7 +83,7 @@ const fetchSubStatistics = async () => {
 const { data: subData } = useQuery<StatisticsData[]>({
   queryKey: computed(() => [mainCategory.value, periodType]),
   queryFn: fetchSubStatistics,
-  enabled: computed(() => mainCategory.value !== '')
+  enabled: computed(() => mainCategory.value !== '') && isLogined
 })
 const subLabels = computed(() => {
   return subData.value?.map(el => el.key) || []