Merge pull request #196 from TaskFlow-CLAP/CLAP-436

CLAP-436 QA 사항 반영 Tony.tsx

Author: Minkyu0424

package-lock.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",

package.json

@@ -4,6 +4,7 @@ import TheView from './layout/TheView.vue'
 </script>
 
 <template>
+  <div id="modal" />
   <TopBar />
   <TheView />
 </template>

src/App.vue

@@ -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

src/api/admin.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

src/api/user.ts

@@ -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

src/components/common/EditInformation.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>

src/components/common/ModalView.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

src/components/common/TaskCard.vue

@@ -12,14 +12,15 @@
 
 <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'])
 
 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>