refactor: improve IconButtonGroup and FloatingIconButtonGroup (#1518)

Closes #1411

front/src/modules/ui/button/components/IconButtonGroup.tsx

@@ -1,7 +1,11 @@
-import React from 'react';
+import type { MouseEvent } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { IconButtonPosition, IconButtonProps } from './IconButton';
+import type { IconComponent } from '@/ui/icon/types/IconComponent';
+
+import { Button } from './Button';
+import { IconButtonPosition, type IconButtonProps } from './IconButton';
 
 const StyledIconButtonGroupContainer = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.md};
@@ -10,45 +14,42 @@ const StyledIconButtonGroupContainer = styled.div`
 
 export type IconButtonGroupProps = Pick<
   IconButtonProps,
-  'variant' | 'size' | 'accent'
+  'accent' | 'size' | 'variant'
 > & {
-  children: React.ReactElement[];
+  iconButtons: {
+    Icon: IconComponent;
+    onClick?: (event: MouseEvent<any>) => void;
+  }[];
 };
 
 export function IconButtonGroup({
-  children,
-  variant,
-  size,
   accent,
+  iconButtons,
+  size,
+  variant,
 }: IconButtonGroupProps) {
+  const theme = useTheme();
+
   return (
     <StyledIconButtonGroupContainer>
-      {React.Children.map(children, (child, index) => {
-        let position: IconButtonPosition;
+      {iconButtons.map(({ Icon, onClick }, index) => {
+        const position: IconButtonPosition =
+          index === 0
+            ? 'left'
+            : index === iconButtons.length - 1
+            ? 'right'
+            : 'middle';
 
-        if (index === 0) {
-          position = 'left';
-        } else if (index === children.length - 1) {
-          position = 'right';
-        } else {
-          position = 'middle';
-        }
-
-        const additionalProps: any = { position };
-
-        if (variant) {
-          additionalProps.variant = variant;
-        }
-
-        if (accent) {
-          additionalProps.accent = accent;
-        }
-
-        if (size) {
-          additionalProps.size = size;
-        }
-
-        return React.cloneElement(child, additionalProps);
+        return (
+          <Button
+            accent={accent}
+            icon={<Icon size={theme.icon.size.sm} />}
+            onClick={onClick}
+            position={position}
+            size={size}
+            variant={variant}
+          />
+        );
       })}
     </StyledIconButtonGroupContainer>
   );