Merge pull request #125 from 2024WISCOM/feature/work-list

Feature/work list
2024WISCOM · Oct 25, 2024 · 72eae3d · 72eae3d
2 parents 7a3eb1e + d2c6a76
commit 72eae3d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/src/components/worklist/WorkItem.jsx b/src/components/worklist/WorkItem.jsx
@@ -12,15 +12,19 @@ const WorkItem = React.memo(function ({
   const navigate = useNavigate();
   const titleRef = useRef(null);
   const [isOverflow, setIsOverflow] = useState(false);
+  const [widthScroll, setWidthScroll] = useState(0);
 
   // overflow 여부 체크
   useEffect(() => {
     if (titleRef.current) {
-      setIsOverflow(
-        titleRef.current.scrollWidth > titleRef.current.clientWidth,
-      );
+      const currentScrollWidth = titleRef.current.scrollWidth;
+      setIsOverflow(currentScrollWidth > titleRef.current.clientWidth);
+      setWidthScroll(currentScrollWidth);
+
+      // widthScroll이 업데이트된 후에 콘솔 출력
+      console.log(currentScrollWidth, widthScroll);
     }
-  }, [slideIndex]); // dataIndex가 변경될 때마다 확인
+  }, [dataIndex, slideIndex, widthScroll]); // dataIndex가 변경될 때마다 확인
 
   // 슬라이드가 변경될 때마다 애니메이션을 재시작하기 위해 key를 변경
   const titleKey = `${dataIndex}-${isOverflow}`; // 고유 키 생성
@@ -49,13 +53,25 @@ const WorkItem = React.memo(function ({
       </div>
       <W.Card>
         <img alt={title} src={image} />
-        <W.titleContainer>
-          {isCenterSlide && (
-            <W.Title key={titleKey} ref={titleRef} isOverflow={isOverflow}>
+        {isCenterSlide && (
+          <W.TitleContainer>
+            <W.Title
+              key={`${titleKey}-1`}
+              ref={titleRef}
+              isOverflow={isOverflow}
+              widthScroll={widthScroll}
+            >
               {title}
+              {isOverflow && (
+                <span>
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                  {title}
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                </span>
+              )}
             </W.Title>
-          )}
-        </W.titleContainer>
+          </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
@@ -60,17 +60,14 @@ export const Card = styled.div`
   }
 `;
 
-export const titleContainer = styled.div`
+export const TitleContainer = styled.div`
   width: 100%;
   overflow: hidden;
 `;
 
-const animate = keyframes`
-  0% {
-    transform: translateX(0);
-  }
+const animate = (widthScroll) => keyframes`
   100% {
-    transform: translateX(-250%);
+    transform: translateX(-${widthScroll / 2}px);
   }
 `;
 
@@ -87,9 +84,9 @@ export const Title = styled.p`
   white-space: nowrap;
   display: inline-block;
 
-  padding-left: ${(props) => (props.isOverflow ? '100%' : '0')};
-  animation: ${(props) => (props.isOverflow ? animate : 'none')} 10s linear
-    infinite;
+  animation: ${(props) =>
+      props.isOverflow ? animate(props.widthScroll) : 'none'}
+    ${(props) => props.widthScroll / 130}s 1s linear infinite;
 
   @media (max-width: 1920px) {
     font-size: 28px;