Refactor: restructure component layers for kebab button on groupcard

src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx

@@ -0,0 +1,46 @@
+import { IconDelete, IconPen } from '@/assets/images/icons';
+import {
+  DropdownMenuButton,
+  DropdownMenuButtonIcon,
+  DropdownMenuButtonText,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Icon,
+} from '@/components/ui';
+
+interface IGroupCardDropdownMenuContentProps {
+  /**
+   * Function to handle the rename button click.
+   */
+  handleRenameClick: () => void;
+  /**
+   * The function to close the dropdown menu.
+   */
+  handleDeleteClick: () => void;
+}
+
+export const GroupCardDropdownMenuContent = ({
+  handleRenameClick,
+  handleDeleteClick,
+}: IGroupCardDropdownMenuContentProps) => {
+  return (
+    <DropdownMenuContent>
+      <DropdownMenuItem asChild>
+        <DropdownMenuButton onClick={handleRenameClick}>
+          <DropdownMenuButtonIcon>
+            <Icon icon={IconPen} size={5} color="primary" />
+          </DropdownMenuButtonIcon>
+          <DropdownMenuButtonText>Rename</DropdownMenuButtonText>
+        </DropdownMenuButton>
+      </DropdownMenuItem>
+      <DropdownMenuItem asChild>
+        <DropdownMenuButton onClick={handleDeleteClick}>
+          <DropdownMenuButtonIcon>
+            <Icon icon={IconDelete} size={5} color="danger" />
+          </DropdownMenuButtonIcon>
+          <DropdownMenuButtonText>Delete</DropdownMenuButtonText>
+        </DropdownMenuButton>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  );
+};

src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx

@@ -0,0 +1,63 @@
+'use client';
+import { IconMenuKebab } from '@/assets/images/icons';
+import { Button, DialogRoot, DropdownMenu, DropdownMenuTrigger, Icon } from '@/components/ui';
+import { DeleteGroupDialogContent } from '@/features/groups/components/DeleteGroupDialogContent';
+import { useAutoFocus } from '@/hooks';
+import { IGroup } from '@/types/definition';
+
+import { useState } from 'react';
+
+import { GroupCardDropdownMenuContent } from './GroupCardDropdownMenuContent';
+
+interface IGroupCardMenuButtonProps {
+  /**
+   * The ID of the group to be deleted.
+   */
+  groupId: IGroup['id'];
+  /**
+   * Function to handle the rename button click.
+   */
+  handleRenameClick: () => void;
+  /**
+   * A state of renaming input field to be opened (=true) or closed(=false)
+   */
+  isRenameFormOpen: boolean;
+}
+
+export const GroupCardDropdownMenu = ({
+  groupId,
+  handleRenameClick,
+  isRenameFormOpen,
+}: IGroupCardMenuButtonProps) => {
+  const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
+  const [isDeleteGroupDialogOpen, setIsDeleteGroupDialogOpen] = useState(false);
+
+  const kebabRef = useAutoFocus<HTMLButtonElement>(!isDeleteGroupDialogOpen && !isRenameFormOpen);
+
+  const handleDeleteClick = () => {
+    setIsDropdownMenuOpen(false);
+    setIsDeleteGroupDialogOpen(true);
+  };
+  return (
+    <>
+      <DropdownMenu open={isDropdownMenuOpen} onOpenChange={setIsDropdownMenuOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="w-12" ref={kebabRef}>
+            <Icon icon={IconMenuKebab} size={4.5} />
+          </Button>
+        </DropdownMenuTrigger>
+        <GroupCardDropdownMenuContent
+          handleRenameClick={handleRenameClick}
+          handleDeleteClick={handleDeleteClick}
+        />
+      </DropdownMenu>
+      <DialogRoot open={isDeleteGroupDialogOpen} onOpenChange={setIsDeleteGroupDialogOpen}>
+        <DeleteGroupDialogContent
+          groupId={groupId}
+          onParentClose={() => setIsDropdownMenuOpen(false)}
+          onDialogClose={() => setIsDeleteGroupDialogOpen(false)}
+        />
+      </DialogRoot>
+    </>
+  );
+};

src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx

@@ -1,18 +1,31 @@
 'use client';
 import { Card } from '@/components/ui';
+import { IGroup } from '@/types/definition';
 
 import Link from 'next/link';
 import { FC, useState } from 'react';
 
 import { ContainerCount } from './ContainerCount';
-import { GroupCardDropdownMenuTriggerButton } from './GroupCardDropdownMenuTriggerButton';
+import { GroupCardDropdownMenu } from './GroupCardDropdownMenu';
 import { RenameGroupForm } from './RenameGroupForm';
 import { UserCount } from './UserCount';
 
 interface IGroupCardContentProps {
-  groupId: string;
-  groupName: string;
+  /**
+   * the identifier of a group
+   */
+  groupId: IGroup['id'];
+  /**
+   * a group name used to display on each card
+   */
+  groupName: IGroup['name'];
+  /**
+   * the number of container which belongs to a group
+   */
   containerCount: number;
+  /**
+   * the number of user who belongs to a group
+   */
   userCount: number;
 }
 
@@ -50,7 +63,11 @@ export const GroupCardContent: FC<IGroupCardContentProps> = ({
           <UserCount userCount={userCount} />
         </div>
       </Link>
-      <GroupCardDropdownMenuTriggerButton groupId={groupId} handleRenameClick={handleRenameClick} />
+      <GroupCardDropdownMenu
+        groupId={groupId}
+        handleRenameClick={handleRenameClick}
+        isRenameFormOpen={isRenameFormOpen}
+      />
     </Card>
   );
 };