設定画面 (#34) (#397)

Reviewed-on: #397
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/components/ResponsiveMarqueeText.tsx

@@ -1,3 +1,4 @@
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn } from '@/lib/utils'
 import { useEffect, useRef, useState } from 'react'
 
@@ -20,6 +21,8 @@ const MIN_MARQUEE_OVERFLOW_PX = 1
 const ResponsiveMarqueeText: FC<Props> = (
     { text, className, truncateOnMobile = false, title },
 ) => {
+  const behaviourSettings = useClientBehaviourSettings ()
+  const animationMode = behaviourSettings.animation ?? 'normal'
   const outerRef = useRef<HTMLSpanElement | null> (null)
   const staticRef = useRef<HTMLSpanElement | null> (null)
   const animatedRef = useRef<HTMLSpanElement | null> (null)
@@ -98,6 +101,7 @@ const ResponsiveMarqueeText: FC<Props> = (
     const animated = animatedRef.current
     const canMarquee = (
         active
+        && animationMode !== 'off'
         && desktopMarqueeEnabled
         && overflowPx >= MIN_MARQUEE_OVERFLOW_PX
         && animated != null)
@@ -207,7 +211,7 @@ const ResponsiveMarqueeText: FC<Props> = (
       resetAnimated ()
       setMarqueeVisible (false)
     }
-  }, [active, desktopMarqueeEnabled, overflowPx, text])
+  }, [active, animationMode, desktopMarqueeEnabled, overflowPx, text])
 
   return (
       <span