From 711c66df73ac75f10316fec951ab8ce39d34ff5f Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sun, 2 Feb 2025 19:24:24 +0900
Subject: [PATCH 1/2] =?UTF-8?q?:sparkles:=20[feat]=20:=201=EC=B0=A8=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=B6=94=EA=B0=80=20API?=
 =?UTF-8?q?=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SideBar.vue                    |  2 +-
 .../request-task/RequestTaskInput.vue         | 17 ++--
 .../task-management/CategoryAdd.vue           | 81 ++++++++++++++-----
 src/constants/admin.ts                        |  6 +-
 src/types/common.ts                           |  2 -
 5 files changed, 73 insertions(+), 35 deletions(-)

diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index fe08f51f..192a0811 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -69,7 +69,7 @@ import { SIDE_USER_MENU, SIDE_MANAGER_MENU, SIDE_ADMIN_MENU } from '@/constants/
 const route = useRoute()
 
 // 회원 역할, 닉네임 필요
-const role = ref('manager')
+const role = ref('admin')
 const name = ref('백지연')
 const nickname = ref('Chloe.yeon')
 
diff --git a/src/components/request-task/RequestTaskInput.vue b/src/components/request-task/RequestTaskInput.vue
index df55151e..08949f94 100644
--- a/src/components/request-task/RequestTaskInput.vue
+++ b/src/components/request-task/RequestTaskInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="relative">
     <div class="text-xs flex gap-x-1 mb-2">
       <p class="text-body font-bold">{{ labelName }}</p>
       <p
@@ -7,11 +7,6 @@
         class="text-red-1">
         *
       </p>
-      <p
-        v-if="isInvalidateState === 'input'"
-        class="text-red-1">
-        {{ labelName }}을 입력해주세요
-      </p>
     </div>
     <input
       class="w-full h-11 border border-border-1 px-4 focus:outline-none text-black"
@@ -19,6 +14,16 @@
       :disabled="isEdit"
       @input="updateValue(($event.target as HTMLInputElement).value)"
       :placeholder="placeholderText" />
+    <p
+      v-if="isInvalidateState === 'input'"
+      class="text-red-1 text-xs absolute top-[calc(100%+4px)]">
+      {{ labelName }}을 입력해주세요
+    </p>
+    <p
+      v-if="isInvalidateState === 'code'"
+      class="text-red-1 text-xs absolute top-[calc(100%+4px)]">
+      사용할 수 없는 고유코드입니다.
+    </p>
   </div>
 </template>
 
diff --git a/src/components/task-management/CategoryAdd.vue b/src/components/task-management/CategoryAdd.vue
index 22686e00..e7f7e22f 100644
--- a/src/components/task-management/CategoryAdd.vue
+++ b/src/components/task-management/CategoryAdd.vue
@@ -1,51 +1,59 @@
 <template>
   <div class="w-full flex flex-col gap-y-6">
     <ModalView
-      :isOpen="isAddModalVisible"
-      :type="'successType'"
+      :is-open="isModalVisible.add"
+      type="successType"
       @close="handleAddModal">
       <template #header>카테고리가 등록되었습니다</template>
     </ModalView>
     <ModalView
-      :isOpen="isCancelModalVisible"
-      :type="'warningType'"
+      :is-open="isModalVisible.cancel"
+      type="warningType"
       @close="handleCancelModal"
       @click="handleGoBack">
       <template #header>생성을 취소 하시겠습니까?</template>
       <template #body>작성하신 내용은 사라집니다</template>
     </ModalView>
+    <ModalView
+      :is-open="isModalVisible.fail"
+      type="failType"
+      @close="handleFailModal">
+      <template #header>카테고리 정보를 확인해주세요</template>
+    </ModalView>
     <!-- 카테고리 목록 API 필요, 임시로 역할로 설정 -->
     <RequestTaskDropdown
       v-model="categoryForm.firstCategory"
       :options="RoleKeys"
-      :label-name="'1차 카테고리'"
-      :placeholderText="'1차 카테고리를 선택해주세요'"
+      label-name="1차 카테고리"
+      placeholder-text="1차 카테고리를 선택해주세요"
       v-if="props.categoryStep == '2'" />
     <RequestTaskInput
       v-model="categoryForm.name"
-      :placeholderText="'카테고리명을 입력해주세요'"
-      :labelName="`${props.categoryStep}차 카테고리명`" />
+      placeholder-text="카테고리명을 입력해주세요"
+      :label-name="`${props.categoryStep}차 카테고리명`" />
     <RequestTaskInput
       v-model="categoryForm.code"
-      :placeholderText="'카테고리의 고유코드를 입력해주세요'"
-      :labelName="'고유코드 (대문자 영어 2글자까지)'" />
+      placeholder-text="카테고리의 고유코드를 입력해주세요"
+      label-name="고유코드 (대문자 영어 2글자까지)"
+      :is-invalidate="isCodeInvalidate" />
 
     <FormButtonContainer
-      :handleCancel="handleCancel"
-      :handleSubmit="handleSubmit"
-      cancelText="취소"
-      submitText="생성" />
+      :handle-cancel="handleCancel"
+      :handle-submit="handleSubmit"
+      cancel-text="취소"
+      submit-text="생성" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { CATEGORY_FIRST_ADD, CATEGORY_SECOND_ADD, RoleKeys } from '@/constants/admin'
-import { ref } from 'vue'
+import { computed, ref } 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'
 
 const router = useRouter()
 
@@ -53,17 +61,19 @@ const props = defineProps<{
   categoryStep: string
 }>()
 
-const isAddModalVisible = ref(false)
-const isCancelModalVisible = ref(false)
+const isModalVisible = ref({ add: false, cancel: false, fail: false })
 
 const categoryForm = ref(props.categoryStep == '1' ? CATEGORY_FIRST_ADD : CATEGORY_SECOND_ADD)
 
 const handleAddModal = () => {
-  isAddModalVisible.value = false
+  isModalVisible.value.add = false
   handleGoBack()
 }
 const handleCancelModal = () => {
-  isCancelModalVisible.value = !isCancelModalVisible.value
+  isModalVisible.value.cancel = !isModalVisible.value.cancel
+}
+const handleFailModal = () => {
+  isModalVisible.value.fail = !isModalVisible.value.fail
 }
 
 const handleCancel = () => {
@@ -74,8 +84,35 @@ const handleGoBack = () => {
   router.push('/task-management')
 }
 
-const handleSubmit = () => {
-  console.log(categoryForm.value)
-  isAddModalVisible.value = true
+const handleSubmit = async () => {
+  if (
+    isCodeInvalidate.value ||
+    categoryForm.value.name.length === 0 ||
+    categoryForm.value.code.length === 0
+  ) {
+    handleFailModal()
+    return
+  }
+
+  try {
+    const response = await axiosInstance.post(
+      '/api/managements/main-category',
+      categoryForm.value,
+      {
+        headers: { Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}` }
+      }
+    )
+    isModalVisible.value.add = true
+  } catch {
+    handleFailModal()
+  }
 }
+
+const isCodeInvalidate = computed(() => {
+  const code = categoryForm.value.code
+  if (code.length === 0) return ''
+
+  const isInvalidate = !/^[A-Z]{1,2}$/.test(code)
+  return isInvalidate ? 'code' : ''
+})
 </script>
diff --git a/src/constants/admin.ts b/src/constants/admin.ts
index 15fef027..cde5b529 100644
--- a/src/constants/admin.ts
+++ b/src/constants/admin.ts
@@ -38,15 +38,13 @@ import type { RoleTypes, RoleTypesEnum, UserRegistrationProps } from '@/types/ad
 
 export const CATEGORY_FIRST_ADD: MainCategoryTypes = {
   name: '',
-  code: '',
-  id: 0
+  code: ''
 }
 
 export const CATEGORY_SECOND_ADD: SubCategoryTypes = {
   name: '',
   mainCategoryId: 0,
-  code: '',
-  id: 0
+  code: ''
 }
 
 export const INITIAL_USER_REGISTRATION: UserRegistrationProps = {
diff --git a/src/types/common.ts b/src/types/common.ts
index 3cb18d94..19b9643c 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -80,13 +80,11 @@ export interface LabelDataTypes {
 }
 
 export interface MainCategoryTypes {
-  id: number
   name: string
   code: string
 }
 
 export interface SubCategoryTypes {
-  id: number
   mainCategoryId: number
   name: string
   code: string

From 5871f4eff22eea1764bd2462b7cdf8698194c943 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sun, 2 Feb 2025 19:58:46 +0900
Subject: [PATCH 2/2] =?UTF-8?q?:sparkles:=20[feat]=20:=202=EC=B0=A8=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=B6=94=EA=B0=80=20API?=
 =?UTF-8?q?=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../task-management/CategoryAdd.vue           | 46 ++++++++++++-------
 src/constants/admin.ts                        | 10 +---
 src/types/common.ts                           | 13 ++----
 3 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/src/components/task-management/CategoryAdd.vue b/src/components/task-management/CategoryAdd.vue
index e7f7e22f..f96c4c2e 100644
--- a/src/components/task-management/CategoryAdd.vue
+++ b/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>
diff --git a/src/constants/admin.ts b/src/constants/admin.ts
index cde5b529..44c1e4be 100644
--- a/src/constants/admin.ts
+++ b/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: '',
diff --git a/src/types/common.ts b/src/types/common.ts
index 19b9643c..4f87c7cd 100644
--- a/src/types/common.ts
+++ b/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