From d901e5e55006599406e7dea4ee58341428fa8738 Mon Sep 17 00:00:00 2001
From: MinJi Cho <jam96013@gmail.com>
Date: Thu, 22 May 2025 19:51:35 +0900
Subject: [PATCH] =?UTF-8?q?[refactor]=20GradientScrollable=20=EB=A6=AC?=
 =?UTF-8?q?=EC=95=A1=ED=8A=B8=20=EC=83=81=ED=83=9C=20=EB=B0=8F=20=EB=A6=AC?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=EC=98=B5=EC=A0=80=EB=B2=84=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=9C=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81(=EC=9A=94=EC=86=8C=20?=
 =?UTF-8?q?=EB=84=88=EB=B9=84=EC=99=80=20=EC=9A=94=EC=86=8C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EB=84=88=EB=B9=84=20=EB=B9=84=EA=B5=90=20?=
 =?UTF-8?q?=EB=B0=A9=EC=8B=9D=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../team/_components/TeamBanner/styles.ts     |  3 +-
 .../common/Scroll/GradientScrollable.tsx      | 36 ++++++++++++++-----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/app/(team)/team/_components/TeamBanner/styles.ts b/src/app/(team)/team/_components/TeamBanner/styles.ts
index e94a8923..6f5653ca 100644
--- a/src/app/(team)/team/_components/TeamBanner/styles.ts
+++ b/src/app/(team)/team/_components/TeamBanner/styles.ts
@@ -20,7 +20,6 @@ export const teamBannerImgStyle =
 
 export const teamBannerTitleStyle = clsx(
   'text-xl-bold',
-  'relative flex-1',
-  'laptop:max-w-[800px] tablet:max-w-[460px] max-w-[245px]',
+  'relative flex-1 pr-3',
   'min-w-0'
 );
diff --git a/src/components/common/Scroll/GradientScrollable.tsx b/src/components/common/Scroll/GradientScrollable.tsx
index 5b60f412..038a358c 100644
--- a/src/components/common/Scroll/GradientScrollable.tsx
+++ b/src/components/common/Scroll/GradientScrollable.tsx
@@ -1,6 +1,5 @@
-'use client';
 import clsx from 'clsx';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 interface GradientScrollableProps {
   children: React.ReactNode;
@@ -20,8 +19,23 @@ const GradientScrollable = ({
   className,
   color = '#272e3f',
 }: GradientScrollableProps) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
   const [isScrollMove, setIsScrollMove] = useState(false);
 
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver(() => {
+      setIsOverflowing(el.scrollWidth > el.clientWidth);
+    });
+
+    observer.observe(el);
+
+    return () => observer.disconnect();
+  }, [children]);
+
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const { scrollLeft } = e.currentTarget;
     setIsScrollMove(scrollLeft >= 10);
@@ -30,6 +44,7 @@ const GradientScrollable = ({
   return (
     <div className="relative">
       <div
+        ref={scrollRef}
         onScroll={handleScroll}
         className={clsx(
           'scrollbar-hide overflow-x-auto whitespace-nowrap',
@@ -38,12 +53,17 @@ const GradientScrollable = ({
       >
         {children}
       </div>
-      <div
-        className={clsx(overflowTextGradientStyle, isScrollMove && 'opacity-0')}
-        style={{
-          background: `linear-gradient(to left, ${color}, transparent)`,
-        }}
-      />
+      {isOverflowing && (
+        <div
+          className={clsx(
+            overflowTextGradientStyle,
+            isScrollMove && 'opacity-0'
+          )}
+          style={{
+            background: `linear-gradient(to left, ${color}, transparent)`,
+          }}
+        />
+      )}
     </div>
   );
 };