CLAP-426 QA 사항 반영 Tony.tsx

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"

src/components/member-management/MemberManagementListCard.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"
@@ -24,7 +24,9 @@
       <button
         type="button"
         :class="
-          info.memberStatus !== 'ACTIVE' ? 'button-medium-secondary' : 'button-medium-disabled'
+          info.memberStatus !== 'ACTIVE'
+            ? 'button-medium-secondary'
+            : 'button-medium-disabled !cursor-default'
         "
         @click="info.memberStatus !== 'ACTIVE' && onMemberInvite(info.memberId)">
         초대

src/components/request-task/RequestTaskInput.vue

@@ -29,7 +29,7 @@
       :maxlength="labelName === '제목' ? 30 : undefined" />
     <p
       v-if="limitLength"
-      class="text-xs mt-1.5">
+      class="absolute text-xs top-[calc(100%+4px)] w-full flex justify-end text-body">
       ({{ inputLength }}/{{ limitLength }})
     </p>
   </div>

src/components/request-task/RequestTaskTextArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-1.5">
+  <div class="flex flex-col gap-1.5 relative">
     <div class="text-xs flex gap-x-1 text-red-1">
       <p class="text-body text-xs font-semibold">부가설명</p>
       <p v-if="isInvalidateState === 'description'">부가설명은 200자 이내로 적어주세요</p>
@@ -13,7 +13,7 @@
     </textarea>
     <p
       v-if="limitLength"
-      class="text-xs">
+      class="absolute text-xs top-[calc(100%+4px)] w-full flex justify-end text-body">
       ({{ inputLength }}/{{ limitLength }})
     </p>
   </div>

src/components/statistics/PeriodButtons.vue

@@ -1,35 +1,40 @@
 <template>
-  <div class="text-xs font-semibold flex gap-4">
-    <button
-      type="button"
-      @click="changePeriod('DAY')"
-      :class="
-        periodType === 'DAY'
-          ? 'button-small-primary underline'
-          : 'button-small-default hover:underline'
-      ">
-      일간
-    </button>
-    <button
-      type="button"
-      @click="changePeriod('WEEK')"
-      :class="
-        periodType === 'WEEK'
-          ? 'button-small-primary underline'
-          : 'button-small-default hover:underline'
-      ">
-      주간
-    </button>
-    <button
-      type="button"
-      @click="changePeriod('MONTH')"
-      :class="
-        periodType === 'MONTH'
-          ? 'button-small-primary underline'
-          : 'button-small-default hover:underline'
-      ">
-      월간
-    </button>
+  <div class="text-xs font-semibold flex gap-2 text-disabled">
+    <span class="text-primary1">지난</span>
+    <div class="flex gap-2">
+      <button
+        type="button"
+        @click="changePeriod('DAY')"
+        :class="
+          periodType === 'DAY'
+            ? 'button-small-primary underline'
+            : 'button-small-default hover:underline'
+        ">
+        1일
+      </button>
+      |
+      <button
+        type="button"
+        @click="changePeriod('WEEK')"
+        :class="
+          periodType === 'WEEK'
+            ? 'button-small-primary underline'
+            : 'button-small-default hover:underline'
+        ">
+        1주일
+      </button>
+      |
+      <button
+        type="button"
+        @click="changePeriod('MONTH')"
+        :class="
+          periodType === 'MONTH'
+            ? 'button-small-primary underline'
+            : 'button-small-default hover:underline'
+        ">
+        1개월
+      </button>
+    </div>
   </div>
 </template>
 

src/components/statistics/StatisticsCard.vue

@@ -14,14 +14,16 @@
         v-if="chartType === 'pie'"
         :labels="labels"
         :series="series"
-        :period-type="periodType" />
+        :period-type="periodType"
+        :is-pending="isPending" />
       <LineChart
         :key="JSON.stringify(labels) + periodType"
         v-if="chartType === 'line'"
         :labels="labels"
         :series="series"
         :data-label="title.slice(4)"
-        :period-type="periodType" />
+        :period-type="periodType"
+        :is-pending="isPending" />
     </div>
   </div>
 </template>
@@ -68,7 +70,7 @@ const fetchStatistics = async () => {
 
 const memberStore = useMemberStore()
 const { isLogined } = storeToRefs(memberStore)
-const { data } = useQuery<StatisticsData[]>({
+const { data, isPending } = useQuery<StatisticsData[]>({
   queryKey: computed(() => [statisticsType, periodType]),
   queryFn: fetchStatistics,
   enabled: isLogined

src/components/statistics/StatisticsCategoryCard.vue

@@ -15,15 +15,21 @@
           :labels="mainLabels"
           :series="mainSeries"
           :period-type="periodType"
-          @on-click="changeMainCategory" />
+          @on-click="changeMainCategory"
+          :is-pending="isMainPending"
+          title="1차 카테고리"
+          no-legend />
       </div>
       <div class="w-1/2 px-1">
         <PieChart
           :key="JSON.stringify(subLabels) + mainCategory + periodType"
           :labels="subLabels"
           :series="subSeries"
           :period-type="periodType"
-          :content="!mainCategory ? '1차 카테고리를 선택해주세요' : ''" />
+          :content="!mainCategory ? '1차 카테고리를\n선택해주세요' : ''"
+          :is-pending="isSubPending"
+          :title="mainCategory"
+          no-legend />
       </div>
     </div>
   </div>
@@ -43,6 +49,7 @@ import PieChart from '../charts/PieChart.vue'
 const periodType = ref<PeriodType>('DAY')
 const changePeriod = (newPeriodType: PeriodType) => {
   periodType.value = newPeriodType
+  mainCategory.value = ''
 }
 
 const mainCategory = ref('')
@@ -60,7 +67,7 @@ const fetchMainStatistics = async () => {
 }
 const memberStore = useMemberStore()
 const { isLogined } = storeToRefs(memberStore)
-const { data: mainData } = useQuery<StatisticsData[]>({
+const { data: mainData, isPending: isMainPending } = useQuery<StatisticsData[]>({
   queryKey: computed(() => ['REQUEST_BY_CATEGORY', periodType]),
   queryFn: fetchMainStatistics,
   enabled: isLogined
@@ -83,7 +90,7 @@ const fetchSubStatistics = async () => {
 
   return response.data
 }
-const { data: subData } = useQuery<StatisticsData[]>({
+const { data: subData, isPending: isSubPending } = useQuery<StatisticsData[]>({
   queryKey: computed(() => [mainCategory.value, periodType]),
   queryFn: fetchSubStatistics,
   enabled: computed(() => mainCategory.value !== '') && isLogined