CLAP-374 수정 사항 Tony.tsx

src/api/auth.ts

@@ -33,7 +33,7 @@ export const postLogin = async (nickName: string, password: string) => {
 }
 
 export const patchPassword = async (password: string) => {
-  const request = { password: password }
+  const request = { password }
   const response = await axiosInstance.patch('/api/members/password', request)
   return response.data
 }

src/assets/styles.css

@@ -51,19 +51,22 @@ body {
 }
 
 .button-medium {
-  @apply flex items-center justify-center rounded px-4 py-2 font-bold gap-1 text-xs cursor-pointer shrink-0;
+  @apply flex items-center justify-center rounded px-4 py-2 font-bold gap-1 text-xs cursor-pointer shrink-0 h-full;
 }
 .button-medium-primary {
   @apply button-medium bg-primary1 text-white hover:bg-[#6869DE];
 }
 .button-medium-secondary {
-  @apply button-medium bg-white border border-primary1 text-primary1 hover:bg-background-2;
+  @apply button-medium bg-white border border-primary1 text-primary1 hover:bg-primary2;
 }
 .button-medium-default {
   @apply button-medium bg-white border border-border-1 text-disabled hover:bg-background-2;
 }
 .button-medium-red {
-  @apply button-medium bg-white border border-red-1 text-red-1 hover:bg-background-2;
+  @apply button-medium bg-white border border-red-1 text-red-1 hover:bg-red-2;
+}
+.button-medium-disabled {
+  @apply button-medium text-disabled bg-background-1;
 }
 
 .button-small {
@@ -96,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-[120px] 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-scroll 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;

src/components/common/EditInformation.vue

@@ -206,7 +206,7 @@ const handlePwChange = () => {
 }
 
 const changePw = () => {
-  router.replace('/pw-check')
+  router.replace('/pw-change')
 }
 
 const warningModalToggle = () => {

src/components/common/ModalView.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     v-if="isOpen"
-    class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50"
+    class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-[99]"
     @click.self="closeModal" />
   <Transition name="modal">
     <div
       v-if="isOpen"
-      class="bg-white rounded-lg shadow-lg px-8 py-8 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50">
+      class="bg-white rounded-lg shadow-lg px-8 py-8 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[99]">
       <div class="flex flex-col gap-8 w-[300px]">
         <div class="flex flex-col gap-6">
           <div class="flex flex-col items-center gap-2">
@@ -20,13 +20,15 @@
               v-if="type == 'warningType'"
               :name="warningIcon" />
 
-            <div class="flex text-2xl font-bold justify-center">
+            <div
+              v-if="$slots.header"
+              class="flex text-2xl font-bold justify-center whitespace-pre-wrap text-center">
               <slot name="header"></slot>
             </div>
 
             <div
-              v-if="type != 'inputType'"
-              class="flex text-sm font-bold text-body justify-center whitespace-pre-line text-center">
+              v-if="type != 'inputType' && $slots.header"
+              class="flex text-sm font-bold text-body justify-center whitespace-pre-wrap text-center">
               <slot name="body"></slot>
             </div>
           </div>
@@ -79,10 +81,11 @@
 
 <script setup lang="ts">
 import { failIcon, successIcon, warningIcon } from '@/constants/iconPath'
-import { ref, watch } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
 import CommonIcons from './CommonIcons.vue'
+import { preventEnter } from '@/utils/preventEnter'
 
-const props = defineProps<{
+const { isOpen, type, modelValue } = defineProps<{
   isOpen: boolean
   type?: string
   modelValue?: string
@@ -94,7 +97,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
 
-const textValue = ref(props.modelValue || '')
+const textValue = ref(modelValue || '')
 
 watch(textValue, newValue => {
   emit('update:modelValue', newValue)
@@ -108,4 +111,22 @@ const closeModal = () => {
 const confirmModal = () => {
   emit('click')
 }
+
+watch(
+  () => isOpen,
+  () => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+      window.addEventListener('keydown', preventEnter)
+    } else {
+      document.body.style.overflow = ''
+      window.removeEventListener('keydown', preventEnter)
+    }
+  }
+)
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
+  window.removeEventListener('keydown', preventEnter)
+})
 </script>

src/components/common/TaskCard.vue

@@ -60,8 +60,6 @@ const borderLeft = computed(() => {
 })
 
 const handleModal = (id: number | null) => {
-  if (id) document.body.style.overflow = 'hidden'
-  else document.body.style.overflow = ''
   emit('toggleModal')
   selectedID.value = id
 }

src/components/filters/FilterCategory.vue

@@ -17,9 +17,9 @@
           <li
             class="filter-dropdown-option"
             v-for="category in categoryList"
-            :key="category.id"
+            :key="category.mainCategoryId"
             :class="
-              (main as number[]).includes(category.id)
+              (main as number[]).includes(category.mainCategoryId)
                 ? 'bg-primary1 text-white font-bold'
                 : 'hover:bg-background-2'
             "
@@ -58,13 +58,13 @@
             <li
               class="filter-dropdown-option"
               v-for="subCategory in category.subCategory"
-              :key="subCategory.id"
+              :key="subCategory.subCategoryId"
               :class="
-                (sub as number[]).includes(subCategory.id)
+                (sub as number[]).includes(subCategory.subCategoryId)
                   ? 'bg-primary1 text-white font-bold'
                   : 'hover:bg-background-2'
               "
-              @click="() => onSubClick(subCategory.id)">
+              @click="() => onSubClick(subCategory.subCategoryId)">
               {{ subCategory.name }}
             </li>
           </ul>
@@ -76,7 +76,7 @@
 
 <script setup lang="ts">
 import { dropdownIcon } from '@/constants/iconPath'
-import type { Category, FilterCategoryProps } from '@/types/common'
+import type { Category, FilterCategoryProps, SubCategory } from '@/types/common'
 import { computed, ref, watchEffect } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
@@ -91,7 +91,7 @@ const toggleDropdown = (type: 'main' | 'sub') =>
     ? (isMainOpened.value = !isMainOpened.value)
     : (isSubOpened.value = !isSubOpened.value)
 
-const selectedCategoryList = ref<{ name: string; subCategory: Category[] }[]>([])
+const selectedCategoryList = ref<{ name: string; subCategory: SubCategory[] }[]>([])
 const isDisabled = computed(() => {
   return selectedCategoryList.value.length === 0
 })
@@ -106,8 +106,8 @@ const onMainClick = (category: Category) => {
     )
     if (category.subCategory) {
       category.subCategory.forEach(el => {
-        if ((sub as number[]).includes(el.id)) {
-          emit('update:sub', el.id)
+        if ((sub as number[]).includes(el.subCategoryId)) {
+          emit('update:sub', el.subCategoryId)
         }
       })
     }
@@ -119,7 +119,7 @@ const onMainClick = (category: Category) => {
       })
     }
   }
-  emit('update:main', category.id)
+  emit('update:main', category.mainCategoryId)
 }
 const onSubClick = (value: number) => {
   emit('update:sub', value)

src/components/member-management/MemberManagementListCard.vue

@@ -23,8 +23,10 @@
       </button>
       <button
         type="button"
-        class="button-medium-secondary"
-        @click="onMemberInvite(info.memberId)">
+        :class="
+          info.memberStatus !== 'ACTIVE' ? 'button-medium-secondary' : 'button-medium-disabled'
+        "
+        @click="info.memberStatus !== 'ACTIVE' && onMemberInvite(info.memberId)">
         초대
       </button>
     </div>

src/components/my-request/MyRequestListCard.vue

@@ -30,8 +30,6 @@ const { info } = defineProps<{ info: MyRequestListData }>()
 const selectedID = ref<number | null>(null)
 
 const handleModal = (id: number | null) => {
-  if (id) document.body.style.overflow = 'hidden'
-  else document.body.style.overflow = ''
   selectedID.value = id
 }
 

src/components/my-task/MyTaskListCard.vue

@@ -30,8 +30,6 @@ const { info } = defineProps<{ info: MyTaskListData }>()
 const selectedID = ref<number | null>(null)
 
 const handleModal = (id: number | null) => {
-  if (id) document.body.style.overflow = 'hidden'
-  else document.body.style.overflow = ''
   selectedID.value = id
 }
 const myRequestTabList: ListCardProps[] = [

src/components/request-approve/RequestApprove.vue

@@ -74,7 +74,7 @@ import ManagerDropdown from './ManagerDropdown.vue'
 
 const isModalVisible = ref(false)
 const category1 = ref<Category | null>(null)
-const category2 = ref<Category | null>(null)
+const category2 = ref<SubCategory | null>(null)
 const mainCategoryArr = ref<Category[]>([])
 const subCategoryArr = ref<SubCategory[]>([])
 const afterSubCategoryArr = ref<SubCategory[]>([])
@@ -116,15 +116,15 @@ onMounted(async () => {
   category1.value = selected
   category2.value = subCategoryArr.value.find(ct => ct.name === data.categoryName) || null
   afterSubCategoryArr.value = subCategoryArr.value.filter(
-    subCategory => subCategory.mainCategoryId === selected?.id
+    subCategory => subCategory.mainCategoryId === selected?.mainCategoryId
   )
 })
 
 watch(category1, async newValue => {
   if (isFirst.value) isFirst.value = false
   else category2.value = null
   afterSubCategoryArr.value = subCategoryArr.value.filter(
-    subCategory => subCategory.mainCategoryId === newValue?.id
+    subCategory => subCategory.mainCategoryId === newValue?.mainCategoryId
   )
 })
 
@@ -151,7 +151,7 @@ const handleSubmit = async () => {
     return
   }
   const requestData = {
-    categoryId: category2.value.id,
+    categoryId: category2.value.subCategoryId,
     processorId: approveData.value.processor.memberId,
     dueDate: isTimeFilled.value
       ? convertToISO(approveData.value.dueDate, approveData.value.dueTime)

src/components/request-history/RequestHistoryListCard.vue

@@ -30,8 +30,6 @@ const { info } = defineProps<{ info: RequestHistoryListData }>()
 const selectedID = ref<number | null>(null)
 
 const handleModal = (id: number | null) => {
-  if (id) document.body.style.overflow = 'hidden'
-  else document.body.style.overflow = ''
   selectedID.value = id
 }
 const myRequestTabList: ListCardProps[] = [

src/components/request-task/CategoryDropDown.vue

@@ -32,7 +32,7 @@
         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"
+          :key="'subCategoryId' in option ? option.subCategoryId : option.mainCategoryId"
           class="w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer"
           @click="selectOption(option)">
           {{ option.name }}
@@ -45,7 +45,7 @@
 <script lang="ts" setup>
 import { dropdownIcon } from '@/constants/iconPath'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
-import type { Category, CategoryDropdownProps } from '@/types/common'
+import type { Category, CategoryDropdownProps, SubCategory } from '@/types/common'
 import { computed, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
@@ -62,7 +62,7 @@ const toggleDropdown = () => {
   dropdownOpen.value = !dropdownOpen.value
 }
 
-const selectOption = (option: Category) => {
+const selectOption = (option: Category | SubCategory) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }

src/components/request-task/ReRequestTask.vue

@@ -53,7 +53,7 @@ import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
 
 const category1 = ref<Category | null>(null)
-const category2 = ref<Category | null>(null)
+const category2 = ref<SubCategory | null>(null)
 
 const title = ref('')
 const description = ref('')
@@ -83,7 +83,7 @@ onMounted(async () => {
   category1.value = selected
   category2.value = subCategoryArr.value.find(ct => ct.name === data.categoryName) || null
   afterSubCategoryArr.value = subCategoryArr.value.filter(
-    subCategory => subCategory.mainCategoryId === selected?.id
+    subCategory => subCategory.mainCategoryId === selected?.mainCategoryId
   )
   title.value = data.title
   description.value = data.description
@@ -100,7 +100,7 @@ watch(category1, async newValue => {
     category2.value = null
   }
   afterSubCategoryArr.value = subCategoryArr.value.filter(
-    subCategory => subCategory.mainCategoryId === newValue?.id
+    subCategory => subCategory.mainCategoryId === newValue?.mainCategoryId
   )
 })
 
@@ -125,7 +125,7 @@ const handleSubmit = async () => {
     .map(initFile => initFile.fileId)
 
   const taskInfo = {
-    categoryId: category2.value.id,
+    categoryId: category2.value.subCategoryId,
     title: title.value,
     description: description.value
   }

src/components/request-task/RequestTask.vue

@@ -52,7 +52,7 @@ import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
 
 const category1 = ref<Category | null>(null)
-const category2 = ref<Category | null>(null)
+const category2 = ref<SubCategory | null>(null)
 
 const title = ref('')
 const description = ref('')
@@ -73,13 +73,13 @@ onMounted(async () => {
 watch(category1, async newValue => {
   category2.value = null
   afterSubCategoryArr.value = subCategoryArr.value.filter(
-    subCategory => subCategory.mainCategoryId === newValue?.id
+    subCategory => subCategory.mainCategoryId === newValue?.mainCategoryId
   )
 })
 
 watch(category2, async newVal => {
   if (newVal) {
-    const res = await getSubCategoryDetail(newVal.id)
+    const res = await getSubCategoryDetail(newVal.subCategoryId)
     description.value = res.descriptionExample
   }
 })
@@ -111,7 +111,7 @@ const handleSubmit = async () => {
   }
   const formData = new FormData()
   const taskInfo = {
-    categoryId: category2.value.id,
+    categoryId: category2.value.subCategoryId,
     title: title.value,
     description: description.value
   }