雅ボタンにisAnimationDisabled追加

Author: ABfry

frontend/src/components/GifButton.tsx

@@ -9,6 +9,7 @@ export interface GifButtonProps {
   afterSrc: string;
   animationDuration?: number;
   initialIsClicked?: boolean;
+  isAnimationDisabled?: boolean;
   onClick?: () => void;
   onCancel?: () => void;
   className?: string;
@@ -21,6 +22,7 @@ const GifButton = ({
   afterSrc,
   animationDuration,
   initialIsClicked,
+  isAnimationDisabled = false,
   onClick,
   onCancel,
   className,
@@ -32,6 +34,7 @@ const GifButton = ({
   const [isAnimationPlaying, setIsAnimationPlaying] = useState(false);
 
   const clickButton = () => {
+    if (isAnimationDisabled) return;
     setIsAnimationPlaying(true);
     setTimeout(() => {
       setIsAnimationPlaying(false);
@@ -40,6 +43,7 @@ const GifButton = ({
   };
 
   const cancelButton = () => {
+    if (isAnimationDisabled) return;
     setIsAnimationPlaying(false);
     setIsClicked(false);
   };

frontend/src/components/MiyabiButton.tsx

@@ -6,6 +6,7 @@ interface MiyabiButtonProps {
   size?: 'small' | 'medium' | 'large';
   className?: string;
   initialIsClicked?: boolean;
+  isAnimationDisabled?: boolean;
   onClick?: () => void;
   onCancel?: () => void;
 }
@@ -16,6 +17,7 @@ const MiyabiButton = ({
   onCancel,
   className,
   initialIsClicked = false,
+  isAnimationDisabled = false,
 }: MiyabiButtonProps) => {
   return (
     <GifButton
@@ -27,6 +29,7 @@ const MiyabiButton = ({
       initialIsClicked={initialIsClicked}
       onClick={onClick}
       onCancel={onCancel}
+      isAnimationDisabled={isAnimationDisabled}
       className={`${className} scale-150 hover:scale-[1.6]`}
     />
   );

frontend/src/components/Post.tsx

@@ -142,6 +142,7 @@ const Post = ({ post, className, onDelete }: PostProps) => {
               }
             }}
             initialIsClicked={post.miyabiIsClicked}
+            isAnimationDisabled={!isLoggedIn}
             className='mr-0'
           />
         </div>