@jk-core/components 1.1.17 → 1.1.19

package/src/common/Pagination/arrow-right.svg

@@ -1,12 +1,12 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg width="30px" height="30px" viewBox="0 0 24 24" fill="#000000" xmlns="http://www.w3.org/2000/svg">
-
-<g id="SVGRepo_bgCarrier"/>
-
-<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
-<g id="SVGRepo_iconCarrier"> <path d="M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z"/> </g>
-
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="30px" height="30px" viewBox="0 0 24 24" fill="#000000" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <path d="M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z"/> </g>
+
 </svg>

package/src/common/Pagination/index.tsx

@@ -1,156 +1,156 @@
-
-import { useMemo, useState } from 'react';
-import LeftArrowIcon from './arrow-left.svg';
-import RightArrowIcon from './arrow-right.svg';
-import styles from './Pagination.module.scss';
-
-interface PaginationProps {
-  /**
-   * 총 페이지 수
-   */
-  totalPage: number;
-  /**
-   * 현재 페이지
-   */
-  currentPage: number;
-
-  /**
-   * 페이지 크기 (기본값: false)
-   * true로 설정하면 보여지는 페이지의 개수가 5개에서 7개로 늘어납니다.
-   */
-  large?: boolean;
-  /**
-   * 페이지 클릭 핸들러
-   */
-  onPageClick: (page: number) => void;
-}
-
-export default function Pagination({ totalPage, currentPage, onPageClick, large = false }: PaginationProps) {
-  const [animation, setAnimation] = useState<'left' | 'right' | 'doubleRight' | 'doubleLeft' | 'tripleRight' | 'tripleLeft' | ''>('');
-  const [selectedPage, setSelectedPage] = useState(currentPage || 1);
-  const weight = useMemo(() => (large ? 2 : 0), [large]);
-
-  const pageArray = useMemo(() => {
-    if (!totalPage) return Array.from({ length: 9 + weight }).map((_, i) => (i === 2 ? 1 : null));
-
-    return Array.from({ length: 9 + weight }).map((_, i) => {
-      const pageIndex = selectedPage + i - 2 - (weight / 2) ;
-
-      if (pageIndex < 1 || pageIndex > totalPage) {
-        return null;
-      }
-      return pageIndex;
-    });
-  }, [selectedPage, totalPage, weight]);
-
-  const handlePageClick = (page: number) => {
-    if (page > totalPage || page < 1) return;
-    onPageClick(page);
-    if (page === null) return;
-    const diff = page - selectedPage;
-
-    switch (diff) {
-      case 1:
-        setAnimation('right');
-        break;
-      case -1:
-        setAnimation('left');
-        break;
-      case 2:
-        setAnimation('doubleRight');
-        break;
-      case -2:
-        setAnimation('doubleLeft');
-        break;
-      case 3:
-        setAnimation('tripleRight');
-        break;
-      case -3:
-        setAnimation('tripleLeft');
-        break;
-      default:
-        setAnimation('');
-    }
-
-    setSelectedPage(page);
-
-    setTimeout(() => {
-      setAnimation('');
-    }, 200);
-  };
-
-  return (
-    <div className={styles.pagination}>
-      <button
-        className={`${styles.arrow} ${selectedPage <= 1 ? styles['arrow--disabled'] : '' }`}
-        type="button"
-        onClick={() => handlePageClick(selectedPage - 1)}
-      >
-        <LeftArrowIcon />
-      </button>
-      <div
-        className={styles.slider}
-        style={{ width: `${(8 + weight) * 40}px` }}
-      >
-        <div
-          className={styles.track}
-        />
-        <div className={styles.portal}>
-          {selectedPage > (3 + weight / 2) && (
-            < >
-              <button
-                className={styles.page}
-                type="button"
-                onClick={() => handlePageClick(1)}
-              >1
-              </button>
-              <span className={styles.portal__ellipsis}>•••</span>
-            </>
-          )}
-        </div>
-        <div
-          className={styles.pages}
-          style={{ width: `${(5 + weight) * 40}px` }}
-        >
-          <div className={`${styles.pageWrapper} ${animation === 'left' ? styles.left : ''} ${styles[animation]}`}>
-            {pageArray.map((page, index) => (
-              <button
-                className={`${styles.page} ${selectedPage === page ? styles['page--selected'] : ''}`}
-                key={index}
-                type="button"
-                disabled={page === null}
-                onClick={() => {
-                  if (page !== null) {
-                    handlePageClick(page);
-                  }
-                }}
-              >
-                <span>{page}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-        <div className={styles.portal}>
-          {selectedPage < totalPage - (2 + weight / 2) && (
-            <>
-              <span className={styles.portal__ellipsis}>•••</span>
-              <button
-                className={styles.page}
-                type="button"
-                onClick={() => handlePageClick(totalPage)}
-              >{totalPage}
-              </button>
-            </>
-          )}
-        </div>
-      </div>
-      <button
-        className={`${styles.arrow} ${selectedPage >= totalPage ? styles['arrow--disabled'] : ''}`}
-        type="button"
-        onClick={() => handlePageClick(selectedPage + 1)}
-      >
-        <RightArrowIcon />
-      </button>
-    </div>
-  );
-}
+
+import { useMemo, useState } from 'react';
+import LeftArrowIcon from './arrow-left.svg';
+import RightArrowIcon from './arrow-right.svg';
+import styles from './Pagination.module.scss';
+
+interface PaginationProps {
+  /**
+   * 총 페이지 수
+   */
+  totalPage: number;
+  /**
+   * 현재 페이지
+   */
+  currentPage: number;
+
+  /**
+   * 페이지 크기 (기본값: false)
+   * true로 설정하면 보여지는 페이지의 개수가 5개에서 7개로 늘어납니다.
+   */
+  large?: boolean;
+  /**
+   * 페이지 클릭 핸들러
+   */
+  onPageClick: (page: number) => void;
+}
+
+export default function Pagination({ totalPage, currentPage, onPageClick, large = false }: PaginationProps) {
+  const [animation, setAnimation] = useState<'left' | 'right' | 'doubleRight' | 'doubleLeft' | 'tripleRight' | 'tripleLeft' | ''>('');
+  const [selectedPage, setSelectedPage] = useState(currentPage || 1);
+  const weight = useMemo(() => (large ? 2 : 0), [large]);
+
+  const pageArray = useMemo(() => {
+    if (!totalPage) return Array.from({ length: 9 + weight }).map((_, i) => (i === 2 ? 1 : null));
+
+    return Array.from({ length: 9 + weight }).map((_, i) => {
+      const pageIndex = selectedPage + i - 2 - (weight / 2) ;
+
+      if (pageIndex < 1 || pageIndex > totalPage) {
+        return null;
+      }
+      return pageIndex;
+    });
+  }, [selectedPage, totalPage, weight]);
+
+  const handlePageClick = (page: number) => {
+    if (page > totalPage || page < 1) return;
+    onPageClick(page);
+    if (page === null) return;
+    const diff = page - selectedPage;
+
+    switch (diff) {
+      case 1:
+        setAnimation('right');
+        break;
+      case -1:
+        setAnimation('left');
+        break;
+      case 2:
+        setAnimation('doubleRight');
+        break;
+      case -2:
+        setAnimation('doubleLeft');
+        break;
+      case 3:
+        setAnimation('tripleRight');
+        break;
+      case -3:
+        setAnimation('tripleLeft');
+        break;
+      default:
+        setAnimation('');
+    }
+
+    setSelectedPage(page);
+
+    setTimeout(() => {
+      setAnimation('');
+    }, 200);
+  };
+
+  return (
+    <div className={styles.pagination}>
+      <button
+        className={`${styles.arrow} ${selectedPage <= 1 ? styles['arrow--disabled'] : '' }`}
+        type="button"
+        onClick={() => handlePageClick(selectedPage - 1)}
+      >
+        <LeftArrowIcon />
+      </button>
+      <div
+        className={styles.slider}
+        style={{ width: `${(8 + weight) * 40}px` }}
+      >
+        <div
+          className={styles.track}
+        />
+        <div className={styles.portal}>
+          {selectedPage > (3 + weight / 2) && (
+            < >
+              <button
+                className={styles.page}
+                type="button"
+                onClick={() => handlePageClick(1)}
+              >1
+              </button>
+              <span className={styles.portal__ellipsis}>•••</span>
+            </>
+          )}
+        </div>
+        <div
+          className={styles.pages}
+          style={{ width: `${(5 + weight) * 40}px` }}
+        >
+          <div className={`${styles.pageWrapper} ${animation === 'left' ? styles.left : ''} ${styles[animation]}`}>
+            {pageArray.map((page, index) => (
+              <button
+                className={`${styles.page} ${selectedPage === page ? styles['page--selected'] : ''}`}
+                key={index}
+                type="button"
+                disabled={page === null}
+                onClick={() => {
+                  if (page !== null) {
+                    handlePageClick(page);
+                  }
+                }}
+              >
+                <span>{page}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className={styles.portal}>
+          {selectedPage < totalPage - (2 + weight / 2) && (
+            <>
+              <span className={styles.portal__ellipsis}>•••</span>
+              <button
+                className={styles.page}
+                type="button"
+                onClick={() => handlePageClick(totalPage)}
+              >{totalPage}
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+      <button
+        className={`${styles.arrow} ${selectedPage >= totalPage ? styles['arrow--disabled'] : ''}`}
+        type="button"
+        onClick={() => handlePageClick(selectedPage + 1)}
+      >
+        <RightArrowIcon />
+      </button>
+    </div>
+  );
+}

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