@jk-core/components 1.1.18 → 1.1.20

package/dist/src/common/Carousel/index.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+interface CarouselProps {
+    /**
+     * 캐러셀에 표시할 슬라이드 요소들입니다.
+     * 일반적으로 이미지나 기타 콘텐츠 요소들을 자식으로 전달합니다.
+     */
+    children: ReactNode[];
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    showIndicators?: boolean;
+    showNavigation?: boolean;
+    className?: string;
+}
+export default function Carousel({ children, autoPlay, autoPlayInterval, showIndicators, showNavigation, className, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/common/RollingBanner/index.d.ts

@@ -0,0 +1,11 @@
+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, gradient, gradientColor, gradientWidth, reverse, children, direction }: RollingBannerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/index.d.ts

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

package/dist/src/utils/ts/formatMoney.d.ts

@@ -1,2 +1,2 @@
-declare const formatMoney: (value?: number) => "- 원" | (string | number)[];
+declare const formatMoney: (value?: number) => (string | number)[] | "- 원";
 export default formatMoney;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jk-core/components",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "types": "./dist/index.d.ts",

package/src/common/Carousel/Carousel.module.scss

@@ -0,0 +1,222 @@
+.carousel {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--G-20);
+
+  &:focus {
+    outline: 2px solid #007acc;
+    outline-offset: 2px;
+  }
+}
+
+.carouselContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  cursor: grab;
+  user-select: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.carouselSlides {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  will-change: transform;
+}
+
+.carouselSlide {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Navigation Buttons */
+.carouselButton {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgb(255, 255, 255, 0.9);
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  z-index: 2;
+  box-shadow: 0 2px 8px rgb(0, 0, 0, 0.3);
+
+  &:hover {
+    background: rgb(255, 255, 255, 1);
+    transform: translateY(-50%) scale(1.1);
+    box-shadow: 0 4px 12px rgb(0, 0, 0, 0.15);
+  }
+
+  &:active {
+    transform: translateY(-50%) scale(0.95);
+  }
+}
+
+.carouselButtonPrev {
+  left: 16px;
+}
+
+.carouselButtonNext {
+  right: 16px;
+}
+
+/* Indicators */
+.carouselIndicators {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  z-index: 2;
+}
+
+.carouselIndicator {
+  width: 12px;
+  height: 12px;
+  border: none;
+  border-radius: 50%;
+  background: rgb(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 1px 1px 4px 2px rgb(0, 0, 0, 0.2);
+
+  &:hover {
+    background: rgb(255, 255, 255, 0.8);
+    transform: scale(1.2);
+  }
+
+  &:focus {
+    outline: 2px solid #007acc;
+    outline-offset: 2px;
+  }
+
+  &.active {
+    background: var(--P-70);
+    transform: scale(1.3);
+  }
+}
+
+/* Responsive Design */
+@media (width <= 768px) {
+  .carouselButton {
+    width: 36px;
+    height: 36px;
+    font-size: 18px;
+  }
+
+  .carouselButtonPrev {
+    left: 12px;
+  }
+
+  .carouselButtonNext {
+    right: 12px;
+  }
+
+  .carouselIndicators {
+    bottom: 12px;
+    gap: 6px;
+  }
+
+  .carouselIndicator {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+@media (width <= 480px) {
+  .carouselButton {
+    width: 32px;
+    height: 32px;
+    font-size: 16px;
+  }
+
+  .carouselButtonPrev {
+    left: 8px;
+  }
+
+  .carouselButtonNext {
+    right: 8px;
+  }
+
+  .carouselIndicators {
+    bottom: 8px;
+    gap: 4px;
+  }
+
+  .carouselIndicator {
+    width: 8px;
+    height: 8px;
+  }
+}
+
+/* Touch device optimizations */
+@media (hover: none) and (pointer: coarse) {
+  .carouselContainer {
+    cursor: default;
+  }
+
+  .carouselButton {
+    &:hover {
+      background: rgb(255, 255, 255, 0.9);
+      transform: translateY(-50%);
+      box-shadow: 0 2px 8px rgb(0, 0, 0, 0.1);
+    }
+  }
+
+  .carouselIndicator {
+    &:hover {
+      background: rgb(255, 255, 255, 0.5);
+      transform: none;
+    }
+  }
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+  .carouselSlides {
+    transition: none !important;
+  }
+
+  .carouselButton,
+  .carouselIndicator {
+    transition: none;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .carouselButton {
+    background: white;
+    color: black;
+    border: 2px solid black;
+  }
+
+  .carouselIndicator {
+    background: white;
+    border: 2px solid black;
+
+    &.active {
+      background: black;
+    }
+  }
+}

package/src/common/Carousel/index.tsx

@@ -0,0 +1,417 @@
+'use client';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import styles from './Carousel.module.scss';
+
+interface CarouselProps {
+  /**
+   * 캐러셀에 표시할 슬라이드 요소들입니다.
+   * 일반적으로 이미지나 기타 콘텐츠 요소들을 자식으로 전달합니다.
+   */
+  children: ReactNode[];
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+  showIndicators?: boolean;
+  showNavigation?: boolean;
+  className?: string;
+}
+
+export default function Carousel({
+  children,
+  autoPlay = false,
+  autoPlayInterval = 3000,
+  showIndicators = true,
+  showNavigation = true,
+  className = '',
+}: CarouselProps) {
+  // 무한 루프를 위해 1부터 시작 (복제된 마지막 슬라이드 다음)
+  const [currentIndex, setCurrentIndex] = useState(1);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startPos, setStartPos] = useState(0);
+  const [currentTranslate, setCurrentTranslate] = useState(0);
+  const [prevTranslate, setPrevTranslate] = useState(0);
+
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const autoPlayRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 총 슬라이드 개수 (원본)
+  const totalSlides = children.length;
+
+  // 복제 슬라이드 포함 (앞뒤로 하나씩 추가)
+  const extendedSlides = [
+    children[totalSlides - 1], // 마지막 슬라이드 복제 (앞에)
+    ...children, // 원본 슬라이드들
+    children[0], // 첫 번째 슬라이드 복제 (뒤에)
+  ];
+
+  // 실제 표시되는 슬라이드 인덱스 (인디케이터용)
+  // 무한 루프 시 첫/끝 슬라이드에서 인디케이터가 즉시 업데이트되도록 처리
+  const displayIndex = currentIndex === 0
+    ? totalSlides - 1 // 복제된 마지막 슬라이드(인덱스 0)에 있을 때 마지막 인디케이터 활성화
+    : currentIndex === totalSlides + 1
+      ? 0 // 복제된 첫 번째 슬라이드(인덱스 totalSlides+1)에 있을 때 첫 번째 인디케이터 활성화
+      : currentIndex - 1; // 일반적인 경우
+
+  // 다음 슬라이드로 이동
+  const goToNext = useCallback(() => {
+    if (isTransitioning) return;
+    setIsTransitioning(true);
+    setCurrentIndex((prev) => prev + 1);
+  }, [isTransitioning]);
+
+  // 이전 슬라이드로 이동
+  const goToPrev = useCallback(() => {
+    if (isTransitioning) return;
+    setIsTransitioning(true);
+    setCurrentIndex((prev) => prev - 1);
+  }, [isTransitioning]);
+
+  // 특정 슬라이드로 이동
+  const goToSlide = useCallback((index: number) => {
+    if (isTransitioning) return;
+    if (index === displayIndex) return; // 이미 같은 슬라이드에 있으면 리턴
+
+    setIsTransitioning(true);
+    const targetIndex = index + 1; // 복제 슬라이드 오프셋 적용
+    setCurrentIndex(targetIndex);
+  }, [isTransitioning, displayIndex]);
+
+  // 자동재생 시작
+  const startAutoPlay = useCallback(() => {
+    // 이미 실행 중이면 중복 실행 방지
+    if (autoPlayRef.current) {
+      clearInterval(autoPlayRef.current);
+      autoPlayRef.current = null;
+    }
+
+    if (autoPlay) {
+      autoPlayRef.current = setInterval(() => {
+        goToNext();
+      }, autoPlayInterval);
+    }
+  }, [autoPlay, autoPlayInterval, goToNext]);
+
+  // 자동재생 중지
+  const stopAutoPlay = useCallback(() => {
+    if (autoPlayRef.current) {
+      clearInterval(autoPlayRef.current);
+      autoPlayRef.current = null;
+    }
+  }, []);
+
+  // 드래그 시작
+  const handleDragStart = (clientX: number) => {
+    setIsDragging(true);
+    setStartPos(clientX);
+    setCurrentTranslate(prevTranslate);
+    stopAutoPlay();
+  };
+
+  // 드래그 중
+  const handleDragMove = (clientX: number) => {
+    if (!isDragging) return;
+
+    const diff = clientX - startPos;
+    setCurrentTranslate(prevTranslate + diff);
+  };
+
+  // 드래그 종료
+  const handleDragEnd = () => {
+    if (!isDragging) return;
+
+    setIsDragging(false);
+
+    const containerWidth = containerRef.current?.offsetWidth || 0;
+    const threshold = containerWidth * 0.2; // 20% 이상 드래그시 슬라이드 변경
+    const diff = currentTranslate - prevTranslate;
+
+    if (Math.abs(diff) > threshold) {
+      if (diff > 0) {
+        goToPrev();
+      } else {
+        goToNext();
+      }
+    } else {
+      // 원래 위치로 복귀
+      setCurrentTranslate(prevTranslate);
+    }
+
+    // 드래그 종료 후 autoplay 재시작 (지연 실행으로 안정성 확보)
+    if (autoPlay) {
+      setTimeout(() => {
+        startAutoPlay();
+      }, 100);
+    }
+  };
+
+  // 마우스 이벤트 핸들러
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    handleDragStart(e.clientX);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    handleDragMove(e.clientX);
+  };
+
+  const handleMouseUp = () => {
+    handleDragEnd();
+  };
+
+  const handleMouseLeave = () => {
+    handleDragEnd();
+    // 마우스가 carousel을 벗어나면 autoplay 재시작
+    if (autoPlay && !isDragging) {
+      setTimeout(() => {
+        startAutoPlay();
+      }, 100);
+    }
+  };
+
+  // 터치 이벤트 핸들러
+  const handleTouchStart = (e: React.TouchEvent) => {
+    handleDragStart(e.touches[0].clientX);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    handleDragMove(e.touches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    handleDragEnd();
+  };
+
+  // 키보드 이벤트 핸들러
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowLeft') {
+      goToPrev();
+    } else if (e.key === 'ArrowRight') {
+      goToNext();
+    }
+  };
+
+  // 트랜지션 완료 처리
+  const handleTransitionEnd = () => {
+    setIsTransitioning(false);
+
+    // 무한 루프 처리: 복제된 슬라이드에서 실제 슬라이드로 순간이동
+    if (carouselRef.current) {
+      if (currentIndex === 0) {
+        // 맨 앞의 복제된 슬라이드(마지막 아이템)에 있을 때 실제 마지막 슬라이드로 이동
+        carouselRef.current.style.transition = 'none';
+        setCurrentIndex(totalSlides);
+        const containerWidth = containerRef.current?.offsetWidth || 0;
+        const newTranslate = -totalSlides * containerWidth;
+        setPrevTranslate(newTranslate);
+        setCurrentTranslate(newTranslate);
+        setTimeout(() => {
+          if (carouselRef.current) {
+            carouselRef.current.style.transition = 'transform 0.3s ease-in-out';
+          }
+        }, 10);
+      } else if (currentIndex === totalSlides + 1) {
+        // 맨 뒤의 복제된 슬라이드(첫 번째 아이템)에 있을 때 실제 첫 번째 슬라이드로 이동
+        carouselRef.current.style.transition = 'none';
+        setCurrentIndex(1);
+        const containerWidth = containerRef.current?.offsetWidth || 0;
+        const newTranslate = -1 * containerWidth;
+        setPrevTranslate(newTranslate);
+        setCurrentTranslate(newTranslate);
+        setTimeout(() => {
+          if (carouselRef.current) {
+            carouselRef.current.style.transition = 'transform 0.3s ease-in-out';
+          }
+        }, 10);
+      } else {
+        // 일반적인 경우
+        const containerWidth = containerRef.current?.offsetWidth || 0;
+        const newTranslate = -currentIndex * containerWidth;
+        setPrevTranslate(newTranslate);
+        setCurrentTranslate(newTranslate);
+      }
+    }
+
+    // 트랜지션 완료 후 autoplay 재시작 확인
+    if (autoPlay && !isDragging && !autoPlayRef.current) {
+      setTimeout(() => {
+        startAutoPlay();
+      }, 100);
+    }
+  };
+
+  // 자동재생 효과
+  useEffect(() => {
+    if (autoPlay) {
+      startAutoPlay();
+    }
+
+    return () => {
+      stopAutoPlay();
+    };
+  }, [autoPlay, startAutoPlay, stopAutoPlay]);
+
+  // 초기 로드 시 올바른 위치 설정
+  useEffect(() => {
+    if (containerRef.current) {
+      const containerWidth = containerRef.current.offsetWidth;
+      const newTranslate = -currentIndex * containerWidth;
+      setPrevTranslate(newTranslate);
+      setCurrentTranslate(newTranslate);
+    }
+  }, [currentIndex]);
+
+  // 슬라이드 위치 업데이트
+  useEffect(() => {
+    if (!isDragging && containerRef.current) {
+      const containerWidth = containerRef.current.offsetWidth;
+      const newTranslate = -currentIndex * containerWidth;
+      setPrevTranslate(newTranslate);
+      setCurrentTranslate(newTranslate);
+    }
+  }, [currentIndex, isDragging]);
+
+  // 윈도우 리사이즈 처리
+  useEffect(() => {
+    const handleResize = () => {
+      if (containerRef.current) {
+        const containerWidth = containerRef.current.offsetWidth;
+        const newTranslate = -currentIndex * containerWidth;
+        setPrevTranslate(newTranslate);
+        setCurrentTranslate(newTranslate);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [currentIndex]);
+
+  return (
+    <div
+      className={`${styles.carousel} ${className}`}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+    >
+      <div
+        ref={containerRef}
+        className={styles.carouselContainer}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseLeave}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+        onMouseEnter={() => {
+          // 마우스 호버 시 autoplay 일시정지 (드래그 중이 아닐 때만)
+          if (autoPlay && !isDragging) {
+            stopAutoPlay();
+          }
+        }}
+      >
+        <div
+          ref={carouselRef}
+          className={styles.carouselSlides}
+          style={{
+            transform: `translateX(${currentTranslate}px)`,
+            transition: isDragging ? 'none' : 'transform 0.3s ease-in-out',
+          }}
+          onTransitionEnd={handleTransitionEnd}
+        >
+          {extendedSlides.map((child, index) => (
+            <div key={`slide-${index}`} className={styles.carouselSlide}>
+              {child}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Navigation Buttons */}
+      {showNavigation && (
+        <>
+          <button
+            type="button"
+            className={`${styles.carouselButton} ${styles.carouselButtonPrev}`}
+            onClick={() => {
+              goToPrev();
+              // 버튼 클릭 후 autoplay 재시작
+              if (autoPlay) {
+                setTimeout(() => {
+                  startAutoPlay();
+                }, 100);
+              }
+            }}
+            onMouseEnter={() => autoPlay && stopAutoPlay()}
+            onMouseLeave={() => {
+              if (autoPlay) {
+                setTimeout(() => {
+                  startAutoPlay();
+                }, 100);
+              }
+            }}
+            aria-label="이전 슬라이드"
+          >
+            ‹
+          </button>
+          <button
+            type="button"
+            className={`${styles.carouselButton} ${styles.carouselButtonNext}`}
+            onClick={() => {
+              goToNext();
+              // 버튼 클릭 후 autoplay 재시작
+              if (autoPlay) {
+                setTimeout(() => {
+                  startAutoPlay();
+                }, 100);
+              }
+            }}
+            onMouseEnter={() => autoPlay && stopAutoPlay()}
+            onMouseLeave={() => {
+              if (autoPlay) {
+                setTimeout(() => {
+                  startAutoPlay();
+                }, 100);
+              }
+            }}
+            aria-label="다음 슬라이드"
+          >
+            ›
+          </button>
+        </>
+      )}
+
+      {/* Indicators */}
+      {showIndicators && (
+        <div className={styles.carouselIndicators}>
+          {children.map((_, index) => (
+            <button
+              key={index}
+              type="button"
+              className={`${styles.carouselIndicator} ${
+                index === displayIndex ? styles.active : ''
+              }`}
+              onClick={() => {
+                goToSlide(index);
+                // 인디케이터 클릭 후 autoplay 재시작
+                if (autoPlay) {
+                  setTimeout(() => {
+                    startAutoPlay();
+                  }, 100);
+                }
+              }}
+              onMouseEnter={() => autoPlay && stopAutoPlay()}
+              onMouseLeave={() => {
+                if (autoPlay) {
+                  setTimeout(() => {
+                    startAutoPlay();
+                  }, 100);
+                }
+              }}
+              aria-label={`슬라이드 ${index + 1}로 이동`}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}