chore: MessageDialogの内部ロジックを整理する

packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContent.tsx

@@ -24,10 +24,9 @@ export const MessageDialogContent: React.FC<Props & ElementProps> = ({
   const { createPortal } = useDialogPortal(portalParent)
 
   const handleClickClose = useCallback(() => {
-    if (!active) {
-      return
+    if (active) {
+      onClickClose()
     }
-    onClickClose()
   }, [active, onClickClose])
   const titleId = useId()
 

packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx

@@ -1,7 +1,8 @@
-import React, { type FC } from 'react'
+import React, { type FC, useMemo } from 'react'
 
 import { Button } from '../../Button'
-import { Cluster, Stack } from '../../Layout'
+import { Cluster } from '../../Layout'
+import { Section } from '../../SectioningContent'
 import { DialogBody, Props as DialogBodyProps } from '../DialogBody'
 import { DialogHeader, Props as DialogHeaderProps } from '../DialogHeader'
 import { dialogContentInner } from '../dialogInnerStyle'
@@ -33,20 +34,44 @@ export const MessageDialogContentInner: FC<MessageDialogContentInnerProps> = ({
   onClickClose,
   decorators,
 }) => {
-  const { wrapper, actionArea } = dialogContentInner()
+  const styles = useMemo(() => {
+    const { wrapper, actionArea } = dialogContentInner()
+
+    return {
+      wrapper: wrapper(),
+      actionArea: actionArea(),
+    }
+  }, [])
 
   return (
-    // eslint-disable-next-line smarthr/best-practice-for-layouts, smarthr/a11y-heading-in-sectioning-content
-    <Stack gap={0} as="section" className={wrapper()}>
+    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
+    <Section className={styles.wrapper}>
       <DialogHeader title={title} subtitle={subtitle} titleTag={titleTag} titleId={titleId} />
       <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>
         {description}
       </DialogBody>
-      <Cluster as="footer" justify="flex-end" className={actionArea()}>
-        <Button onClick={onClickClose} className="smarthr-ui-Dialog-closeButton">
-          {decorators?.closeButtonLabel?.(CLOSE_BUTTON_LABEL) || CLOSE_BUTTON_LABEL}
-        </Button>
-      </Cluster>
-    </Stack>
+      <FooterCluster
+        onClickClose={onClickClose}
+        decorators={decorators}
+        className={styles.actionArea}
+      />
+    </Section>
   )
 }
+
+const FooterCluster = React.memo<
+  Pick<MessageDialogContentInnerProps, 'onClickClose' | 'decorators'> & { className: string }
+>(({ onClickClose, decorators, className }) => {
+  const children = useMemo(
+    () => decorators?.closeButtonLabel?.(CLOSE_BUTTON_LABEL) || CLOSE_BUTTON_LABEL,
+    [decorators],
+  )
+
+  return (
+    <Cluster as="footer" justify="flex-end" className={className}>
+      <Button onClick={onClickClose} className="smarthr-ui-Dialog-closeButton">
+        {children}
+      </Button>
+    </Cluster>
+  )
+})