diff --git a/package-lock.json b/package-lock.json
index f37c9253..42002c51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@tanstack/vue-query": "^5.66.0",
         "axios": "^1.7.9",
         "chart.js": "^4.4.7",
+        "dompurify": "^3.2.4",
         "js-cookie": "^3.0.5",
         "pinia": "^2.3.0",
         "tailwind-scrollbar-hide": "^2.0.0",
@@ -22,6 +23,7 @@
       },
       "devDependencies": {
         "@tsconfig/node22": "^22.0.0",
+        "@types/dompurify": "^3.0.5",
         "@types/js-cookie": "^3.0.6",
         "@types/node": "^22.10.2",
         "@typescript-eslint/eslint-plugin": "^8.20.0",
@@ -1710,6 +1712,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1741,6 +1753,13 @@
         "undici-types": "~6.20.0"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.20.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.20.0.tgz",
@@ -2893,6 +2912,15 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "license": "MIT"
     },
+    "node_modules/dompurify": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.4.tgz",
+      "integrity": "sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
diff --git a/package.json b/package.json
index c293994b..40d59880 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@tanstack/vue-query": "^5.66.0",
     "axios": "^1.7.9",
     "chart.js": "^4.4.7",
+    "dompurify": "^3.2.4",
     "js-cookie": "^3.0.5",
     "pinia": "^2.3.0",
     "tailwind-scrollbar-hide": "^2.0.0",
@@ -27,6 +28,7 @@
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
+    "@types/dompurify": "^3.0.5",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.10.2",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
diff --git a/src/App.vue b/src/App.vue
index e1ac0e3c..758082b8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@ import TheView from './layout/TheView.vue'
 </script>
 
 <template>
+  <div id="modal" />
   <TopBar />
   <TheView />
 </template>
diff --git a/src/api/admin.ts b/src/api/admin.ts
index 7ef09fd7..d58309e6 100644
--- a/src/api/admin.ts
+++ b/src/api/admin.ts
@@ -1,6 +1,7 @@
 import type { NewLabelTypes, UserRegistrationApiProps, UserUpdateValue } from '@/types/admin'
 import type { LabelDataTypes } from '@/types/common'
 import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
+import DOMPurify from 'dompurify'
 
 export const deleteLabelAdmin = async (id: number) => {
   const response = await axiosInstance.delete(`/api/managements/labels/${id}`)
@@ -14,7 +15,7 @@ export const postAddLabelAdmin = async (newLabel: NewLabelTypes) => {
 
 export const patchLabelAdmin = async (editLabel: LabelDataTypes) => {
   const response = await axiosInstance.patch(`/api/managements/labels/${editLabel.labelId}`, {
-    labelName: editLabel.labelName,
+    labelName: DOMPurify.sanitize(editLabel.labelName),
     labelColor: editLabel.labelColor
   })
   return response.data
diff --git a/src/api/user.ts b/src/api/user.ts
index bb7ee1de..9624dab4 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,6 +1,7 @@
 import type { Status } from '@/types/common'
 import type { RequestApprovePostTypes } from '@/types/manager'
 import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
+import DOMPurify from 'dompurify'
 
 export const postTaskRequest = async (formdata: FormData) => {
   const response = await formDataAxiosInstance.post('/api/tasks', formdata)
@@ -54,7 +55,9 @@ export const getHistory = async (taskID: number | null) => {
 }
 
 export const postComment = async (taskID: number, content: string) => {
-  const response = await axiosInstance.post(`/api/tasks/${taskID}/comments`, { content })
+  const response = await axiosInstance.post(`/api/tasks/${taskID}/comments`, {
+    content: DOMPurify.sanitize(content)
+  })
   return response.data
 }
 
@@ -66,11 +69,6 @@ export const postCommentAttachment = async (taskID: number, formdata: FormData)
   return response.data
 }
 
-export const patchComment = async (commentId: number, content: string) => {
-  const response = await axiosInstance.patch(`/api/comments/${commentId}`, { content })
-  return response.data
-}
-
 export const deleteComment = async (commentId: number) => {
   const response = await axiosInstance.delete(`/api/comments/${commentId}`)
   return response.data
diff --git a/src/components/common/EditInformation.vue b/src/components/common/EditInformation.vue
index 91b49c41..bd061bdf 100644
--- a/src/components/common/EditInformation.vue
+++ b/src/components/common/EditInformation.vue
@@ -139,6 +139,8 @@ import FormButtonContainer from './FormButtonContainer.vue'
 import FormCheckbox from './FormCheckbox.vue'
 import ImageContainer from './ImageContainer.vue'
 import ModalView from './ModalView.vue'
+import DOMPurify from 'dompurify'
+
 const router = useRouter()
 
 const memberStore = useMemberStore()
@@ -276,7 +278,7 @@ const handleSubmit = async () => {
   if (isInvalid.value == false && isFull.value == false) {
     const formData = new FormData()
     const memberInfo = {
-      name: name.value,
+      name: DOMPurify.sanitize(name.value),
       isProfileImageDeleted: imageDelete.value,
       emailNotification: emailCheck.value,
       kakaoWorkNotification: kakaoWorkCheck.value
diff --git a/src/components/common/ModalView.vue b/src/components/common/ModalView.vue
index b9c407f9..b69a85c9 100644
--- a/src/components/common/ModalView.vue
+++ b/src/components/common/ModalView.vue
@@ -1,90 +1,92 @@
 <template>
-  <div
-    v-if="isOpen"
-    class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-[99]"
-    @click.self="closeModal" />
-  <Transition name="modal">
+  <Teleport to="#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-[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">
-            <CommonIcons
-              v-if="type == 'successType'"
-              :name="successIcon" />
-            <CommonIcons
-              v-if="type == 'failType' || type == 'inputType' || type === 'terminate'"
-              :name="failIcon" />
-            <CommonIcons
-              v-if="type == 'warningType'"
-              :name="warningIcon" />
-            <LoadingIcon v-if="type == 'loadingType'" />
-            <div
-              v-if="$slots.header"
-              class="flex text-2xl font-semibold justify-center whitespace-pre-wrap text-center">
-              <slot name="header"></slot>
-            </div>
+      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-[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">
+              <CommonIcons
+                v-if="type == 'successType'"
+                :name="successIcon" />
+              <CommonIcons
+                v-if="type == 'failType' || type == 'inputType' || type === 'terminate'"
+                :name="failIcon" />
+              <CommonIcons
+                v-if="type == 'warningType'"
+                :name="warningIcon" />
+              <LoadingIcon v-if="type == 'loadingType'" />
+              <div
+                v-if="$slots.header"
+                class="flex text-2xl font-semibold justify-center whitespace-pre-wrap text-center">
+                <slot name="header"></slot>
+              </div>
 
-            <div
-              v-if="type != 'inputType' && $slots.body"
-              class="flex text-sm font-semibold text-body justify-center whitespace-pre-wrap text-center">
-              <slot name="body"></slot>
+              <div
+                v-if="type != 'inputType' && $slots.body"
+                class="flex text-sm font-semibold text-body justify-center whitespace-pre-wrap text-center">
+                <slot name="body"></slot>
+              </div>
             </div>
+            <textarea
+              v-if="type == 'inputType' || type === 'terminate'"
+              v-model="textValue"
+              :placeholder="
+                type === 'terminate' ? '종료 사유를 입력해주세요' : '반려 사유를 입력해주세요'
+              "
+              :class="{ 'border border-red-1 placeholder-red-500': isEmpty }"
+              class="flex border w-full border-border-1 px-4 py-3 focus:outline-none resize-none h-[120px]" />
           </div>
-          <textarea
-            v-if="type == 'inputType' || type === 'terminate'"
-            v-model="textValue"
-            :placeholder="
-              type === 'terminate' ? '종료 사유를 입력해주세요' : '반려 사유를 입력해주세요'
-            "
-            :class="{ 'border border-red-1 placeholder-red-500': isEmpty }"
-            class="flex border w-full border-border-1 px-4 py-3 focus:outline-none resize-none h-[120px]" />
-        </div>
-
-        <button
-          type="button"
-          class="button-large-primary"
-          v-if="type == 'successType'"
-          @click="closeModal">
-          확인
-        </button>
 
-        <button
-          type="button"
-          class="button-large-default"
-          v-if="type == 'failType'"
-          @click="closeModal">
-          확인
-        </button>
-
-        <div
-          class="flex items-center gap-6"
-          v-if="type == 'warningType' || type == 'inputType' || type === 'terminate'">
           <button
             type="button"
-            class="button-large-default"
+            class="button-large-primary"
+            v-if="type == 'successType'"
             @click="closeModal">
-            취소
+            확인
           </button>
+
           <button
             type="button"
-            class="button-large-red"
-            @click="confirmModal">
-            {{ type === 'inputType' ? '반려' : type === 'terminate' ? '종료' : '삭제' }}
+            class="button-large-default"
+            v-if="type == 'failType'"
+            @click="closeModal">
+            확인
           </button>
+
+          <div
+            class="flex items-center gap-6"
+            v-if="type == 'warningType' || type == 'inputType' || type === 'terminate'">
+            <button
+              type="button"
+              class="button-large-default"
+              @click="closeModal">
+              취소
+            </button>
+            <button
+              type="button"
+              class="button-large-red"
+              @click="confirmModal">
+              {{ type === 'inputType' ? '반려' : type === 'terminate' ? '종료' : '삭제' }}
+            </button>
+          </div>
         </div>
       </div>
-    </div>
-  </Transition>
+    </Transition>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
 import { failIcon, successIcon, warningIcon } from '@/constants/iconPath'
-import { preventEnter } from '@/utils/preventEnter'
 import { onUnmounted, ref, watch } from 'vue'
 import CommonIcons from './CommonIcons.vue'
 import LoadingIcon from './LoadingIcon.vue'
+import { useIsOverlayOpenStore } from '@/stores/isOverlayOpen'
 
 const { isOpen, type, modelValue, isEmpty } = defineProps<{
   isOpen: boolean
@@ -114,22 +116,20 @@ const confirmModal = () => {
   emit('click')
 }
 
+const { setIsOverlayOpen } = useIsOverlayOpenStore()
 watch(
   () => isOpen,
   () => {
     if (isOpen) {
       textValue.value = ''
-      document.body.style.overflow = 'hidden'
-      window.addEventListener('keydown', preventEnter)
+      setIsOverlayOpen(true)
     } else {
-      document.body.style.overflow = ''
-      window.removeEventListener('keydown', preventEnter)
+      setIsOverlayOpen(false)
     }
   }
 )
 
 onUnmounted(() => {
-  document.body.style.overflow = ''
-  window.removeEventListener('keydown', preventEnter)
+  setIsOverlayOpen(false)
 })
 </script>
diff --git a/src/components/common/TaskCard.vue b/src/components/common/TaskCard.vue
index f8508312..f2979130 100644
--- a/src/components/common/TaskCard.vue
+++ b/src/components/common/TaskCard.vue
@@ -51,6 +51,7 @@ import TaskDetail from '../task-detail/TaskDetail.vue'
 import CommonIcons from './CommonIcons.vue'
 import ImageContainer from './ImageContainer.vue'
 import TaskLabel from './TaskLabel.vue'
+import { useIsOverlayOpenStore } from '@/stores/isOverlayOpen'
 
 const { data } = defineProps<{ data: TaskCardProps; draggable?: boolean }>()
 const emit = defineEmits(['toggleModal'])
@@ -62,6 +63,7 @@ const borderLeft = computed(() => {
   return `border-${statusAsColor(data.taskStatus as Status)}-1`
 })
 
+const { setIsOverlayOpen } = useIsOverlayOpenStore()
 const handleModal = (id: number | null) => {
   if (!id) {
     queryClient.invalidateQueries({
@@ -70,7 +72,7 @@ const handleModal = (id: number | null) => {
     queryClient.invalidateQueries({
       queryKey: ['teamStatus', params]
     })
-    document.body.style.overflow = ''
+    setIsOverlayOpen(false)
   }
   emit('toggleModal')
   selectedID.value = id
diff --git a/src/components/filters/FilterInput.vue b/src/components/filters/FilterInput.vue
index dbff89e6..d96f9157 100644
--- a/src/components/filters/FilterInput.vue
+++ b/src/components/filters/FilterInput.vue
@@ -12,6 +12,7 @@
 
 <script setup lang="ts">
 import type { Filter } from '@/types/common'
+import DOMPurify from 'dompurify'
 
 const { title, width = '120' } = defineProps<Filter>()
 const emit = defineEmits(['update:value'])
@@ -19,7 +20,7 @@ const emit = defineEmits(['update:value'])
 const onValueChange = (event: Event) => {
   const target = event.target as HTMLInputElement
   setTimeout(() => {
-    emit('update:value', target.value)
+    emit('update:value', DOMPurify.sanitize(target.value))
   }, 500)
 }
 </script>
diff --git a/src/components/member-management/MemberManagementListCard.vue b/src/components/member-management/MemberManagementListCard.vue
index 89782f8b..29490e8f 100644
--- a/src/components/member-management/MemberManagementListCard.vue
+++ b/src/components/member-management/MemberManagementListCard.vue
@@ -21,16 +21,27 @@
         @click="toggleModal('delete')">
         삭제
       </button>
-      <button
-        type="button"
-        :class="
-          info.memberStatus !== 'ACTIVE'
-            ? 'button-medium-secondary'
-            : 'button-medium-disabled !cursor-default'
-        "
-        @click="info.memberStatus !== 'ACTIVE' && onMemberInvite(info.memberId)">
-        초대
-      </button>
+      <div class="relative">
+        <button
+          type="button"
+          :class="
+            info.memberStatus !== 'ACTIVE'
+              ? 'button-medium-secondary'
+              : 'button-medium-disabled !cursor-default'
+          "
+          @click="info.memberStatus !== 'ACTIVE' && onMemberInvite(info.memberId)"
+          @mouseenter="onButtonHover(true, info.memberStatus)"
+          @mouseleave="onButtonHover(false, info.memberStatus)"
+          @mousemove="onButtonMove(info.memberStatus, $event)">
+          초대
+        </button>
+        <span
+          v-if="isButtonHover"
+          class="absolute w-fit text-[10px] whitespace-nowrap right-0 bg-background-2 border border-border-1 px-2 py-0.5 rounded-full text-body font-semibold pointer-events-none"
+          :style="{ top: mouseY + 'px', left: mouseX + 'px' }">
+          이미 가입된 계정입니다
+        </span>
+      </div>
     </div>
   </div>
 
@@ -70,7 +81,7 @@ const roleContent = (role: Role) => {
 
 const { info } = defineProps<{ info: MemberManagementListData }>()
 const myRequestTabList: ListCardProps[] = [
-  { content: info.name, width: 60 },
+  { content: info.name, width: 80 },
   { content: info.nickname, width: 80 },
   { content: info.departmentName, width: 80 },
   { content: info.departmentRole, width: 80 },
@@ -132,4 +143,25 @@ const onMemberInvite = async (memberId: number) => {
     toggleModal('result')
   }
 }
+
+const isButtonHover = ref(false)
+const onButtonHover = (isHover: boolean, memberStatus: string) => {
+  if (memberStatus === 'ACTIVE') {
+    if (isHover) isButtonHover.value = true
+    else isButtonHover.value = false
+  }
+}
+
+const mouseX = ref(0)
+const mouseY = ref(0)
+const onButtonMove = (memberStatus: string, event: MouseEvent) => {
+  if (isButtonHover.value && memberStatus === 'ACTIVE') {
+    const parent = (event.target as HTMLElement).closest('.relative')
+    if (!parent) return
+    const rect = parent.getBoundingClientRect()
+
+    mouseX.value = event.clientX - rect.left - 110
+    mouseY.value = event.clientY - rect.top - 21
+  }
+}
 </script>
diff --git a/src/components/request-task/ReRequestTask.vue b/src/components/request-task/ReRequestTask.vue
index 86c827de..2cc92529 100644
--- a/src/components/request-task/ReRequestTask.vue
+++ b/src/components/request-task/ReRequestTask.vue
@@ -19,10 +19,10 @@
       :placeholderText="'제목을 입력해주세요'"
       :label-name="'제목'"
       :limit-length="30"
-      :is-invalidate="isInvalidate === 'input' ? 'input' : ''" />
+      :is-invalidate="isInvalidate === 'empty' ? isInvalidate : ''" />
     <RequestTaskTextArea
       v-model="description"
-      :is-invalidate="isInvalidate"
+      :is-invalidate="isInvalidate === 'description' ? isInvalidate : ''"
       :placeholderText="'부가 설명을 입력해주세요'"
       :limit-length="200" />
     <RequestTaskFileInput
@@ -62,6 +62,7 @@ import CategoryDropDown from './CategoryDropDown.vue'
 import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
+import DOMPurify from 'dompurify'
 
 const category1 = ref<Category | null>(null)
 const category2 = ref<SubCategory | null>(null)
@@ -129,7 +130,7 @@ const handleSubmit = async () => {
     isInvalidate.value = 'category2'
     return
   } else if (!title.value) {
-    isInvalidate.value = 'input'
+    isInvalidate.value = 'empty'
     return
   } else if (title.value.length > 30) {
     isInvalidate.value = 'title'
@@ -151,8 +152,8 @@ const handleSubmit = async () => {
 
   const taskInfo = {
     categoryId: category2.value.subCategoryId,
-    title: title.value,
-    description: description.value
+    title: DOMPurify.sanitize(title.value),
+    description: DOMPurify.sanitize(description.value)
   }
 
   const taskInfoEdit = {
diff --git a/src/components/request-task/RequestTask.vue b/src/components/request-task/RequestTask.vue
index aa6fea44..19d483fb 100644
--- a/src/components/request-task/RequestTask.vue
+++ b/src/components/request-task/RequestTask.vue
@@ -18,11 +18,11 @@
       v-model="title"
       :placeholderText="'제목을 입력해주세요'"
       :label-name="'제목'"
-      :is-invalidate="isInvalidate === 'input' ? 'input' : ''"
+      :is-invalidate="isInvalidate === 'empty' ? isInvalidate : ''"
       :limit-length="30" />
     <RequestTaskTextArea
       v-model="description"
-      :is-invalidate="isInvalidate"
+      :is-invalidate="isInvalidate === 'description' ? isInvalidate : ''"
       :placeholderText="'부가 설명을 입력해주세요'"
       :limit-length="200" />
     <RequestTaskFileInput
@@ -60,6 +60,7 @@ import CategoryDropDown from './CategoryDropDown.vue'
 import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
+import DOMPurify from 'dompurify'
 
 const category1 = ref<Category | null>(null)
 const category2 = ref<SubCategory | null>(null)
@@ -119,7 +120,7 @@ const handleSubmit = async () => {
     isInvalidate.value = 'category2'
     return
   } else if (!title.value) {
-    isInvalidate.value = 'input'
+    isInvalidate.value = 'empty'
     return
   } else if (title.value.length > 30) {
     isInvalidate.value = 'title'
@@ -136,8 +137,8 @@ const handleSubmit = async () => {
   const formData = new FormData()
   const taskInfo = {
     categoryId: category2.value.subCategoryId,
-    title: title.value,
-    description: description.value
+    title: DOMPurify.sanitize(title.value),
+    description: DOMPurify.sanitize(description.value)
   }
   const jsonTaskInfo = JSON.stringify(taskInfo)
   const newBlob = new Blob([jsonTaskInfo], { type: 'application/json' })
diff --git a/src/components/request-task/RequestTaskInput.vue b/src/components/request-task/RequestTaskInput.vue
index 87799c17..596ca842 100644
--- a/src/components/request-task/RequestTaskInput.vue
+++ b/src/components/request-task/RequestTaskInput.vue
@@ -3,10 +3,7 @@
     <div class="text-xs flex gap-x-1 mb-2 text-red-1">
       <p class="text-body font-semibold">{{ labelName }}</p>
       <p v-if="!isNotRequired">*</p>
-      <p v-if="isInvalidateState === 'input'">{{ labelName }}을 입력해주세요</p>
-      <p v-if="isInvalidateState === 'nameEmpty' && labelName === '이름'">
-        {{ labelName }}을 입력해주세요
-      </p>
+      <p v-if="isInvalidateState === 'empty'">{{ labelName }}을 입력해주세요</p>
       <p v-if="isInvalidateState === 'duplicate'">회원아이디가 중복되었습니다</p>
       <p v-if="isInvalidateState === 'title'">제목은 30자 이내로 적어주세요</p>
       <p v-if="isInvalidateState === 'noCode'">작업코드를 입력해주세요</p>
diff --git a/src/components/requested/RequestedListCard.vue b/src/components/requested/RequestedListCard.vue
index 6790483f..3d0e710f 100644
--- a/src/components/requested/RequestedListCard.vue
+++ b/src/components/requested/RequestedListCard.vue
@@ -65,6 +65,7 @@ import { useRouter } from 'vue-router'
 import ModalView from '../common/ModalView.vue'
 import ListCardTab from '../lists/ListCardTab.vue'
 import TaskDetail from '../task-detail/TaskDetail.vue'
+import DOMPurify from 'dompurify'
 
 const { info } = defineProps<{ info: RequestedListData }>()
 const requestedTabList: ListCardProps[] = [
@@ -107,7 +108,9 @@ const rejectRequest = async () => {
     modalError.value = '반려 사유를 입력해주세요'
     return
   }
-  await axiosInstance.patch(`/api/tasks/${info.taskId}/terminate`, { reason: rejectReason.value })
+  await axiosInstance.patch(`/api/tasks/${info.taskId}/terminate`, {
+    reason: DOMPurify.sanitize(rejectReason.value)
+  })
   toggleModal('success')
 }
 
diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 1e698d21..17b4e63a 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -3,7 +3,7 @@
     :onClick="closeTaskDetail"
     class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50 p-12" />
   <div
-    class="flex flex-col overflow-y-auto rounded-lg w-[calc(100%-96px)] max-w-[1104px] min-w-[768px] h-[calc(100%-96px)] bg-white shadow-custom py-6 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50">
+    class="flex flex-col overflow-y-auto rounded-lg w-[calc(100%-96px)] max-w-[1104px] h-[calc(100%-96px)] bg-white shadow-custom py-6 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50">
     <TaskDetailTopBar
       v-if="data"
       :is-approved="data.taskStatus !== 'REQUESTED'"
@@ -41,6 +41,7 @@ import TaskDetailHistory from './TaskDetailHistory.vue'
 import TaskDetailLeft from './TaskDetailLeft.vue'
 import TaskDetailRight from './TaskDetailRight.vue'
 import TaskDetailTopBar from './TaskDetailTopBar.vue'
+import { useIsOverlayOpenStore } from '@/stores/isOverlayOpen'
 
 const { closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
@@ -62,10 +63,11 @@ const { data: historyData } = useQuery<TaskDetailHistoryData>({
   enabled: isLogined
 })
 
+const { setIsOverlayOpen } = useIsOverlayOpenStore()
 onMounted(() => {
-  document.body.style.overflow = 'hidden'
+  setIsOverlayOpen(true)
 })
 onUnmounted(() => {
-  document.body.style.overflow = ''
+  setIsOverlayOpen(false)
 })
 </script>
diff --git a/src/components/task-detail/TaskDetailHistory.vue b/src/components/task-detail/TaskDetailHistory.vue
index 842095f1..85e18f8e 100644
--- a/src/components/task-detail/TaskDetailHistory.vue
+++ b/src/components/task-detail/TaskDetailHistory.vue
@@ -39,11 +39,14 @@
             </p>
             <p>{{ HistoryMessageAfter[item.taskHistoryType] }}</p>
           </div>
+          <span
+            class="text-xs text-disabled text-center"
+            v-if="item.taskHistoryType === 'TASK_TERMINATED'">
+            사유 : {{ item.details.taskDetails?.value }}
+          </span>
           <div class="flex w-full flex-col items-center">
             <TaskDetailHistoryChat
-              v-if="
-                item.taskHistoryType === 'COMMENT' || item.taskHistoryType === 'TASK_TERMINATED'
-              "
+              v-if="item.taskHistoryType === 'COMMENT'"
               :history="item"
               :requestor-name="requestorName"
               :task-id="taskId" />
diff --git a/src/components/task-detail/TaskStatusList.vue b/src/components/task-detail/TaskStatusList.vue
index ab1d50ac..efd6ff57 100644
--- a/src/components/task-detail/TaskStatusList.vue
+++ b/src/components/task-detail/TaskStatusList.vue
@@ -45,6 +45,7 @@ import { statusAsColor } from '@/utils/statusAsColor'
 import { useQueryClient } from '@tanstack/vue-query'
 import { ref, watch } from 'vue'
 import ModalView from '../common/ModalView.vue'
+import DOMPurify from 'dompurify'
 
 const { modelValue, isProcessor, taskId } = defineProps<TaskStatusListProps>()
 const modalError = ref('')
@@ -104,7 +105,9 @@ const rejectRequest = async () => {
   }
 
   backModal.value = false
-  await axiosInstance.patch(`/api/tasks/${taskId}/terminate`, { reason: rejectReason.value })
+  await axiosInstance.patch(`/api/tasks/${taskId}/terminate`, {
+    reason: DOMPurify.sanitize(rejectReason.value)
+  })
   toggleModal('success')
   emit('update:status', 'TERMINATED')
   currentStatus.value = 'TERMINATED'
diff --git a/src/components/task-management/CategoryAdd.vue b/src/components/task-management/CategoryAdd.vue
index 35d7add3..9b02cfa4 100644
--- a/src/components/task-management/CategoryAdd.vue
+++ b/src/components/task-management/CategoryAdd.vue
@@ -64,6 +64,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 DOMPurify from 'dompurify'
 
 const router = useRouter()
 const route = useRoute()
@@ -111,10 +112,19 @@ const handleSubmit = async () => {
     return
   }
 
+  categoryForm.value.name = DOMPurify.sanitize(categoryForm.value.name)
+  categoryForm.value.code = DOMPurify.sanitize(categoryForm.value.code)
+  if (categoryForm.value.descriptionExample) {
+    categoryForm.value.descriptionExample = DOMPurify.sanitize(
+      categoryForm.value.descriptionExample
+    )
+  }
+
   const categoryId = route.params.id
   if (categoryId) {
+    const newForm: CategoryForm = { ...categoryForm.value, mainCategoryId: undefined }
     const patchUrl = `/api/managements/categories/${categoryId}`
-    await axiosInstance.patch(patchUrl, categoryForm.value)
+    await axiosInstance.patch(patchUrl, newForm)
   } else {
     const postUrl =
       categoryStep === '1' ? '/api/managements/main-category' : '/api/managements/sub-category'
diff --git a/src/components/top-bar/NotificationMessage.vue b/src/components/top-bar/NotificationMessage.vue
index fdff5d0e..8920989a 100644
--- a/src/components/top-bar/NotificationMessage.vue
+++ b/src/components/top-bar/NotificationMessage.vue
@@ -28,8 +28,7 @@
       class="text-xs"
       v-else-if="type === 'STATUS_SWITCHED'">
       <span class="font-semibold text-primary1">"{{ title }}"</span> 작업이
-      <span class="font-semibold text-primary1">{{ statusAsText(message as Status) }}</span> 상태로
-      변경되었습니다
+      <span class="font-semibold text-primary1">{{ message }}</span> 상태로 변경되었습니다
     </div>
     <div
       class="text-xs"
@@ -45,9 +44,8 @@
 </template>
 
 <script setup lang="ts">
-import type { NotificationType, Status } from '@/types/common'
+import type { NotificationType } from '@/types/common'
 import { formatTimeAgo } from '@/utils/date'
-import { statusAsText } from '@/utils/statusAsText'
 
 const { type, title, message, isRead, createdAt } = defineProps<{
   type: NotificationType
diff --git a/src/components/top-bar/TopBar.vue b/src/components/top-bar/TopBar.vue
index 1f61320b..0e79c106 100644
--- a/src/components/top-bar/TopBar.vue
+++ b/src/components/top-bar/TopBar.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="fixed w-full bg-white py-2 border-b border-border-1 z-50">
+  <div
+    ref="topbarRef"
+    class="fixed w-full bg-white py-2 border-b border-border-1 z-50">
     <div class="max-w-[1200px] mx-auto px-6 flex w-full justify-between items-center relative">
       <div class="flex justify-center items-center gap-6 h-full">
         <button
@@ -67,6 +69,7 @@ import { getNotifiCount } from '@/api/common'
 import ImageContainer from '../common/ImageContainer.vue'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
 import { useRouter } from 'vue-router'
+import { useIsOverlayOpenStore } from '@/stores/isOverlayOpen'
 
 const memberStore = useMemberStore()
 const { isLogined, info } = storeToRefs(memberStore)
@@ -99,9 +102,11 @@ const toggleProfile = () => {
   isProfileVisible.value = !isProfileVisible.value
 }
 
+const isOverlayOpenStore = useIsOverlayOpenStore()
+const { isOverlayOpen, scrollbarWidth } = storeToRefs(isOverlayOpenStore)
 const onCloseSide = () => {
   isSideOpen.value = false
-  document.body.style.overflow = ''
+  isOverlayOpenStore.setIsOverlayOpen(false)
 }
 
 watch(
@@ -118,7 +123,14 @@ const { htmlRef: notifiRef } = useOutsideClick(() => isNotifiVisible.value && to
 const { htmlRef: profileRef } = useOutsideClick(() => isProfileVisible.value && toggleProfile())
 
 const onOpenSide = () => {
-  document.body.style.overflow = 'hidden'
+  isOverlayOpenStore.setIsOverlayOpen(true)
   isSideOpen.value = !isSideOpen.value
 }
+
+const topbarRef = ref<HTMLElement | null>(null)
+watch([isOverlayOpen, scrollbarWidth], ([isOverlayOpen, scrollbarWidth]) => {
+  if (topbarRef.value) {
+    topbarRef.value.style.paddingRight = isOverlayOpen ? `${scrollbarWidth}px` : '0px'
+  }
+})
 </script>
diff --git a/src/components/user-manage/DepartmentDropDown.vue b/src/components/user-manage/DepartmentDropDown.vue
index eddfbf10..fcff2c7e 100644
--- a/src/components/user-manage/DepartmentDropDown.vue
+++ b/src/components/user-manage/DepartmentDropDown.vue
@@ -11,7 +11,7 @@
         @click="toggleDropdown()">
         <p>
           {{
-            dePartments.find(department => department.departmentId === modelValue?.departmentId)
+            departments.find(department => department.departmentId === modelValue?.departmentId)
               ?.name
           }}
         </p>
@@ -23,7 +23,7 @@
         v-if="dropdownOpen"
         class="absolute w-full h-40 overflow-y-auto scrollbar-hide top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
         <div
-          v-for="department in dePartments"
+          v-for="department in departments"
           :key="department.departmentId"
           class="w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer justify-between"
           @click="selectOption(department)">
@@ -44,7 +44,7 @@ import type { DepartmentType } from '@/types/admin'
 import { computed, onMounted, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const dePartments = ref<DepartmentType[]>([])
+const departments = ref<DepartmentType[]>([])
 const dropdownOpen = ref(false)
 const emit = defineEmits(['update:modelValue'])
 const { modelValue, isInvalidate } = defineProps<{
@@ -63,9 +63,9 @@ const selectOption = (option: DepartmentType) => {
 }
 
 onMounted(async () => {
-  dePartments.value = await getDepartmentsAdmin()
-  if (dePartments.value.length > 0) {
-    emit('update:modelValue', dePartments.value[0])
+  departments.value = await getDepartmentsAdmin()
+  if (departments.value.length > 0) {
+    emit('update:modelValue', departments.value[0])
   }
 })
 </script>
diff --git a/src/components/user-manage/UserRegistration.vue b/src/components/user-manage/UserRegistration.vue
index f6c3f8a5..9180f4a4 100644
--- a/src/components/user-manage/UserRegistration.vue
+++ b/src/components/user-manage/UserRegistration.vue
@@ -3,14 +3,20 @@
     <div class="relative">
       <RequestTaskInput
         v-model="userRegistrationForm.name"
-        :is-invalidate="isInvalidate"
+        :is-invalidate="isInvalidate === 'nameEmpty' ? 'empty' : ''"
         :placeholderText="'회원의 이름을 입력해주세요'"
         :limit-length="10"
         :labelName="'이름'" />
     </div>
     <RequestTaskInput
       v-model="userRegistrationForm.nickname"
-      :is-invalidate="isInvalidate"
+      :is-invalidate="
+        isInvalidate === 'nicknameEmpty'
+          ? 'empty'
+          : isInvalidate === 'wrongNickname'
+            ? isInvalidate
+            : ''
+      "
       :placeholderText="'회원의 아이디를 입력해주세요'"
       :labelName="'아이디'" />
     <div class="flex w-full gap-2">
@@ -23,12 +29,12 @@
         v-model="userRegistrationForm.email"
         :placeholderText="'@kakaocorp.com'"
         :label-name="'도메인'"
-        :is-invalidate="isInvalidate"
+        :is-invalidate="isInvalidate === 'wrongEmail' ? isInvalidate : ''"
         :is-not-required="false" />
     </div>
     <DepartmentDropDown
       v-model="userRegistrationForm.department"
-      :is-invalidate="isInvalidate" />
+      :is-invalidate="isInvalidate === 'departmentEmpty' ? isInvalidate : ''" />
     <RequestTaskDropdown
       v-model="userRegistrationForm.role"
       :options="filteredRoleKeys"
@@ -71,6 +77,7 @@ import ModalView from '../common/ModalView.vue'
 import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import RequestTaskInput from '../request-task/RequestTaskInput.vue'
 import DepartmentDropDown from './DepartmentDropDown.vue'
+import DOMPurify from 'dompurify'
 
 const router = useRouter()
 
@@ -114,6 +121,10 @@ const handleSubmit = async () => {
       isInvalidate.value = 'nameEmpty'
       return
     }
+    if (!userRegistrationForm.value.nickname) {
+      isInvalidate.value = 'nicknameEmpty'
+      return
+    }
     if (!usernameRegex.test(userRegistrationForm.value.nickname)) {
       isInvalidate.value = 'wrongNickname'
       return
@@ -123,9 +134,17 @@ const handleSubmit = async () => {
       return
     }
     if (!userRegistrationForm.value.department?.departmentId) {
-      isInvalidate.value = 'depertmentEmpty'
+      isInvalidate.value = 'departmentEmpty'
       return
     }
+
+    userRegistrationForm.value.name = DOMPurify.sanitize(userRegistrationForm.value.name)
+    userRegistrationForm.value.nickname = DOMPurify.sanitize(userRegistrationForm.value.nickname)
+    userRegistrationForm.value.email = DOMPurify.sanitize(userRegistrationForm.value.email)
+    userRegistrationForm.value.departmentRole = DOMPurify.sanitize(
+      userRegistrationForm.value.departmentRole
+    )
+
     const { department, ...restForm } = userRegistrationForm.value
     const formData = {
       ...restForm,
diff --git a/src/components/user-manage/UserUpdate.vue b/src/components/user-manage/UserUpdate.vue
index 9dcc803f..667709ed 100644
--- a/src/components/user-manage/UserUpdate.vue
+++ b/src/components/user-manage/UserUpdate.vue
@@ -3,7 +3,7 @@
     <div class="relative">
       <RequestTaskInput
         v-model="userRegistrationForm.name"
-        :is-invalidate="isInvalidate"
+        :is-invalidate="isInvalidate === 'nameEmpty' ? 'empty' : ''"
         :placeholderText="'회원의 이름을 입력해주세요'"
         :limit-length="10"
         :labelName="'이름'" />
@@ -12,7 +12,13 @@
       v-model="userRegistrationForm.nickname"
       :placeholderText="'회원의 아이디를 입력해주세요'"
       :isEdit="true"
-      :is-invalidate="isInvalidate"
+      :is-invalidate="
+        isInvalidate === 'nicknameEmpty'
+          ? 'empty'
+          : isInvalidate === 'wrongNickname'
+            ? isInvalidate
+            : ''
+      "
       :labelName="'아이디'" />
     <div class="flex w-full gap-2">
       <RequestTaskInput
@@ -29,7 +35,7 @@
     </div>
     <DepartmentDropDown
       v-model="userRegistrationForm.department"
-      :is-invalidate="isInvalidate" />
+      :is-invalidate="isInvalidate === 'departmentEmpty' ? isInvalidate : ''" />
     <RequestTaskDropdown
       v-model="userRegistrationForm.role"
       :options="filteredRoleKeys"
@@ -85,6 +91,7 @@ import ModalView from '../common/ModalView.vue'
 import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import RequestTaskInput from '../request-task/RequestTaskInput.vue'
 import DepartmentDropDown from './DepartmentDropDown.vue'
+import DOMPurify from 'dompurify'
 
 const route = useRoute()
 const router = useRouter()
@@ -152,6 +159,10 @@ const handleSubmit = async () => {
       isInvalidate.value = 'nameEmpty'
       return
     }
+    if (!userRegistrationForm.value.nickname) {
+      isInvalidate.value = 'nicknameEmpty'
+      return
+    }
     if (!usernameRegex.test(userRegistrationForm.value.nickname)) {
       isInvalidate.value = 'wrongNickname'
       return
@@ -161,9 +172,17 @@ const handleSubmit = async () => {
       return
     }
     if (!userRegistrationForm.value.department?.departmentId) {
-      isInvalidate.value = 'depertmentEmpty'
+      isInvalidate.value = 'departmentEmpty'
       return
     }
+
+    userRegistrationForm.value.name = DOMPurify.sanitize(userRegistrationForm.value.name)
+    userRegistrationForm.value.nickname = DOMPurify.sanitize(userRegistrationForm.value.nickname)
+    userRegistrationForm.value.email = DOMPurify.sanitize(userRegistrationForm.value.email)
+    userRegistrationForm.value.departmentRole = DOMPurify.sanitize(
+      userRegistrationForm.value.departmentRole
+    )
+
     if (typeof userId.value === 'string') {
       const formData = {
         role: RoleTypeMapping[userRegistrationForm.value.role],
diff --git a/src/constants/admin.ts b/src/constants/admin.ts
index 2bba7e0d..f115c5eb 100644
--- a/src/constants/admin.ts
+++ b/src/constants/admin.ts
@@ -1,7 +1,7 @@
 import type { CategoryForm, ListBarTabProps, Option } from '@/types/common'
 
 export const MEMBER_MANAGEMENT_LIST_BAR_TAB: ListBarTabProps[] = [
-  { content: '이름', width: 60 },
+  { content: '이름', width: 80 },
   { content: '아이디', width: 80 },
   { content: '부서', width: 80 },
   { content: '직무', width: 80 },
@@ -37,8 +37,7 @@ import type { RoleTypes, RoleTypesEnum, UserRegistrationProps } from '@/types/ad
 
 export const CATEGORY_FORM: CategoryForm = {
   name: '',
-  code: '',
-  descriptionExample: ''
+  code: ''
 }
 
 export const INITIAL_USER_REGISTRATION: UserRegistrationProps = {
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
deleted file mode 100644
index 69a97a25..00000000
--- a/src/stores/counter.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
diff --git a/src/stores/isOverlayOpen.ts b/src/stores/isOverlayOpen.ts
new file mode 100644
index 00000000..d34de01d
--- /dev/null
+++ b/src/stores/isOverlayOpen.ts
@@ -0,0 +1,27 @@
+import { preventEnter } from '@/utils/preventEnter'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useIsOverlayOpenStore = defineStore('isOverlayOpen', () => {
+  const isOverlayOpen = ref(false)
+  const scrollbarWidth = ref(0)
+
+  const setIsOverlayOpen = (isOpen: boolean) => {
+    if (isOpen) {
+      scrollbarWidth.value = window.innerWidth - document.documentElement.clientWidth
+      document.body.style.overflow = 'hidden'
+      window.addEventListener('keydown', preventEnter)
+      if (scrollbarWidth.value > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth.value}px`
+      }
+      isOverlayOpen.value = true
+    } else {
+      document.body.style.overflow = ''
+      window.removeEventListener('keydown', preventEnter)
+      document.body.style.paddingRight = ''
+      isOverlayOpen.value = false
+    }
+  }
+
+  return { isOverlayOpen, scrollbarWidth, setIsOverlayOpen }
+})