feat: improve clipboard error handling with user-friendly message

Author: MH4GF

web/src/app/_features/CopyToClipboardButton/CopyToClipboardButton.tsx

@@ -7,33 +7,42 @@ import { useCallback, useState } from 'react'
 import { Tooltip } from './Tooltip'
 import { useSuccessTooltip } from './useSuccessTooltip'
 
-import { Button } from '@/app/_components'
+import { Alert, Button } from '@/app/_components'
 
 interface Props {
   text: string
 }
 
 export const CopyToClipboardButton: FC<Props> = ({ text }) => {
   const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
   const [showTooltip, setShowTooltip] = useSuccessTooltip()
 
   const handleClick = useCallback(() => {
+    setError(null)
     setIsLoading(true)
     navigator.clipboard
       .writeText(text)
-      .then(() => setShowTooltip(true))
-      .catch((_e) => {
-        /* エラー処理 */
+      .then(() => {
+        setShowTooltip(true)
+        setIsLoading(false)
+      })
+      .catch((e) => {
+        console.error('Failed to copy to clipboard', e)
+        setError('Failed to copy to clipboard. Please check your browser permissions.')
+        setIsLoading(false)
       })
-    setIsLoading(false)
   }, [text, setShowTooltip])
 
   return (
-    <span className="relative">
-      <Tooltip show={showTooltip} />
-      <Button isLoading={isLoading} onClick={handleClick} variant="secondary">
-        Copy to Clipboard
-      </Button>
-    </span>
+    <div className="space-y-2">
+      {error && <Alert>{error}</Alert>}
+      <span className="relative">
+        <Tooltip show={showTooltip} />
+        <Button isLoading={isLoading} onClick={handleClick} variant="secondary">
+          Copy to Clipboard
+        </Button>
+      </span>
+    </div>
   )
 }