Merge pull request #117 from TaskFlow-CLAP/CLAP-311

CLAP-331 코드 점검

Author: seorang42

src/assets/deafultProfile.png

@@ -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/EditInformation.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/TaskCard.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/api-logs/ApiLogsList.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/common/ImageContainer.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/login-logs/LoginLogsList.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/member-management/MemberManagementList.vue

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

src/components/my-request/MyRequestFilterBar.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/MyRequestList.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)" />