Skip to content

Commit 87e4f2e

Browse files
BaekJiyeon02BaekJiyeon02
authored
Merge pull request #42 from TaskFlow-CLAP/CLAP-173
CLAP-173 사이드 메뉴 및 탑바 UI 제작
2 parents aad9ba6 + 769eaec commit 87e4f2e

File tree

7 files changed

+192
-17
lines changed

7 files changed

+192
-17
lines changed

‎public/MainLogo.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/App.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup lang="ts">
2-
import TopMenu from './components/TopMenu.vue'
2+
import TopBar from './components/TopBar.vue'
33
import TheView from './layout/TheView.vue'
44
</script>
55

66
<template>
7-
<TopMenu />
7+
<TopBar />
88
<TheView />
99
</template>

‎src/components/SideBar.vue‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<div
3+
class="fixed inset-0 bg-black bg-opacity-15 flex items-center z-50"
4+
@click.self="$emit('close')">
5+
<div class="flex flex-col relative w-80 bg-white h-screen shadow-lg shadow-black">
6+
<div class="flex justify-between items-center my-3 h-[48px] px-6">
7+
<div>
8+
<CommonIcons :name="hamburgerIcon" />
9+
</div>
10+
<div>
11+
<img src="/MainLogo.svg" />
12+
</div>
13+
</div>
14+
<div class="flex-1 min-h-0 overflow-y-auto">
15+
<div
16+
v-for="menuGroup in filteredMenu"
17+
:key="menuGroup.groupId">
18+
<div
19+
v-for="menuItem in menuGroup.items"
20+
:key="menuItem.menuId"
21+
class="flex">
22+
<div :class="['px-1', { 'bg-primary1': menuItem.link === route.path }]" />
23+
<RouterLink
24+
v-if="menuItem.link"
25+
:to="menuItem.link"
26+
:class="['flex py-4 px-6 text-black', { 'font-bold': menuItem.link === route.path }]">
27+
{{ menuItem.content }}
28+
</RouterLink>
29+
<span
30+
v-else
31+
class="text-xs text-disabled font-bold px-6 pt-8 pb-2">
32+
{{ menuItem.content }}
33+
</span>
34+
</div>
35+
</div>
36+
</div>
37+
<div class="flex w-full px-6 bg-white py-6">
38+
<div class="flex items-center max-w-[140px]">
39+
<!-- 프로필 사진 API 필요 -->
40+
<div class="w-[40px] h-[40px] rounded-full bg-zinc-100" />
41+
<div class="px-3">
42+
<p class="text-xs text-body font-bold">{{ name }}</p>
43+
<p class="text-sm text-black">{{ nickname }}</p>
44+
</div>
45+
</div>
46+
<div class="flex items-end justify-end w-full">
47+
<RouterLink
48+
to="/"
49+
class="text-primary1 text-sm font-bold"
50+
>내 정보 수정</RouterLink
51+
>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</template>
57+
58+
<script setup lang="ts">
59+
import { useRoute } from 'vue-router'
60+
import { computed, ref } from 'vue'
61+
import CommonIcons from './common/CommonIcons.vue'
62+
import { hamburgerIcon } from '@/constants/iconPath'
63+
import { SIDE_USER_MENU, SIDE_MANAGER_MENU, SIDE_ADMIN_MENU } from '@/constants/menu'
64+
65+
const route = useRoute()
66+
67+
// 회원 역할, 닉네임 필요
68+
const role = ref('manager')
69+
const name = ref('백지연')
70+
const nickname = ref('Chloe.yeon')
71+
72+
const filteredMenu = computed(() => {
73+
return role.value === 'user'
74+
? SIDE_USER_MENU
75+
: role.value === 'manager'
76+
? SIDE_MANAGER_MENU
77+
: SIDE_ADMIN_MENU
78+
})
79+
</script>
80+
81+
<style scoped></style>

‎src/components/TopBar.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
//Top.vue
2+
<template>
3+
<div
4+
class="flex justify-center w-full bg-white text-black py-3 px-[120px] border border-border-1">
5+
<div class="flex w-full justify-between items-center">
6+
<div class="flex justify-center items-center gap-2 h-full">
7+
<button
8+
v-show="isLogined"
9+
@click="isSideOpen = true">
10+
<CommonIcons :name="hamburgerIcon" />
11+
</button>
12+
<img src="/MainLogo.svg" />
13+
</div>
14+
<div class="flex-1 h-full"></div>
15+
<div
16+
v-show="isLogined"
17+
class="w-[10%] h-full flex items-center gap-6">
18+
<CommonIcons :name="notifiacationIcon" />
19+
<!-- 프로필 사진 API 필요 -->
20+
<div class="rounded-[50%] bg-zinc-100 p-5" />
21+
</div>
22+
</div>
23+
</div>
24+
<SideBar
25+
v-if="isSideOpen"
26+
@close="onCloseSide" />
27+
</template>
28+
29+
<script setup lang="ts">
30+
import { ref } from 'vue'
31+
import CommonIcons from './common/CommonIcons.vue'
32+
import SideBar from './SideBar.vue'
33+
import { hamburgerIcon, notifiacationIcon } from '../constants/iconPath'
34+
35+
// 로그인 정보 필요
36+
const isSideOpen = ref(false)
37+
const isLogined = ref(true)
38+
39+
const onCloseSide = () => {
40+
isSideOpen.value = false
41+
}
42+
</script>

‎src/components/TopMenu.vue‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/constants/menu.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import type { MenuItemProps } from '@/types/menu'
2+
3+
export const SIDE_USER_MENU: { groupId: number; items: MenuItemProps[] }[] = [
4+
{ groupId: 1, items: [{ menuId: 1, content: '요청', link: '', role: 'user' }] },
5+
{
6+
groupId: 2,
7+
items: [
8+
{ menuId: 11, content: '내 요청', link: '/my-request', role: 'user' },
9+
{ menuId: 12, content: '작업 요청', link: '/task-request', role: 'user' }
10+
]
11+
}
12+
]
13+
14+
export const SIDE_MANAGER_MENU: { groupId: number; items: MenuItemProps[] }[] = [
15+
{ groupId: 1, items: [{ menuId: 1, content: '요청', link: '', role: 'manager' }] },
16+
{
17+
groupId: 2,
18+
items: [
19+
{ menuId: 11, content: '내 요청', link: '/my-request', role: 'manager' },
20+
{ menuId: 12, content: '작업 요청', link: '/task-request', role: 'manager' },
21+
{ menuId: 13, content: '승인 대기중인 요청', link: '/requested', role: 'manager' },
22+
{ menuId: 14, content: '전체 요청 기록', link: '/request-history', role: 'manager' }
23+
]
24+
},
25+
{ groupId: 3, items: [{ menuId: 2, content: '작업', link: '', role: 'manager' }] },
26+
{
27+
groupId: 4,
28+
items: [
29+
{ menuId: 21, content: '내 작업', link: '/my-task', role: 'manager' },
30+
{ menuId: 22, content: '작업 보드', link: '/task-board', role: 'manager' },
31+
{ menuId: 23, content: '팀 작업 현황', link: '/team-board', role: 'manager' },
32+
{ menuId: 24, content: '통계', link: '/', role: 'manager' }
33+
]
34+
}
35+
]
36+
37+
export const SIDE_ADMIN_MENU: { groupId: number; items: MenuItemProps[] }[] = [
38+
{ groupId: 1, items: [{ menuId: 1, content: '관리', link: '', role: 'admin' }] },
39+
{
40+
groupId: 2,
41+
items: [
42+
{ menuId: 11, content: '회원 관리', link: '/member-management', role: 'admin' },
43+
{ menuId: 12, content: '작업 관리', link: '/task-request', role: 'admin' }
44+
]
45+
},
46+
{ groupId: 3, items: [{ menuId: 2, content: '감사 로그', link: '', role: 'admin' }] },
47+
{
48+
groupId: 4,
49+
items: [
50+
{ menuId: 21, content: '로그인 기록', link: '/login-logs', role: 'admin' },
51+
{ menuId: 22, content: '작업 기록', link: '/api-logs', role: 'admin' }
52+
]
53+
}
54+
]

‎src/types/menu.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export type Role = 'manager' | 'user' | 'admin'
2+
3+
export interface MenuItemProps {
4+
menuId: number
5+
content: string
6+
role: Role
7+
link: string
8+
}

0 commit comments

Comments
 (0)