CLAP-311 2차 카테고리 부가설명 템플릿 추가 기능 구현

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/request-task/RequestTaskTextArea.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div class="flex flex-col gap-2">
     <p class="text-body text-xs font-bold">부가설명</p>
     <textarea
-      class="w-full h-24 mt-2 border border-border-1 px-4 py-2 resize-none focus:outline-none rounded"
+      class="w-full h-32 border border-border-1 px-4 py-2 resize-none focus:outline-none rounded"
       :value="modelValue"
       :placeholder="placeholderText"
       @input="updateValue(($event.target as HTMLInputElement).value)">

src/components/task-management/CategoryAdd.vue

@@ -38,6 +38,18 @@
       label-name="고유코드 (대문자 영어 2글자까지)"
       :is-invalidate="isCodeInvalidate" />
 
+    <div
+      v-if="categoryStep === '2'"
+      class="flex flex-col gap-2">
+      <p class="text-body text-xs font-bold">부가설명 템플릿</p>
+      <textarea
+        class="w-full h-32 border border-border-1 px-4 py-2 resize-none focus:outline-none rounded"
+        :value="categoryForm.descriptionExample"
+        :placeholder="'부가설명 템플릿을 작성해주세요'"
+        @input="onValueChange">
+      </textarea>
+    </div>
+
     <FormButtonContainer
       :handle-cancel="handleCancel"
       :handle-submit="handleSubmit"
@@ -55,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()
@@ -134,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 || ''
       }
     }
   }
@@ -161,4 +173,9 @@ watch(mainCategory, () => {
     el => el.name === mainCategory.value
   )?.id
 })
+
+const onValueChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  categoryForm.value.descriptionExample = target.value
+}
 </script>

src/components/task-management/CategoryLine.vue

@@ -18,12 +18,12 @@
           <div class="flex gap-2 text-xs font-bold">
             <button
               @click="router.push(`/category-first/${main.id}`)"
-              class="text-primary1">
+              class="text-primary1 hover:underline">
               수정
             </button>
             <button
               @click="openModal(main.id)"
-              class="text-red-1">
+              class="text-red-1 hover:underline">
               삭제
             </button>
           </div>

src/components/task-management/CategoryLineSub.vue

@@ -16,12 +16,12 @@
           <div class="flex gap-2 text-xs font-bold">
             <button
               @click="router.push(`/category-second/${sub.id}`)"
-              class="text-primary1">
+              class="text-primary1 hover:underline">
               수정
             </button>
             <button
               @click="openModal(sub.id)"
-              class="text-red-1">
+              class="text-red-1 hover:underline">
               삭제
             </button>
           </div>
@@ -36,7 +36,7 @@
         </ModalView>
       </div>
       <div
-        class="category-management-line gap-1 justify-center cursor-pointer bg-white"
+        class="category-management-line gap-1 justify-center cursor-pointer bg-white hover:bg-background-2"
         @click="MovetoAddSubCategory">
         <CommonIcons :name="plusIcon" />
         <p class="text-xs text-disabled font-bold">새 2차 카테고리 추가</p>

src/components/task-management/CategoryManagement.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col w-full min-h-[480px] max-h-[480px] border border-border-1 rounded-lg bg-background-1 overflow-y-auto scrollbar-hide">
+    class="flex flex-col w-full h-[480px] border border-border-1 rounded-lg bg-background-1 overflow-hidden">
     <div class="flex w-full">
       <div class="task-management-title rounded-tl-lg">
         <p>고유코드</p>
@@ -12,19 +12,18 @@
         <p>2차 카테고리</p>
       </div>
     </div>
-    <div class="flex w-full">
-      <CategoryLine :categories="data" />
-      <div class="bg-border-1 w-0.5"></div>
-      <CategoryLineSub :categories="data" />
-    </div>
-    <div
-      class="text-xs text-disabled font-bold gap-1 shrink-0 category-management-line justify-center cursor-pointer bg-white"
-      @click="MovetoAddCategory">
-      <CommonIcons :name="plusIcon" />
-      <p>새 1차 카테고리 추가</p>
-    </div>
-    <div class="mt-4">
-      <CategoryList />
+    <div class="flex flex-col w-full grow overflow-y-auto">
+      <div class="flex">
+        <CategoryLine :categories="data || []" />
+        <div class="bg-border-1 w-0.5"></div>
+        <CategoryLineSub :categories="data || []" />
+      </div>
+      <div
+        class="text-xs text-disabled font-bold gap-1 shrink-0 category-management-line justify-center cursor-pointer bg-white !border-b-0 hover:bg-background-2"
+        @click="MovetoAddCategory">
+        <CommonIcons :name="plusIcon" />
+        <p>새 1차 카테고리 추가</p>
+      </div>
     </div>
   </div>
 </template>

src/components/task-management/ColorSelectModal.vue

@@ -3,10 +3,10 @@
     v-if="isOpen"
     class="absolute top-7 left-3 w-[176px] h-[120px] p-4 flex flex-col !z-50 shadow-custom rounded-lg bg-white gap-4 import"
     @click.self="closeModal">
-    <div class="flex w-full justify-between">
+    <div class="flex w-full justify-between items-center">
       <p class="text-xs font-bold text-body">색상 선택</p>
       <CommonIcons
-        :class="'cursor-pointer'"
+        :class="'cursor-pointer rounded hover:bg-background-2'"
         :name="closeIcon"
         @click="closeModal" />
     </div>

src/components/task-management/LabelManagement.vue

@@ -1,19 +1,19 @@
 <template>
   <div
-    class="flex flex-col w-full min-h-[240px] overflow-y-auto border border-border-1 rounded-lg bg-background-1">
+    class="flex flex-col w-full h-[240px] overflow-hidden border border-border-1 rounded-lg bg-background-1">
     <div class="flex w-full">
       <div class="task-management-title rounded-tl-lg">
         <p>색상</p>
         <p>구분명</p>
       </div>
     </div>
-    <div class="flex flex-col w-full shrink-0 overflow-y-auto pb-8">
+    <div class="flex flex-col w-full grow overflow-y-auto pb-32">
       <LabelManagementLine
         :label-data="labelData"
         @updateLabels="fetchLabels" />
       <div
         v-if="!isAdd"
-        class="w-full h-11 text-xs shrink-0 text-disabled gap-1 category-management-line justify-center cursor-pointer bg-white"
+        class="w-full h-11 text-xs shrink-0 text-disabled gap-1 category-management-line justify-center cursor-pointer bg-white !border-b-0 hover:bg-background-2"
         @click="isAdd = true">
         <CommonIcons :name="plusIcon" />
         새 구분 추가

src/components/task-management/LabelManagementLine.vue

@@ -11,7 +11,7 @@
               borderColor: getColor(label.labelColor)?.borderColor,
               backgroundColor: getColor(label.labelColor)?.fillColor
             }"
-            class="w-4 h-4 rounded-full border-2 cursor-pointer pr-3"
+            class="w-4 h-4 rounded-full border-2 cursor-pointer pr-3 relative"
             @click="isEdit && clickColor(label.labelId)"></div>
           <ColorSelectModal
             v-if="isColorModalVisible && editValue.labelId === label.labelId"
@@ -33,7 +33,7 @@
         <div class="flex gap-2 text-xs font-bold">
           <button
             @click="isEdit && editValue.labelId === label.labelId ? finishEdit() : startEdit(label)"
-            class="text-primary1 w-[21px]">
+            class="text-primary1 w-[21px] hover:underline">
             {{ isEdit && editValue.labelId === label.labelId ? '확인' : '수정' }}
           </button>
           <button
@@ -44,8 +44,8 @@
             "
             :class="
               isEdit && editValue.labelId === label.labelId
-                ? 'text-disabled w-[21px]'
-                : 'text-red-1 w-[21px]'
+                ? 'text-disabled w-[21px] hover:underline'
+                : 'text-red-1 w-[21px] hover:underline'
             ">
             {{ isEdit && editValue.labelId === label.labelId ? '취소' : '삭제' }}
           </button>

src/constants/admin.ts

@@ -42,7 +42,8 @@ import type { RoleTypes, RoleTypesEnum, UserRegistrationProps } from '@/types/ad
 
 export const CATEGORY_FORM: CategoryForm = {
   name: '',
-  code: ''
+  code: '',
+  descriptionExample: ''
 }
 
 export const INITIAL_USER_REGISTRATION: UserRegistrationProps = {

src/types/common.ts

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

src/types/user.ts

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