[refactor] #186 GradientScrollable: 모바일 환경 스크롤 UX 개선 목적 반응형 리팩토링

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'
 );

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>
   );
 };