CLAP-360 UI/UX 개선 Tony.tsx

src/assets/styles.css

@@ -108,10 +108,10 @@ body {
 }
 
 .request-task-dropdown {
-  @apply flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black;
+  @apply flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer;
 }
 .request-task-dropdown-option-list {
-  @apply absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom text-black;
+  @apply absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom;
 }
 .request-task-dropdown-option {
   @apply w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer;
@@ -140,7 +140,7 @@ body {
   @apply w-full flex items-center h-10 p-2 rounded hover:bg-background-2 cursor-pointer;
 }
 .task-detail-manager-dropdown {
-  @apply flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black;
+  @apply flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 cursor-pointer;
 }
 
 .modal-enter-active,

src/components/common/EditInformation.vue

@@ -51,7 +51,7 @@
       <span class="absolute top-1 right-2 text-xs text-gray-500"> {{ name.length }} / 10 </span>
       <input
         :class="[
-          'block w-full px-4 py-4 border rounded focus:outline-none h-11 mt-2 text-black',
+          'block w-full px-4 py-4 border rounded focus:outline-none h-11 mt-2',
           isInvalid ? 'border-red-1' : 'border-border-1'
         ]"
         placeholder="이름을 입력해주세요"
@@ -67,21 +67,21 @@
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">아이디</p>
-      <p class="mt-2 text-black">{{ info.nickname }}</p>
+      <p class="mt-2">{{ info.nickname }}</p>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">이메일</p>
-      <p class="mt-2 text-black">{{ info.email }}</p>
+      <p class="mt-2">{{ info.email }}</p>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">부서</p>
-      <p class="mt-2 text-black">{{ info.departmentName }}</p>
+      <p class="mt-2">{{ info.departmentName }}</p>
     </div>
     <div
       v-if="info.departmentRole"
       class="flex flex-col">
       <p class="text-body text-xs font-bold">직무</p>
-      <p class="mt-2 text-black">{{ info.departmentRole }}</p>
+      <p class="mt-2">{{ info.departmentRole }}</p>
     </div>
     <div>
       <p class="text-body text-xs font-bold">알림 수신 여부</p>

src/components/common/FormCheckbox.vue

@@ -14,7 +14,7 @@
           { 'bg-primary1 text-white': isChecked, 'border border-disabled': !isChecked }
         ]"
         :style="isChecked ? { fill: 'white' } : {}" />
-      <p class="text-black">{{ checkButtonName }}</p>
+      <p>{{ checkButtonName }}</p>
     </div>
   </div>
 </template>

src/components/common/ModalView.vue

@@ -20,7 +20,7 @@
               v-if="type == 'warningType'"
               :name="warningIcon" />
 
-            <div class="flex text-2xl font-bold justify-center text-black">
+            <div class="flex text-2xl font-bold justify-center">
               <slot name="header"></slot>
             </div>
 

src/components/common/TaskCard.vue

@@ -10,9 +10,7 @@
             v-if="data.labelInfo"
             :color="data.labelInfo.labelColor"
             :content="data.labelInfo.labelName" />
-          <span class="text-black text-ellipsis overflow-hidden whitespace-nowrap">{{
-            data.title
-          }}</span>
+          <span class="text-ellipsis overflow-hidden whitespace-nowrap">{{ data.title }}</span>
         </div>
         <CommonIcons
           v-if="draggable"
@@ -21,16 +19,16 @@
       <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 whitespace-nowrap overflow-hidden text-ellipsis">{{
-        data.taskCode
-      }}</span>
+      <span class="text-xs font-bold 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">
           <ImageContainer
             :url="data.requesterImageUrl"
             :size="16" />
-          <span class="text-xs font-bold text-black">{{ data.requesterNickname }}</span>
+          <span class="text-xs font-bold">{{ data.requesterNickname }}</span>
         </div>
       </div>
     </div>

src/components/common/TitleBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex justify-between items-center px-6 py-3 border-l-8 border-primary1">
-    <span class="text-2xl font-bold text-black">{{ title }}</span>
+    <span class="text-2xl font-bold">{{ title }}</span>
     <div
       v-if="$slots.button"
       class="flex gap-2">

src/components/common/TitleContainer.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-col gap-2 items-center">
-    <span class="text-4xl font-bold text-black whitespace-pre-wrap text-center leading-tight">{{
-      title
-    }}</span>
+    <span class="text-4xl font-bold whitespace-pre-wrap text-center leading-tight">
+      {{ title }}
+    </span>
     <span class="font-bold whitespace-pre-wrap text-body text-center">{{ content }}</span>
   </div>
 </template>

src/components/filters/FilterCategory.vue

@@ -21,7 +21,7 @@
             :class="
               (main as number[]).includes(category.id)
                 ? 'bg-primary1 text-white font-bold'
-                : 'hover:bg-background-2 text-black'
+                : 'hover:bg-background-2'
             "
             @click="() => onMainClick(category)">
             {{ category.name }}
@@ -34,7 +34,7 @@
       <div
         ref="subRef"
         class="filter-dropdown"
-        :class="isDisabled ? 'bg-background-2 text-disabled' : 'text-black'"
+        :class="isDisabled ? 'bg-background-2 text-disabled' : ''"
         @click="!isDisabled && toggleDropdown('sub')">
         <span class="grow text-center">선택</span>
         <CommonIcons
@@ -62,7 +62,7 @@
               :class="
                 (sub as number[]).includes(subCategory.id)
                   ? 'bg-primary1 text-white font-bold'
-                  : 'hover:bg-background-2 text-black'
+                  : 'hover:bg-background-2'
               "
               @click="() => onSubClick(subCategory.id)">
               {{ subCategory.name }}

src/components/filters/FilterDropdown.vue

@@ -17,7 +17,7 @@
         v-if="isDropdownOpened"
         class="filter-dropdown-option-list">
         <li
-          class="filter-dropdown-option hover:bg-background-2 text-black"
+          class="filter-dropdown-option hover:bg-background-2"
           v-for="option in optionList"
           :key="option.value"
           @click="() => onOptionClick(option.value)">

src/components/filters/FilterDropdownMulti.vue

@@ -21,7 +21,7 @@
           :class="
             (value as string[]).includes(option.value)
               ? 'bg-primary1 text-white font-bold'
-              : 'hover:bg-background-2 text-black'
+              : 'hover:bg-background-2'
           "
           @click="() => onOptionClick(option.value)">
           {{ option.content }}

src/components/filters/FilterInput.vue

@@ -6,7 +6,7 @@
     <span class="filter-title">{{ title }}</span>
     <input
       @input="onValueChange"
-      class="w-full h-8 border-b border-border-1 outline-none text-xs text-black px-2" />
+      class="w-full h-8 border-b border-border-1 outline-none text-xs px-2" />
   </div>
 </template>
 

src/components/filters/FilterIpAddress.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="filter-container w-36">
     <span class="filter-title">IP 주소</span>
-    <div
-      class="w-full h-8 border-b border-border-1 text-xs text-black flex items-center gap-1 px-2">
+    <div class="w-full h-8 border-b border-border-1 text-xs flex items-center gap-1 px-2">
       <template
         v-for="(block, index) in blocks"
         :key="index">

src/components/lists/ListCardTab.vue

@@ -14,7 +14,7 @@
     <span
       v-else
       class="break-all"
-      :class="`${isTextXs ? 'text-xs font-bold' : 'text-sm'} ${isStatusCode ? (content === '200' ? 'text-green-1' : 'text-red-1') : ''} ${isTextBody ? 'text-body' : 'text-black'}`">
+      :class="`${isTextXs ? 'text-xs' : 'text-sm'} ${isStatusCode ? (content === '200' ? 'text-green-1' : 'text-red-1') : ''} ${isTextBody ? 'text-body' : ''}`">
       {{ content ? content : '-' }}
     </span>
   </div>

src/components/lists/ListPagination.vue

@@ -21,9 +21,7 @@
       type="button"
       :key="page"
       class="w-6 h-6 flex justify-center items-center rounded text-sm"
-      :class="
-        page === pageNumber ? 'text-white font-bold bg-primary1' : 'text-black hover:bg-primary2'
-      "
+      :class="page === pageNumber ? 'text-white font-bold bg-primary1' : 'hover:bg-primary2'"
       @click="onNumClick(page)">
       {{ page }}
     </button>

src/components/request-approve/DueDateInput.vue

@@ -3,7 +3,7 @@
     :type="inputType"
     :value="modelValue"
     :min="new Date().toISOString().split('T')[0]"
-    class="w-full border border-gray-300 rounded px-3 py-2 cursor-pointer focus:outline-none text-center text-black"
+    class="w-full border border-gray-300 rounded px-3 py-2 cursor-pointer focus:outline-none text-center"
     @focus="e => (e.target as HTMLInputElement).showPicker()"
     @input="updateValue(($event.target as HTMLInputElement).value)" />
 </template>

src/components/request-approve/LabelDropdown.vue

@@ -5,7 +5,7 @@
       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"
+        class="flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer"
         @click="toggleDropdown">
         <p :class="{ 'text-disabled': !modelValue }">
           {{ modelValue?.labelName || placeholderText }}
@@ -16,7 +16,7 @@
       </div>
       <div
         v-if="dropdownOpen"
-        class="absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2 text-black">
+        class="absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
         <div
           v-for="option in labelArr"
           :key="option.labelId"

src/components/request-task/CategoryDropDown.vue

@@ -17,7 +17,7 @@
       ref="htmlRef"
       class="relative flex">
       <div
-        class="flex w-full h-11 items-center rounded p-4 border border-border-1 text-black"
+        class="flex w-full h-11 items-center rounded p-4 border border-border-1"
         :class="isDisabled ? 'bg-background-2 cursor-default' : 'bg-white cursor-pointer'"
         @click="toggleDropdown">
         <p :class="{ 'text-disabled': !modelValue?.name }">
@@ -29,7 +29,7 @@
       </div>
       <div
         v-if="dropdownOpen"
-        class="absolute w-full max-h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2 text-black">
+        class="absolute w-full max-h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
         <div
           v-for="option in options"
           :key="option.id"

src/components/request-task/RequestTaskDropdown.vue

@@ -11,7 +11,7 @@
     <div class="relative flex">
       <div
         class="flex w-full h-11 items-center rounded p-4 border border-border-1"
-        :class="disabled ? 'bg-background-1 text-disabled' : 'bg-white text-black cursor-pointer'"
+        :class="disabled ? 'bg-background-1 text-disabled' : 'bg-white cursor-pointer'"
         @click="!disabled && toggleDropdown()">
         <p :class="{ 'text-disabled': modelValue === placeholderText }">
           {{ modelValue || placeholderText }}
@@ -22,7 +22,7 @@
       </div>
       <div
         v-if="dropdownOpen"
-        class="absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2 text-black">
+        class="absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
         <div
           v-for="option in options"
           :key="option"

src/components/request-task/RequestTaskFileInputAfter.vue

@@ -16,7 +16,7 @@
         <div
           v-for="(file, index) in files"
           :key="file.name"
-          class="flex w-full justify-between items-center h-8 text-xs border-b border-b-border-2 text-black px-4 shrink-0">
+          class="flex w-full justify-between items-center h-8 text-xs border-b border-b-border-2 px-4 shrink-0">
           <p class="flex truncate mr-3">{{ file.name }}</p>
           <div class="flex gap-6">
             <p class="w-[60px]">{{ formatFileSize(file.size) }}</p>

src/components/request-task/RequestTaskInput.vue

@@ -14,12 +14,12 @@
       </p>
     </div>
     <input
-      class="w-full h-11 border border-border-1 px-4 focus:outline-none text-black rounded"
+      class="w-full h-11 border border-border-1 px-4 focus:outline-none rounded"
       :value="modelValue"
       :disabled="isEdit"
       @input="updateValue(($event.target as HTMLInputElement).value)"
       :placeholder="placeholderText"
-      :class="{ 'text-gray-500': isEdit, 'text-black': !isEdit }"
+      :class="{ 'text-gray-500': isEdit }"
       :maxlength="labelName === '제목' ? 30 : undefined" />
 
     <p

src/components/statistics/StatisticsCard.vue

@@ -2,7 +2,7 @@
   <div
     class="flex flex-col h-fit gap-3 px-4 py-4 border-l-8 border-primary1 bg-white rounded-lg shadow-custom">
     <div class="flex flex-col gap-2">
-      <span class="font-bold text-black">{{ title }}</span>
+      <span class="font-bold">{{ title }}</span>
       <PeriodButtons
         :period-type="periodType"
         @update:period="changePeriod" />

src/components/statistics/StatisticsCategoryCard.vue

@@ -2,7 +2,7 @@
   <div
     class="flex flex-col h-fit gap-3 px-4 py-4 border-l-8 border-primary1 bg-white rounded-lg shadow-custom">
     <div class="flex flex-col gap-2">
-      <span class="font-bold text-black">카테고리별 작업 요청량</span>
+      <span class="font-bold">카테고리별 작업 요청량</span>
       <PeriodButtons
         :period-type="periodType"
         @update:period="changePeriod" />

src/components/task-detail/TaskDetailDropdown.vue

@@ -11,7 +11,7 @@
             src="/images/mockProfile.jpg"
             alt="userProfile" />
         </div>
-        <p class="text-black">
+        <p>
           {{ modelValue }}
         </p>
       </div>

src/components/task-detail/TaskDetailFiles.vue

@@ -2,7 +2,7 @@
   <div class="w-full h-32 border border-border-1 rounded">
     <div
       class="flex w-full justify-between items-center h-6 text-[10px] text-body font-bold bg-border-2 border-b border-b-border-1 px-4">
-      <p class="w-7">파일명</p>
+      <p class="w-7 whitespace-nowrap">파일명</p>
       <div class="flex gap-6">
         <p class="w-[60px]">용량</p>
         <p class="w-36">최종 업로드 시각</p>
@@ -15,7 +15,7 @@
       <div
         v-for="file in files"
         :key="file.fileName"
-        class="flex w-full justify-between items-center h-8 text-xs border-b border-b-border-2 text-black px-4 shrink-0">
+        class="flex w-full justify-between items-center h-8 text-xs border-b border-b-border-2 px-4 shrink-0">
         <p class="flex truncate mr-3">{{ file.fileName }}</p>
         <div class="flex gap-6">
           <p class="w-[60px]">{{ file.fileSize }}</p>

src/components/task-detail/TaskDetailHistoryChat.vue

@@ -17,7 +17,7 @@
       <p>{{ history.details.commentDetails?.nickName }}</p>
       <p
         :class="[
-          'flex max-w-[400px] flex-wrap px-4 py-3  text-black rounded-lg',
+          'flex max-w-[400px] flex-wrap px-4 py-3 rounded-lg',
           isProcessor ? 'bg-primary2' : 'bg-background-2'
         ]">
         {{ history.details.commentDetails?.comment }}

src/components/task-detail/TaskDetailHistoryFile.vue

@@ -9,7 +9,7 @@
       <p>{{ history.details.commentFileDetails?.nickName }}</p>
       <div
         :class="[
-          'flex max-w-[400px] flex-wrap px-6 py-4 gap-4 items-center text-black rounded-lg',
+          'flex max-w-[400px] px-4 py-3 gap-4 items-center rounded-lg',
           isProcessor ? 'bg-primary2' : 'bg-background-2'
         ]">
         <a

src/components/task-detail/TaskDetailLabelDropdown.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     ref="htmlRef"
-    class="relative flex text-base">
+    class="relative flex">
     <div
-      class="flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-sm text-black"
+      class="flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-sm"
       @click="toggleDropdown">
       <p :class="{ 'text-disabled': !modelValue?.labelName }">
         {{ modelValue?.labelName || placeholderText }}
@@ -16,11 +16,14 @@
       v-if="dropdownOpen"
       class="absolute w-full h-32 overflow-y-auto top-12 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom text-black">
       <div
-        v-for="option in labelArr"
-        :key="option.labelId"
-        class="w-full flex text-sm items-center h-10 p-1.5 rounded hover:bg-background-2 cursor-pointer"
-        @click="selectOption(option)">
-        {{ option.labelName }}
+        class="w-full h-32 overflow-y-auto flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom">
+        <div
+          v-for="option in labelArr"
+          :key="option.labelId"
+          class="w-full flex text-sm items-center h-10 p-1.5 rounded hover:bg-background-2 cursor-pointer"
+          @click="selectOption(option)">
+          {{ option.labelName }}
+        </div>
       </div>
     </div>
   </div>