CLAP-242 카테고리 수정 API 연결

src/api/admin.ts

@@ -1,11 +1,6 @@
 import type { LabelDataTypes, NewLabelTypes } from '@/types/admin'
 import { axiosInstance } from '@/utils/axios'
 
-export const getLabelsAdmin = async () => {
-  const response = await axiosInstance.get('/api/managements/labels')
-  return response.data
-}
-
 export const deleteLabelAdmin = async (id: number) => {
   const response = await axiosInstance.delete(`/api/management/labels/${id}`)
   return response.data

src/api/common.ts

@@ -14,3 +14,8 @@ export const getAllCategory = async () => {
   const response = await axiosInstance.get('/api/category')
   return response.data
 }
+
+export const getLabels = async () => {
+  const response = await axiosInstance.get('/api/labels')
+  return response.data
+}

src/components/request-task/RequestTaskDropdown.vue

@@ -10,8 +10,9 @@
     </div>
     <div class="relative flex text-base">
       <div
-        class="flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black"
-        @click="toggleDropdown">
+        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'"
+        @click="!disabled && toggleDropdown()">
         <p :class="{ 'text-disabled': modelValue === placeholderText }">
           {{ modelValue || placeholderText }}
         </p>
@@ -40,7 +41,7 @@ import type { RequestTaskDropdownProps } from '@/types/user'
 import { ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { placeholderText, options, labelName, modelValue, isLabel } =
+const { placeholderText, options, labelName, modelValue, isLabel, disabled } =
   defineProps<RequestTaskDropdownProps>()
 const emit = defineEmits(['update:modelValue'])
 const dropdownOpen = ref(false)

src/components/task-management/CategoryAdd.vue

@@ -4,14 +4,14 @@
       :is-open="isModalVisible.add"
       type="successType"
       @close="handleAddModal">
-      <template #header>카테고리가 등록되었습니다</template>
+      <template #header>카테고리가 {{ route.params.id ? '수정' : '등록' }}되었습니다</template>
     </ModalView>
     <ModalView
       :is-open="isModalVisible.cancel"
       type="warningType"
       @close="handleCancelModal"
       @click="handleGoBack">
-      <template #header>생성을 취소 하시겠습니까?</template>
+      <template #header>{{ route.params.id ? '수정' : '생성' }}을 취소 하시겠습니까?</template>
       <template #body>작성하신 내용은 사라집니다</template>
     </ModalView>
     <ModalView
@@ -26,7 +26,8 @@
       :options="categoryOptions.map(el => el.name)"
       label-name="1차 카테고리"
       placeholder-text="1차 카테고리를 선택해주세요"
-      v-if="categoryStep == '2'" />
+      v-if="categoryStep == '2'"
+      :disabled="route.params.id !== undefined" />
     <RequestTaskInput
       v-model="categoryForm.name"
       placeholder-text="카테고리명을 입력해주세요"
@@ -41,23 +42,24 @@
       :handle-cancel="handleCancel"
       :handle-submit="handleSubmit"
       cancel-text="취소"
-      submit-text="생성" />
+      :submit-text="route.params.id ? '수정' : '등록'" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { CATEGORY_FORM } from '@/constants/admin'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, 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'
+import { getMainCategory, getSubCategory } from '@/api/common'
+import type { Category, CategoryForm, SubCategory } from '@/types/common'
 
 const router = useRouter()
+const route = useRoute()
 
 const { categoryStep } = defineProps<{
   categoryStep: string
@@ -98,11 +100,18 @@ const handleSubmit = async () => {
   }
 
   try {
-    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}` }
-    })
+    const categoryId = route.params.id
+    if (categoryId) {
+      const patchUrl = `/api/managements/categories/${categoryId}`
+      await axiosInstance.patch(patchUrl, {
+        name: categoryForm.value.name,
+        code: categoryForm.value.code
+      })
+    } else {
+      const postUrl =
+        categoryStep === '1' ? '/api/managements/main-category' : '/api/managements/sub-category'
+      await axiosInstance.post(postUrl, categoryForm.value)
+    }
     isModalVisible.value.add = true
   } catch {
     handleFailModal()
@@ -120,9 +129,32 @@ const isCodeInvalidate = computed(() => {
 const mainCategory = ref('')
 const categoryOptions = ref<Category[]>([])
 onMounted(async () => {
-  categoryOptions.value = await getMainCategory()
-  if (categoryStep === '2')
-    categoryForm.value = { ...categoryForm.value, mainCategoryId: undefined }
+  const id = Number(route.params.id)
+  categoryForm.value = { ...CATEGORY_FORM }
+  if (categoryStep === '1') {
+    if (id) {
+      const mainCategories: Category[] = await getMainCategory()
+      const initailValue = mainCategories.find(el => el.id === id)
+      if (initailValue) {
+        categoryForm.value = { name: initailValue.name, code: initailValue.code }
+      }
+    }
+  } else if (categoryStep === '2') {
+    categoryOptions.value = await getMainCategory()
+    if (id) {
+      const subCategory: SubCategory[] = await getSubCategory()
+      const initailValue = subCategory.find(el => el.id === id)
+      if (initailValue) {
+        categoryForm.value = {
+          name: initailValue.name,
+          code: initailValue.code,
+          mainCategoryId: initailValue.mainCategoryId
+        }
+        mainCategory.value =
+          categoryOptions.value.find(el => el.id === initailValue.mainCategoryId)?.name || ''
+      }
+    }
+  }
 })
 watch(mainCategory, () => {
   categoryForm.value.mainCategoryId = categoryOptions.value.find(

src/components/task-management/CategoryLine.vue

@@ -17,7 +17,7 @@
           </div>
           <div class="flex gap-2 text-xs font-bold">
             <button
-              @click="router.push('수정경로')"
+              @click="router.push(`/category-first/${main.id}`)"
               class="text-primary1">
               수정
             </button>

src/components/task-management/CategoryLineSub.vue

@@ -15,7 +15,7 @@
           </div>
           <div class="flex gap-2 text-xs font-bold">
             <button
-              @click="router.push('수정경로')"
+              @click="router.push(`/category-second/${sub.id}`)"
               class="text-primary1">
               수정
             </button>

src/components/task-management/LabelManagement.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { getLabelsAdmin, postAddLabelAdmin } from '@/api/admin'
+import { postAddLabelAdmin } from '@/api/admin'
 import { plusIcon } from '@/constants/iconPath'
 import type { LabelDataTypes, NewLabelTypes } from '@/types/admin'
 import type { LabelColorTypes } from '@/types/common'
@@ -67,6 +67,7 @@ import { onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 import ColorSelectModal from './ColorSelectModal.vue'
 import LabelManagementLine from './LabelManagementLine.vue'
+import { getLabels } from '@/api/common'
 
 const labelData = ref<LabelDataTypes[]>([])
 const newLabel = ref<NewLabelTypes>({
@@ -77,7 +78,7 @@ const isColorVisible = ref(false)
 const isAdd = ref(false)
 
 const fetchLabels = async () => {
-  labelData.value = await getLabelsAdmin()
+  labelData.value = await getLabels()
 }
 
 onMounted(async () => {

src/router/index.ts

@@ -60,12 +60,26 @@ const router = createRouter({
     {
       path: '/category-first',
       name: 'CategoryFirst',
-      component: () => import('../views/CategoryFirstAdd.vue')
+      component: () => import('../views/CategoryFirstAdd.vue'),
+      children: [
+        {
+          path: ':id',
+          name: 'EditSubCategory',
+          component: () => import('../views/CategoryFirstAdd.vue')
+        }
+      ]
     },
     {
       path: '/category-second',
       name: 'CategorySecond',
-      component: () => import('../views/CategorySecondAdd.vue')
+      component: () => import('../views/CategorySecondAdd.vue'),
+      children: [
+        {
+          path: ':id',
+          name: 'EditMainCategory',
+          component: () => import('../views/CategorySecondAdd.vue')
+        }
+      ]
     },
     {
       path: '/login-logs',

src/types/user.ts

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

src/views/CategoryFirstAdd.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="form-view-container">
-    <TitleBar title="1차 카테고리 생성" />
+    <TitleBar :title="`1차 카테고리 ${$route.params.id ? '수정' : '등록'}`" />
     <CategoryAdd categoryStep="1" />
   </div>
 </template>
@@ -9,5 +9,3 @@
 import TitleBar from '@/components/TitleBar.vue'
 import CategoryAdd from '../components/task-management/CategoryAdd.vue'
 </script>
-
-<style scoped></style>

src/views/CategorySecondAdd.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="form-view-container">
-    <TitleBar title="2차 카테고리 생성" />
+    <TitleBar :title="`2차 카테고리 ${$route.params.id ? '수정' : '등록'}`" />
     <CategoryAdd categoryStep="2" />
   </div>
   <div class="w-full bg-body"></div>
@@ -10,5 +10,3 @@
 import TitleBar from '@/components/TitleBar.vue'
 import CategoryAdd from '../components/task-management/CategoryAdd.vue'
 </script>
-
-<style scoped></style>