CLAP-412 오류 수정 Tony.tsx

src/assets/styles.css

@@ -99,7 +99,7 @@ body {
   @apply flex justify-center items-center w-full h-8 px-2 border-b border-border-1 relative text-xs cursor-pointer;
 }
 .filter-dropdown-option-list {
-  @apply w-full max-h-[160px] overflow-y-scroll absolute left-0 top-[calc(100%+8px)] shadow-custom p-2 flex flex-col gap-2 rounded bg-white cursor-auto;
+  @apply w-full max-h-[160px] overflow-y-auto scrollbar-hide absolute left-0 top-[calc(100%+8px)] shadow-custom p-2 flex flex-col gap-2 rounded bg-white cursor-auto;
 }
 .filter-dropdown-option {
   @apply text-xs p-2 rounded text-center cursor-pointer;
@@ -117,7 +117,7 @@ body {
   @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;
+  @apply absolute w-full h-40 overflow-y-auto scrollbar-hide 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 flex w-full h-10 items-center text-sm rounded pl-4 pr-3 bg-white border border-border-1 cursor-pointer;
 }
 .task-detail-dropdown-option-list {
-  @apply absolute w-full h-40 overflow-y-auto top-11 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2;
+  @apply absolute w-full h-40 overflow-y-auto scrollbar-hide top-11 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2;
 }
 .task-detail-dropdown-option {
   @apply w-full flex items-center h-10 p-2 rounded hover:bg-background-2 cursor-pointer;

src/components/common/ModalView.vue

@@ -27,7 +27,7 @@
             </div>
 
             <div
-              v-if="type != 'inputType' && $slots.header"
+              v-if="type != 'inputType' && $slots.body"
               class="flex text-sm font-semibold text-body justify-center whitespace-pre-wrap text-center">
               <slot name="body"></slot>
             </div>

src/components/lists/ListContainer.vue

@@ -3,7 +3,7 @@
     <div class="w-full flex flex-col grow overflow-hidden">
       <slot name="listBar" />
 
-      <div class="grow overflow-y-auto">
+      <div class="grow overflow-y-auto scrollbar-hide">
         <slot name="listCards" />
       </div>
     </div>

src/components/member-management/MemberManagementListCard.vue

@@ -58,6 +58,9 @@ import { useRouter } from 'vue-router'
 import ResultModal from '../common/ResultModal.vue'
 import ListCardTab from '../lists/ListCardTab.vue'
 import ModalView from '../common/ModalView.vue'
+import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
+import { useErrorStore } from '@/stores/error'
 
 const roleContent = (role: Role) => {
   return role === 'ROLE_USER' ? '사용자' : role === 'ROLE_MANAGER' ? '담당자' : '관리자'
@@ -84,7 +87,14 @@ const isModalVisible = ref({
 })
 const resultModalType = ref('')
 const message = ref('')
+const memberStore = useMemberStore()
+const { info: myInfo } = storeToRefs(memberStore)
+const { setError } = useErrorStore()
 const toggleModal = (key: keyof typeof isModalVisible.value) => {
+  if (key === 'delete' && info.nickname === myInfo.value.nickname) {
+    setError('자신의 계정은\n삭제할 수 없습니다')
+    return
+  }
   isModalVisible.value = Object.fromEntries(
     Object.keys(isModalVisible.value).map(k => [k, k === key])
   ) as typeof isModalVisible.value

src/components/request-approve/DueDateInput.vue

@@ -2,7 +2,8 @@
   <input
     :type="inputType"
     :value="modelValue"
-    class="w-full border border-gray-300 rounded px-3 py-2 cursor-pointer focus:outline-none text-center"
+    class="w-full border border-border-1 rounded px-3 py-2 cursor-pointer focus:outline-none text-center"
+    :class="isInvalidate ? 'border-red-1' : 'border-border-1'"
     :min="inputType === 'date' ? minValue : undefined"
     @focus="e => (e.target as HTMLInputElement).showPicker()"
     @input="updateValue(($event.target as HTMLInputElement).value)" />
@@ -12,7 +13,7 @@
 import type { DueDateInputProps } from '@/types/common'
 import { computed, defineEmits, defineProps, onMounted } from 'vue'
 
-const { modelValue, inputType } = defineProps<DueDateInputProps>()
+const { modelValue, inputType, isInvalidate } = defineProps<DueDateInputProps>()
 
 const emit = defineEmits(['update:modelValue'])
 

src/components/request-approve/LabelDropdown.vue

@@ -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">
+        class="absolute w-full h-40 overflow-y-auto scrollbar-hide 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-approve/ManagerDropdown.vue

@@ -14,6 +14,7 @@
       class="relative flex">
       <div
         class="request-task-dropdown"
+        :class="isInvalidateState ? '!border-red-1' : ''"
         @click="toggleDropdown">
         <div class="flex gap-2 items-center">
           <ImageContainer

src/components/request-approve/RequestApprove.vue

@@ -10,18 +10,18 @@
       v-model="category1"
       :options="mainCategoryArr"
       :label-name="'1차 카테고리'"
-      :isInvalidate="isInvalidate"
+      :isInvalidate="isInvalidate === 'category1' ? 'category' : ''"
       :isDisabled="false" />
     <CategoryDropDown
       v-model="category2"
       :options="afterSubCategoryArr"
       :label-name="'2차 카테고리'"
-      :is-invalidate="isInvalidate"
+      :isInvalidate="isInvalidate === 'category2' ? 'category' : ''"
       :isDisabled="!category1" />
     <ManagerDropdown
       v-model="approveData.processor"
       :placeholderText="'담당자를 선택해주세요'"
-      :is-invalidate="isInvalidate" />
+      :is-invalidate="isInvalidate === 'manager' ? 'manager' : ''" />
     <div class="flex flex-col gap-2">
       <div class="flex gap-2">
         <p class="text-body text-xs font-semibold">마감기한</p>
@@ -40,10 +40,12 @@
       <div class="flex w-full justify-center gap-6">
         <DueDateInput
           v-model="approveData.dueDate"
-          inputType="date" />
+          inputType="date"
+          :is-invalidate="isInvalidate === 'date' ? 'date' : ''" />
         <DueDateInput
           v-model="approveData.dueTime"
-          inputType="time" />
+          inputType="time"
+          :is-invalidate="isInvalidate === 'date' ? 'date' : ''" />
       </div>
     </div>
     <LabelDropdown
@@ -141,8 +143,12 @@ const handleCancel = () => {
 }
 
 const handleSubmit = async () => {
-  if (!category1.value || !category2.value) {
-    isInvalidate.value = 'category'
+  if (!category1.value) {
+    isInvalidate.value = 'category1'
+    return
+  }
+  if (!category2.value) {
+    isInvalidate.value = 'category2'
     return
   }
   if (!approveData.value.processor?.memberId) {

src/components/request-task/CategoryDropDown.vue

@@ -17,8 +17,8 @@
       ref="htmlRef"
       class="relative flex">
       <div
-        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'"
+        class="flex w-full h-11 items-center rounded p-4 border"
+        :class="`${isDisabled ? 'bg-background-2 cursor-default' : 'bg-white cursor-pointer'} ${isInvalidate ? 'border-red-1' : 'border-border-1'}`"
         @click="toggleDropdown">
         <p :class="{ 'text-disabled': !modelValue?.name }">
           {{ modelValue?.name ?? labelName + '를 선택해주세요' }}
@@ -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">
+        class="absolute w-full max-h-40 overflow-y-auto scrollbar-hide 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="'subCategoryId' in option ? option.subCategoryId : option.mainCategoryId"

src/components/request-task/ReRequestTask.vue

@@ -19,7 +19,7 @@
       :placeholderText="'제목을 입력해주세요'"
       :label-name="'제목'"
       :limit-length="30"
-      :is-invalidate="isInvalidate" />
+      :is-invalidate="isInvalidate === 'input' ? 'input' : ''" />
     <RequestTaskTextArea
       v-model="description"
       :is-invalidate="isInvalidate"

src/components/request-task/RequestTask.vue

@@ -18,7 +18,7 @@
       v-model="title"
       :placeholderText="'제목을 입력해주세요'"
       :label-name="'제목'"
-      :is-invalidate="isInvalidate"
+      :is-invalidate="isInvalidate === 'input' ? 'input' : ''"
       :limit-length="30" />
     <RequestTaskTextArea
       v-model="description"

src/components/request-task/RequestTaskDropdown.vue

@@ -21,7 +21,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">
+        class="absolute w-full h-40 overflow-y-auto scrollbar-hide 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

@@ -12,7 +12,7 @@
       </div>
       <div
         v-if="files && files.length > 0"
-        class="flex flex-col h-[102px] overflow-hidden overflow-y-auto">
+        class="flex flex-col h-[102px] overflow-hidden overflow-y-auto scrollbar-hide">
         <div
           v-for="(file, index) in files"
           :key="file.name"

src/components/request-task/RequestTaskInput.vue

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

src/components/task-management/CategoryManagement.vue

@@ -12,7 +12,7 @@
         <p>2차 카테고리</p>
       </div>
     </div>
-    <div class="flex flex-col w-full grow overflow-y-auto">
+    <div class="flex flex-col w-full grow overflow-y-auto scrollbar-hide">
       <div class="flex">
         <CategoryLine :categories="data || []" />
         <div class="bg-border-1 w-0.5"></div>

src/components/task-management/LabelManagement.vue

@@ -7,7 +7,7 @@
         <p>구분명</p>
       </div>
     </div>
-    <div class="flex flex-col w-full grow overflow-y-auto pb-32">
+    <div class="flex flex-col w-full grow overflow-y-auto scrollbar-hide pb-32">
       <LabelManagementLine
         :label-data="labelData"
         @updateLabels="fetchLabels" />

src/components/team-board/CurrentTaskRatio.vue

@@ -14,8 +14,7 @@
         </div>
         <span class="text-xs font-semibold text-primary1">총 {{ teamSummary.totalTasks }}건</span>
       </div>
-      <div
-        class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom overflow-y-scroll items-center p-6 gap-4">
+      <div class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom items-center p-6 gap-4">
         <PieChart
           :key="chartLabels.length || 0"
           :labels="chartLabels"

src/components/team-board/TeamBoard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grow overflow-y-scroll p-6">
+  <div class="grow overflow-y-auto scrollbar-hide p-6">
     <div class="grid grid-cols-3 gap-12">
       <CurrentTaskRatio
         :team-summary="teamSummary"

src/components/team-board/TeamBoardCard.vue

@@ -22,7 +22,7 @@
       <span class="text-xs font-semibold text-primary1">총 {{ info.totalTaskCount }}건</span>
     </div>
     <div
-      class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom overflow-y-scroll flex flex-col items-center p-6 gap-4">
+      class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom overflow-y-auto flex flex-col items-center p-6 gap-4">
       <TaskCard
         v-for="task in info.tasks"
         :key="task.taskId"

src/components/top-bar/NotificationModal.vue

@@ -21,7 +21,7 @@
         </button>
       </div>
     </div>
-    <div class="grow h-full flex flex-col overflow-y-auto">
+    <div class="grow h-full flex flex-col overflow-y-auto scrollbar-hide">
       <template v-if="notifications">
         <NotificationMessage
           v-for="notification in notifications"

src/components/top-bar/SideBar.vue

@@ -13,9 +13,11 @@
             @click="$emit('close')"
             class="cursor-pointer"
             :name="hamburgerIcon" />
-          <img src="/MainLogo.svg" />
+          <button @click="onLogoClick">
+            <img src="/MainLogo.svg" />
+          </button>
         </div>
-        <div class="flex-1 overflow-y-auto flex flex-col gap-6">
+        <div class="flex-1 overflow-y-auto scrollbar-hide flex flex-col gap-6">
           <div
             v-for="menuGroup in filteredMenu"
             :key="menuGroup.groupId">
@@ -65,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { computed } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 import { hamburgerIcon } from '@/constants/iconPath'
@@ -78,9 +80,10 @@ const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
 
 const { isOpen } = defineProps<{ isOpen: boolean }>()
-defineEmits(['close'])
+const emit = defineEmits(['close'])
 
 const route = useRoute()
+const router = useRouter()
 
 const role = computed(() => info.value.role)
 const name = computed(() => info.value.name)
@@ -93,4 +96,9 @@ const filteredMenu = computed(() => {
       ? SIDE_MANAGER_MENU
       : SIDE_ADMIN_MENU
 })
+
+const onLogoClick = () => {
+  emit('close')
+  router.push('/')
+}
 </script>

src/components/top-bar/TopBar.vue

@@ -8,12 +8,15 @@
           @click="onOpenSide">
           <CommonIcons :name="hamburgerIcon" />
         </button>
-        <img src="/MainLogo.svg" />
+        <button @click="router.push('/')">
+          <img src="/MainLogo.svg" />
+        </button>
       </div>
       <div
         v-if="isLogined"
         class="flex items-center gap-5">
         <div
+          v-if="info.role !== 'ROLE_ADMIN'"
           :key="isNotifiVisible + ''"
           ref="notifiRef"
           class="flex">
@@ -63,9 +66,11 @@ import ProfileModal from './ProfileModal.vue'
 import { getNotifiCount } from '@/api/common'
 import ImageContainer from '../common/ImageContainer.vue'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
+import { useRouter } from 'vue-router'
 
 const memberStore = useMemberStore()
 const { isLogined, info } = storeToRefs(memberStore)
+const router = useRouter()
 
 onMounted(async () => {
   if (isLogined.value) {

src/components/user-manage/DepartmentDropDown.vue

@@ -18,7 +18,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">
+        class="absolute w-full h-40 overflow-y-auto scrollbar-hide top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
         <div
           v-for="department in dePartments"
           :key="department.departmentId"