fix(#watermark): visible 1 time at 5 sec

src/components/WaterMark/index.tsx

@@ -2,8 +2,9 @@ import { useState, useEffect } from 'react'
 import styled from 'styled-components/macro'
 
 type WmType = {
-  leftWm?: number,
-  topWm?: number,
+  leftWm: number,
+  topWm: number,
+  visible: boolean,
 }
 
 export const ScWaterMark = styled.div<WmType>`
@@ -11,22 +12,10 @@ export const ScWaterMark = styled.div<WmType>`
   top: ${({ topWm }) => `${topWm}%`};
   left: ${({ leftWm }) => `${leftWm}%`};
   z-index: 1;
-  width: 100%;
-  opacity: 0.2;
+  opacity: 1;
   color: white;
-  //animation: marquee 2s linear;
-  //
-  //@keyframes marquee {
-  //  0% {
-  //    opacity: 0;
-  //  }
-  //  50% {
-  //    opacity: 0.3;
-  //  }
-  //  100% {
-  //    opacity: 0;
-  //  }
-  //}
+  visibility: ${({ visible }) => (visible ? 'visible'
+    : 'hidden')};
 `
 
 type WaterMarkProps = {
@@ -36,26 +25,25 @@ type WaterMarkProps = {
 export const WaterMark = ({ value }: WaterMarkProps) => {
   const [topWm, setTopWm] = useState(0)
   const [leftWm, setLeftWm] = useState(0)
-  const [topWm2, setTopWm2] = useState(0)
-  const [leftWm2, setLeftWm2] = useState(0)
+  const [visible, setVisible] = useState(false)
 
   useEffect(() => {
-    let getIntervalCoordinates: ReturnType<typeof setInterval>
-    // eslint-disable-next-line
-      getIntervalCoordinates = setInterval(
-      () => {
-        setLeftWm(Math.floor(Math.random() * 95))
-        setTopWm(Math.floor(Math.random() * 10))
-        setLeftWm2(Math.floor(Math.random() * 95))
-        setTopWm2(Math.floor(Math.random() * (10)) + 80)
-      }, 1000 * 60 * 3,
-    )
-    return () => clearInterval(getIntervalCoordinates)
+    setInterval(() => {
+      setLeftWm(Math.floor(Math.random() * 95))
+      setTopWm(Math.floor(Math.random() * 95))
+      setVisible((v) => !v)
+    }, 1000 * 5)
   }, [])
+
   return (
     <>
-      <ScWaterMark topWm={topWm} leftWm={leftWm}>{value}</ScWaterMark>
-      <ScWaterMark topWm={topWm2} leftWm={leftWm2}>{value}</ScWaterMark>
+      <ScWaterMark
+        visible={visible}
+        topWm={topWm}
+        leftWm={leftWm}
+      >
+        {value}
+      </ScWaterMark>
     </>
   )
 }

src/features/TournamentList/components/TournamentMobile/styled.tsx

@@ -50,7 +50,7 @@ export const TournamentName = styled(Name)`
   white-space: nowrap;
   
   @media (orientation: portrait) {
-    max-width: 200px;
+    max-width: 150px;
   }
 `