diff --git a/src/components/dialog/DialogHeader.vue b/src/components/dialog/DialogHeader.vue
index 503af2c3..75cfd779 100644
--- a/src/components/dialog/DialogHeader.vue
+++ b/src/components/dialog/DialogHeader.vue
@@ -15,7 +15,7 @@ defineProps<{
       <slot name="title-after" />
     </div>
     <slot name="after">
-      <CancelButton icon-only v-close-popup />
+      <CancelButton id="btn-form-close" icon-only v-close-popup />
     </slot>
   </div>
 </template>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index f69be1b4..0dfcba01 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1156,12 +1156,12 @@ function confirmDeleteWork(id: string, noDialog?: boolean) {
   if (noDialog) {
     deleteWork(id);
   } else {
-    const currUseName =
-      service.value?.map((v) => v.work.map((x) => x.name)).flat() || [];
+    const currUseName = workItems.value?.map((v) => v.name) || [];
     const deleteTarget = workNameItems.value.find(
       (v: { id: string }) => v.id === id,
-    ).name;
-    const isNameInUse = currUseName.includes(deleteTarget);
+    );
+    if (!deleteTarget) return;
+    const isNameInUse = currUseName.includes(deleteTarget.name);
 
     dialog({
       color: 'negative',
@@ -1169,7 +1169,7 @@ function confirmDeleteWork(id: string, noDialog?: boolean) {
       title: t('dialog.title.confirmDelete'),
       actionText: t('general.delete'),
       message: isNameInUse
-        ? `${t('dialog.message.beingUse', { msg: deleteTarget })} ${t('dialog.message.confirmDelete')}`
+        ? `${t('dialog.message.beingUse', { msg: deleteTarget.name })} ${t('dialog.message.confirmDelete')}`
         : t('dialog.message.confirmDelete'),
       action: async () => {
         deleteWork(id);