From 35a332247c23dfe1ac9eb43ff87c0bd995d291b5 Mon Sep 17 00:00:00 2001
From: alwn8918 <alwn8918@gmail.com>
Date: Fri, 25 Oct 2024 23:42:17 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=ED=83=80=EC=9D=B4?=
 =?UTF-8?q?=ED=8B=80=20overflow=EC=9D=BC=20=EB=95=8C=20=EC=95=A0=EB=8B=88?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/worklist/WorkItem.jsx      | 24 +++++++++++++++++++++--
 src/components/worklist/WorkItem.style.js | 24 +++++++++++++++++++++--
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/worklist/WorkItem.jsx b/src/components/worklist/WorkItem.jsx
index 0194750..7a6102e 100644
--- 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
index 7412804..981ea23 100644
--- 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;