♻️ [refactor] Lighthouse 기반 접근성 수치 향상

seorang42 · seorang42 · commit 7f546ae5b4fb · 2025-02-18T11:37:24.000+09:00
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link
@@ -8,6 +8,10 @@
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="TaskFlow, 업무 관리의 혁신을 이끄는 스마트한 서비스" />
+
     <title>TaskFlow - 스마트한 업무 관리</title>
   </head>
   <body>
diff --git a/src/assets/styles.css b/src/assets/styles.css
@@ -47,14 +47,14 @@ body {
   @apply button-large bg-red-1 text-white border-red-1 hover:bg-[#D61E1E];
 }
 .button-large-primary {
-  @apply button-large bg-primary1 text-white border-primary1 hover:bg-[#6D6EF0];
+  @apply button-large bg-primary1 text-white border-primary1 hover:bg-primary3;
 }
 
 .button-medium {
   @apply flex items-center justify-center rounded px-4 py-2 font-semibold gap-1 text-xs cursor-pointer shrink-0 h-full max-h-[34px];
 }
 .button-medium-primary {
-  @apply button-medium bg-primary1 text-white hover:bg-[#6869DE];
+  @apply button-medium bg-primary1 text-white hover:bg-primary3;
 }
 .button-medium-secondary {
   @apply button-medium bg-white border border-primary1 text-primary1 hover:bg-primary2;
@@ -73,7 +73,7 @@ body {
   @apply flex items-center gap-1 text-xs font-semibold;
 }
 .button-small-primary {
-  @apply text-primary1;
+  @apply text-primary3;
 }
 .button-small-default {
   @apply text-disabled;
@@ -149,6 +149,10 @@ body {
   @apply flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 cursor-pointer;
 }
 
+.hidden-text {
+  @apply absolute text-transparent w-[1px] h-[1px] overflow-hidden top-0 left-0;
+}
+
 .modal-enter-active,
 .modal-leave-active {
   transition:
diff --git a/src/components/common/EditInformation.vue b/src/components/common/EditInformation.vue
@@ -34,7 +34,7 @@
       <div class="flex gap-6">
         <label
           for="fileInput"
-          class="mt-3 text-xs text-primary1 font-semibold cursor-pointer hover:underline"
+          class="mt-3 text-xs text-primary3 font-semibold cursor-pointer hover:underline"
           >변경</label
         >
         <label
diff --git a/src/components/common/MainLogo.vue b/src/components/common/MainLogo.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="134"
+    height="48"
+    viewBox="0 0 134 48"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M0 10.7411C0 9.99958 0.601128 9.39844 1.34266 9.39844H106.741V42.9649H1.34266C0.601128 42.9649 0 42.3637 0 41.6222V10.7411Z"
+      fill="#6D6EF0" />
+    <path
+      d="M131.9 40.7961C132.589 41.6779 131.961 42.9655 130.842 42.9655H101.371C100.629 42.9655 100.028 42.3643 100.028 41.6229V3.9C100.028 2.62302 101.643 2.06711 102.429 3.07338L131.9 40.7961Z"
+      fill="#6D6EF0" />
+    <path
+      d="M9.46257 18.9313H5.75684V15.709H16.7129V18.9313H13.0072V38.2656H9.46257V18.9313ZM19.6891 15.709H24.4904L28.1639 38.2656H24.6193L23.9748 33.7865V33.8509H19.9469L19.3024 38.2656H16.0156L19.6891 15.709ZM23.5559 30.7897L21.977 19.6403H21.9125L20.3658 30.7897H23.5559ZM34.3974 38.5878C32.6786 38.5878 31.3789 38.1045 30.4981 37.1378C29.6174 36.1496 29.177 34.7425 29.177 32.9165V31.6275H32.5282V33.1742C32.5282 34.6351 33.1405 35.3655 34.3652 35.3655C34.9667 35.3655 35.4178 35.1936 35.7186 34.8499C36.0408 34.4847 36.2019 33.9046 36.2019 33.1098C36.2019 32.1646 35.9871 31.3375 35.5575 30.6286C35.1278 29.8982 34.3329 29.0281 33.1727 28.0184C31.7119 26.7295 30.6915 25.5694 30.1115 24.5383C29.5314 23.4856 29.2414 22.3041 29.2414 20.9937C29.2414 19.2106 29.6926 17.8357 30.5948 16.869C31.4971 15.8808 32.8075 15.3867 34.5263 15.3867C36.2234 15.3867 37.5016 15.8808 38.3609 16.869C39.2417 17.8357 39.6821 19.2321 39.6821 21.0581V21.9926H36.3308V20.8325C36.3308 20.0592 36.1804 19.5006 35.8797 19.1569C35.5789 18.7917 35.1385 18.6091 34.5585 18.6091C33.3768 18.6091 32.786 19.3288 32.786 20.7681C32.786 21.5844 33.0009 22.3471 33.4305 23.056C33.8818 23.7649 34.6874 24.6242 35.8475 25.6339C37.3298 26.9228 38.3502 28.0936 38.9087 29.1463C39.4673 30.1989 39.7465 31.4342 39.7465 32.852C39.7465 34.6995 39.2847 36.1173 38.3609 37.1055C37.4587 38.0937 36.1375 38.5878 34.3974 38.5878ZM41.7787 15.709H45.3233V25.215L49.8346 15.709H53.3792L49.1579 23.9905L53.4437 38.2656H49.7379L46.7411 28.2118L45.3233 31.0797V38.2656H41.7787V15.709ZM55.1213 15.709H64.4984V18.9313H58.6659V25.215H63.2417V28.4373H58.6659V38.2656H55.1213V15.709ZM66.1982 15.709H69.7428V35.0432H75.5754V38.2656H66.1982V15.709ZM82.2729 38.5878C80.5328 38.5878 79.2009 38.0937 78.2771 37.1055C77.3534 36.1173 76.8915 34.721 76.8915 32.9165V21.0581C76.8915 19.2536 77.3534 17.8572 78.2771 16.869C79.2009 15.8808 80.5328 15.3867 82.2729 15.3867C84.0129 15.3867 85.3449 15.8808 86.2686 16.869C87.1924 17.8572 87.6542 19.2536 87.6542 21.0581V32.9165C87.6542 34.721 87.1924 36.1173 86.2686 37.1055C85.3449 38.0937 84.0129 38.5878 82.2729 38.5878ZM82.2729 35.3655C83.4974 35.3655 84.1096 34.6243 84.1096 33.142V20.8325C84.1096 19.3502 83.4974 18.6091 82.2729 18.6091C81.0484 18.6091 80.4361 19.3502 80.4361 20.8325V33.142C80.4361 34.6243 81.0484 35.3655 82.2729 35.3655ZM89.2137 15.709H92.6294L94.2084 33.0453H94.2729L95.9485 15.709H99.8154L101.491 33.0453H101.555L103.134 15.709H106.196L103.908 38.2656H99.4931L97.8819 23.056H97.8175L96.2063 38.2656H91.5016L89.2137 15.709ZM107.17 34.8499H110.586V38.2656H107.17V34.8499Z"
+      fill="white" />
+  </svg>
+</template>
diff --git a/src/components/filters/FilterInput.vue b/src/components/filters/FilterInput.vue
@@ -5,6 +5,7 @@
     :class="width === 'full' && 'grow'">
     <span class="filter-title">{{ title }}</span>
     <input
+      :aria-label="title"
       @input="onValueChange"
       class="w-full h-8 border-b border-border-1 outline-none text-xs px-2" />
   </div>
diff --git a/src/components/lists/ListBarTab.vue b/src/components/lists/ListBarTab.vue
@@ -5,12 +5,14 @@
     :class="`${!width && 'grow'} ${justifyCenter && 'justify-center'}`">
     {{ content }}
     <button
+      class="relative"
       type="button"
       v-if="sortBy"
       @click="$emit('toggleSortBy', sortBy)">
       <OrderIcon
         :is-active="isActive"
         :class="isASC && 'rotate-180'" />
+      <span class="hidden-text">정렬</span>
     </button>
   </div>
 </template>
diff --git a/src/components/member-management/MemberManagementAddByCsv.vue b/src/components/member-management/MemberManagementAddByCsv.vue
@@ -9,7 +9,7 @@
       @change="handleFileUpload" />
     <label
       for="file"
-      class="cursor-pointer flex items-center gap-1 text-xs font-semibold text-primary1">
+      class="cursor-pointer flex items-center gap-1 text-xs font-semibold text-primary3">
       <CommonIcons
         :name="plusIcon"
         :style="{ fill: '#7879EB' }" />
diff --git a/src/components/request-approve/ManagerDropdown.vue b/src/components/request-approve/ManagerDropdown.vue
@@ -45,7 +45,7 @@
               {{ option.nickname }}
             </p>
           </div>
-          <p class="text-primary1 text-xs font-semibold">잔여 작업 : {{ option.remainingTasks }}</p>
+          <p class="text-primary3 text-xs font-semibold">잔여 작업 : {{ option.remainingTasks }}</p>
         </div>
       </div>
     </div>
diff --git a/src/components/request-task/RequestTaskFileInputAfter.vue b/src/components/request-task/RequestTaskFileInputAfter.vue
@@ -32,7 +32,7 @@
         </div>
         <label
           for="file"
-          class="w-full h-8 flex items-center justify-center text-primary1 font-semibold gap-1 text-xs cursor-pointer shrink-0 hover:bg-background-2">
+          class="w-full h-8 flex items-center justify-center text-primary3 font-semibold gap-1 text-xs cursor-pointer shrink-0 hover:bg-background-2">
           <CommonIcons
             :name="plusIcon"
             :style="{ fill: '#7879eb' }" />
diff --git a/src/components/statistics/PeriodButtons.vue b/src/components/statistics/PeriodButtons.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="text-xs font-semibold flex gap-2 text-disabled">
-    <span class="text-primary1">지난</span>
+    <span class="text-primary3">지난</span>
     <div class="flex gap-2">
       <button
         type="button"
diff --git a/src/components/task-detail/TaskDetailManagerDropdown.vue b/src/components/task-detail/TaskDetailManagerDropdown.vue
@@ -34,7 +34,7 @@
             {{ option.nickname }}
           </p>
         </div>
-        <p class="text-primary1 text-xs">잔여 작업 : {{ option.remainingTasks }}</p>
+        <p class="text-primary3 text-xs">잔여 작업 : {{ option.remainingTasks }}</p>
       </div>
     </div>
   </div>
diff --git a/src/components/task-management/CategoryLine.vue b/src/components/task-management/CategoryLine.vue
@@ -19,7 +19,7 @@
             <button
               type="button"
               @click="router.push(`/category-first/${main.mainCategoryId}`)"
-              class="text-primary1 hover:underline">
+              class="text-primary3 hover:underline">
               수정
             </button>
             <button
diff --git a/src/components/task-management/CategoryLineSub.vue b/src/components/task-management/CategoryLineSub.vue
@@ -17,7 +17,7 @@
             <button
               type="button"
               @click="router.push(`/category-second/${sub.subCategoryId}`)"
-              class="text-primary1 hover:underline">
+              class="text-primary3 hover:underline">
               수정
             </button>
             <button
diff --git a/src/components/task-management/LabelManagement.vue b/src/components/task-management/LabelManagement.vue
@@ -46,7 +46,7 @@
           <button
             type="button"
             @click="addNewLabel"
-            class="text-primary1 w-[21px]">
+            class="text-primary3 w-[21px]">
             확인
           </button>
           <button
diff --git a/src/components/task-management/LabelManagementLine.vue b/src/components/task-management/LabelManagementLine.vue
@@ -49,7 +49,7 @@
           <button
             type="button"
             @click="isEdit && editValue.labelId === label.labelId ? finishEdit() : startEdit(label)"
-            class="text-primary1 w-[21px] hover:underline">
+            class="text-primary3 w-[21px] hover:underline">
             {{ isEdit && editValue.labelId === label.labelId ? '확인' : '수정' }}
           </button>
           <button
diff --git a/src/components/team-board/CurrentTaskRatio.vue b/src/components/team-board/CurrentTaskRatio.vue
@@ -12,7 +12,7 @@
             >검토 중 {{ teamSummary.inReviewing }}건</span
           >
         </div>
-        <span class="text-xs font-semibold text-primary1">총 {{ teamSummary.totalTasks }}건</span>
+        <span class="text-xs font-semibold text-primary3">총 {{ teamSummary.totalTasks }}건</span>
       </div>
       <div class="w-full h-[360px] items-center gap-4">
         <PieChart
diff --git a/src/components/team-board/TeamBoardCard.vue b/src/components/team-board/TeamBoardCard.vue
@@ -19,7 +19,7 @@
           >검토 중 {{ info.inReviewingTaskCount }}건</span
         >
       </div>
-      <span class="text-xs font-semibold text-primary1">총 {{ info.totalTaskCount }}건</span>
+      <span class="text-xs font-semibold text-primary3">총 {{ info.totalTaskCount }}건</span>
     </div>
     <div
       class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom overflow-y-auto scrollbar-hide flex flex-col items-center p-6 gap-4">
diff --git a/src/components/top-bar/NotificationMessage.vue b/src/components/top-bar/NotificationMessage.vue
@@ -14,31 +14,31 @@
       class="flex flex-col text-xs gap-1"
       v-if="type === 'COMMENT'">
       <span>
-        <span class="font-semibold text-primary1">"{{ title }}"</span> 작업에 새로운 댓글이
+        <span class="font-semibold text-primary3">"{{ title }}"</span> 작업에 새로운 댓글이
         추가되었습니다
       </span>
       <span class="font-semibold text-body line-clamp-2">"{{ message }}"</span>
     </div>
     <div
       class="text-xs"
       v-else-if="type === 'TASK_REQUESTED'">
-      <span class="font-semibold text-primary1">"{{ title }}"</span> 작업이 요청되었습니다
+      <span class="font-semibold text-primary3">"{{ title }}"</span> 작업이 요청되었습니다
     </div>
     <div
       class="text-xs"
       v-else-if="type === 'STATUS_SWITCHED'">
-      <span class="font-semibold text-primary1">"{{ title }}"</span> 작업이
-      <span class="font-semibold text-primary1">{{ message }}</span> 상태로 변경되었습니다
+      <span class="font-semibold text-primary3">"{{ title }}"</span> 작업이
+      <span class="font-semibold text-primary3">{{ message }}</span> 상태로 변경되었습니다
     </div>
     <div
       class="text-xs"
       v-else-if="type === 'PROCESSOR_ASSIGNED'">
-      <span class="font-semibold text-primary1">"{{ title }}"</span> 작업이 할당되었습니다
+      <span class="font-semibold text-primary3">"{{ title }}"</span> 작업이 할당되었습니다
     </div>
     <div
       class="text-xs"
       v-else-if="type === 'PROCESSOR_CHANGED'">
-      <span class="font-semibold text-primary1">"{{ title }}"</span> 작업이 재할당되었습니다
+      <span class="font-semibold text-primary3">"{{ title }}"</span> 작업이 재할당되었습니다
     </div>
   </div>
 </template>
diff --git a/src/components/top-bar/NotificationModal.vue b/src/components/top-bar/NotificationModal.vue
@@ -11,7 +11,7 @@
           @click="readAllNotifi"
           class="flex items-center gap-1 p-1 rounded hover:bg-background-2">
           <CommonIcons :name="smallCheckIcon" />
-          <p class="font-semibold text-primary1 text-xs">모두 읽음</p>
+          <p class="font-semibold text-primary3 text-xs">모두 읽음</p>
         </button>
         <button
           type="button"
@@ -41,12 +41,12 @@
         @infinite="loadMoreNotifications"
         class="flex items-center justify-center">
         <template v-slot:complete>
-          <span class="flex py-4 items-center justify-center text-xs text-primary1">
+          <span class="flex py-4 items-center justify-center text-xs text-primary3">
             알림을 전부 확인했습니다
           </span>
         </template>
         <template v-slot:error>
-          <span class="flex py-4 items-center justify-center text-xs text-primary1">
+          <span class="flex py-4 items-center justify-center text-xs text-primary3">
             데이터를 불러오는 중 오류가 발생했습니다. 다시 시도해 주세요.
           </span>
         </template>
diff --git a/src/components/top-bar/SideBar.vue b/src/components/top-bar/SideBar.vue
@@ -14,7 +14,7 @@
             class="cursor-pointer"
             :name="hamburgerIcon" />
           <button @click="onLogoClick">
-            <img src="/MainLogo.svg" />
+            <MainLogo />
           </button>
         </div>
         <div class="flex-1 overflow-y-auto scrollbar-hide flex flex-col gap-6">
@@ -56,7 +56,7 @@
         <div class="flex items-end whitespace-nowrap">
           <RouterLink
             to="/edit-information"
-            class="text-primary1 text-sm font-semibold"
+            class="text-primary1 text-sm font-semibold hover:underline"
             @click="$emit('close')">
             내 정보 수정
           </RouterLink>
@@ -75,6 +75,7 @@ import { SIDE_USER_MENU, SIDE_MANAGER_MENU, SIDE_ADMIN_MENU } from '@/constants/
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
 import ImageContainer from '../common/ImageContainer.vue'
+import MainLogo from '../common/MainLogo.vue'
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
diff --git a/src/components/top-bar/TopBar.vue b/src/components/top-bar/TopBar.vue
@@ -5,13 +5,19 @@
     <div class="max-w-[1200px] mx-auto px-6 flex w-full justify-between items-center relative">
       <div class="flex justify-center items-center gap-6 h-full">
         <button
+          class="relative"
           type="button"
           v-if="isLogined"
           @click="onOpenSide">
           <CommonIcons :name="hamburgerIcon" />
+          <span class="hidden-text">메뉴</span>
         </button>
-        <button @click="router.push('/')">
-          <img src="/MainLogo.svg" />
+        <button
+          class="relative"
+          type="button"
+          @click="router.push('/')">
+          <MainLogo />
+          <span class="hidden-text">로고 버튼</span>
         </button>
       </div>
       <div
@@ -70,6 +76,7 @@ import ImageContainer from '../common/ImageContainer.vue'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
 import { useRouter } from 'vue-router'
 import { useIsOverlayOpenStore } from '@/stores/isOverlayOpen'
+import MainLogo from '../common/MainLogo.vue'
 
 const memberStore = useMemberStore()
 const { isLogined, info } = storeToRefs(memberStore)
diff --git a/src/components/user-manage/DepartmentDropDown.vue b/src/components/user-manage/DepartmentDropDown.vue
@@ -30,7 +30,7 @@
           <p>{{ department.name }}</p>
           <p
             class="font-semibold"
-            :class="[department.isManager ? 'text-primary1' : 'text-body', 'text-xs']">
+            :class="[department.isManager ? 'text-primary3' : 'text-body', 'text-xs']">
             {{ department.isManager ? '담당자 권한 O' : '담당자 권한 X' }}
           </p>
         </div>
diff --git a/src/views/MemberManagementView.vue b/src/views/MemberManagementView.vue
@@ -4,14 +4,14 @@
       <template #button>
         <button
           type="button"
-          class="flex py-1 px-2 rounded hover:bg-background-2 items-center gap-1 text-xs font-semibold text-primary1"
+          class="flex py-1 px-2 rounded hover:bg-background-2 items-center gap-1 text-xs font-semibold text-primary3"
           @click="createNewMember">
           새 회원 추가
         </button>
         <MemberManagementAddByCsv />
         <a
           :href="csvPath"
-          class="flex py-1 px-2 rounded hover:bg-background-2 items-center gap-1 text-xs font-semibold text-primary1"
+          class="flex py-1 px-2 rounded hover:bg-background-2 items-center gap-1 text-xs font-semibold text-primary3"
           download>
           <CommonIcons :name="downloadIcon" />
           일괄추가 파일양식
diff --git a/src/views/MyRequestView.vue b/src/views/MyRequestView.vue
@@ -4,7 +4,7 @@
       <template #button>
         <button
           type="button"
-          class="flex items-center gap-1 py-1 px-2 rounded hover:bg-background-2 text-xs font-semibold text-primary1"
+          class="flex items-center gap-1 py-1 px-2 rounded hover:bg-background-2 text-xs font-semibold text-primary3"
           @click="createNewRequest">
           <CommonIcons
             :name="plusIcon"
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -31,8 +31,9 @@ export default {
   theme: {
     extend: {
       colors: {
-        primary1: '#7879EB',
+        primary1: '#6D6EF0',
         primary2: '#F7F9FF',
+        primary3: '#6061DB',
         black: '#18181B',
         body: '#71717A',
         disabled: '#A1A1AA',

Original file line number	Diff line number	Diff line change
`@@ -47,14 +47,14 @@ body {`
`47`	`47`	`@apply button-large bg-red-1 text-white border-red-1 hover:bg-[#D61E1E];`
`48`	`48`	`}`
`49`	`49`	`.button-large-primary {`
`50`		`- @apply button-large bg-primary1 text-white border-primary1 hover:bg-[#6D6EF0];`
	`50`	`+ @apply button-large bg-primary1 text-white border-primary1 hover:bg-primary3;`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	`.button-medium {`
`54`	`54`	`@apply flex items-center justify-center rounded px-4 py-2 font-semibold gap-1 text-xs cursor-pointer shrink-0 h-full max-h-[34px];`
`55`	`55`	`}`
`56`	`56`	`.button-medium-primary {`
`57`		`- @apply button-medium bg-primary1 text-white hover:bg-[#6869DE];`
	`57`	`+ @apply button-medium bg-primary1 text-white hover:bg-primary3;`
`58`	`58`	`}`
`59`	`59`	`.button-medium-secondary {`
`60`	`60`	`@apply button-medium bg-white border border-primary1 text-primary1 hover:bg-primary2;`
`@@ -73,7 +73,7 @@ body {`
`73`	`73`	`@apply flex items-center gap-1 text-xs font-semibold;`
`74`	`74`	`}`
`75`	`75`	`.button-small-primary {`
`76`		`- @apply text-primary1;`
	`76`	`+ @apply text-primary3;`
`77`	`77`	`}`
`78`	`78`	`.button-small-default {`
`79`	`79`	`@apply text-disabled;`
`@@ -149,6 +149,10 @@ body {`
`149`	`149`	`@apply flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 cursor-pointer;`
`150`	`150`	`}`
`151`	`151`
	`152`	`+.hidden-text {`
	`153`	`+ @apply absolute text-transparent w-[1px] h-[1px] overflow-hidden top-0 left-0;`
	`154`	`+}`
	`155`	`+`
`152`	`156`	`.modal-enter-active,`
`153`	`157`	`.modal-leave-active {`
`154`	`158`	`transition:`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@`
`34`	`34`	`<div class="flex gap-6">`
`35`	`35`	`<label`
`36`	`36`	`for="fileInput"`
`37`		`- class="mt-3 text-xs text-primary1 font-semibold cursor-pointer hover:underline"`
	`37`	`+ class="mt-3 text-xs text-primary3 font-semibold cursor-pointer hover:underline"`
`38`	`38`	`>변경</label`
`39`	`39`	`>`
`40`	`40`	`<label`