Skip to content

Commit da52caa

Browse files
Minkyu0424Minkyu0424
authored
Merge pull request #49 from TaskFlow-CLAP/CLAP-168
Clap-168 관리자 작업관리 UI 제작
2 parents fa9b605 + ae1a7d9 commit da52caa

21 files changed

+635
-117
lines changed

‎package-lock.json‎

Lines changed: 10 additions & 108 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"chart.js": "^4.4.7",
1818
"js-cookie": "^3.0.5",
1919
"pinia": "^2.3.0",
20+
"tailwind-scrollbar-hide": "^2.0.0",
2021
"vue": "^3.5.13",
2122
"vue-chartjs": "^5.3.2",
2223
"vue-router": "^4.5.0",

‎src/assets/styles.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,3 +121,13 @@ body {
121121
.form-view-title {
122122
@apply w-full h-[54px] border-l-8 border-l-primary1 flex items-center pl-5;
123123
}
124+
125+
.task-management-view {
126+
@apply max-w-1200 h-screen flex flex-col gap-6;
127+
}
128+
.task-management-title {
129+
@apply flex w-full h-8 pl-6 gap-6 items-center text-xs bg-background-2 text-body font-bold border-b border-b-border-1;
130+
}
131+
.category-management-line {
132+
@apply flex items-center px-4 w-full h-11 border-b border-b-border-1;
133+
}

‎src/components/task-management/CategoryLine.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div class="w-full">
3+
<div
4+
v-for="main in categories"
5+
:key="main.id"
6+
class="flex w-full flex-col">
7+
<div
8+
v-for="(sub, index) in main.subCategory.length + 1"
9+
:key="sub"
10+
class="category-management-line w-full justify-between">
11+
<template v-if="index === 0">
12+
<div
13+
v-if="index === 0"
14+
class="flex gap-4 items-center w-[200px]">
15+
<p class="text-xs text-body w-[60px] text-center">{{ main.code }}</p>
16+
<p class="text-black">{{ main.name }}</p>
17+
</div>
18+
<div class="flex gap-2 text-xs font-bold">
19+
<button
20+
@click="router.push('수정경로')"
21+
class="text-primary1">
22+
수정
23+
</button>
24+
<button
25+
@click="handleDelete(main.id)"
26+
class="text-red-1">
27+
삭제
28+
</button>
29+
</div>
30+
</template>
31+
<template v-else>
32+
<div class="w-[200px]"></div>
33+
</template>
34+
</div>
35+
</div>
36+
<ModalView
37+
type="warningType"
38+
:is-open="isModalVisible"
39+
@close="handleCancel()">
40+
<template #header>카테고리를 삭제 하시겠습니까?</template>
41+
<template #body>삭제된 카테고리는 복구할 수 없습니다</template>
42+
</ModalView>
43+
</div>
44+
</template>
45+
46+
<script setup lang="ts">
47+
import type { CategoryAllData } from '@/types/admin'
48+
import { defineProps, ref } from 'vue'
49+
import { useRouter } from 'vue-router'
50+
import ModalView from '../ModalView.vue'
51+
52+
const { categories } = defineProps<CategoryAllData>()
53+
const router = useRouter()
54+
55+
const isModalVisible = ref(false)
56+
57+
const handleCancel = () => {
58+
isModalVisible.value = false
59+
}
60+
61+
const handleDelete = (id: number) => {
62+
isModalVisible.value = true
63+
console.log(id, '삭제로직')
64+
}
65+
</script>

‎src/components/task-management/CategoryLineSub.vue‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<div class="w-full">
3+
<div
4+
v-for="main in categories"
5+
:key="main.id"
6+
class="flex w-full flex-col">
7+
<div
8+
v-for="sub in main.subCategory"
9+
:key="sub.id"
10+
class="flex w-full flex-col">
11+
<div class="category-management-line justify-between">
12+
<div class="flex gap-4 items-center">
13+
<p class="text-xs font-bold text-body w-[60px] text-center">{{ sub.code }}</p>
14+
<p class="text-black">{{ sub.name }}</p>
15+
</div>
16+
<div class="flex gap-2 text-xs font-bold">
17+
<button
18+
@click="router.push('수정경로')"
19+
class="text-primary1">
20+
수정
21+
</button>
22+
<button
23+
@click="handleDelete"
24+
class="text-red-1">
25+
삭제
26+
</button>
27+
</div>
28+
</div>
29+
</div>
30+
<div
31+
class="category-management-line gap-1 justify-center cursor-pointer"
32+
@click="MovetoAddSubCategory">
33+
<CommonIcons :name="plusIcon" />
34+
<p class="text-xs text-disabled font-bold">새 2차 카테고리 추가</p>
35+
</div>
36+
</div>
37+
</div>
38+
<ModalView
39+
type="warningType"
40+
:is-open="isModalVisible"
41+
@close="handleCancel()">
42+
<template #header>카테고리를 삭제 하시겠습니까?</template>
43+
<template #body>삭제된 카테고리는 복구할 수 없습니다</template>
44+
</ModalView>
45+
</template>
46+
47+
<script setup lang="ts">
48+
import { plusIcon } from '@/constants/iconPath'
49+
import type { CategoryAllData } from '@/types/admin'
50+
import { defineProps, ref } from 'vue'
51+
import { useRouter } from 'vue-router'
52+
import ModalView from '../ModalView.vue'
53+
import CommonIcons from '../common/CommonIcons.vue'
54+
55+
const { categories } = defineProps<CategoryAllData>()
56+
const router = useRouter()
57+
58+
const isModalVisible = ref(false)
59+
60+
const handleCancel = () => {
61+
isModalVisible.value = false
62+
}
63+
64+
const handleDelete = () => {
65+
isModalVisible.value = true
66+
}
67+
68+
const MovetoAddSubCategory = () => {
69+
router.push({ name: 'AddSubCategory' })
70+
}
71+
</script>

‎src/components/task-management/CategoryManagement.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div class="flex flex-col w-full min-h-[480px] border border-border-1 rounded-lg">
3+
<div class="flex w-full">
4+
<div class="task-management-title rounded-tl-lg">
5+
<p>고유코드</p>
6+
<p>1차 카테고리</p>
7+
</div>
8+
<div class="w-0.5 bg-border-1"></div>
9+
<div class="task-management-title rounded-tr-lg">
10+
<p>고유코드</p>
11+
<p>2차 카테고리</p>
12+
</div>
13+
</div>
14+
<div class="flex w-full">
15+
<CategoryLine :categories="mockCategoryAllData.categories" />
16+
<div class="bg-border-1 w-0.5"></div>
17+
<CategoryLineSub :categories="mockCategoryAllData.categories" />
18+
</div>
19+
<div
20+
class="text-xs text-disabled font-bold gap-1 category-management-line justify-center cursor-pointer"
21+
@click="MovetoAddCategory">
22+
<CommonIcons :name="plusIcon" />
23+
<p>새 1차 카테고리 추가</p>
24+
</div>
25+
<div class="mt-4">
26+
<CategoryList />
27+
</div>
28+
</div>
29+
</template>
30+
31+
<script setup lang="ts">
32+
import { plusIcon } from '@/constants/iconPath'
33+
import { mockCategoryAllData } from '@/datas/taskmanagement'
34+
import { useRouter } from 'vue-router'
35+
import CommonIcons from '../common/CommonIcons.vue'
36+
import CategoryLine from './CategoryLine.vue'
37+
import CategoryLineSub from './CategoryLineSub.vue'
38+
39+
const router = useRouter()
40+
41+
const MovetoAddCategory = () => {
42+
router.push({ name: 'AddCategory' })
43+
}
44+
</script>

‎src/components/task-management/ColorSelectModal.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div
3+
v-if="isOpen && devisionId === selectedDivisionId"
4+
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"
5+
@click.self="closeModal">
6+
<div class="flex w-full justify-between">
7+
<p class="text-xs font-bold text-body">색상 선택</p>
8+
<CommonIcons
9+
:class="'cursor-pointer'"
10+
:name="closeIcon"
11+
@click="closeModal" />
12+
</div>
13+
<div class="flex-wrap flex w-full gap-4 bg-white gap-y-2">
14+
<div
15+
v-for="color in COLOR_LIST"
16+
:key="color.fillColor"
17+
:style="{ borderColor: color.borderColor, backgroundColor: color.fillColor }"
18+
class="w-6 h-6 rounded-full border-[3px] cursor-pointer"
19+
@click="updateColor(color.fillColor)"></div>
20+
</div>
21+
</div>
22+
</template>
23+
24+
<script setup lang="ts">
25+
import { COLOR_LIST } from '@/constants/common'
26+
import { closeIcon } from '@/constants/iconPath'
27+
import type { ColorSelectProps } from '@/types/common'
28+
import { defineEmits, defineProps } from 'vue'
29+
import CommonIcons from '../common/CommonIcons.vue'
30+
31+
const props = defineProps<ColorSelectProps>()
32+
33+
const emit = defineEmits<{
34+
(e: 'close'): void
35+
}>()
36+
37+
const closeModal = () => {
38+
emit('close')
39+
}
40+
41+
const updateColor = (color: string) => {
42+
console.log(props.devisionId, '로 색상 변경 로직', color)
43+
emit('close')
44+
}
45+
</script>

‎src/components/task-management/DivisionManagement.vue‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<template>
2+
<div class="flex flex-col w-full min-h-[240px] overflow-y-auto border border-border-1 rounded-lg">
3+
<div class="flex w-full">
4+
<div class="task-management-title rounded-tl-lg">
5+
<p>색상</p>
6+
<p>구분명</p>
7+
</div>
8+
</div>
9+
<div class="flex w-full">
10+
<DivisionManagementLine :divisionData="divisionData" />
11+
</div>
12+
<div
13+
v-if="!isAdd"
14+
class="text-xs text-disabled gap-1 category-management-line justify-center cursor-pointer"
15+
@click="isAdd = true">
16+
<CommonIcons :name="plusIcon" />
17+
<p>새 구분 추가</p>
18+
</div>
19+
<div
20+
v-else
21+
class="category-management-line justify-between">
22+
<div class="flex w-full gap-7 items-center pl-3 relative">
23+
<div
24+
:style="{
25+
borderColor: getColor(newDivision.divisionColor)?.borderColor,
26+
backgroundColor: getColor(newDivision.divisionColor)?.fillColor
27+
}"
28+
class="w-4 h-4 rounded-full border-2 cursor-pointer pr-3"
29+
@click="clickColor"></div>
30+
<ColorSelectModal
31+
v-if="isColorModalVisible"
32+
:is-open="isColorModalVisible"
33+
:devisionId="0"
34+
:selectedDivisionId="0"
35+
@close="closeColor" />
36+
<input
37+
type="text"
38+
placeholder="새로운 구분명을 입력"
39+
class="w-full flex focus:outline-none" />
40+
</div>
41+
<div class="flex gap-2 text-xs font-bold">
42+
<button
43+
@click="addNewDivision"
44+
class="text-primary1 w-[21px]">
45+
확인
46+
</button>
47+
<button
48+
@click="cancelAddDivision"
49+
class="text-disabled w-[21px]">
50+
취소
51+
</button>
52+
</div>
53+
</div>
54+
<div class="mt-4">
55+
<CategoryList />
56+
</div>
57+
</div>
58+
</template>
59+
60+
<script setup lang="ts">
61+
import { plusIcon } from '@/constants/iconPath'
62+
import { mockDivisionData } from '@/datas/taskmanagement'
63+
import type { DivisionDataTypes, NewDevisonTypes } from '@/types/admin'
64+
import { getColor } from '@/utils/color'
65+
import { ref } from 'vue'
66+
import CommonIcons from '../common/CommonIcons.vue'
67+
import ColorSelectModal from './ColorSelectModal.vue'
68+
import DivisionManagementLine from './DivisionManagementLine.vue' /* PartiallyEnd: #3632/scriptSetup.vue */
69+
70+
const divisionData = ref<DivisionDataTypes[]>(mockDivisionData)
71+
const newDivision = ref<NewDevisonTypes>({
72+
divisionName: '새로운 구분',
73+
divisionColor: 'red'
74+
})
75+
const isColorModalVisible = ref(false)
76+
const isAdd = ref(false)
77+
78+
const addNewDivision = () => {
79+
console.log(newDivision, '추가로직')
80+
isAdd.value = false
81+
}
82+
83+
const cancelAddDivision = () => {
84+
isAdd.value = false
85+
}
86+
87+
const closeColor = () => {
88+
isColorModalVisible.value = false
89+
}
90+
91+
const clickColor = () => {
92+
isColorModalVisible.value = true
93+
}
94+
</script>

0 commit comments

Comments
 (0)