Merge pull request #122 from 2024WISCOM/develop

Develop
2024WISCOM · Oct 25, 2024 · ebf7911 · ebf7911
2 parents 4fc3b6c + 7031cda
commit ebf7911
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/src/components/worklist/WorkItem.jsx b/src/components/worklist/WorkItem.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import * as W from './WorkItem.style';
 import { useNavigate } from 'react-router-dom';
 
@@ -10,6 +10,20 @@ const WorkItem = React.memo(function ({
   slideIndex,
 }) {
   const navigate = useNavigate();
+  const titleRef = useRef(null);
+  const [isOverflow, setIsOverflow] = useState(false);
+
+  // overflow 여부 체크
+  useEffect(() => {
+    if (titleRef.current) {
+      setIsOverflow(
+        titleRef.current.scrollWidth > titleRef.current.clientWidth,
+      );
+    }
+  }, [slideIndex]); // dataIndex가 변경될 때마다 확인
+
+  // 슬라이드가 변경될 때마다 애니메이션을 재시작하기 위해 key를 변경
+  const titleKey = `${dataIndex}-${isOverflow}`; // 고유 키 생성
 
   if (!data || !data[dataIndex]) {
     return null;
@@ -35,7 +49,13 @@ const WorkItem = React.memo(function ({
       </div>
       <W.Card>
         <img alt={title} src={image} />
-        {isCenterSlide && <W.Title>{title}</W.Title>}
+        <W.titleContainer>
+          {isCenterSlide && (
+            <W.Title key={titleKey} ref={titleRef} isOverflow={isOverflow}>
+              {title}
+            </W.Title>
+          )}
+        </W.titleContainer>
         {isCenterSlide && <W.Team>{team}</W.Team>}
       </W.Card>
     </W.Container>

diff --git a/src/components/worklist/WorkItem.style.js b/src/components/worklist/WorkItem.style.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 export const Container = styled.div`
   transition: all 300ms ease;
@@ -60,7 +60,22 @@ export const Card = styled.div`
   }
 `;
 
+export const titleContainer = styled.div`
+  width: 100%;
+  overflow: hidden;
+`;
+
+const animate = keyframes`
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-250%);
+  }
+`;
+
 export const Title = styled.p`
+  width: 100%;
   color: white;
   text-align: center;
   font-family: Pretendard;
@@ -69,7 +84,12 @@ export const Title = styled.p`
   font-weight: 700;
   line-height: normal;
   margin-bottom: 5px;
-  white-space: pre;
+  white-space: nowrap;
+  display: inline-block;
+
+  padding-left: ${(props) => (props.isOverflow ? '100%' : '0')};
+  animation: ${(props) => (props.isOverflow ? animate : 'none')} 10s linear
+    infinite;
 
   @media (max-width: 1920px) {
     font-size: 28px;