✨ [feat] : 2차 카테고리 수정 초기 정보 연결

Author: seorang42

src/assets/styles.css

@@ -38,29 +38,29 @@ body {
   @apply flex w-full py-3 font-bold border rounded items-center justify-center min-w-[138px];
 }
 .button-large-default {
-  @apply button-large bg-white text-zinc-400 border-zinc-400;
+  @apply button-large bg-white text-disabled border-border-1 hover:bg-background-2;
 }
 .button-large-red {
-  @apply button-large bg-red-1 text-white border-red-1;
+  @apply button-large bg-red-1 text-white border-red-1 hover:bg-[#D61E1E];
 }
 .button-large-primary {
-  @apply button-large bg-primary1 text-white border-primary1;
+  @apply button-large bg-primary1 text-white border-primary1 hover:bg-[#6D6EF0];
 }
 
 .button-medium {
   @apply flex items-center justify-center rounded px-4 py-2 font-bold gap-1 text-xs cursor-pointer shrink-0;
 }
 .button-medium-primary {
-  @apply button-medium bg-primary1 text-white;
+  @apply button-medium bg-primary1 text-white hover:bg-[#6869DE];
 }
 .button-medium-secondary {
-  @apply button-medium bg-white border border-primary1 text-primary1;
+  @apply button-medium bg-white border border-primary1 text-primary1 hover:bg-background-2;
 }
 .button-medium-default {
-  @apply button-medium bg-white border border-border-1 text-disabled;
+  @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;
+  @apply button-medium bg-white border border-red-1 text-red-1 hover:bg-background-2;
 }
 
 .button-small {

src/components/task-management/CategoryAdd.vue

@@ -67,8 +67,8 @@ 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, getSubCategory } from '@/api/common'
-import type { Category, CategoryForm, SubCategory } from '@/types/common'
+import { getMainCategory } from '@/api/common'
+import type { Category, CategoryForm } from '@/types/common'
 
 const router = useRouter()
 const route = useRoute()
@@ -146,24 +146,24 @@ onMounted(async () => {
   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 }
+      const initialValue = mainCategories.find(el => el.id === id)
+      if (initialValue) {
+        categoryForm.value = { name: initialValue.name, code: initialValue.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) {
+      const { data: initialValue } = await axiosInstance.get(`/api/sub-categories/${id}`)
+      if (initialValue) {
         categoryForm.value = {
-          name: initailValue.name,
-          code: initailValue.code,
-          mainCategoryId: initailValue.mainCategoryId
+          name: initialValue.name,
+          code: initialValue.code,
+          mainCategoryId: initialValue.mainCategoryId,
+          descriptionExample: initialValue.descriptionExample
         }
         mainCategory.value =
-          categoryOptions.value.find(el => el.id === initailValue.mainCategoryId)?.name || ''
+          categoryOptions.value.find(el => el.id === initialValue.mainCategoryId)?.name || ''
       }
     }
   }

src/types/common.ts

@@ -25,6 +25,7 @@ export interface SubCategory {
   mainCategoryId: number
   name: string
   code: string
+  descriptionExample: string
 }
 
 export interface FilterCategoryProps {