diff --git a/src/api/auth.ts b/src/api/auth.ts
index 9fc92687..35cb1391 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -33,7 +33,7 @@ export const postLogin = async (nickName: string, password: string) => {
 }
 
 export const patchPassword = async (password: string) => {
-  const request = { password: password }
+  const request = { password }
   const response = await axiosInstance.patch('/api/members/password', request)
   return response.data
 }
diff --git a/src/assets/styles.css b/src/assets/styles.css
index 7bcd0438..cb3f2ba3 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -51,19 +51,22 @@ body {
 }
 
 .button-medium {
-  @apply flex items-center justify-center rounded px-4 py-2 font-bold gap-1 text-xs cursor-pointer shrink-0;
+  @apply flex items-center justify-center rounded px-4 py-2 font-bold gap-1 text-xs cursor-pointer shrink-0 h-full;
 }
 .button-medium-primary {
   @apply button-medium bg-primary1 text-white hover:bg-[#6869DE];
 }
 .button-medium-secondary {
-  @apply button-medium bg-white border border-primary1 text-primary1 hover:bg-background-2;
+  @apply button-medium bg-white border border-primary1 text-primary1 hover:bg-primary2;
 }
 .button-medium-default {
   @apply button-medium bg-white border border-border-1 text-disabled hover:bg-background-2;
 }
 .button-medium-red {
-  @apply button-medium bg-white border border-red-1 text-red-1 hover:bg-background-2;
+  @apply button-medium bg-white border border-red-1 text-red-1 hover:bg-red-2;
+}
+.button-medium-disabled {
+  @apply button-medium text-disabled bg-background-1;
 }
 
 .button-small {
@@ -96,7 +99,7 @@ body {
   @apply flex justify-center items-center w-full h-8 px-2 border-b border-border-1 relative text-xs cursor-pointer;
 }
 .filter-dropdown-option-list {
-  @apply w-full max-h-[120px] overflow-y-scroll absolute left-0 top-[calc(100%+8px)] shadow-custom p-2 flex flex-col gap-2 rounded bg-white cursor-auto;
+  @apply w-full max-h-[160px] overflow-y-scroll absolute left-0 top-[calc(100%+8px)] shadow-custom p-2 flex flex-col gap-2 rounded bg-white cursor-auto;
 }
 .filter-dropdown-option {
   @apply text-xs p-2 rounded text-center cursor-pointer;
diff --git a/src/components/common/EditInformation.vue b/src/components/common/EditInformation.vue
index a2eaf1b9..59d1ac27 100644
--- a/src/components/common/EditInformation.vue
+++ b/src/components/common/EditInformation.vue
@@ -206,7 +206,7 @@ const handlePwChange = () => {
 }
 
 const changePw = () => {
-  router.replace('/pw-check')
+  router.replace('/pw-change')
 }
 
 const warningModalToggle = () => {
diff --git a/src/components/common/ModalView.vue b/src/components/common/ModalView.vue
index e820515a..60d90d4d 100644
--- a/src/components/common/ModalView.vue
+++ b/src/components/common/ModalView.vue
@@ -1,12 +1,12 @@
 <template>
   <div
     v-if="isOpen"
-    class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50"
+    class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-[99]"
     @click.self="closeModal" />
   <Transition name="modal">
     <div
       v-if="isOpen"
-      class="bg-white rounded-lg shadow-lg px-8 py-8 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50">
+      class="bg-white rounded-lg shadow-lg px-8 py-8 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[99]">
       <div class="flex flex-col gap-8 w-[300px]">
         <div class="flex flex-col gap-6">
           <div class="flex flex-col items-center gap-2">
@@ -20,13 +20,15 @@
               v-if="type == 'warningType'"
               :name="warningIcon" />
 
-            <div class="flex text-2xl font-bold justify-center">
+            <div
+              v-if="$slots.header"
+              class="flex text-2xl font-bold justify-center whitespace-pre-wrap text-center">
               <slot name="header"></slot>
             </div>
 
             <div
-              v-if="type != 'inputType'"
-              class="flex text-sm font-bold text-body justify-center whitespace-pre-line text-center">
+              v-if="type != 'inputType' && $slots.header"
+              class="flex text-sm font-bold text-body justify-center whitespace-pre-wrap text-center">
               <slot name="body"></slot>
             </div>
           </div>
@@ -79,10 +81,11 @@
 
 <script setup lang="ts">
 import { failIcon, successIcon, warningIcon } from '@/constants/iconPath'
-import { ref, watch } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
 import CommonIcons from './CommonIcons.vue'
+import { preventEnter } from '@/utils/preventEnter'
 
-const props = defineProps<{
+const { isOpen, type, modelValue } = defineProps<{
   isOpen: boolean
   type?: string
   modelValue?: string
@@ -94,7 +97,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
 
-const textValue = ref(props.modelValue || '')
+const textValue = ref(modelValue || '')
 
 watch(textValue, newValue => {
   emit('update:modelValue', newValue)
@@ -108,4 +111,22 @@ const closeModal = () => {
 const confirmModal = () => {
   emit('click')
 }
+
+watch(
+  () => isOpen,
+  () => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+      window.addEventListener('keydown', preventEnter)
+    } else {
+      document.body.style.overflow = ''
+      window.removeEventListener('keydown', preventEnter)
+    }
+  }
+)
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
+  window.removeEventListener('keydown', preventEnter)
+})
 </script>
diff --git a/src/components/common/TaskCard.vue b/src/components/common/TaskCard.vue
index c7484113..ef2a542b 100644
--- a/src/components/common/TaskCard.vue
+++ b/src/components/common/TaskCard.vue
@@ -60,8 +60,6 @@ const borderLeft = computed(() => {
 })
 
 const handleModal = (id: number | null) => {
-  if (id) document.body.style.overflow = 'hidden'
-  else document.body.style.overflow = ''
   emit('toggleModal')
   selectedID.value = id
 }
diff --git a/src/components/filters/FilterCategory.vue b/src/components/filters/FilterCategory.vue
index c8acf8bb..6b78cd9b 100644
--- a/src/components/filters/FilterCategory.vue
+++ b/src/components/filters/FilterCategory.vue
@@ -17,9 +17,9 @@
           <li
             class="filter-dropdown-option"
             v-for="category in categoryList"
-            :key="category.id"
+            :key="category.mainCategoryId"
             :class="
-              (main as number[]).includes(category.id)
+              (main as number[]).includes(category.mainCategoryId)
                 ? 'bg-primary1 text-white font-bold'
                 : 'hover:bg-background-2'
             "
@@ -58,13 +58,13 @@
             <li
               class="filter-dropdown-option"
               v-for="subCategory in category.subCategory"
-              :key="subCategory.id"
+              :key="subCategory.subCategoryId"
               :class="
-                (sub as number[]).includes(subCategory.id)
+                (sub as number[]).includes(subCategory.subCategoryId)
                   ? 'bg-primary1 text-white font-bold'
                   : 'hover:bg-background-2'
               "
-              @click="() => onSubClick(subCategory.id)">
+              @click="() => onSubClick(subCategory.subCategoryId)">
               {{ subCategory.name }}
             </li>
           </ul>
@@ -76,7 +76,7 @@
 
 <script setup lang="ts">
 import { dropdownIcon } from '@/constants/iconPath'
-import type { Category, FilterCategoryProps } from '@/types/common'
+import type { Category, FilterCategoryProps, SubCategory } from '@/types/common'
 import { computed, ref, watchEffect } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
@@ -91,7 +91,7 @@ const toggleDropdown = (type: 'main' | 'sub') =>
     ? (isMainOpened.value = !isMainOpened.value)
     : (isSubOpened.value = !isSubOpened.value)
 
-const selectedCategoryList = ref<{ name: string; subCategory: Category[] }[]>([])
+const selectedCategoryList = ref<{ name: string; subCategory: SubCategory[] }[]>([])
 const isDisabled = computed(() => {
   return selectedCategoryList.value.length === 0
 })
@@ -106,8 +106,8 @@ const onMainClick = (category: Category) => {
     )
     if (category.subCategory) {
       category.subCategory.forEach(el => {
-        if ((sub as number[]).includes(el.id)) {
-          emit('update:sub', el.id)
+        if ((sub as number[]).includes(el.subCategoryId)) {
+          emit('update:sub', el.subCategoryId)
         }
       })
     }
@@ -119,7 +119,7 @@ const onMainClick = (category: Category) => {
       })
     }
   }
-  emit('update:main', category.id)
+  emit('update:main', category.mainCategoryId)
 }
 const onSubClick = (value: number) => {
   emit('update:sub', value)
diff --git a/src/components/member-management/MemberManagementListCard.vue b/src/components/member-management/MemberManagementListCard.vue
index fff02836..b73923e0 100644
--- a/src/components/member-management/MemberManagementListCard.vue
+++ b/src/components/member-management/MemberManagementListCard.vue
@@ -23,8 +23,10 @@
       </button>
       <button
         type="button"
-        class="button-medium-secondary"
-        @click="onMemberInvite(info.memberId)">
+        :class="
+          info.memberStatus !== 'ACTIVE' ? 'button-medium-secondary' : 'button-medium-disabled'
+        "
+        @click="info.memberStatus !== 'ACTIVE' && onMemberInvite(info.memberId)">
         초대
       </button>
     </div>
diff --git a/src/components/my-request/MyRequestListCard.vue b/src/components/my-request/MyRequestListCard.vue
index 390a61a5..8b392d68 100644
--- a/src/components/my-request/MyRequestListCard.vue
+++ b/src/components/my-request/MyRequestListCard.vue
@@ -30,8 +30,6 @@ const { info } = defineProps<{ info: MyRequestListData }>()
 const selectedID = ref<number | null>(null)
 
 const handleModal = (id: number | null) => {
-  if (id) document.body.style.overflow = 'hidden'
-  else document.body.style.overflow = ''
   selectedID.value = id
 }
 
diff --git a/src/components/my-task/MyTaskListCard.vue b/src/components/my-task/MyTaskListCard.vue
index d9d24c9c..76c9f1e1 100644
--- a/src/components/my-task/MyTaskListCard.vue
+++ b/src/components/my-task/MyTaskListCard.vue
@@ -30,8 +30,6 @@ const { info } = defineProps<{ info: MyTaskListData }>()
 const selectedID = ref<number | null>(null)
 
 const handleModal = (id: number | null) => {
-  if (id) document.body.style.overflow = 'hidden'
-  else document.body.style.overflow = ''
   selectedID.value = id
 }
 const myRequestTabList: ListCardProps[] = [
diff --git a/src/components/request-approve/RequestApprove.vue b/src/components/request-approve/RequestApprove.vue
index 16bcc522..619a7f42 100644
--- a/src/components/request-approve/RequestApprove.vue
+++ b/src/components/request-approve/RequestApprove.vue
@@ -74,7 +74,7 @@ import ManagerDropdown from './ManagerDropdown.vue'
 
 const isModalVisible = ref(false)
 const category1 = ref<Category | null>(null)
-const category2 = ref<Category | null>(null)
+const category2 = ref<SubCategory | null>(null)
 const mainCategoryArr = ref<Category[]>([])
 const subCategoryArr = ref<SubCategory[]>([])
 const afterSubCategoryArr = ref<SubCategory[]>([])
@@ -116,7 +116,7 @@ onMounted(async () => {
   category1.value = selected
   category2.value = subCategoryArr.value.find(ct => ct.name === data.categoryName) || null
   afterSubCategoryArr.value = subCategoryArr.value.filter(
-    subCategory => subCategory.mainCategoryId === selected?.id
+    subCategory => subCategory.mainCategoryId === selected?.mainCategoryId
   )
 })
 
@@ -124,7 +124,7 @@ watch(category1, async newValue => {
   if (isFirst.value) isFirst.value = false
   else category2.value = null
   afterSubCategoryArr.value = subCategoryArr.value.filter(
-    subCategory => subCategory.mainCategoryId === newValue?.id
+    subCategory => subCategory.mainCategoryId === newValue?.mainCategoryId
   )
 })
 
@@ -151,7 +151,7 @@ const handleSubmit = async () => {
     return
   }
   const requestData = {
-    categoryId: category2.value.id,
+    categoryId: category2.value.subCategoryId,
     processorId: approveData.value.processor.memberId,
     dueDate: isTimeFilled.value
       ? convertToISO(approveData.value.dueDate, approveData.value.dueTime)
diff --git a/src/components/request-history/RequestHistoryListCard.vue b/src/components/request-history/RequestHistoryListCard.vue
index 000b85c9..f781d8e5 100644
--- a/src/components/request-history/RequestHistoryListCard.vue
+++ b/src/components/request-history/RequestHistoryListCard.vue
@@ -30,8 +30,6 @@ const { info } = defineProps<{ info: RequestHistoryListData }>()
 const selectedID = ref<number | null>(null)
 
 const handleModal = (id: number | null) => {
-  if (id) document.body.style.overflow = 'hidden'
-  else document.body.style.overflow = ''
   selectedID.value = id
 }
 const myRequestTabList: ListCardProps[] = [
diff --git a/src/components/request-task/CategoryDropDown.vue b/src/components/request-task/CategoryDropDown.vue
index 558eac4b..7794d586 100644
--- a/src/components/request-task/CategoryDropDown.vue
+++ b/src/components/request-task/CategoryDropDown.vue
@@ -32,7 +32,7 @@
         class="absolute w-full max-h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
         <div
           v-for="option in options"
-          :key="option.id"
+          :key="'subCategoryId' in option ? option.subCategoryId : option.mainCategoryId"
           class="w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer"
           @click="selectOption(option)">
           {{ option.name }}
@@ -45,7 +45,7 @@
 <script lang="ts" setup>
 import { dropdownIcon } from '@/constants/iconPath'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
-import type { Category, CategoryDropdownProps } from '@/types/common'
+import type { Category, CategoryDropdownProps, SubCategory } from '@/types/common'
 import { computed, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
@@ -62,7 +62,7 @@ const toggleDropdown = () => {
   dropdownOpen.value = !dropdownOpen.value
 }
 
-const selectOption = (option: Category) => {
+const selectOption = (option: Category | SubCategory) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }
diff --git a/src/components/request-task/ReRequestTask.vue b/src/components/request-task/ReRequestTask.vue
index a55e3536..6b25418e 100644
--- a/src/components/request-task/ReRequestTask.vue
+++ b/src/components/request-task/ReRequestTask.vue
@@ -53,7 +53,7 @@ import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
 
 const category1 = ref<Category | null>(null)
-const category2 = ref<Category | null>(null)
+const category2 = ref<SubCategory | null>(null)
 
 const title = ref('')
 const description = ref('')
@@ -83,7 +83,7 @@ onMounted(async () => {
   category1.value = selected
   category2.value = subCategoryArr.value.find(ct => ct.name === data.categoryName) || null
   afterSubCategoryArr.value = subCategoryArr.value.filter(
-    subCategory => subCategory.mainCategoryId === selected?.id
+    subCategory => subCategory.mainCategoryId === selected?.mainCategoryId
   )
   title.value = data.title
   description.value = data.description
@@ -100,7 +100,7 @@ watch(category1, async newValue => {
     category2.value = null
   }
   afterSubCategoryArr.value = subCategoryArr.value.filter(
-    subCategory => subCategory.mainCategoryId === newValue?.id
+    subCategory => subCategory.mainCategoryId === newValue?.mainCategoryId
   )
 })
 
@@ -125,7 +125,7 @@ const handleSubmit = async () => {
     .map(initFile => initFile.fileId)
 
   const taskInfo = {
-    categoryId: category2.value.id,
+    categoryId: category2.value.subCategoryId,
     title: title.value,
     description: description.value
   }
diff --git a/src/components/request-task/RequestTask.vue b/src/components/request-task/RequestTask.vue
index 208a84f7..fa6ba801 100644
--- a/src/components/request-task/RequestTask.vue
+++ b/src/components/request-task/RequestTask.vue
@@ -52,7 +52,7 @@ import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
 
 const category1 = ref<Category | null>(null)
-const category2 = ref<Category | null>(null)
+const category2 = ref<SubCategory | null>(null)
 
 const title = ref('')
 const description = ref('')
@@ -73,13 +73,13 @@ onMounted(async () => {
 watch(category1, async newValue => {
   category2.value = null
   afterSubCategoryArr.value = subCategoryArr.value.filter(
-    subCategory => subCategory.mainCategoryId === newValue?.id
+    subCategory => subCategory.mainCategoryId === newValue?.mainCategoryId
   )
 })
 
 watch(category2, async newVal => {
   if (newVal) {
-    const res = await getSubCategoryDetail(newVal.id)
+    const res = await getSubCategoryDetail(newVal.subCategoryId)
     description.value = res.descriptionExample
   }
 })
@@ -111,7 +111,7 @@ const handleSubmit = async () => {
   }
   const formData = new FormData()
   const taskInfo = {
-    categoryId: category2.value.id,
+    categoryId: category2.value.subCategoryId,
     title: title.value,
     description: description.value
   }
diff --git a/src/components/request-task/RequestTaskDropdown.vue b/src/components/request-task/RequestTaskDropdown.vue
index ff1462ec..c17c9859 100644
--- a/src/components/request-task/RequestTaskDropdown.vue
+++ b/src/components/request-task/RequestTaskDropdown.vue
@@ -4,7 +4,9 @@
       <p class="text-body font-bold">{{ labelName }}</p>
       <p v-if="!isLabel">*</p>
     </div>
-    <div class="relative flex">
+    <div
+      ref="htmlRef"
+      class="relative flex">
       <div
         class="flex w-full h-11 items-center rounded p-4 border border-border-1"
         :class="disabled ? 'bg-background-1 text-disabled' : 'bg-white cursor-pointer'"
@@ -36,6 +38,7 @@ import { dropdownIcon } from '@/constants/iconPath'
 import type { RequestTaskDropdownProps } from '@/types/user'
 import { ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 
 const { placeholderText, options, labelName, modelValue, isLabel, disabled } =
   defineProps<RequestTaskDropdownProps>()
@@ -50,4 +53,6 @@ const selectOption = (option: string) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }
+
+const { htmlRef } = useOutsideClick(() => dropdownOpen.value && toggleDropdown())
 </script>
diff --git a/src/components/request-task/RequestTaskFileInput.vue b/src/components/request-task/RequestTaskFileInput.vue
index f5a4afa6..d1a13e6a 100644
--- a/src/components/request-task/RequestTaskFileInput.vue
+++ b/src/components/request-task/RequestTaskFileInput.vue
@@ -28,7 +28,7 @@
       </div>
       <label
         for="file"
-        class="button-medium-primary">
+        class="button-medium-primary !h-fit">
         <CommonIcons :name="uploadIcon" />
         <p>파일 선택</p>
       </label>
diff --git a/src/components/requested/RequestedListCard.vue b/src/components/requested/RequestedListCard.vue
index d525a442..167490c0 100644
--- a/src/components/requested/RequestedListCard.vue
+++ b/src/components/requested/RequestedListCard.vue
@@ -16,21 +16,13 @@
         @click.stop="
           userInfo.isReviewer && router.push(`/request-approve?requestId=${info.taskId}`)
         "
-        :class="
-          userInfo.isReviewer
-            ? 'button-medium-primary'
-            : 'button-medium text-disabled bg-background-1'
-        ">
+        :class="userInfo.isReviewer ? 'button-medium-primary' : 'button-medium-disabled'">
         승인
       </button>
       <button
         type="button"
         @click.stop="userInfo.isReviewer && toggleModal('reject')"
-        :class="
-          userInfo.isReviewer
-            ? 'button-medium-default'
-            : 'button-medium text-disabled bg-background-1'
-        ">
+        :class="userInfo.isReviewer ? 'button-medium-default' : 'button-medium-disabled'">
         반려
       </button>
     </div>
@@ -88,8 +80,6 @@ const requestedTabList: ListCardProps[] = [
 const selectedID = ref<number | null>(null)
 
 const handleModal = (id: number | null) => {
-  if (id) document.body.style.overflow = 'hidden'
-  else document.body.style.overflow = ''
   selectedID.value = id
 }
 
@@ -104,13 +94,11 @@ const isModalVisible = ref({
 const modalError = ref('')
 const rejectReason = ref('')
 const toggleModal = (key: keyof typeof isModalVisible.value) => {
-  document.body.style.overflow = 'hidden'
   isModalVisible.value = Object.fromEntries(
     Object.keys(isModalVisible.value).map(k => [k, k === key])
   ) as typeof isModalVisible.value
 }
 const closeModal = () => {
-  document.body.style.overflow = ''
   const prevSuccess = isModalVisible.value.success
   isModalVisible.value = { reject: false, fail: false, success: false }
   if (prevSuccess) queryClient.invalidateQueries({ queryKey: ['requested'] })
diff --git a/src/components/task-board/TaskBoard.vue b/src/components/task-board/TaskBoard.vue
index 4a9bd9b1..5a5fd9d0 100644
--- a/src/components/task-board/TaskBoard.vue
+++ b/src/components/task-board/TaskBoard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-y-auto">
+  <div class="overflow-y-auto grow">
     <div class="w-full grid grid-cols-3 gap-12 sticky top-0 bg-white z-30">
       <div class="flex bg-primary2 rounded-t-lg">
         <span class="text-xs font-bold text-body p-4">
diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 226175f3..38cc381b 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -40,6 +40,7 @@ import TaskDetailHistory from './TaskDetailHistory.vue'
 import TaskDetailLeft from './TaskDetailLeft.vue'
 import TaskDetailRight from './TaskDetailRight.vue'
 import TaskDetailTopBar from './TaskDetailTopBar.vue'
+import { onMounted, onUnmounted } from 'vue'
 
 const { closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
@@ -61,4 +62,11 @@ const { data: historyData } = useQuery<TaskDetailHistoryData>({
   queryFn: () => getHistory(selectedId),
   enabled: isLogined
 })
+
+onMounted(() => {
+  document.body.style.overflow = 'hidden'
+})
+onUnmounted(() => {
+  document.body.style.overflow = ''
+})
 </script>
diff --git a/src/components/task-detail/TaskDetailTopBar.vue b/src/components/task-detail/TaskDetailTopBar.vue
index d11f3eee..8361b15a 100644
--- a/src/components/task-detail/TaskDetailTopBar.vue
+++ b/src/components/task-detail/TaskDetailTopBar.vue
@@ -105,7 +105,6 @@ const finishCancel = async () => {
 }
 
 const onButtonClick = (url: string) => {
-  document.body.style.overflow = ''
   router.push(url)
 }
 </script>
diff --git a/src/components/task-detail/TaskStatusList.vue b/src/components/task-detail/TaskStatusList.vue
index 86b3ce88..23e7d2ab 100644
--- a/src/components/task-detail/TaskStatusList.vue
+++ b/src/components/task-detail/TaskStatusList.vue
@@ -21,7 +21,7 @@
       <template #header>{{ modalError }}</template>
     </ModalView>
     <div
-      v-for="statusItem in TASK_STATUS_LIST"
+      v-for="statusItem in TASK_STATUS_LIST.slice(1)"
       :key="statusItem.content"
       class="flex px-3 py-1 rounded-[45px]"
       :class="[bgColor(statusItem.value), isProcessor ? 'cursor-pointer' : '']"
diff --git a/src/components/task-management/CategoryAdd.vue b/src/components/task-management/CategoryAdd.vue
index 2148749f..7487dcbf 100644
--- a/src/components/task-management/CategoryAdd.vue
+++ b/src/components/task-management/CategoryAdd.vue
@@ -4,21 +4,21 @@
       :is-open="isModalVisible.add"
       type="successType"
       @close="handleAddModal">
-      <template #header>카테고리가 {{ route.params.id ? '수정' : '등록' }}되었습니다</template>
+      <template #header>카테고리가 {{ route.params.id ? '수정' : '추가' }}되었습니다</template>
     </ModalView>
     <ModalView
       :is-open="isModalVisible.cancel"
       type="warningType"
       @close="handleCancelModal"
       @click="handleGoBack">
-      <template #header>{{ route.params.id ? '수정' : '생성' }}을 취소 하시겠습니까?</template>
+      <template #header>{{ route.params.id ? '수정을' : '추가를' }} 취소 하시겠습니까?</template>
       <template #body>작성하신 내용은 사라집니다</template>
     </ModalView>
     <ModalView
       :is-open="isModalVisible.fail"
       type="failType"
       @close="handleFailModal">
-      <template #header>카테고리 정보를 확인해주세요</template>
+      <template #header>{{ errorMessage }}</template>
     </ModalView>
     <RequestTaskDropdown
       v-model="mainCategory"
@@ -53,7 +53,7 @@
       :handle-cancel="handleCancel"
       :handle-submit="handleSubmit"
       cancel-text="취소"
-      :submit-text="route.params.id ? '수정' : '등록'" />
+      :submit-text="route.params.id ? '수정' : '추가'" />
   </div>
 </template>
 
@@ -68,6 +68,7 @@ import { axiosInstance } from '@/utils/axios'
 import { getMainCategory } from '@/api/common'
 import type { Category, CategoryForm } from '@/types/common'
 import ModalView from '../common/ModalView.vue'
+import axios from 'axios'
 
 const router = useRouter()
 const route = useRoute()
@@ -77,6 +78,7 @@ const { categoryStep } = defineProps<{
 }>()
 
 const isModalVisible = ref({ add: false, cancel: false, fail: false })
+const errorMessage = ref('')
 
 const categoryForm = ref<CategoryForm>(CATEGORY_FORM)
 
@@ -87,7 +89,8 @@ const handleAddModal = () => {
 const handleCancelModal = () => {
   isModalVisible.value.cancel = !isModalVisible.value.cancel
 }
-const handleFailModal = () => {
+const handleFailModal = (message: string = '카테고리 정보를 확인해주세요') => {
+  errorMessage.value = message
   isModalVisible.value.fail = !isModalVisible.value.fail
 }
 
@@ -121,8 +124,14 @@ const handleSubmit = async () => {
       await axiosInstance.post(postUrl, categoryForm.value)
     }
     isModalVisible.value.add = true
-  } catch {
-    handleFailModal()
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      if (error.response?.data === 'TASK_013') {
+        handleFailModal('중복된 카테고리명\n혹은 고유코드입니다')
+      } else {
+        handleFailModal()
+      }
+    }
   }
 }
 
@@ -134,7 +143,7 @@ const isCodeInvalidate = computed(() => {
   return isInvalidate ? 'code' : ''
 })
 
-const mainCategory = ref('')
+const mainCategory = ref('1차 카테고리를 선택해주세요')
 const categoryOptions = ref<Category[]>([])
 onMounted(async () => {
   const id = Number(route.params.id)
@@ -142,7 +151,7 @@ onMounted(async () => {
   if (categoryStep === '1') {
     if (id) {
       const mainCategories: Category[] = await getMainCategory()
-      const initialValue = mainCategories.find(el => el.id === id)
+      const initialValue = mainCategories.find(el => el.mainCategoryId === id)
       if (initialValue) {
         categoryForm.value = { name: initialValue.name, code: initialValue.code }
       }
@@ -159,7 +168,8 @@ onMounted(async () => {
           descriptionExample: initialValue.descriptionExample
         }
         mainCategory.value =
-          categoryOptions.value.find(el => el.id === initialValue.mainCategoryId)?.name || ''
+          categoryOptions.value.find(el => el.mainCategoryId === initialValue.mainCategoryId)
+            ?.name || ''
       }
     }
   }
@@ -167,7 +177,7 @@ onMounted(async () => {
 watch(mainCategory, () => {
   categoryForm.value.mainCategoryId = categoryOptions.value.find(
     el => el.name === mainCategory.value
-  )?.id
+  )?.mainCategoryId
 })
 
 const onValueChange = (event: Event) => {
diff --git a/src/components/task-management/CategoryLine.vue b/src/components/task-management/CategoryLine.vue
index a4b52b47..b2e908d8 100644
--- a/src/components/task-management/CategoryLine.vue
+++ b/src/components/task-management/CategoryLine.vue
@@ -2,7 +2,7 @@
   <div class="w-full">
     <div
       v-for="main in categories"
-      :key="main.id"
+      :key="main.mainCategoryId"
       class="flex w-full flex-col">
       <div
         v-for="(sub, index) in (main.subCategory?.length || 0) + 1"
@@ -12,19 +12,19 @@
           <div
             v-if="index === 0"
             class="flex gap-4 items-center w-[200px]">
-            <p class="text-xs text-body w-[60px] text-center">{{ main.code }}</p>
+            <p class="text-xs text-body font-bold w-[60px] text-center">{{ main.code }}</p>
             <p>{{ main.name }}</p>
           </div>
           <div class="flex gap-2 text-xs font-bold">
             <button
               type="button"
-              @click="router.push(`/category-first/${main.id}`)"
+              @click="router.push(`/category-first/${main.mainCategoryId}`)"
               class="text-primary1 hover:underline">
               수정
             </button>
             <button
               type="button"
-              @click="openModal(main.id)"
+              @click="openModal(main.mainCategoryId)"
               class="text-red-1 hover:underline">
               삭제
             </button>
diff --git a/src/components/task-management/CategoryLineSub.vue b/src/components/task-management/CategoryLineSub.vue
index bfd9f850..19ce91ec 100644
--- a/src/components/task-management/CategoryLineSub.vue
+++ b/src/components/task-management/CategoryLineSub.vue
@@ -2,11 +2,11 @@
   <div class="w-full">
     <div
       v-for="main in categories"
-      :key="main.id"
+      :key="main.mainCategoryId"
       class="flex w-full flex-col">
       <div
         v-for="sub in main.subCategory"
-        :key="sub.id"
+        :key="sub.subCategoryId"
         class="flex w-full flex-col">
         <div class="category-management-line justify-between bg-white">
           <div class="flex gap-4 items-center">
@@ -16,13 +16,13 @@
           <div class="flex gap-2 text-xs font-bold">
             <button
               type="button"
-              @click="router.push(`/category-second/${sub.id}`)"
+              @click="router.push(`/category-second/${sub.subCategoryId}`)"
               class="text-primary1 hover:underline">
               수정
             </button>
             <button
               type="button"
-              @click="openModal(sub.id)"
+              @click="openModal(sub.subCategoryId)"
               class="text-red-1 hover:underline">
               삭제
             </button>
@@ -30,8 +30,8 @@
         </div>
         <ModalView
           type="warningType"
-          :is-open="isModalVisible && selectedId === sub.id"
-          @click="deleteCategory(sub.id)"
+          :is-open="isModalVisible && selectedId === sub.subCategoryId"
+          @click="deleteCategory(sub.subCategoryId)"
           @close="closeModal">
           <template #header>카테고리를 삭제 하시겠습니까?</template>
           <template #body>삭제된 카테고리는 복구할 수 없습니다</template>
diff --git a/src/components/top-bar/NotificationMessage.vue b/src/components/top-bar/NotificationMessage.vue
index 089194f9..47b26a50 100644
--- a/src/components/top-bar/NotificationMessage.vue
+++ b/src/components/top-bar/NotificationMessage.vue
@@ -4,9 +4,12 @@
       'flex flex-col border-b py-3 px-4 cursor-pointer hover:bg-background-2 gap-2',
       { 'bg-primary2': !isRead }
     ]">
-    <p class="text-xs text-body font-bold whitespace-pre-wrap">
-      {{ notificationType[type] }}
-    </p>
+    <span class="flex w-full justify-between items-center">
+      <p class="text-xs text-body font-bold whitespace-pre-wrap">
+        {{ notificationType[type] }}
+      </p>
+      <span class="text-xs text-body">{{ formatTimeAgo(createdAt) }}</span>
+    </span>
     <div
       class="flex flex-col text-xs gap-1"
       v-if="type === 'COMMENT'">
@@ -43,13 +46,15 @@
 
 <script setup lang="ts">
 import type { NotificationType, Status } from '@/types/common'
+import { formatTimeAgo } from '@/utils/date'
 import { statusAsText } from '@/utils/statusAsText'
 
-const { type, title, message, isRead } = defineProps<{
+const { type, title, message, isRead, createdAt } = defineProps<{
   type: NotificationType
   title: string
   message?: string
   isRead?: boolean
+  createdAt: string
 }>()
 
 const notificationType = {
diff --git a/src/components/top-bar/NotificationModal.vue b/src/components/top-bar/NotificationModal.vue
index d3c4a4e7..32559523 100644
--- a/src/components/top-bar/NotificationModal.vue
+++ b/src/components/top-bar/NotificationModal.vue
@@ -22,15 +22,21 @@
       </div>
     </div>
     <div class="grow h-full flex flex-col overflow-y-auto">
-      <NotificationMessage
-        v-for="notification in notifications"
-        :key="notification.notificationId"
-        @click="readNotifi(notification.notificationId, notification.taskId)"
-        :type="notification.notificationType"
-        :title="notification.taskTitle"
-        :message="notification.message"
-        :is-read="notification.isRead">
-      </NotificationMessage>
+      <template v-if="notifications">
+        <NotificationMessage
+          v-for="notification in notifications"
+          :key="notification.notificationId"
+          @click="readNotifi(notification.notificationId, notification.taskId)"
+          :type="notification.notificationType"
+          :title="notification.taskTitle"
+          :message="notification.message"
+          :is-read="notification.isRead"
+          :createdAt="notification.createdAt">
+        </NotificationMessage>
+      </template>
+      <template v-else>
+        <NoContent title="전달 받은 알림이 없습니다" />
+      </template>
       <InfiniteLoading
         @infinite="loadMoreNotifications"
         class="flex items-center justify-center">
@@ -60,6 +66,7 @@ import { ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 import NotificationMessage from './NotificationMessage.vue'
 import { useRouter } from 'vue-router'
+import NoContent from '../lists/NoContent.vue'
 
 const { isOpen } = defineProps<{
   isOpen: boolean
@@ -102,10 +109,9 @@ const loadMoreNotifications = async ($state: InfiniteLoadingState) => {
 }
 
 const readNotifi = async (id: number, taskId: number) => {
-  document.body.style.overflow = 'hidden'
   await patchNotificationRead(id)
   emit('close')
-  router.push({ query: { taskId } })
+  router.replace({ query: { taskId } })
 }
 
 const emit = defineEmits<{
diff --git a/src/components/top-bar/ProfileModal.vue b/src/components/top-bar/ProfileModal.vue
index 4cdd8642..3cfa2ef5 100644
--- a/src/components/top-bar/ProfileModal.vue
+++ b/src/components/top-bar/ProfileModal.vue
@@ -67,7 +67,7 @@ const emit = defineEmits<{
 }>()
 
 const handleEdit = () => {
-  router.replace('/edit-information')
+  router.push('/edit-information')
   emit('close')
 }
 const openLogoutModal = () => {
diff --git a/src/components/top-bar/TopBar.vue b/src/components/top-bar/TopBar.vue
index d6572d04..11ef2161 100644
--- a/src/components/top-bar/TopBar.vue
+++ b/src/components/top-bar/TopBar.vue
@@ -12,12 +12,13 @@
       </div>
       <div
         v-if="isLogined"
-        class="flex items-center gap-6">
+        class="flex items-center gap-5">
         <div
           :key="isNotifiVisible + ''"
           ref="notifiRef"
           class="flex">
           <button
+            class="p-1 hover:bg-background-2 rounded"
             type="button"
             @click="toggleNotifi">
             <NotificationIcon :new-notification="countNotifi" />
@@ -60,33 +61,16 @@ import { useMemberStore } from '@/stores/member'
 import NotificationModal from './NotificationModal.vue'
 import ProfileModal from './ProfileModal.vue'
 import { getNotifiCount } from '@/api/common'
-import { useRoute, useRouter } from 'vue-router'
-import { PERMITTED_URL } from '@/constants/common'
 import ImageContainer from '../common/ImageContainer.vue'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
 
 const memberStore = useMemberStore()
 const { isLogined, info } = storeToRefs(memberStore)
 
-const route = useRoute()
-const router = useRouter()
 onMounted(async () => {
-  await memberStore.updateMemberInfoWithToken()
-
   if (isLogined.value) {
     await fetchNotificationCount()
   }
-
-  const originUrl = route.path.split('/')[1]
-  if (info.value.role === 'ROLE_USER') {
-    if (!PERMITTED_URL.ROLE_USER.includes(originUrl)) router.replace('/my-request')
-  } else if (info.value.role === 'ROLE_MANAGER') {
-    if (!PERMITTED_URL.ROLE_MANAGER.includes(originUrl)) router.replace('/my-task')
-  } else if (info.value.role === 'ROLE_ADMIN') {
-    if (!PERMITTED_URL.ROLE_ADMIN.includes(originUrl)) router.replace('/member-management')
-  } else {
-    if (!PERMITTED_URL.UNKNOWN.includes(originUrl)) router.push('/login')
-  }
 })
 
 const isSideOpen = ref(false)
diff --git a/src/constants/common.ts b/src/constants/common.ts
index afe54545..7bb8f5b1 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -9,6 +9,7 @@ export const TERM_LIST = [
   { value: '2190', content: '3개월 이내' }
 ]
 export const TASK_STATUS_LIST: TaskStatusListTypes[] = [
+  { value: 'REQUESTED', content: '요청' },
   { value: 'IN_PROGRESS', content: '진행 중' },
   { value: 'IN_REVIEWING', content: '검토 중' },
   { value: 'COMPLETED', content: '완료' },
@@ -39,32 +40,31 @@ export const COLOR_LIST = [
 ]
 
 export const PERMITTED_URL = {
-  UNKNOWN: ['login', 'pw-change-email', 'pw-change'],
-  ROLE_USER: ['my-request', 'task-request', 'edit-information', 'pw-check', 'pw-change'],
+  UNKNOWN: ['login', 'pw-change-email'],
+  ROLE_USER: ['my-request', 'task-request', 'edit-information', 'pw-change'],
   ROLE_MANAGER: [
-    'my-request',
-    'task-request',
-    'requested',
-    'request-history',
     'my-task',
     'task-board',
     'team-board',
     'statistics',
-    'task-detail',
+    'my-request',
+    'task-request',
+    'requested',
+    'request-approve',
+    'request-history',
     'edit-information',
-    'pw-check',
     'pw-change'
   ],
   ROLE_ADMIN: [
     'member-management',
-    'edit-information',
+    'user-registration',
+    'user-update',
     'task-management',
     'category-first',
     'category-second',
     'login-logs',
     'api-logs',
     'edit-information',
-    'pw-check',
     'pw-change'
   ]
 }
diff --git a/src/layout/TheView.vue b/src/layout/TheView.vue
index e2ff4e25..1b0fc0b3 100644
--- a/src/layout/TheView.vue
+++ b/src/layout/TheView.vue
@@ -6,18 +6,37 @@
         :selected-id="Number(selectedID)"
         :close-task-detail="() => handleModal(null)" />
     </div>
+    <ModalView
+      type="failType"
+      :is-open="header !== ''"
+      @close="computedOnClick">
+      <template
+        v-if="header"
+        #header>
+        {{ header }}
+      </template>
+      <template
+        v-if="body"
+        #body>
+        {{ body }}
+      </template>
+    </ModalView>
     <RouterView />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import TaskDetail from '@/components/task-detail/TaskDetail.vue'
-import router from '@/router'
+import ModalView from '@/components/common/ModalView.vue'
+import { useErrorStore } from '@/stores/error'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
 
 const route = useRoute()
+const router = useRouter()
 const selectedID = ref(route.query?.taskId || null)
 
 watch(
@@ -30,8 +49,13 @@ watch(
 const handleModal = (id: string | null) => {
   selectedID.value = id
   if (id === null) {
-    document.body.style.overflow = ''
-    router.push({ query: {} })
+    router.replace({ query: {} })
   }
 }
+
+const errorStore = useErrorStore()
+const { header, body } = storeToRefs(errorStore)
+const computedOnClick = computed(() => {
+  return errorStore.onClick ? errorStore.onClick : errorStore.clearError
+})
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
index c70468ff..d962c9a1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,6 @@
-import Cookies from 'js-cookie'
+import { PERMITTED_URL } from '@/constants/common'
+import { useErrorStore } from '@/stores/error'
+import { useMemberStore } from '@/stores/member'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
@@ -134,21 +136,55 @@ const router = createRouter({
   ]
 })
 
-router.beforeEach((to, from, next) => {
-  if (to.path === '/pw-change') {
-    if (
-      from.path === '/pw-check' ||
-      from.path === '/pw-change-email' ||
-      (from.path === '/login' && Cookies.get('accessToken'))
-    ) {
-      next()
-    } else {
-      next('/login')
-      return
+router.beforeEach(async (to, from, next) => {
+  const memberStore = useMemberStore()
+  const { setError } = useErrorStore()
+
+  await memberStore.updateMemberInfoWithToken()
+  const { info } = memberStore
+
+  const originUrl = to.path.split('/')[1]
+
+  const redirectMap = {
+    ROLE_USER: '/my-request',
+    ROLE_MANAGER: '/my-task',
+    ROLE_ADMIN: '/member-management'
+  }
+
+  if (info.role && to.path === '/login') {
+    return next(redirectMap[info.role])
+  }
+
+  if (!info.role) {
+    if (PERMITTED_URL.UNKNOWN.includes(originUrl)) {
+      return next()
+    }
+    if (to.path === '/login') {
+      return next()
     }
-  } else {
-    next()
+    setError('로그인이 필요합니다')
+    return next('/login')
   }
+
+  const permittedUrlMap = {
+    ROLE_USER: PERMITTED_URL.ROLE_USER,
+    ROLE_MANAGER: PERMITTED_URL.ROLE_MANAGER,
+    ROLE_ADMIN: PERMITTED_URL.ROLE_ADMIN
+  }
+
+  if (from.path === redirectMap[info.role] && !permittedUrlMap[info.role].includes(originUrl)) {
+    return false
+  }
+
+  if (!permittedUrlMap[info.role].includes(originUrl)) {
+    if (to.path === redirectMap[info.role]) {
+      return next()
+    }
+    setError('권한이 없는 페이지입니다')
+    return next(redirectMap[info.role])
+  }
+
+  return next()
 })
 
 export default router
diff --git a/src/stores/error.ts b/src/stores/error.ts
new file mode 100644
index 00000000..a17b95b7
--- /dev/null
+++ b/src/stores/error.ts
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useErrorStore = defineStore('error', () => {
+  const header = ref('')
+  const body = ref('')
+  const onClick = ref<(() => void) | null>(null)
+
+  const setError = (newHeader: string, newBody?: string, newOnClick?: () => void) => {
+    header.value = newHeader
+    if (newBody) body.value = newBody
+    if (newOnClick) onClick.value = newOnClick
+  }
+
+  const clearError = () => {
+    header.value = ''
+    body.value = ''
+    onClick.value = null
+  }
+
+  return { header, body, onClick, setError, clearError }
+})
diff --git a/src/stores/member.ts b/src/stores/member.ts
index 98fc3992..5f1c353f 100644
--- a/src/stores/member.ts
+++ b/src/stores/member.ts
@@ -3,7 +3,6 @@ import { axiosInstance } from '@/utils/axios'
 import { ref } from 'vue'
 import type { User } from '@/types/auth'
 import Cookies from 'js-cookie'
-import { useRouter } from 'vue-router'
 
 export const useMemberStore = defineStore('memberInfo', () => {
   const INITIAL_INFO: User = {
@@ -24,13 +23,11 @@ export const useMemberStore = defineStore('memberInfo', () => {
 
   const info = ref<User>(INITIAL_INFO)
   const isLogined = ref(false)
-  const router = useRouter()
 
   async function updateMemberInfoWithToken() {
-    if (!Cookies.get('accessToken')) {
-      router.push('/login')
-      return
-    }
+    const token = Cookies.get('accessToken')
+    if (!token) return
+
     try {
       const { data }: { data: User } = await axiosInstance.get('/api/members/info')
       info.value = data
diff --git a/src/types/admin.ts b/src/types/admin.ts
index b97e4c3a..b584acd2 100644
--- a/src/types/admin.ts
+++ b/src/types/admin.ts
@@ -10,6 +10,7 @@ export interface MemberManagementListData {
   role: Role
   isReviewer: boolean
   createdAt: string
+  memberStatus: string
 }
 
 export interface LoginLogsListData {
diff --git a/src/types/common.ts b/src/types/common.ts
index 82225cc2..c1d69ee9 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -14,14 +14,14 @@ export interface Option {
 }
 
 export interface Category {
-  id: number
+  mainCategoryId: number
   name: string
   code: string
   subCategory?: SubCategory[]
 }
 
 export interface SubCategory {
-  id: number
+  subCategoryId: number
   mainCategoryId: number
   name: string
   code: string
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 6bf608f9..2310dfc0 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -1,7 +1,9 @@
+import { useErrorStore } from '@/stores/error'
 import { useMemberStore } from '@/stores/member'
 import axios, { type AxiosInstance, type InternalAxiosRequestConfig } from 'axios'
 import Cookies from 'js-cookie'
 import { storeToRefs } from 'pinia'
+import { redirectToLogin } from './redirectToLogin'
 
 const baseURL = import.meta.env.VITE_API_BASE_URL
 
@@ -22,7 +24,6 @@ const getNewAccessToken = async () => {
   } catch {
     Cookies.remove('accessToken')
     Cookies.remove('refreshToken')
-    window.location.href = 'login'
   }
 }
 const setInterceptors = (instance: AxiosInstance) => {
@@ -42,14 +43,15 @@ const setInterceptors = (instance: AxiosInstance) => {
   instance.interceptors.response.use(
     response => response,
     async error => {
+      const { setError } = useErrorStore()
       if (axios.isCancel(error)) {
-        console.log('요청이 취소되었습니다:', error.message)
+        setError('요청이 취소되었습니다:', error.message)
       } else if (error.response) {
-        console.log('상태확인 에러메세지:', error.response)
         switch (error.response.status) {
           case 401:
             if (error.response.data === 'AUTH_003') {
               Cookies.remove('refreshToken')
+              setError('유효하지 않은 토큰입니다', '다시 로그인 해주세요', redirectToLogin)
             }
             break
           case 403: {
@@ -67,8 +69,8 @@ const setInterceptors = (instance: AxiosInstance) => {
                   originalRequest.headers.Authorization = `Bearer ${newAccessToken}`
                   isLogined.value = true
                   return instance(originalRequest)
-                } catch (err) {
-                  console.error('토큰 갱신 실패:', err)
+                } catch {
+                  setError('토큰 갱신에 실패하였습니다', '다시 로그인 해주세요', redirectToLogin)
                 }
               }
             }
@@ -80,17 +82,18 @@ const setInterceptors = (instance: AxiosInstance) => {
             } else if (error.response.data === 'MEMBER_012') {
               return Promise.reject(new Error('MEMBER_DUPLICATED'))
             }
+            break
           case 404:
-            console.error('요청한 자원을 찾을 수 없습니다.')
+            setError('요청한 자원을 찾을 수 없습니다')
             break
           case 500:
-            console.error('서버 오류: 잠시 후 다시 시도하세요.')
+            setError('서버 오류', '잠시 후 다시 시도하세요')
             break
           default:
-            console.error(`에러 발생: ${error.response.status}`)
+            setError('에러 발생', `${error.response.status}`)
         }
       } else {
-        console.error('네트워크 오류: 서버에 연결할 수 없습니다.')
+        setError('네트워크 오류', '서버에 연결할 수 없습니다')
       }
       return Promise.reject(error)
     }
diff --git a/src/utils/date.ts b/src/utils/date.ts
index b52a8b5e..7aa76c9c 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -119,3 +119,32 @@ export const formatOnlyTime = (timeString: string) => {
 
   return `${period} ${formattedHours}시 ${String(minutes).padStart(2, '0')}분`
 }
+
+export const formatTimeAgo = (createdAt: string) => {
+  const now = new Date()
+  const createdDate = new Date(createdAt)
+  const diffInSeconds = Math.floor((now.getTime() - createdDate.getTime()) / 1000)
+
+  const diffInMinutes = Math.floor(diffInSeconds / 60)
+  const diffInHours = Math.floor(diffInMinutes / 60)
+  const diffInDays = Math.floor(diffInHours / 24)
+  const diffInWeeks = Math.floor(diffInDays / 7)
+  const diffInMonths = Math.floor(diffInDays / 30)
+  const diffInYears = Math.floor(diffInDays / 365)
+
+  if (diffInSeconds < 60) {
+    return `${diffInSeconds}초 전`
+  } else if (diffInMinutes < 60) {
+    return `${diffInMinutes}분 전`
+  } else if (diffInHours < 24) {
+    return `${diffInHours}시간 전`
+  } else if (diffInDays < 7) {
+    return `${diffInDays}일 전`
+  } else if (diffInWeeks < 5) {
+    return `${diffInWeeks}주 전`
+  } else if (diffInMonths < 12) {
+    return `${diffInMonths}달 전`
+  } else {
+    return `${diffInYears}년 전`
+  }
+}
diff --git a/src/utils/preventEnter.ts b/src/utils/preventEnter.ts
new file mode 100644
index 00000000..99ac55b8
--- /dev/null
+++ b/src/utils/preventEnter.ts
@@ -0,0 +1,5 @@
+export const preventEnter = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+  }
+}
diff --git a/src/utils/redirectToLogin.ts b/src/utils/redirectToLogin.ts
new file mode 100644
index 00000000..5bdcb932
--- /dev/null
+++ b/src/utils/redirectToLogin.ts
@@ -0,0 +1,7 @@
+import { useErrorStore } from '@/stores/error'
+
+export const redirectToLogin = () => {
+  const { clearError } = useErrorStore()
+  clearError()
+  window.location.href = '/login'
+}
diff --git a/src/views/CategoryFirstAddView.vue b/src/views/CategoryFirstAddView.vue
index 1e40776e..b00888f0 100644
--- a/src/views/CategoryFirstAddView.vue
+++ b/src/views/CategoryFirstAddView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="form-view-container">
-    <TitleBar :title="`1차 카테고리 ${$route.params.id ? '수정' : '등록'}`" />
+    <TitleBar :title="`1차 카테고리 ${$route.params.id ? '수정' : '추가'}`" />
     <CategoryAdd categoryStep="1" />
   </div>
 </template>
diff --git a/src/views/CategorySecondAddView.vue b/src/views/CategorySecondAddView.vue
index f2949fe9..ca290ddb 100644
--- a/src/views/CategorySecondAddView.vue
+++ b/src/views/CategorySecondAddView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="form-view-container">
-    <TitleBar :title="`2차 카테고리 ${$route.params.id ? '수정' : '등록'}`" />
+    <TitleBar :title="`2차 카테고리 ${$route.params.id ? '수정' : '추가'}`" />
     <CategoryAdd categoryStep="2" />
   </div>
   <div class="w-full bg-body"></div>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 3ea3d5db..4f8ce630 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -14,8 +14,8 @@
     </div>
     <form
       @submit.prevent="handleLogin"
-      class="mb-2">
-      <div class="mb-7">
+      class="flex flex-col gap-8">
+      <div class="relative">
         <input
           type="text"
           id="id"
@@ -24,7 +24,7 @@
           required
           class="input-box" />
       </div>
-      <div class="mb-8">
+      <div class="relative">
         <input
           type="password"
           id="password"
@@ -33,19 +33,19 @@
           required
           class="input-box" />
       </div>
-      <button
-        type="submit"
-        class="button-large-primary">
-        로그인
-      </button>
+      <div class="flex flex-col gap-2 items-center">
+        <button
+          type="submit"
+          class="button-large-primary">
+          로그인
+        </button>
+        <RouterLink
+          class="flex justify-center text-body font-bold text-xs hover:underline"
+          to="/pw-change-email">
+          비밀번호 재설정
+        </RouterLink>
+      </div>
     </form>
-    <div class="flex w-full justify-center">
-      <RouterLink
-        class="text-body font-bold text-[12px] hover:underline"
-        to="/pw-change-email"
-        >비밀번호 재설정</RouterLink
-      >
-    </div>
   </div>
 </template>
 
@@ -85,16 +85,16 @@ const handleLogin = async () => {
     } else if (res && role && Cookies.get('refreshToken')) {
       switch (role) {
         case 'ROLE_ADMIN':
-          router.replace('/member-management')
+          router.push('/member-management')
           break
         case 'ROLE_MANAGER':
-          router.replace('my-task')
+          router.push('my-task')
           break
         case 'ROLE_USER':
-          router.replace('/my-request')
+          router.push('/my-request')
           break
         default:
-          router.replace('/')
+          router.push('/')
       }
     }
   } catch (error) {
diff --git a/src/views/PwChangeEmail.vue b/src/views/PwChangeEmail.vue
index 0e62bf6c..147a2e3c 100644
--- a/src/views/PwChangeEmail.vue
+++ b/src/views/PwChangeEmail.vue
@@ -4,7 +4,11 @@
       :isOpen="isModalVisible"
       type="successType"
       @close="closeModal">
-      <template #header>새로운 비밀번호가 전송되었습니다</template>
+      <template #header>
+        <span class="whitespace-pre-wrap text-center">
+          {{ '새로운 비밀번호가\n전송되었습니다' }}
+        </span>
+      </template>
       <template #body>이메일을 확인해주세요</template>
     </ModalView>
     <ModalView
@@ -21,8 +25,8 @@
     </div>
     <form
       @submit.prevent="handleCheck"
-      class="mb-2">
-      <div class="mb-7">
+      class="flex flex-col gap-8">
+      <div class="relative">
         <input
           type="email"
           id="email"
@@ -31,7 +35,7 @@
           required
           class="input-box" />
       </div>
-      <div class="relative mb-8">
+      <div class="relative">
         <input
           type="text"
           id="name"
@@ -40,13 +44,19 @@
           required
           class="input-box" />
       </div>
-      <button
-        type="submit"
-        class="button-large-primary">
-        확인
-      </button>
+      <div class="flex flex-col gap-2 items-center">
+        <button
+          type="submit"
+          class="button-large-primary">
+          확인
+        </button>
+        <RouterLink
+          class="flex justify-center text-xs font-bold text-body hover:underline"
+          to="/login">
+          로그인
+        </RouterLink>
+      </div>
     </form>
-    <div class="flex w-full justify-center"></div>
   </div>
 </template>
 
@@ -55,8 +65,8 @@ import { postPasswordEmailSend } from '@/api/auth'
 import TitleContainer from '@/components/common/TitleContainer.vue'
 import axios from 'axios'
 import { ref } from 'vue'
-import router from '../router/index'
 import ModalView from '@/components/common/ModalView.vue'
+import { useRouter } from 'vue-router'
 
 const messageHeader = ref('')
 const messageBody = ref('')
@@ -66,8 +76,9 @@ const isFailModalVisible = ref(false)
 const name = ref('')
 const email = ref('')
 
+const router = useRouter()
+
 const closeModal = () => {
-  isModalVisible.value = !isModalVisible.value
   router.push('/login')
 }
 const closeFailModal = () => {
diff --git a/src/views/PwChangeView.vue b/src/views/PwChangeView.vue
index a8a7d0d4..d57fc6fb 100644
--- a/src/views/PwChangeView.vue
+++ b/src/views/PwChangeView.vue
@@ -1,23 +1,55 @@
 <template>
   <div class="max-w-400">
-    <ModalView
-      :isOpen="isModalOpen"
-      type="successType"
-      @close="closeModal">
-      <template #header>비밀번호가 변경 되었습니다</template>
-      <template #body>다시 로그인 해주세요</template>
-    </ModalView>
     <div class="py-16">
+      <ModalView
+        :is-open="isErrorVisible"
+        type="failType"
+        @close="closeError">
+        <template #header>{{ messageHeader }}</template>
+        <template #body>{{ messageBody }}</template>
+      </ModalView>
+      <ModalView
+        :isOpen="isModalVisible"
+        type="successType"
+        @close="closeModal">
+        <template #header>비밀번호가 변경 되었습니다</template>
+      </ModalView>
       <TitleContainer
-        v-if="!isFirst"
+        v-if="!isConfirmed"
         :title="'비밀번호\n재설정'"
-        content="새로운 비밀번호를 입력해주세요" />
+        :content="'비밀번호 재설정을 위해\n현재 비밀번호를 입력해주세요'" />
       <TitleContainer
-        v-if="isFirst"
+        v-else
         :title="'비밀번호\n재설정'"
-        content="초기 비밀번호를 변경해주세요" />
+        content="새로운 비밀번호를 입력해주세요" />
     </div>
     <form
+      v-if="!isConfirmed"
+      @submit.prevent="handleCheck"
+      class="flex flex-col gap-8">
+      <input
+        type="password"
+        id="pw"
+        v-model="pw"
+        placeholder="비밀번호를 입력해주세요"
+        required
+        class="input-box" />
+      <div class="flex flex-col gap-2">
+        <button
+          type="submit"
+          class="button-large-primary">
+          확인
+        </button>
+        <button
+          type="button"
+          class="flex justify-center text-xs font-bold text-body hover:underline"
+          @click="router.replace('/edit-information')">
+          이전으로
+        </button>
+      </div>
+    </form>
+    <form
+      v-else
       @submit.prevent="handleChange"
       class="flex flex-col gap-8">
       <div class="relative">
@@ -56,37 +88,82 @@
           비밀번호가 일치하지 않아요
         </p>
       </div>
-      <button
-        type="submit"
-        class="button-large-primary">
-        비밀번호 재설정
-      </button>
+      <div class="flex flex-col gap-2 items-center">
+        <button
+          type="submit"
+          class="button-large-primary">
+          비밀번호 재설정
+        </button>
+        <button
+          type="button"
+          class="flex justify-center text-xs font-bold text-body hover:underline"
+          @click="router.replace('/edit-information')">
+          취소
+        </button>
+      </div>
     </form>
-    <div class="flex w-full justify-center"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { deleteLogout, patchPassword } from '@/api/auth'
+import { patchPassword, postPasswordCheck } from '@/api/auth'
 import TitleContainer from '@/components/common/TitleContainer.vue'
-import Cookies from 'js-cookie'
-import { useMemberStore } from '@/stores/member'
-import { storeToRefs } from 'pinia'
+import axios from 'axios'
+import { nextTick, ref } from 'vue'
 import ModalView from '@/components/common/ModalView.vue'
-const memberStore = useMemberStore()
-const { isLogined } = storeToRefs(memberStore)
+import { useRouter } from 'vue-router'
+
+const isErrorVisible = ref(false)
+
+const messageHeader = ref('')
+const messageBody = ref('')
+
+const pw = ref('')
+const isConfirmed = ref(false)
+
+const handleCheck = async () => {
+  try {
+    await postPasswordCheck(pw.value)
+    isConfirmed.value = true
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      switch (error?.response?.status) {
+        case 400:
+          isErrorVisible.value = !isErrorVisible.value
+          messageHeader.value = '비밀번호가 일치하지 않습니다'
+          messageBody.value = '다시 확인해주세요'
+          break
+
+        case 401:
+          isErrorVisible.value = !isErrorVisible.value
+          messageHeader.value = '비밀번호가 일치하지 않습니다'
+          messageBody.value = '다시 확인해주세요'
+          break
+
+        case 500:
+          isErrorVisible.value = !isErrorVisible.value
+          messageHeader.value = '서버에 문제가 발생했습니다'
+          messageBody.value = '잠시 후 다시 이용해주세요'
+          break
+
+        default:
+          isErrorVisible.value = !isErrorVisible.value
+          messageHeader.value = '문제가 발생했습니다'
+          messageBody.value = '잠시 후 다시 이용해주세요'
+          break
+      }
+    }
+  }
+}
 
-const isFirst = Cookies.get('accessToken') ? (Cookies.get('refreshToken') ? false : true) : false
 const newPw = ref('')
 const checkPw = ref('')
-const isModalOpen = ref(false)
-const router = useRouter()
 const isDifferent = ref(false)
 const checkPwInput = ref<HTMLInputElement | null>(null)
 const isInvalid = ref(false)
 const passwordInput = ref<HTMLInputElement | null>(null)
+const isModalVisible = ref(false)
+const router = useRouter()
 
 const validatePassword = () => {
   const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?/~`-]).{8,20}$/
@@ -100,15 +177,10 @@ const validatePassword = () => {
 }
 
 const openModal = () => {
-  isModalOpen.value = !isModalOpen.value
-}
-const closeModal = () => {
-  isModalOpen.value = !isModalOpen.value
-  router.push('/login')
-  deleteLogout()
+  isModalVisible.value = !isModalVisible.value
 }
 
-const handleChange = () => {
+const handleChange = async () => {
   if (newPw.value != checkPw.value) {
     isDifferent.value = true
     checkPwInput.value?.focus()
@@ -117,13 +189,25 @@ const handleChange = () => {
   }
   validatePassword()
   if (isInvalid.value == false && newPw.value === checkPw.value) {
-    patchPassword(newPw.value)
-    pwChange()
-    openModal()
+    try {
+      await patchPassword(newPw.value)
+      openModal()
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        if (error.response?.status === 500) {
+          isErrorVisible.value = !isErrorVisible.value
+          messageHeader.value = '사용할 수 없는 특수문자가\n포함되어 있습니다'
+        }
+      }
+    }
   }
 }
 
-const pwChange = () => {
-  isLogined.value = false
+const closeModal = () => {
+  isModalVisible.value = !isModalVisible.value
+  router.replace('/edit-information')
+}
+const closeError = () => {
+  isErrorVisible.value = !isErrorVisible.value
 }
 </script>
diff --git a/src/views/PwCheckView.vue b/src/views/PwCheckView.vue
index 12d80485..807ab1e9 100644
--- a/src/views/PwCheckView.vue
+++ b/src/views/PwCheckView.vue
@@ -2,17 +2,29 @@
   <div class="max-w-400">
     <div class="py-16">
       <ModalView
-        :is-open="isModalVisible"
+        :is-open="isErrorVisible"
         type="failType"
-        @close="closeModal">
+        @close="closeError">
         <template #header>{{ messageHeader }}</template>
         <template #body>{{ messageBody }}</template>
       </ModalView>
+      <ModalView
+        :isOpen="isModalVisible"
+        type="successType"
+        @close="closeModal">
+        <template #header>비밀번호가 변경 되었습니다</template>
+      </ModalView>
       <TitleContainer
+        v-if="!isConfirmed"
         :title="'비밀번호\n재설정'"
-        :content="'비밀번호 재설정을 위해\n 현재 비밀번호를 입력해주세요'" />
+        :content="'비밀번호 재설정을 위해\n현재 비밀번호를 입력해주세요'" />
+      <TitleContainer
+        v-else
+        :title="'비밀번호\n재설정'"
+        content="새로운 비밀번호를 입력해주세요" />
     </div>
     <form
+      v-if="!isConfirmed"
       @submit.prevent="handleCheck"
       class="flex flex-col gap-8">
       <input
@@ -22,62 +34,119 @@
         placeholder="비밀번호를 입력해주세요"
         required
         class="input-box" />
-      <button
-        type="submit"
-        class="button-large-primary">
-        확인
-      </button>
+      <div class="flex flex-col gap-2">
+        <button
+          type="submit"
+          class="button-large-primary">
+          확인
+        </button>
+        <button
+          type="button"
+          class="flex w-full justify-center text-xs font-bold text-body hover:underline"
+          @click="router.back()">
+          이전으로
+        </button>
+      </div>
+    </form>
+    <form
+      v-else
+      @submit.prevent="handleChange"
+      class="flex flex-col gap-8">
+      <div class="relative">
+        <input
+          type="password"
+          id="newPw"
+          v-model="newPw"
+          placeholder="새 비밀번호를 입력해주세요"
+          required
+          ref="passwordInput"
+          :class="[
+            'block w-full px-4 py-4 border rounded focus:outline-none',
+            isInvalid ? 'border-red-1' : 'border-border-1'
+          ]" />
+        <p
+          v-show="isInvalid"
+          class="absolute text-red-1 text-xs font-bold mt-1">
+          대문자, 소문자, 숫자, 특수문자 포함 8자-20자 입력해주세요
+        </p>
+      </div>
+      <div class="relative">
+        <input
+          type="password"
+          id="checkPw"
+          v-model="checkPw"
+          ref="checkPwInput"
+          placeholder="새 비밀번호를 다시 입력해주세요"
+          required
+          :class="[
+            'block w-full px-4 py-4 border rounded focus:outline-none',
+            isDifferent ? 'border-red-1' : 'border-border-1'
+          ]" />
+        <p
+          v-show="isDifferent"
+          class="absolute text-red-1 text-xs font-bold mt-1">
+          비밀번호가 일치하지 않아요
+        </p>
+      </div>
+      <div class="flex flex-col gap-2 items-center">
+        <button
+          type="submit"
+          class="button-large-primary">
+          비밀번호 재설정
+        </button>
+        <RouterLink
+          class="flex justify-center text-xs font-bold text-body hover:underline"
+          to="/edit-information">
+          취소
+        </RouterLink>
+      </div>
     </form>
-    <div class="flex w-full justify-center"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { postPasswordCheck } from '@/api/auth'
+import { patchPassword, postPasswordCheck } from '@/api/auth'
 import TitleContainer from '@/components/common/TitleContainer.vue'
 import axios from 'axios'
-import { ref } from 'vue'
-import router from '../router/index'
+import { nextTick, ref } from 'vue'
 import ModalView from '@/components/common/ModalView.vue'
+import { useRouter } from 'vue-router'
 
-const isModalVisible = ref(false)
+const isErrorVisible = ref(false)
 
 const messageHeader = ref('')
 const messageBody = ref('')
 
-const closeModal = () => {
-  isModalVisible.value = false
-}
-
 const pw = ref('')
+const isConfirmed = ref(false)
 
 const handleCheck = async () => {
   try {
     await postPasswordCheck(pw.value)
-    router.push('/pw-change')
+    isConfirmed.value = true
   } catch (error) {
     if (axios.isAxiosError(error)) {
       switch (error?.response?.status) {
         case 400:
-          isModalVisible.value = !isModalVisible.value
+          isErrorVisible.value = !isErrorVisible.value
           messageHeader.value = '비밀번호가 일치하지 않습니다'
           messageBody.value = '다시 확인해주세요'
           break
 
         case 401:
-          isModalVisible.value = !isModalVisible.value
+          isErrorVisible.value = !isErrorVisible.value
           messageHeader.value = '비밀번호가 일치하지 않습니다'
           messageBody.value = '다시 확인해주세요'
           break
 
         case 500:
-          isModalVisible.value = !isModalVisible.value
+          isErrorVisible.value = !isErrorVisible.value
           messageHeader.value = '서버에 문제가 발생했습니다'
           messageBody.value = '잠시 후 다시 이용해주세요'
           break
 
         default:
-          isModalVisible.value = !isModalVisible.value
+          isErrorVisible.value = !isErrorVisible.value
           messageHeader.value = '문제가 발생했습니다'
           messageBody.value = '잠시 후 다시 이용해주세요'
           break
@@ -85,4 +154,49 @@ const handleCheck = async () => {
     }
   }
 }
+
+const newPw = ref('')
+const checkPw = ref('')
+const isDifferent = ref(false)
+const checkPwInput = ref<HTMLInputElement | null>(null)
+const isInvalid = ref(false)
+const passwordInput = ref<HTMLInputElement | null>(null)
+const isModalVisible = ref(false)
+const router = useRouter()
+
+const validatePassword = () => {
+  const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?/~`-]).{8,20}$/
+  isInvalid.value = !regex.test(newPw.value)
+
+  if (isInvalid.value) {
+    nextTick(() => {
+      passwordInput.value?.focus()
+    })
+  }
+}
+
+const handleChange = () => {
+  if (newPw.value != checkPw.value) {
+    isDifferent.value = true
+    checkPwInput.value?.focus()
+  } else if (newPw.value == checkPw.value) {
+    isDifferent.value = false
+  }
+  validatePassword()
+  if (isInvalid.value == false && newPw.value === checkPw.value) {
+    patchPassword(newPw.value)
+    openModal()
+  }
+}
+
+const openModal = () => {
+  isModalVisible.value = !isModalVisible.value
+}
+const closeModal = () => {
+  isModalVisible.value = !isModalVisible.value
+  router.push('/edit-information')
+}
+const closeError = () => {
+  isErrorVisible.value = !isErrorVisible.value
+}
 </script>