@jk-core/components 1.1.18 → 1.1.19

package/src/common/RollingBanner/RollingBanner.module.scss

@@ -0,0 +1,126 @@
+@keyframes scroll {
+  0% {
+    transform: translateX(0%);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes scroll-column {
+  0% {
+    transform: translateY(0%);
+  }
+
+  100% {
+    transform: translateY(-100%);
+  }
+}
+
+.marquee-container {
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  width: 100%;
+
+  &--column {
+    overflow: hidden;
+    flex-direction: column;
+    height: 100%;
+    width: auto;
+  }
+}
+
+.overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  @mixin gradient {
+    background: linear-gradient(to right, var(--gradient-color), rgb(255, 255, 255, 0));
+  }
+
+  @mixin gradientColumn {
+    background: linear-gradient(to bottom, var(--gradient-color), rgb(255, 255, 255, 0));
+  }
+
+  &::before,
+  &::after {
+    @include gradient;
+    content: "";
+    height: 100%;
+    position: absolute;
+    width: var(--gradient-width);
+    z-index: 2;
+    pointer-events: none;
+    touch-action: none;
+  }
+
+  &::after {
+    right: 0;
+    top: 0;
+    transform: rotateZ(180deg);
+  }
+
+  &::before {
+    left: 0;
+    top: 0;
+  }
+
+  // Column direction용 gradient
+  &--column {
+    &::before,
+    &::after {
+      @include gradientColumn;
+      width: 100%;
+      height: var(--gradient-width);
+    }
+
+    &::before {
+      left: 0;
+      top: 0;
+      transform: none;
+    }
+
+    &::after {
+      inset: auto auto 0 0;
+      transform: rotateZ(180deg);
+    }
+  }
+}
+
+.marquee {
+  flex: 0 0 auto;
+  width: auto;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  animation: scroll var(--duration, 10s) linear infinite;
+  animation-direction: var(--direction, normal);
+  flex-direction: var(--flex-direction, row);
+
+  // Column direction 전용 클래스
+  &--column {
+    flex-direction: column;
+    animation-name: scroll-column;
+    animation-duration: var(--duration, 10s);
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: var(--direction, normal);
+  }
+}
+
+.initial-child-container {
+  flex: 0 0 auto;
+  width: auto;
+  display: flex;
+  flex-flow: var(--flex-direction, row) nowrap;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.child {
+  transform: var(--transform);
+}

package/src/common/RollingBanner/index.tsx

@@ -0,0 +1,140 @@
+import { Children, Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import styles from './RollingBanner.module.scss';
+
+interface RollingBannerProps {
+  speed?: number; // 속도 (픽셀/초)
+  reverse?: boolean; // 역방향 재생 여부
+  children?: React.ReactNode | React.ReactNode[];
+  gradientColor?: string;
+  gradient?: boolean;
+  gradientWidth?: number | string;
+  direction?: 'row' | 'column';
+}
+
+export default function RollingBanner({
+  speed = 50, gradient = true, gradientColor = 'white', gradientWidth = 200,
+  reverse = false, children, direction = 'row' }: RollingBannerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const marqueeRef = useRef<HTMLDivElement>(null);
+  const [isMounted, setIsMounted] = useState(false);
+  const [marqueeWidth, setMarqueeWidth] = useState(0);
+  const [repeat, setRepeat] = useState(1);
+
+  const calculateWidth = useCallback(() => {
+    if (marqueeRef.current && containerRef.current) {
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const marqueeRect = marqueeRef.current.getBoundingClientRect();
+
+      // direction에 따라 width 또는 height 계산
+      const containerSize = direction === 'row' ? containerRect.width : containerRect.height;
+      const marqueeSize = direction === 'row' ? marqueeRect.width : marqueeRect.height;
+
+      if (containerSize && marqueeSize) {
+        setRepeat(
+          marqueeSize < containerSize
+            ? Math.ceil(containerSize / marqueeSize)
+            : 1,
+        );
+      } else {
+        setRepeat(1);
+      }
+
+      setMarqueeWidth(marqueeSize);
+    }
+  }, [containerRef, direction]);
+
+  const duration = useMemo(() => {
+    const calculatedDuration = (marqueeWidth * repeat) / speed;
+    // duration이 0이거나 유효하지 않으면 기본값 사용
+    return calculatedDuration > 0 && Number.isFinite(calculatedDuration) ? calculatedDuration : 10;
+  }, [marqueeWidth, repeat, speed]);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isMounted) return;
+
+    calculateWidth();
+    if (marqueeRef.current && containerRef.current) {
+      const resizeObserver = new ResizeObserver(() => calculateWidth());
+      resizeObserver.observe(containerRef.current);
+      resizeObserver.observe(marqueeRef.current);
+      return () => {
+        if (!resizeObserver) return;
+        resizeObserver.disconnect();
+      };
+    }
+  }, [calculateWidth, containerRef, isMounted]);
+
+  useEffect(() => {
+    calculateWidth();
+  }, [calculateWidth, children]);
+
+  const marqueeStyle = useMemo(
+    () => {
+      const style = {
+        ['--direction' as string]: reverse ? 'reverse' : 'normal',
+        ['--duration' as string]: `${duration}s`,
+        ['--flex-direction' as string]: direction,
+        ['--animation-name' as string]: direction === 'column' ? 'scroll-column' : 'scroll',
+      };
+
+      return style;
+    },
+    [reverse, duration, direction],
+  );
+
+  const repeatChildren = useCallback((repeat: number) => {
+    return [
+      ...Array(Number.isFinite(repeat) && repeat >= 0 ? repeat : 0),
+    ].map((_, index) => (
+      <Fragment key={index}>
+        {Children.map(children, (child) => (
+          <div className={styles.child}>
+            {child}
+          </div>
+        ))}
+      </Fragment>
+    ));
+  }, [children]);
+
+  const gradientStyle = useMemo(
+    () => ({
+      ['--gradient-color' as string]: gradientColor,
+      ['--gradient-width' as string]:
+        typeof gradientWidth === 'number'
+          ? `${gradientWidth}px`
+          : gradientWidth,
+    }),
+    [gradientColor, gradientWidth]);
+
+  return (
+    <div
+      className={`${styles['marquee-container']} ${direction === 'column' ? styles['marquee-container--column'] : ''}`}
+      ref={containerRef}
+    >
+      {gradient && <div style={gradientStyle} className={`${styles.overlay} ${direction === 'column' ? styles['overlay--column'] : ''}`} />}
+      <div
+        className={`${styles.marquee} ${direction === 'column' ? styles['marquee--column'] : ''}`}
+        style={marqueeStyle}
+      >
+        <div className={styles['initial-child-container']} ref={marqueeRef} style={marqueeStyle}>
+          {Children.map(children, (child) => {
+            return (
+              <div className={styles.child}>
+                {child}
+              </div>
+            );
+          })}
+        </div>
+        {repeatChildren(repeat - 1)}
+      </div>
+      <div className={`${styles.marquee} ${direction === 'column' ? styles['marquee--column'] : ''}`} style={marqueeStyle}>
+        {repeatChildren(repeat)}
+      </div>
+
+    </div>
+  );
+}

package/src/index.tsx

@@ -1,6 +1,7 @@
 import Breadcrumbs, { BreadcrumbsItem } from '@/common/Breadcrumbs';
 import Button from '@/common/Button';
 import Pagination from '@/common/Pagination';
+import RollingBanner from '@/common/RollingBanner';
 import Skeleton from '@/common/Skeleton';
 import SwitchButton from '@/common/SwitchButton';
 import Table from '@/common/Table';
@@ -8,15 +9,16 @@ import Calendar from './Calendar';
 import { CalendarRange, CalendarView } from './Calendar/type';
 import Accordion from './common/Accordion';
 import Card from './common/Card';
+import Carousel from './common/Carousel';
 import DropDown from './common/DropDown';
 import SegmentButton from './common/SegmentButton';
 
 export {
   Calendar, Accordion, Breadcrumbs, Button,
   Pagination, Skeleton, SwitchButton,
-  Card, DropDown, SegmentButton, BreadcrumbsItem, Table,
+  Card, DropDown, SegmentButton, BreadcrumbsItem, Table, Carousel, RollingBanner,
 };
 
 export type { CalendarView, CalendarRange };
 
-import './index.scss';
+import './index.scss';