Merge pull request #191 from TaskFlow-CLAP/CLAP-426

CLAP-426 QA 사항 반영 Tony.tsx

Author: seorang42

src/components/api-logs/ApiLogsList.vue

@@ -9,6 +9,7 @@
         v-for="info in data?.content"
         :key="info.logId"
         :info="info" />
+      <NoContent v-if="data?.content.length === 0" />
     </template>
 
     <template #pagination>
@@ -32,6 +33,7 @@ import type { ApiLogsResponse } from '@/types/admin'
 import { computed } from 'vue'
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
+import NoContent from '../lists/NoContent.vue'
 
 const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {

src/components/api-logs/ApiLogsListCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="list-card">
+  <div class="list-card !cursor-default">
     <ListCardTab
       v-for="tab in myRequestTabList"
       :key="tab.content"

src/components/charts/LineChart.vue

@@ -4,7 +4,7 @@
     :data="teamData"
     :options="options" />
   <NoContent
-    v-else
+    v-else-if="!isPending && labels.length === 0"
     :content="`집계된 ${periodText[periodType]} 데이터가 없습니다`" />
 </template>
 
@@ -42,6 +42,7 @@ const { labels, series, dataLabel, periodType } = defineProps<{
   series: number[]
   dataLabel: string
   periodType: PeriodType
+  isPending?: boolean
 }>()
 
 const periodText = { DAY: '일간', WEEK: '주간', MONTH: '월간' }
@@ -80,6 +81,12 @@ const options = {
       },
       suggestedMax: Math.max(...series) + 1
     }
+  },
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: { enabled: true }
   }
 }
 </script>

src/components/charts/PieChart.vue

@@ -1,13 +1,17 @@
 <template>
-  <Pie
-    v-if="labels.length !== 0"
-    :data="teamData"
-    :options="options" />
-  <NoContent
-    v-else
-    :content="
-      !content && periodType ? `집계된 ${periodText[periodType]} 데이터가 없습니다` : content
-    " />
+  <div class="w-full h-full flex items-center justify-center">
+    <Pie
+      v-if="labels.length !== 0"
+      :data="teamData"
+      :options="options" />
+    <NoContent
+      v-else-if="!isPending && labels.length === 0"
+      :content="
+        !content && periodType
+          ? `지난 ${periodText[periodType]}간 집계된\n데이터가 없습니다`
+          : content
+      " />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -26,15 +30,19 @@ import type { PeriodType } from '@/types/manager'
 import NoContent from '../lists/NoContent.vue'
 ChartJS.register(Title, Tooltip, Legend, ArcElement, Colors)
 
-const { labels, series, periodType, content } = defineProps<{
+const { labels, series, periodType, content, isPending, noLegend, title, position } = defineProps<{
   labels: string[]
   series: number[]
   periodType?: PeriodType
   content?: string
+  isPending?: boolean
+  noLegend?: boolean
+  title?: string
+  position?: 'top'
 }>()
 const emit = defineEmits(['onClick'])
 
-const periodText = { DAY: '일간', WEEK: '주간', MONTH: '월간' }
+const periodText = { DAY: '1일', WEEK: '1주일', MONTH: '1개월' }
 
 const teamData = {
   labels,
@@ -53,6 +61,28 @@ const options = {
       const clickedIndex = elements[0].index
       emit('onClick', labels[clickedIndex])
     }
+  },
+  hoverOffset: 10,
+  plugins: {
+    legend: {
+      display: noLegend === true ? false : true,
+      position: position || ('left' as const)
+    },
+    tooltip: { enabled: true },
+    title: {
+      display: title ? true : false,
+      text: title,
+      font: { size: 12, weight: 400 },
+      color: '#71717A'
+    }
+  },
+  layout: {
+    padding: {
+      top: title ? 0 : 8,
+      left: 8,
+      right: 8,
+      bottom: 8
+    }
   }
 }
 </script>

src/components/common/EditInformation.vue

@@ -75,7 +75,9 @@
         maxlength="10"
         ref="nameInput"
         @blur="validateName" />
-      <span class="mt-1.5 text-xs text-gray-500"> {{ name.length }} / 10 </span>
+      <span class="absolute text-xs top-[calc(100%+4px)] w-full flex justify-end text-body">
+        {{ name.length }} / 10
+      </span>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-semibold">아이디</p>

src/components/filters/FilterCategory.vue

@@ -6,7 +6,7 @@
         ref="mainRef"
         class="filter-dropdown"
         @click="toggleDropdown('main')">
-        <span class="grow text-center">선택</span>
+        <span class="grow text-center">선택 ({{ (main as number[]).length }})</span>
         <CommonIcons
           :name="dropdownIcon"
           :style="{ fill: '#18181B' }" />
@@ -36,7 +36,7 @@
         class="filter-dropdown"
         :class="isDisabled ? 'bg-background-2 text-disabled' : ''"
         @click="!isDisabled && toggleDropdown('sub')">
-        <span class="grow text-center">선택</span>
+        <span class="grow text-center">선택 ({{ (sub as number[]).length }})</span>
         <CommonIcons
           :name="dropdownIcon"
           :style="{ fill: isDisabled ? '#A1A1AA' : '#18181B' }" />

src/components/filters/FilterDropdownMulti.vue

@@ -8,7 +8,7 @@
       ref="htmlRef"
       class="filter-dropdown"
       @click="toggleDropdown">
-      <span class="grow text-center">선택</span>
+      <span class="grow text-center">선택 ({{ (value as string[]).length }})</span>
       <CommonIcons :name="dropdownIcon" />
       <ul
         @click.stop

src/components/lists/ListPagination.vue

@@ -11,6 +11,7 @@
         <CommonIcons :name="prevSetIcon" />
       </button>
       <button
+        v-if="pageNumber !== 1"
         @click="onPrevClick"
         class="rounded hover:bg-primary2">
         <CommonIcons :name="prevIcon" />
@@ -27,6 +28,7 @@
     </button>
     <div class="flex gap-1 absolute right-0 top-1/2 translate-x-[calc(100%+8px)] -translate-y-1/2">
       <button
+        v-if="pageNumber !== totalPage"
         @click="onNextClick"
         class="rounded hover:bg-primary2">
         <CommonIcons :name="nextIcon" />

src/components/lists/NoContent.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="w-full h-full flex justify-center items-center">
-    <span class="text-lg text-disabled font-semibold text-center">{{ content }}</span>
+    <span class="text-lg text-disabled font-semibold text-center whitespace-pre-wrap">{{
+      content
+    }}</span>
   </div>
 </template>
 

src/components/login-logs/LoginLogsListCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="list-card">
+  <div class="list-card !cursor-default">
     <ListCardTab
       v-for="tab in myRequestTabList"
       :key="tab.content"