From f460feb21d8470871f75ffdaec59ff3c54e75de4 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sat, 15 Feb 2025 17:07:11 +0900
Subject: [PATCH 01/13] =?UTF-8?q?:bug:=20[fix]=20:=20=EC=98=A4=EB=B2=84?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=20=EC=83=9D=EA=B8=B8=20=EB=95=8C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EC=82=AC=EB=9D=BC=EC=A7=90=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EB=B0=80=EB=A6=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/ModalView.vue       | 12 +++++-----
 src/components/common/TaskCard.vue        |  4 +++-
 src/components/task-detail/TaskDetail.vue |  6 +++--
 src/components/top-bar/TopBar.vue         |  6 +++--
 src/stores/counter.ts                     | 12 ----------
 src/stores/isOverlayOpen.ts               | 27 +++++++++++++++++++++++
 6 files changed, 43 insertions(+), 24 deletions(-)
 delete mode 100644 src/stores/counter.ts
 create mode 100644 src/stores/isOverlayOpen.ts

diff --git a/src/components/common/ModalView.vue b/src/components/common/ModalView.vue
index 64077d65..ad4e03a5 100644
--- a/src/components/common/ModalView.vue
+++ b/src/components/common/ModalView.vue
@@ -81,10 +81,10 @@
 
 <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 } = defineProps<{
   isOpen: boolean
@@ -113,22 +113,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/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index 1e698d21..e644bada 100644
--- a/src/components/task-detail/TaskDetail.vue
+++ b/src/components/task-detail/TaskDetail.vue
@@ -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/top-bar/TopBar.vue b/src/components/top-bar/TopBar.vue
index 1f61320b..cd51d551 100644
--- a/src/components/top-bar/TopBar.vue
+++ b/src/components/top-bar/TopBar.vue
@@ -67,6 +67,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 +100,10 @@ const toggleProfile = () => {
   isProfileVisible.value = !isProfileVisible.value
 }
 
+const { setIsOverlayOpen } = useIsOverlayOpenStore()
 const onCloseSide = () => {
   isSideOpen.value = false
-  document.body.style.overflow = ''
+  setIsOverlayOpen(false)
 }
 
 watch(
@@ -118,7 +120,7 @@ const { htmlRef: notifiRef } = useOutsideClick(() => isNotifiVisible.value && to
 const { htmlRef: profileRef } = useOutsideClick(() => isProfileVisible.value && toggleProfile())
 
 const onOpenSide = () => {
-  document.body.style.overflow = 'hidden'
+  setIsOverlayOpen(true)
   isSideOpen.value = !isSideOpen.value
 }
 </script>
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..5b8ea707
--- /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, setIsOverlayOpen }
+})

From 8267da1cb183ac070d36bdf0a44f0588905de0a1 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sat, 15 Feb 2025 17:27:24 +0900
Subject: [PATCH 02/13] =?UTF-8?q?:bug:=20[fix]=20:=20=EC=98=A4=EB=B2=84?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=20=EC=83=9D=EA=B8=B8=20=EB=95=8C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EC=82=AC=EB=9D=BC=EC=A7=90=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20TopBar=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EB=B0=80=EB=A6=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/top-bar/TopBar.vue | 18 ++++++++++++++----
 src/stores/isOverlayOpen.ts       |  2 +-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/top-bar/TopBar.vue b/src/components/top-bar/TopBar.vue
index cd51d551..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
@@ -100,10 +102,11 @@ const toggleProfile = () => {
   isProfileVisible.value = !isProfileVisible.value
 }
 
-const { setIsOverlayOpen } = useIsOverlayOpenStore()
+const isOverlayOpenStore = useIsOverlayOpenStore()
+const { isOverlayOpen, scrollbarWidth } = storeToRefs(isOverlayOpenStore)
 const onCloseSide = () => {
   isSideOpen.value = false
-  setIsOverlayOpen(false)
+  isOverlayOpenStore.setIsOverlayOpen(false)
 }
 
 watch(
@@ -120,7 +123,14 @@ const { htmlRef: notifiRef } = useOutsideClick(() => isNotifiVisible.value && to
 const { htmlRef: profileRef } = useOutsideClick(() => isProfileVisible.value && toggleProfile())
 
 const onOpenSide = () => {
-  setIsOverlayOpen(true)
+  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/stores/isOverlayOpen.ts b/src/stores/isOverlayOpen.ts
index 5b8ea707..d34de01d 100644
--- a/src/stores/isOverlayOpen.ts
+++ b/src/stores/isOverlayOpen.ts
@@ -23,5 +23,5 @@ export const useIsOverlayOpenStore = defineStore('isOverlayOpen', () => {
     }
   }
 
-  return { isOverlayOpen, setIsOverlayOpen }
+  return { isOverlayOpen, scrollbarWidth, setIsOverlayOpen }
 })

From b354c7d92f382bcd0424eeb0c29ef03ff2f764e9 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sat, 15 Feb 2025 17:59:35 +0900
Subject: [PATCH 03/13] =?UTF-8?q?:bug:=20[fix]=20:=20=EB=8B=89=EB=84=A4?=
 =?UTF-8?q?=EC=9E=84=EC=9D=B4=2010=20=EA=B8=80=EC=9E=90=EC=9D=BC=20?=
 =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EA=B3=B5=EA=B0=84=EC=9D=B4=20=EB=B6=80?=
 =?UTF-8?q?=EC=A1=B1=ED=95=9C=20=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/member-management/MemberManagementListCard.vue | 2 +-
 src/constants/admin.ts                                        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/member-management/MemberManagementListCard.vue b/src/components/member-management/MemberManagementListCard.vue
index 89782f8b..a73b28ca 100644
--- a/src/components/member-management/MemberManagementListCard.vue
+++ b/src/components/member-management/MemberManagementListCard.vue
@@ -70,7 +70,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 },
diff --git a/src/constants/admin.ts b/src/constants/admin.ts
index 2bba7e0d..d4247161 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 },

From c8541dc59a2e9e16d76722dc502105588da87bc0 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sat, 15 Feb 2025 19:03:08 +0900
Subject: [PATCH 04/13] =?UTF-8?q?:lipstick:=20[design]=20:=20=EB=B9=84?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94=EB=90=9C=20=EC=B4=88=EB=8C=80=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=82=AC=EC=9C=A0=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MemberManagementListCard.vue              | 52 +++++++++++++++----
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/components/member-management/MemberManagementListCard.vue b/src/components/member-management/MemberManagementListCard.vue
index a73b28ca..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>
 
@@ -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>

From 1699ab6ab3997f43a739f076b6114341b4af9b99 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sat, 15 Feb 2025 20:19:49 +0900
Subject: [PATCH 05/13] =?UTF-8?q?:bug:=20[fix]=20:=20isValidate=20?=
 =?UTF-8?q?=EA=B3=B5=EC=9C=A0=EB=A1=9C=20=EC=9D=B8=ED=95=B4=20border=20?=
 =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EB=8F=99=EC=8B=9C=20=ED=91=9C=EC=8B=9C=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles.css                         |  4 ++++
 src/components/request-task/ReRequestTask.vue |  6 +++---
 src/components/request-task/RequestTask.vue   |  6 +++---
 .../request-task/RequestTaskInput.vue         |  5 +----
 .../user-manage/DepartmentDropDown.vue        | 12 +++++------
 .../user-manage/UserRegistration.vue          | 20 ++++++++++++++-----
 src/components/user-manage/UserUpdate.vue     | 18 +++++++++++++----
 7 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/assets/styles.css b/src/assets/styles.css
index 1abacf02..0438f034 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -17,6 +17,10 @@ body {
   color: #18181b;
 }
 
+::-webkit-scrollbar {
+  display: none;
+}
+
 .shadow-custom {
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
 }
diff --git a/src/components/request-task/ReRequestTask.vue b/src/components/request-task/ReRequestTask.vue
index 86c827de..7ffb9828 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
@@ -129,7 +129,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'
diff --git a/src/components/request-task/RequestTask.vue b/src/components/request-task/RequestTask.vue
index aa6fea44..1af74b99 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
@@ -119,7 +119,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'
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/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..8ac672db 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"
@@ -114,6 +120,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,7 +133,7 @@ const handleSubmit = async () => {
       return
     }
     if (!userRegistrationForm.value.department?.departmentId) {
-      isInvalidate.value = 'depertmentEmpty'
+      isInvalidate.value = 'departmentEmpty'
       return
     }
     const { department, ...restForm } = userRegistrationForm.value
diff --git a/src/components/user-manage/UserUpdate.vue b/src/components/user-manage/UserUpdate.vue
index 9dcc803f..42698aa5 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"
@@ -152,6 +158,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,7 +171,7 @@ const handleSubmit = async () => {
       return
     }
     if (!userRegistrationForm.value.department?.departmentId) {
-      isInvalidate.value = 'depertmentEmpty'
+      isInvalidate.value = 'departmentEmpty'
       return
     }
     if (typeof userId.value === 'string') {

From 9a82d6d877b8497978c22055c19b6bc033194fe5 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sat, 15 Feb 2025 20:33:21 +0900
Subject: [PATCH 06/13] =?UTF-8?q?:lipstick:=20[design]=20:=20TaskDetail=20?=
 =?UTF-8?q?min-w=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-detail/TaskDetail.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/task-detail/TaskDetail.vue b/src/components/task-detail/TaskDetail.vue
index e644bada..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'"

From 0e3d86efba4c57209ca99faa8d2bd90fe43eda21 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sat, 15 Feb 2025 20:39:55 +0900
Subject: [PATCH 07/13] =?UTF-8?q?:bug:=20[fix]=20:=20=EC=9E=98=EB=AA=BB=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=EB=90=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4?=
 =?UTF-8?q?=EB=B0=94=20=EC=A0=9C=EA=B1=B0=20=EC=86=8D=EC=84=B1=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/assets/styles.css b/src/assets/styles.css
index 0438f034..1abacf02 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -17,10 +17,6 @@ body {
   color: #18181b;
 }
 
-::-webkit-scrollbar {
-  display: none;
-}
-
 .shadow-custom {
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
 }

From 82e9b356961e205d7829d6cdc558f0509fe38976 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sun, 16 Feb 2025 09:32:48 +0900
Subject: [PATCH 08/13] =?UTF-8?q?:bug:=20[fix]=20:=20=EC=95=8C=EB=A6=BC=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=ED=91=9C=EC=8B=9C=20=EC=95=88=20=EB=90=98?=
 =?UTF-8?q?=EB=8A=94=20=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/top-bar/NotificationMessage.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

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

From 5a4a3deb328efcb6c40295b6d6aa6e8e92f7e106 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sun, 16 Feb 2025 15:49:19 +0900
Subject: [PATCH 09/13] =?UTF-8?q?:bug:=20[fix]=20:=20=EC=A2=85=EB=A3=8C=20?=
 =?UTF-8?q?=EC=82=AC=EC=9C=A0=20=EC=82=AC=EC=9A=A9=EC=9E=90=20=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=20=EB=88=84=EB=9D=BD=EC=9C=BC=EB=A1=9C=20=EC=9D=B8?=
 =?UTF-8?q?=ED=95=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-detail/TaskDetailHistory.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

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" />

From 2a86165f2e3f0acbf945ab70cad063f34656153a Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sun, 16 Feb 2025 16:37:51 +0900
Subject: [PATCH 10/13] =?UTF-8?q?:bug:=20[fix]=20:=20ModalView=EA=B0=80=20?=
 =?UTF-8?q?TaskDetail=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=95=88?=
 =?UTF-8?q?=EC=97=90=20=EA=B0=87=ED=98=80=20=EB=B9=84=EC=A0=95=EC=83=81?=
 =?UTF-8?q?=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EC=9E=91=EB=8F=99=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         |   1 +
 src/components/common/ModalView.vue | 128 ++++++++++++++--------------
 2 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e1ac0e3c..dc984b3c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,4 +6,5 @@ import TheView from './layout/TheView.vue'
 <template>
   <TopBar />
   <TheView />
+  <div id="modal" />
 </template>
diff --git a/src/components/common/ModalView.vue b/src/components/common/ModalView.vue
index 312c9c0b..b69a85c9 100644
--- a/src/components/common/ModalView.vue
+++ b/src/components/common/ModalView.vue
@@ -1,82 +1,84 @@
 <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">

From 04919bf25f8c32b237da8782f9ed42899b7ebf7d Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sun, 16 Feb 2025 17:47:51 +0900
Subject: [PATCH 11/13] =?UTF-8?q?:bug:=20[fix]=20:=20div#modal=EC=9D=98=20?=
 =?UTF-8?q?mount=20=EC=88=9C=EC=84=9C=EB=A1=9C=20=EC=9D=B8=ED=95=B4=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EB=AA=A8=EB=8B=AC=20=ED=91=9C=EC=8B=9C?=
 =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=98=84=EC=83=81=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index dc984b3c..758082b8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@ import TheView from './layout/TheView.vue'
 </script>
 
 <template>
+  <div id="modal" />
   <TopBar />
   <TheView />
-  <div id="modal" />
 </template>

From 9e59dd387e0af7b5da0b526bccb2a0574eba8298 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sun, 16 Feb 2025 19:01:24 +0900
Subject: [PATCH 12/13] =?UTF-8?q?:recycle:=20[refactor]=20XSS=20=EA=B3=B5?=
 =?UTF-8?q?=EA=B2=A9=20=EB=B0=A9=EC=A7=80=EB=A5=BC=20=EC=9C=84=ED=95=9C=20?=
 =?UTF-8?q?DOMPurify=20=EC=84=A4=EC=B9=98=20=EB=B0=8F=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 28 +++++++++++++++++++
 package.json                                  |  2 ++
 src/api/admin.ts                              |  3 +-
 src/api/user.ts                               | 10 +++----
 src/components/common/EditInformation.vue     |  4 ++-
 src/components/filters/FilterInput.vue        |  3 +-
 src/components/request-task/ReRequestTask.vue |  5 ++--
 src/components/request-task/RequestTask.vue   |  5 ++--
 .../requested/RequestedListCard.vue           |  5 +++-
 src/components/task-detail/TaskStatusList.vue |  5 +++-
 .../task-management/CategoryAdd.vue           |  9 ++++++
 .../user-manage/UserRegistration.vue          |  9 ++++++
 src/components/user-manage/UserUpdate.vue     |  9 ++++++
 13 files changed, 82 insertions(+), 15 deletions(-)

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/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/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/request-task/ReRequestTask.vue b/src/components/request-task/ReRequestTask.vue
index 7ffb9828..2cc92529 100644
--- a/src/components/request-task/ReRequestTask.vue
+++ b/src/components/request-task/ReRequestTask.vue
@@ -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)
@@ -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 1af74b99..19d483fb 100644
--- a/src/components/request-task/RequestTask.vue
+++ b/src/components/request-task/RequestTask.vue
@@ -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)
@@ -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/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/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..61b7b123 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,6 +112,14 @@ 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 patchUrl = `/api/managements/categories/${categoryId}`
diff --git a/src/components/user-manage/UserRegistration.vue b/src/components/user-manage/UserRegistration.vue
index 8ac672db..9180f4a4 100644
--- a/src/components/user-manage/UserRegistration.vue
+++ b/src/components/user-manage/UserRegistration.vue
@@ -77,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()
 
@@ -136,6 +137,14 @@ const handleSubmit = async () => {
       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 42698aa5..667709ed 100644
--- a/src/components/user-manage/UserUpdate.vue
+++ b/src/components/user-manage/UserUpdate.vue
@@ -91,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()
@@ -174,6 +175,14 @@ const handleSubmit = async () => {
       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],

From 1152396aa2665b4824b960ec8ebbe08daa811cc0 Mon Sep 17 00:00:00 2001
From: seorang42 <seorang42@naver.com>
Date: Sun, 16 Feb 2025 19:02:00 +0900
Subject: [PATCH 13/13] =?UTF-8?q?:bug:=20[fix]=20:=201=EC=B0=A8=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=B6=94=EA=B0=80,=202?=
 =?UTF-8?q?=EC=B0=A8=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20400=20=EC=97=90=EB=9F=AC=20=EB=B0=9C=EC=83=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/task-management/CategoryAdd.vue | 3 ++-
 src/constants/admin.ts                         | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/task-management/CategoryAdd.vue b/src/components/task-management/CategoryAdd.vue
index 61b7b123..9b02cfa4 100644
--- a/src/components/task-management/CategoryAdd.vue
+++ b/src/components/task-management/CategoryAdd.vue
@@ -122,8 +122,9 @@ const handleSubmit = async () => {
 
   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/constants/admin.ts b/src/constants/admin.ts
index d4247161..f115c5eb 100644
--- a/src/constants/admin.ts
+++ b/src/constants/admin.ts
@@ -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 = {