fix club name width with club card

packages/web/src/features/clubs/components/ClubCard.tsx

@@ -19,6 +19,7 @@ import {
 import isStudent from "@sparcs-clubs/web/utils/isStudent";
 
 import ClubRegistrationButtonWrapper from "./_atomic/ClubRegistrationButtonWrapper";
+// import ScrollingText from "./_atomic/ScrollingText";
 
 import type { ApiClb001ResponseOK } from "@sparcs-clubs/interface/api/club/endpoint/apiClb001";
 
@@ -37,7 +38,7 @@ const ClubCardRow = styled.div.withConfig({
 })<{ isMobile: boolean }>`
   display: flex;
   flex-direction: row;
-  gap: 20px;
+  gap: 16px;
   justify-content: space-between;
   align-items: center;
 `;
@@ -58,13 +59,13 @@ const ClubCardNameWithTag = styled.div`
   align-items: center;
   gap: 4px;
   flex: 1 0 0;
+  overflow: hidden;
+  white-space: nowrap;
 `;
 
 const ClubName = styled.div.withConfig({
   shouldForwardProp: prop => isPropValid(prop),
 })<{ isMobile: boolean }>`
-  display: flex;
-  flex-direction: column;
   flex: 1 0 0;
   width: 100%;
   font-size: ${({ isMobile }) => (isMobile ? "16px" : "20px")};
@@ -92,6 +93,8 @@ const ClubCard: React.FC<ClubCardProps> = ({
             </Tag>
           )}
           <ClubName isMobile={isMobile}>{club.name_kr}</ClubName>
+          {/* 돌아가는 텍스트를 만들 수 있어요
+             <ScrollingText isMobile={isMobile} >{club.name_kr}</ScrollingText> */}
         </ClubCardNameWithTag>
         <FlexWrapper direction="row" gap={4}>
           <Icon type="person" size={16} />

packages/web/src/features/clubs/components/_atomic/ScrollingText.tsx

@@ -0,0 +1,96 @@
+// @eel width를 넘는 텍스트에 대해 좌우로 스크롤되는 텍스트 컴포넌트
+// ClubCard에서 사용될 목적으로 개발되었지만 실제로 사용되지 않았음
+
+import React, { useRef } from "react";
+// import React, { useEffect, useRef, useState } from "react";
+
+import styled from "styled-components";
+
+import fonts from "@sparcs-clubs/web/styles/themes/fonts";
+
+const ScrollingTextWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const ScrollingTextContent = styled.div<{
+  shouldScroll: boolean;
+  isMobile: boolean;
+}>`
+  display: inline-block;
+  white-space: nowrap;
+  font-size: ${({ isMobile }) => (isMobile ? "16px" : "20px")};
+  line-height: ${({ isMobile }) => (isMobile ? "20px" : "24px")};
+  font-weight: ${fonts.WEIGHT.MEDIUM};
+  ${({ shouldScroll }) =>
+    shouldScroll &&
+    `
+    display: flex;
+    gap: 20px;
+    animation: scroll-text 10s linear infinite;
+  `}
+
+  @keyframes scroll-text {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+`;
+
+const ScrollingText: React.FC<{ isMobile: boolean; children: string }> = ({
+  isMobile,
+  children,
+}) => {
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const shouldScroll = true;
+
+  // width가 길 경우에만 스크롤되는 로직
+  //   const [shouldScroll, setShouldScroll] = useState(false);
+
+  //   useEffect(() => {
+  //     if (wrapperRef.current && contentRef.current) {
+  //       const wrapperWidth = wrapperRef.current.offsetWidth;
+  //       const contentWidth = contentRef.current.offsetWidth;
+
+  //       setShouldScroll(contentWidth > wrapperWidth);
+  //     }
+  //   }, [children]);
+
+  return (
+    <ScrollingTextWrapper ref={wrapperRef}>
+      <ScrollingTextContent
+        ref={contentRef}
+        shouldScroll={shouldScroll}
+        isMobile={isMobile}
+      >
+        {children}
+        {shouldScroll && (
+          <div style={{ fontWeight: fonts.WEIGHT.MEDIUM }}>{children}</div>
+        )}
+        {shouldScroll && (
+          <div style={{ fontWeight: fonts.WEIGHT.MEDIUM }}>{children}</div>
+        )}
+        {shouldScroll && (
+          <div style={{ fontWeight: fonts.WEIGHT.MEDIUM }}>{children}</div>
+        )}{" "}
+        {shouldScroll && (
+          <div style={{ fontWeight: fonts.WEIGHT.MEDIUM }}>{children}</div>
+        )}
+        {shouldScroll && (
+          <div style={{ fontWeight: fonts.WEIGHT.MEDIUM }}>{children}</div>
+        )}
+        {shouldScroll && (
+          <div style={{ fontWeight: fonts.WEIGHT.MEDIUM }}>{children}</div>
+        )}
+      </ScrollingTextContent>
+    </ScrollingTextWrapper>
+  );
+};
+
+export default ScrollingText;