CLAP-218 카테고리 추가 API 연결

src/components/task-management/CategoryAdd.vue

@@ -22,15 +22,15 @@
     </ModalView>
     <!-- 카테고리 목록 API 필요, 임시로 역할로 설정 -->
     <RequestTaskDropdown
-      v-model="categoryForm.firstCategory"
-      :options="RoleKeys"
+      v-model="mainCategory"
+      :options="categoryOptions.map(el => el.name)"
       label-name="1차 카테고리"
       placeholder-text="1차 카테고리를 선택해주세요"
-      v-if="props.categoryStep == '2'" />
+      v-if="categoryStep == '2'" />
     <RequestTaskInput
       v-model="categoryForm.name"
       placeholder-text="카테고리명을 입력해주세요"
-      :label-name="`${props.categoryStep}차 카테고리명`" />
+      :label-name="`${categoryStep}차 카테고리명`" />
     <RequestTaskInput
       v-model="categoryForm.code"
       placeholder-text="카테고리의 고유코드를 입력해주세요"
@@ -46,24 +46,26 @@
 </template>
 
 <script lang="ts" setup>
-import { CATEGORY_FIRST_ADD, CATEGORY_SECOND_ADD, RoleKeys } from '@/constants/admin'
-import { computed, ref } from 'vue'
+import { CATEGORY_FORM } from '@/constants/admin'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
 import ModalView from '../ModalView.vue'
 import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import RequestTaskInput from '../request-task/RequestTaskInput.vue'
 import { axiosInstance } from '@/utils/axios'
+import { getMainCategory } from '@/api/common'
+import type { Category, CategoryForm } from '@/types/common'
 
 const router = useRouter()
 
-const props = defineProps<{
+const { categoryStep } = defineProps<{
   categoryStep: string
 }>()
 
 const isModalVisible = ref({ add: false, cancel: false, fail: false })
 
-const categoryForm = ref(props.categoryStep == '1' ? CATEGORY_FIRST_ADD : CATEGORY_SECOND_ADD)
+const categoryForm = ref<CategoryForm>(CATEGORY_FORM)
 
 const handleAddModal = () => {
   isModalVisible.value.add = false
@@ -88,20 +90,19 @@ const handleSubmit = async () => {
   if (
     isCodeInvalidate.value ||
     categoryForm.value.name.length === 0 ||
-    categoryForm.value.code.length === 0
+    categoryForm.value.code.length === 0 ||
+    (categoryStep === '2' && categoryForm.value.mainCategoryId === undefined)
   ) {
     handleFailModal()
     return
   }
 
   try {
-    const response = await axiosInstance.post(
-      '/api/managements/main-category',
-      categoryForm.value,
-      {
-        headers: { Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}` }
-      }
-    )
+    const requestUrl =
+      categoryStep === '1' ? '/api/managements/main-category' : '/api/managements/sub-category'
+    await axiosInstance.post(requestUrl, categoryForm.value, {
+      headers: { Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}` }
+    })
     isModalVisible.value.add = true
   } catch {
     handleFailModal()
@@ -115,4 +116,17 @@ const isCodeInvalidate = computed(() => {
   const isInvalidate = !/^[A-Z]{1,2}$/.test(code)
   return isInvalidate ? 'code' : ''
 })
+
+const mainCategory = ref('')
+const categoryOptions = ref<Category[]>([])
+onMounted(async () => {
+  categoryOptions.value = await getMainCategory()
+  if (categoryStep === '2')
+    categoryForm.value = { ...categoryForm.value, mainCategoryId: undefined }
+})
+watch(mainCategory, () => {
+  categoryForm.value.mainCategoryId = categoryOptions.value.find(
+    el => el.name === mainCategory.value
+  )?.id
+})
 </script>

src/constants/admin.ts

@@ -1,4 +1,4 @@
-import type { ListBarTabProps, MainCategoryTypes, Option, SubCategoryTypes } from '@/types/common'
+import type { CategoryForm, ListBarTabProps, Option } from '@/types/common'
 
 export const MEMBER_MANAGEMENT_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '이름', width: 60 },
@@ -36,17 +36,11 @@ export const LOGS_LIST_BAR_TAB: ListBarTabProps[] = [
 
 import type { RoleTypes, RoleTypesEnum, UserRegistrationProps } from '@/types/admin'
 
-export const CATEGORY_FIRST_ADD: MainCategoryTypes = {
+export const CATEGORY_FORM: CategoryForm = {
   name: '',
   code: ''
 }
 
-export const CATEGORY_SECOND_ADD: SubCategoryTypes = {
-  name: '',
-  mainCategoryId: 0,
-  code: ''
-}
-
 export const INITIAL_USER_REGISTRATION: UserRegistrationProps = {
   name: '',
   email: '',

src/types/common.ts

@@ -79,21 +79,16 @@ export interface LabelDataTypes {
   labelColor: string
 }
 
-export interface MainCategoryTypes {
-  name: string
-  code: string
-}
-
-export interface SubCategoryTypes {
-  mainCategoryId: number
+export interface CategoryForm {
   name: string
   code: string
+  mainCategoryId?: number
 }
 
 export interface CategoryDropdownProps {
-  options: MainCategoryTypes[] | SubCategoryTypes[]
+  options: CategoryForm
   labelName: string
-  modelValue: MainCategoryTypes | SubCategoryTypes | null
+  modelValue?: CategoryForm
   isLabel?: boolean
   isDisabled?: boolean
   isInvalidate?: string