From 9dfe8efada7a0951566860a34d056d169f96a281 Mon Sep 17 00:00:00 2001
From: ShoeheyOt <shuhei.ota.so@gmail.com>
Date: Sun, 31 Mar 2024 23:34:20 -0700
Subject: [PATCH 1/9] refactor: move DialogRoot

---
 .../GroupCardDropdownMenuContent/index.tsx    | 25 +++++------
 .../index.tsx                                 | 41 +++++++++++++------
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx
index 041f1a1a..c3947a1e 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx
@@ -1,4 +1,4 @@
-import { IconPen } from '@/assets/images/icons';
+import { IconDelete, IconPen } from '@/assets/images/icons';
 import {
   DropdownMenuButton,
   DropdownMenuButtonIcon,
@@ -7,15 +7,8 @@ import {
   DropdownMenuItem,
   Icon,
 } from '@/components/ui';
-import { IGroup } from '@/types/definition';
-
-import { DeleteGroupDialogTriggerButton } from './DeleteGroupDialogTriggerButton';
 
 interface IGroupCardDropdownMenuContentProps {
-  /**
-   * The ID of the group to delete.
-   */
-  groupId: IGroup['id'];
   /**
    * Function to handle the rename button click.
    */
@@ -28,7 +21,6 @@ interface IGroupCardDropdownMenuContentProps {
 }
 
 export const GroupCardDropdownMenuContent = ({
-  groupId,
   handleRenameClick,
   onDropdownMenuClose,
 }: IGroupCardDropdownMenuContentProps) => {
@@ -41,8 +33,9 @@ export const GroupCardDropdownMenuContent = ({
    * @param e - The event object
    * @returns void
    */
-  const handleSelect = (e: Event) => {
+  const handleSelect = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
+    onDropdownMenuClose();
   };
 
   return (
@@ -55,11 +48,13 @@ export const GroupCardDropdownMenuContent = ({
           <DropdownMenuButtonText>Rename</DropdownMenuButtonText>
         </DropdownMenuButton>
       </DropdownMenuItem>
-      <DropdownMenuItem onSelect={handleSelect}>
-        <DeleteGroupDialogTriggerButton
-          groupId={groupId}
-          onDropdownMenuClose={onDropdownMenuClose}
-        />
+      <DropdownMenuItem asChild>
+        <DropdownMenuButton onClick={(e) => handleSelect(e)}>
+          <DropdownMenuButtonIcon>
+            <Icon icon={IconDelete} size={5} color="danger" />
+          </DropdownMenuButtonIcon>
+          <DropdownMenuButtonText>Delete</DropdownMenuButtonText>
+        </DropdownMenuButton>
       </DropdownMenuItem>
     </DropdownMenuContent>
   );
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx
index 16fbad53..b1bb9dd7 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { IconMenuKebab } from '@/assets/images/icons';
-import { Button, DropdownMenu, DropdownMenuTrigger, Icon } from '@/components/ui';
+import { Button, DialogRoot, DropdownMenu, DropdownMenuTrigger, Icon } from '@/components/ui';
+import { DeleteGroupDialogContent } from '@/features/groups/components/DeleteGroupDialogContent';
 import { IGroup } from '@/types/definition';
 
 import { useState } from 'react';
@@ -23,18 +24,32 @@ export const GroupCardDropdownMenuTriggerButton = ({
   handleRenameClick,
 }: IGroupCardMenuButtonProps) => {
   const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
+  const [isDeleteGroupDialogOpen, setIsDeleteGroupDialogOpen] = useState(false);
+
+  const handleDeleteClick = () => {
+    setIsDropdownMenuOpen(false);
+    setIsDeleteGroupDialogOpen(true);
+  };
   return (
-    <DropdownMenu open={isDropdownMenuOpen} onOpenChange={setIsDropdownMenuOpen}>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="w-12">
-          <Icon icon={IconMenuKebab} size={4.5} />
-        </Button>
-      </DropdownMenuTrigger>
-      <GroupCardDropdownMenuContent
-        groupId={groupId}
-        handleRenameClick={handleRenameClick}
-        onDropdownMenuClose={() => setIsDropdownMenuOpen(false)}
-      />
-    </DropdownMenu>
+    <>
+      <DropdownMenu open={isDropdownMenuOpen} onOpenChange={setIsDropdownMenuOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="w-12">
+            <Icon icon={IconMenuKebab} size={4.5} />
+          </Button>
+        </DropdownMenuTrigger>
+        <GroupCardDropdownMenuContent
+          handleRenameClick={handleRenameClick}
+          onDropdownMenuClose={handleDeleteClick}
+        />
+      </DropdownMenu>
+      <DialogRoot open={isDeleteGroupDialogOpen} onOpenChange={setIsDeleteGroupDialogOpen}>
+        <DeleteGroupDialogContent
+          groupId={groupId}
+          onParentClose={() => setIsDropdownMenuOpen(false)}
+          onDialogClose={() => setIsDeleteGroupDialogOpen(false)}
+        />
+      </DialogRoot>
+    </>
   );
 };

From 4ae3ec7bcc96400151c2ac5038d14c01be1d21e2 Mon Sep 17 00:00:00 2001
From: ShoeheyOt <shuhei.ota.so@gmail.com>
Date: Mon, 1 Apr 2024 09:10:23 -0700
Subject: [PATCH 2/9] refactor: change the name of components

---
 .../GroupCardDropdownMenuContent/index.tsx                  | 6 +++---
 .../GroupCardDropdownMenuTriggerButton/index.tsx            | 4 ++--
 .../GroupCardList/GroupCard/GroupCardContent/index.tsx      | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx
index c3947a1e..9a5a5fb5 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx
@@ -17,12 +17,12 @@ interface IGroupCardDropdownMenuContentProps {
   /**
    * The function to close the dropdown menu.
    */
-  onDropdownMenuClose: () => void;
+  handleDeleteClick: () => void;
 }
 
 export const GroupCardDropdownMenuContent = ({
   handleRenameClick,
-  onDropdownMenuClose,
+  handleDeleteClick,
 }: IGroupCardDropdownMenuContentProps) => {
   /**
    * The function that is called when the dropdown menu item is selected.
@@ -35,7 +35,7 @@ export const GroupCardDropdownMenuContent = ({
    */
   const handleSelect = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
-    onDropdownMenuClose();
+    handleDeleteClick();
   };
 
   return (
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx
index b1bb9dd7..ee58af67 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx
@@ -19,7 +19,7 @@ interface IGroupCardMenuButtonProps {
   handleRenameClick: () => void;
 }
 
-export const GroupCardDropdownMenuTriggerButton = ({
+export const GroupCardDropdownMenu = ({
   groupId,
   handleRenameClick,
 }: IGroupCardMenuButtonProps) => {
@@ -40,7 +40,7 @@ export const GroupCardDropdownMenuTriggerButton = ({
         </DropdownMenuTrigger>
         <GroupCardDropdownMenuContent
           handleRenameClick={handleRenameClick}
-          onDropdownMenuClose={handleDeleteClick}
+          handleDeleteClick={handleDeleteClick}
         />
       </DropdownMenu>
       <DialogRoot open={isDeleteGroupDialogOpen} onOpenChange={setIsDeleteGroupDialogOpen}>
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
index 4cc466c2..a983048a 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link';
 import { FC, useState } from 'react';
 
 import { ContainerCount } from './ContainerCount';
-import { GroupCardDropdownMenuTriggerButton } from './GroupCardDropdownMenuTriggerButton';
+import { GroupCardDropdownMenu } from './GroupCardDropdownMenuTriggerButton';
 import { RenameGroupForm } from './RenameGroupForm';
 import { UserCount } from './UserCount';
 
@@ -50,7 +50,7 @@ export const GroupCardContent: FC<IGroupCardContentProps> = ({
           <UserCount userCount={userCount} />
         </div>
       </Link>
-      <GroupCardDropdownMenuTriggerButton groupId={groupId} handleRenameClick={handleRenameClick} />
+      <GroupCardDropdownMenu groupId={groupId} handleRenameClick={handleRenameClick} />
     </Card>
   );
 };

From 48a24a3976a290ed827116bdbcbcc6ca0020992f Mon Sep 17 00:00:00 2001
From: ShoeheyOt <shuhei.ota.so@gmail.com>
Date: Mon, 1 Apr 2024 10:06:00 -0700
Subject: [PATCH 3/9] docs: add to interfaces

---
 .../DeleteGroupDialogTriggerButton/index.tsx    |  1 -
 .../index.tsx                                   |  2 +-
 .../GroupCard/GroupCardContent/index.tsx        | 17 +++++++++++++++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx
index 218de128..22e595ed 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx
@@ -18,7 +18,6 @@ interface IGroupCardDropdownMenuDeleteButtonProps {
    * The ID of the group to delete.
    */
   groupId: IGroup['id'];
-
   /**
    * The function to close the dropdown menu.
    */
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx
index ee58af67..a6032b11 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx
@@ -10,7 +10,7 @@ import { GroupCardDropdownMenuContent } from './GroupCardDropdownMenuContent';
 
 interface IGroupCardMenuButtonProps {
   /**
-   * The ID of the group to delete.
+   * The ID of the group to be deleted.
    */
   groupId: IGroup['id'];
   /**
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
index a983048a..db6971d3 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { Card } from '@/components/ui';
+import { IGroup } from '@/types/definition';
 
 import Link from 'next/link';
 import { FC, useState } from 'react';
@@ -10,9 +11,21 @@ import { RenameGroupForm } from './RenameGroupForm';
 import { UserCount } from './UserCount';
 
 interface IGroupCardContentProps {
-  groupId: string;
-  groupName: string;
+  /**
+   * an identifier of a group
+   */
+  groupId: IGroup['id'];
+  /**
+   * a group name used to display on each card
+   */
+  groupName: IGroup['name'];
+  /**
+   * a number of container which belongs to a group
+   */
   containerCount: number;
+  /**
+   * a number of user who belongs to a group
+   */
   userCount: number;
 }
 

From 5cff28bdd56b90399752132b3cc723cc36aff0ac Mon Sep 17 00:00:00 2001
From: ShoeheyOt <shuhei.ota.so@gmail.com>
Date: Mon, 1 Apr 2024 10:19:07 -0700
Subject: [PATCH 4/9] refactor: restructure the directories

---
 .../GroupCardDropdownMenuContent.tsx}         |  0
 .../index.tsx                                 |  0
 .../DeleteGroupDialogTriggerButton/index.tsx  | 50 -------------------
 .../GroupCard/GroupCardContent/index.tsx      |  2 +-
 4 files changed, 1 insertion(+), 51 deletions(-)
 rename src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/{GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx => GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx} (100%)
 rename src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/{GroupCardDropdownMenuTriggerButton => GroupCardDropdownMenu}/index.tsx (100%)
 delete mode 100644 src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx

diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
similarity index 100%
rename from src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/index.tsx
rename to src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx
similarity index 100%
rename from src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/index.tsx
rename to src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx
deleted file mode 100644
index 22e595ed..00000000
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenuTriggerButton/GroupCardDropdownMenuContent/DeleteGroupDialogTriggerButton/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client';
-import { IconDelete } from '@/assets/images/icons';
-import {
-  DialogRoot,
-  DialogTrigger,
-  DropdownMenuButton,
-  DropdownMenuButtonIcon,
-  DropdownMenuButtonText,
-  Icon,
-} from '@/components/ui';
-import { DeleteGroupDialogContent } from '@/features/groups/components/DeleteGroupDialogContent';
-import { IGroup } from '@/types/definition';
-
-import { useState } from 'react';
-
-interface IGroupCardDropdownMenuDeleteButtonProps {
-  /**
-   * The ID of the group to delete.
-   */
-  groupId: IGroup['id'];
-  /**
-   * The function to close the dropdown menu.
-   */
-  onDropdownMenuClose: () => void;
-}
-
-export const DeleteGroupDialogTriggerButton = ({
-  groupId,
-  onDropdownMenuClose,
-}: IGroupCardDropdownMenuDeleteButtonProps) => {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-
-  return (
-    <DialogRoot open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuButton>
-          <DropdownMenuButtonIcon>
-            <Icon icon={IconDelete} size={5} color="danger" />
-          </DropdownMenuButtonIcon>
-          <DropdownMenuButtonText>Delete</DropdownMenuButtonText>
-        </DropdownMenuButton>
-      </DialogTrigger>
-      <DeleteGroupDialogContent
-        groupId={groupId}
-        onParentClose={onDropdownMenuClose}
-        onDialogClose={() => setIsDialogOpen(false)}
-      />
-    </DialogRoot>
-  );
-};
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
index db6971d3..1b4cae48 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { FC, useState } from 'react';
 
 import { ContainerCount } from './ContainerCount';
-import { GroupCardDropdownMenu } from './GroupCardDropdownMenuTriggerButton';
+import { GroupCardDropdownMenu } from './GroupCardDropdownMenu';
 import { RenameGroupForm } from './RenameGroupForm';
 import { UserCount } from './UserCount';
 

From 5d133a725e701cc4cc0de7f0e5c8f99dc5c188a0 Mon Sep 17 00:00:00 2001
From: ShoeheyOt <shuhei.ota.so@gmail.com>
Date: Mon, 1 Apr 2024 10:49:22 -0700
Subject: [PATCH 5/9] refactor: delete unnecessary code

---
 .../GroupCardDropdownMenuContent.tsx             | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
index 9a5a5fb5..a3ea331e 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
@@ -24,20 +24,6 @@ export const GroupCardDropdownMenuContent = ({
   handleRenameClick,
   handleDeleteClick,
 }: IGroupCardDropdownMenuContentProps) => {
-  /**
-   * The function that is called when the dropdown menu item is selected.
-   * e.preventDefault() prevents the dropdown menu from closing when selecting that item.
-   * This is necessary because closing dropdown menu also closes the dialog unintentionally.
-   * @see {@link https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item}
-   *
-   * @param e - The event object
-   * @returns void
-   */
-  const handleSelect = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.preventDefault();
-    handleDeleteClick();
-  };
-
   return (
     <DropdownMenuContent>
       <DropdownMenuItem>
@@ -49,7 +35,7 @@ export const GroupCardDropdownMenuContent = ({
         </DropdownMenuButton>
       </DropdownMenuItem>
       <DropdownMenuItem asChild>
-        <DropdownMenuButton onClick={(e) => handleSelect(e)}>
+        <DropdownMenuButton onClick={handleDeleteClick}>
           <DropdownMenuButtonIcon>
             <Icon icon={IconDelete} size={5} color="danger" />
           </DropdownMenuButtonIcon>

From 9c52daf05810cf51cb8aa2f96213ae4a76f6079f Mon Sep 17 00:00:00 2001
From: ShoeheyOt <shuhei.ota.so@gmail.com>
Date: Mon, 1 Apr 2024 11:22:45 -0700
Subject: [PATCH 6/9] feat: focust kebab button using useAutoFocus

---
 .../GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx | 1 -
 .../GroupCardContent/GroupCardDropdownMenu/index.tsx       | 7 ++++++-
 .../GroupCardList/GroupCard/GroupCardContent/index.tsx     | 6 +++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
index a3ea331e..38be04a3 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
@@ -13,7 +13,6 @@ interface IGroupCardDropdownMenuContentProps {
    * Function to handle the rename button click.
    */
   handleRenameClick: () => void;
-
   /**
    * The function to close the dropdown menu.
    */
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx
index a6032b11..ae463e71 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx
@@ -2,6 +2,7 @@
 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';
@@ -17,15 +18,19 @@ interface IGroupCardMenuButtonProps {
    * Function to handle the rename button click.
    */
   handleRenameClick: () => void;
+  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);
@@ -34,7 +39,7 @@ export const GroupCardDropdownMenu = ({
     <>
       <DropdownMenu open={isDropdownMenuOpen} onOpenChange={setIsDropdownMenuOpen}>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" className="w-12">
+          <Button variant="ghost" className="w-12" ref={kebabRef}>
             <Icon icon={IconMenuKebab} size={4.5} />
           </Button>
         </DropdownMenuTrigger>
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
index 1b4cae48..b09bbdcf 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
@@ -63,7 +63,11 @@ export const GroupCardContent: FC<IGroupCardContentProps> = ({
           <UserCount userCount={userCount} />
         </div>
       </Link>
-      <GroupCardDropdownMenu groupId={groupId} handleRenameClick={handleRenameClick} />
+      <GroupCardDropdownMenu
+        groupId={groupId}
+        handleRenameClick={handleRenameClick}
+        isRenameFormOpen={isRenameFormOpen}
+      />
     </Card>
   );
 };

From ae0435c47b541ce5fc527dc29b6dd600682c7130 Mon Sep 17 00:00:00 2001
From: ShoeheyOt <shuhei.ota.so@gmail.com>
Date: Mon, 1 Apr 2024 14:15:31 -0700
Subject: [PATCH 7/9] docs: add docs to interface

---
 .../GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx
index ae463e71..3d67fa7f 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/index.tsx
@@ -18,6 +18,9 @@ interface IGroupCardMenuButtonProps {
    * Function to handle the rename button click.
    */
   handleRenameClick: () => void;
+  /**
+   * A state of renaming input field to be opened (=true) or closed(=false)
+   */
   isRenameFormOpen: boolean;
 }
 

From 9f11fc492bfe21132d382e6d44160995ba4e5993 Mon Sep 17 00:00:00 2001
From: ShoeheyOt <shuhei.ota.so@gmail.com>
Date: Fri, 5 Apr 2024 15:19:36 -0700
Subject: [PATCH 8/9] docs: doc:fix the TSDoc

---
 .../GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx    | 2 +-
 .../GroupCardList/GroupCard/GroupCardContent/index.tsx        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
index 38be04a3..0c39e38e 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/GroupCardDropdownMenu/GroupCardDropdownMenuContent.tsx
@@ -25,7 +25,7 @@ export const GroupCardDropdownMenuContent = ({
 }: IGroupCardDropdownMenuContentProps) => {
   return (
     <DropdownMenuContent>
-      <DropdownMenuItem>
+      <DropdownMenuItem asChild>
         <DropdownMenuButton onClick={handleRenameClick}>
           <DropdownMenuButtonIcon>
             <Icon icon={IconPen} size={5} color="primary" />
diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
index b09bbdcf..fe5e97ce 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
@@ -20,11 +20,11 @@ interface IGroupCardContentProps {
    */
   groupName: IGroup['name'];
   /**
-   * a number of container which belongs to a group
+   * the number of container which belongs to a group
    */
   containerCount: number;
   /**
-   * a number of user who belongs to a group
+   * the number of user who belongs to a group
    */
   userCount: number;
 }

From a594a8750ae882796f37f42126c85942c92e9704 Mon Sep 17 00:00:00 2001
From: ShoeheyOt <shuhei.ota.so@gmail.com>
Date: Fri, 5 Apr 2024 15:24:22 -0700
Subject: [PATCH 9/9] fix: typo

---
 .../GroupCardList/GroupCard/GroupCardContent/index.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
index fe5e97ce..3e145e24 100644
--- a/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
+++ b/src/features/groups/components/GroupCardList/GroupCard/GroupCardContent/index.tsx
@@ -12,7 +12,7 @@ import { UserCount } from './UserCount';
 
 interface IGroupCardContentProps {
   /**
-   * an identifier of a group
+   * the identifier of a group
    */
   groupId: IGroup['id'];
   /**