Merge pull request #52 from TaskFlow-CLAP/CLAP-186

CLAP-186 카테고리 생성 페이지 UI 제작

Author: BaekJiyeon02

src/assets/styles.css

@@ -132,7 +132,6 @@ body {
 .category-management-line {
   @apply flex items-center px-4 w-full h-11 border-b border-b-border-1;
 }
-
 .task-detail-dropdown {
   @apply flex w-full h-10 items-center text-sm rounded pl-4 pr-3 bg-white border border-border-1 cursor-pointer;
 }
@@ -142,3 +141,4 @@ body {
 .task-detail-dropdown-option {
   @apply w-full flex items-center h-10 p-2 rounded hover:bg-background-2 cursor-pointer;
 }
+

src/components/task-management/CategoryAdd.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="w-[552px] flex flex-col gap-y-6">
+    <ModalView
+      :isOpen="isAddModalVisible"
+      :type="'successType'"
+      @close="handleAddModal">
+      <template #header>카테고리가 등록되었습니다</template>
+    </ModalView>
+    <ModalView
+      :isOpen="isCancelModalVisible"
+      :type="'warningType'"
+      @close="handleCancelModal"
+      @click="handleGoBack">
+      <template #header>생성을 취소 하시겠습니까?</template>
+      <template #body>작성하신 내용은 사라집니다</template>
+    </ModalView>
+    <!-- 카테고리 목록 API 필요, 임시로 역할로 설정 -->
+    <RequestTaskDropdown
+      v-model="categoryForm.firstCategory"
+      :options="RoleKeys"
+      :label-name="'1차 카테고리'"
+      :placeholderText="'1차 카테고리를 선택해주세요'"
+      v-if="props.categoryStep == '2'" />
+    <RequestTaskInput
+      v-model="categoryForm.name"
+      :placeholderText="'카테고리명을 입력해주세요'"
+      :labelName="'1차 카테고리명'" />
+    <RequestTaskInput
+      v-model="categoryForm.code"
+      :placeholderText="'카테고리의 고유코드를 입력해주세요'"
+      :labelName="'고유코드 (대문자 영어 2글자까지)'" />
+
+    <FormButtonContainer
+      :handleCancel="handleCancel"
+      :handleSubmit="handleSubmit"
+      cancelText="취소"
+      submitText="생성" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { CATEGORY_FIRST_ADD, CATEGORY_SECOND_ADD, RoleKeys } from '@/constants/admin'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ModalView from '../ModalView.vue'
+import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
+import RequestTaskInput from '../request-task/RequestTaskInput.vue'
+import FormButtonContainer from '../common/FormButtonContainer.vue'
+
+const router = useRouter()
+
+const props = defineProps<{
+  categoryStep: string
+}>()
+
+const isAddModalVisible = ref(false)
+const isCancelModalVisible = ref(false)
+
+const categoryForm = ref(props.categoryStep == '1' ? CATEGORY_FIRST_ADD : CATEGORY_SECOND_ADD)
+
+const handleAddModal = () => {
+  isAddModalVisible.value = false
+}
+const handleCancelModal = () => {
+  isCancelModalVisible.value = !isCancelModalVisible.value
+}
+
+const handleCancel = () => {
+  handleCancelModal()
+}
+
+const handleGoBack = () => {
+  router.push('/task-management')
+}
+
+const handleSubmit = () => {
+  console.log(categoryForm.value)
+  isAddModalVisible.value = true
+}
+</script>

src/constants/admin.ts

@@ -34,7 +34,26 @@ export const LOGS_LIST_BAR_TAB: ListBarTabProps[] = [
   { content: '결과' }
 ]
 
-import type { RoleTypes, RoleTypesEnum, UserRegistrationProps } from '@/types/admin'
+import type {
+  RoleTypes,
+  RoleTypesEnum,
+  UserRegistrationProps,
+  mainCategoryTypes,
+  subCategoryTypes
+} from '@/types/admin'
+
+export const CATEGORY_FIRST_ADD: mainCategoryTypes = {
+  name: '',
+  code: '',
+  id: 0
+}
+
+export const CATEGORY_SECOND_ADD: subCategoryTypes = {
+  name: '',
+  mainCategoryId: 0,
+  code: '',
+  id: 0
+}
 
 export const INITIAL_USER_REGISTRATION: UserRegistrationProps = {
   name: '',

src/router/index.ts

@@ -57,6 +57,16 @@ const router = createRouter({
       name: 'MemberManagement',
       component: () => import('../views/MemberManagement.vue')
     },
+    {
+      path: '/category-first',
+      name: 'CategoryFirst',
+      component: () => import('../views/CategoryFirstAdd.vue')
+    },
+    {
+      path: '/category-second',
+      name: 'CategorySecond',
+      component: () => import('../views/CategorySecondAdd.vue')
+    },
     {
       path: '/login-logs',
       name: 'LoginLogs',
@@ -87,21 +97,6 @@ const router = createRouter({
       name: 'UserUpdate',
       component: () => import('../views/UserUpdateView.vue')
     },
-    {
-      path: '/edit-information',
-      name: 'EditInformation',
-      component: () => import('../views/EditInformationView.vue')
-    },
-    {
-      path: '/statistics',
-      name: 'Statistics',
-      component: () => import('../views/StatisticsView.vue')
-    },
-    {
-      path: '/edit-information',
-      name: 'EditInformation',
-      component: () => import('../views/EditInformationView.vue')
-    },
     {
       path: '/task-management',
       name: 'TaskManagement',

src/types/admin.ts

@@ -21,6 +21,7 @@ export interface LogsListData {
   status: number
   result?: string
 }
+
 export interface UserRegistrationProps {
   name: string
   email: string

src/types/common.ts

@@ -70,10 +70,4 @@ export interface ColorSelectProps {
   devisionId: number
   selectedDivisionId: number | null
   isOpen: boolean
-}
-
-export interface LabelDataTypes {
-  labelId: number
-  labelName: string
-  labelColor: string
-}
+}

src/types/manager.ts

@@ -104,3 +104,4 @@ export interface TaskDetailTopBarProps {
   isApproved: boolean
   closeTaskDetail: () => void
 }
+

src/views/CategoryFirstAdd.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="form-view-container">
+    <div class="form-view-title">
+      <h1 class="text-2xl font-bold">1차 카테고리 생성</h1>
+    </div>
+    <CategoryAdd categoryStep="1" />
+  </div>
+  <div class="w-full bg-body"></div>
+</template>
+
+<script setup lang="ts">
+import CategoryAdd from '../components/task-management/CategoryAdd.vue'
+</script>
+
+<style scoped></style>

src/views/CategorySecondAdd.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="form-view-container">
+    <div class="form-view-title">
+      <h1 class="text-2xl font-bold">2차 카테고리 생성</h1>
+    </div>
+    <CategoryAdd categoryStep="2" />
+  </div>
+  <div class="w-full bg-body"></div>
+</template>
+
+<script setup lang="ts">
+import CategoryAdd from '../components/task-management/CategoryAdd.vue'
+</script>
+
+<style scoped></style>