CLAP-265 404 페이지 구현 및 라우팅 설정

src/components/common/TitleContainer.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-2 items-center">
+    <span class="text-4xl font-bold text-black whitespace-pre-wrap text-center leading-tight">{{
+      title
+    }}</span>
+    <span class="font-bold whitespace-pre-wrap text-body text-center">{{ content }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ title: string; content?: string }>()
+</script>

src/components/top-bar/TopBar.vue

@@ -55,12 +55,29 @@ import { storeToRefs } from 'pinia'
 import { useMemberStore } from '@/stores/member'
 import NotificationModal from './NotificationModal.vue'
 import ProfileModal from './ProfileModal.vue'
+import { useRoute, useRouter } from 'vue-router'
+import { PERMITTED_URL } from '@/constants/common'
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
 
+const route = useRoute()
+const router = useRouter()
 onMounted(async () => {
   await memberStore.updateMemberInfoWithToken()
+
+  const originUrl = route.path.split('/')[1]
+  if (info.value.memberRole === 'ROLE_USER') {
+    if (!PERMITTED_URL.ROLE_USER.includes(originUrl)) router.push('/my-request')
+  } else if (info.value.memberRole === 'ROLE_MANAGER') {
+    if (!PERMITTED_URL.ROLE_MANAGER.includes(originUrl)) router.push('/my-task')
+  } else if (info.value.memberRole === 'ROLE_ADMIN') {
+    if (!PERMITTED_URL.ROLE_ADMIN.includes(originUrl)) router.push('/member-management')
+  } else {
+    if (!PERMITTED_URL.UNKNOWN.includes(originUrl)) {
+      router.push('/login')
+    }
+  }
 })
 
 const isSideOpen = ref(false)

src/constants/common.ts

@@ -37,3 +37,34 @@ export const COLOR_LIST = [
   { borderColor: '#8B5CF6', fillColor: '#F5F3FF', colorEnum: 'PURPLE' },
   { borderColor: '#A1A1AA', fillColor: '#F4F4F5', colorEnum: 'GREY' }
 ]
+
+export const PERMITTED_URL = {
+  UNKNOWN: ['login', 'pw-change-email', 'pw-change'],
+  ROLE_USER: ['my-request', 'task-request', 'edit-information', 'pw-check', 'pw-change'],
+  ROLE_MANAGER: [
+    'my-request',
+    'task-request',
+    'requested',
+    'request-history',
+    'my-task',
+    'task-board',
+    'team-board',
+    'statistics',
+    'task-detail',
+    'edit-information',
+    'pw-check',
+    'pw-change'
+  ],
+  ROLE_ADMIN: [
+    'member-management',
+    'edit-information',
+    'task-management',
+    'category-first',
+    'category-second',
+    'login-logs',
+    'api-logs',
+    'edit-information',
+    'pw-check',
+    'pw-change'
+  ]
+}

src/router/index.ts

@@ -8,7 +8,6 @@ const router = createRouter({
       name: 'Login',
       component: () => import('../views/LoginView.vue')
     },
-
     {
       path: '/pw-change',
       name: 'PwChange',
@@ -111,6 +110,11 @@ const router = createRouter({
       path: '/statistics',
       name: 'Statistics',
       component: () => import('../views/StatisticsView.vue')
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: () => import('../views/NotFoundView.vue')
     }
   ]
 })

src/views/LoginView.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="max-w-400">
     <div class="py-16">
-      <div class="text-4xl font-bold text-center">
-        <p class="pb-2">TaskFlow</p>
-        <p class="pb-2">로그인</p>
-      </div>
-      <p class="text-center font-bold text-body">아이디와 비밀번호를 입력해주세요</p>
+      <TitleContainer
+        :title="'TaskFlow\n로그인'"
+        content="아이디와 비밀번호를 입력해주세요" />
     </div>
     <form
       @submit.prevent="handleLogin"
@@ -48,6 +46,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { postLogin } from '@/api/auth'
+import TitleContainer from '@/components/common/TitleContainer.vue'
 
 const router = useRouter()
 

src/views/NotFoundView.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="max-w-400 h-screen flex flex-col justify-center items-center gap-16">
+    <TitleContainer
+      title="404 Error"
+      :content="'요청하신 페이지는\n없는 페이지입니다'" />
+    <button
+      class="button-large-primary"
+      @click="router.back()">
+      이전으로
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TitleContainer from '@/components/common/TitleContainer.vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+</script>

src/views/PwChange.vue

@@ -8,11 +8,9 @@
       <template #body> 다시 로그인 해주세요 </template>
     </ModalView>
     <div class="py-16">
-      <div class="text-4xl font-bold text-center">
-        <p class="pb-2">비밀번호</p>
-        <p class="pb-2">재설정</p>
-      </div>
-      <p class="text-center font-bold text-body">초기 비밀번호를 변경해주세요</p>
+      <TitleContainer
+        :title="'비밀번호\n재설정'"
+        content="초기 비밀번호를 변경해주세요" />
     </div>
     <form
       @submit.prevent="handleChange"
@@ -50,6 +48,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ModalView from '../components/ModalView.vue'
 import { patchPassword } from '@/api/auth'
+import TitleContainer from '@/components/common/TitleContainer.vue'
 
 const newPw = ref('')
 const checkPw = ref('')

src/views/PwChangeEmail.vue

@@ -8,11 +8,9 @@
       <template #body> 이메일을 확인해주세요 </template>
     </ModalView>
     <div class="py-16">
-      <div class="text-4xl font-bold text-center">
-        <p class="pb-2">비밀번호</p>
-        <p class="pb-2">재설정</p>
-      </div>
-      <p class="text-center font-bold text-body">가입된 아이디와 이메일을 입력해주세요</p>
+      <TitleContainer
+        :title="'비밀번호\n재설정'"
+        content="가입된 아이디와 이메일을 입력해주세요" />
     </div>
     <form
       @submit.prevent="handleCheck"
@@ -67,6 +65,7 @@
 import { ref } from 'vue'
 import router from '../router/index'
 import ModalView from '../components/ModalView.vue'
+import TitleContainer from '@/components/common/TitleContainer.vue'
 
 const id = ref('')
 const email = ref('')

src/views/PwCheck.vue

@@ -1,13 +1,9 @@
 <template>
   <div class="max-w-400">
     <div class="py-16">
-      <div class="text-4xl font-bold text-center">
-        <p class="pb-2">비밀번호</p>
-        <p class="pb-2">재설정</p>
-      </div>
-      <p class="text-center font-semibold text-body">
-        비밀번호 재설정을 위해<br />현재 비밀번호를 입력해주세요
-      </p>
+      <TitleContainer
+        :title="'비밀번호\n재설정'"
+        content="비밀번호 재설정을 위해\n현재 비밀번호를 입력해주세요" />
     </div>
     <form
       @submit.prevent="handleCheck"
@@ -36,6 +32,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import router from '../router/index'
+import TitleContainer from '@/components/common/TitleContainer.vue'
 
 const pw = ref('')