feat: Add cancel button and remove cancel option by select menu

src/commands/deleteLearn.ts

@@ -6,6 +6,7 @@ import {
   ComponentType,
   codeBlock,
   Message,
+  ButtonStyle,
 } from 'discord.js'
 import {
   DetailedDescriptionCommandObject,
@@ -100,15 +101,19 @@ export default class DeleteLearnCommand extends Command {
               type: ComponentType.StringSelect,
               customId: `${CUSTOM_ID}@${user.id}`,
               placeholder: '지울 데이터를 선택해ㅈ주세요',
-              options: [
-                ...options,
-                {
-                  label: '❌ 취소',
-                  description: '아무것도 삭제하지 않아요.',
-                  value: `${CUSTOM_ID}-cancel`,
+              options,
             },
           ],
         },
+        {
+          type: ComponentType.ActionRow,
+          components: [
+            {
+              type: ComponentType.Button,
+              customId: `${CUSTOM_ID}-cancel`,
+              label: '취소',
+              style: ButtonStyle.Danger,
+            },
           ],
         },
       ],

src/interaction-handlers/deleteLearn.ts

@@ -31,18 +31,6 @@ export default class DeleteLearnHandler extends InteractionHandler {
     const db = this.container.database
     const decimalRegexp = /^[0-9]/g
 
-    if (id === 'cancel')
-      return await interaction.editReply({
-        embeds: [
-          {
-            title: '삭제',
-            description: '아무것도 삭제하지 않았어요.',
-            color: this.container.embedColors.fail,
-          },
-        ],
-        components: [],
-      })
-
     const itemId = interaction.component.options.map(item =>
       item.value.endsWith(`${id}`) ? item.label.match(decimalRegexp)![0] : null,
     )

src/interaction-handlers/deleteLearnCancel.ts

@@ -0,0 +1,31 @@
+import { ApplyOptions } from '@sapphire/decorators'
+import {
+  InteractionHandler,
+  InteractionHandlerTypes,
+} from '@sapphire/framework'
+import { ButtonInteraction } from 'discord.js'
+
+@ApplyOptions<InteractionHandler.Options>({
+  interactionHandlerType: InteractionHandlerTypes.Button,
+})
+export default class DeleteLearnCancelHandler extends InteractionHandler {
+  private _CUSTOM_ID = 'maa$deleteLearn'
+
+  public async parse(interaction: ButtonInteraction) {
+    if (interaction.customId !== `${this._CUSTOM_ID}-cancel`) return this.none()
+    return this.some()
+  }
+
+  public async run(interaction: ButtonInteraction) {
+    return await interaction.update({
+      embeds: [
+        {
+          title: '삭제',
+          description: '아무것도 삭제하지 않았어요.',
+          color: this.container.embedColors.fail,
+        },
+      ],
+      components: [],
+    })
+  }
+}