♻️ [refactor] 카테고리 추가 / 수정 validation 리팩토링

Author: seorang42

src/api/common.ts

@@ -1,42 +1,56 @@
+import { useMemberStore } from '@/stores/member'
 import { axiosInstance, formDataAxiosInstance } from '../utils/axios'
+import { createPinia, setActivePinia, storeToRefs } from 'pinia'
+
+setActivePinia(createPinia())
+
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 
 export const patchEditInfo = async (formdata: FormData) => {
+  if (!isLogined) return
   const response = await formDataAxiosInstance.patch('/api/members/info', formdata)
   return response.data
 }
 
 export const getNotification = async (pageNum: number, sizeNum: number) => {
+  if (!isLogined) return
   const response = await axiosInstance.get(`/api/notifications?page=${pageNum}&size=${sizeNum}`)
-
   return response.data
 }
 
 export const patchNotificationRead = async (notificationId: number) => {
+  if (!isLogined) return
   const response = await axiosInstance.patch(`/api/notifications/${notificationId}`)
   return response.data
 }
 
 export const getNotifiCount = async () => {
+  if (!isLogined) return
   const response = await axiosInstance.get(`/api/notifications/count`)
   return response.data
 }
 
 export const getMainCategory = async () => {
+  if (!isLogined) return
   const response = await axiosInstance.get('/api/main-category')
   return response.data
 }
 
 export const getSubCategory = async () => {
+  if (!isLogined) return
   const response = await axiosInstance.get('/api/sub-category')
   return response.data
 }
 
 export const getLabels = async () => {
+  if (!isLogined) return
   const response = await axiosInstance.get('/api/labels')
   return response.data
 }
 
 export const getCategory = async () => {
+  if (!isLogined) return
   const response = await axiosInstance.get('/api/category')
   return response.data
 }

src/components/request-approve/RequestApprove.vue

@@ -71,6 +71,8 @@ import CategoryDropDown from '../request-task/CategoryDropDown.vue'
 import DueDateInput from './DueDateInput.vue'
 import LabelDropdown from './LabelDropdown.vue'
 import ManagerDropdown from './ManagerDropdown.vue'
+import { useErrorStore } from '@/stores/error'
+import { redirectToLogin } from '@/utils/redirectToLogin'
 
 const isModalVisible = ref(false)
 const category1 = ref<Category | null>(null)
@@ -109,6 +111,11 @@ onBeforeRouteLeave((to, from, next) => {
 })
 
 onMounted(async () => {
+  const { setError } = useErrorStore()
+  if (!requestId) {
+    setError('존재하지 않는 요청입니다', '', () => redirectToLogin('/requested'))
+    return
+  }
   mainCategoryArr.value = await getMainCategory()
   subCategoryArr.value = await getSubCategory()
   const data = await getTaskDetailUser(requestId)

src/components/request-task/RequestTask.vue

@@ -5,14 +5,14 @@
       :options="mainCategoryArr"
       :label-name="'1차 카테고리'"
       :placeholderText="'1차 카테고리를 선택해주세요'"
-      :is-invalidate="isInvalidate"
+      :is-invalidate="isInvalidate === 'category1' ? 'category' : ''"
       :isDisabled="false" />
     <CategoryDropDown
       v-model="category2"
       :options="afterSubCategoryArr"
       :label-name="'2차 카테고리'"
       :placeholderText="'2차 카테고리를 선택해주세요'"
-      :is-invalidate="isInvalidate"
+      :is-invalidate="isInvalidate === 'category2' ? 'category' : ''"
       :isDisabled="!category1" />
     <RequestTaskInput
       v-model="title"
@@ -107,8 +107,11 @@ const handleCancel = () => {
 const handleSubmit = async () => {
   if (isSubmitting.value || isModalVisible.value) return
 
-  if (!category1.value || !category2.value) {
-    isInvalidate.value = 'category'
+  if (!category1.value) {
+    isInvalidate.value = 'category1'
+    return
+  } else if (!category2.value) {
+    isInvalidate.value = 'category2'
     return
   } else if (!title.value) {
     isInvalidate.value = 'input'

src/components/request-task/RequestTaskDropdown.vue

@@ -3,6 +3,7 @@
     <div class="flex text-xs text-red-1 gap-x-1 mb-2">
       <p class="text-body font-bold">{{ labelName }}</p>
       <p v-if="!isLabel">*</p>
+      <p v-if="!isInvalidate">카테고리를 선택해주세요</p>
     </div>
     <div
       ref="htmlRef"
@@ -40,7 +41,7 @@ import { ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
 
-const { placeholderText, options, labelName, modelValue, isLabel, disabled } =
+const { placeholderText, options, labelName, modelValue, isLabel, disabled, isInvalidate } =
   defineProps<RequestTaskDropdownProps>()
 const emit = defineEmits(['update:modelValue'])
 const dropdownOpen = ref(false)

src/components/request-task/RequestTaskInput.vue

@@ -6,6 +6,9 @@
       <p v-if="isInvalidateState === 'input'">{{ labelName }}을 입력해주세요</p>
       <p v-if="isInvalidateState === 'duplicate'">회원아이디가 중복되었습니다</p>
       <p v-if="isInvalidateState === 'title'">제목은 30자 이내로 적어주세요</p>
+      <p v-if="isInvalidateState === 'noCode'">작업코드를 입력해주세요</p>
+      <p v-if="isInvalidateState === 'code'">사용할 수 없는 작업코드입니다</p>
+      <p v-if="isInvalidateState === 'categoryName'">카테고리명을 입력해주세요</p>
     </div>
     <input
       class="w-full h-11 border border-border-1 px-4 focus:outline-none rounded"
@@ -15,11 +18,6 @@
       :placeholder="placeholderText"
       :class="{ 'text-gray-500': isEdit }"
       :maxlength="labelName === '제목' ? 30 : undefined" />
-    <p
-      v-if="isInvalidateState === 'code'"
-      class="text-red-1 text-xs absolute top-[calc(100%+4px)]">
-      사용할 수 없는 작업코드입니다.
-    </p>
   </div>
 </template>
 

src/components/task-management/CategoryAdd.vue

@@ -14,28 +14,24 @@
       <template #header>{{ route.params.id ? '수정을' : '추가를' }} 취소 하시겠습니까?</template>
       <template #body>작성하신 내용은 사라집니다</template>
     </ModalView>
-    <ModalView
-      :is-open="isModalVisible.fail"
-      type="failType"
-      @close="handleFailModal">
-      <template #header>{{ errorMessage }}</template>
-    </ModalView>
     <RequestTaskDropdown
       v-model="mainCategory"
       :options="categoryOptions.map(el => el.name)"
       label-name="1차 카테고리"
       placeholder-text="1차 카테고리를 선택해주세요"
       v-if="categoryStep == '2'"
-      :disabled="route.params.id !== undefined" />
+      :disabled="route.params.id !== undefined"
+      :is-invalidate="hasMainCategory" />
     <RequestTaskInput
       v-model="categoryForm.name"
       placeholder-text="카테고리명을 입력해주세요"
-      :label-name="`${categoryStep}차 카테고리명`" />
+      :label-name="`${categoryStep}차 카테고리명`"
+      :is-invalidate="errorMessage.categoryName" />
     <RequestTaskInput
       v-model="categoryForm.code"
       placeholder-text="카테고리의 작업코드를 입력해주세요"
       label-name="작업코드 (대문자 영어 2글자까지)"
-      :is-invalidate="isCodeInvalidate" />
+      :is-invalidate="errorMessage.categoryCode === 'noCode' ? 'noCode' : isCodeInvalidate" />
 
     <div
       v-if="categoryStep === '2'"
@@ -68,7 +64,6 @@ import { axiosInstance } from '@/utils/axios'
 import { getMainCategory } from '@/api/common'
 import type { Category, CategoryForm } from '@/types/common'
 import ModalView from '../common/ModalView.vue'
-import axios from 'axios'
 
 const router = useRouter()
 const route = useRoute()
@@ -78,7 +73,8 @@ const { categoryStep } = defineProps<{
 }>()
 
 const isModalVisible = ref({ add: false, cancel: false, fail: false })
-const errorMessage = ref('')
+const errorMessage = ref({ categoryName: '', categoryCode: '' })
+const hasMainCategory = ref(true)
 
 const categoryForm = ref<CategoryForm>(CATEGORY_FORM)
 
@@ -89,10 +85,6 @@ const handleAddModal = () => {
 const handleCancelModal = () => {
   isModalVisible.value.cancel = !isModalVisible.value.cancel
 }
-const handleFailModal = (message: string = '카테고리 정보를 확인해주세요') => {
-  errorMessage.value = message
-  isModalVisible.value.fail = !isModalVisible.value.fail
-}
 
 const handleCancel = () => {
   handleCancelModal()
@@ -103,36 +95,32 @@ const handleGoBack = () => {
 }
 
 const handleSubmit = async () => {
-  if (
-    isCodeInvalidate.value ||
-    categoryForm.value.name.length === 0 ||
-    categoryForm.value.code.length === 0 ||
-    (categoryStep === '2' && categoryForm.value.mainCategoryId === undefined)
-  ) {
-    handleFailModal()
+  hasMainCategory.value = true
+  errorMessage.value = { categoryCode: '', categoryName: '' }
+  if (!categoryForm.value.mainCategoryId) {
+    hasMainCategory.value = false
+    return
+  } else if (isCodeInvalidate.value) {
+    errorMessage.value.categoryCode = 'code'
+    return
+  } else if (categoryForm.value.name.length === 0) {
+    errorMessage.value.categoryName = 'categoryName'
+    return
+  } else if (categoryForm.value.code.length === 0) {
+    errorMessage.value.categoryCode = 'noCode'
     return
   }
 
-  try {
-    const categoryId = route.params.id
-    if (categoryId) {
-      const patchUrl = `/api/managements/categories/${categoryId}`
-      await axiosInstance.patch(patchUrl, categoryForm.value)
-    } else {
-      const postUrl =
-        categoryStep === '1' ? '/api/managements/main-category' : '/api/managements/sub-category'
-      await axiosInstance.post(postUrl, categoryForm.value)
-    }
-    isModalVisible.value.add = true
-  } catch (error) {
-    if (axios.isAxiosError(error)) {
-      if (error.response?.data === 'TASK_013') {
-        handleFailModal('중복된 카테고리명\n혹은 고유코드입니다')
-      } else {
-        handleFailModal()
-      }
-    }
+  const categoryId = route.params.id
+  if (categoryId) {
+    const patchUrl = `/api/managements/categories/${categoryId}`
+    await axiosInstance.patch(patchUrl, categoryForm.value)
+  } else {
+    const postUrl =
+      categoryStep === '1' ? '/api/managements/main-category' : '/api/managements/sub-category'
+    await axiosInstance.post(postUrl, categoryForm.value)
   }
+  isModalVisible.value.add = true
 }
 
 const isCodeInvalidate = computed(() => {
@@ -163,7 +151,8 @@ onMounted(async () => {
       const mainCategoryId = ref(Number(route.query.mainCategoryId))
       categoryForm.value.mainCategoryId = mainCategoryId.value
       mainCategory.value =
-        categoryOptions.value.find(el => el.mainCategoryId === mainCategoryId.value)?.name || ''
+        categoryOptions.value.find(el => el.mainCategoryId === mainCategoryId.value)?.name ||
+        '1차 카테고리를 선택해주세요'
     }
     if (id) {
       const { data: initialValue } = await axiosInstance.get(`/api/sub-categories/${id}`)

src/types/user.ts

@@ -21,6 +21,7 @@ export interface RequestTaskDropdownProps {
   modelValue: string
   isLabel?: boolean
   disabled?: boolean
+  isInvalidate?: boolean
 }
 
 export interface RequestTaskInputProps {

src/utils/axios.ts

@@ -43,6 +43,7 @@ const setInterceptors = (instance: AxiosInstance) => {
   instance.interceptors.response.use(
     response => response,
     async error => {
+      console.log(error)
       const { setError } = useErrorStore()
       if (axios.isCancel(error)) {
         setError('요청이 취소되었습니다:', error.message)
@@ -77,7 +78,9 @@ const setInterceptors = (instance: AxiosInstance) => {
             break
           }
           case 400:
-            if (error.response.data === 'MEMBER_013') {
+            if (error.response.data === 'TASK_013') {
+              setError('중복된 카테고리명\n혹은 고유코드입니다')
+            } else if (error.response.data === 'MEMBER_013') {
               return Promise.reject(new Error('MEMBER_REVIEWER'))
             } else if (error.response.data === 'MEMBER_012') {
               return Promise.reject(new Error('MEMBER_DUPLICATED'))

src/utils/redirectToLogin.ts

@@ -1,7 +1,7 @@
 import { useErrorStore } from '@/stores/error'
 
-export const redirectToLogin = () => {
+export const redirectToLogin = (url?: string) => {
   const { clearError } = useErrorStore()
   clearError()
-  window.location.href = '/login'
+  window.location.href = url || '/login'
 }