@jk-core/components 1.1.17 → 1.1.19

package/src/common/Carousel/index.tsx

@@ -0,0 +1,411 @@
+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 - 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>
+  );
+}

package/src/common/Divider/Divider.module.scss

@@ -1,101 +1,101 @@
-.divider {
-  display: flex;
-  align-items: center;
-  margin: 16px 0;
-  align-self: center;
-  justify-self: center;
-
-  &.vertical {
-    flex-direction: column;
-    height: 100px;
-    width: auto;
-    margin: 0 16px;
-  }
-}
-
-.content {
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: "";
-    flex: 1;
-    height: 1px;
-    background-color: var(--G-30);
-  }
-
-  .vertical & {
-    flex-direction: column;
-    height: 100%;
-    width: auto;
-
-    &::before,
-    &::after {
-      width: 1px;
-      height: auto;
-      flex: 1;
-    }
-  }
-}
-
-.text {
-  padding: 0 16px;
-  color: var(--G-70);
-  font-size: 14px;
-  white-space: nowrap;
-
-  .vertical & {
-    padding: 16px 0;
-    writing-mode: vertical-rl;
-  }
-}
-
-// 텍스트가 없을 때는 전체 라인만 표시
-.noText .content {
-  &::before {
-    flex: 1;
-  }
-
-  &::after {
-    display: none;
-  }
-}
-
-// 정렬 옵션
-.left .content::before {
-  flex: 0.2;
-}
-
-.right .content::after {
-  flex: 0.2;
-}
-
-.center .content::before,
-.center .content::after {
-  flex: 1;
-}
-
-.full {
-  width: 100%;
-  height: 100%;
-}
-
-.middle {
-  width: 80%;
-  height: 80%;
-}
-
-.short {
-  width: 50%;
-  height: 50%;
-}
-
-.horizontal {
-  height: 1px !important;
-}
-
-.vertical {
-  width: 1px !important;
-}
+.divider {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  align-self: center;
+  justify-self: center;
+
+  &.vertical {
+    flex-direction: column;
+    height: 100px;
+    width: auto;
+    margin: 0 16px;
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background-color: var(--G-30);
+  }
+
+  .vertical & {
+    flex-direction: column;
+    height: 100%;
+    width: auto;
+
+    &::before,
+    &::after {
+      width: 1px;
+      height: auto;
+      flex: 1;
+    }
+  }
+}
+
+.text {
+  padding: 0 16px;
+  color: var(--G-70);
+  font-size: 14px;
+  white-space: nowrap;
+
+  .vertical & {
+    padding: 16px 0;
+    writing-mode: vertical-rl;
+  }
+}
+
+// 텍스트가 없을 때는 전체 라인만 표시
+.noText .content {
+  &::before {
+    flex: 1;
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
+// 정렬 옵션
+.left .content::before {
+  flex: 0.2;
+}
+
+.right .content::after {
+  flex: 0.2;
+}
+
+.center .content::before,
+.center .content::after {
+  flex: 1;
+}
+
+.full {
+  width: 100%;
+  height: 100%;
+}
+
+.middle {
+  width: 80%;
+  height: 80%;
+}
+
+.short {
+  width: 50%;
+  height: 50%;
+}
+
+.horizontal {
+  height: 1px !important;
+}
+
+.vertical {
+  width: 1px !important;
+}

package/src/common/Divider/index.tsx

@@ -1,25 +1,25 @@
-import styles from './Divider.module.scss';
-
-interface DividerProps {
-  children?: React.ReactNode;
-  textAlign?: 'left' | 'center' | 'right';
-  variant?: 'full' | 'middle' | 'short';
-  orientation?: 'horizontal' | 'vertical';
-}
-
-export default function Divider({
-  children,
-  textAlign = 'center',
-  variant = 'full',
-  orientation = 'horizontal',
-}: DividerProps) {
-  const hasText = Boolean(children);
-
-  return (
-    <div className={`${styles.divider} ${styles[variant]} ${styles[textAlign]} ${styles[orientation]} ${!hasText ? styles.noText : ''}`}>
-      <div className={styles.content}>
-        {children && <span className={styles.text}>{children}</span>}
-      </div>
-    </div>
-  );
+import styles from './Divider.module.scss';
+
+interface DividerProps {
+  children?: React.ReactNode;
+  textAlign?: 'left' | 'center' | 'right';
+  variant?: 'full' | 'middle' | 'short';
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export default function Divider({
+  children,
+  textAlign = 'center',
+  variant = 'full',
+  orientation = 'horizontal',
+}: DividerProps) {
+  const hasText = Boolean(children);
+
+  return (
+    <div className={`${styles.divider} ${styles[variant]} ${styles[textAlign]} ${styles[orientation]} ${!hasText ? styles.noText : ''}`}>
+      <div className={styles.content}>
+        {children && <span className={styles.text}>{children}</span>}
+      </div>
+    </div>
+  );
 }