✨ [feat] : 2차 카테고리 부가설명 템플릿 추가 API 연결

Author: seorang42

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"
@@ -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

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